import { Interface3 } from './Interface3.jsx';

// figma node: 8129:14604 Base (24 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "type=" + __venc(p.type) + '|' + "size=" + __venc(p.size) + '|' + "state=" + __venc(p.state) + '|' + "icon=" + __venc(p.icon);

export function Base(_p = {}) {
  const props = { ..._p, type: _p.type ?? "primary", size: _p.size ?? "sm", state: _p.state ?? "default", icon: _p.icon ?? "no icon" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgb(246,243,236)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 16px 8px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-5) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-16-5) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 8,
        height: 8,
        borderRadius: 2,
        backgroundColor: "var(--accent-primary)",
        flexShrink: 0,
      }} />
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.08)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,236,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 16px 8px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-5) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-16-5) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 8,
        height: 8,
        borderRadius: 2,
        backgroundColor: "var(--accent-primary)",
        flexShrink: 0,
      }} />
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(246,243,236)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.88)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 16px 8px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-5) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-16-5) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 8,
        height: 8,
        borderRadius: 2,
        backgroundColor: "var(--accent-primary)",
        flexShrink: 0,
      }} />
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgb(246,243,236)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 12px 8px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-5) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
      <div style={{
          position: "relative",
          width: 16,
          height: 16,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.667, 0.667)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body4 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.88)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 12px 8px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-5) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
      <div style={{
          position: "relative",
          width: 16,
          height: 16,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.667, 0.667)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body5 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.08)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,236,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 12px 8px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-16-5) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(246,243,236)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
      <div style={{
          position: "relative",
          width: 16,
          height: 16,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.667, 0.667)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body6 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgb(246,243,236)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 16px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-16-5) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 16,
          height: 16,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.667, 0.667)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
    </div>
  );
  const __body7 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.88)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 16px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-16-5) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 16,
          height: 16,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.667, 0.667)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body8 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.08)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,236,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 16px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-16-5) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 16,
          height: 16,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.667, 0.667)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 14,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "rgb(246,243,236)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
    </div>
  );
  const __body9 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgb(246,243,236)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 8,
        height: 8,
        borderRadius: 2,
        backgroundColor: "var(--accent-primary)",
        flexShrink: 0,
      }} />
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Button"}</span>
    </div>
  );
  const __body10 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.08)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,236,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 8,
        height: 8,
        borderRadius: 2,
        backgroundColor: "var(--accent-primary)",
        flexShrink: 0,
      }} />
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(246,243,236)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
    </div>
  );
  const __body11 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.88)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-5) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 8,
        height: 8,
        borderRadius: 2,
        backgroundColor: "var(--accent-primary)",
        flexShrink: 0,
      }} />
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __body12 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgb(246,243,236)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-4) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body13 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgb(246,243,236)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-4) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
    </div>
  );
  const __body14 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.08)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,236,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-4) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(246,243,236)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body15 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.08)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(246,243,236,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-4) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(246,243,236)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Default"}</span>
    </div>
  );
  const __body16 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.88)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-4) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
    </div>
  );
  const __body17 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 8,
      backgroundColor: "rgba(246,243,236,0.88)",
      backdropFilter: "blur(40px)",
      boxShadow: "inset 0 0 0 1px rgba(10,10,11,0.08), inset 0px 1px 0px 0px rgba(246,243,236,0.16), inset 0px -1px 0px 0px rgba(246,243,236,0.08)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-4) * 1px)",
      padding: "8px 12px 8px 12px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-12-4) * 1px)",
      paddingTop: "calc(var(--spacing-8-5) * 1px)",
      paddingRight: "calc(var(--spacing-12-4) * 1px)",
      paddingBottom: "calc(var(--spacing-8-5) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 12,
          height: 12,
          flexShrink: 0,
        }}>{props.icon1 ?? <Interface3 property1={"arrow-right"} style={{ transform: "scale(0.500, 0.500)", transformOrigin: "0 0" }} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Geist, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "16px",
        color: "rgb(10,10,11)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Hover"}</span>
    </div>
  );
  const __impls = {
    // figma: Type=Primary, Size=Large, Icon=No Icon, State=Default
    "type=primary|size=lg|state=default|icon=no icon": __body0,
    // figma: Type=Secondary, Size=Large, Icon=No Icon, State=Default
    "type=secondary|size=lg|state=default|icon=no icon": __body1,
    // figma: Type=Primary, Size=Large, Icon=No Icon, State=Hover
    "type=primary|size=lg|state=hover|icon=no icon": __body2,
    // figma: Type=Secondary, Size=Large, Icon=No Icon, State=Hover
    "type=secondary|size=lg|state=hover|icon=no icon": __body2,
    // figma: Type=Primary, Size=Large, Icon=Icon Right, State=Default
    "type=primary|size=lg|state=default|icon=icon right": __body3,
    // figma: Type=Primary, Size=Large, Icon=Icon Right, State=Hover
    "type=primary|size=lg|state=hover|icon=icon right": __body4,
    // figma: Type=Secondary, Size=Large, Icon=Icon Right, State=Hover
    "type=secondary|size=lg|state=hover|icon=icon right": __body4,
    // figma: Type=Secondary, Size=Large, Icon=Icon Right, State=Default
    "type=secondary|size=lg|state=default|icon=icon right": __body5,
    // figma: Type=Primary, Size=Large, Icon=Icon Left, State=Default
    "type=primary|size=lg|state=default|icon=icon left": __body6,
    // figma: Type=Primary, Size=Large, Icon=Icon Left, State=Hover
    "type=primary|size=lg|state=hover|icon=icon left": __body7,
    // figma: Type=Secondary, Size=Large, Icon=Icon Left, State=Hover
    "type=secondary|size=lg|state=hover|icon=icon left": __body7,
    // figma: Type=Secondary, Size=Large, Icon=Icon Left, State=Default
    "type=secondary|size=lg|state=default|icon=icon left": __body8,
    // figma: Type=Primary, Size=Small, Icon=No Icon, State=Default
    "type=primary|size=sm|state=default|icon=no icon": __body9,
    // figma: Type=Secondary, Size=Small, Icon=No Icon, State=Default
    "type=secondary|size=sm|state=default|icon=no icon": __body10,
    // figma: Type=Primary, Size=Small, Icon=No Icon, State=Hover
    "type=primary|size=sm|state=hover|icon=no icon": __body11,
    // figma: Type=Secondary, Size=Small, Icon=No Icon, State=Hover
    "type=secondary|size=sm|state=hover|icon=no icon": __body11,
    // figma: Type=Primary, Size=Small, Icon=Icon Right, State=Default
    "type=primary|size=sm|state=default|icon=icon right": __body12,
    // figma: Type=Primary, Size=Small, Icon=Icon Left, State=Default
    "type=primary|size=sm|state=default|icon=icon left": __body13,
    // figma: Type=Secondary, Size=Small, Icon=Icon Right, State=Default
    "type=secondary|size=sm|state=default|icon=icon right": __body14,
    // figma: Type=Secondary, Size=Small, Icon=Icon Left, State=Default
    "type=secondary|size=sm|state=default|icon=icon left": __body15,
    // figma: Type=Primary, Size=Small, Icon=Icon Right, State=Hover
    "type=primary|size=sm|state=hover|icon=icon right": __body16,
    // figma: Type=Primary, Size=Small, Icon=Icon Left, State=Hover
    "type=primary|size=sm|state=hover|icon=icon left": __body17,
    // figma: Type=Secondary, Size=Small, Icon=Icon Right, State=Hover
    "type=secondary|size=sm|state=hover|icon=icon right": __body16,
    // figma: Type=Secondary, Size=Small, Icon=Icon Left, State=Hover
    "type=secondary|size=sm|state=hover|icon=icon left": __body17,
  };
  return (__impls[__vkey(props)] ?? __body9)();
}
export default Base;
