@cambly/syntax-core 10.30.0 → 10.31.0

package/dist/__chunks/{X5KCRFFF.js → KARS7AEM.js}

@@ -1,13 +1,10 @@
 "use client"
 import {
   Box_default
-} from "./HCHFPFNX.js";
+} from "./ZPY7QEBH.js";
 import {
   Typography_default
-} from "./UVROGDYB.js";
-import {
-  useTheme
-} from "./4GTNQPPD.js";
+} from "./3GNWH6C7.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -16,10 +13,10 @@ import {
 import { useId, forwardRef } from "react";
 
 // css-module:./TextArea.module.css#css-module
-var TextArea_module_default = { "textarea": "_textarea_1owb5_1", "sm": "_sm_1owb5_5", "md": "_md_1owb5_10", "lg": "_lg_1owb5_15", "textareaCambio": "_textareaCambio_1owb5_20" };
+var TextArea_module_default = { "textarea": "_textarea_zkjej_1" };
 
 // css-module:../TextField/TextField.module.css#css-module
-var TextField_module_default = { "textfield": "_textfield_kbdbw_1", "textfieldClassic": "_textfieldClassic_kbdbw_10", "textfieldCambio": "_textfieldCambio_kbdbw_14", "label": "_label_kbdbw_29", "sm": "_sm_kbdbw_33", "mdCambio": "_mdCambio_kbdbw_40", "heightCambio": "_heightCambio_kbdbw_44", "smHeight": "_smHeight_kbdbw_48", "md": "_md_kbdbw_40", "mdHeight": "_mdHeight_kbdbw_59", "lg": "_lg_kbdbw_63", "lgHeight": "_lgHeight_kbdbw_70", "inputError": "_inputError_kbdbw_74", "inputErrorCambio": "_inputErrorCambio_kbdbw_84" };
+var TextField_module_default = { "textfield": "_textfield_wgza3_1", "label": "_label_wgza3_22", "md": "_md_wgza3_26", "height": "_height_wgza3_30", "inputError": "_inputError_wgza3_34" };
 
 // src/TextArea/TextArea.tsx
 import classNames from "classnames";
@@ -42,7 +39,6 @@ var TextArea = forwardRef(
     const isHydrated = useIsHydrated();
     const disabled = !isHydrated || disabledProp;
     const reactId = useId();
-    const { themeName } = useTheme();
     const inputId = id != null ? id : reactId;
     return /* @__PURE__ */ jsxs(
       Box_default,
@@ -56,24 +52,18 @@ var TextArea = forwardRef(
             opacity: disabled ? 0.5 : 1
           }
         },
-        position: themeName === "cambio" ? "relative" : void 0,
+        position: "relative",
         children: [
           /* @__PURE__ */ jsx("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-          /* @__PURE__ */ jsx(Typography_default, { size: themeName === "cambio" ? 100 : 200, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Typography_default, { size: 100, children: /* @__PURE__ */ jsx(
             "textarea",
             {
               "data-testid": dataTestId,
+              "data-size": size,
               ref: forwardedRef,
-              className: classNames(
-                TextField_module_default.textfield,
-                themeName === "classic" ? TextField_module_default.textfieldClassic : TextField_module_default.textfieldCambio,
-                themeName === "classic" && TextField_module_default[size],
-                themeName === "classic" && TextArea_module_default[size],
-                themeName === "classic" ? TextArea_module_default.textarea : TextArea_module_default.textareaCambio,
-                {
-                  [themeName === "classic" ? TextField_module_default.inputError : TextField_module_default.inputErrorCambio]: errorText
-                }
-              ),
+              className: classNames(TextField_module_default.textfield, TextArea_module_default.textarea, {
+                [TextField_module_default.inputError]: errorText
+              }),
               id: inputId,
               placeholder,
               maxLength,
@@ -101,4 +91,4 @@ var TextArea_default = TextArea;
 export {
   TextArea_default
 };
-//# sourceMappingURL=X5KCRFFF.js.map
+//# sourceMappingURL=KARS7AEM.js.map

package/dist/__chunks/KARS7AEM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextArea. Defines the font size and padding.\n   *\n   * Cambio only supports `md`\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      size = \"md\",\n      value = \"\",\n      onChange,\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <Box\n        display=\"flex\"\n        direction=\"column\"\n        gap={2}\n        width=\"100%\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            opacity: disabled ? 0.5 : 1,\n          },\n        }}\n        position=\"relative\"\n      >\n        <label className={textFieldStyles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={100}>\n          <textarea\n            data-testid={dataTestId}\n            data-size={size}\n            ref={forwardedRef}\n            className={classNames(textFieldStyles.textfield, styles.textarea, {\n              [textFieldStyles.inputError]: errorText,\n            })}\n            id={inputId}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            onChange={onChange}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n          />\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_zkjej_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_wgza3_1\",\"label\":\"_label_wgza3_22\",\"md\":\"_md_wgza3_26\",\"height\":\"_height_wgza3_30\",\"inputError\":\"_inputError_wgza3_34\"}"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,oBAAmB;;;ACA5C,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,uBAAsB;;;AFKhQ,OAAO,gBAAgB;AAqFjB,SAcM,KAdN;AAxBN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EACF,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,UAAU,kBAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAS;AAAA,QAET;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,aAAW;AAAA,cACX,KAAK;AAAA,cACL,WAAW,WAAW,yBAAgB,WAAW,wBAAO,UAAU;AAAA,gBAChE,CAAC,yBAAgB,UAAU,GAAG;AAAA,cAChC,CAAC;AAAA,cACD,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}

package/dist/__chunks/{2RWNBVOK.cjs → KGXZVA6S.cjs}

@@ -1,13 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _GANR5JVVcjs = require('./GANR5JVV.cjs');
+var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
 
 
-var _XU3CLITIcjs = require('./XU3CLITI.cjs');
-
-
-var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
+var _5VHLZADOcjs = require('./5VHLZADO.cjs');
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -34,26 +31,6 @@ var badgeColorClassicToCambio = {
   thistle: "thistle",
   pink: "pink"
 };
-var badgeColorCambioToClassic = {
-  gray200: "gray200",
-  gray900: "gray900",
-  destructive700: "destructive700",
-  orange700: "orange700",
-  yellow700: "yellow700",
-  success700: "success700",
-  primary700: "primary700",
-  purple700: "purple700",
-  sky: "primary700",
-  success300: "success700",
-  destructive300: "destructive700",
-  orange: "orange700",
-  tan: "yellow700",
-  gray370: "gray200",
-  gray870: "gray900",
-  lilac: "purple700",
-  thistle: "purple700",
-  pink: "purple700"
-};
 var textColorForBackgroundColor = (color) => {
   switch (color) {
     case "gray200":
@@ -78,27 +55,26 @@ var Badge = ({
   text,
   color = "primary700"
 }) => {
-  const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
-  const mappedColor = themeName === "cambio" ? badgeColorClassicToCambio[color] : badgeColorCambioToClassic[color];
+  const mappedColor = badgeColorClassicToCambio[color];
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _GANR5JVVcjs.Box_default,
+    _OT2MUGKKcjs.Box_default,
     {
-      display: themeName === "classic" ? "inlineBlock" : "inlineFlex",
-      paddingX: themeName === "classic" ? 2 : 3,
+      display: "inlineFlex",
+      paddingX: 3,
       paddingY: 1,
-      rounding: themeName === "classic" ? "full" : "sm",
+      rounding: "sm",
       backgroundColor: mappedColor,
       alignItems: "center",
       justifyContent: "center",
-      height: themeName === "cambio" ? 32 : void 0,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XU3CLITIcjs.Typography_default, { color: textColorForBackgroundColor(mappedColor), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _GANR5JVVcjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+      height: 32,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5VHLZADOcjs.Typography_default, { color: textColorForBackgroundColor(mappedColor), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _OT2MUGKKcjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
         Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _XU3CLITIcjs.Typography_default,
+          _5VHLZADOcjs.Typography_default,
           {
             color: textColorForBackgroundColor(mappedColor),
             size: 100,
-            weight: themeName === "classic" ? "bold" : "medium",
+            weight: "medium",
             children: text
           }
         )
@@ -111,4 +87,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=2RWNBVOK.cjs.map
+//# sourceMappingURL=KGXZVA6S.cjs.map

package/dist/__chunks/KGXZVA6S.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"names":[],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;ACoIxH,SACW,KADX;AAxGR,IAAM,4BAA4B;AAAA,EAChC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEA,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAuCmB;AACjB,QAAM,cAAc,0BAA0B,KAAK;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAQ;AAAA,MAER,8BAAC,sBAAW,OAAO,4BAA4B,WAAW,GACxD,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,gBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,QACvC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,4BAA4B,WAAW;AAAA,YAC9C,MAAM;AAAA,YACN,QAAO;AAAA,YAEN;AAAA;AAAA,QACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\n\nconst badgeColorClassic = [\n  \"gray200\",\n  \"gray900\",\n  \"destructive700\",\n  \"orange700\",\n  \"yellow700\",\n  \"success700\",\n  \"primary700\",\n  \"purple700\",\n] as const;\n\nconst badgeColorCambio = [\n  \"sky\",\n  \"success300\",\n  \"destructive300\",\n  \"orange\",\n  \"tan\",\n  \"gray370\",\n  \"gray870\",\n  \"lilac\",\n  \"thistle\",\n  \"pink\",\n] as const;\n\nconst badgeColorClassicToCambio = {\n  gray200: \"gray370\",\n  gray900: \"gray870\",\n  destructive700: \"destructive300\",\n  orange700: \"orange\",\n  yellow700: \"tan\",\n  success700: \"success300\",\n  primary700: \"sky\",\n  purple700: \"lilac\",\n  sky: \"sky\",\n  success300: \"success300\",\n  destructive300: \"destructive300\",\n  orange: \"orange\",\n  tan: \"tan\",\n  gray370: \"gray370\",\n  gray870: \"gray870\",\n  lilac: \"lilac\",\n  thistle: \"thistle\",\n  pink: \"pink\",\n} as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof badgeColorClassic)[number] | (typeof badgeColorCambio)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray200\":\n    case \"yellow700\":\n      return \"gray900\";\n    case \"gray370\":\n    case \"destructive300\":\n    case \"orange\":\n    case \"tan\":\n    case \"success300\":\n    case \"sky\":\n    case \"thistle\":\n    case \"pink\":\n    case \"lilac\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"primary700\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * Classic colors:\n   * * `gray200` => maps to neutralLight in Cambio\n   * * `gray900` => maps to neutralDark in Cambio\n   * * `destructive700` => maps to destructive in Cambio\n   * * `orange700` => maps to orange in Cambio\n   * * `yellow700` => maps to tan in Cambio\n   * * `success700` => maps to success in Cambio\n   * * `primary700` => maps to sky in Cambio\n   * * `purple700` => maps to lilac in Cambio\n   *\n   * Cambio colors:\n   * * `sky`\n   * * `success300`\n   * * `destructive300`\n   * * `orange`\n   * * `tan`\n   * * `gray370`\n   * * `gray870`\n   * * `lilac`\n   * * `thistle`\n   * * `pink`\n   *\n   * @defaultValue \"primary700\"\n   */\n  color?:\n    | (typeof badgeColorClassic)[number]\n    | (typeof badgeColorCambio)[number];\n}): JSX.Element => {\n  const mappedColor = badgeColorClassicToCambio[color];\n\n  return (\n    <Box\n      display={\"inlineFlex\"}\n      paddingX={3}\n      paddingY={1}\n      rounding={\"sm\"}\n      backgroundColor={mappedColor}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      height={32}\n    >\n      <Typography color={textColorForBackgroundColor(mappedColor)}>\n        <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n          {Icon && <Icon className={styles.icon} />}\n          <Typography\n            color={textColorForBackgroundColor(mappedColor)}\n            size={100}\n            weight=\"medium\"\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"]}

package/dist/__chunks/{AKKJTW7U.js → KPQ6AISJ.js}

@@ -1,31 +1,25 @@
 "use client"
 import {
   Heading_default
-} from "./AYTJYJHI.js";
+} from "./XZ23UL5J.js";
 import {
   StopScroll
 } from "./QQT35OLE.js";
 import {
   Layer
-} from "./GJBW4BG7.js";
+} from "./2ZPIW4UQ.js";
 import {
   FocusTrap
 } from "./HVA7R2EL.js";
 import {
   IconButton_default
-} from "./VR4ZFZ4Z.js";
+} from "./67EPPVT7.js";
 import {
   Box_default
-} from "./HCHFPFNX.js";
-import {
-  useTheme
-} from "./4GTNQPPD.js";
-
-// src/Modal/Modal.tsx
-import classnames from "classnames";
+} from "./ZPY7QEBH.js";
 
 // css-module:./Modal.module.css#css-module
-var Modal_module_default = { "backdrop": "_backdrop_9g2f1_1", "backdropClassic": "_backdropClassic_9g2f1_9", "backdropCambio": "_backdropCambio_9g2f1_13", "closeButton": "_closeButton_9g2f1_17", "closeButtonClassic": "_closeButtonClassic_9g2f1_32", "closeButtonWithImage": "_closeButtonWithImage_9g2f1_44", "closeButtonWithImageCambio": "_closeButtonWithImageCambio_9g2f1_48" };
+var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
 
 // src/Modal/Modal.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -33,7 +27,7 @@ var sizeWidth = {
   sm: 600,
   lg: 600
 };
-function XIconCambio({ className }) {
+function XIcon({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -57,14 +51,10 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  const { themeName } = useTheme();
   return /* @__PURE__ */ jsx(Layer, { zIndex, children: /* @__PURE__ */ jsx(StopScroll, { children: /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classnames(
-        Modal_module_default.backdrop,
-        themeName === "classic" ? Modal_module_default.backdropClassic : Modal_module_default.backdropCambio
-      ),
+      className: Modal_module_default.backdrop,
       role: "presentation",
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
@@ -101,7 +91,7 @@ function Modal({
                     on: image ? "darkBackground" : "lightBackground",
                     onClick: onDismiss,
                     size: "sm",
-                    icon: XIconCambio
+                    icon: XIcon
                   }
                 )
               }
@@ -145,4 +135,4 @@ Modal.displayName = "Modal";
 export {
   Modal
 };
-//# sourceMappingURL=AKKJTW7U.js.map
+//# sourceMappingURL=KPQ6AISJ.js.map

package/dist/__chunks/KPQ6AISJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nconst sizeWidth = {\n  sm: 600,\n  lg: 600,\n} as const;\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n    </svg>\n  );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  size = \"sm\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image\n   *  * Size should be 600w x 200h\n   *  * Be sure to set width=\"100%\" on the image\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The size of the card\n   * * `sm`: 600px (deprecated)\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   * @deprecated\n   */\n  size?: keyof typeof sizeWidth;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={styles.backdrop}\n            role=\"presentation\"\n            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"white\"\n              rounding=\"md\"\n              display=\"flex\"\n              marginStart={4}\n              marginEnd={4}\n              marginTop={8}\n              marginBottom={8}\n              minWidth={240}\n              maxHeight=\"calc(100vh - 64px)\"\n              maxWidth={sizeWidth[size]}\n              overflow=\"hidden\"\n              position=\"relative\"\n              width=\"100%\"\n            >\n              <Box\n                position=\"absolute\"\n                dangerouslySetInlineStyle={{\n                  __style: { top: 4, right: 4 },\n                }}\n              >\n                <IconButton\n                  accessibilityLabel={accessibilityCloseLabel}\n                  color={image ? \"primary\" : \"tertiary\"}\n                  on={image ? \"darkBackground\" : \"lightBackground\"}\n                  onClick={onDismiss}\n                  size=\"sm\"\n                  icon={XIcon}\n                />\n              </Box>\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box padding={6}>\n                  <Heading as=\"h1\" size={600} fontStyle=\"serif\">\n                    {header}\n                  </Heading>\n                </Box>\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={6}\n                  marginBottom={footer ? 0 : 6}\n                >\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                    padding={6}\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACyBxK,cAiKQ,YAjKR;AAdN,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,GAsEiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC1D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU,UAAU,IAAI;AAAA,UACxB,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc;","names":[]}

package/dist/__chunks/{5MKCDCHQ.cjs → KYGRRVLW.cjs}

@@ -4,18 +4,15 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _GANR5JVVcjs = require('./GANR5JVV.cjs');
+var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
 
 
-var _XU3CLITIcjs = require('./XU3CLITI.cjs');
+var _5VHLZADOcjs = require('./5VHLZADO.cjs');
 
 
 var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
 
 
-var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
-
-
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 
 
@@ -43,27 +40,10 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
   const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
   const { isFocusVisible } = _NOELZTQXcjs.useFocusVisible.call(void 0, );
-  const classicStyles = _classnames2.default.call(void 0, RadioButton_module_default.background, RadioButton_module_default[size], {
-    [RadioButton_module_default.errorBorderColor]: error,
-    [RadioButton_module_default.borderColor]: !error,
-    [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles,
-    [RadioButton_module_default.mdCheckedBorder]: checked && size === "md",
-    [RadioButton_module_default.smCheckedBorder]: checked && size === "sm",
-    [RadioButton_module_default.neutralBorder]: !checked && size === "md"
-  });
-  const cambioStyles = _classnames2.default.call(void 0, 
-    RadioButton_module_default.background,
-    error ? _QAS3KERZcjs.colors_module_default.cambioDestructive370BackgroundColor : _QAS3KERZcjs.colors_module_default.cambioGray370BackgroundColor,
-    RadioButton_module_default[size],
-    {
-      [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
-    }
-  );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "label",
     {
@@ -77,9 +57,21 @@ var RadioButton = ({
         }
       ),
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: themeName === "classic" ? classicStyles : cambioStyles }),
-        themeName === "cambio" && checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _GANR5JVVcjs.Box_default,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _classnames2.default.call(void 0, 
+              RadioButton_module_default.background,
+              error ? _QAS3KERZcjs.colors_module_default.cambioDestructive370BackgroundColor : _QAS3KERZcjs.colors_module_default.cambioGray370BackgroundColor,
+              RadioButton_module_default[size],
+              {
+                [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
+              }
+            )
+          }
+        ),
+        checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _OT2MUGKKcjs.Box_default,
           {
             backgroundColor: error ? "destructive900" : "gray900",
             width: size === "md" ? 12 : 8,
@@ -121,7 +113,7 @@ var RadioButton = ({
           }
         ),
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _XU3CLITIcjs.Typography_default,
+          _5VHLZADOcjs.Typography_default,
           {
             size: size === "md" ? 200 : 100,
             color: error ? "destructive-primary" : "gray900",
@@ -137,4 +129,4 @@ var RadioButton_default = RadioButton;
 
 
 exports.RadioButton_default = RadioButton_default;
-//# sourceMappingURL=5MKCDCHQ.cjs.map
+//# sourceMappingURL=KYGRRVLW.cjs.map

package/dist/__chunks/KYGRRVLW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;ADuFrvB,SAWE,KAXF;AAzEJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,UAC1B,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,QACI,sBAAY,sCACZ,sBAAY;AAAA,cAChB,2BAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,cACrC;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,QAAQ,mBAAmB;AAAA,YAC5C,OAAO,SAAS,OAAO,KAAK;AAAA,YAC5B,QAAQ,SAAS,OAAO,KAAK;AAAA,YAC7B,UAAS;AAAA,YACT,UAAS;AAAA,YACT,2BAA2B;AAAA,cACzB,SAAS;AAAA,gBACP,MAAM,SAAS,OAAO,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n          [styles.smBase]: size === \"sm\",\n          [styles.mdBase]: size === \"md\",\n        },\n      )}\n    >\n      <div\n        className={classnames(\n          styles.background,\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n          },\n        )}\n      />\n      {checked && (\n        <Box\n          backgroundColor={error ? \"destructive900\" : \"gray900\"}\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"]}

package/dist/__chunks/LL5MNX7Y.cjs

@@ -0,0 +1,91 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+
+var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
+
+
+var _5VHLZADOcjs = require('./5VHLZADO.cjs');
+
+
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
+
+// src/Chip/Chip.tsx
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:./Chip.module.css#css-module
+var Chip_module_default = { "chip": "_chip_b9vyr_1", "disabled": "_disabled_b9vyr_12", "deselectedChip": "_deselectedChip_b9vyr_17", "deselectedChipOnDarkBackground": "_deselectedChipOnDarkBackground_b9vyr_21", "selectedChip": "_selectedChip_b9vyr_25", "selectedChipOnDarkBackground": "_selectedChipOnDarkBackground_b9vyr_29", "icon": "_icon_b9vyr_33", "selectedIcon": "_selectedIcon_b9vyr_41", "sm": "_sm_b9vyr_45", "forceFocus": "_forceFocus_b9vyr_52" };
+
+// src/Chip/Chip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function typographyColor({
+  selected,
+  on
+}) {
+  if (on === "darkBackground") {
+    if (selected) {
+      return "gray900";
+    } else {
+      return "white";
+    }
+  } else {
+    if (selected) {
+      return "white";
+    } else {
+      return "gray900";
+    }
+  }
+}
+var Chip = _react.forwardRef.call(void 0, 
+  ({
+    disabled: disabledProp = false,
+    selected = false,
+    "data-testid": dataTestId,
+    text,
+    on = "lightBackground",
+    onChange,
+    icon: Icon,
+    dangerouslyForceFocusStyles
+  }, ref) => {
+    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
+    const disabled = !isHydrated || disabledProp;
+    const selectedChipStyle = on === "lightBackground" ? Chip_module_default.selectedChip : Chip_module_default.selectedChipOnDarkBackground;
+    const deselectedChipStyle = on === "lightBackground" ? Chip_module_default.deselectedChip : Chip_module_default.deselectedChipOnDarkBackground;
+    const chipStyles = _classnames2.default.call(void 0, Chip_module_default.chip, Chip_module_default.sm, {
+      [selectedChipStyle]: selected,
+      [deselectedChipStyle]: !selected,
+      [Chip_module_default.disabled]: disabled,
+      [Chip_module_default.forceFocus]: dangerouslyForceFocusStyles
+    });
+    const iconStyles = _classnames2.default.call(void 0, Chip_module_default.icon, {
+      [Chip_module_default.selectedIcon]: selected
+    });
+    const color = _react.useMemo.call(void 0, 
+      () => typographyColor({ selected, on }),
+      [selected, on]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        className: chipStyles,
+        disabled,
+        "data-testid": dataTestId,
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        onClick: onChange,
+        children: [
+          Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5VHLZADOcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Chip_default = Chip;
+
+
+
+exports.Chip_default = Chip_default;
+//# sourceMappingURL=LL5MNX7Y.cjs.map

package/dist/__chunks/LL5MNX7Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAe;AAC3C,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,kBAAiB,4BAA2B,kCAAiC,4CAA2C,gBAAe,0BAAyB,gCAA+B,0CAAyC,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,cAAa,uBAAsB;;;AD2Hxf,SASW,KATX;AApHN,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGwB;AACtB,MAAI,OAAO,kBAAkB;AAC3B,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAqDA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,oBACJ,OAAO,oBACH,oBAAO,eACP,oBAAO;AAEb,UAAM,sBACJ,OAAO,oBACH,oBAAO,iBACP,oBAAO;AAEb,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI;AAAA,MACpD,CAAC,iBAAiB,GAAG;AAAA,MACrB,CAAC,mBAAmB,GAAG,CAAC;AAAA,MACxB,CAAC,oBAAO,QAAQ,GAAG;AAAA,MACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,IACvB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,EAAE,UAAU,GAAG,CAAC;AAAA,MACtC,CAAC,UAAU,EAAE;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB,8BAAC,sBAAW,MAAM,KAAK,OAAc,QAAO,UACzC,gBACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nfunction typographyColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  if (on === \"darkBackground\") {\n    if (selected) {\n      return \"gray900\";\n    } else {\n      return \"white\";\n    }\n  } else {\n    if (selected) {\n      return \"white\";\n    } else {\n      return \"gray900\";\n    }\n  }\n}\n\ntype ChipProps = {\n  /**\n   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the chip.\n   *\n   * * `sm`: 32px\n   *\n   * `lg` is deprecated\n   *\n   * @defaultValue sm\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * Indicate whether the badge renders on a light or dark background. Changes the color of the chip (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      disabled: disabledProp = false,\n      selected = false,\n      \"data-testid\": dataTestId,\n      text,\n      on = \"lightBackground\",\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const selectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.selectedChip\n        : styles.selectedChipOnDarkBackground;\n\n    const deselectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.deselectedChip\n        : styles.deselectedChipOnDarkBackground;\n\n    const chipStyles = classnames(styles.chip, styles.sm, {\n      [selectedChipStyle]: selected,\n      [deselectedChipStyle]: !selected,\n      [styles.disabled]: disabled,\n      [styles.forceFocus]: dangerouslyForceFocusStyles,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n\n    const color = useMemo(\n      () => typographyColor({ selected, on }),\n      [selected, on],\n    );\n\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography size={100} color={color} weight=\"medium\">\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_b9vyr_1\",\"disabled\":\"_disabled_b9vyr_12\",\"deselectedChip\":\"_deselectedChip_b9vyr_17\",\"deselectedChipOnDarkBackground\":\"_deselectedChipOnDarkBackground_b9vyr_21\",\"selectedChip\":\"_selectedChip_b9vyr_25\",\"selectedChipOnDarkBackground\":\"_selectedChipOnDarkBackground_b9vyr_29\",\"icon\":\"_icon_b9vyr_33\",\"selectedIcon\":\"_selectedIcon_b9vyr_41\",\"sm\":\"_sm_b9vyr_45\",\"forceFocus\":\"_forceFocus_b9vyr_52\"}"]}

package/dist/__chunks/{6OCOGTM5.cjs → LPRAK3CL.cjs}

@@ -5,19 +5,16 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
 
 
 
-var _7SCBZPIFcjs = require('./7SCBZPIF.cjs');
+var _N47VDOUPcjs = require('./N47VDOUP.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _GANR5JVVcjs = require('./GANR5JVV.cjs');
+var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
 
 
-var _XU3CLITIcjs = require('./XU3CLITI.cjs');
-
-
-var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
+var _5VHLZADOcjs = require('./5VHLZADO.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -33,15 +30,10 @@ 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_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" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1f379_1", "opacityOverlay": "_opacityOverlay_1f379_7", "selectWrapper": "_selectWrapper_1f379_11", "selectBox": "_selectBox_1f379_16", "selectBoxCambio": "_selectBoxCambio_1f379_32", "selectMouseFocusStyling": "_selectMouseFocusStyling_1f379_41", "unselected": "_unselected_1f379_46", "selected": "_selected_1f379_50", "arrowIcon": "_arrowIcon_1f379_54", "selectErrorCambio": "_selectErrorCambio_1f379_68" };
 
 // src/SelectList/SelectList.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var iconSize = {
-  sm: 20,
-  md: 24,
-  lg: 24
-};
 function SelectList({
   children,
   "data-testid": dataTestId,
@@ -59,7 +51,6 @@ function SelectList({
   const reactId = _react.useId.call(void 0, );
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
-  const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
   const selectId = id != null ? id : reactId;
   const { isFocusVisible } = _NOELZTQXcjs.useFocusVisible.call(void 0, );
   const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
@@ -70,28 +61,24 @@ function SelectList({
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GANR5JVVcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XU3CLITIcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5VHLZADOcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "select",
             {
               id: selectId,
+              "data-size": size,
               "data-testid": dataTestId,
               disabled,
-              className: _classnames2.default.call(void 0, 
-                SelectList_module_default.selectBox,
-                themeName === "classic" ? SelectList_module_default.selectBoxClassic : SelectList_module_default.selectBoxCambio,
-                themeName === "classic" && SelectList_module_default[size],
-                {
-                  [SelectList_module_default.unselected]: !selectedValue && !errorText,
-                  [SelectList_module_default.selected]: selectedValue && !errorText,
-                  [themeName === "classic" ? SelectList_module_default.selectError : SelectList_module_default.selectErrorCambio]: errorText,
-                  [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
-                  // for focus keyboard
-                  [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
-                  // for focus mouse
-                }
-              ),
+              className: _classnames2.default.call(void 0, SelectList_module_default.selectBox, SelectList_module_default.selectBoxCambio, {
+                [SelectList_module_default.unselected]: !selectedValue && !errorText,
+                [SelectList_module_default.selected]: selectedValue && !errorText,
+                [SelectList_module_default.selectErrorCambio]: errorText,
+                [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
+                // for focus keyboard
+                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
+                // for focus mouse
+              }),
               onChange,
               onClick,
               value: placeholderText && !selectedValue ? placeholderText : selectedValue,
@@ -109,19 +96,19 @@ function SelectList({
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
-              width: themeName === "classic" ? iconSize[size] : 24,
+              width: 24,
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _7SCBZPIFcjs.ColorBaseDestructive700 : _7SCBZPIFcjs.ColorBaseGray800,
+                  fill: errorText ? _N47VDOUPcjs.ColorBaseDestructive700 : _N47VDOUPcjs.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"
                 }
               )
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GANR5JVVcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _XU3CLITIcjs.Typography_default,
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _5VHLZADOcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -137,4 +124,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=6OCOGTM5.cjs.map
+//# sourceMappingURL=LPRAK3CL.cjs.map