@cambly/syntax-core 10.6.1 → 10.7.0-beta.0

package/dist/__chunks/BUE3GFYP.mjs

@@ -0,0 +1,73 @@
+import {
+  Box_default
+} from "./JZMZ537X.mjs";
+import {
+  Typography_default
+} from "./BQUP6OTG.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=BUE3GFYP.mjs.map

package/dist/__chunks/BUE3GFYP.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 \"/Users/christian/cambly/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;;;ACDgE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,gBAAe,0BAAyB,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADwEvS,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/BULDMP67.cjs

@@ -0,0 +1,95 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _ZRYT2ZIOcjs = require('./ZRYT2ZIO.cjs');
+
+
+
+var _PSWX5DBCcjs = require('./PSWX5DBC.cjs');
+
+
+
+var _AZSWRSRLcjs = require('./AZSWRSRL.cjs');
+
+
+
+var _V73UH6T4cjs = require('./V73UH6T4.cjs');
+
+
+var _5NIFOD6Kcjs = require('./5NIFOD6K.cjs');
+
+
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+// src/IconButton/IconButton.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _react = require('react');
+
+// css-module:./IconButton.module.css#css-module
+var IconButton_module_default = { "iconButton": "_iconButton_1q9cs_1", "iconButtonNoBorder": "_iconButtonNoBorder_1q9cs_8", "sm": "_sm_1q9cs_49", "md": "_md_1q9cs_54", "lg": "_lg_1q9cs_59", "smCambio": "_smCambio_1q9cs_64", "mdCambio": "_mdCambio_1q9cs_69", "lgCambio": "_lgCambio_1q9cs_74", "smIcon": "_smIcon_1q9cs_79", "mdIcon": "_mdIcon_1q9cs_86", "lgIcon": "_lgIcon_1q9cs_93", "smIconCambio": "_smIconCambio_1q9cs_100", "mdIconCambio": "_mdIconCambio_1q9cs_107", "lgIconCambio": "_lgIconCambio_1q9cs_114", "xlIconCambio": "_xlIconCambio_1q9cs_121" };
+
+// src/IconButton/IconButton.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var classicIconSize = {
+  sm: IconButton_module_default.smIcon,
+  md: IconButton_module_default.mdIcon,
+  lg: IconButton_module_default.lgIcon
+};
+var cambioIconSize = {
+  sm: IconButton_module_default.smIconCambio,
+  md: IconButton_module_default.mdIconCambio,
+  lg: IconButton_module_default.lgIconCambio,
+  xl: IconButton_module_default.xlIconCambio
+};
+var IconButton = _react.forwardRef.call(void 0, 
+  ({
+    accessibilityLabel,
+    color = "primary",
+    "data-testid": dataTestId,
+    disabled = false,
+    icon: Icon,
+    size = "md",
+    tooltip,
+    onClick
+  }, ref) => {
+    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+    const { themeName } = _5NIFOD6Kcjs.useTheme.call(void 0, );
+    const foregroundColorClass = themeName === "classic" ? _AZSWRSRLcjs.classicForegroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _AZSWRSRLcjs.cambioForegroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
+    const backgroundColorClass = themeName === "classic" ? _V73UH6T4cjs.classicBackgroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _V73UH6T4cjs.cambioBackgroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        "aria-label": accessibilityLabel,
+        "data-testid": dataTestId,
+        type: "button",
+        title: tooltip,
+        disabled: !isHydrated || disabled,
+        onClick,
+        className: _classnames2.default.call(void 0, 
+          IconButton_module_default.iconButton,
+          foregroundColorClass,
+          backgroundColorClass,
+          themeName === "classic" ? IconButton_module_default[size] : IconButton_module_default[`${size}Cambio`],
+          {
+            [_ZRYT2ZIOcjs.Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
+            [_ZRYT2ZIOcjs.Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary",
+            [IconButton_module_default.iconButtonNoBorder]: themeName === "classic" && !["secondary", "destructive-secondary"].includes(color) || themeName === "cambio"
+          }
+        ),
+        ref,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Icon,
+          {
+            className: themeName === "classic" ? classicIconSize[size] : cambioIconSize[size]
+          }
+        )
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
+
+
+
+exports.IconButton_default = IconButton_default;
+//# sourceMappingURL=BULDMP67.cjs.map

package/dist/__chunks/BULDMP67.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLiE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD6JplB;AA5IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA4EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n  sm: styles.smIconCambio,\n  md: styles.mdIconCambio,\n  lg: styles.lgIconCambio,\n  xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"inverse\";\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n            [styles.iconButtonNoBorder]:\n              (themeName === \"classic\" &&\n                ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n              themeName === \"cambio\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon\n          className={\n            themeName === \"classic\"\n              ? classicIconSize[size]\n              : cambioIconSize[size]\n          }\n        />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"]}

package/dist/__chunks/{6VWFOSQZ.js → BXCLZFW3.js}

@@ -11,4 +11,4 @@ Divider.displayName = "Divider";
 export {
   Divider
 };
-//# sourceMappingURL=6VWFOSQZ.js.map
+//# sourceMappingURL=BXCLZFW3.js.map

package/dist/__chunks/BXCLZFW3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"sourcesContent":["import \"/Users/christian/cambly/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":";AAA6F,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMhI;AADM,SAAR,UAA+C;AACpD,SAAO,oBAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc;","names":[]}

package/dist/__chunks/BZPVCGW4.js

@@ -0,0 +1,31 @@
+import {
+  Box_default
+} from "./LOTC75LA.js";
+
+// 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=BZPVCGW4.js.map

package/dist/__chunks/BZPVCGW4.js.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/C33AWSV6.js

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _USJPERI4js = require('./USJPERI4.js');
+
+
+var _3OXEYQS2js = require('./3OXEYQS2.js');
+
+// src/AvatarGroup/AvatarGroupAvatar.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var sizeToMargin = {
+  sm: -16,
+  md: -28,
+  lg: -48,
+  xl: -96
+};
+function AvatarGroupAvatar({
+  accessibilityLabel,
+  icon,
+  orientation = "standard",
+  size = "md",
+  src,
+  zIndex
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _3OXEYQS2js.Box_default,
+    {
+      position: "relative",
+      dangerouslySetInlineStyle: {
+        __style: {
+          zIndex,
+          marginInlineEnd: orientation === "standard" ? sizeToMargin[size] : 0,
+          marginInlineStart: orientation === "reverse" ? sizeToMargin[size] : 0
+        }
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _3OXEYQS2js.Box_default,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "white",
+          rounding: "full",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _USJPERI4js.Avatar_default,
+            {
+              src,
+              accessibilityLabel,
+              size,
+              icon
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.AvatarGroupAvatar = AvatarGroupAvatar;
+//# sourceMappingURL=C33AWSV6.js.map

package/dist/__chunks/C33AWSV6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AvatarGroup/AvatarGroupAvatar.tsx"],"names":[],"mappings":";;;;;;;;AAsEQ;AAlER,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEe,SAAR,kBAAmC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAiCiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP;AAAA,UACA,iBAAiB,gBAAgB,aAAa,aAAa,IAAI,IAAI;AAAA,UACnE,mBAAmB,gBAAgB,YAAY,aAAa,IAAI,IAAI;AAAA,QACtE;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,UAAS;AAAA,UAET;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ","sourcesContent":["import { type ReactElement } from \"react\";\nimport Box from \"../Box/Box\";\nimport Avatar from \"../Avatar/Avatar\";\n\nconst sizeToMargin = {\n  sm: -16,\n  md: -28,\n  lg: -48,\n  xl: -96,\n} as const;\n\nexport default function AvatarGroupAvatar({\n  accessibilityLabel,\n  icon,\n  orientation = \"standard\",\n  size = \"md\",\n  src,\n  zIndex,\n}: {\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * optional icon that appears on the bottom corner of the avatar\n   */\n  icon?: React.ReactElement;\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n  /**\n   * Influences which direction we apply the negative margin between avatars\n   */\n  orientation?: \"standard\" | \"reverse\";\n  /**\n   * Position of the avatar in the stack\n   */\n  zIndex: number;\n  /**\n   * Size of the avatar.\n   *\n   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): ReactElement {\n  return (\n    <Box\n      position=\"relative\"\n      dangerouslySetInlineStyle={{\n        __style: {\n          zIndex,\n          marginInlineEnd: orientation === \"standard\" ? sizeToMargin[size] : 0,\n          marginInlineStart: orientation === \"reverse\" ? sizeToMargin[size] : 0,\n        },\n      }}\n    >\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        backgroundColor=\"white\"\n        rounding=\"full\"\n      >\n        <Avatar\n          src={src}\n          accessibilityLabel={accessibilityLabel}\n          size={size}\n          icon={icon}\n        />\n      </Box>\n    </Box>\n  );\n}\n"]}

package/dist/__chunks/CBT226O7.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/colors/foregroundTypographyColor.ts
+function foregroundTypographyColor(color) {
+  switch (color) {
+    case "destructive-secondary":
+    case "destructive-tertiary":
+      return "destructive-primary";
+    case "primary":
+    case "secondary":
+    case "tertiary":
+    case "branded":
+      return "gray900";
+    case "inverse":
+      return "white";
+    default:
+      return "white";
+  }
+}
+
+
+
+exports.foregroundTypographyColor = foregroundTypographyColor;
+//# sourceMappingURL=CBT226O7.js.map

package/dist/__chunks/CBT226O7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/foregroundTypographyColor.ts"],"names":[],"mappings":";AAEe,SAAR,0BACL,OACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF","sourcesContent":["import { type Color } from \"../constants\";\n\nexport default function foregroundTypographyColor(\n  color: (typeof Color)[number],\n): (typeof Color)[number] {\n  switch (color) {\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return \"destructive-primary\";\n    case \"primary\":\n    case \"secondary\":\n    case \"tertiary\":\n    case \"branded\":\n      return \"gray900\";\n    case \"inverse\":\n      return \"white\";\n    default:\n      return \"white\";\n  }\n}\n"]}

package/dist/__chunks/{NDJRETMM.cjs → CESL6LVL.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _QQWCNTE4cjs = require('./QQWCNTE4.cjs');
+var _NNGWNOP4cjs = require('./NNGWNOP4.cjs');
 
 
-var _GYI2PBXYcjs = require('./GYI2PBXY.cjs');
+var _P2M6MLAWcjs = require('./P2M6MLAW.cjs');
 
 
 
@@ -14,8 +14,8 @@ var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
 var RichSelectChip_default = _react.forwardRef.call(void 0, 
   function RichSelectChip(props, ref) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GYI2PBXYcjs.RichSelectItem_default, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _QQWCNTE4cjs.Chip_default,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _P2M6MLAWcjs.RichSelectItem_default, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _NNGWNOP4cjs.Chip_default,
       {
         text: props.label,
         selected: isSelected,
@@ -30,4 +30,4 @@ var RichSelectChip_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectChip_default = RichSelectChip_default;
-//# sourceMappingURL=NDJRETMM.cjs.map
+//# sourceMappingURL=CESL6LVL.cjs.map

package/dist/__chunks/CGFXAKKI.js

@@ -0,0 +1,12 @@
+// src/Button/constants/loadingIconSize.ts
+var loadingIconSize = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+var loadingIconSize_default = loadingIconSize;
+
+export {
+  loadingIconSize_default
+};
+//# sourceMappingURL=CGFXAKKI.js.map

package/dist/__chunks/CGFXAKKI.js.map

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

package/dist/__chunks/CUAJNXCA.js

@@ -0,0 +1,9 @@
+// src/Button/constants/classicSize.ts
+function classicSize(size) {
+  return size === "xl" ? "lg" : size;
+}
+
+export {
+  classicSize
+};
+//# sourceMappingURL=CUAJNXCA.js.map

package/dist/__chunks/CUAJNXCA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/constants/classicSize.ts"],"sourcesContent":["export default function classicSize(\n  size: \"sm\" | \"md\" | \"lg\" | \"xl\",\n): \"sm\" | \"md\" | \"lg\" {\n  return size === \"xl\" ? \"lg\" : size;\n}\n"],"mappings":";AAAe,SAAR,YACL,MACoB;AACpB,SAAO,SAAS,OAAO,OAAO;AAChC;","names":[]}

package/dist/__chunks/CUDAH5IW.mjs

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};
+//# sourceMappingURL=CUDAH5IW.mjs.map

package/dist/__chunks/CUDAH5IW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/__chunks/CUVXZOBA.mjs

@@ -0,0 +1,7 @@
+// css-module:./colors.module.css#css-module
+var colors_module_default = { "inheritColor": "_inheritColor_11wj3_2", "destructive700Color": "_destructive700Color_11wj3_6", "gray700Color": "_gray700Color_11wj3_10", "gray900Color": "_gray900Color_11wj3_14", "primary700Color": "_primary700Color_11wj3_18", "whiteColor": "_whiteColor_11wj3_22", "blackBackgroundColor": "_blackBackgroundColor_11wj3_27", "destructive100BackgroundColor": "_destructive100BackgroundColor_11wj3_31", "destructive200BackgroundColor": "_destructive200BackgroundColor_11wj3_35", "destructive300BackgroundColor": "_destructive300BackgroundColor_11wj3_39", "destructive700BackgroundColor": "_destructive700BackgroundColor_11wj3_43", "destructive800BackgroundColor": "_destructive800BackgroundColor_11wj3_47", "destructive900BackgroundColor": "_destructive900BackgroundColor_11wj3_51", "gray10BackgroundColor": "_gray10BackgroundColor_11wj3_55", "gray30BackgroundColor": "_gray30BackgroundColor_11wj3_59", "gray60BackgroundColor": "_gray60BackgroundColor_11wj3_63", "gray80BackgroundColor": "_gray80BackgroundColor_11wj3_67", "gray100BackgroundColor": "_gray100BackgroundColor_11wj3_71", "gray200BackgroundColor": "_gray200BackgroundColor_11wj3_75", "gray300BackgroundColor": "_gray300BackgroundColor_11wj3_79", "gray700BackgroundColor": "_gray700BackgroundColor_11wj3_83", "gray800BackgroundColor": "_gray800BackgroundColor_11wj3_87", "gray900BackgroundColor": "_gray900BackgroundColor_11wj3_91", "orange100BackgroundColor": "_orange100BackgroundColor_11wj3_95", "orange200BackgroundColor": "_orange200BackgroundColor_11wj3_99", "orange300BackgroundColor": "_orange300BackgroundColor_11wj3_103", "orange700BackgroundColor": "_orange700BackgroundColor_11wj3_107", "orange800BackgroundColor": "_orange800BackgroundColor_11wj3_111", "orange900BackgroundColor": "_orange900BackgroundColor_11wj3_115", "primary100BackgroundColor": "_primary100BackgroundColor_11wj3_119", "primary200BackgroundColor": "_primary200BackgroundColor_11wj3_123", "primary300BackgroundColor": "_primary300BackgroundColor_11wj3_127", "primary700BackgroundColor": "_primary700BackgroundColor_11wj3_131", "primary800BackgroundColor": "_primary800BackgroundColor_11wj3_135", "primary900BackgroundColor": "_primary900BackgroundColor_11wj3_139", "success100BackgroundColor": "_success100BackgroundColor_11wj3_143", "success200BackgroundColor": "_success200BackgroundColor_11wj3_147", "success300BackgroundColor": "_success300BackgroundColor_11wj3_151", "success700BackgroundColor": "_success700BackgroundColor_11wj3_155", "success800BackgroundColor": "_success800BackgroundColor_11wj3_159", "success900BackgroundColor": "_success900BackgroundColor_11wj3_163", "purple100BackgroundColor": "_purple100BackgroundColor_11wj3_167", "purple200BackgroundColor": "_purple200BackgroundColor_11wj3_171", "purple300BackgroundColor": "_purple300BackgroundColor_11wj3_175", "purple700BackgroundColor": "_purple700BackgroundColor_11wj3_179", "purple800BackgroundColor": "_purple800BackgroundColor_11wj3_183", "purple900BackgroundColor": "_purple900BackgroundColor_11wj3_187", "whiteBackgroundColor": "_whiteBackgroundColor_11wj3_191", "yellow100BackgroundColor": "_yellow100BackgroundColor_11wj3_195", "yellow200BackgroundColor": "_yellow200BackgroundColor_11wj3_199", "yellow300BackgroundColor": "_yellow300BackgroundColor_11wj3_203", "yellow700BackgroundColor": "_yellow700BackgroundColor_11wj3_207", "yellow800BackgroundColor": "_yellow800BackgroundColor_11wj3_211", "yellow900BackgroundColor": "_yellow900BackgroundColor_11wj3_215" };
+
+export {
+  colors_module_default
+};
+//# sourceMappingURL=CUVXZOBA.mjs.map

package/dist/__chunks/CUVXZOBA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./colors.module.css#css-module"],"sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"inheritColor\":\"_inheritColor_11wj3_2\",\"destructive700Color\":\"_destructive700Color_11wj3_6\",\"gray700Color\":\"_gray700Color_11wj3_10\",\"gray900Color\":\"_gray900Color_11wj3_14\",\"primary700Color\":\"_primary700Color_11wj3_18\",\"whiteColor\":\"_whiteColor_11wj3_22\",\"blackBackgroundColor\":\"_blackBackgroundColor_11wj3_27\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_11wj3_31\",\"destructive200BackgroundColor\":\"_destructive200BackgroundColor_11wj3_35\",\"destructive300BackgroundColor\":\"_destructive300BackgroundColor_11wj3_39\",\"destructive700BackgroundColor\":\"_destructive700BackgroundColor_11wj3_43\",\"destructive800BackgroundColor\":\"_destructive800BackgroundColor_11wj3_47\",\"destructive900BackgroundColor\":\"_destructive900BackgroundColor_11wj3_51\",\"gray10BackgroundColor\":\"_gray10BackgroundColor_11wj3_55\",\"gray30BackgroundColor\":\"_gray30BackgroundColor_11wj3_59\",\"gray60BackgroundColor\":\"_gray60BackgroundColor_11wj3_63\",\"gray80BackgroundColor\":\"_gray80BackgroundColor_11wj3_67\",\"gray100BackgroundColor\":\"_gray100BackgroundColor_11wj3_71\",\"gray200BackgroundColor\":\"_gray200BackgroundColor_11wj3_75\",\"gray300BackgroundColor\":\"_gray300BackgroundColor_11wj3_79\",\"gray700BackgroundColor\":\"_gray700BackgroundColor_11wj3_83\",\"gray800BackgroundColor\":\"_gray800BackgroundColor_11wj3_87\",\"gray900BackgroundColor\":\"_gray900BackgroundColor_11wj3_91\",\"orange100BackgroundColor\":\"_orange100BackgroundColor_11wj3_95\",\"orange200BackgroundColor\":\"_orange200BackgroundColor_11wj3_99\",\"orange300BackgroundColor\":\"_orange300BackgroundColor_11wj3_103\",\"orange700BackgroundColor\":\"_orange700BackgroundColor_11wj3_107\",\"orange800BackgroundColor\":\"_orange800BackgroundColor_11wj3_111\",\"orange900BackgroundColor\":\"_orange900BackgroundColor_11wj3_115\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_11wj3_119\",\"primary200BackgroundColor\":\"_primary200BackgroundColor_11wj3_123\",\"primary300BackgroundColor\":\"_primary300BackgroundColor_11wj3_127\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_11wj3_131\",\"primary800BackgroundColor\":\"_primary800BackgroundColor_11wj3_135\",\"primary900BackgroundColor\":\"_primary900BackgroundColor_11wj3_139\",\"success100BackgroundColor\":\"_success100BackgroundColor_11wj3_143\",\"success200BackgroundColor\":\"_success200BackgroundColor_11wj3_147\",\"success300BackgroundColor\":\"_success300BackgroundColor_11wj3_151\",\"success700BackgroundColor\":\"_success700BackgroundColor_11wj3_155\",\"success800BackgroundColor\":\"_success800BackgroundColor_11wj3_159\",\"success900BackgroundColor\":\"_success900BackgroundColor_11wj3_163\",\"purple100BackgroundColor\":\"_purple100BackgroundColor_11wj3_167\",\"purple200BackgroundColor\":\"_purple200BackgroundColor_11wj3_171\",\"purple300BackgroundColor\":\"_purple300BackgroundColor_11wj3_175\",\"purple700BackgroundColor\":\"_purple700BackgroundColor_11wj3_179\",\"purple800BackgroundColor\":\"_purple800BackgroundColor_11wj3_183\",\"purple900BackgroundColor\":\"_purple900BackgroundColor_11wj3_187\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_11wj3_191\",\"yellow100BackgroundColor\":\"_yellow100BackgroundColor_11wj3_195\",\"yellow200BackgroundColor\":\"_yellow200BackgroundColor_11wj3_199\",\"yellow300BackgroundColor\":\"_yellow300BackgroundColor_11wj3_203\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_11wj3_207\",\"yellow800BackgroundColor\":\"_yellow800BackgroundColor_11wj3_211\",\"yellow900BackgroundColor\":\"_yellow900BackgroundColor_11wj3_215\"}"],"mappings":";AAA2F,IAAO,wBAAQ,EAAC,gBAAe,yBAAwB,uBAAsB,gCAA+B,gBAAe,0BAAyB,gBAAe,0BAAyB,mBAAkB,6BAA4B,cAAa,wBAAuB,wBAAuB,kCAAiC,iCAAgC,2CAA0C,iCAAgC,2CAA0C,iCAAgC,2CAA0C,iCAAgC,2CAA0C,iCAAgC,2CAA0C,iCAAgC,2CAA0C,yBAAwB,mCAAkC,yBAAwB,mCAAkC,yBAAwB,mCAAkC,yBAAwB,mCAAkC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,4BAA2B,sCAAqC,4BAA2B,sCAAqC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,wBAAuB,mCAAkC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,sCAAqC;","names":[]}

package/dist/__chunks/CWMDGR2A.js

@@ -0,0 +1,127 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _HOUO3WV6js = require('./HOUO3WV6.js');
+
+
+var _VPGRPGP7js = require('./VPGRPGP7.js');
+
+
+var _PHVABKOKjs = require('./PHVABKOK.js');
+
+
+var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
+
+
+var _OGJDUOWPjs = require('./OGJDUOWP.js');
+
+// src/SelectList/SelectList.tsx
+
+
+
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// ../syntax-design-tokens/dist/js/index.js
+var ColorBaseDestructive700 = "#bd2a13";
+var ColorBaseGray800 = "#353535";
+
+// css-module:./SelectList.module.css#css-module
+var SelectList_module_default = { "selectContainer": "_selectContainer_efdzx_1", "opacityOverlay": "_opacityOverlay_efdzx_7", "outerTextContainer": "_outerTextContainer_efdzx_11", "selectWrapper": "_selectWrapper_efdzx_16", "selectBox": "_selectBox_efdzx_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_efdzx_38", "unselected": "_unselected_efdzx_42", "selected": "_selected_efdzx_46", "arrowIcon": "_arrowIcon_efdzx_50", "sm": "_sm_efdzx_64", "md": "_md_efdzx_69", "lg": "_lg_efdzx_74", "selectError": "_selectError_efdzx_79" };
+
+// src/SelectList/SelectList.tsx
+var _jsxruntime = require('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 = _react.useId.call(void 0, );
+  const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
+  const disabled = !isHydrated || disabledProp;
+  const selectId = id != null ? id : reactId;
+  const { isFocusVisible } = _OGJDUOWPjs.useFocusVisible.call(void 0, );
+  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _classnames2.default.call(void 0, SelectList_module_default.selectContainer, {
+        [SelectList_module_default.opacityOverlay]: disabled
+      }),
+      children: [
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PHVABKOKjs.Typography_default, { size: 100, color: "gray700", children: label }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "select",
+            {
+              id: selectId,
+              "data-testid": dataTestId,
+              disabled,
+              className: _classnames2.default.call(void 0, 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,
+                [_VPGRPGP7js.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__ */ _jsxruntime.jsx.call(void 0, "option", { disabled: true, value: placeholderText, children: placeholderText }),
+                children
+              ]
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              focusable: "false",
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              width: iconSize[size],
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _PHVABKOKjs.Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: errorText ? errorText : helperText
+          }
+        ) })
+      ]
+    }
+  );
+}
+SelectList.Option = _HOUO3WV6js.SelectOption_default;
+
+
+
+exports.SelectList = SelectList;
+//# sourceMappingURL=CWMDGR2A.js.map

package/dist/__chunks/CWMDGR2A.js.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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACGhB,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;;;ACpBmE,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;;;AFgHtkB,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","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, 16 Jan 2024 18:44:55 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#ffdcd6\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#bd2a13\";\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 = \"#ffe733\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_efdzx_1\",\"opacityOverlay\":\"_opacityOverlay_efdzx_7\",\"outerTextContainer\":\"_outerTextContainer_efdzx_11\",\"selectWrapper\":\"_selectWrapper_efdzx_16\",\"selectBox\":\"_selectBox_efdzx_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_efdzx_38\",\"unselected\":\"_unselected_efdzx_42\",\"selected\":\"_selected_efdzx_46\",\"arrowIcon\":\"_arrowIcon_efdzx_50\",\"sm\":\"_sm_efdzx_64\",\"md\":\"_md_efdzx_69\",\"lg\":\"_lg_efdzx_74\",\"selectError\":\"_selectError_efdzx_79\"}"]}