@cambly/syntax-core 10.29.0 → 10.31.0

package/dist/__chunks/{3FMGCZP2.cjs → SNAE52BH.cjs}

@@ -1,13 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"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');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -19,7 +16,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./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/TextField/TextField.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -40,10 +37,9 @@ function TextField({
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
   const reactId = _react.useId.call(void 0, );
-  const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
   const inputId = id != null ? id : reactId;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _GANR5JVVcjs.Box_default,
+    _OT2MUGKKcjs.Box_default,
     {
       display: "flex",
       direction: "column",
@@ -55,21 +51,15 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, 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", { className: TextField_module_default.label, htmlFor: inputId, 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.jsx.call(void 0, 
           "input",
           {
             autoComplete,
-            className: _classnames2.default.call(void 0, 
-              TextField_module_default.textfield,
-              themeName === "classic" ? TextField_module_default.textfieldClassic : TextField_module_default.textfieldCambio,
-              themeName === "classic" && TextField_module_default[size],
-              themeName === "cambio" ? TextField_module_default.mdCambio : void 0,
-              themeName === "classic" ? TextField_module_default[`${size}Height`] : TextField_module_default.heightCambio,
-              {
-                [themeName === "classic" ? TextField_module_default.inputError : TextField_module_default.inputErrorCambio]: errorText
-              }
-            ),
+            className: _classnames2.default.call(void 0, TextField_module_default.textfield, TextField_module_default.md, TextField_module_default.height, {
+              [TextField_module_default.inputError]: errorText
+            }),
+            "data-size": size,
             "data-testid": dataTestId,
             disabled,
             id: inputId,
@@ -79,8 +69,8 @@ function TextField({
             value
           }
         ),
-        (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",
@@ -95,4 +85,4 @@ function TextField({
 
 
 exports.TextField = TextField;
-//# sourceMappingURL=3FMGCZP2.cjs.map
+//# sourceMappingURL=SNAE52BH.cjs.map

package/dist/__chunks/SNAE52BH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,uBAAsB;;;ADmG5P,SAcQ,KAdR;AArFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GAiEiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,WAAW,yBAAO,WAAW,yBAAO,IAAI,yBAAO,QAAQ;AAAA,cAChE,CAAC,yBAAO,UAAU,GAAG;AAAA,YACvB,CAAC;AAAA,YACD,aAAW;AAAA,YACX,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ","sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `md`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\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    >\n      {label && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(styles.textfield, styles.md, styles.height, {\n          [styles.inputError]: errorText,\n        })}\n        data-size={size}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\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","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\"}"]}

package/dist/__chunks/SOZG53ZB.js

@@ -0,0 +1,117 @@
+"use client"
+import {
+  Focus_module_default
+} from "./KKADUD65.js";
+import {
+  Typography_default
+} from "./3GNWH6C7.js";
+import {
+  colors_module_default
+} from "./B7PDT66P.js";
+import {
+  useIsHydrated
+} from "./JB65NEXK.js";
+import {
+  useFocusVisible
+} from "./BWPNF6RD.js";
+
+// src/Checkbox/Checkbox.tsx
+import { useState } from "react";
+import classNames from "classnames";
+
+// css-module:./Checkbox.module.css#css-module
+var Checkbox_module_default = { "mainContainer": "_mainContainer_17ijp_1", "inputOverlay": "_inputOverlay_17ijp_9", "checkbox": "_checkbox_17ijp_17", "disabled": "_disabled_17ijp_26", "cursorDisabled": "_cursorDisabled_17ijp_30", "cursorEnabled": "_cursorEnabled_17ijp_34", "sm": "_sm_17ijp_38", "md": "_md_17ijp_43", "smBorderRadius": "_smBorderRadius_17ijp_48", "mdBorderRadius": "_mdBorderRadius_17ijp_52", "checkmark": "_checkmark_17ijp_56", "checkmarkError": "_checkmarkError_17ijp_60" };
+
+// src/Checkbox/Checkbox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var typographySize = {
+  sm: 100,
+  md: 200
+};
+var iconWidth = {
+  sm: 12,
+  md: 20
+};
+var Checkbox = ({
+  checked = false,
+  "data-testid": dataTestId,
+  disabled: disabledProp = false,
+  size = "md",
+  label,
+  error = false,
+  onChange
+}) => {
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const [isFocused, setIsFocused] = useState(false);
+  const { isFocusVisible } = useFocusVisible();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: classNames(
+        Checkbox_module_default.mainContainer,
+        Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
+        {
+          [Checkbox_module_default.disabled]: disabled
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              Checkbox_module_default.checkbox,
+              Checkbox_module_default[size],
+              {
+                [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
+              },
+              error ? colors_module_default.cambioDestructive370BackgroundColor : colors_module_default.cambioGray370BackgroundColor
+            ),
+            children: checked && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: error ? Checkbox_module_default.checkmarkError : Checkbox_module_default.checkmark,
+                d: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "data-testid": dataTestId,
+            type: "checkbox",
+            className: classNames(
+              Checkbox_module_default.inputOverlay,
+              Checkbox_module_default[size],
+              Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`]
+            ),
+            checked,
+            onChange,
+            disabled,
+            onFocus: () => {
+              setIsFocused(true);
+            },
+            onBlur: () => {
+              setIsFocused(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography_default,
+          {
+            size: typographySize[size],
+            color: error ? "destructive-primary" : "gray900",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var Checkbox_default = Checkbox;
+
+export {
+  Checkbox_default
+};
+//# sourceMappingURL=SOZG53ZB.js.map

package/dist/__chunks/SOZG53ZB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: 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.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n        )}\n      >\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              className={error ? styles.checkmarkError : styles.checkmark}\n              d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray900\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_17ijp_1\",\"inputOverlay\":\"_inputOverlay_17ijp_9\",\"checkbox\":\"_checkbox_17ijp_17\",\"disabled\":\"_disabled_17ijp_26\",\"cursorDisabled\":\"_cursorDisabled_17ijp_30\",\"cursorEnabled\":\"_cursorEnabled_17ijp_34\",\"sm\":\"_sm_17ijp_38\",\"md\":\"_md_17ijp_43\",\"smBorderRadius\":\"_smBorderRadius_17ijp_48\",\"mdBorderRadius\":\"_mdBorderRadius_17ijp_52\",\"checkmark\":\"_checkmark_17ijp_56\",\"checkmarkError\":\"_checkmarkError_17ijp_60\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;AD6E/hB,SAwBQ,KAxBR;AApEJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;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,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,sCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;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,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/SPX2VOW3.cjs

@@ -0,0 +1,117 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+
+var _XLUVINJWcjs = require('./XLUVINJW.cjs');
+
+
+var _5VHLZADOcjs = require('./5VHLZADO.cjs');
+
+
+var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
+
+
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
+
+
+var _NOELZTQXcjs = require('./NOELZTQX.cjs');
+
+// src/Checkbox/Checkbox.tsx
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:./Checkbox.module.css#css-module
+var Checkbox_module_default = { "mainContainer": "_mainContainer_17ijp_1", "inputOverlay": "_inputOverlay_17ijp_9", "checkbox": "_checkbox_17ijp_17", "disabled": "_disabled_17ijp_26", "cursorDisabled": "_cursorDisabled_17ijp_30", "cursorEnabled": "_cursorEnabled_17ijp_34", "sm": "_sm_17ijp_38", "md": "_md_17ijp_43", "smBorderRadius": "_smBorderRadius_17ijp_48", "mdBorderRadius": "_mdBorderRadius_17ijp_52", "checkmark": "_checkmark_17ijp_56", "checkmarkError": "_checkmarkError_17ijp_60" };
+
+// src/Checkbox/Checkbox.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var typographySize = {
+  sm: 100,
+  md: 200
+};
+var iconWidth = {
+  sm: 12,
+  md: 20
+};
+var Checkbox = ({
+  checked = false,
+  "data-testid": dataTestId,
+  disabled: disabledProp = false,
+  size = "md",
+  label,
+  error = false,
+  onChange
+}) => {
+  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, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "label",
+    {
+      className: _classnames2.default.call(void 0, 
+        Checkbox_module_default.mainContainer,
+        Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
+        {
+          [Checkbox_module_default.disabled]: disabled
+        }
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _classnames2.default.call(void 0, 
+              Checkbox_module_default.checkbox,
+              Checkbox_module_default[size],
+              {
+                [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
+              },
+              error ? _QAS3KERZcjs.colors_module_default.cambioDestructive370BackgroundColor : _QAS3KERZcjs.colors_module_default.cambioGray370BackgroundColor
+            ),
+            children: checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "path",
+              {
+                className: error ? Checkbox_module_default.checkmarkError : Checkbox_module_default.checkmark,
+                d: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            "data-testid": dataTestId,
+            type: "checkbox",
+            className: _classnames2.default.call(void 0, 
+              Checkbox_module_default.inputOverlay,
+              Checkbox_module_default[size],
+              Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`]
+            ),
+            checked,
+            onChange,
+            disabled,
+            onFocus: () => {
+              setIsFocused(true);
+            },
+            onBlur: () => {
+              setIsFocused(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _5VHLZADOcjs.Typography_default,
+          {
+            size: typographySize[size],
+            color: error ? "destructive-primary" : "gray900",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var Checkbox_default = Checkbox;
+
+
+
+exports.Checkbox_default = Checkbox_default;
+//# sourceMappingURL=SPX2VOW3.cjs.map

package/dist/__chunks/SPX2VOW3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;AD6E/hB,SAwBQ,KAxBR;AApEJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;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,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,sCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;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,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: 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.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n        )}\n      >\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              className={error ? styles.checkmarkError : styles.checkmark}\n              d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray900\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_17ijp_1\",\"inputOverlay\":\"_inputOverlay_17ijp_9\",\"checkbox\":\"_checkbox_17ijp_17\",\"disabled\":\"_disabled_17ijp_26\",\"cursorDisabled\":\"_cursorDisabled_17ijp_30\",\"cursorEnabled\":\"_cursorEnabled_17ijp_34\",\"sm\":\"_sm_17ijp_38\",\"md\":\"_md_17ijp_43\",\"smBorderRadius\":\"_smBorderRadius_17ijp_48\",\"mdBorderRadius\":\"_mdBorderRadius_17ijp_52\",\"checkmark\":\"_checkmark_17ijp_56\",\"checkmarkError\":\"_checkmarkError_17ijp_60\"}"]}

package/dist/__chunks/{J43HGNHN.cjs → T5EA5RPQ.cjs}

@@ -4,28 +4,7 @@
 var _DTKTTGU5cjs = require('./DTKTTGU5.cjs');
 
 // src/colors/backgroundColor.ts
-function classicBackgroundColor(color) {
-  switch (color) {
-    case "secondary":
-      return _DTKTTGU5cjs.colors_module_default.primary100BackgroundColor;
-    case "destructive-primary":
-      return _DTKTTGU5cjs.colors_module_default.destructive700BackgroundColor;
-    case "destructive-secondary":
-      return _DTKTTGU5cjs.colors_module_default.destructive100BackgroundColor;
-    case "success":
-      return _DTKTTGU5cjs.colors_module_default.success700BackgroundColor;
-    case "tertiary":
-    case "destructive-tertiary":
-      return _DTKTTGU5cjs.colors_module_default.whiteBackgroundColor;
-    case "branded":
-      return _DTKTTGU5cjs.colors_module_default.yellow700BackgroundColor;
-    case "inverse":
-      return _DTKTTGU5cjs.colors_module_default.gray60BackgroundColor;
-    default:
-      return _DTKTTGU5cjs.colors_module_default.primary700BackgroundColor;
-  }
-}
-function cambioBackgroundColor(color, on) {
+function backgroundColor(color, on) {
   if (on === "lightBackground") {
     switch (color) {
       case "primary":
@@ -77,6 +56,5 @@ function cambioBackgroundColor(color, on) {
 
 
 
-
-exports.classicBackgroundColor = classicBackgroundColor; exports.cambioBackgroundColor = cambioBackgroundColor;
-//# sourceMappingURL=J43HGNHN.cjs.map
+exports.backgroundColor = backgroundColor;
+//# sourceMappingURL=T5EA5RPQ.cjs.map

package/dist/__chunks/T5EA5RPQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/backgroundColor.ts"],"names":[],"mappings":";;;;;;AAGO,SAAS,gBACd,OACA,IACQ;AACR,MAAI,OAAO,mBAAmB;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF,OAAO;AACL,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF;AACF","sourcesContent":["import { type CambioColor } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport function backgroundColor(\n  color: (typeof CambioColor)[number],\n  on: \"lightBackground\" | \"darkBackground\",\n): string {\n  if (on === \"lightBackground\") {\n    switch (color) {\n      case \"primary\":\n        return styles.cambioBlackBackgroundColor;\n      case \"secondary\":\n        return styles.cambioGray370BackgroundColor;\n      case \"tertiary\":\n      case \"success-tertiary\":\n      case \"destructive-tertiary\":\n        return styles.cambioTransparentFullBackgroundColor;\n      case \"success-primary\":\n        return styles.cambioSuccess700BackgroundColor;\n      case \"success-secondary\":\n        return styles.cambioSuccess370BackgroundColor;\n      case \"destructive-primary\":\n        return styles.cambioDestructive700BackgroundColor;\n      case \"destructive-secondary\":\n        return styles.cambioDestructive370BackgroundColor;\n      case \"branded\":\n        return styles.cambioYellow700BackgroundColor;\n      default:\n        return styles.cambioBlackBackgroundColor;\n    }\n  } else {\n    switch (color) {\n      case \"primary\":\n        return styles.cambioGray200BackgroundColor;\n      case \"secondary\":\n        return styles.cambioGray870BackgroundColor;\n      case \"tertiary\":\n      case \"success-tertiary\":\n      case \"destructive-tertiary\":\n        return styles.cambioTransparentFullBackgroundColor;\n      case \"success-primary\":\n        return styles.cambioSuccess300BackgroundColor;\n      case \"success-secondary\":\n        return styles.cambioSuccess770BackgroundColor;\n      case \"destructive-primary\":\n        return styles.cambioDestructive300BackgroundColor;\n      case \"destructive-secondary\":\n        return styles.cambioDestructive770BackgroundColor;\n      case \"branded\":\n        return styles.cambioYellow700BackgroundColor;\n      default:\n        return styles.cambioWhiteBackgroundColor;\n    }\n  }\n}\n"]}

package/dist/__chunks/{3CNALXRL.js → T6BFW6YO.js}

@@ -1,29 +1,29 @@
 "use client"
 import {
   ButtonGroup_default
-} from "./5OLT2HH5.js";
+} from "./BOX3VY3Q.js";
 import {
   Button_default
-} from "./BQOD4WU7.js";
+} from "./GR5G6EJO.js";
 import {
   Divider
-} from "./63GEZVJ4.js";
+} from "./XHTRMLY4.js";
 import {
   RichSelectChip_default
-} from "./KTTIFVGY.js";
+} from "./H2AWA6IQ.js";
 import {
   RichSelectSection_default
-} from "./K27Z66LH.js";
+} from "./OQE24UY6.js";
 import {
   RichSelectRadioButton_default
-} from "./MONMI3LS.js";
+} from "./UB4WHLZC.js";
 import {
   RichSelectItemContext,
   RichSelect_module_default
 } from "./ODMJANSX.js";
 import {
   Box_default
-} from "./HCHFPFNX.js";
+} from "./ZPY7QEBH.js";
 
 // src/RichSelect/RichSelectBox.tsx
 import {
@@ -208,4 +208,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=3CNALXRL.js.map
+//# sourceMappingURL=T6BFW6YO.js.map

package/dist/__chunks/{LECUYS4O.cjs → TDPIWHGR.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _VLK5CARIcjs = require('./VLK5CARI.cjs');
+var _GNKVDWTScjs = require('./GNKVDWTS.cjs');
 
 
-var _W5MIJIZAcjs = require('./W5MIJIZA.cjs');
+var _2IHACTOYcjs = require('./2IHACTOY.cjs');
 
 
 var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
@@ -100,7 +100,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
   } = props;
   const modal = !children || modalProp;
   const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _VLK5CARIcjs.ModalDialog_default,
+    _GNKVDWTScjs.ModalDialog_default,
     {
       accessibilityLabel,
       accessibilityCloseLabel,
@@ -117,7 +117,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
     {
       placement: _LLFHCGRAcjs.syntaxToReactAriaPlacement.call(void 0, placement),
       onChangeContentVisibility,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _W5MIJIZAcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _2IHACTOYcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
     }
   );
   if (!children)
@@ -141,4 +141,4 @@ var Popover_default = Popover;
 
 
 exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
-//# sourceMappingURL=LECUYS4O.cjs.map
+//# sourceMappingURL=TDPIWHGR.cjs.map

package/dist/__chunks/{ZDQ6WQM3.cjs → THM3NAFO.cjs}

@@ -1,5 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
+
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
+
 // src/Modal/FocusTrap.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
@@ -33,6 +36,7 @@ function FocusTrap({
 }) {
   const elRef = _react.useRef.call(void 0, null);
   const previouslyFocusedElRef = _react.useRef.call(void 0, null);
+  const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   _react.useEffect.call(void 0, () => {
     const { current: element } = elRef;
     const focusFirstChild = () => {
@@ -50,7 +54,7 @@ function FocusTrap({
       }
       event.stopPropagation();
       event.preventDefault();
-      focusFirstChild();
+      isHydrated && focusFirstChild();
     };
     previouslyFocusedElRef.current = document.activeElement;
     focusFirstChild();
@@ -62,11 +66,11 @@ function FocusTrap({
         focusElement(previouslyFocusedEl);
       }
     };
-  }, [elRef, previouslyFocusedElRef]);
+  }, [isHydrated, elRef, previouslyFocusedElRef]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
 }
 
 
 
 exports.FocusTrap = FocusTrap;
-//# sourceMappingURL=ZDQ6WQM3.cjs.map
+//# sourceMappingURL=THM3NAFO.cjs.map

package/dist/__chunks/THM3NAFO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/FocusTrap.tsx"],"names":[],"mappings":";;;;;;AAAA,SAAgB,WAAW,cAAiC;AA2FxD;AAxFJ,SAAS,kBAAkB,IAA6C;AAEtE,QAAM,WAAW;AAAA,IACf;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,EACF,EAAE,KAAK,GAAG;AACV,SAAO,GAAG,iBAAiB,QAAQ;AACrC;AAEA,IAAM,eAAe,CAAC,OAAqB;AACzC,MAAI,MAAM,OAAO,GAAG,UAAU,YAAY;AACxC,OAAG,MAAM;AAAA,EACX;AACF;AAKe,SAAR,UAA2B;AAAA,EAChC;AACF,GAEiB;AACf,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,yBAAyB,OAA2B,IAAI;AAC9D,QAAM,aAAa,cAAc;AAEjC,YAAU,MAAM;AACd,UAAM,EAAE,SAAS,QAAQ,IAAI;AAG7B,UAAM,kBAAkB,MAAM;AAC5B,YAAM,eAAe,WAAW,OAAO;AACvC,UAAI,WAAW,CAAC,cAAc;AAC5B,qBAAa,kBAAkB,OAAO,EAAE,CAAC,CAAC;AAAA,MAC5C;AAAA,IACF;AAEA,UAAM,cAA2C,CAAC,UAAsB;AACtE,UACE,CAAC,WACA,MAAM,kBAAkB,QAAQ,QAAQ,SAAS,MAAM,MAAM,GAC9D;AACA;AAAA,MACF;AAGA,UACE,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,mCAAmC,MAAM,MAC9D;AACA;AAAA,MACF;AAEA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB,oBAAc,gBAAgB;AAAA,IAChC;AAGA,2BAAuB,UAAU,SAAS;AAC1C,oBAAgB;AAChB,aAAS,iBAAiB,SAAS,aAAa,IAAI;AAEpD,WAAO,SAAS,UAAU;AACxB,YAAM,EAAE,SAAS,oBAAoB,IAAI;AACzC,eAAS,oBAAoB,SAAS,aAAa,IAAI;AAEvD,UAAI,qBAAqB;AACvB,qBAAa,mBAAmB;AAAA,MAClC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,OAAO,sBAAsB,CAAC;AAE9C,SACE,oBAAC,SAAI,eAAY,qBAAoB,KAAK,OACvC,UACH;AAEJ","sourcesContent":["import React, { useEffect, useRef, type ReactElement } from \"react\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nfunction queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {\n  // Focusable, interactive elements that could possibly be in children\n  const selector = [\n    \"a[href]\",\n    \"area[href]\",\n    \"input:not([disabled])\",\n    \"select:not([disabled])\",\n    \"textarea:not([disabled])\",\n    \"button:not([disabled])\",\n    \"iframe\",\n    \"object\",\n    \"embed\",\n    '[tabindex=\"-1\"]',\n    '[tabindex=\"0\"]',\n    \"[contenteditable]\",\n    \"audio[controls]\",\n    \"video[controls]\",\n    \"summary\",\n  ].join(\",\");\n  return el.querySelectorAll(selector);\n}\n\nconst focusElement = (el?: HTMLElement) => {\n  if (el && typeof el.focus === \"function\") {\n    el.focus();\n  }\n};\n\n/**\n * FocusTrap is used by components like Modal to ensure that only elements within children components can be focused.\n */\nexport default function FocusTrap({\n  children,\n}: {\n  children?: ReactElement | null;\n}): ReactElement {\n  const elRef = useRef<HTMLDivElement | null>(null);\n  const previouslyFocusedElRef = useRef<HTMLElement | null>(null);\n  const isHydrated = useIsHydrated();\n\n  useEffect(() => {\n    const { current: element } = elRef;\n\n    // Focus the first child element among all the focusable, interactive elements within `children`\n    const focusFirstChild = () => {\n      const withinIframe = window !== window.parent;\n      if (element && !withinIframe) {\n        focusElement(queryFocusableAll(element)[0]);\n      }\n    };\n\n    const handleFocus: (event: FocusEvent) => void = (event: FocusEvent) => {\n      if (\n        !element ||\n        (event.target instanceof Node && element.contains(event.target))\n      ) {\n        return;\n      }\n\n      // This prevents stack overflow when multiple FocusTraps are rendered\n      if (\n        event.target instanceof Element &&\n        event.target.closest('[data-testid=\"syntax-focus-trap\"]') !== null\n      ) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      isHydrated && focusFirstChild();\n    };\n\n    // If an element has focus currently, keep a reference to that element\n    previouslyFocusedElRef.current = document.activeElement as HTMLElement;\n    focusFirstChild();\n    document.addEventListener(\"focus\", handleFocus, true);\n\n    return function cleanup() {\n      const { current: previouslyFocusedEl } = previouslyFocusedElRef;\n      document.removeEventListener(\"focus\", handleFocus, true);\n      // If we previously stored a reference to a focused element, return focus to that element\n      if (previouslyFocusedEl) {\n        focusElement(previouslyFocusedEl);\n      }\n    };\n  }, [isHydrated, elRef, previouslyFocusedElRef]);\n\n  return (\n    <div data-testid=\"syntax-focus-trap\" ref={elRef}>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/__chunks/{MONMI3LS.js → UB4WHLZC.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   RadioButton_default
-} from "./N5B6KNJR.js";
+} from "./J6JYJXK5.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = forwardRef(
 export {
   RichSelectRadioButton_default
 };
-//# sourceMappingURL=MONMI3LS.js.map
+//# sourceMappingURL=UB4WHLZC.js.map

package/dist/__chunks/{UF7SXHS4.js → UIPAXBI7.js}

@@ -10,13 +10,10 @@ import {
 } from "./AVREYFSM.js";
 import {
   rounding_module_default
-} from "./SHHN3SRR.js";
+} from "./EB7WKQ35.js";
 import {
   colors_module_default
 } from "./B7PDT66P.js";
-import {
-  useTheme
-} from "./4GTNQPPD.js";
 
 // src/Dialog/Dialog.tsx
 import React, {
@@ -34,11 +31,6 @@ var Dialog_module_default = { "dialog": "_dialog_1bme6_1" };
 import { Dialog as ReactAriaDialog } from "react-aria-components";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-var sizeToRounding = {
-  sm: "lg",
-  md: "lg",
-  lg: "xl"
-};
 var sizeToPadding = {
   sm: 4,
   md: 5,
@@ -53,7 +45,6 @@ var Dialog = forwardRef(function Dialog2(props, ref) {
     size = "md"
   } = props;
   const { padding } = useContext(DialogContext);
-  const { themeName } = useTheme();
   return /* @__PURE__ */ jsx(
     ReactAriaDialog,
     {
@@ -70,7 +61,7 @@ var Dialog = forwardRef(function Dialog2(props, ref) {
         colors_module_default.whiteBackgroundColor,
         padding_module_default[`paddingX${padding != null ? padding : sizeToPadding[size]}`],
         padding_module_default[`paddingY${padding != null ? padding : sizeToPadding[size]}`],
-        rounding_module_default[themeName === "classic" ? `rounding${sizeToRounding[size]}` : "roundingmdCambio"],
+        rounding_module_default.roundingmd,
         elevation_module_default.elevation400BoxShadow,
         layout_module_default.fullMaxHeight,
         layout_module_default.visibilityVisible,
@@ -86,4 +77,4 @@ export {
   DialogContext,
   Dialog_default
 };
-//# sourceMappingURL=UF7SXHS4.js.map
+//# sourceMappingURL=UIPAXBI7.js.map

package/dist/__chunks/UIPAXBI7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  const { padding } = useContext(DialogContext);\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles.roundingmd,\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1bme6_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}