@cambly/syntax-core 8.1.0 → 9.0.0

package/dist/index.js

@@ -125,7 +125,6 @@ __export(src_exports, {
   Heading: () => Heading_default,
   IconButton: () => IconButton_default,
   LinkButton: () => LinkButton_default,
-  MiniActionCard: () => MiniActionCard_default,
   Modal: () => Modal,
   RadioButton: () => RadioButton_default,
   SelectList: () => SelectList,
@@ -241,7 +240,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
 var import_react = require("react");
@@ -694,9 +693,10 @@ function Card({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Box_default,
     {
-      rounding: "xl",
-      padding: 7,
-      smPadding: 9,
+      rounding: "lg",
+      padding: 5,
+      smPadding: 7,
+      lgPadding: 7,
       maxWidth: size && sizeWidth2[size],
       width: "100%",
       backgroundColor: "white",
@@ -1108,22 +1108,12 @@ var LinkButton = (0, import_react7.forwardRef)(
 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
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var MiniActionCard = ({
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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
 var import_react8 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function queryFocusableAll(el) {
   const selector = [
     "a[href]",
@@ -1184,7 +1174,7 @@ function FocusTrap({
       }
     };
   }, [elRef, previouslyFocusedElRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
 }
 
 // src/Modal/StopScroll.tsx
@@ -1202,13 +1192,13 @@ function StopScroll(props) {
 
 // src/Modal/Layer.tsx
 var import_react_dom = require("react-dom");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Layer({
   children,
   zIndex = 1
 }) {
   return typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Box_default,
       {
         "data-testid": "syntax-layer",
@@ -1227,9 +1217,9 @@ function Layer({
 var Modal_module_default = { "backdrop": "_backdrop_30t3h_1", "closeButton": "_closeButton_30t3h_12", "closeButtonWithImage": "_closeButtonWithImage_30t3h_32" };
 
 // src/Modal/Modal.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function XIcon({ color = "#000" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "path",
     {
       fill: "inherit",
@@ -1252,14 +1242,14 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Layer, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StopScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Layer, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StopScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: Modal_module_default.backdrop,
       role: "presentation",
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         Box_default,
         {
           "data-testid": dataTestId,
@@ -1272,7 +1262,7 @@ function Modal({
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box_default, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "button",
               {
                 "aria-label": accessibilityCloseLabel,
@@ -1281,14 +1271,14 @@ function Modal({
                   [Modal_module_default.closeButtonWithImage]: !!image
                 }),
                 onClick: onDismiss,
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(XIcon, { color: image ? "#fff" : "#000" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(XIcon, { color: image ? "#fff" : "#000" })
               }
             ) }),
-            image && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box_default, { maxHeight: 200, children: image }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Heading_default, { as: "h1", size: 500, children: header }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box_default, { marginBottom: 4, children }),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            image && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { maxHeight: 200, children: image }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading_default, { as: "h1", size: 500, children: header }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { marginBottom: 4, children }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 Box_default,
                 {
                   display: "flex",
@@ -1318,7 +1308,7 @@ var import_classnames11 = __toESM(require_classnames());
 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
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
@@ -1338,7 +1328,7 @@ var RadioButton = ({
     [RadioButton_module_default.borderColor]: !error,
     [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "label",
     {
       className: (0, import_classnames11.default)(
@@ -1351,7 +1341,7 @@ var RadioButton = ({
         }
       ),
       children: [
-        checked ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        checked ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             className: (0, import_classnames11.default)(sharedStyles, {
@@ -1359,8 +1349,8 @@ var RadioButton = ({
               [RadioButton_module_default.smCheckedBorder]: size === "sm"
             })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames11.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_classnames11.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             "data-testid": dataTestId,
@@ -1387,7 +1377,7 @@ var RadioButton = ({
             }
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -1413,17 +1403,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
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SelectOption = ({
   "data-testid": dataTestId,
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var iconSize3 = {
   sm: 20,
   md: 24,
@@ -1435,6 +1425,7 @@ function SelectList({
   disabled = false,
   errorText,
   helperText,
+  id,
   label,
   onChange,
   onClick,
@@ -1442,22 +1433,23 @@ function SelectList({
   selectedValue = "",
   size = "md"
 }) {
-  const id = (0, import_react11.useId)();
+  const reactId = (0, import_react11.useId)();
+  const selectId = id != null ? id : reactId;
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: (0, import_classnames12.default)(SelectList_module_default.selectContainer, {
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: selectId, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
             "select",
             {
-              id,
+              id: selectId,
               "data-testid": dataTestId,
               disabled,
               className: (0, import_classnames12.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
@@ -1475,19 +1467,19 @@ function SelectList({
               onFocus: () => setIsFocused(true),
               onBlur: () => setIsFocused(false),
               children: [
-                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "svg",
             {
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
               width: iconSize3[size],
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "path",
                 {
                   fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
@@ -1497,7 +1489,7 @@ function SelectList({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Typography_default,
           {
             size: 100,
@@ -1519,7 +1511,7 @@ var import_classnames13 = __toESM(require_classnames());
 var TapArea_module_default = { "tapArea": "_tapArea_1rlyl_1", "fullWidth": "_fullWidth_1rlyl_5", "disabled": "_disabled_1rlyl_9", "enabled": "_enabled_1rlyl_16" };
 
 // src/TapArea/TapArea.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var TapArea = (0, import_react12.forwardRef)(
   ({
     children,
@@ -1540,7 +1532,7 @@ var TapArea = (0, import_react12.forwardRef)(
         onClick(event);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         "aria-disabled": disabled,
@@ -1573,7 +1565,7 @@ var import_classnames14 = __toESM(require_classnames());
 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
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
@@ -1590,7 +1582,7 @@ function TextField({
 }) {
   const reactId = (0, import_react13.useId)();
   const inputId = id != null ? id : reactId;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -1603,8 +1595,8 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             autoComplete,
@@ -1620,7 +1612,7 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Typography_default,
           {
             size: 100,
@@ -1646,7 +1638,6 @@ function TextField({
   Heading,
   IconButton,
   LinkButton,
-  MiniActionCard,
   Modal,
   RadioButton,
   SelectList,