@cambly/syntax-core 7.6.0 → 7.7.0

package/dist/index.js

@@ -120,6 +120,7 @@ __export(src_exports, {
   ButtonGroup: () => ButtonGroup_default,
   Card: () => Card,
   Checkbox: () => Checkbox_default,
+  Chip: () => Chip_default,
   Divider: () => Divider,
   Heading: () => Heading_default,
   IconButton: () => IconButton_default,
@@ -655,11 +656,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__ */ (0, import_jsx_runtime6.jsx)("div", { className: classnames3, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classnames4, children });
 };
 var ButtonGroup_default = ButtonGroup;
 
@@ -874,18 +875,73 @@ var Checkbox = ({
 };
 var Checkbox_default = Checkbox;
 
+// src/Chip/Chip.tsx
+var import_react5 = require("react");
+var import_classnames7 = __toESM(require_classnames());
+
+// 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
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Chip = (0, import_react5.forwardRef)(
+  ({
+    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__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        className: chipStyles,
+        "data-testid": dataTestId,
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        onClick: onChange,
+        children: [
+          Icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: iconStyles }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            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
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Divider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("hr", { className: Divider_module_default.divider });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", { className: Divider_module_default.divider });
 }
 Divider.displayName = "Divider";
 
 // src/Heading/Heading.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Heading = ({
   align = "start",
   as = "h1",
@@ -895,7 +951,7 @@ var Heading = ({
   size = 500
 }) => {
   const weight = [700, 800].includes(size) ? "heavy" : "bold";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Typography_default,
     {
       align,
@@ -911,20 +967,20 @@ var Heading = ({
 var Heading_default = Heading;
 
 // src/IconButton/IconButton.tsx
-var import_classnames7 = __toESM(require_classnames());
-var import_react5 = require("react");
+var import_classnames8 = __toESM(require_classnames());
+var import_react6 = require("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
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var iconSize2 = {
   ["sm"]: IconButton_module_default.smIcon,
   ["md"]: IconButton_module_default.mdIcon,
   ["lg"]: IconButton_module_default.lgIcon
 };
-var IconButton = (0, import_react5.forwardRef)(
+var IconButton = (0, import_react6.forwardRef)(
   ({
     accessibilityLabel,
     color = "primary",
@@ -935,7 +991,7 @@ var IconButton = (0, import_react5.forwardRef)(
     tooltip,
     onClick
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
         "aria-label": accessibilityLabel,
@@ -944,7 +1000,7 @@ var IconButton = (0, import_react5.forwardRef)(
         title: tooltip,
         disabled,
         onClick,
-        className: (0, import_classnames7.default)(
+        className: (0, import_classnames8.default)(
           IconButton_module_default.iconButton,
           foregroundColor(color),
           backgroundColor(color),
@@ -955,7 +1011,7 @@ var IconButton = (0, import_react5.forwardRef)(
           }
         ),
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: iconSize2[size] })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: iconSize2[size] })
       }
     );
   }
@@ -964,8 +1020,8 @@ IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/LinkButton/LinkButton.tsx
-var import_react6 = require("react");
-var import_classnames8 = __toESM(require_classnames());
+var import_react7 = require("react");
+var import_classnames9 = __toESM(require_classnames());
 
 // 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" };
@@ -974,8 +1030,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
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var LinkButton = (0, import_react6.forwardRef)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var LinkButton = (0, import_react7.forwardRef)(
   ({
     text,
     href,
@@ -989,7 +1045,7 @@ var LinkButton = (0, import_react6.forwardRef)(
     endIcon: EndIcon,
     onClick
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "a",
       {
         href,
@@ -997,7 +1053,7 @@ var LinkButton = (0, import_react6.forwardRef)(
         target,
         ref,
         rel,
-        className: (0, import_classnames8.default)(
+        className: (0, import_classnames9.default)(
           LinkButton_module_default.linkButton,
           Button_module_default3.button,
           foregroundColor(color),
@@ -1013,21 +1069,21 @@ var LinkButton = (0, import_react6.forwardRef)(
         ),
         onClick,
         children: [
-          StartIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          StartIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             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__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Typography_default,
             {
               color: foregroundTypographyColor(color),
               size: textVariant_default[size],
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontWeight: 500 }, children: text })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontWeight: 500 }, children: text })
             }
           ),
-          EndIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EndIcon, { className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size]) })
+          EndIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EndIcon, { className: (0, import_classnames9.default)(Button_module_default3.icon, iconSize_default[size]) })
         ]
       }
     );
@@ -1040,18 +1096,18 @@ var LinkButton_default = LinkButton;
 var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
 
 // src/MiniActionCard/MiniActionCard.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var MiniActionCard = ({
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: MiniActionCard_module_default.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_classnames9 = __toESM(require_classnames());
+var import_classnames10 = __toESM(require_classnames());
 
 // src/Modal/FocusTrap.tsx
-var import_react7 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function queryFocusableAll(el) {
   const selector = [
     "a[href]",
@@ -1080,9 +1136,9 @@ var focusElement = (el) => {
 function FocusTrap({
   children
 }) {
-  const elRef = (0, import_react7.useRef)(null);
-  const previouslyFocusedElRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const elRef = (0, import_react8.useRef)(null);
+  const previouslyFocusedElRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     const { current: element } = elRef;
     const focusFirstChild = () => {
       const withinIframe = window !== window.parent;
@@ -1112,13 +1168,13 @@ function FocusTrap({
       }
     };
   }, [elRef, previouslyFocusedElRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
 }
 
 // src/Modal/StopScroll.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 function StopScroll(props) {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const originalStyle = window.getComputedStyle(document.body).overflow;
     document.body.style.overflow = "hidden";
     return () => {
@@ -1130,13 +1186,13 @@ function StopScroll(props) {
 
 // src/Modal/Layer.tsx
 var import_react_dom = require("react-dom");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Layer({
   children,
   zIndex = 1
 }) {
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Box_default,
       {
         "data-testid": "syntax-layer",
@@ -1155,9 +1211,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_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function XIcon({ color = "#000" }) {
-  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)(
+  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)(
     "path",
     {
       fill: "inherit",
@@ -1180,14 +1236,14 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  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)(
+  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)(
     "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_runtime16.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         Box_default,
         {
           "data-testid": dataTestId,
@@ -1200,23 +1256,23 @@ function Modal({
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box_default, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "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__ */ (0, import_jsx_runtime16.jsx)(XIcon, { color: image ? "#fff" : "#000" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(XIcon, { color: image ? "#fff" : "#000" })
               }
             ) }),
-            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)(
+            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)(
                 Box_default,
                 {
                   display: "flex",
@@ -1239,14 +1295,14 @@ function Modal({
 Modal.displayName = "Modal";
 
 // src/RadioButton/RadioButton.tsx
-var import_react9 = require("react");
-var import_classnames10 = __toESM(require_classnames());
+var import_react10 = require("react");
+var import_classnames11 = __toESM(require_classnames());
 
 // 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
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
@@ -1259,17 +1315,17 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react10.useState)(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__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "label",
     {
-      className: (0, import_classnames10.default)(
+      className: (0, import_classnames11.default)(
         RadioButton_module_default.radioBaseContainer,
         RadioButton_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
         {
@@ -1279,23 +1335,23 @@ var RadioButton = ({
         }
       ),
       children: [
-        checked ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        checked ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "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__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_classnames10.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames11.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "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"}`],
               {
@@ -1315,7 +1371,7 @@ var RadioButton = ({
             }
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -1330,28 +1386,28 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_react10 = require("react");
-var import_classnames11 = __toESM(require_classnames());
+var import_react11 = require("react");
+var import_classnames12 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
 var ColorBaseDestructive700 = "#d32a4b";
 var ColorBaseGray800 = "#353535";
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_1cdwo_1", "opacityOverlay": "_opacityOverlay_1cdwo_7", "outerTextContainer": "_outerTextContainer_1cdwo_11", "selectWrapper": "_selectWrapper_1cdwo_16", "selectBox": "_selectBox_1cdwo_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_1cdwo_37", "unselected": "_unselected_1cdwo_42", "selected": "_selected_1cdwo_46", "arrowIcon": "_arrowIcon_1cdwo_50", "sm": "_sm_1cdwo_64", "md": "_md_1cdwo_70", "lg": "_lg_1cdwo_76", "selectError": "_selectError_1cdwo_82" };
+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_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SelectOption = ({
   "data-testid": dataTestId,
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var iconSize3 = {
   sm: 20,
   md: 24,
@@ -1370,25 +1426,25 @@ function SelectList({
   selectedValue = "",
   size = "md"
 }) {
-  const id = (0, import_react10.useId)();
+  const id = (0, import_react11.useId)();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "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__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: id, 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)(
+        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)(
             "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,
@@ -1403,19 +1459,19 @@ function SelectList({
               onFocus: () => setIsFocused(true),
               onBlur: () => setIsFocused(false),
               children: [
-                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "svg",
             {
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
               width: iconSize3[size],
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "path",
                 {
                   fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
@@ -1425,7 +1481,7 @@ function SelectList({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Typography_default,
           {
             size: 100,
@@ -1440,14 +1496,14 @@ function SelectList({
 SelectList.Option = SelectOption_default;
 
 // src/TextField/TextField.tsx
-var import_react11 = require("react");
-var import_classnames12 = __toESM(require_classnames());
+var import_react12 = require("react");
+var import_classnames13 = __toESM(require_classnames());
 
 // css-module:./TextField.module.css#css-module
 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_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
@@ -1462,9 +1518,9 @@ function TextField({
   type = "text",
   value = ""
 }) {
-  const reactId = (0, import_react11.useId)();
+  const reactId = (0, import_react12.useId)();
   const inputId = id != null ? id : reactId;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -1477,12 +1533,12 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.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,
-            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,
@@ -1494,7 +1550,7 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Typography_default,
           {
             size: 100,
@@ -1515,6 +1571,7 @@ function TextField({
   ButtonGroup,
   Card,
   Checkbox,
+  Chip,
   Divider,
   Heading,
   IconButton,