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

package/dist/__chunks/FMAN3GYO.js

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _E2XTXKKBjs = require('./E2XTXKKB.js');
+
+
+var _PHVABKOKjs = require('./PHVABKOK.js');
+
+// css-module:./Badge.module.css#css-module
+var Badge_module_default = { "icon": "_icon_1g9xb_1" };
+
+// src/Badge/Badge.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var textColorForBackgroundColor = (color) => {
+  switch (color) {
+    case "gray200":
+    case "yellow700":
+      return "gray900";
+    default:
+      return "white";
+  }
+};
+var Badge = ({
+  icon: Icon,
+  text,
+  color = "primary700"
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _E2XTXKKBjs.Box_default,
+  {
+    display: "inlineBlock",
+    paddingX: 2,
+    paddingY: 1,
+    rounding: "full",
+    backgroundColor: color,
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PHVABKOKjs.Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _E2XTXKKBjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+      Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _PHVABKOKjs.Typography_default,
+        {
+          color: textColorForBackgroundColor(color),
+          size: 100,
+          weight: "bold",
+          children: text
+        }
+      )
+    ] }) })
+  }
+);
+var Badge_default = Badge;
+
+
+
+exports.Badge_default = Badge_default;
+//# sourceMappingURL=FMAN3GYO.js.map

package/dist/__chunks/FMAN3GYO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"names":[],"mappings":";;;;;;;;AAAyF,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0DzH,SACW,KADX;AA3CN,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAgBE;AAAA,EAAC;AAAA;AAAA,IACC,SAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAS;AAAA,IACT,iBAAiB;AAAA,IAEjB,8BAAC,sBAAW,OAAO,4BAA4B,KAAK,GAAG,MAAM,KAC3D,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,cAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,MACvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,4BAA4B,KAAK;AAAA,UACxC,MAAM;AAAA,UACN,QAAO;AAAA,UAEN;AAAA;AAAA,MACH;AAAA,OACF,GACF;AAAA;AACF;AAGF,IAAO,gBAAQ","sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\n\nconst BadgeColor = [\n  \"gray200\",\n  \"gray900\",\n  \"destructive700\",\n  \"orange700\",\n  \"yellow700\",\n  \"success700\",\n  \"primary700\",\n  \"purple700\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof BadgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray200\":\n    case \"yellow700\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"primary700\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"primary700\"\n   */\n  color?: (typeof BadgeColor)[number];\n}): JSX.Element => (\n  <Box\n    display=\"inlineBlock\"\n    paddingX={2}\n    paddingY={1}\n    rounding=\"full\"\n    backgroundColor={color}\n  >\n    <Typography color={textColorForBackgroundColor(color)} size={100}>\n      <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n        {Icon && <Icon className={styles.icon} />}\n        <Typography\n          color={textColorForBackgroundColor(color)}\n          size={100}\n          weight=\"bold\"\n        >\n          {text}\n        </Typography>\n      </Box>\n    </Typography>\n  </Box>\n);\n\nexport default Badge;\n"]}

package/dist/__chunks/FOSMT7QJ.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _4EEVXYO7js = require('./4EEVXYO7.js');
+
+// src/Card/Card.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function Card({
+  children,
+  size = "sm",
+  "data-testid": dataTestId
+}) {
+  const sizeWidth = {
+    sm: 352,
+    lg: 744
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _4EEVXYO7js.Box_default,
+    {
+      rounding: "xl",
+      padding: 7,
+      smPadding: 9,
+      maxWidth: sizeWidth[size],
+      width: "100%",
+      backgroundColor: "white",
+      "data-testid": dataTestId,
+      children
+    }
+  );
+}
+
+
+
+exports.Card = Card;
+//# sourceMappingURL=FOSMT7QJ.js.map

package/dist/__chunks/FOSMT7QJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";;;;;AAuCI;AAXW,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AACjB,GAA0B;AACxB,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,UAAU,IAAI;AAAA,MACxB,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ","sourcesContent":["import Box from \"../Box/Box\";\n\n// note: only sm + lg size currently, when design decides on the medium size, we can use the \"size\" constant\nconst CardSizes = [\"sm\", \"lg\"] as const;\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card\n   *\n   * `sm`: 352px\n   * `lg`: 744px\n   *\n   * @defaultValue sm\n   */\n  size?: (typeof CardSizes)[number];\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  children,\n  size = \"sm\",\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  const sizeWidth = {\n    sm: 352,\n    lg: 744,\n  } as const;\n\n  return (\n    <Box\n      rounding=\"xl\"\n      padding={7}\n      smPadding={9}\n      maxWidth={sizeWidth[size]}\n      width=\"100%\"\n      backgroundColor=\"white\"\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"]}

package/dist/__chunks/FVU4BA3R.mjs

@@ -0,0 +1,15 @@
+// css-module:../Button.module.css#css-module
+var Button_module_default = { "button": "_button_raa9c_1", "buttonGap": "_buttonGap_raa9c_10", "fullWidth": "_fullWidth_raa9c_51", "sm": "_sm_raa9c_55", "md": "_md_raa9c_61", "lg": "_lg_raa9c_67", "icon": "_icon_raa9c_73", "smIcon": "_smIcon_raa9c_77", "mdIcon": "_mdIcon_raa9c_84", "lgIcon": "_lgIcon_raa9c_91", "secondaryBorder": "_secondaryBorder_raa9c_98", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_raa9c_102", "loading": "_loading_raa9c_116", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_raa9c_1", "loadingCircle": "_loadingCircle_raa9c_120" };
+
+// src/Button/constants/iconSize.ts
+var iconSize = {
+  ["sm"]: Button_module_default.smIcon,
+  ["md"]: Button_module_default.mdIcon,
+  ["lg"]: Button_module_default.lgIcon
+};
+var iconSize_default = iconSize;
+
+export {
+  iconSize_default
+};
+//# sourceMappingURL=FVU4BA3R.mjs.map

package/dist/__chunks/FVU4BA3R.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_raa9c_1\",\"buttonGap\":\"_buttonGap_raa9c_10\",\"fullWidth\":\"_fullWidth_raa9c_51\",\"sm\":\"_sm_raa9c_55\",\"md\":\"_md_raa9c_61\",\"lg\":\"_lg_raa9c_67\",\"icon\":\"_icon_raa9c_73\",\"smIcon\":\"_smIcon_raa9c_77\",\"mdIcon\":\"_mdIcon_raa9c_84\",\"lgIcon\":\"_lgIcon_raa9c_91\",\"secondaryBorder\":\"_secondaryBorder_raa9c_98\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_raa9c_102\",\"loading\":\"_loading_raa9c_116\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_raa9c_1\",\"loadingCircle\":\"_loadingCircle_raa9c_120\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\nexport default iconSize;\n"],"mappings":";AAA2F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,uBAAsB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACE/mB,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AACjB;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/FWN2BDEU.js

@@ -0,0 +1,7 @@
+// css-module:../Button/Button.module.css#css-module
+var Button_module_default = { "button": "_button_zdkdz_1", "buttonGap": "_buttonGap_zdkdz_9", "fullWidth": "_fullWidth_zdkdz_50", "sm": "_sm_zdkdz_54", "md": "_md_zdkdz_61", "lg": "_lg_zdkdz_68", "smCambio": "_smCambio_zdkdz_75", "mdCambio": "_mdCambio_zdkdz_81", "lgCambio": "_lgCambio_zdkdz_87", "xlCambio": "_xlCambio_zdkdz_93", "icon": "_icon_zdkdz_99", "smIcon": "_smIcon_zdkdz_103", "mdIcon": "_mdIcon_zdkdz_110", "lgIcon": "_lgIcon_zdkdz_117", "secondaryBorder": "_secondaryBorder_zdkdz_124", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_zdkdz_128", "cambioSecondaryBorder": "_cambioSecondaryBorder_zdkdz_132", "cambioSecondaryDestructiveBorder": "_cambioSecondaryDestructiveBorder_zdkdz_136", "cambioSecondarySuccessBorder": "_cambioSecondarySuccessBorder_zdkdz_140", "loading": "_loading_zdkdz_154", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_zdkdz_1", "loadingCircle": "_loadingCircle_zdkdz_158" };
+
+export {
+  Button_module_default
+};
+//# sourceMappingURL=FWN2BDEU.js.map

package/dist/__chunks/FWN2BDEU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Button/Button.module.css#css-module"],"sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_zdkdz_1\",\"buttonGap\":\"_buttonGap_zdkdz_9\",\"fullWidth\":\"_fullWidth_zdkdz_50\",\"sm\":\"_sm_zdkdz_54\",\"md\":\"_md_zdkdz_61\",\"lg\":\"_lg_zdkdz_68\",\"smCambio\":\"_smCambio_zdkdz_75\",\"mdCambio\":\"_mdCambio_zdkdz_81\",\"lgCambio\":\"_lgCambio_zdkdz_87\",\"xlCambio\":\"_xlCambio_zdkdz_93\",\"icon\":\"_icon_zdkdz_99\",\"smIcon\":\"_smIcon_zdkdz_103\",\"mdIcon\":\"_mdIcon_zdkdz_110\",\"lgIcon\":\"_lgIcon_zdkdz_117\",\"secondaryBorder\":\"_secondaryBorder_zdkdz_124\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_zdkdz_128\",\"cambioSecondaryBorder\":\"_cambioSecondaryBorder_zdkdz_132\",\"cambioSecondaryDestructiveBorder\":\"_cambioSecondaryDestructiveBorder_zdkdz_136\",\"cambioSecondarySuccessBorder\":\"_cambioSecondarySuccessBorder_zdkdz_140\",\"loading\":\"_loading_zdkdz_154\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_zdkdz_1\",\"loadingCircle\":\"_loadingCircle_zdkdz_158\"}"],"mappings":";AAA2F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,QAAO,kBAAiB,UAAS,qBAAoB,UAAS,qBAAoB,UAAS,qBAAoB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,yBAAwB,oCAAmC,oCAAmC,+CAA8C,gCAA+B,2CAA0C,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;","names":[]}

package/dist/__chunks/{7RN4IO67.cjs → FXOSIIU5.cjs}

@@ -6,4 +6,4 @@ var ColorBaseGray800 = "#353535";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
-//# sourceMappingURL=7RN4IO67.cjs.map
+//# sourceMappingURL=FXOSIIU5.cjs.map

package/dist/__chunks/FXOSIIU5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 01 Mar 2024 19:06:18 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 ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}

package/dist/__chunks/{TPP3XWDC.cjs → FYBK6EX3.cjs}

@@ -1,18 +1,18 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _LDFTT3OIcjs = require('./LDFTT3OI.cjs');
+var _VE23NE5Hcjs = require('./VE23NE5H.cjs');
 
 
-var _IJVFSOXUcjs = require('./IJVFSOXU.cjs');
+var _K3UWRTIPcjs = require('./K3UWRTIP.cjs');
 
 
-var _5WNFAQGYcjs = require('./5WNFAQGY.cjs');
+var _XPA5XWVAcjs = require('./XPA5XWVA.cjs');
 
 
-var _VMARHE5Bcjs = require('./VMARHE5B.cjs');
+var _W4BWNGOXcjs = require('./W4BWNGOX.cjs');
 
 
-var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
+var _P4BVQ554cjs = require('./P4BVQ554.cjs');
 
 
 var _RFHPSEBFcjs = require('./RFHPSEBF.cjs');
@@ -51,15 +51,15 @@ function XIcon({ color = "#000" }) {
 var AriaModalOverlay = _react.forwardRef.call(void 0, function AriaModalOverlay2(_a, ref) {
   var _b = _a, { children } = _b, otherProps = _I64JGYX7cjs.__objRest.call(void 0, _b, ["children"]);
   const className = _classnames2.default.call(void 0, [
-    _VMARHE5Bcjs.Box_module_default.box,
-    _VMARHE5Bcjs.Box_module_default.fixed,
-    _VMARHE5Bcjs.Box_module_default.box,
-    _VMARHE5Bcjs.Box_module_default.flex,
-    _VMARHE5Bcjs.Box_module_default.column,
-    _VMARHE5Bcjs.Box_module_default.alignItemscenter,
-    _VMARHE5Bcjs.Box_module_default.justifyContentcenter,
-    _5WNFAQGYcjs.padding_module_default.paddingX4,
-    _5WNFAQGYcjs.padding_module_default.paddingY4,
+    _W4BWNGOXcjs.Box_module_default.box,
+    _W4BWNGOXcjs.Box_module_default.fixed,
+    _W4BWNGOXcjs.Box_module_default.box,
+    _W4BWNGOXcjs.Box_module_default.flex,
+    _W4BWNGOXcjs.Box_module_default.column,
+    _W4BWNGOXcjs.Box_module_default.alignItemscenter,
+    _W4BWNGOXcjs.Box_module_default.justifyContentcenter,
+    _XPA5XWVAcjs.padding_module_default.paddingX4,
+    _XPA5XWVAcjs.padding_module_default.paddingY4,
     ModalDialog_module_default.modalOverlay
   ]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.ModalOverlay, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, { ref }, _reactaria.mergeProps.call(void 0, { className }, otherProps)), { children }));
@@ -67,7 +67,7 @@ var AriaModalOverlay = _react.forwardRef.call(void 0, function AriaModalOverlay2
 var AriaModal = _react.forwardRef.call(void 0, 
   function AriaModal2(_a, ref) {
     var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = _I64JGYX7cjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility"]);
-    const className = _classnames2.default.call(void 0, [_VMARHE5Bcjs.Box_module_default.box, ModalDialog_module_default.modal]);
+    const className = _classnames2.default.call(void 0, [_W4BWNGOXcjs.Box_module_default.box, ModalDialog_module_default.modal]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Modal, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, { ref }, _reactaria.mergeProps.call(void 0, { className }, otherProps)), { children: _reactariacomponents.composeRenderProps.call(void 0, 
       childrenProp,
       (children, { isEntering, isExiting }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
@@ -112,13 +112,13 @@ var ModalDialog = _react.forwardRef.call(void 0,
             "aria-label": accessibilityLabel,
             onChangeContentVisibility,
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _IJVFSOXUcjs.Dialog_default,
+              _K3UWRTIPcjs.Dialog_default,
               {
                 accessibilityLabel,
                 "data-testid": dataTestId,
                 children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _5SMR5MWYcjs.Box_default,
+                    _P4BVQ554cjs.Box_default,
                     {
                       position: "absolute",
                       padding: 2,
@@ -129,7 +129,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
                         }
                       },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _LDFTT3OIcjs.IconButton_default,
+                        _VE23NE5Hcjs.IconButton_default,
                         {
                           onClick: () => state.close(),
                           color: "tertiary",
@@ -156,4 +156,4 @@ var ModalDialog_default = ModalDialog;
 
 
 exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
-//# sourceMappingURL=TPP3XWDC.cjs.map
+//# sourceMappingURL=FYBK6EX3.cjs.map

package/dist/__chunks/{TPP3XWDC.cjs.map → FYBK6EX3.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/ModalDialog.tsx","css-module:./ModalDialog.module.css#css-module"],"names":["AriaModalOverlay","AriaModal","ModalDialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,OAEK;AACP;AAAA,EACE,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB;AAAA,OAEK;AACP,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;;;ACZsE,IAAO,6BAAQ,EAAC,gBAAe,yBAAwB,SAAQ,iBAAgB;;;ADwB1K,SA6DM,UA7DN,KA6DM,YA7DN;AAHN,SAAS,MAAM,EAAE,QAAQ,OAAO,GAA2C;AACzE,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;AAUO,IAAM,mBAAmB,WAG9B,SAASA,kBAAiB,IAA6B,KAAmB;AAAhD,eAAE,WA3C9B,IA2C4B,IAAe,uBAAf,IAAe,CAAb;AAC5B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,2BAAO;AAAA,EACT,CAAC;AACD,SACE,oBAAC,sDAAsB,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAxE,EACE,WACH;AAEJ,CAAC;AAaM,IAAM,YAAY;AAAA,EACvB,SAASC,WACP,IACA,KACc;AAFd,iBAAE,YAAU,cAAc,0BA5E9B,IA4EI,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,UAAM,YAAY,WAAW,CAAC,mBAAU,KAAK,2BAAO,KAAK,CAAC;AAC1D,WACE,oBAAC,+CAAe,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAjE,EACE;AAAA,MACC;AAAA,MACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,QACC;AAAA,SACH;AAAA,IAEJ,IACF;AAAA,EAEJ;AACF;AAkCA,IAAM,cAAc;AAAA,EAClB,SAASC,aAAY,OAAO,KAAmB;AAC7C,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe;AAAA,QACf,2BAA2B,CAAC;AAAA,QAC5B,aAAa;AAAA,QACb,QAAQ;AAAA,QACR;AAAA,QAEC,WAAC,EAAE,MAAM,MACR;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,eAAa;AAAA,gBAEb;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAS;AAAA,sBACT,SAAS;AAAA,sBACT,2BAA2B;AAAA,wBACzB,SAAS;AAAA,0BACP,KAAK;AAAA,0BACL,OAAO;AAAA,wBACT;AAAA,sBACF;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,SAAS,MAAM,MAAM,MAAM;AAAA,0BAC3B,OAAM;AAAA,0BACN,oBAAoB;AAAA,0BACpB,MAAM;AAAA;AAAA,sBACR;AAAA;AAAA,kBACF;AAAA,kBACC;AAAA;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,sBAAQ","sourcesContent":["import React, {\n  type ReactElement,\n  forwardRef,\n  type ComponentProps,\n} from \"react\";\nimport {\n  Modal as ReactAriaModal,\n  ModalOverlay as ReactAriaModalOverlay,\n  composeRenderProps,\n  type ModalOverlayProps as ReactAriaModalOverlayProps,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport { mergeProps } from \"react-aria\";\nimport Dialog, { type DialogProps } from \"./Dialog\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./ModalDialog.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Box from \"../Box/Box\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string; className?: 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\ntype AriaModalOverlayProps = {\n  \"data-testid\"?: string;\n} & ReactAriaModalOverlayProps;\n/**\n * AriaModalOverlay: This component extends ModalOverlay from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n */\nexport const AriaModalOverlay = forwardRef<\n  HTMLDivElement,\n  AriaModalOverlayProps\n>(function AriaModalOverlay({ children, ...otherProps }, ref): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    boxStyles.fixed,\n    boxStyles.box,\n    boxStyles.flex,\n    boxStyles.column,\n    boxStyles.alignItemscenter,\n    boxStyles.justifyContentcenter,\n    paddingStyles.paddingX4,\n    paddingStyles.paddingY4,\n    styles.modalOverlay,\n  ]);\n  return (\n    <ReactAriaModalOverlay ref={ref} {...mergeProps({ className }, otherProps)}>\n      {children}\n    </ReactAriaModalOverlay>\n  );\n});\n\ntype AriaModalProps = {\n  \"data-testid\"?: string;\n  /** Optional handler for change of visibility for overlaid content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n} & ComponentProps<typeof ReactAriaModal>;\n/**\n * AriaModal: This component extends Modal from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n *  - onContentChangeVisibility\n */\nexport const AriaModal = forwardRef<HTMLDivElement, AriaModalProps>(\n  function AriaModal(\n    { children: childrenProp, onChangeContentVisibility, ...otherProps },\n    ref,\n  ): ReactElement {\n    const className = classNames([boxStyles.box, styles.modal]);\n    return (\n      <ReactAriaModal ref={ref} {...mergeProps({ className }, otherProps)}>\n        {composeRenderProps(\n          childrenProp,\n          (children, { isEntering, isExiting }) => (\n            <>\n              <OverlayVisibility\n                isEntering={isEntering}\n                isExiting={isExiting}\n                onChange={onChangeContentVisibility}\n              />\n              {children}\n            </>\n          ),\n        )}\n      </ReactAriaModal>\n    );\n  },\n);\n\ntype ModalDialogProps = DialogProps & {\n  /** Whether dialog can be dismissed with click outside / Escape key  */\n  dismissable?: boolean;\n  /** render visible initially. */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of modal dialog externally */\n  open?: boolean;\n  /** Optional override for default dismiss button accessibility label */\n  accessibilityCloseLabel?: string;\n};\n\n/**\n * ModalDialog is a controlled component -- visibility is managed with the `open` prop.\n *\n * Example Usage:\n ```\n  <ModalDialog\n    open={open}\n    initialOpen\n    content={<Box>I am some content</Box>}\n    onChangeContentVisibility={(visible) => ...}\n  >\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </ModalDialog>\n ```\n */\nconst ModalDialog = forwardRef<HTMLDivElement, ModalDialogProps>(\n  function ModalDialog(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      accessibilityLabel,\n      children,\n      dismissable = true,\n      accessibilityCloseLabel = \"Dismiss\",\n      initialOpen,\n      onChangeContentVisibility,\n      onOpenChange,\n      open,\n    } = props;\n\n    return (\n      <AriaModalOverlay\n        isDismissable={dismissable}\n        isKeyboardDismissDisabled={!dismissable}\n        defaultOpen={initialOpen}\n        isOpen={open}\n        onOpenChange={onOpenChange}\n      >\n        {({ state }) => (\n          <AriaModal\n            ref={ref}\n            aria-label={accessibilityLabel}\n            onChangeContentVisibility={onChangeContentVisibility}\n          >\n            <Dialog\n              accessibilityLabel={accessibilityLabel}\n              data-testid={dataTestId}\n            >\n              <Box\n                position=\"absolute\"\n                padding={2}\n                dangerouslySetInlineStyle={{\n                  __style: {\n                    top: \"0\",\n                    right: \"0\",\n                  },\n                }}\n              >\n                <IconButton\n                  onClick={() => state.close()}\n                  color=\"tertiary\"\n                  accessibilityLabel={accessibilityCloseLabel}\n                  icon={XIcon}\n                />\n              </Box>\n              {children}\n            </Dialog>\n          </AriaModal>\n        )}\n      </AriaModalOverlay>\n    );\n  },\n);\n\nexport default ModalDialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/ModalDialog.module.css\"; export default {\"modalOverlay\":\"_modalOverlay_1fy5w_1\",\"modal\":\"_modal_1fy5w_1\"}"]}
+{"version":3,"sources":["../../src/Dialog/ModalDialog.tsx","css-module:./ModalDialog.module.css#css-module"],"names":["AriaModalOverlay","AriaModal","ModalDialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,OAEK;AACP;AAAA,EACE,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB;AAAA,OAEK;AACP,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;;;ACZqE,IAAO,6BAAQ,EAAC,gBAAe,yBAAwB,SAAQ,iBAAgB;;;ADwBzK,SA6DM,UA7DN,KA6DM,YA7DN;AAHN,SAAS,MAAM,EAAE,QAAQ,OAAO,GAA2C;AACzE,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;AAUO,IAAM,mBAAmB,WAG9B,SAASA,kBAAiB,IAA6B,KAAmB;AAAhD,eAAE,WA3C9B,IA2C4B,IAAe,uBAAf,IAAe,CAAb;AAC5B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,2BAAO;AAAA,EACT,CAAC;AACD,SACE,oBAAC,sDAAsB,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAxE,EACE,WACH;AAEJ,CAAC;AAaM,IAAM,YAAY;AAAA,EACvB,SAASC,WACP,IACA,KACc;AAFd,iBAAE,YAAU,cAAc,0BA5E9B,IA4EI,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,UAAM,YAAY,WAAW,CAAC,mBAAU,KAAK,2BAAO,KAAK,CAAC;AAC1D,WACE,oBAAC,+CAAe,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAjE,EACE;AAAA,MACC;AAAA,MACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,QACC;AAAA,SACH;AAAA,IAEJ,IACF;AAAA,EAEJ;AACF;AAkCA,IAAM,cAAc;AAAA,EAClB,SAASC,aAAY,OAAO,KAAmB;AAC7C,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe;AAAA,QACf,2BAA2B,CAAC;AAAA,QAC5B,aAAa;AAAA,QACb,QAAQ;AAAA,QACR;AAAA,QAEC,WAAC,EAAE,MAAM,MACR;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,eAAa;AAAA,gBAEb;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAS;AAAA,sBACT,SAAS;AAAA,sBACT,2BAA2B;AAAA,wBACzB,SAAS;AAAA,0BACP,KAAK;AAAA,0BACL,OAAO;AAAA,wBACT;AAAA,sBACF;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,SAAS,MAAM,MAAM,MAAM;AAAA,0BAC3B,OAAM;AAAA,0BACN,oBAAoB;AAAA,0BACpB,MAAM;AAAA;AAAA,sBACR;AAAA;AAAA,kBACF;AAAA,kBACC;AAAA;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,sBAAQ","sourcesContent":["import React, {\n  type ReactElement,\n  forwardRef,\n  type ComponentProps,\n} from \"react\";\nimport {\n  Modal as ReactAriaModal,\n  ModalOverlay as ReactAriaModalOverlay,\n  composeRenderProps,\n  type ModalOverlayProps as ReactAriaModalOverlayProps,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport { mergeProps } from \"react-aria\";\nimport Dialog, { type DialogProps } from \"./Dialog\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./ModalDialog.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Box from \"../Box/Box\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string; className?: 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\ntype AriaModalOverlayProps = {\n  \"data-testid\"?: string;\n} & ReactAriaModalOverlayProps;\n/**\n * AriaModalOverlay: This component extends ModalOverlay from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n */\nexport const AriaModalOverlay = forwardRef<\n  HTMLDivElement,\n  AriaModalOverlayProps\n>(function AriaModalOverlay({ children, ...otherProps }, ref): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    boxStyles.fixed,\n    boxStyles.box,\n    boxStyles.flex,\n    boxStyles.column,\n    boxStyles.alignItemscenter,\n    boxStyles.justifyContentcenter,\n    paddingStyles.paddingX4,\n    paddingStyles.paddingY4,\n    styles.modalOverlay,\n  ]);\n  return (\n    <ReactAriaModalOverlay ref={ref} {...mergeProps({ className }, otherProps)}>\n      {children}\n    </ReactAriaModalOverlay>\n  );\n});\n\ntype AriaModalProps = {\n  \"data-testid\"?: string;\n  /** Optional handler for change of visibility for overlaid content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n} & ComponentProps<typeof ReactAriaModal>;\n/**\n * AriaModal: This component extends Modal from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n *  - onContentChangeVisibility\n */\nexport const AriaModal = forwardRef<HTMLDivElement, AriaModalProps>(\n  function AriaModal(\n    { children: childrenProp, onChangeContentVisibility, ...otherProps },\n    ref,\n  ): ReactElement {\n    const className = classNames([boxStyles.box, styles.modal]);\n    return (\n      <ReactAriaModal ref={ref} {...mergeProps({ className }, otherProps)}>\n        {composeRenderProps(\n          childrenProp,\n          (children, { isEntering, isExiting }) => (\n            <>\n              <OverlayVisibility\n                isEntering={isEntering}\n                isExiting={isExiting}\n                onChange={onChangeContentVisibility}\n              />\n              {children}\n            </>\n          ),\n        )}\n      </ReactAriaModal>\n    );\n  },\n);\n\ntype ModalDialogProps = DialogProps & {\n  /** Whether dialog can be dismissed with click outside / Escape key  */\n  dismissable?: boolean;\n  /** render visible initially. */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of modal dialog externally */\n  open?: boolean;\n  /** Optional override for default dismiss button accessibility label */\n  accessibilityCloseLabel?: string;\n};\n\n/**\n * ModalDialog is a controlled component -- visibility is managed with the `open` prop.\n *\n * Example Usage:\n ```\n  <ModalDialog\n    open={open}\n    initialOpen\n    content={<Box>I am some content</Box>}\n    onChangeContentVisibility={(visible) => ...}\n  >\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </ModalDialog>\n ```\n */\nconst ModalDialog = forwardRef<HTMLDivElement, ModalDialogProps>(\n  function ModalDialog(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      accessibilityLabel,\n      children,\n      dismissable = true,\n      accessibilityCloseLabel = \"Dismiss\",\n      initialOpen,\n      onChangeContentVisibility,\n      onOpenChange,\n      open,\n    } = props;\n\n    return (\n      <AriaModalOverlay\n        isDismissable={dismissable}\n        isKeyboardDismissDisabled={!dismissable}\n        defaultOpen={initialOpen}\n        isOpen={open}\n        onOpenChange={onOpenChange}\n      >\n        {({ state }) => (\n          <AriaModal\n            ref={ref}\n            aria-label={accessibilityLabel}\n            onChangeContentVisibility={onChangeContentVisibility}\n          >\n            <Dialog\n              accessibilityLabel={accessibilityLabel}\n              data-testid={dataTestId}\n            >\n              <Box\n                position=\"absolute\"\n                padding={2}\n                dangerouslySetInlineStyle={{\n                  __style: {\n                    top: \"0\",\n                    right: \"0\",\n                  },\n                }}\n              >\n                <IconButton\n                  onClick={() => state.close()}\n                  color=\"tertiary\"\n                  accessibilityLabel={accessibilityCloseLabel}\n                  icon={XIcon}\n                />\n              </Box>\n              {children}\n            </Dialog>\n          </AriaModal>\n        )}\n      </AriaModalOverlay>\n    );\n  },\n);\n\nexport default ModalDialog;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Dialog/ModalDialog.module.css\"; export default {\"modalOverlay\":\"_modalOverlay_1fy5w_1\",\"modal\":\"_modal_1fy5w_1\"}"]}

package/dist/__chunks/FZO6U2EP.mjs

@@ -0,0 +1,61 @@
+import {
+  Avatar_default
+} from "./WSCARST6.mjs";
+import {
+  Box_default
+} from "./HJYCSDLB.mjs";
+
+// src/AvatarGroup/AvatarGroupAvatar.tsx
+import { jsx } from "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__ */ jsx(
+    Box_default,
+    {
+      position: "relative",
+      dangerouslySetInlineStyle: {
+        __style: {
+          zIndex,
+          marginInlineEnd: orientation === "standard" ? sizeToMargin[size] : 0,
+          marginInlineStart: orientation === "reverse" ? sizeToMargin[size] : 0
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        Box_default,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "white",
+          rounding: "full",
+          children: /* @__PURE__ */ jsx(
+            Avatar_default,
+            {
+              src,
+              accessibilityLabel,
+              size,
+              icon
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+export {
+  AvatarGroupAvatar
+};
+//# sourceMappingURL=FZO6U2EP.mjs.map

package/dist/__chunks/FZO6U2EP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AvatarGroup/AvatarGroupAvatar.tsx"],"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"],"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;","names":[]}

package/dist/__chunks/GAMU7S2F.js

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _E2XTXKKBjs = require('./E2XTXKKB.js');
+
+
+var _PHVABKOKjs = require('./PHVABKOK.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, _E2XTXKKBjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _PHVABKOKjs.Typography_default,
+            {
+              size: typographySize[size],
+              color: selected ? "white" : "gray900",
+              children: text
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Chip_default = Chip;
+
+
+
+exports.Chip_default = Chip_default;
+//# sourceMappingURL=GAMU7S2F.js.map

package/dist/__chunks/GAMU7S2F.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;;;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","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\"}"]}

package/dist/__chunks/GD77DL2Y.mjs

@@ -0,0 +1,106 @@
+import {
+  Focus_module_default
+} from "./MQPPALTP.mjs";
+import {
+  useFocusVisible
+} from "./FCX7QDZS.mjs";
+import {
+  Typography_default
+} from "./WIDP7NHD.mjs";
+
+// src/Checkbox/Checkbox.tsx
+import { useState } from "react";
+import classNames from "classnames";
+
+// css-module:./Checkbox.module.css#css-module
+var Checkbox_module_default = { "mainContainer": "_mainContainer_1omm6_1", "inputOverlay": "_inputOverlay_1omm6_8", "checkbox": "_checkbox_1omm6_14", "disabled": "_disabled_1omm6_22", "cursorDisabled": "_cursorDisabled_1omm6_26", "cursorEnabled": "_cursorEnabled_1omm6_30", "uncheckedBox": "_uncheckedBox_1omm6_34", "uncheckedBorder": "_uncheckedBorder_1omm6_38", "uncheckedErrorBorder": "_uncheckedErrorBorder_1omm6_42", "checkedBox": "_checkedBox_1omm6_46", "checkedNonError": "_checkedNonError_1omm6_50", "checkedError": "_checkedError_1omm6_54", "sm": "_sm_1omm6_58", "md": "_md_1omm6_64" };
+
+// src/Checkbox/Checkbox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var typographySize = {
+  sm: 100,
+  md: 200
+};
+var iconWidth = {
+  sm: 12,
+  md: 20
+};
+var Checkbox = ({
+  checked = false,
+  "data-testid": dataTestId,
+  disabled = false,
+  size = "md",
+  label,
+  error = false,
+  onChange
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const { isFocusVisible } = useFocusVisible();
+  const checkboxStyling = classNames(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
+  const uncheckedStyling = classNames(checkboxStyling, Checkbox_module_default.uncheckedBox, {
+    [Checkbox_module_default.uncheckedBorder]: !error,
+    [Checkbox_module_default.uncheckedErrorBorder]: error,
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
+  });
+  const checkedStyling = classNames(checkboxStyling, Checkbox_module_default.checkedBox, {
+    [Checkbox_module_default.checkedNonError]: !error,
+    [Checkbox_module_default.checkedError]: error,
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
+  });
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: classNames(
+        Checkbox_module_default.mainContainer,
+        Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
+        {
+          [Checkbox_module_default.disabled]: disabled
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#fff",
+            d: "m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "data-testid": dataTestId,
+            type: "checkbox",
+            className: classNames(
+              Checkbox_module_default.inputOverlay,
+              Checkbox_module_default[size],
+              Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`]
+            ),
+            checked,
+            onChange,
+            disabled,
+            onFocus: () => {
+              setIsFocused(true);
+            },
+            onBlur: () => {
+              setIsFocused(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography_default,
+          {
+            size: typographySize[size],
+            color: error ? "destructive-primary" : "gray800",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var Checkbox_default = Checkbox;
+
+export {
+  Checkbox_default
+};
+//# sourceMappingURL=GD77DL2Y.mjs.map

package/dist/__chunks/GD77DL2Y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n}): ReactElement => {\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  const checkboxStyling = classNames(styles.checkbox, styles[size]);\n  const uncheckedStyling = classNames(checkboxStyling, styles.uncheckedBox, {\n    [styles.uncheckedBorder]: !error,\n    [styles.uncheckedErrorBorder]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n  const checkedStyling = classNames(checkboxStyling, styles.checkedBox, {\n    [styles.checkedNonError]: !error,\n    [styles.checkedError]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div className={checked ? checkedStyling : uncheckedStyling}>\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              fill=\"#fff\"\n              d=\"m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray800\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1omm6_1\",\"inputOverlay\":\"_inputOverlay_1omm6_8\",\"checkbox\":\"_checkbox_1omm6_14\",\"disabled\":\"_disabled_1omm6_22\",\"cursorDisabled\":\"_cursorDisabled_1omm6_26\",\"cursorEnabled\":\"_cursorEnabled_1omm6_30\",\"uncheckedBox\":\"_uncheckedBox_1omm6_34\",\"uncheckedBorder\":\"_uncheckedBorder_1omm6_38\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_1omm6_42\",\"checkedBox\":\"_checkedBox_1omm6_46\",\"checkedNonError\":\"_checkedNonError_1omm6_50\",\"checkedError\":\"_checkedError_1omm6_54\",\"sm\":\"_sm_1omm6_58\",\"md\":\"_md_1omm6_64\"}"],"mappings":";;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDwE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,gBAAe,0BAAyB,mBAAkB,6BAA4B,wBAAuB,kCAAiC,cAAa,wBAAuB,mBAAkB,6BAA4B,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADqFhoB,SAYQ,KAZR;AA9EJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,QAAM,kBAAkB,WAAW,wBAAO,UAAU,wBAAO,IAAI,CAAC;AAChE,QAAM,mBAAmB,WAAW,iBAAiB,wBAAO,cAAc;AAAA,IACxE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,oBAAoB,GAAG;AAAA,IAC/B,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AACD,QAAM,iBAAiB,WAAW,iBAAiB,wBAAO,YAAY;AAAA,IACpE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,YAAY,GAAG;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,UAAU,iBAAiB,kBACxC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACH,GACH,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}