@cambly/syntax-core 10.9.0 → 10.11.0

package/dist/__chunks/{DSGIOBWG.js → 46XGANFF.js}

@@ -1,7 +1,9 @@
+"use client"
+
 // css-module:../Button/Button.module.css#css-module
 var Button_module_default = { "button": "_button_ddq3j_1", "buttonGap": "_buttonGap_ddq3j_9", "fullWidth": "_fullWidth_ddq3j_50", "sm": "_sm_ddq3j_54", "md": "_md_ddq3j_61", "lg": "_lg_ddq3j_68", "smCambio": "_smCambio_ddq3j_75", "mdCambio": "_mdCambio_ddq3j_82", "lgCambio": "_lgCambio_ddq3j_89", "icon": "_icon_ddq3j_96", "smIcon": "_smIcon_ddq3j_100", "mdIcon": "_mdIcon_ddq3j_107", "lgIcon": "_lgIcon_ddq3j_114", "secondaryBorder": "_secondaryBorder_ddq3j_121", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_ddq3j_125", "loading": "_loading_ddq3j_139", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_ddq3j_1", "loadingCircle": "_loadingCircle_ddq3j_143" };
 
 export {
   Button_module_default
 };
-//# sourceMappingURL=DSGIOBWG.js.map
+//# sourceMappingURL=46XGANFF.js.map

package/dist/__chunks/{DSGIOBWG.js.map → 46XGANFF.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["css-module:../Button/Button.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_ddq3j_1\",\"buttonGap\":\"_buttonGap_ddq3j_9\",\"fullWidth\":\"_fullWidth_ddq3j_50\",\"sm\":\"_sm_ddq3j_54\",\"md\":\"_md_ddq3j_61\",\"lg\":\"_lg_ddq3j_68\",\"smCambio\":\"_smCambio_ddq3j_75\",\"mdCambio\":\"_mdCambio_ddq3j_82\",\"lgCambio\":\"_lgCambio_ddq3j_89\",\"icon\":\"_icon_ddq3j_96\",\"smIcon\":\"_smIcon_ddq3j_100\",\"mdIcon\":\"_mdIcon_ddq3j_107\",\"lgIcon\":\"_lgIcon_ddq3j_114\",\"secondaryBorder\":\"_secondaryBorder_ddq3j_121\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_ddq3j_125\",\"loading\":\"_loading_ddq3j_139\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_ddq3j_1\",\"loadingCircle\":\"_loadingCircle_ddq3j_143\"}"],"mappings":";AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,QAAO,kBAAiB,UAAS,qBAAoB,UAAS,qBAAoB,UAAS,qBAAoB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;","names":[]}
+{"version":3,"sources":["css-module:../Button/Button.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_ddq3j_1\",\"buttonGap\":\"_buttonGap_ddq3j_9\",\"fullWidth\":\"_fullWidth_ddq3j_50\",\"sm\":\"_sm_ddq3j_54\",\"md\":\"_md_ddq3j_61\",\"lg\":\"_lg_ddq3j_68\",\"smCambio\":\"_smCambio_ddq3j_75\",\"mdCambio\":\"_mdCambio_ddq3j_82\",\"lgCambio\":\"_lgCambio_ddq3j_89\",\"icon\":\"_icon_ddq3j_96\",\"smIcon\":\"_smIcon_ddq3j_100\",\"mdIcon\":\"_mdIcon_ddq3j_107\",\"lgIcon\":\"_lgIcon_ddq3j_114\",\"secondaryBorder\":\"_secondaryBorder_ddq3j_121\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_ddq3j_125\",\"loading\":\"_loading_ddq3j_139\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_ddq3j_1\",\"loadingCircle\":\"_loadingCircle_ddq3j_143\"}"],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,QAAO,kBAAiB,UAAS,qBAAoB,UAAS,qBAAoB,UAAS,qBAAoB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;","names":[]}

package/dist/__chunks/{UWLK56NJ.js → 4DDBT2NH.js}

@@ -1,6 +1,7 @@
+"use client"
 import {
   Box_default
-} from "./I5W7ECUO.js";
+} from "./MAPDSZR4.js";
 
 // src/Modal/Layer.tsx
 import { createPortal } from "react-dom";
@@ -28,4 +29,4 @@ function Layer({
 export {
   Layer
 };
-//# sourceMappingURL=UWLK56NJ.js.map
+//# sourceMappingURL=4DDBT2NH.js.map

package/dist/__chunks/{UWLK56NJ.js.map → 4DDBT2NH.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modal/Layer.tsx"],"sourcesContent":["import { type ReactElement, type ReactPortal } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Box from \"../Box/Box\";\n\nexport default function Layer({\n  children,\n  zIndex = 1,\n}: {\n  children: ReactElement;\n  zIndex?: number;\n}): ReactPortal | null {\n  return typeof document !== \"undefined\"\n    ? createPortal(\n        <Box\n          data-testid=\"syntax-layer\"\n          position=\"fixed\"\n          dangerouslySetInlineStyle={{\n            __style: { zIndex, inset: 0 },\n          }}\n        >\n          {children}\n        </Box>,\n        document.body,\n      )\n    : null;\n}\n"],"mappings":";;;;;AACA,SAAS,oBAAoB;AAYrB;AATO,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,GAGuB;AACrB,SAAO,OAAO,aAAa,cACvB;AAAA,IACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS,EAAE,QAAQ,OAAO,EAAE;AAAA,QAC9B;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX,IACA;AACN;","names":[]}
+{"version":3,"sources":["../../src/Modal/Layer.tsx"],"sourcesContent":["import { type ReactElement, type ReactPortal } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Box from \"../Box/Box\";\n\nexport default function Layer({\n  children,\n  zIndex = 1,\n}: {\n  children: ReactElement;\n  zIndex?: number;\n}): ReactPortal | null {\n  return typeof document !== \"undefined\"\n    ? createPortal(\n        <Box\n          data-testid=\"syntax-layer\"\n          position=\"fixed\"\n          dangerouslySetInlineStyle={{\n            __style: { zIndex, inset: 0 },\n          }}\n        >\n          {children}\n        </Box>,\n        document.body,\n      )\n    : null;\n}\n"],"mappings":";;;;;;AACA,SAAS,oBAAoB;AAYrB;AATO,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,GAGuB;AACrB,SAAO,OAAO,aAAa,cACvB;AAAA,IACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS,EAAE,QAAQ,OAAO,EAAE;AAAA,QAC9B;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX,IACA;AACN;","names":[]}

package/dist/__chunks/{SPWDKPHT.cjs → 4RHEB5F4.cjs}

@@ -1,27 +1,22 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
-var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
+
+var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
 
 // src/Card/Card.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function Card({
   backgroundColor = "white",
   children,
-  size,
   "data-testid": dataTestId
 }) {
-  const sizeWidth = {
-    sm: 352,
-    lg: 744
-  };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _SZCVEBN2cjs.Box_default,
+    _WJRIAS4Wcjs.Box_default,
     {
       rounding: "lg",
       padding: 5,
       smPadding: 7,
       lgPadding: 7,
-      maxWidth: size && sizeWidth[size],
       width: "100%",
       backgroundColor,
       "data-testid": dataTestId,
@@ -33,4 +28,4 @@ function Card({
 
 
 exports.Card = Card;
-//# sourceMappingURL=SPWDKPHT.cjs.map
+//# sourceMappingURL=4RHEB5F4.cjs.map

package/dist/__chunks/4RHEB5F4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";;;;;;AA4BI;AANW,SAAR,KAAsB;AAAA,EAC3B,kBAAkB;AAAA,EAClB;AAAA,EACA,eAAe;AACjB,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ","sourcesContent":["import Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  backgroundColor = \"white\",\n  children,\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  return (\n    <Box\n      rounding=\"lg\"\n      padding={5}\n      smPadding={7}\n      lgPadding={7}\n      width=\"100%\"\n      backgroundColor={backgroundColor}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"]}

package/dist/__chunks/4U4UW4AK.js

@@ -0,0 +1,2 @@
+"use client"
+//# sourceMappingURL=4U4UW4AK.js.map

package/dist/__chunks/{GKECCWR3.cjs → 4UJE5GMH.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/SelectList/SelectOption.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// src/SelectList/SelectOption.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var SelectOption = ({
   "data-testid": dataTestId,
@@ -11,4 +13,4 @@ var SelectOption_default = SelectOption;
 
 
 exports.SelectOption_default = SelectOption_default;
-//# sourceMappingURL=GKECCWR3.cjs.map
+//# sourceMappingURL=4UJE5GMH.cjs.map

package/dist/__chunks/4UJE5GMH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectOption.tsx"],"names":[],"mappings":";;;AAaE;AAXF,IAAM,eAAe,CAAC;AAAA,EACpB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAME,oBAAC,YAAO,eAAa,YAAY,OAAc,UAC5C,iBACH;AAGF,IAAO,uBAAQ","sourcesContent":["import React, { type ReactElement } from \"react\";\n\nconst SelectOption = ({\n  \"data-testid\": dataTestId,\n  value,\n  label,\n  disabled = false,\n}: {\n  \"data-testid\"?: string;\n  value: string;\n  label: string;\n  disabled?: boolean;\n}): ReactElement => (\n  <option data-testid={dataTestId} value={value} disabled={disabled}>\n    {label}\n  </option>\n);\n\nexport default SelectOption;\n"]}

package/dist/__chunks/{DM4UMQ5D.cjs → 4ZST4KQI.cjs}

@@ -1,44 +1,45 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
 
-var _ANT3IQ3Xcjs = require('./ANT3IQ3X.cjs');
 
+var _6SALMOFUcjs = require('./6SALMOFU.cjs');
 
-var _LCEAHKFEcjs = require('./LCEAHKFE.cjs');
 
+var _WEIWUACWcjs = require('./WEIWUACW.cjs');
 
-var _TVGN7SBIcjs = require('./TVGN7SBI.cjs');
 
+var _NYOKOJQBcjs = require('./NYOKOJQB.cjs');
 
-var _VA23P3ZIcjs = require('./VA23P3ZI.cjs');
 
+var _ULMCQ7EAcjs = require('./ULMCQ7EA.cjs');
 
-var _M3L2KJQYcjs = require('./M3L2KJQY.cjs');
 
+var _DKBI6MRYcjs = require('./DKBI6MRY.cjs');
 
 
-var _POAYQEOAcjs = require('./POAYQEOA.cjs');
 
+var _CJJAA2FDcjs = require('./CJJAA2FD.cjs');
 
-var _7W5RYLTScjs = require('./7W5RYLTS.cjs');
 
+var _IYA2TMMRcjs = require('./IYA2TMMR.cjs');
 
-var _WDR3YIMAcjs = require('./WDR3YIMA.cjs');
 
+var _YT3NEG6Zcjs = require('./YT3NEG6Z.cjs');
 
-var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
 
+var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
 
-var _TIW4V757cjs = require('./TIW4V757.cjs');
 
+var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
 
-var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 
 
 
-var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
 
 // src/RichSelect/RichSelectList.tsx
 
@@ -81,7 +82,7 @@ function RichSelectList(props) {
     selectedValues: selectedValuesProp,
     defaultSelectedValues: defaultSelectedValuesProp,
     size = "md"
-  } = _a, richSelectBoxProps = _I64JGYX7cjs.__objRest.call(void 0, _a, [
+  } = _a, richSelectBoxProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, [
     "autosave",
     "children",
     "data-testid",
@@ -97,15 +98,15 @@ function RichSelectList(props) {
     "defaultSelectedValues",
     "size"
   ]);
-  const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+  const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
   const overlayHandlerRef = _react.useRef.call(void 0, {});
   const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _ANT3IQ3Xcjs.convertSelection.call(void 0, selectedValuesProp),
+    () => _6SALMOFUcjs.convertSelection.call(void 0, selectedValuesProp),
     [selectedValuesProp]
   );
   const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _ANT3IQ3Xcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    () => _6SALMOFUcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
     [defaultSelectedValuesProp]
   );
   const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
@@ -143,8 +144,8 @@ function RichSelectList(props) {
     _reactariacomponents.Provider,
     {
       values: [
-        [_ANT3IQ3Xcjs.RichSelectBoxContext, { autoFocus: true }],
-        [_VA23P3ZIcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
+        [_6SALMOFUcjs.RichSelectBoxContext, { autoFocus: true }],
+        [_ULMCQ7EAcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
         // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
       ],
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -156,7 +157,7 @@ function RichSelectList(props) {
           children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _reactariacomponents.Label,
-              _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+              _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                 "data-testid": [dataTestId, "label"].filter(Boolean).join("-"),
                 className: _classnames2.default.call(void 0, 
                   SelectList_module_default.selectContainer,
@@ -170,11 +171,11 @@ function RichSelectList(props) {
                   (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
                   _interactions.setInteractionModality.call(void 0, "keyboard");
                 },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TIW4V757cjs.Typography_default, { size: 100, color: "gray700", children: label })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { size: 100, color: "gray700", children: label })
               })
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _TVGN7SBIcjs.Popover_default,
+              _NYOKOJQBcjs.Popover_default,
               {
                 ref: overlayHandlerRef,
                 disabled,
@@ -182,13 +183,13 @@ function RichSelectList(props) {
                 content: (
                   // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _SZCVEBN2cjs.Box_default,
+                    _WJRIAS4Wcjs.Box_default,
                     {
                       padding: autosave ? void 0 : 5,
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _ANT3IQ3Xcjs.RichSelectBox_default,
-                        _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                        _6SALMOFUcjs.RichSelectBox_default,
+                        _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                           autosave,
                           selectedValues: selectedKeys,
                           defaultSelectedValues: defaultSelectedKeys,
@@ -202,8 +203,8 @@ function RichSelectList(props) {
                   )
                 ),
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _M3L2KJQYcjs.TapArea_default,
-                  _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                  _DKBI6MRYcjs.TapArea_default,
+                  _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                     "data-testid": dataTestId,
                     disabled,
                     onClick,
@@ -232,7 +233,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _POAYQEOAcjs.ColorBaseDestructive700 : _POAYQEOAcjs.ColorBaseGray800,
+                              fill: errorText ? _CJJAA2FDcjs.ColorBaseDestructive700 : _CJJAA2FDcjs.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"
                             }
                           )
@@ -244,8 +245,8 @@ function RichSelectList(props) {
               }
             ),
             (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _TIW4V757cjs.Typography_default,
-              _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+              _X6HZ6DM2cjs.Typography_default,
+              _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                 size: 100,
                 color: errorText ? "destructive-primary" : "gray700"
               }, errorText ? errorMessageProps : descriptionProps), {
@@ -259,12 +260,12 @@ function RichSelectList(props) {
   );
 }
 var RichSelectList_default = Object.assign(RichSelectList, {
-  Section: _7W5RYLTScjs.RichSelectSection_default,
-  Chip: _LCEAHKFEcjs.RichSelectChip_default,
-  RadioButton: _WDR3YIMAcjs.RichSelectRadioButton_default
+  Section: _IYA2TMMRcjs.RichSelectSection_default,
+  Chip: _WEIWUACWcjs.RichSelectChip_default,
+  RadioButton: _YT3NEG6Zcjs.RichSelectRadioButton_default
 });
 
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=DM4UMQ5D.cjs.map
+//# sourceMappingURL=4ZST4KQI.cjs.map

package/dist/__chunks/4ZST4KQI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\nexport type RichSelectListProps = Omit<\n  RichSelectBoxProps,\n  \"accessibilityLabel\"\n> & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n  /**\n   * Size of the select box\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    size = \"md\",\n    ...richSelectBoxProps\n  } = props;\n\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n      >\n        <ReactAriaLabel\n          data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n          className={classNames(\n            styles.selectContainer,\n            styles.outerTextContainer,\n          )}\n          {...labelProps}\n          onClick={() => {\n            if (disabled) return;\n            fieldRef.current?.focus();\n            setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n          }}\n        >\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </ReactAriaLabel>\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          accessibilityLabel={label}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                accessibilityLabel={label}\n                {...richSelectBoxProps}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding={size === \"lg\" ? \"lg\" : \"md\"}\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(styles.selectBox, styles[size], {\n                  [styles.unselected]:\n                    !errorText && selectedKeys !== \"all\" && !selectedKeys.size,\n                  [styles.selected]:\n                    !errorText && (selectedKeys === \"all\" || selectedKeys.size),\n                  [styles.selectError]: errorText,\n                })}\n              >\n                {selectedTextValue}\n              </div>\n              <div className={styles.arrowIcon}>\n                <svg\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  width={iconSize[size]}\n                >\n                  <path\n                    fill={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\n                    d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <div className={styles.outerTextContainer}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </div>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_3ifov_1\",\"opacityOverlay\":\"_opacityOverlay_3ifov_7\",\"outerTextContainer\":\"_outerTextContainer_3ifov_11\",\"selectWrapper\":\"_selectWrapper_3ifov_16\",\"selectBox\":\"_selectBox_3ifov_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_3ifov_37\",\"unselected\":\"_unselected_3ifov_42\",\"selected\":\"_selected_3ifov_46\",\"arrowIcon\":\"_arrowIcon_3ifov_50\",\"sm\":\"_sm_3ifov_64\",\"md\":\"_md_3ifov_70\",\"lg\":\"_lg_3ifov_76\",\"selectError\":\"_selectError_3ifov_82\"}"]}

package/dist/__chunks/{A72TS5OX.cjs → 54PSDUCD.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// css-module:../Button.module.css#css-module
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// css-module:../Button.module.css#css-module
 var Button_module_default = { "button": "_button_ddq3j_1", "buttonGap": "_buttonGap_ddq3j_9", "fullWidth": "_fullWidth_ddq3j_50", "sm": "_sm_ddq3j_54", "md": "_md_ddq3j_61", "lg": "_lg_ddq3j_68", "smCambio": "_smCambio_ddq3j_75", "mdCambio": "_mdCambio_ddq3j_82", "lgCambio": "_lgCambio_ddq3j_89", "icon": "_icon_ddq3j_96", "smIcon": "_smIcon_ddq3j_100", "mdIcon": "_mdIcon_ddq3j_107", "lgIcon": "_lgIcon_ddq3j_114", "secondaryBorder": "_secondaryBorder_ddq3j_121", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_ddq3j_125", "loading": "_loading_ddq3j_139", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_ddq3j_1", "loadingCircle": "_loadingCircle_ddq3j_143" };
 
 // src/Button/constants/iconSize.ts
@@ -12,4 +14,4 @@ var iconSize_default = iconSize;
 
 
 exports.iconSize_default = iconSize_default;
-//# sourceMappingURL=A72TS5OX.cjs.map
+//# sourceMappingURL=54PSDUCD.cjs.map

package/dist/__chunks/54PSDUCD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"names":[],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,QAAO,kBAAiB,UAAS,qBAAoB,UAAS,qBAAoB,UAAS,qBAAoB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEntB,IAAM,WAAW;AAAA,EACf,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AACb;AAEA,IAAO,mBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_ddq3j_1\",\"buttonGap\":\"_buttonGap_ddq3j_9\",\"fullWidth\":\"_fullWidth_ddq3j_50\",\"sm\":\"_sm_ddq3j_54\",\"md\":\"_md_ddq3j_61\",\"lg\":\"_lg_ddq3j_68\",\"smCambio\":\"_smCambio_ddq3j_75\",\"mdCambio\":\"_mdCambio_ddq3j_82\",\"lgCambio\":\"_lgCambio_ddq3j_89\",\"icon\":\"_icon_ddq3j_96\",\"smIcon\":\"_smIcon_ddq3j_100\",\"mdIcon\":\"_mdIcon_ddq3j_107\",\"lgIcon\":\"_lgIcon_ddq3j_114\",\"secondaryBorder\":\"_secondaryBorder_ddq3j_121\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_ddq3j_125\",\"loading\":\"_loading_ddq3j_139\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_ddq3j_1\",\"loadingCircle\":\"_loadingCircle_ddq3j_143\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nexport default iconSize;\n"]}

package/dist/__chunks/{7AYSDTC6.cjs → 5JUNB754.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Button/constants/textVariant.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// src/Button/constants/textVariant.ts
 var textVariant = {
   sm: 100,
   md: 200,
@@ -10,4 +12,4 @@ var textVariant_default = textVariant;
 
 
 exports.textVariant_default = textVariant_default;
-//# sourceMappingURL=7AYSDTC6.cjs.map
+//# sourceMappingURL=5JUNB754.cjs.map

package/dist/__chunks/5JUNB754.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/constants/textVariant.ts"],"names":[],"mappings":";;;AAAA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAO,sBAAQ","sourcesContent":["const textVariant = {\n  sm: 100,\n  md: 200,\n  lg: 300,\n  xl: 500,\n} as const;\n\nexport default textVariant;\n"]}

package/dist/__chunks/{4QCCTDDW.cjs → 6B2PWEM7.cjs}

@@ -1,9 +1,10 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
-var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
 
+var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
 
-var _TIW4V757cjs = require('./TIW4V757.cjs');
+
+var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -24,17 +25,17 @@ var Badge = ({
   text,
   color = "primary700"
 }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  _SZCVEBN2cjs.Box_default,
+  _WJRIAS4Wcjs.Box_default,
   {
     display: "inlineBlock",
     paddingX: 2,
     paddingY: 1,
     rounding: "full",
     backgroundColor: color,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TIW4V757cjs.Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _SZCVEBN2cjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _WJRIAS4Wcjs.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, 
-        _TIW4V757cjs.Typography_default,
+        _X6HZ6DM2cjs.Typography_default,
         {
           color: textColorForBackgroundColor(color),
           size: 100,
@@ -50,4 +51,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=4QCCTDDW.cjs.map
+//# sourceMappingURL=6B2PWEM7.cjs.map

package/dist/__chunks/6B2PWEM7.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;;;AC0D1H,SACW,KADX;AA3CN,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,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,MAgBE;AAAA,EAAC;AAAA;AAAA,IACC,SAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAS;AAAA,IACT,iBAAiB;AAAA,IAEjB,8BAAC,sBAAW,OAAO,4BAA4B,KAAK,GAAG,MAAM,KAC3D,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,cAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,MACvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,4BAA4B,KAAK;AAAA,UACxC,MAAM;AAAA,UACN,QAAO;AAAA,UAEN;AAAA;AAAA,MACH;AAAA,OACF,GACF;AAAA;AACF;AAGF,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 BadgeColor = [\n  \"gray200\",\n  \"gray900\",\n  \"destructive700\",\n  \"orange700\",\n  \"yellow700\",\n  \"success700\",\n  \"primary700\",\n  \"purple700\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof BadgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray200\":\n    case \"yellow700\":\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   * @defaultValue \"primary700\"\n   */\n  color?: (typeof BadgeColor)[number];\n}): JSX.Element => (\n  <Box\n    display=\"inlineBlock\"\n    paddingX={2}\n    paddingY={1}\n    rounding=\"full\"\n    backgroundColor={color}\n  >\n    <Typography color={textColorForBackgroundColor(color)} size={100}>\n      <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n        {Icon && <Icon className={styles.icon} />}\n        <Typography\n          color={textColorForBackgroundColor(color)}\n          size={100}\n          weight=\"bold\"\n        >\n          {text}\n        </Typography>\n      </Box>\n    </Typography>\n  </Box>\n);\n\nexport default Badge;\n"]}

package/dist/__chunks/{SJG2X2VN.cjs → 6DRTKEXK.cjs}

@@ -1,15 +1,16 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
-var _LTM57QMYcjs = require('./LTM57QMY.cjs');
 
+var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
-var _TIW4V757cjs = require('./TIW4V757.cjs');
 
+var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
 
-var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 
-var _GVEA7SLQcjs = require('./GVEA7SLQ.cjs');
+
+var _NOELZTQXcjs = require('./NOELZTQX.cjs');
 
 // src/RadioButton/RadioButton.tsx
 var _react = require('react');
@@ -33,14 +34,14 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const isHydrated = _FZRIE7EXcjs.useIsHydrated.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 } = _GVEA7SLQcjs.useFocusVisible.call(void 0, );
+  const { isFocusVisible } = _NOELZTQXcjs.useFocusVisible.call(void 0, );
   const sharedStyles = _classnames2.default.call(void 0, RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
     [RadioButton_module_default.borderColor]: !error,
-    [_LTM57QMYcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
+    [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "label",
@@ -92,7 +93,7 @@ var RadioButton = ({
           }
         ),
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _TIW4V757cjs.Typography_default,
+          _X6HZ6DM2cjs.Typography_default,
           {
             size: size === "md" ? 200 : 100,
             color: error ? "destructive-primary" : "gray900",
@@ -108,4 +109,4 @@ var RadioButton_default = RadioButton;
 
 
 exports.RadioButton_default = RadioButton_default;
-//# sourceMappingURL=SJG2X2VN.cjs.map
+//# sourceMappingURL=6DRTKEXK.cjs.map

package/dist/__chunks/6DRTKEXK.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;;;AD4FrvB,SAYI,KAZJ;AAhFJ,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,QAAM,eAAe,WAAW,2BAAO,YAAY,2BAAO,IAAI,GAAG;AAAA,IAC/D,CAAC,2BAAO,gBAAgB,GAAG;AAAA,IAC3B,CAAC,2BAAO,WAAW,GAAG,CAAC;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,EACrC,CAAC;AAED,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,MAEC;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,cAAc;AAAA,cAClC,CAAC,2BAAO,eAAe,GAAG,SAAS;AAAA,cACnC,CAAC,2BAAO,eAAe,GAAG,SAAS;AAAA,YACrC,CAAC;AAAA;AAAA,QACH,IAEA,oBAAC,SAAI,WAAW,WAAW,cAAc,2BAAO,aAAa,GAAG;AAAA,QAElE;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\";\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  const sharedStyles = classnames(styles.background, styles[size], {\n    [styles.errorBorderColor]: error,\n    [styles.borderColor]: !error,\n    [focusStyles.accessibilityOutlineFocus]:\n      (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n  });\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      {checked ? (\n        <div\n          className={classnames(sharedStyles, {\n            [styles.mdCheckedBorder]: size === \"md\",\n            [styles.smCheckedBorder]: size === \"sm\",\n          })}\n        />\n      ) : (\n        <div className={classnames(sharedStyles, styles.neutralBorder)} />\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/{CVY5S6ZX.cjs → 6IS4356O.cjs}

@@ -1,12 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
-var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
 
+var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
 
-var _TIW4V757cjs = require('./TIW4V757.cjs');
 
+var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
 
-var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 
 // src/TextField/TextField.tsx
 
@@ -33,12 +34,12 @@ function TextField({
   type = "text",
   value = ""
 }) {
-  const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+  const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
   const reactId = _react.useId.call(void 0, );
   const inputId = id != null ? id : reactId;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _SZCVEBN2cjs.Box_default,
+    _WJRIAS4Wcjs.Box_default,
     {
       display: "flex",
       direction: "column",
@@ -50,7 +51,7 @@ 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, _SZCVEBN2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TIW4V757cjs.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, _WJRIAS4Wcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
@@ -72,8 +73,8 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _TIW4V757cjs.Typography_default,
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WJRIAS4Wcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _X6HZ6DM2cjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -88,4 +89,4 @@ function TextField({
 
 
 exports.TextField = TextField;
-//# sourceMappingURL=CVY5S6ZX.cjs.map
+//# sourceMappingURL=6IS4356O.cjs.map

package/dist/__chunks/6IS4356O.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,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AD8FxW,SAcQ,KAdR;AAhFW,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,GA4DiB;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;AAAA,cACT,yBAAO;AAAA,cACP,yBAAO,IAAI;AAAA,cACX,yBAAO,GAAG,YAAY;AAAA,cACtB;AAAA,gBACE,CAAC,yBAAO,UAAU,GAAG;AAAA,cACvB;AAAA,YACF;AAAA,YACA,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   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 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(\n          styles.textfield,\n          styles[size],\n          styles[`${size}Height`],\n          {\n            [styles.inputError]: errorText,\n          },\n        )}\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_bmndn_1\",\"label\":\"_label_bmndn_20\",\"sm\":\"_sm_bmndn_24\",\"smHeight\":\"_smHeight_bmndn_31\",\"md\":\"_md_bmndn_35\",\"mdHeight\":\"_mdHeight_bmndn_42\",\"lg\":\"_lg_bmndn_46\",\"lgHeight\":\"_lgHeight_bmndn_53\",\"inputError\":\"_inputError_bmndn_57\"}"]}