@cambly/syntax-core 8.1.0 → 9.0.0

package/dist/index.mjs

@@ -210,7 +210,7 @@ var margin_module_default = { "marginBottom-12": "_marginBottom-12_1whn1_2", "ma
 var padding_module_default = { "paddingX0": "_paddingX0_1aqye_2", "paddingX1": "_paddingX1_1aqye_7", "paddingX2": "_paddingX2_1aqye_12", "paddingX3": "_paddingX3_1aqye_17", "paddingX4": "_paddingX4_1aqye_22", "paddingX5": "_paddingX5_1aqye_27", "paddingX6": "_paddingX6_1aqye_32", "paddingX7": "_paddingX7_1aqye_37", "paddingX8": "_paddingX8_1aqye_42", "paddingX9": "_paddingX9_1aqye_47", "paddingX10": "_paddingX10_1aqye_52", "paddingX11": "_paddingX11_1aqye_57", "paddingX12": "_paddingX12_1aqye_62", "paddingY0": "_paddingY0_1aqye_67", "paddingY1": "_paddingY1_1aqye_72", "paddingY2": "_paddingY2_1aqye_77", "paddingY3": "_paddingY3_1aqye_82", "paddingY4": "_paddingY4_1aqye_87", "paddingY5": "_paddingY5_1aqye_92", "paddingY6": "_paddingY6_1aqye_97", "paddingY7": "_paddingY7_1aqye_102", "paddingY8": "_paddingY8_1aqye_107", "paddingY9": "_paddingY9_1aqye_112", "paddingY10": "_paddingY10_1aqye_117", "paddingY11": "_paddingY11_1aqye_122", "paddingY12": "_paddingY12_1aqye_127", "paddingX0Small": "_paddingX0Small_1aqye_134", "paddingX1Small": "_paddingX1Small_1aqye_139", "paddingX2Small": "_paddingX2Small_1aqye_144", "paddingX3Small": "_paddingX3Small_1aqye_149", "paddingX4Small": "_paddingX4Small_1aqye_154", "paddingX5Small": "_paddingX5Small_1aqye_159", "paddingX6Small": "_paddingX6Small_1aqye_164", "paddingX7Small": "_paddingX7Small_1aqye_169", "paddingX8Small": "_paddingX8Small_1aqye_174", "paddingX9Small": "_paddingX9Small_1aqye_179", "paddingX10Small": "_paddingX10Small_1aqye_184", "paddingX11Small": "_paddingX11Small_1aqye_189", "paddingX12Small": "_paddingX12Small_1aqye_194", "paddingY0Small": "_paddingY0Small_1aqye_199", "paddingY1Small": "_paddingY1Small_1aqye_204", "paddingY2Small": "_paddingY2Small_1aqye_209", "paddingY3Small": "_paddingY3Small_1aqye_214", "paddingY4Small": "_paddingY4Small_1aqye_219", "paddingY5Small": "_paddingY5Small_1aqye_224", "paddingY6Small": "_paddingY6Small_1aqye_229", "paddingY7Small": "_paddingY7Small_1aqye_234", "paddingY8Small": "_paddingY8Small_1aqye_239", "paddingY9Small": "_paddingY9Small_1aqye_244", "paddingY10Small": "_paddingY10Small_1aqye_249", "paddingY11Small": "_paddingY11Small_1aqye_254", "paddingY12Small": "_paddingY12Small_1aqye_259", "paddingX0Large": "_paddingX0Large_1aqye_267", "paddingX1Large": "_paddingX1Large_1aqye_272", "paddingX2Large": "_paddingX2Large_1aqye_277", "paddingX3Large": "_paddingX3Large_1aqye_282", "paddingX4Large": "_paddingX4Large_1aqye_287", "paddingX5Large": "_paddingX5Large_1aqye_292", "paddingX6Large": "_paddingX6Large_1aqye_297", "paddingX7Large": "_paddingX7Large_1aqye_302", "paddingX8Large": "_paddingX8Large_1aqye_307", "paddingX9Large": "_paddingX9Large_1aqye_312", "paddingX10Large": "_paddingX10Large_1aqye_317", "paddingX11Large": "_paddingX11Large_1aqye_322", "paddingX12Large": "_paddingX12Large_1aqye_327", "paddingY0Large": "_paddingY0Large_1aqye_332", "paddingY1Large": "_paddingY1Large_1aqye_337", "paddingY2Large": "_paddingY2Large_1aqye_342", "paddingY3Large": "_paddingY3Large_1aqye_347", "paddingY4Large": "_paddingY4Large_1aqye_352", "paddingY5Large": "_paddingY5Large_1aqye_357", "paddingY6Large": "_paddingY6Large_1aqye_362", "paddingY7Large": "_paddingY7Large_1aqye_367", "paddingY8Large": "_paddingY8Large_1aqye_372", "paddingY9Large": "_paddingY9Large_1aqye_377", "paddingY10Large": "_paddingY10Large_1aqye_382", "paddingY11Large": "_paddingY11Large_1aqye_387", "paddingY12Large": "_paddingY12Large_1aqye_392" };
 
 // css-module:../rounding.module.css#css-module
-var rounding_module_default = { "roundingsm": "_roundingsm_f0hc8_2", "roundingmd": "_roundingmd_f0hc8_6", "roundinglg": "_roundinglg_f0hc8_10", "roundingxl": "_roundingxl_f0hc8_14", "roundingfull": "_roundingfull_f0hc8_18" };
+var rounding_module_default = { "roundingsm": "_roundingsm_1bo6p_2", "roundingmd": "_roundingmd_1bo6p_6", "roundinglg": "_roundinglg_1bo6p_10", "roundingxl": "_roundingxl_1bo6p_14", "roundingfull": "_roundingfull_1bo6p_18" };
 
 // src/Box/Box.tsx
 import { forwardRef } from "react";
@@ -663,9 +663,10 @@ function Card({
   return /* @__PURE__ */ jsx7(
     Box_default,
     {
-      rounding: "xl",
-      padding: 7,
-      smPadding: 9,
+      rounding: "lg",
+      padding: 5,
+      smPadding: 7,
+      lgPadding: 7,
       maxWidth: size && sizeWidth2[size],
       width: "100%",
       backgroundColor: "white",
@@ -1077,22 +1078,12 @@ var LinkButton = forwardRef5(
 LinkButton.displayName = "LinkButton";
 var LinkButton_default = LinkButton;
 
-// css-module:./MiniActionCard.module.css#css-module
-var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
-
-// src/MiniActionCard/MiniActionCard.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var MiniActionCard = ({
-  children
-}) => /* @__PURE__ */ jsx14("div", { className: MiniActionCard_module_default.miniActionCard, children });
-var MiniActionCard_default = MiniActionCard;
-
 // src/Modal/Modal.tsx
 var import_classnames10 = __toESM(require_classnames());
 
 // src/Modal/FocusTrap.tsx
 import { useEffect as useEffect2, useRef } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function queryFocusableAll(el) {
   const selector = [
     "a[href]",
@@ -1153,7 +1144,7 @@ function FocusTrap({
       }
     };
   }, [elRef, previouslyFocusedElRef]);
-  return /* @__PURE__ */ jsx15("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
+  return /* @__PURE__ */ jsx14("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
 }
 
 // src/Modal/StopScroll.tsx
@@ -1171,13 +1162,13 @@ function StopScroll(props) {
 
 // src/Modal/Layer.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Layer({
   children,
   zIndex = 1
 }) {
   return typeof document !== "undefined" ? createPortal(
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       Box_default,
       {
         "data-testid": "syntax-layer",
@@ -1196,9 +1187,9 @@ function Layer({
 var Modal_module_default = { "backdrop": "_backdrop_30t3h_1", "closeButton": "_closeButton_30t3h_12", "closeButtonWithImage": "_closeButtonWithImage_30t3h_32" };
 
 // src/Modal/Modal.tsx
-import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 function XIcon({ color = "#000" }) {
-  return /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ jsx16(
     "path",
     {
       fill: "inherit",
@@ -1221,7 +1212,7 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ jsx17(Layer, { zIndex, children: /* @__PURE__ */ jsx17(StopScroll, { children: /* @__PURE__ */ jsx17(FocusTrap, { children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(Layer, { zIndex, children: /* @__PURE__ */ jsx16(StopScroll, { children: /* @__PURE__ */ jsx16(FocusTrap, { children: /* @__PURE__ */ jsx16(
     "div",
     {
       className: Modal_module_default.backdrop,
@@ -1241,7 +1232,7 @@ function Modal({
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ jsx17(Box_default, { position: "relative", children: /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx16(Box_default, { position: "relative", children: /* @__PURE__ */ jsx16(
               "button",
               {
                 "aria-label": accessibilityCloseLabel,
@@ -1250,14 +1241,14 @@ function Modal({
                   [Modal_module_default.closeButtonWithImage]: !!image
                 }),
                 onClick: onDismiss,
-                children: /* @__PURE__ */ jsx17(XIcon, { color: image ? "#fff" : "#000" })
+                children: /* @__PURE__ */ jsx16(XIcon, { color: image ? "#fff" : "#000" })
               }
             ) }),
-            image && /* @__PURE__ */ jsx17(Box_default, { maxHeight: 200, children: image }),
+            image && /* @__PURE__ */ jsx16(Box_default, { maxHeight: 200, children: image }),
             /* @__PURE__ */ jsxs6(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
-              /* @__PURE__ */ jsx17(Heading_default, { as: "h1", size: 500, children: header }),
-              /* @__PURE__ */ jsx17(Box_default, { marginBottom: 4, children }),
-              footer && /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx16(Heading_default, { as: "h1", size: 500, children: header }),
+              /* @__PURE__ */ jsx16(Box_default, { marginBottom: 4, children }),
+              footer && /* @__PURE__ */ jsx16(
                 Box_default,
                 {
                   display: "flex",
@@ -1287,7 +1278,7 @@ import { useState as useState3 } from "react";
 var RadioButton_module_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" };
 
 // src/RadioButton/RadioButton.tsx
-import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
@@ -1320,7 +1311,7 @@ var RadioButton = ({
         }
       ),
       children: [
-        checked ? /* @__PURE__ */ jsx18(
+        checked ? /* @__PURE__ */ jsx17(
           "div",
           {
             className: (0, import_classnames11.default)(sharedStyles, {
@@ -1328,8 +1319,8 @@ var RadioButton = ({
               [RadioButton_module_default.smCheckedBorder]: size === "sm"
             })
           }
-        ) : /* @__PURE__ */ jsx18("div", { className: (0, import_classnames11.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ jsx18(
+        ) : /* @__PURE__ */ jsx17("div", { className: (0, import_classnames11.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
+        /* @__PURE__ */ jsx17(
           "input",
           {
             "data-testid": dataTestId,
@@ -1356,7 +1347,7 @@ var RadioButton = ({
             }
           }
         ),
-        label && /* @__PURE__ */ jsx18(
+        label && /* @__PURE__ */ jsx17(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -1385,17 +1376,17 @@ var ColorBaseGray800 = "#353535";
 var SelectList_module_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" };
 
 // src/SelectList/SelectOption.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var SelectOption = ({
   "data-testid": dataTestId,
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ jsx19("option", { "data-testid": dataTestId, value, disabled, children: label });
+}) => /* @__PURE__ */ jsx18("option", { "data-testid": dataTestId, value, disabled, children: label });
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var iconSize3 = {
   sm: 20,
   md: 24,
@@ -1407,6 +1398,7 @@ function SelectList({
   disabled = false,
   errorText,
   helperText,
+  id,
   label,
   onChange,
   onClick,
@@ -1414,7 +1406,8 @@ function SelectList({
   selectedValue = "",
   size = "md"
 }) {
-  const id = useId();
+  const reactId = useId();
+  const selectId = id != null ? id : reactId;
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const [isFocused, setIsFocused] = useState4(false);
   return /* @__PURE__ */ jsxs8(
@@ -1424,12 +1417,12 @@ function SelectList({
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ jsx20("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx20(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        label && /* @__PURE__ */ jsx19("label", { htmlFor: selectId, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx19(Typography_default, { size: 100, color: "gray700", children: label }) }),
         /* @__PURE__ */ jsxs8("div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ jsxs8(
             "select",
             {
-              id,
+              id: selectId,
               "data-testid": dataTestId,
               disabled,
               className: (0, import_classnames12.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
@@ -1447,19 +1440,19 @@ function SelectList({
               onFocus: () => setIsFocused(true),
               onBlur: () => setIsFocused(false),
               children: [
-                placeholderText && /* @__PURE__ */ jsx20("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                placeholderText && /* @__PURE__ */ jsx19("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children
               ]
             }
           ),
-          /* @__PURE__ */ jsx20("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx19("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx19(
             "svg",
             {
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
               width: iconSize3[size],
-              children: /* @__PURE__ */ jsx20(
+              children: /* @__PURE__ */ jsx19(
                 "path",
                 {
                   fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
@@ -1469,7 +1462,7 @@ function SelectList({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ jsx20("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx20(
+        (helperText || errorText) && /* @__PURE__ */ jsx19("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx19(
           Typography_default,
           {
             size: 100,
@@ -1491,7 +1484,7 @@ import { forwardRef as forwardRef6 } from "react";
 var TapArea_module_default = { "tapArea": "_tapArea_1rlyl_1", "fullWidth": "_fullWidth_1rlyl_5", "disabled": "_disabled_1rlyl_9", "enabled": "_enabled_1rlyl_16" };
 
 // src/TapArea/TapArea.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var TapArea = forwardRef6(
   ({
     children,
@@ -1512,7 +1505,7 @@ var TapArea = forwardRef6(
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx20(
       "div",
       {
         "aria-disabled": disabled,
@@ -1547,7 +1540,7 @@ import {
 var TextField_module_default = { "textfield": "_textfield_cltsv_1", "label": "_label_cltsv_21", "sm": "_sm_cltsv_25", "md": "_md_cltsv_30", "lg": "_lg_cltsv_35", "inputError": "_inputError_cltsv_40" };
 
 // src/TextField/TextField.tsx
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
@@ -1577,8 +1570,8 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ jsx22("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx22(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx22(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-        /* @__PURE__ */ jsx22(
+        label && /* @__PURE__ */ jsx21("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx21(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx21(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        /* @__PURE__ */ jsx21(
           "input",
           {
             autoComplete,
@@ -1594,7 +1587,7 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ jsx22(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx22(
+        (helperText || errorText) && /* @__PURE__ */ jsx21(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx21(
           Typography_default,
           {
             size: 100,
@@ -1619,7 +1612,6 @@ export {
   Heading_default as Heading,
   IconButton_default as IconButton,
   LinkButton_default as LinkButton,
-  MiniActionCard_default as MiniActionCard,
   Modal,
   RadioButton_default as RadioButton,
   SelectList,