@cambly/syntax-core 10.23.0 → 10.24.0

package/dist/__chunks/{BMGRRUAW.js.map → B3SQDLKQ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 21 Mar 2024 21:35:20 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 25 Mar 2024 13:38:37 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{2ME3BD6K.js → C2O2DNFT.js}

@@ -71,14 +71,14 @@ var LinkButton = forwardRef(
           {
             [Button_module_default.fullWidth]: fullWidth,
             [LinkButton_module_default.fitContent]: !fullWidth,
-            [Button_module_default.buttonGap]: themeName === "classic" && (size === "lg" || size === "md"),
+            [Button_module_default.buttonGap]: size === "lg" || size === "md",
             [Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
             [Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary"
           }
         ),
         onClick,
         children: [
-          StartIcon && themeName === "classic" && /* @__PURE__ */ jsx(
+          StartIcon && /* @__PURE__ */ jsx(
             StartIcon,
             {
               className: classNames(
@@ -102,7 +102,7 @@ var LinkButton = forwardRef(
               )
             }
           ),
-          EndIcon && themeName === "classic" && /* @__PURE__ */ jsx(
+          EndIcon && /* @__PURE__ */ jsx(
             EndIcon,
             {
               className: classNames(
@@ -123,4 +123,4 @@ var LinkButton_default = LinkButton;
 export {
   LinkButton_default
 };
-//# sourceMappingURL=2ME3BD6K.js.map
+//# sourceMappingURL=C2O2DNFT.js.map

package/dist/__chunks/{2ME3BD6K.js.map → C2O2DNFT.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport styles from \"./LinkButton.module.css\";\n\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors//backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype LinkButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The link that the LinkButton should route to.\n   *\n   */\n  href?: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: startIcon is not supported in the Cambio theme\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: endIcon is not supported in the Cambio theme\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      color = \"primary\",\n      size = \"md\",\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color), on);\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color), on);\n\n    return (\n      <a\n        href={href}\n        data-testid={dataTestId}\n        target={target}\n        ref={ref}\n        rel={rel}\n        className={classNames(\n          styles.linkButton,\n          buttonStyles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\"\n            ? buttonStyles[size]\n            : buttonStyles[`${size}Cambio`],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]:\n              themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n        onClick={onClick}\n      >\n        {StartIcon && themeName === \"classic\" && (\n          <StartIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n        <Typography\n          size={themeName === \"classic\" ? textVariant[size] : textVariant[size]}\n        >\n          <span\n            // Temporary - until we have cambio colors on Typogrphay\n            className={foregroundColorClass}\n            style={{ fontWeight: 500 }}\n          >\n            {text}\n          </span>\n        </Typography>\n        {EndIcon && themeName === \"classic\" && (\n          <EndIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACD6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;ADsJpL,SA4BI,KA5BJ;AA/BN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,GAAG,EAAE;AAElD,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,GAAG,EAAE;AAElD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,cAAc,YACV,sBAAa,IAAI,IACjB,sBAAa,GAAG,YAAY;AAAA,UAChC;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GACrB,cAAc,cAAc,SAAS,QAAQ,SAAS;AAAA,YACxD,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBAAa,cAAc,aAC1B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,cAAc,YAAY,oBAAY,IAAI,IAAI,oBAAY,IAAI;AAAA,cAEpE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,WAAW,cAAc,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport styles from \"./LinkButton.module.css\";\n\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors//backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype LinkButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The link that the LinkButton should route to.\n   *\n   */\n  href?: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: startIcon is not supported in the Cambio theme\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: endIcon is not supported in the Cambio theme\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      color = \"primary\",\n      size = \"md\",\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color), on);\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color), on);\n\n    return (\n      <a\n        href={href}\n        data-testid={dataTestId}\n        target={target}\n        ref={ref}\n        rel={rel}\n        className={classNames(\n          styles.linkButton,\n          buttonStyles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\"\n            ? buttonStyles[size]\n            : buttonStyles[`${size}Cambio`],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n        onClick={onClick}\n      >\n        {StartIcon && (\n          <StartIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n        <Typography\n          size={themeName === \"classic\" ? textVariant[size] : textVariant[size]}\n        >\n          <span\n            // Temporary - until we have cambio colors on Typogrphay\n            className={foregroundColorClass}\n            style={{ fontWeight: 500 }}\n          >\n            {text}\n          </span>\n        </Typography>\n        {EndIcon && (\n          <EndIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACD6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;ADsJpL,SA2BI,KA3BJ;AA/BN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,GAAG,EAAE;AAElD,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,GAAG,EAAE;AAElD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,cAAc,YACV,sBAAa,IAAI,IACjB,sBAAa,GAAG,YAAY;AAAA,UAChC;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,cAAc,YAAY,oBAAY,IAAI,IAAI,oBAAY,IAAI;AAAA,cAEpE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}

package/dist/__chunks/{WXVI4QCY.cjs → IXDYGNLN.cjs}

@@ -82,7 +82,7 @@ var Button = _react.forwardRef.call(void 0,
           themeName === "classic" ? Button_module_default[size] : Button_module_default[`${size}Cambio`],
           {
             [Button_module_default.fullWidth]: fullWidth,
-            [Button_module_default.buttonGap]: themeName === "classic" && (size === "lg" || size === "md"),
+            [Button_module_default.buttonGap]: size === "lg" || size === "md",
             [Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
             [Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary"
           }
@@ -157,4 +157,4 @@ var Button_default = Button;
 
 
 exports.Button_default = Button_default;
-//# sourceMappingURL=WXVI4QCY.cjs.map
+//# sourceMappingURL=IXDYGNLN.cjs.map

package/dist/__chunks/IXDYGNLN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"./constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\n\ntype ButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n  /**\n   * The type you want to set for the primitive `<button/>`\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      text,\n      loadingText,\n      color = \"primary\",\n      size = \"md\",\n      accessibilityLabel,\n      disabled = false,\n      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color), on);\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color), on);\n\n    const disabledCambioPrimary =\n      themeName === \"cambio\" && color === \"primary\" && disabled;\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]: size === \"lg\" || size === \"md\",\n            [styles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledCambioPrimary && styles.disabledCambioPrimary,\n            )}\n          />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography\n              size={\n                themeName === \"classic\" ? textVariant[size] : textVariant[size]\n              }\n            >\n              <span\n                className={classNames(\n                  // Temporary - until we have cambio colors on Typography\n                  foregroundColorClass,\n                  disabledCambioPrimary && styles.disabledCambioPrimary,\n                )}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledCambioPrimary && styles.disabledCambioPrimary,\n            )}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={styles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_9efd1_1\",\"buttonGap\":\"_buttonGap_9efd1_9\",\"disabledCambioPrimary\":\"_disabledCambioPrimary_9efd1_50\",\"fullWidth\":\"_fullWidth_9efd1_54\",\"sm\":\"_sm_9efd1_58\",\"md\":\"_md_9efd1_65\",\"lg\":\"_lg_9efd1_72\",\"smCambio\":\"_smCambio_9efd1_79\",\"mdCambio\":\"_mdCambio_9efd1_86\",\"lgCambio\":\"_lgCambio_9efd1_93\",\"icon\":\"_icon_9efd1_100\",\"smIcon\":\"_smIcon_9efd1_104\",\"mdIcon\":\"_mdIcon_9efd1_111\",\"lgIcon\":\"_lgIcon_9efd1_118\",\"secondaryBorder\":\"_secondaryBorder_9efd1_125\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_9efd1_129\",\"loading\":\"_loading_9efd1_143\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_9efd1_1\",\"loadingCircle\":\"_loadingCircle_9efd1_147\"}"]}

package/dist/__chunks/{G5EHKKTF.js → KITXUOU4.js}

@@ -82,7 +82,7 @@ var Button = forwardRef(
           themeName === "classic" ? Button_module_default[size] : Button_module_default[`${size}Cambio`],
           {
             [Button_module_default.fullWidth]: fullWidth,
-            [Button_module_default.buttonGap]: themeName === "classic" && (size === "lg" || size === "md"),
+            [Button_module_default.buttonGap]: size === "lg" || size === "md",
             [Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
             [Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary"
           }
@@ -157,4 +157,4 @@ var Button_default = Button;
 export {
   Button_default
 };
-//# sourceMappingURL=G5EHKKTF.js.map
+//# sourceMappingURL=KITXUOU4.js.map

package/dist/__chunks/KITXUOU4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"./constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\n\ntype ButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n  /**\n   * The type you want to set for the primitive `<button/>`\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      text,\n      loadingText,\n      color = \"primary\",\n      size = \"md\",\n      accessibilityLabel,\n      disabled = false,\n      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color), on);\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color), on);\n\n    const disabledCambioPrimary =\n      themeName === \"cambio\" && color === \"primary\" && disabled;\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]: size === \"lg\" || size === \"md\",\n            [styles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledCambioPrimary && styles.disabledCambioPrimary,\n            )}\n          />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography\n              size={\n                themeName === \"classic\" ? textVariant[size] : textVariant[size]\n              }\n            >\n              <span\n                className={classNames(\n                  // Temporary - until we have cambio colors on Typography\n                  foregroundColorClass,\n                  disabledCambioPrimary && styles.disabledCambioPrimary,\n                )}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledCambioPrimary && styles.disabledCambioPrimary,\n            )}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={styles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_9efd1_1\",\"buttonGap\":\"_buttonGap_9efd1_9\",\"disabledCambioPrimary\":\"_disabledCambioPrimary_9efd1_50\",\"fullWidth\":\"_fullWidth_9efd1_54\",\"sm\":\"_sm_9efd1_58\",\"md\":\"_md_9efd1_65\",\"lg\":\"_lg_9efd1_72\",\"smCambio\":\"_smCambio_9efd1_79\",\"mdCambio\":\"_mdCambio_9efd1_86\",\"lgCambio\":\"_lgCambio_9efd1_93\",\"icon\":\"_icon_9efd1_100\",\"smIcon\":\"_smIcon_9efd1_104\",\"mdIcon\":\"_mdIcon_9efd1_111\",\"lgIcon\":\"_lgIcon_9efd1_118\",\"secondaryBorder\":\"_secondaryBorder_9efd1_125\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_9efd1_129\",\"loading\":\"_loading_9efd1_143\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_9efd1_1\",\"loadingCircle\":\"_loadingCircle_9efd1_147\"}"],"mappings":"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","names":[]}

package/dist/__chunks/{X642VQQQ.js → PO5IE5IC.js}

@@ -5,7 +5,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./BMGRRUAW.js";
+} from "./B3SQDLKQ.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -33,7 +33,7 @@ import {
 import classNames from "classnames";
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_1cum9_1", "selectContainerCambio": "_selectContainerCambio_1cum9_7", "opacityOverlay": "_opacityOverlay_1cum9_11", "selectWrapper": "_selectWrapper_1cum9_15", "selectBox": "_selectBox_1cum9_20", "selectBoxClassic": "_selectBoxClassic_1cum9_36", "selectBoxCambio": "_selectBoxCambio_1cum9_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_1cum9_50", "unselected": "_unselected_1cum9_55", "selected": "_selected_1cum9_59", "arrowIcon": "_arrowIcon_1cum9_63", "sm": "_sm_1cum9_77", "md": "_md_1cum9_83", "lg": "_lg_1cum9_89", "selectError": "_selectError_1cum9_95", "selectErrorCambio": "_selectErrorCambio_1cum9_101" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_dwmnw_1", "opacityOverlay": "_opacityOverlay_dwmnw_7", "selectWrapper": "_selectWrapper_dwmnw_11", "selectBox": "_selectBox_dwmnw_16", "selectBoxClassic": "_selectBoxClassic_dwmnw_32", "selectBoxCambio": "_selectBoxCambio_dwmnw_37", "selectMouseFocusStyling": "_selectMouseFocusStyling_dwmnw_46", "unselected": "_unselected_dwmnw_51", "selected": "_selected_dwmnw_55", "arrowIcon": "_arrowIcon_dwmnw_59", "sm": "_sm_dwmnw_73", "md": "_md_dwmnw_79", "lg": "_lg_dwmnw_85", "selectError": "_selectError_dwmnw_91", "selectErrorCambio": "_selectErrorCambio_dwmnw_97" };
 
 // src/SelectList/SelectList.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -67,8 +67,7 @@ function SelectList({
     "div",
     {
       className: classNames(SelectList_module_default.selectContainer, {
-        [SelectList_module_default.opacityOverlay]: disabled,
-        [SelectList_module_default.selectContainerCambio]: themeName === "cambio"
+        [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
         label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
@@ -138,4 +137,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=X642VQQQ.js.map
+//# sourceMappingURL=PO5IE5IC.js.map

package/dist/__chunks/PO5IE5IC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(\n            styles.selectBox,\n            themeName === \"classic\"\n              ? styles.selectBoxClassic\n              : styles.selectBoxCambio,\n            themeName === \"classic\" && styles[size],\n            {\n              [styles.unselected]: !selectedValue && !errorText,\n              [styles.selected]: selectedValue && !errorText,\n              [themeName === \"classic\"\n                ? styles.selectError\n                : styles.selectErrorCambio]: errorText,\n              [focusStyles.accessibilityOutlineFocus]:\n                isFocused && isFocusVisible, // for focus keyboard\n              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            },\n          )}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={themeName === \"classic\" ? iconSize[size] : 24}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_dwmnw_1\",\"opacityOverlay\":\"_opacityOverlay_dwmnw_7\",\"selectWrapper\":\"_selectWrapper_dwmnw_11\",\"selectBox\":\"_selectBox_dwmnw_16\",\"selectBoxClassic\":\"_selectBoxClassic_dwmnw_32\",\"selectBoxCambio\":\"_selectBoxCambio_dwmnw_37\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_dwmnw_46\",\"unselected\":\"_unselected_dwmnw_51\",\"selected\":\"_selected_dwmnw_55\",\"arrowIcon\":\"_arrowIcon_dwmnw_59\",\"sm\":\"_sm_dwmnw_73\",\"md\":\"_md_dwmnw_79\",\"lg\":\"_lg_dwmnw_85\",\"selectError\":\"_selectError_dwmnw_91\",\"selectErrorCambio\":\"_selectErrorCambio_dwmnw_97\"}"],"mappings":"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","names":[]}

package/dist/__chunks/{OKBITI6F.js → QD2ZKJLS.js}

@@ -3,7 +3,7 @@ import {
   RichSelectBoxContext,
   RichSelectBox_default,
   convertSelection
-} from "./NR5T3KIY.js";
+} from "./6EKM3QTW.js";
 import {
   RichSelectChip_default
 } from "./AM27BYFE.js";
@@ -19,7 +19,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./BMGRRUAW.js";
+} from "./B3SQDLKQ.js";
 import {
   RichSelectSection_default
 } from "./4NSYLHIG.js";
@@ -59,7 +59,7 @@ import { useControlledState } from "@react-stately/utils";
 import { setInteractionModality } from "@react-aria/interactions";
 
 // css-module:../SelectList/SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_1cum9_1", "selectContainerCambio": "_selectContainerCambio_1cum9_7", "opacityOverlay": "_opacityOverlay_1cum9_11", "selectWrapper": "_selectWrapper_1cum9_15", "selectBox": "_selectBox_1cum9_20", "selectBoxClassic": "_selectBoxClassic_1cum9_36", "selectBoxCambio": "_selectBoxCambio_1cum9_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_1cum9_50", "unselected": "_unselected_1cum9_55", "selected": "_selected_1cum9_59", "arrowIcon": "_arrowIcon_1cum9_63", "sm": "_sm_1cum9_77", "md": "_md_1cum9_83", "lg": "_lg_1cum9_89", "selectError": "_selectError_1cum9_95", "selectErrorCambio": "_selectErrorCambio_1cum9_101" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_dwmnw_1", "opacityOverlay": "_opacityOverlay_dwmnw_7", "selectWrapper": "_selectWrapper_dwmnw_11", "selectBox": "_selectBox_dwmnw_16", "selectBoxClassic": "_selectBoxClassic_dwmnw_32", "selectBoxCambio": "_selectBoxCambio_dwmnw_37", "selectMouseFocusStyling": "_selectMouseFocusStyling_dwmnw_46", "unselected": "_unselected_dwmnw_51", "selected": "_selected_dwmnw_55", "arrowIcon": "_arrowIcon_dwmnw_59", "sm": "_sm_dwmnw_73", "md": "_md_dwmnw_79", "lg": "_lg_dwmnw_85", "selectError": "_selectError_dwmnw_91", "selectErrorCambio": "_selectErrorCambio_dwmnw_97" };
 
 // src/RichSelect/RichSelectList.tsx
 import { useField } from "react-aria";
@@ -161,18 +161,14 @@ function RichSelectList(props) {
         "div",
         {
           className: classNames(SelectList_module_default.selectContainer, {
-            [SelectList_module_default.opacityOverlay]: disabled,
-            [SelectList_module_default.selectContainerCambio]: themeName === "cambio"
+            [SelectList_module_default.opacityOverlay]: disabled
           }),
           onClick,
           children: [
             label && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
               ReactAriaLabel,
               __spreadProps(__spreadValues({
-                "data-testid": [dataTestId, "label"].filter(Boolean).join("-"),
-                className: classNames(
-                  themeName === "cambio" && SelectList_module_default.labelCambio
-                )
+                "data-testid": [dataTestId, "label"].filter(Boolean).join("-")
               }, labelProps), {
                 onClick: () => {
                   var _a2;
@@ -181,7 +177,7 @@ function RichSelectList(props) {
                   (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
                   setInteractionModality("keyboard");
                 },
-                children: /* @__PURE__ */ jsx(Box_default, { paddingX: themeName === "classic" ? 1 : 3, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) })
+                children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) })
               })
             ) }),
             /* @__PURE__ */ jsx(
@@ -258,7 +254,7 @@ function RichSelectList(props) {
                 )
               }
             ),
-            (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ jsx(
+            (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
               Typography_default,
               __spreadProps(__spreadValues({
                 size: 100,
@@ -282,4 +278,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=OKBITI6F.js.map
+//# sourceMappingURL=QD2ZKJLS.js.map

package/dist/__chunks/QD2ZKJLS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\nexport type RichSelectListProps = RichSelectBoxProps & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /**\n   * RichSelectList id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n  /**\n   * Size of the select box\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    id,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    size = \"md\",\n    ...richSelectBoxProps\n  } = props;\n\n  const reactId = useId();\n  const inputId = id ?? reactId;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n        onClick={onClick}\n      >\n        {label && (\n          <>\n            <ReactAriaLabel\n              data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n              {...labelProps}\n              onClick={() => {\n                if (disabled) return;\n                fieldRef.current?.focus();\n                setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n              }}\n            >\n              <Box paddingX={1}>\n                <Typography size={100} color=\"gray700\">\n                  {label}\n                </Typography>\n              </Box>\n            </ReactAriaLabel>\n          </>\n        )}\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                {...richSelectBoxProps}\n                accessibilityLabel={inputId}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding={size === \"lg\" ? \"lg\" : \"md\"}\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(\n                  styles.selectBox,\n                  themeName === \"classic\"\n                    ? styles.selectBoxClassic\n                    : styles.selectBoxCambio,\n                  themeName === \"classic\" && styles[size],\n                  {\n                    [styles.unselected]:\n                      !errorText &&\n                      selectedKeys !== \"all\" &&\n                      !selectedKeys.size,\n                    [styles.selected]:\n                      !errorText &&\n                      (selectedKeys === \"all\" || selectedKeys.size),\n                    [themeName === \"classic\"\n                      ? styles.selectError\n                      : styles.selectErrorCambio]: errorText,\n                  },\n                )}\n              >\n                {selectedTextValue}\n              </div>\n              <div className={styles.arrowIcon}>\n                <svg\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  width={iconSize[size]}\n                >\n                  <path\n                    fill={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\n                    d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </Box>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_dwmnw_1\",\"opacityOverlay\":\"_opacityOverlay_dwmnw_7\",\"selectWrapper\":\"_selectWrapper_dwmnw_11\",\"selectBox\":\"_selectBox_dwmnw_16\",\"selectBoxClassic\":\"_selectBoxClassic_dwmnw_32\",\"selectBoxCambio\":\"_selectBoxCambio_dwmnw_37\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_dwmnw_46\",\"unselected\":\"_unselected_dwmnw_51\",\"selected\":\"_selected_dwmnw_55\",\"arrowIcon\":\"_arrowIcon_dwmnw_59\",\"sm\":\"_sm_dwmnw_73\",\"md\":\"_md_dwmnw_79\",\"lg\":\"_lg_dwmnw_85\",\"selectError\":\"_selectError_dwmnw_91\",\"selectErrorCambio\":\"_selectErrorCambio_dwmnw_97\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,OAAO,gBAAgB;AAQvB;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,OACP;AACP,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;;;ACpB6D,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,iBAAgB,2BAA0B,aAAY,uBAAsB,oBAAmB,8BAA6B,mBAAkB,6BAA4B,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,eAAc,yBAAwB,qBAAoB,8BAA6B;;;ADkC7qB,SAAS,gBAAgB;AAsJf,mBAWM,KAuCJ,YAlDF;AAnJV,IAAM,OAAO,MAAM;AAEnB,IAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA4DA,SAAS,eAAe,OAA0C;AAChE,QAiBI,YAhBF;AAAA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,uBAAuB;AAAA,IACvB,OAAO;AAAA,EAvHX,IAyHM,IADC,+BACD,IADC;AAAA,IAfH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AACtB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,EAAE,UAAU,IAAI,SAAS;AAG/B,QAAM,oBAAoB,OAA0B,CAAC,CAAC;AAEtD,QAAM,mBAAmB;AAAA,IACvB,MAAM,iBAAiB,kBAAkB;AAAA,IACzC,CAAC,kBAAkB;AAAA,EACrB;AACA,QAAM,sBAAsB;AAAA,IAC1B,MAAM,iBAAiB,2BAA2B,oBAAI,IAAI,CAAC;AAAA,IAC3D,CAAC,yBAAyB;AAAA,EAC5B;AACA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC;AAAA;AAAA,IACA;AAAA,IACA,CAAC,UAAU;AA/If,UAAAA,KAAA;AAgJM,YAAM,SAAS,UAAU,QAAQ,QAAQ,CAAC,GAAG,KAAK,EAAE,IAAI,MAAM;AAC9D,eAAS,MAAM;AACf,UAAI,CAAC;AAAU,eAAAA,MAAA,kBAAkB,SAAQ,UAA1B,wBAAAA;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,oBAAoB,QAAQ,MAAM;AAtJ1C,QAAAA;AAuJI,QAAI;AACF,cACEA,MAAA;AAAA,QACE,iBAAiB,QAAQ,QAAQ,CAAC,GAAG,YAAY,EAAE,IAAI,MAAM;AAAA,MAC/D,MAFA,OAAAA,MAEK;AAET,QAAI,iBAAiB;AAAO,aAAO;AACnC,QAAI,aAAa;AAAM,aAAO,GAAG,aAAa;AAC9C,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,cAAc,eAAe,CAAC;AAEnD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,EAAE,YAAY,YAAY,kBAAkB,kBAAkB,IAClE,SAAS;AAAA,IACP;AAAA;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,EAChB,CAAC;AAEH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,QACN,CAAC,sBAAsB,EAAE,WAAW,KAAK,CAAC;AAAA,QAC1C,CAAC,eAAe,EAAE,SAAS,WAAW,SAAY,EAAE,CAAC;AAAA;AAAA,MACvD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,YAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,UAC3B,CAAC;AAAA,UACD;AAAA,UAEC;AAAA,qBACC,gCACE;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,CAAC,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,iBACvD,aAFL;AAAA,gBAGC,SAAS,MAAM;AA5L7B,sBAAAA;AA6LgB,sBAAI;AAAU;AACd,mBAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAClB,yCAAuB,UAAU;AAAA,gBACnC;AAAA,gBAEA,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF;AAAA;AAAA,YACF,GACF;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL;AAAA,gBACA;AAAA;AAAA,kBAEE;AAAA,oBAAC;AAAA;AAAA,sBACC,SAAS,WAAW,SAAY;AAAA,sBAChC,2BACE,WAAW,SAAY,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE;AAAA,sBAGzD;AAAA,wBAAC;AAAA;AAAA,0BACC;AAAA,0BACA,gBAAgB;AAAA,0BAChB,uBAAuB;AAAA,0BACvB,UAAU,CAAC,aAAa,gBAAgB,IAAI,IAAI,QAAQ,CAAC;AAAA,2BACrD,qBALL;AAAA,0BAMC,oBAAoB;AAAA,0BAEnB;AAAA;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA;AAAA,gBAGF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa;AAAA,oBACb;AAAA,oBACA;AAAA,oBACA,UAAU,SAAS,OAAO,OAAO;AAAA,qBAC7B,aALL;AAAA,oBAMC,KAAK;AAAA,oBAEL,+BAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAW;AAAA,4BACT,0BAAO;AAAA,4BACP,cAAc,YACV,0BAAO,mBACP,0BAAO;AAAA,4BACX,cAAc,aAAa,0BAAO,IAAI;AAAA,4BACtC;AAAA,8BACE,CAAC,0BAAO,UAAU,GAChB,CAAC,aACD,iBAAiB,SACjB,CAAC,aAAa;AAAA,8BAChB,CAAC,0BAAO,QAAQ,GACd,CAAC,cACA,iBAAiB,SAAS,aAAa;AAAA,8BAC1C,CAAC,cAAc,YACX,0BAAO,cACP,0BAAO,iBAAiB,GAAG;AAAA,4BACjC;AAAA,0BACF;AAAA,0BAEC;AAAA;AAAA,sBACH;AAAA,sBACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,eAAY;AAAA,0BACZ,SAAQ;AAAA,0BACR,OAAO,SAAS,IAAI;AAAA,0BAEpB;AAAA,4BAAC;AAAA;AAAA,8BACC,MACE,YAAY,0BAA0B;AAAA,8BAExC,GAAE;AAAA;AAAA,0BACJ;AAAA;AAAA,sBACF,GACF;AAAA,uBACF;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,aACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO,YAAY,wBAAwB;AAAA,iBACtC,YAAY,oBAAoB,mBAHtC;AAAA,gBAKE,sBAAY,YAAY;AAAA;AAAA,YAC3B,GACF;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ,OAAO,OAAO,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AACf,CAAC;","names":["_a"]}

package/dist/__chunks/{FA3TGJ3A.cjs → RQBPUVVA.cjs}

@@ -5,7 +5,7 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
 
 
 
-var _A7MDW2GYcjs = require('./A7MDW2GY.cjs');
+var _2R3NHAWWcjs = require('./2R3NHAWW.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -33,7 +33,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_1cum9_1", "selectContainerCambio": "_selectContainerCambio_1cum9_7", "opacityOverlay": "_opacityOverlay_1cum9_11", "selectWrapper": "_selectWrapper_1cum9_15", "selectBox": "_selectBox_1cum9_20", "selectBoxClassic": "_selectBoxClassic_1cum9_36", "selectBoxCambio": "_selectBoxCambio_1cum9_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_1cum9_50", "unselected": "_unselected_1cum9_55", "selected": "_selected_1cum9_59", "arrowIcon": "_arrowIcon_1cum9_63", "sm": "_sm_1cum9_77", "md": "_md_1cum9_83", "lg": "_lg_1cum9_89", "selectError": "_selectError_1cum9_95", "selectErrorCambio": "_selectErrorCambio_1cum9_101" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_dwmnw_1", "opacityOverlay": "_opacityOverlay_dwmnw_7", "selectWrapper": "_selectWrapper_dwmnw_11", "selectBox": "_selectBox_dwmnw_16", "selectBoxClassic": "_selectBoxClassic_dwmnw_32", "selectBoxCambio": "_selectBoxCambio_dwmnw_37", "selectMouseFocusStyling": "_selectMouseFocusStyling_dwmnw_46", "unselected": "_unselected_dwmnw_51", "selected": "_selected_dwmnw_55", "arrowIcon": "_arrowIcon_dwmnw_59", "sm": "_sm_dwmnw_73", "md": "_md_dwmnw_79", "lg": "_lg_dwmnw_85", "selectError": "_selectError_dwmnw_91", "selectErrorCambio": "_selectErrorCambio_dwmnw_97" };
 
 // src/SelectList/SelectList.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -67,8 +67,7 @@ function SelectList({
     "div",
     {
       className: _classnames2.default.call(void 0, SelectList_module_default.selectContainer, {
-        [SelectList_module_default.opacityOverlay]: disabled,
-        [SelectList_module_default.selectContainerCambio]: themeName === "cambio"
+        [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _E4LISCR7cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TJN7NBWUcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
@@ -114,7 +113,7 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _A7MDW2GYcjs.ColorBaseDestructive700 : _A7MDW2GYcjs.ColorBaseGray800,
+                  fill: errorText ? _2R3NHAWWcjs.ColorBaseDestructive700 : _2R3NHAWWcjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
@@ -138,4 +137,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=FA3TGJ3A.cjs.map
+//# sourceMappingURL=RQBPUVVA.cjs.map

package/dist/__chunks/RQBPUVVA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(\n            styles.selectBox,\n            themeName === \"classic\"\n              ? styles.selectBoxClassic\n              : styles.selectBoxCambio,\n            themeName === \"classic\" && styles[size],\n            {\n              [styles.unselected]: !selectedValue && !errorText,\n              [styles.selected]: selectedValue && !errorText,\n              [themeName === \"classic\"\n                ? styles.selectError\n                : styles.selectErrorCambio]: errorText,\n              [focusStyles.accessibilityOutlineFocus]:\n                isFocused && isFocusVisible, // for focus keyboard\n              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            },\n          )}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={themeName === \"classic\" ? iconSize[size] : 24}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_dwmnw_1\",\"opacityOverlay\":\"_opacityOverlay_dwmnw_7\",\"selectWrapper\":\"_selectWrapper_dwmnw_11\",\"selectBox\":\"_selectBox_dwmnw_16\",\"selectBoxClassic\":\"_selectBoxClassic_dwmnw_32\",\"selectBoxCambio\":\"_selectBoxCambio_dwmnw_37\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_dwmnw_46\",\"unselected\":\"_unselected_dwmnw_51\",\"selected\":\"_selected_dwmnw_55\",\"arrowIcon\":\"_arrowIcon_dwmnw_59\",\"sm\":\"_sm_dwmnw_73\",\"md\":\"_md_dwmnw_79\",\"lg\":\"_lg_dwmnw_85\",\"selectError\":\"_selectError_dwmnw_91\",\"selectErrorCambio\":\"_selectErrorCambio_dwmnw_97\"}"]}

package/dist/__chunks/{EDBOQDEI.cjs → TCZBK2P5.cjs}

@@ -71,14 +71,14 @@ var LinkButton = _react.forwardRef.call(void 0,
           {
             [_W2JRKN5Ecjs.Button_module_default.fullWidth]: fullWidth,
             [LinkButton_module_default.fitContent]: !fullWidth,
-            [_W2JRKN5Ecjs.Button_module_default.buttonGap]: themeName === "classic" && (size === "lg" || size === "md"),
+            [_W2JRKN5Ecjs.Button_module_default.buttonGap]: size === "lg" || size === "md",
             [_W2JRKN5Ecjs.Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
             [_W2JRKN5Ecjs.Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary"
           }
         ),
         onClick,
         children: [
-          StartIcon && themeName === "classic" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             StartIcon,
             {
               className: _classnames2.default.call(void 0, 
@@ -102,7 +102,7 @@ var LinkButton = _react.forwardRef.call(void 0,
               )
             }
           ),
-          EndIcon && themeName === "classic" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             EndIcon,
             {
               className: _classnames2.default.call(void 0, 
@@ -123,4 +123,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=EDBOQDEI.cjs.map
+//# sourceMappingURL=TCZBK2P5.cjs.map

package/dist/__chunks/TCZBK2P5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACD6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;ADsJpL,SA2BI,KA3BJ;AA/BN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,GAAG,EAAE;AAElD,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,GAAG,EAAE;AAElD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,cAAc,YACV,sBAAa,IAAI,IACjB,sBAAa,GAAG,YAAY;AAAA,UAChC;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,cAAc,YAAY,oBAAY,IAAI,IAAI,oBAAY,IAAI;AAAA,cAEpE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport styles from \"./LinkButton.module.css\";\n\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors//backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype LinkButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The link that the LinkButton should route to.\n   *\n   */\n  href?: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: startIcon is not supported in the Cambio theme\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: endIcon is not supported in the Cambio theme\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      color = \"primary\",\n      size = \"md\",\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color), on);\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color), on);\n\n    return (\n      <a\n        href={href}\n        data-testid={dataTestId}\n        target={target}\n        ref={ref}\n        rel={rel}\n        className={classNames(\n          styles.linkButton,\n          buttonStyles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\"\n            ? buttonStyles[size]\n            : buttonStyles[`${size}Cambio`],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n        onClick={onClick}\n      >\n        {StartIcon && (\n          <StartIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n        <Typography\n          size={themeName === \"classic\" ? textVariant[size] : textVariant[size]}\n        >\n          <span\n            // Temporary - until we have cambio colors on Typogrphay\n            className={foregroundColorClass}\n            style={{ fontWeight: 500 }}\n          >\n            {text}\n          </span>\n        </Typography>\n        {EndIcon && (\n          <EndIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}

package/dist/__chunks/{ATJMFGMS.cjs → WZZQUJZF.cjs}

@@ -4,7 +4,7 @@
 var _VBQTLO2Pcjs = require('./VBQTLO2P.cjs');
 
 
-var _WXVI4QCYcjs = require('./WXVI4QCY.cjs');
+var _IXDYGNLNcjs = require('./IXDYGNLN.cjs');
 
 
 var _MG2NM3WUcjs = require('./MG2NM3WU.cjs');
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                 justifyContent: "end",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _VBQTLO2Pcjs.ButtonGroup_default, { orientation: "horizontal", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _WXVI4QCYcjs.Button_default,
+                    _IXDYGNLNcjs.Button_default,
                     {
                       onClick: clearChanges,
                       color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                     }
                   ),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _WXVI4QCYcjs.Button_default,
+                    _IXDYGNLNcjs.Button_default,
                     {
                       onClick: saveChanges,
                       text: primaryButtonText,
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
 
 
 exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=ATJMFGMS.cjs.map
+//# sourceMappingURL=WZZQUJZF.cjs.map

package/dist/index.cjs

@@ -13,7 +13,7 @@ var _4MLT3AHKcjs = require('./__chunks/4MLT3AHK.cjs');
 var _OV5U4YJNcjs = require('./__chunks/OV5U4YJN.cjs');
 
 
-var _EDBOQDEIcjs = require('./__chunks/EDBOQDEI.cjs');
+var _TCZBK2P5cjs = require('./__chunks/TCZBK2P5.cjs');
 
 
 var _UAN64LE7cjs = require('./__chunks/UAN64LE7.cjs');
@@ -31,18 +31,18 @@ require('./__chunks/BA4JPX36.cjs');
 var _W35D2UICcjs = require('./__chunks/W35D2UIC.cjs');
 
 
-var _FA3TGJ3Acjs = require('./__chunks/FA3TGJ3A.cjs');
+var _RQBPUVVAcjs = require('./__chunks/RQBPUVVA.cjs');
 require('./__chunks/4UJE5GMH.cjs');
 
 
-var _QHUX5MDMcjs = require('./__chunks/QHUX5MDM.cjs');
-require('./__chunks/ATJMFGMS.cjs');
+var _7B7TOXIFcjs = require('./__chunks/7B7TOXIF.cjs');
+require('./__chunks/WZZQUJZF.cjs');
 
 
 var _VBQTLO2Pcjs = require('./__chunks/VBQTLO2P.cjs');
 
 
-var _WXVI4QCYcjs = require('./__chunks/WXVI4QCY.cjs');
+var _IXDYGNLNcjs = require('./__chunks/IXDYGNLN.cjs');
 require('./__chunks/3P2PWHOU.cjs');
 require('./__chunks/5JUNB754.cjs');
 require('./__chunks/ZCSR6NFB.cjs');
@@ -67,7 +67,7 @@ require('./__chunks/HWQUS53M.cjs');
 
 
 var _UKLQ64N7cjs = require('./__chunks/UKLQ64N7.cjs');
-require('./__chunks/A7MDW2GY.cjs');
+require('./__chunks/2R3NHAWW.cjs');
 require('./__chunks/J3ES6ZT6.cjs');
 require('./__chunks/MF7LLV7V.cjs');
 require('./__chunks/OVXHL32N.cjs');
@@ -136,5 +136,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _VRVOFKLIcjs.Avatar_default; exports.AvatarGroup = _4MLT3AHKcjs.AvatarGroup; exports.Badge = _MKGPWRABcjs.Badge_default; exports.Box = _E4LISCR7cjs.Box_default; exports.Button = _WXVI4QCYcjs.Button_default; exports.ButtonGroup = _VBQTLO2Pcjs.ButtonGroup_default; exports.Card = _OV5U4YJNcjs.Card; exports.Checkbox = _UAN64LE7cjs.Checkbox_default; exports.Chip = _I75WZ7AVcjs.Chip_default; exports.Divider = _MG2NM3WUcjs.Divider; exports.Heading = _WFWI5GYGcjs.Heading_default; exports.IconButton = _KWT6ABYPcjs.IconButton_default; exports.LinkButton = _EDBOQDEIcjs.LinkButton_default; exports.Modal = _K4LTJ5GHcjs.Modal; exports.Popover = _L5FISA2Ucjs.Popover_default; exports.RadioButton = _ZYCAP5AYcjs.RadioButton_default; exports.RichSelectList = _QHUX5MDMcjs.RichSelectList_default; exports.SelectList = _FA3TGJ3Acjs.SelectList; exports.TapArea = _UKLQ64N7cjs.TapArea_default; exports.TextArea = _W35D2UICcjs.TextArea_default; exports.TextField = _MQ7FU53Wcjs.TextField; exports.ThemeProvider = _TBQR2FPScjs.ThemeProvider; exports.Tooltip = _XJL3R42Dcjs.Tooltip_default; exports.Typography = _TJN7NBWUcjs.Typography_default; exports.useTheme = _TBQR2FPScjs.useTheme;
+exports.Avatar = _VRVOFKLIcjs.Avatar_default; exports.AvatarGroup = _4MLT3AHKcjs.AvatarGroup; exports.Badge = _MKGPWRABcjs.Badge_default; exports.Box = _E4LISCR7cjs.Box_default; exports.Button = _IXDYGNLNcjs.Button_default; exports.ButtonGroup = _VBQTLO2Pcjs.ButtonGroup_default; exports.Card = _OV5U4YJNcjs.Card; exports.Checkbox = _UAN64LE7cjs.Checkbox_default; exports.Chip = _I75WZ7AVcjs.Chip_default; exports.Divider = _MG2NM3WUcjs.Divider; exports.Heading = _WFWI5GYGcjs.Heading_default; exports.IconButton = _KWT6ABYPcjs.IconButton_default; exports.LinkButton = _TCZBK2P5cjs.LinkButton_default; exports.Modal = _K4LTJ5GHcjs.Modal; exports.Popover = _L5FISA2Ucjs.Popover_default; exports.RadioButton = _ZYCAP5AYcjs.RadioButton_default; exports.RichSelectList = _7B7TOXIFcjs.RichSelectList_default; exports.SelectList = _RQBPUVVAcjs.SelectList; exports.TapArea = _UKLQ64N7cjs.TapArea_default; exports.TextArea = _W35D2UICcjs.TextArea_default; exports.TextField = _MQ7FU53Wcjs.TextField; exports.ThemeProvider = _TBQR2FPScjs.ThemeProvider; exports.Tooltip = _XJL3R42Dcjs.Tooltip_default; exports.Typography = _TJN7NBWUcjs.Typography_default; exports.useTheme = _TBQR2FPScjs.useTheme;
 //# sourceMappingURL=index.cjs.map