@cambly/syntax-core 9.6.0 → 9.7.0

package/dist/__chunks/RSU3GDHB.mjs

@@ -0,0 +1,73 @@
+import {
+  Box_default
+} from "./LKQ7PJ4S.mjs";
+import {
+  Typography_default
+} from "./BCWLWS7W.mjs";
+import {
+  useIsHydrated
+} from "./XFKGXL73.mjs";
+
+// src/Chip/Chip.tsx
+import { forwardRef } from "react";
+import classnames from "classnames";
+
+// css-module:./Chip.module.css#css-module
+var Chip_module_default = { "chip": "_chip_nvvgx_1", "disabled": "_disabled_nvvgx_12", "selectedChip": "_selectedChip_nvvgx_17", "icon": "_icon_nvvgx_22", "selectedIcon": "_selectedIcon_nvvgx_30", "sm": "_sm_nvvgx_34", "lg": "_lg_nvvgx_40" };
+
+// src/Chip/Chip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Chip = forwardRef(
+  ({
+    selected = false,
+    "data-testid": dataTestId,
+    size = "sm",
+    text,
+    onChange,
+    icon: Icon
+  }, ref) => {
+    const isHydrated = useIsHydrated();
+    const disabled = !isHydrated;
+    const chipStyles = classnames(Chip_module_default.chip, Chip_module_default[size], {
+      [Chip_module_default.selectedChip]: selected,
+      [Chip_module_default.disabled]: disabled
+    });
+    const iconStyles = classnames(Chip_module_default.icon, {
+      [Chip_module_default.selectedIcon]: selected
+    });
+    const typographySize = {
+      ["sm"]: 200,
+      ["lg"]: 300
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: chipStyles,
+        disabled,
+        "data-testid": dataTestId,
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        onClick: onChange,
+        children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: iconStyles }),
+          /* @__PURE__ */ jsx(Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ jsx(
+            Typography_default,
+            {
+              size: typographySize[size],
+              color: selected ? "white" : "gray900",
+              children: text
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Chip_default = Chip;
+
+export {
+  Chip_default
+};
+//# sourceMappingURL=RSU3GDHB.mjs.map

package/dist/__chunks/RSU3GDHB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype ChipProps = {\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the chip.\n   *\n   * * `sm`: 32px\n   * * `lg`: 48px\n   *\n   * @defaultValue sm\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      selected = false,\n      \"data-testid\": dataTestId,\n      size = \"sm\",\n      text,\n      onChange,\n      icon: Icon,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated;\n\n    const chipStyles = classnames(styles.chip, styles[size], {\n      [styles.selectedChip]: selected,\n      [styles.disabled]: disabled,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n    const typographySize = {\n      [\"sm\"]: 200,\n      [\"lg\"]: 300,\n    } as const;\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography\n            size={typographySize[size]}\n            color={selected ? \"white\" : \"gray900\"}\n          >\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_nvvgx_1\",\"disabled\":\"_disabled_nvvgx_12\",\"selectedChip\":\"_selectedChip_nvvgx_17\",\"icon\":\"_icon_nvvgx_22\",\"selectedIcon\":\"_selectedIcon_nvvgx_30\",\"sm\":\"_sm_nvvgx_34\",\"lg\":\"_lg_nvvgx_40\"}"],"mappings":";;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,gBAAe,0BAAyB,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADwExS,SASW,KATX;AA3BN,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC;AAElB,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI,GAAG;AAAA,MACvD,CAAC,oBAAO,YAAY,GAAG;AAAA,MACvB,CAAC,oBAAO,QAAQ,GAAG;AAAA,IACrB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AACD,UAAM,iBAAiB;AAAA,MACrB,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,IAAI,GAAG;AAAA,IACV;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,eAAe,IAAI;AAAA,cACzB,OAAO,WAAW,UAAU;AAAA,cAE3B;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;","names":[]}

package/dist/__chunks/RVT6EXR3.mjs

@@ -0,0 +1,31 @@
+import {
+  Box_default
+} from "./LKQ7PJ4S.mjs";
+
+// src/Modal/Layer.tsx
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+function Layer({
+  children,
+  zIndex = 1
+}) {
+  return typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      Box_default,
+      {
+        "data-testid": "syntax-layer",
+        position: "fixed",
+        dangerouslySetInlineStyle: {
+          __style: { zIndex, inset: 0 }
+        },
+        children
+      }
+    ),
+    document.body
+  ) : null;
+}
+
+export {
+  Layer
+};
+//# sourceMappingURL=RVT6EXR3.mjs.map

package/dist/__chunks/RVT6EXR3.mjs.map

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

package/dist/__chunks/SAEVPDUP.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Button/constants/loadingIconSize.ts
+var loadingIconSize = {
+  ["sm"]: 16,
+  ["md"]: 20,
+  ["lg"]: 24
+};
+var loadingIconSize_default = loadingIconSize;
+
+
+
+exports.loadingIconSize_default = loadingIconSize_default;
+//# sourceMappingURL=SAEVPDUP.js.map

package/dist/__chunks/SAEVPDUP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/constants/loadingIconSize.ts"],"names":[],"mappings":";AAAA,IAAM,kBAAkB;AAAA,EACtB,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AACV;AAEA,IAAO,0BAAQ","sourcesContent":["const loadingIconSize = {\n  [\"sm\"]: 16,\n  [\"md\"]: 20,\n  [\"lg\"]: 24,\n};\n\nexport default loadingIconSize;\n"]}

package/dist/__chunks/SXTRSFG5.mjs

@@ -0,0 +1,14 @@
+// css-module:./Divider.module.css#css-module
+var Divider_module_default = { "divider": "_divider_ra8vz_1" };
+
+// src/Divider/Divider.tsx
+import { jsx } from "react/jsx-runtime";
+function Divider() {
+  return /* @__PURE__ */ jsx("hr", { className: Divider_module_default.divider });
+}
+Divider.displayName = "Divider";
+
+export {
+  Divider
+};
+//# sourceMappingURL=SXTRSFG5.mjs.map

package/dist/__chunks/SXTRSFG5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_ra8vz_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n  return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n"],"mappings":";AAA8F,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMjI;AADM,SAAR,UAA+C;AACpD,SAAO,oBAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc;","names":[]}

package/dist/__chunks/TKYRBLSM.js

@@ -0,0 +1,110 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _2JWMSFS7js = require('./2JWMSFS7.js');
+
+
+var _42YPEAFSjs = require('./42YPEAFS.js');
+
+
+var _BSFWQWVJjs = require('./BSFWQWVJ.js');
+
+
+var _PYNS67IVjs = require('./PYNS67IV.js');
+
+
+var _AFINOME7js = require('./AFINOME7.js');
+
+// src/Modal/Modal.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:./Modal.module.css#css-module
+var Modal_module_default = { "backdrop": "_backdrop_30t3h_1", "closeButton": "_closeButton_30t3h_12", "closeButtonWithImage": "_closeButtonWithImage_30t3h_32" };
+
+// src/Modal/Modal.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function XIcon({ color = "#000" }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "path",
+    {
+      fill: "inherit",
+      d: "M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z"
+    }
+  ) });
+}
+var sizeWidth = {
+  sm: 400,
+  lg: 600
+};
+function Modal({
+  header,
+  children,
+  image,
+  onDismiss,
+  footer,
+  accessibilityCloseLabel = "close modal",
+  size = "sm",
+  zIndex = 1,
+  "data-testid": dataTestId
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _2JWMSFS7js.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _AFINOME7js.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _42YPEAFSjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: Modal_module_default.backdrop,
+      role: "presentation",
+      onClick: (e) => e.target === e.currentTarget && onDismiss(),
+      onKeyDown: (e) => e.key === "Escape" && onDismiss(),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _PYNS67IVjs.Box_default,
+        {
+          "data-testid": dataTestId,
+          backgroundColor: "white",
+          rounding: "xl",
+          display: "flex",
+          direction: "column",
+          minWidth: 240,
+          maxWidth: sizeWidth[size],
+          width: "100%",
+          dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PYNS67IVjs.Box_default, { position: "relative", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                "aria-label": accessibilityCloseLabel,
+                type: "button",
+                className: _classnames2.default.call(void 0, Modal_module_default.closeButton, {
+                  [Modal_module_default.closeButtonWithImage]: !!image
+                }),
+                onClick: onDismiss,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, XIcon, { color: image ? "#fff" : "#000" })
+              }
+            ) }),
+            image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PYNS67IVjs.Box_default, { maxHeight: 200, children: image }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _PYNS67IVjs.Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BSFWQWVJjs.Heading_default, { as: "h1", size: 500, children: header }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PYNS67IVjs.Box_default, { marginBottom: 4, children }),
+              footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _PYNS67IVjs.Box_default,
+                {
+                  display: "flex",
+                  direction: "column",
+                  gap: 3,
+                  smDirection: "row",
+                  smJustifyContent: "end",
+                  lgDirection: "row",
+                  lgJustifyContent: "end",
+                  children: footer
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  ) }) }) });
+}
+Modal.displayName = "Modal";
+
+
+
+exports.Modal = Modal;
+//# sourceMappingURL=TKYRBLSM.js.map

package/dist/__chunks/TKYRBLSM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDmE,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,yBAAwB,wBAAuB,iCAAgC;;;ADchO,cAiKQ,YAjKR;AAHN,SAAS,MAAM,EAAE,QAAQ,OAAO,GAAuB;AACrD,SACE,oBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,MAAM,OACnE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAIA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,GAoEiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC1D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU,UAAU,IAAI;AAAA,UACxB,OAAM;AAAA,UACN,2BAA2B,EAAE,SAAS,EAAE,UAAU,SAAS,EAAE;AAAA,UAE7D;AAAA,gCAAC,eAAI,UAAS,YACZ;AAAA,cAAC;AAAA;AAAA,gBACC,cAAY;AAAA,gBACZ,MAAK;AAAA,gBACL,WAAW,WAAW,qBAAO,aAAa;AAAA,kBACxC,CAAC,qBAAO,oBAAoB,GAAG,CAAC,CAAC;AAAA,gBACnC,CAAC;AAAA,gBACD,SAAS;AAAA,gBAET,8BAAC,SAAM,OAAO,QAAQ,SAAS,QAAQ;AAAA;AAAA,YACzC,GACF;AAAA,YACC,SAAS,oBAAC,eAAI,WAAW,KAAM,iBAAM;AAAA,YACtC,qBAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,WAAU,UAAS,SAAS,GACtD;AAAA,kCAAC,mBAAQ,IAAG,MAAK,MAAM,KACpB,kBACH;AAAA,cACA,oBAAC,eAAI,cAAc,GAAI,UAAS;AAAA,cAC/B,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBAEhB;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n      <path\n        fill=\"inherit\"\n        d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n      />\n    </svg>\n  );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n  sm: 400,\n  lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  size = \"sm\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image size should be 400w x 200h.\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The size of the card\n   *\n   * * `sm`: 400px\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   */\n  size?: keyof typeof sizeWidth;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={styles.backdrop}\n            role=\"presentation\"\n            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"white\"\n              rounding=\"xl\"\n              display=\"flex\"\n              direction=\"column\"\n              minWidth={240}\n              maxWidth={sizeWidth[size]}\n              width=\"100%\"\n              dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n            >\n              <Box position=\"relative\">\n                <button\n                  aria-label={accessibilityCloseLabel}\n                  type=\"button\"\n                  className={classnames(styles.closeButton, {\n                    [styles.closeButtonWithImage]: !!image,\n                  })}\n                  onClick={onDismiss}\n                >\n                  <XIcon color={image ? \"#fff\" : \"#000\"} />\n                </button>\n              </Box>\n              {image && <Box maxHeight={200}>{image}</Box>}\n              <Box display=\"flex\" gap={3} direction=\"column\" padding={9}>\n                <Heading as=\"h1\" size={500}>\n                  {header}\n                </Heading>\n                <Box marginBottom={4}>{children}</Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_30t3h_1\",\"closeButton\":\"_closeButton_30t3h_12\",\"closeButtonWithImage\":\"_closeButtonWithImage_30t3h_32\"}"]}

package/dist/__chunks/TPMQI44L.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// css-module:../rounding.module.css#css-module
+var rounding_module_default = { "roundingsm": "_roundingsm_1bo6p_2", "roundingmd": "_roundingmd_1bo6p_6", "roundinglg": "_roundinglg_1bo6p_10", "roundingxl": "_roundingxl_1bo6p_14", "roundingfull": "_roundingfull_1bo6p_18" };
+
+
+
+exports.rounding_module_default = rounding_module_default;
+//# sourceMappingURL=TPMQI44L.js.map

package/dist/__chunks/TPMQI44L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../rounding.module.css#css-module"],"names":[],"mappings":";AAAuF,IAAO,0BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,cAAa,wBAAuB,cAAa,wBAAuB,gBAAe,yBAAwB","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css\"; export default {\"roundingsm\":\"_roundingsm_1bo6p_2\",\"roundingmd\":\"_roundingmd_1bo6p_6\",\"roundinglg\":\"_roundinglg_1bo6p_10\",\"roundingxl\":\"_roundingxl_1bo6p_14\",\"roundingfull\":\"_roundingfull_1bo6p_18\"}"]}

package/dist/__chunks/UCMB6MFN.mjs

@@ -0,0 +1,17 @@
+// src/Modal/StopScroll.tsx
+import { useEffect } from "react";
+function StopScroll(props) {
+  useEffect(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+  return props.children;
+}
+
+export {
+  StopScroll
+};
+//# sourceMappingURL=UCMB6MFN.mjs.map

package/dist/__chunks/UCMB6MFN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/StopScroll.tsx"],"sourcesContent":["import { useEffect, type ReactElement } from \"react\";\n\nexport default function StopScroll(props: {\n  children: ReactElement;\n}): ReactElement {\n  useEffect(() => {\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, []);\n\n  return props.children;\n}\n"],"mappings":";AAAA,SAAS,iBAAoC;AAE9B,SAAR,WAA4B,OAElB;AACf,YAAU,MAAM;AACd,UAAM,gBAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE;AAC7D,aAAS,KAAK,MAAM,WAAW;AAC/B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,MAAM;AACf;","names":[]}

package/dist/__chunks/UNIBFDXV.js

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _PYNS67IVjs = require('./PYNS67IV.js');
+
+
+var _F3ZST4RLjs = require('./F3ZST4RL.js');
+
+
+var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
+
+// src/Chip/Chip.tsx
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:./Chip.module.css#css-module
+var Chip_module_default = { "chip": "_chip_nvvgx_1", "disabled": "_disabled_nvvgx_12", "selectedChip": "_selectedChip_nvvgx_17", "icon": "_icon_nvvgx_22", "selectedIcon": "_selectedIcon_nvvgx_30", "sm": "_sm_nvvgx_34", "lg": "_lg_nvvgx_40" };
+
+// src/Chip/Chip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Chip = _react.forwardRef.call(void 0, 
+  ({
+    selected = false,
+    "data-testid": dataTestId,
+    size = "sm",
+    text,
+    onChange,
+    icon: Icon
+  }, ref) => {
+    const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
+    const disabled = !isHydrated;
+    const chipStyles = _classnames2.default.call(void 0, Chip_module_default.chip, Chip_module_default[size], {
+      [Chip_module_default.selectedChip]: selected,
+      [Chip_module_default.disabled]: disabled
+    });
+    const iconStyles = _classnames2.default.call(void 0, Chip_module_default.icon, {
+      [Chip_module_default.selectedIcon]: selected
+    });
+    const typographySize = {
+      ["sm"]: 200,
+      ["lg"]: 300
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        className: chipStyles,
+        disabled,
+        "data-testid": dataTestId,
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        onClick: onChange,
+        children: [
+          Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PYNS67IVjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _F3ZST4RLjs.Typography_default,
+            {
+              size: typographySize[size],
+              color: selected ? "white" : "gray900",
+              children: text
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Chip_default = Chip;
+
+
+
+exports.Chip_default = Chip_default;
+//# sourceMappingURL=UNIBFDXV.js.map

package/dist/__chunks/UNIBFDXV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,gBAAe,0BAAyB,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADwExS,SASW,KATX;AA3BN,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC;AAElB,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI,GAAG;AAAA,MACvD,CAAC,oBAAO,YAAY,GAAG;AAAA,MACvB,CAAC,oBAAO,QAAQ,GAAG;AAAA,IACrB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AACD,UAAM,iBAAiB;AAAA,MACrB,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,IAAI,GAAG;AAAA,IACV;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,eAAe,IAAI;AAAA,cACzB,OAAO,WAAW,UAAU;AAAA,cAE3B;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype ChipProps = {\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the chip.\n   *\n   * * `sm`: 32px\n   * * `lg`: 48px\n   *\n   * @defaultValue sm\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      selected = false,\n      \"data-testid\": dataTestId,\n      size = \"sm\",\n      text,\n      onChange,\n      icon: Icon,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated;\n\n    const chipStyles = classnames(styles.chip, styles[size], {\n      [styles.selectedChip]: selected,\n      [styles.disabled]: disabled,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n    const typographySize = {\n      [\"sm\"]: 200,\n      [\"lg\"]: 300,\n    } as const;\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography\n            size={typographySize[size]}\n            color={selected ? \"white\" : \"gray900\"}\n          >\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_nvvgx_1\",\"disabled\":\"_disabled_nvvgx_12\",\"selectedChip\":\"_selectedChip_nvvgx_17\",\"icon\":\"_icon_nvvgx_22\",\"selectedIcon\":\"_selectedIcon_nvvgx_30\",\"sm\":\"_sm_nvvgx_34\",\"lg\":\"_lg_nvvgx_40\"}"]}

package/dist/__chunks/WCEOAOUO.mjs

@@ -0,0 +1,127 @@
+import {
+  SelectOption_default
+} from "./GVNDZZAU.mjs";
+import {
+  Focus_module_default
+} from "./WJDAVT5R.mjs";
+import {
+  Typography_default
+} from "./BCWLWS7W.mjs";
+import {
+  useIsHydrated
+} from "./XFKGXL73.mjs";
+import {
+  useFocusVisible
+} from "./FCX7QDZS.mjs";
+
+// src/SelectList/SelectList.tsx
+import {
+  useId,
+  useState
+} from "react";
+import classNames from "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_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/SelectList.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var iconSize = {
+  sm: 20,
+  md: 24,
+  lg: 24
+};
+function SelectList({
+  children,
+  "data-testid": dataTestId,
+  disabled: disabledProp = false,
+  errorText,
+  helperText,
+  id,
+  label,
+  onChange,
+  onClick,
+  placeholderText,
+  selectedValue = "",
+  size = "md"
+}) {
+  const reactId = useId();
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const selectId = id != null ? id : reactId;
+  const { isFocusVisible } = useFocusVisible();
+  const [isFocused, setIsFocused] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(SelectList_module_default.selectContainer, {
+        [SelectList_module_default.opacityOverlay]: disabled
+      }),
+      children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        /* @__PURE__ */ jsxs("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: selectId,
+              "data-testid": dataTestId,
+              disabled,
+              className: classNames(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,
+                [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
+                // for focus keyboard
+                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
+                // for focus mouse
+              }),
+              onChange,
+              onClick,
+              value: placeholderText && !selectedValue ? placeholderText : selectedValue,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              children: [
+                placeholderText && /* @__PURE__ */ jsx("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                children
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              focusable: "false",
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              width: iconSize[size],
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
+                  d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+                }
+              )
+            }
+          ) })
+        ] }),
+        (helperText || errorText) && /* @__PURE__ */ jsx("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx(
+          Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: errorText ? errorText : helperText
+          }
+        ) })
+      ]
+    }
+  );
+}
+SelectList.Option = SelectOption_default;
+
+export {
+  SelectList
+};
+//# sourceMappingURL=WCEOAOUO.mjs.map

package/dist/__chunks/WCEOAOUO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","../../../syntax-design-tokens/dist/js/index.js","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId} className={styles.outerTextContainer}>\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(styles.selectBox, styles[size], {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectError]: errorText,\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n          })}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={iconSize[size]}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <div className={styles.outerTextContainer}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","/**\n * Do not edit directly\n * Generated on Tue, 12 Dec 2023 23:54:26 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_3ifov_1\",\"opacityOverlay\":\"_opacityOverlay_3ifov_7\",\"outerTextContainer\":\"_outerTextContainer_3ifov_11\",\"selectWrapper\":\"_selectWrapper_3ifov_16\",\"selectBox\":\"_selectBox_3ifov_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_3ifov_37\",\"unselected\":\"_unselected_3ifov_42\",\"selected\":\"_selected_3ifov_46\",\"arrowIcon\":\"_arrowIcon_3ifov_50\",\"sm\":\"_sm_3ifov_64\",\"md\":\"_md_3ifov_70\",\"lg\":\"_lg_3ifov_76\",\"selectError\":\"_selectError_3ifov_82\"}"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACGhB,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;;;ACpBoE,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,sBAAqB,gCAA+B,iBAAgB,2BAA0B,aAAY,uBAAsB,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,eAAc,wBAAuB;;;AFgHvkB,cAMF,YANE;AA9FV,IAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKe,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AACT,GAwDiB;AACf,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,WAAW,kBAAM;AACvB,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,QAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,MAC3B,CAAC;AAAA,MAEA;AAAA,iBACC,oBAAC,WAAM,SAAS,UAAU,WAAW,0BAAO,oBAC1C,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF;AAAA,QAEF,qBAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa;AAAA,cACb;AAAA,cACA,WAAW,WAAW,0BAAO,WAAW,0BAAO,IAAI,GAAG;AAAA,gBACpD,CAAC,0BAAO,UAAU,GAAG,CAAC,iBAAiB,CAAC;AAAA,gBACxC,CAAC,0BAAO,QAAQ,GAAG,iBAAiB,CAAC;AAAA,gBACrC,CAAC,0BAAO,WAAW,GAAG;AAAA,gBACtB,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA;AAAA,gBACf,CAAC,0BAAO,uBAAuB,GAAG,aAAa,CAAC;AAAA;AAAA,cAClD,CAAC;AAAA,cACD;AAAA,cACA;AAAA,cACA,OACE,mBAAmB,CAAC,gBAAgB,kBAAkB;AAAA,cAExD,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAE/B;AAAA,mCACC,oBAAC,YAAO,UAAQ,MAAC,OAAO,iBACrB,2BACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,SAAQ;AAAA,cACR,OAAO,SAAS,IAAI;AAAA,cAEpB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY,0BAA0B;AAAA,kBAC5C,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,SACE,cAAc,cACd,oBAAC,SAAI,WAAW,0BAAO,oBACrB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,sBAAY,YAAY;AAAA;AAAA,QAC3B,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,SAAS;","names":[]}

package/dist/__chunks/WJDAVT5R.mjs

@@ -0,0 +1,7 @@
+// css-module:../Focus.module.css#css-module
+var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutlineFocus_1h8bq_1" };
+
+export {
+  Focus_module_default
+};
+//# sourceMappingURL=WJDAVT5R.mjs.map

package/dist/__chunks/WJDAVT5R.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Focus.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Focus.module.css\"; export default {\"accessibilityOutlineFocus\":\"_accessibilityOutlineFocus_1h8bq_1\"}"],"mappings":";AAAoF,IAAO,uBAAQ,EAAC,6BAA4B,qCAAoC;","names":[]}