import { ButtonArrowRight } from './ButtonArrowRight.jsx';
import { Interface8 } from './Interface8.jsx';
import { Interface9 } from './Interface9.jsx';

// figma node: 8471:12064 Button (44 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "shape=" + __venc(p.shape) + '|' + "state=" + __venc(p.state) + '|' + "type=" + __venc(p.type) + '|' + "icon=" + __venc(p.icon) + '|' + "size=" + __venc(p.size);

export function Button5(_p = {}) {
  const props = { ..._p, shape: _p.shape ?? "rectangle", state: _p.state ?? "default", type: _p.type ?? "primary", icon: _p.icon ?? "no icon", size: _p.size ?? "sm" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-dark-green)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Primary"}</span>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 2px var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--color-green-600)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Secondary"}</span>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-dark-green)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Tertiary"}</span>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body4 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-700-base)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body5 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-green-light)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body6 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-dark-green)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 16px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Primary"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body7 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-700-base)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 16px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body8 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 16px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body9 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-green-light)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body10 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 2px var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--color-green-600)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Secondary"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body11 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-dark-green)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Tertiary"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body12 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-700-base)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body13 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 2px var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--color-green-500-base)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Secondary"}</span>
    </div>
  );
  const __body14 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-dark-green)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Primary"}</span>
    </div>
  );
  const __body15 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 2px var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--color-green-500-base)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Secondary"}</span>
    </div>
  );
  const __body16 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body17 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-700-base)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body18 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-green-light)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body19 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "20px",
        color: "var(--brand-dark-green)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Tertiary"}</span>
    </div>
  );
  const __body20 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 2px var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--color-green-500-base)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Secondary"}</span>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body21 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 2px var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 20px 12px 20px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-20-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-20-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--color-green-500-base)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Secondary"}</span>
    </div>
  );
  const __body22 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-dark-green)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Primary"}</span>
    </div>
  );
  const __body23 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-dark-green)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Tertiary"}</span>
    </div>
  );
  const __body24 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-700-base)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body25 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-700-base)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body26 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body27 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-green-light)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body28 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-dark-green)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Primary"}</span>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body29 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-dark-green)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Primary"}</span>
    </div>
  );
  const __body30 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-dark-green)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Tertiary"}</span>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body31 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-dark-green)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Tertiary"}</span>
    </div>
  );
  const __body32 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body33 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--color-green-500-base)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 16px 12px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-16-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-ivory-50)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body34 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-green-light)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body35 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "12px 0px 12px 0px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <ButtonArrowRight />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--brand-green-light)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body36 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-green-grass)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 12px 12px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 20,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface9 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body37 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-dark-green)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 12px 12px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 20,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface9 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body38 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-dark-green)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "8px 8px 8px 8px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-8-2) * 1px)",
      paddingTop: "calc(var(--spacing-8-2) * 1px)",
      paddingRight: "calc(var(--spacing-8-2) * 1px)",
      paddingBottom: "calc(var(--spacing-8-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface9 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body39 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-green-grass)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "8px 8px 8px 8px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-8-2) * 1px)",
      paddingTop: "calc(var(--spacing-8-2) * 1px)",
      paddingRight: "calc(var(--spacing-8-2) * 1px)",
      paddingBottom: "calc(var(--spacing-8-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface9 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body40 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-green-grass)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 12px 12px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 20,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface9 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body41 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "rgba(56,29,15,0.04)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(56,29,15,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "12px 12px 12px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-2) * 1px)",
      paddingTop: "calc(var(--spacing-12-2) * 1px)",
      paddingRight: "calc(var(--spacing-12-2) * 1px)",
      paddingBottom: "calc(var(--spacing-12-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 20,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface9 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body42 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "rgba(56,29,15,0.04)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(56,29,15,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "8px 8px 8px 8px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-8-2) * 1px)",
      paddingTop: "calc(var(--spacing-8-2) * 1px)",
      paddingRight: "calc(var(--spacing-8-2) * 1px)",
      paddingBottom: "calc(var(--spacing-8-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface9 property1={"arrow-right"} />}</div>
    </div>
  );
  const __body43 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 6,
      backgroundColor: "var(--brand-green-grass)",
      backdropFilter: "blur(16px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,240,0)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      padding: "8px 8px 8px 8px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-8-2) * 1px)",
      paddingTop: "calc(var(--spacing-8-2) * 1px)",
      paddingRight: "calc(var(--spacing-8-2) * 1px)",
      paddingBottom: "calc(var(--spacing-8-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Interface9 property1={"arrow-right"} />}</div>
    </div>
  );
  const __impls = {
    // figma: Shape=Rectangle, Type=Primary, Size=Large, Icon=No Icon, State=Default
    "shape=rectangle|state=default|type=primary|icon=no icon|size=lg": __body0,
    // figma: Shape=Rectangle, Type=Secondary, Size=Large, Icon=No Icon, State=Default
    "shape=rectangle|state=default|type=secondary|icon=no icon|size=lg": __body1,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Large, Icon=No Icon, State=Default
    "shape=rectangle|state=default|type=tertiary|icon=no icon|size=lg": __body2,
    // figma: Shape=Rectangle, Type=Primary, Size=Large, Icon=No Icon, State=Hover
    "shape=rectangle|state=hover|type=primary|icon=no icon|size=lg": __body3,
    // figma: Shape=Rectangle, Type=Secondary, Size=Large, Icon=No Icon, State=Hover
    "shape=rectangle|state=hover|type=secondary|icon=no icon|size=lg": __body4,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Large, Icon=No Icon, State=Hover
    "shape=rectangle|state=hover|type=tertiary|icon=no icon|size=lg": __body5,
    // figma: Shape=Rectangle, Type=Primary, Size=Large, Icon=Icon Right, State=Default
    "shape=rectangle|state=default|type=primary|icon=icon right|size=lg": __body6,
    // figma: Shape=Rectangle, Type=Secondary, Size=Large, Icon=Icon Right, State=Hover
    "shape=rectangle|state=hover|type=secondary|icon=icon right|size=lg": __body7,
    // figma: Shape=Rectangle, Type=Primary, Size=Large, Icon=Icon Right, State=Hover
    "shape=rectangle|state=hover|type=primary|icon=icon right|size=lg": __body8,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Large, Icon=Icon Right, State=Hover
    "shape=rectangle|state=hover|type=tertiary|icon=icon right|size=lg": __body9,
    // figma: Shape=Rectangle, Type=Secondary, Size=Large, Icon=Icon Right, State=Default
    "shape=rectangle|state=default|type=secondary|icon=icon right|size=lg": __body10,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Large, Icon=Icon Right, State=Default
    "shape=rectangle|state=default|type=tertiary|icon=icon right|size=lg": __body11,
    // figma: Shape=Rectangle, Type=Secondary, Size=Large, Icon=Icon Left, State=Hover
    "shape=rectangle|state=hover|type=secondary|icon=icon left|size=lg": __body12,
    // figma: Shape=Rectangle, Type=Secondary, Size=Large, Icon=Icon Left, State=Default
    "shape=rectangle|state=default|type=secondary|icon=icon left|size=lg": __body13,
    // figma: Shape=Rectangle, Type=Primary, Size=Large, Icon=Icon Left, State=Default
    "shape=rectangle|state=default|type=primary|icon=icon left|size=lg": __body14,
    // figma: Shape=Rectangle, Type=Secondary, Size=Small, Icon=No Icon, State=Default
    "shape=rectangle|state=default|type=secondary|icon=no icon|size=sm": __body15,
    // figma: Shape=Rectangle, Type=Primary, Size=Large, Icon=Icon Left, State=Hover
    "shape=rectangle|state=hover|type=primary|icon=icon left|size=lg": __body16,
    // figma: Shape=Rectangle, Type=Secondary, Size=Small, Icon=No Icon, State=Hover
    "shape=rectangle|state=hover|type=secondary|icon=no icon|size=sm": __body17,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Large, Icon=Icon Left, State=Hover
    "shape=rectangle|state=hover|type=tertiary|icon=icon left|size=lg": __body18,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Large, Icon=Icon Left, State=Default
    "shape=rectangle|state=default|type=tertiary|icon=icon left|size=lg": __body19,
    // figma: Shape=Rectangle, Type=Secondary, Size=Small, Icon=Icon Right, State=Default
    "shape=rectangle|state=default|type=secondary|icon=icon right|size=sm": __body20,
    // figma: Shape=Rectangle, Type=Secondary, Size=Small, Icon=Icon Left, State=Default
    "shape=rectangle|state=default|type=secondary|icon=icon left|size=sm": __body21,
    // figma: Shape=Rectangle, Type=Primary, Size=Small, Icon=No Icon, State=Default
    "shape=rectangle|state=default|type=primary|icon=no icon|size=sm": __body22,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Small, Icon=No Icon, State=Default
    "shape=rectangle|state=default|type=tertiary|icon=no icon|size=sm": __body23,
    // figma: Shape=Rectangle, Type=Secondary, Size=Small, Icon=Icon Right, State=Hover
    "shape=rectangle|state=hover|type=secondary|icon=icon right|size=sm": __body24,
    // figma: Shape=Rectangle, Type=Secondary, Size=Small, Icon=Icon Left, State=Hover
    "shape=rectangle|state=hover|type=secondary|icon=icon left|size=sm": __body25,
    // figma: Shape=Rectangle, Type=Primary, Size=Small, Icon=No Icon, State=Hover
    "shape=rectangle|state=hover|type=primary|icon=no icon|size=sm": __body26,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Small, Icon=No Icon, State=Hover
    "shape=rectangle|state=hover|type=tertiary|icon=no icon|size=sm": __body27,
    // figma: Shape=Rectangle, Type=Primary, Size=Small, Icon=Icon Right, State=Default
    "shape=rectangle|state=default|type=primary|icon=icon right|size=sm": __body28,
    // figma: Shape=Rectangle, Type=Primary, Size=Small, Icon=Icon Left, State=Default
    "shape=rectangle|state=default|type=primary|icon=icon left|size=sm": __body29,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Small, Icon=Icon Right, State=Default
    "shape=rectangle|state=default|type=tertiary|icon=icon right|size=sm": __body30,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Small, Icon=Icon Left, State=Default
    "shape=rectangle|state=default|type=tertiary|icon=icon left|size=sm": __body31,
    // figma: Shape=Rectangle, Type=Primary, Size=Small, Icon=Icon Right, State=Hover
    "shape=rectangle|state=hover|type=primary|icon=icon right|size=sm": __body32,
    // figma: Shape=Rectangle, Type=Primary, Size=Small, Icon=Icon Left, State=Hover
    "shape=rectangle|state=hover|type=primary|icon=icon left|size=sm": __body33,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Small, Icon=Icon Right, State=Hover
    "shape=rectangle|state=hover|type=tertiary|icon=icon right|size=sm": __body34,
    // figma: Shape=Rectangle, Type=Tertiary, Size=Small, Icon=Icon Left, State=Hover
    "shape=rectangle|state=hover|type=tertiary|icon=icon left|size=sm": __body35,
    // figma: Shape=Circle, Type=Primary, Size=Large, Icon=No Icon, State=Hover
    "shape=circle|state=hover|type=primary|icon=no icon|size=lg": __body36,
    // figma: Shape=Circle, Type=Primary, Size=Large, Icon=No Icon, State=Default
    "shape=circle|state=default|type=primary|icon=no icon|size=lg": __body37,
    // figma: Shape=Circle, Type=Primary, Size=Small, Icon=No Icon, State=Default
    "shape=circle|state=default|type=primary|icon=no icon|size=sm": __body38,
    // figma: Shape=Circle, Type=Primary, Size=Small, Icon=No Icon, State=Hover
    "shape=circle|state=hover|type=primary|icon=no icon|size=sm": __body39,
    // figma: Shape=Circle, Type=Secondary, Size=Large, Icon=No Icon, State=Hover
    "shape=circle|state=hover|type=secondary|icon=no icon|size=lg": __body40,
    // figma: Shape=Circle, Type=Secondary, Size=Large, Icon=No Icon, State=Default
    "shape=circle|state=default|type=secondary|icon=no icon|size=lg": __body41,
    // figma: Shape=Circle, Type=Secondary, Size=Small, Icon=No Icon, State=Default
    "shape=circle|state=default|type=secondary|icon=no icon|size=sm": __body42,
    // figma: Shape=Circle, Type=Secondary, Size=Small, Icon=No Icon, State=Hover
    "shape=circle|state=hover|type=secondary|icon=no icon|size=sm": __body43,
  };
  return (__impls[__vkey(props)] ?? __body22)();
}
export default Button5;
