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

// figma node: 9346:4446 Social button (108 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "social=" + __venc(p.social) + '|' + "supportingText=" + __venc(p.supportingText) + '|' + "state=" + __venc(p.state) + '|' + "theme=" + __venc(p.theme);

export function SocialButton(_p = {}) {
  const props = { ..._p, social: _p.social ?? "google", supportingText: _p.supportingText ?? true, state: _p.state ?? "default", theme: _p.theme ?? "brand" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(24,119,242)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(12,99,212)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(24,119,242)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body4 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body5 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body6 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body7 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body8 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Facebook"}</span>
    </div>
  );
  const __body9 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(24,119,242)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body10 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(12,99,212)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body11 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(24,119,242)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body12 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body13 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body14 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body15 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body16 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body17 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"facebook"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body18 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Google"}</span>
    </div>
  );
  const __body19 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Google"}</span>
    </div>
  );
  const __body20 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Google"}</span>
    </div>
  );
  const __body21 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Google"}</span>
    </div>
  );
  const __body22 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Google"}</span>
    </div>
  );
  const __body23 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Google"}</span>
    </div>
  );
  const __body24 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body25 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body26 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body27 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body28 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body29 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"google"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body30 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Apple"}</span>
    </div>
  );
  const __body31 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Apple"}</span>
    </div>
  );
  const __body32 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Figma"}</span>
    </div>
  );
  const __body33 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Figma"}</span>
    </div>
  );
  const __body34 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Figma"}</span>
    </div>
  );
  const __body35 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Figma"}</span>
    </div>
  );
  const __body36 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Figma"}</span>
    </div>
  );
  const __body37 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Figma"}</span>
    </div>
  );
  const __body38 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Figma"}</span>
    </div>
  );
  const __body39 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Figma"}</span>
    </div>
  );
  const __body40 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(234,76,137)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body41 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(230,40,114)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body42 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(234,76,137)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body43 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body44 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body45 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body46 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body47 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body48 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Dribbble"}</span>
    </div>
  );
  const __body49 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with X"}</span>
    </div>
  );
  const __body50 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-white)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with X"}</span>
    </div>
  );
  const __body51 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with X"}</span>
    </div>
  );
  const __body52 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with X"}</span>
    </div>
  );
  const __body53 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with X"}</span>
    </div>
  );
  const __body54 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with X"}</span>
    </div>
  );
  const __body55 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with X"}</span>
    </div>
  );
  const __body56 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with X"}</span>
    </div>
  );
  const __body57 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Apple"}</span>
    </div>
  );
  const __body58 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Apple"}</span>
    </div>
  );
  const __body59 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"brand"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Apple"}</span>
    </div>
  );
  const __body60 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Apple"}</span>
    </div>
  );
  const __body61 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-hover)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Apple"}</span>
    </div>
  );
  const __body62 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 16px 10px 16px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-xl) * 1px)",
      paddingRight: "calc(var(--spacing-xl) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
      <span style={{
        position: "relative",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-secondary-700)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>{props.text1 ?? "Sign in with Apple"}</span>
    </div>
  );
  const __body63 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body64 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "var(--colors-foreground-fg-white)",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body65 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body66 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body67 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body68 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body69 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body70 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body71 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body72 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"figma"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body73 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(234,76,137)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body74 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(230,40,114)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body75 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "rgb(234,76,137)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body76 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body77 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body78 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body79 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body80 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body81 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"dribbble"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body82 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body83 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-base-black)",
      boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body84 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body85 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body86 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body87 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body88 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body89 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"x (twitter)"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body90 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body91 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body92 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"brand"} state={"default"} />}</div>
    </div>
  );
  const __body93 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body94 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary-hover)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
          color: "rgb(152,162,179)",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __body95 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      overflow: "hidden",
      borderRadius: 8,
      backgroundColor: "var(--colors-background-bg-primary)",
      boxShadow: "inset 0 0 0 1px var(--colors-border-border-primary), inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05), 0px 1px 2px 0px rgba(10,13,18,0.05), 0px 0px 0px 2px rgb(255,255,255), 0px 0px 0px 4px rgb(158,119,237)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-lg) * 1px)",
      padding: "10px 10px 10px 10px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 24,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <SocialIcon platform={"apple"} style2={"gray"} state={"default"} />}</div>
    </div>
  );
  const __impls = {
    // figma: Social=Facebook, Supporting text=True, Theme=Brand, State=Default
    "social=facebook|supportingText=true|state=default|theme=brand": __body0,
    // figma: Social=Facebook, Supporting text=True, Theme=Brand, State=Hover
    "social=facebook|supportingText=true|state=hover|theme=brand": __body1,
    // figma: Social=Facebook, Supporting text=True, Theme=Brand, State=Focused
    "social=facebook|supportingText=true|state=focused|theme=brand": __body2,
    // figma: Social=Facebook, Supporting text=True, Theme=Color, State=Default
    "social=facebook|supportingText=true|state=default|theme=color": __body3,
    // figma: Social=Facebook, Supporting text=True, Theme=Color, State=Hover
    "social=facebook|supportingText=true|state=hover|theme=color": __body4,
    // figma: Social=Facebook, Supporting text=True, Theme=Color, State=Focused
    "social=facebook|supportingText=true|state=focused|theme=color": __body5,
    // figma: Social=Facebook, Supporting text=True, Theme=Gray, State=Default
    "social=facebook|supportingText=true|state=default|theme=gray": __body6,
    // figma: Social=Facebook, Supporting text=True, Theme=Gray, State=Hover
    "social=facebook|supportingText=true|state=hover|theme=gray": __body7,
    // figma: Social=Facebook, Supporting text=True, Theme=Gray, State=Focused
    "social=facebook|supportingText=true|state=focused|theme=gray": __body8,
    // figma: Social=Facebook, Supporting text=False, Theme=Brand, State=Default
    "social=facebook|supportingText=false|state=default|theme=brand": __body9,
    // figma: Social=Facebook, Supporting text=False, Theme=Brand, State=Hover
    "social=facebook|supportingText=false|state=hover|theme=brand": __body10,
    // figma: Social=Facebook, Supporting text=False, Theme=Brand, State=Focused
    "social=facebook|supportingText=false|state=focused|theme=brand": __body11,
    // figma: Social=Facebook, Supporting text=False, Theme=Color, State=Default
    "social=facebook|supportingText=false|state=default|theme=color": __body12,
    // figma: Social=Facebook, Supporting text=False, Theme=Color, State=Hover
    "social=facebook|supportingText=false|state=hover|theme=color": __body13,
    // figma: Social=Facebook, Supporting text=False, Theme=Color, State=Focused
    "social=facebook|supportingText=false|state=focused|theme=color": __body14,
    // figma: Social=Facebook, Supporting text=False, Theme=Gray, State=Default
    "social=facebook|supportingText=false|state=default|theme=gray": __body15,
    // figma: Social=Facebook, Supporting text=False, Theme=Gray, State=Hover
    "social=facebook|supportingText=false|state=hover|theme=gray": __body16,
    // figma: Social=Facebook, Supporting text=False, Theme=Gray, State=Focused
    "social=facebook|supportingText=false|state=focused|theme=gray": __body17,
    // figma: Social=Google, Supporting text=True, Theme=Brand, State=Default
    "social=google|supportingText=true|state=default|theme=brand": __body18,
    // figma: Social=Google, Supporting text=True, Theme=Brand, State=Hover
    "social=google|supportingText=true|state=hover|theme=brand": __body19,
    // figma: Social=Google, Supporting text=True, Theme=Brand, State=Focused
    "social=google|supportingText=true|state=focused|theme=brand": __body20,
    // figma: Social=Google, Supporting text=True, Theme=Color, State=Default
    "social=google|supportingText=true|state=default|theme=color": __body18,
    // figma: Social=Google, Supporting text=True, Theme=Color, State=Hover
    "social=google|supportingText=true|state=hover|theme=color": __body19,
    // figma: Social=Google, Supporting text=True, Theme=Color, State=Focused
    "social=google|supportingText=true|state=focused|theme=color": __body20,
    // figma: Social=Google, Supporting text=True, Theme=Gray, State=Default
    "social=google|supportingText=true|state=default|theme=gray": __body21,
    // figma: Social=Google, Supporting text=True, Theme=Gray, State=Hover
    "social=google|supportingText=true|state=hover|theme=gray": __body22,
    // figma: Social=Google, Supporting text=True, Theme=Gray, State=Focused
    "social=google|supportingText=true|state=focused|theme=gray": __body23,
    // figma: Social=Google, Supporting text=False, Theme=Brand, State=Default
    "social=google|supportingText=false|state=default|theme=brand": __body24,
    // figma: Social=Google, Supporting text=False, Theme=Brand, State=Hover
    "social=google|supportingText=false|state=hover|theme=brand": __body25,
    // figma: Social=Google, Supporting text=False, Theme=Brand, State=Focused
    "social=google|supportingText=false|state=focused|theme=brand": __body26,
    // figma: Social=Google, Supporting text=False, Theme=Color, State=Default
    "social=google|supportingText=false|state=default|theme=color": __body24,
    // figma: Social=Google, Supporting text=False, Theme=Color, State=Hover
    "social=google|supportingText=false|state=hover|theme=color": __body25,
    // figma: Social=Google, Supporting text=False, Theme=Color, State=Focused
    "social=google|supportingText=false|state=focused|theme=color": __body26,
    // figma: Social=Google, Supporting text=False, Theme=Gray, State=Default
    "social=google|supportingText=false|state=default|theme=gray": __body27,
    // figma: Social=Google, Supporting text=False, Theme=Gray, State=Hover
    "social=google|supportingText=false|state=hover|theme=gray": __body28,
    // figma: Social=Google, Supporting text=False, Theme=Gray, State=Focused
    "social=google|supportingText=false|state=focused|theme=gray": __body29,
    // figma: Social=Apple, Supporting text=True, Theme=Brand, State=Default
    "social=apple|supportingText=true|state=default|theme=brand": __body30,
    // figma: Social=Apple, Supporting text=True, Theme=Brand, State=Hover
    "social=apple|supportingText=true|state=hover|theme=brand": __body30,
    // figma: Social=Apple, Supporting text=True, Theme=Brand, State=Focused
    "social=apple|supportingText=true|state=focused|theme=brand": __body31,
    // figma: Social=Figma, Supporting text=True, Theme=Brand, State=Default
    "social=figma|supportingText=true|state=default|theme=brand": __body32,
    // figma: Social=Figma, Supporting text=True, Theme=Brand, State=Hover
    "social=figma|supportingText=true|state=hover|theme=brand": __body32,
    // figma: Social=Figma, Supporting text=True, Theme=Brand, State=Focused
    "social=figma|supportingText=true|state=focused|theme=brand": __body33,
    // figma: Social=Figma, Supporting text=True, Theme=Color, State=Default
    "social=figma|supportingText=true|state=default|theme=color": __body34,
    // figma: Social=Figma, Supporting text=True, Theme=Color, State=Hover
    "social=figma|supportingText=true|state=hover|theme=color": __body35,
    // figma: Social=Figma, Supporting text=True, Theme=Color, State=Focused
    "social=figma|supportingText=true|state=focused|theme=color": __body36,
    // figma: Social=Figma, Supporting text=True, Theme=Gray, State=Default
    "social=figma|supportingText=true|state=default|theme=gray": __body37,
    // figma: Social=Figma, Supporting text=True, Theme=Gray, State=Hover
    "social=figma|supportingText=true|state=hover|theme=gray": __body38,
    // figma: Social=Figma, Supporting text=True, Theme=Gray, State=Focused
    "social=figma|supportingText=true|state=focused|theme=gray": __body39,
    // figma: Social=Dribbble, Supporting text=True, Theme=Brand, State=Default
    "social=dribbble|supportingText=true|state=default|theme=brand": __body40,
    // figma: Social=Dribbble, Supporting text=True, Theme=Brand, State=Hover
    "social=dribbble|supportingText=true|state=hover|theme=brand": __body41,
    // figma: Social=Dribbble, Supporting text=True, Theme=Brand, State=Focused
    "social=dribbble|supportingText=true|state=focused|theme=brand": __body42,
    // figma: Social=Dribbble, Supporting text=True, Theme=Color, State=Default
    "social=dribbble|supportingText=true|state=default|theme=color": __body43,
    // figma: Social=Dribbble, Supporting text=True, Theme=Color, State=Hover
    "social=dribbble|supportingText=true|state=hover|theme=color": __body44,
    // figma: Social=Dribbble, Supporting text=True, Theme=Color, State=Focused
    "social=dribbble|supportingText=true|state=focused|theme=color": __body45,
    // figma: Social=Dribbble, Supporting text=True, Theme=Gray, State=Default
    "social=dribbble|supportingText=true|state=default|theme=gray": __body46,
    // figma: Social=Dribbble, Supporting text=True, Theme=Gray, State=Hover
    "social=dribbble|supportingText=true|state=hover|theme=gray": __body47,
    // figma: Social=Dribbble, Supporting text=True, Theme=Gray, State=Focused
    "social=dribbble|supportingText=true|state=focused|theme=gray": __body48,
    // figma: Social=Twitter, Supporting text=True, Theme=Brand, State=Default
    "social=twitter|supportingText=true|state=default|theme=brand": __body49,
    // figma: Social=Twitter, Supporting text=True, Theme=Brand, State=Hover
    "social=twitter|supportingText=true|state=hover|theme=brand": __body49,
    // figma: Social=Twitter, Supporting text=True, Theme=Brand, State=Focused
    "social=twitter|supportingText=true|state=focused|theme=brand": __body50,
    // figma: Social=Twitter, Supporting text=True, Theme=Color, State=Default
    "social=twitter|supportingText=true|state=default|theme=color": __body51,
    // figma: Social=Twitter, Supporting text=True, Theme=Color, State=Hover
    "social=twitter|supportingText=true|state=hover|theme=color": __body52,
    // figma: Social=Twitter, Supporting text=True, Theme=Color, State=Focused
    "social=twitter|supportingText=true|state=focused|theme=color": __body53,
    // figma: Social=Twitter, Supporting text=True, Theme=Gray, State=Default
    "social=twitter|supportingText=true|state=default|theme=gray": __body54,
    // figma: Social=Twitter, Supporting text=True, Theme=Gray, State=Hover
    "social=twitter|supportingText=true|state=hover|theme=gray": __body55,
    // figma: Social=Twitter, Supporting text=True, Theme=Gray, State=Focused
    "social=twitter|supportingText=true|state=focused|theme=gray": __body56,
    // figma: Social=Apple, Supporting text=True, Theme=Color, State=Default
    "social=apple|supportingText=true|state=default|theme=color": __body57,
    // figma: Social=Apple, Supporting text=True, Theme=Color, State=Hover
    "social=apple|supportingText=true|state=hover|theme=color": __body58,
    // figma: Social=Apple, Supporting text=True, Theme=Color, State=Focused
    "social=apple|supportingText=true|state=focused|theme=color": __body59,
    // figma: Social=Apple, Supporting text=True, Theme=Gray, State=Default
    "social=apple|supportingText=true|state=default|theme=gray": __body60,
    // figma: Social=Apple, Supporting text=True, Theme=Gray, State=Hover
    "social=apple|supportingText=true|state=hover|theme=gray": __body61,
    // figma: Social=Apple, Supporting text=True, Theme=Gray, State=Focused
    "social=apple|supportingText=true|state=focused|theme=gray": __body62,
    // figma: Social=Apple, Supporting text=False, Theme=Brand, State=Default
    "social=apple|supportingText=false|state=default|theme=brand": __body63,
    // figma: Social=Apple, Supporting text=False, Theme=Brand, State=Hover
    "social=apple|supportingText=false|state=hover|theme=brand": __body63,
    // figma: Social=Apple, Supporting text=False, Theme=Brand, State=Focused
    "social=apple|supportingText=false|state=focused|theme=brand": __body64,
    // figma: Social=Figma, Supporting text=False, Theme=Brand, State=Default
    "social=figma|supportingText=false|state=default|theme=brand": __body65,
    // figma: Social=Figma, Supporting text=False, Theme=Brand, State=Hover
    "social=figma|supportingText=false|state=hover|theme=brand": __body65,
    // figma: Social=Figma, Supporting text=False, Theme=Brand, State=Focused
    "social=figma|supportingText=false|state=focused|theme=brand": __body66,
    // figma: Social=Figma, Supporting text=False, Theme=Color, State=Default
    "social=figma|supportingText=false|state=default|theme=color": __body67,
    // figma: Social=Figma, Supporting text=False, Theme=Color, State=Hover
    "social=figma|supportingText=false|state=hover|theme=color": __body68,
    // figma: Social=Figma, Supporting text=False, Theme=Color, State=Focused
    "social=figma|supportingText=false|state=focused|theme=color": __body69,
    // figma: Social=Figma, Supporting text=False, Theme=Gray, State=Default
    "social=figma|supportingText=false|state=default|theme=gray": __body70,
    // figma: Social=Figma, Supporting text=False, Theme=Gray, State=Hover
    "social=figma|supportingText=false|state=hover|theme=gray": __body71,
    // figma: Social=Figma, Supporting text=False, Theme=Gray, State=Focused
    "social=figma|supportingText=false|state=focused|theme=gray": __body72,
    // figma: Social=Dribbble, Supporting text=False, Theme=Brand, State=Default
    "social=dribbble|supportingText=false|state=default|theme=brand": __body73,
    // figma: Social=Dribbble, Supporting text=False, Theme=Brand, State=Hover
    "social=dribbble|supportingText=false|state=hover|theme=brand": __body74,
    // figma: Social=Dribbble, Supporting text=False, Theme=Brand, State=Focused
    "social=dribbble|supportingText=false|state=focused|theme=brand": __body75,
    // figma: Social=Dribbble, Supporting text=False, Theme=Color, State=Default
    "social=dribbble|supportingText=false|state=default|theme=color": __body76,
    // figma: Social=Dribbble, Supporting text=False, Theme=Color, State=Hover
    "social=dribbble|supportingText=false|state=hover|theme=color": __body77,
    // figma: Social=Dribbble, Supporting text=False, Theme=Color, State=Focused
    "social=dribbble|supportingText=false|state=focused|theme=color": __body78,
    // figma: Social=Dribbble, Supporting text=False, Theme=Gray, State=Default
    "social=dribbble|supportingText=false|state=default|theme=gray": __body79,
    // figma: Social=Dribbble, Supporting text=False, Theme=Gray, State=Hover
    "social=dribbble|supportingText=false|state=hover|theme=gray": __body80,
    // figma: Social=Dribbble, Supporting text=False, Theme=Gray, State=Focused
    "social=dribbble|supportingText=false|state=focused|theme=gray": __body81,
    // figma: Social=Twitter, Supporting text=False, Theme=Brand, State=Default
    "social=twitter|supportingText=false|state=default|theme=brand": __body82,
    // figma: Social=Twitter, Supporting text=False, Theme=Brand, State=Hover
    "social=twitter|supportingText=false|state=hover|theme=brand": __body82,
    // figma: Social=Twitter, Supporting text=False, Theme=Brand, State=Focused
    "social=twitter|supportingText=false|state=focused|theme=brand": __body83,
    // figma: Social=Twitter, Supporting text=False, Theme=Color, State=Default
    "social=twitter|supportingText=false|state=default|theme=color": __body84,
    // figma: Social=Twitter, Supporting text=False, Theme=Color, State=Hover
    "social=twitter|supportingText=false|state=hover|theme=color": __body85,
    // figma: Social=Twitter, Supporting text=False, Theme=Color, State=Focused
    "social=twitter|supportingText=false|state=focused|theme=color": __body86,
    // figma: Social=Twitter, Supporting text=False, Theme=Gray, State=Default
    "social=twitter|supportingText=false|state=default|theme=gray": __body87,
    // figma: Social=Twitter, Supporting text=False, Theme=Gray, State=Hover
    "social=twitter|supportingText=false|state=hover|theme=gray": __body88,
    // figma: Social=Twitter, Supporting text=False, Theme=Gray, State=Focused
    "social=twitter|supportingText=false|state=focused|theme=gray": __body89,
    // figma: Social=Apple, Supporting text=False, Theme=Color, State=Default
    "social=apple|supportingText=false|state=default|theme=color": __body90,
    // figma: Social=Apple, Supporting text=False, Theme=Color, State=Hover
    "social=apple|supportingText=false|state=hover|theme=color": __body91,
    // figma: Social=Apple, Supporting text=False, Theme=Color, State=Focused
    "social=apple|supportingText=false|state=focused|theme=color": __body92,
    // figma: Social=Apple, Supporting text=False, Theme=Gray, State=Default
    "social=apple|supportingText=false|state=default|theme=gray": __body93,
    // figma: Social=Apple, Supporting text=False, Theme=Gray, State=Hover
    "social=apple|supportingText=false|state=hover|theme=gray": __body94,
    // figma: Social=Apple, Supporting text=False, Theme=Gray, State=Focused
    "social=apple|supportingText=false|state=focused|theme=gray": __body95,
  };
  return (__impls[__vkey(props)] ?? __body18)();
}
export default SocialButton;
