@cambly/syntax-core 7.6.1 → 7.7.1

package/dist/index.mjs

@@ -626,11 +626,11 @@ var ButtonGroup = ({
   size = "md",
   children
 }) => {
-  const classnames3 = (0, import_classnames5.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
+  const classnames4 = (0, import_classnames5.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
     [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
     [ButtonGroup_module_default.vertical]: orientation === "vertical"
   });
-  return /* @__PURE__ */ jsx6("div", { className: classnames3, children });
+  return /* @__PURE__ */ jsx6("div", { className: classnames4, children });
 };
 var ButtonGroup_default = ButtonGroup;
 
@@ -845,18 +845,73 @@ var Checkbox = ({
 };
 var Checkbox_default = Checkbox;
 
+// src/Chip/Chip.tsx
+var import_classnames7 = __toESM(require_classnames());
+import { forwardRef as forwardRef3 } from "react";
+
+// css-module:./Chip.module.css#css-module
+var Chip_module_default = { "chip": "_chip_ev9ht_1", "selectedChip": "_selectedChip_ev9ht_11", "icon": "_icon_ev9ht_16", "selectedIcon": "_selectedIcon_ev9ht_24", "sm": "_sm_ev9ht_28", "lg": "_lg_ev9ht_34" };
+
+// src/Chip/Chip.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var Chip = forwardRef3(
+  ({
+    selected = false,
+    "data-testid": dataTestId,
+    size = "sm",
+    text,
+    onChange,
+    icon: Icon
+  }, ref) => {
+    const chipStyles = (0, import_classnames7.default)(Chip_module_default.chip, Chip_module_default[size], {
+      [Chip_module_default.selectedChip]: selected
+    });
+    const iconStyles = (0, import_classnames7.default)(Chip_module_default.icon, {
+      [Chip_module_default.selectedIcon]: selected
+    });
+    const typographySize2 = {
+      ["sm"]: 200,
+      ["lg"]: 300
+    };
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        className: chipStyles,
+        "data-testid": dataTestId,
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        onClick: onChange,
+        children: [
+          Icon && /* @__PURE__ */ jsx9(Icon, { className: iconStyles }),
+          /* @__PURE__ */ jsx9(Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ jsx9(
+            Typography_default,
+            {
+              size: typographySize2[size],
+              color: selected ? "white" : "gray900",
+              children: text
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Chip_default = Chip;
+
 // css-module:./Divider.module.css#css-module
 var Divider_module_default = { "divider": "_divider_1ddgq_1" };
 
 // src/Divider/Divider.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Divider() {
-  return /* @__PURE__ */ jsx9("hr", { className: Divider_module_default.divider });
+  return /* @__PURE__ */ jsx10("hr", { className: Divider_module_default.divider });
 }
 Divider.displayName = "Divider";
 
 // src/Heading/Heading.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Heading = ({
   align = "start",
   as = "h1",
@@ -866,7 +921,7 @@ var Heading = ({
   size = 500
 }) => {
   const weight = [700, 800].includes(size) ? "heavy" : "bold";
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Typography_default,
     {
       align,
@@ -882,20 +937,20 @@ var Heading = ({
 var Heading_default = Heading;
 
 // src/IconButton/IconButton.tsx
-var import_classnames7 = __toESM(require_classnames());
-import { forwardRef as forwardRef3 } from "react";
+var import_classnames8 = __toESM(require_classnames());
+import { forwardRef as forwardRef4 } from "react";
 
 // css-module:./IconButton.module.css#css-module
 var IconButton_module_default = { "iconButton": "_iconButton_4e8qe_1", "sm": "_sm_4e8qe_46", "md": "_md_4e8qe_51", "lg": "_lg_4e8qe_56", "smIcon": "_smIcon_4e8qe_61", "mdIcon": "_mdIcon_4e8qe_68", "lgIcon": "_lgIcon_4e8qe_75", "secondaryBorder": "_secondaryBorder_4e8qe_82", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_4e8qe_86" };
 
 // src/IconButton/IconButton.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var iconSize2 = {
   ["sm"]: IconButton_module_default.smIcon,
   ["md"]: IconButton_module_default.mdIcon,
   ["lg"]: IconButton_module_default.lgIcon
 };
-var IconButton = forwardRef3(
+var IconButton = forwardRef4(
   ({
     accessibilityLabel,
     color = "primary",
@@ -906,7 +961,7 @@ var IconButton = forwardRef3(
     tooltip,
     onClick
   }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "button",
       {
         "aria-label": accessibilityLabel,
@@ -915,7 +970,7 @@ var IconButton = forwardRef3(
         title: tooltip,
         disabled,
         onClick,
-        className: (0, import_classnames7.default)(
+        className: (0, import_classnames8.default)(
           IconButton_module_default.iconButton,
           foregroundColor(color),
           backgroundColor(color),
@@ -926,7 +981,7 @@ var IconButton = forwardRef3(
           }
         ),
         ref,
-        children: /* @__PURE__ */ jsx11(Icon, { className: iconSize2[size] })
+        children: /* @__PURE__ */ jsx12(Icon, { className: iconSize2[size] })
       }
     );
   }
@@ -935,8 +990,8 @@ IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/LinkButton/LinkButton.tsx
-var import_classnames8 = __toESM(require_classnames());
-import { forwardRef as forwardRef4 } from "react";
+var import_classnames9 = __toESM(require_classnames());
+import { forwardRef as forwardRef5 } from "react";
 
 // css-module:../Button/Button.module.css#css-module
 var Button_module_default3 = { "button": "_button_1iunh_1", "buttonGap": "_buttonGap_1iunh_9", "fullWidth": "_fullWidth_1iunh_50", "sm": "_sm_1iunh_54", "md": "_md_1iunh_61", "lg": "_lg_1iunh_68", "icon": "_icon_1iunh_75", "smIcon": "_smIcon_1iunh_79", "mdIcon": "_mdIcon_1iunh_86", "lgIcon": "_lgIcon_1iunh_93", "secondaryBorder": "_secondaryBorder_1iunh_100", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1iunh_104", "loading": "_loading_1iunh_118", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1iunh_1", "loadingCircle": "_loadingCircle_1iunh_122" };
@@ -945,8 +1000,8 @@ var Button_module_default3 = { "button": "_button_1iunh_1", "buttonGap": "_butto
 var LinkButton_module_default = { "linkButton": "_linkButton_1b3ot_1", "fitContent": "_fitContent_1b3ot_10" };
 
 // src/LinkButton/LinkButton.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
-var LinkButton = forwardRef4(
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var LinkButton = forwardRef5(
   ({
     text,
     href,
@@ -960,7 +1015,7 @@ var LinkButton = forwardRef4(
     endIcon: EndIcon,
     onClick
   }, ref) => {
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "a",
       {
         href,
@@ -968,7 +1023,7 @@ var LinkButton = forwardRef4(
         target,
         ref,
         rel,
-        className: (0, import_classnames8.default)(
+        className: (0, import_classnames9.default)(
           LinkButton_module_default.linkButton,
           Button_module_default3.button,
           foregroundColor(color),
@@ -984,21 +1039,21 @@ var LinkButton = forwardRef4(
         ),
         onClick,
         children: [
-          StartIcon && /* @__PURE__ */ jsx12(
+          StartIcon && /* @__PURE__ */ jsx13(
             StartIcon,
             {
-              className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size])
+              className: (0, import_classnames9.default)(Button_module_default3.icon, iconSize_default[size])
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             Typography_default,
             {
               color: foregroundTypographyColor(color),
               size: textVariant_default[size],
-              children: /* @__PURE__ */ jsx12("span", { style: { fontWeight: 500 }, children: text })
+              children: /* @__PURE__ */ jsx13("span", { style: { fontWeight: 500 }, children: text })
             }
           ),
-          EndIcon && /* @__PURE__ */ jsx12(EndIcon, { className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size]) })
+          EndIcon && /* @__PURE__ */ jsx13(EndIcon, { className: (0, import_classnames9.default)(Button_module_default3.icon, iconSize_default[size]) })
         ]
       }
     );
@@ -1011,18 +1066,18 @@ var LinkButton_default = LinkButton;
 var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
 
 // src/MiniActionCard/MiniActionCard.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var MiniActionCard = ({
   children
-}) => /* @__PURE__ */ jsx13("div", { className: MiniActionCard_module_default.miniActionCard, children });
+}) => /* @__PURE__ */ jsx14("div", { className: MiniActionCard_module_default.miniActionCard, children });
 var MiniActionCard_default = MiniActionCard;
 
 // src/Modal/Modal.tsx
-var import_classnames9 = __toESM(require_classnames());
+var import_classnames10 = __toESM(require_classnames());
 
 // src/Modal/FocusTrap.tsx
 import { useEffect as useEffect2, useRef } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function queryFocusableAll(el) {
   const selector = [
     "a[href]",
@@ -1083,7 +1138,7 @@ function FocusTrap({
       }
     };
   }, [elRef, previouslyFocusedElRef]);
-  return /* @__PURE__ */ jsx14("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
+  return /* @__PURE__ */ jsx15("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
 }
 
 // src/Modal/StopScroll.tsx
@@ -1101,13 +1156,13 @@ function StopScroll(props) {
 
 // src/Modal/Layer.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Layer({
   children,
   zIndex = 1
 }) {
   return createPortal(
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       Box_default,
       {
         "data-testid": "syntax-layer",
@@ -1126,9 +1181,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 jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
 function XIcon({ color = "#000" }) {
-  return /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ jsx17(
     "path",
     {
       fill: "inherit",
@@ -1151,14 +1206,14 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ jsx16(Layer, { zIndex, children: /* @__PURE__ */ jsx16(StopScroll, { children: /* @__PURE__ */ jsx16(FocusTrap, { children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(Layer, { zIndex, children: /* @__PURE__ */ jsx17(StopScroll, { children: /* @__PURE__ */ jsx17(FocusTrap, { children: /* @__PURE__ */ jsx17(
     "div",
     {
       className: Modal_module_default.backdrop,
       role: "presentation",
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
-      children: /* @__PURE__ */ jsxs5(
+      children: /* @__PURE__ */ jsxs6(
         Box_default,
         {
           "data-testid": dataTestId,
@@ -1171,23 +1226,23 @@ function Modal({
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ jsx16(Box_default, { position: "relative", children: /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(Box_default, { position: "relative", children: /* @__PURE__ */ jsx17(
               "button",
               {
                 "aria-label": accessibilityCloseLabel,
                 type: "button",
-                className: (0, import_classnames9.default)(Modal_module_default.closeButton, {
+                className: (0, import_classnames10.default)(Modal_module_default.closeButton, {
                   [Modal_module_default.closeButtonWithImage]: !!image
                 }),
                 onClick: onDismiss,
-                children: /* @__PURE__ */ jsx16(XIcon, { color: image ? "#fff" : "#000" })
+                children: /* @__PURE__ */ jsx17(XIcon, { color: image ? "#fff" : "#000" })
               }
             ) }),
-            image && /* @__PURE__ */ jsx16(Box_default, { maxHeight: 200, children: image }),
-            /* @__PURE__ */ jsxs5(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
-              /* @__PURE__ */ jsx16(Heading_default, { as: "h1", size: 500, children: header }),
-              /* @__PURE__ */ jsx16(Box_default, { marginBottom: 4, children }),
-              footer && /* @__PURE__ */ jsx16(
+            image && /* @__PURE__ */ jsx17(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(
                 Box_default,
                 {
                   display: "flex",
@@ -1210,14 +1265,14 @@ function Modal({
 Modal.displayName = "Modal";
 
 // src/RadioButton/RadioButton.tsx
-var import_classnames10 = __toESM(require_classnames());
+var import_classnames11 = __toESM(require_classnames());
 import { useState as useState3 } from "react";
 
 // css-module:./RadioButton.module.css#css-module
 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 jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
@@ -1232,15 +1287,15 @@ var RadioButton = ({
 }) => {
   const [isFocused, setIsFocused] = useState3(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const sharedStyles = (0, import_classnames10.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
+  const sharedStyles = (0, import_classnames11.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
     [RadioButton_module_default.borderColor]: !error,
     [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "label",
     {
-      className: (0, import_classnames10.default)(
+      className: (0, import_classnames11.default)(
         RadioButton_module_default.radioBaseContainer,
         RadioButton_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
         {
@@ -1250,23 +1305,23 @@ var RadioButton = ({
         }
       ),
       children: [
-        checked ? /* @__PURE__ */ jsx17(
+        checked ? /* @__PURE__ */ jsx18(
           "div",
           {
-            className: (0, import_classnames10.default)(sharedStyles, {
+            className: (0, import_classnames11.default)(sharedStyles, {
               [RadioButton_module_default.mdCheckedBorder]: size === "md",
               [RadioButton_module_default.smCheckedBorder]: size === "sm"
             })
           }
-        ) : /* @__PURE__ */ jsx17("div", { className: (0, import_classnames10.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ jsx17(
+        ) : /* @__PURE__ */ jsx18("div", { className: (0, import_classnames11.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
+        /* @__PURE__ */ jsx18(
           "input",
           {
             "data-testid": dataTestId,
             type: "radio",
             id,
             name,
-            className: (0, import_classnames10.default)(
+            className: (0, import_classnames11.default)(
               RadioButton_module_default.radioStyleOverride,
               RadioButton_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
               {
@@ -1286,7 +1341,7 @@ var RadioButton = ({
             }
           }
         ),
-        label && /* @__PURE__ */ jsx17(
+        label && /* @__PURE__ */ jsx18(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -1301,7 +1356,7 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_classnames11 = __toESM(require_classnames());
+var import_classnames12 = __toESM(require_classnames());
 import {
   useId,
   useState as useState4
@@ -1315,17 +1370,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 jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SelectOption = ({
   "data-testid": dataTestId,
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ jsx18("option", { "data-testid": dataTestId, value, disabled, children: label });
+}) => /* @__PURE__ */ jsx19("option", { "data-testid": dataTestId, value, disabled, children: label });
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var iconSize3 = {
   sm: 20,
   md: 24,
@@ -1347,22 +1402,22 @@ function SelectList({
   const id = useId();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const [isFocused, setIsFocused] = useState4(false);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: (0, import_classnames11.default)(SelectList_module_default.selectContainer, {
+      className: (0, import_classnames12.default)(SelectList_module_default.selectContainer, {
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ jsx19("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx19(Typography_default, { size: 100, color: "gray700", children: label }) }),
-        /* @__PURE__ */ jsxs7("div", { className: SelectList_module_default.selectWrapper, children: [
-          /* @__PURE__ */ jsxs7(
+        label && /* @__PURE__ */ jsx20("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx20(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        /* @__PURE__ */ jsxs8("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ jsxs8(
             "select",
             {
               id,
               "data-testid": dataTestId,
               disabled,
-              className: (0, import_classnames11.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
+              className: (0, import_classnames12.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
                 [SelectList_module_default.unselected]: !selectedValue && !errorText,
                 [SelectList_module_default.selected]: selectedValue && !errorText,
                 [SelectList_module_default.selectError]: errorText,
@@ -1377,19 +1432,19 @@ function SelectList({
               onFocus: () => setIsFocused(true),
               onBlur: () => setIsFocused(false),
               children: [
-                placeholderText && /* @__PURE__ */ jsx19("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                placeholderText && /* @__PURE__ */ jsx20("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children
               ]
             }
           ),
-          /* @__PURE__ */ jsx19("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx20(
             "svg",
             {
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
               width: iconSize3[size],
-              children: /* @__PURE__ */ jsx19(
+              children: /* @__PURE__ */ jsx20(
                 "path",
                 {
                   fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
@@ -1399,7 +1454,7 @@ function SelectList({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ jsx19("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx19(
+        (helperText || errorText) && /* @__PURE__ */ jsx20("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx20(
           Typography_default,
           {
             size: 100,
@@ -1414,7 +1469,7 @@ function SelectList({
 SelectList.Option = SelectOption_default;
 
 // src/TextField/TextField.tsx
-var import_classnames12 = __toESM(require_classnames());
+var import_classnames13 = __toESM(require_classnames());
 import {
   useId as useId2
 } from "react";
@@ -1423,7 +1478,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 jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
@@ -1440,7 +1495,7 @@ function TextField({
 }) {
   const reactId = useId2();
   const inputId = id != null ? id : reactId;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     Box_default,
     {
       display: "flex",
@@ -1453,12 +1508,12 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ jsx20("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx20(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx20(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-        /* @__PURE__ */ jsx20(
+        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,
-            className: (0, import_classnames12.default)(TextField_module_default.textfield, TextField_module_default[size], {
+            className: (0, import_classnames13.default)(TextField_module_default.textfield, TextField_module_default[size], {
               [TextField_module_default.inputError]: errorText
             }),
             "data-testid": dataTestId,
@@ -1470,7 +1525,7 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ jsx20(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx20(
+        (helperText || errorText) && /* @__PURE__ */ jsx21(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx21(
           Typography_default,
           {
             size: 100,
@@ -1490,6 +1545,7 @@ export {
   ButtonGroup_default as ButtonGroup,
   Card,
   Checkbox_default as Checkbox,
+  Chip_default as Chip,
   Divider,
   Heading_default as Heading,
   IconButton_default as IconButton,