@cambly/syntax-core 9.6.0 → 9.7.0

package/dist/__chunks/AGAHNSZM.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 _2O6FDRTFjs = require('./2O6FDRTF.js');
+
+
+var _F3ZST4RLjs = require('./F3ZST4RL.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 = "#d32a4b";
+var ColorBaseGray800 = "#353535";
+
+// css-module:./SelectList.module.css#css-module
+var SelectList_module_default = { "selectContainer": "_selectContainer_3ifov_1", "opacityOverlay": "_opacityOverlay_3ifov_7", "outerTextContainer": "_outerTextContainer_3ifov_11", "selectWrapper": "_selectWrapper_3ifov_16", "selectBox": "_selectBox_3ifov_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_3ifov_37", "unselected": "_unselected_3ifov_42", "selected": "_selected_3ifov_46", "arrowIcon": "_arrowIcon_3ifov_50", "sm": "_sm_3ifov_64", "md": "_md_3ifov_70", "lg": "_lg_3ifov_76", "selectError": "_selectError_3ifov_82" };
+
+// src/SelectList/SelectList.tsx
+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, _F3ZST4RLjs.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,
+                [_2O6FDRTFjs.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, 
+          _F3ZST4RLjs.Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: errorText ? errorText : helperText
+          }
+        ) })
+      ]
+    }
+  );
+}
+SelectList.Option = _HOUO3WV6js.SelectOption_default;
+
+
+
+exports.SelectList = SelectList;
+//# sourceMappingURL=AGAHNSZM.js.map

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

package/dist/__chunks/AMBZXKUQ.mjs

@@ -0,0 +1,12 @@
+// src/Button/constants/textVariant.ts
+var textVariant = {
+  ["sm"]: 100,
+  ["md"]: 200,
+  ["lg"]: 300
+};
+var textVariant_default = textVariant;
+
+export {
+  textVariant_default
+};
+//# sourceMappingURL=AMBZXKUQ.mjs.map

package/dist/__chunks/AMBZXKUQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/constants/textVariant.ts"],"sourcesContent":["const textVariant = {\n  [\"sm\"]: 100,\n  [\"md\"]: 200,\n  [\"lg\"]: 300,\n} as const;\n\nexport default textVariant;\n"],"mappings":";AAAA,IAAM,cAAc;AAAA,EAClB,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AACV;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/__chunks/BCWLWS7W.mjs

@@ -0,0 +1,74 @@
+import {
+  colors_module_default
+} from "./FWVHWU47.mjs";
+
+// src/Typography/Typography.tsx
+import classNames from "classnames";
+
+// css-module:./Typography.module.css#css-module
+var Typography_module_default = { "typography": "_typography_1vnry_1", "size100": "_size100_1vnry_8", "size200": "_size200_1vnry_12", "size300": "_size300_1vnry_16", "size500": "_size500_1vnry_20", "size600": "_size600_1vnry_24", "size700": "_size700_1vnry_28", "size800": "_size800_1vnry_32", "center": "_center_1vnry_37", "forceLeft": "_forceLeft_1vnry_41", "forceRight": "_forceRight_1vnry_45", "start": "_start_1vnry_49", "end": "_end_1vnry_53", "bold": "_bold_1vnry_58", "regular": "_regular_1vnry_62", "interactive": "_interactive_1vnry_66", "semiBold": "_semiBold_1vnry_70", "heavy": "_heavy_1vnry_74", "underline": "_underline_1vnry_78", "inline": "_inline_1vnry_82", "uppercase": "_uppercase_1vnry_86", "lineClamp": "_lineClamp_1vnry_90" };
+
+// src/Typography/Typography.tsx
+import { jsx } from "react/jsx-runtime";
+function textColor(color) {
+  switch (color) {
+    case "gray700":
+      return colors_module_default.gray700Color;
+    case "white":
+      return colors_module_default.whiteColor;
+    case "inherit":
+      return colors_module_default.inheritColor;
+    case "primary":
+      return colors_module_default.primary700Color;
+    case "destructive-primary":
+      return colors_module_default.destructive700Color;
+    case "success":
+      return colors_module_default.success700Color;
+    default:
+      return colors_module_default.gray900Color;
+  }
+}
+var Typography = ({
+  align = "start",
+  as = "div",
+  children,
+  color = "gray900",
+  "data-testid": dataTestId,
+  inline = false,
+  lineClamp = void 0,
+  size = 200,
+  tooltip,
+  transform = "none",
+  underline = false,
+  weight = "regular"
+}) => {
+  const Tag = as;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: classNames(
+        Typography_module_default.typography,
+        Typography_module_default[align],
+        Typography_module_default[weight],
+        textColor(color),
+        inline && Typography_module_default.inline,
+        Typography_module_default[`size${size}`],
+        transform === "uppercase" && Typography_module_default.uppercase,
+        underline && Typography_module_default.underline,
+        lineClamp != null && Typography_module_default.lineClamp
+      ),
+      "data-testid": dataTestId,
+      style: {
+        WebkitLineClamp: lineClamp
+      },
+      title: tooltip,
+      children
+    }
+  );
+};
+var Typography_default = Typography;
+
+export {
+  Typography_default
+};
+//# sourceMappingURL=BCWLWS7W.mjs.map

package/dist/__chunks/BCWLWS7W.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.gray700Color;\n    case \"white\":\n      return colorStyles.whiteColor;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"primary\":\n      return colorStyles.primary700Color;\n    case \"destructive-primary\":\n      return colorStyles.destructive700Color;\n    case \"success\":\n      return colorStyles.success700Color;\n    default:\n      return colorStyles.gray900Color;\n  }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = ({\n  align = \"start\",\n  as = \"div\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  inline = false,\n  lineClamp = undefined,\n  size = 200,\n  tooltip,\n  transform = \"none\",\n  underline = false,\n  weight = \"regular\",\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"div\"\n   */\n  as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the text\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether the text should flow inline with other elements.\n   *\n   * @defaultValue false\n   */\n  inline?: boolean;\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text.\n   *\n   * * `100`: 12px\n   * * `200`: 14px\n   * * `300`: 16px\n   * * `500`: 20px\n   * * `600`: 28px\n   * * `700`: 40px\n   * * `800`: 64px\n   *\n   * @defaultValue 200\n   */\n  size?: 100 | 200 | 300 | 500 | 600 | 700 | 800;\n  /**\n   * The tooltip to be displayed when the user hovers the text\n   */\n  tooltip?: string;\n  /**\n   * Whether the text should be transformed to uppercase.\n   *\n   * @defaultValue \"none\"\n   */\n  transform?: \"none\" | \"uppercase\";\n  /**\n   * Whether the text has an underline.\n   *\n   * @defaultValue false\n   */\n  underline?: boolean;\n  /**\n   * Indicates the boldness of the text.\n   *\n   * @defaultValue \"regular\"\n   */\n  weight?: \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\";\n}): ReactElement => {\n  const Tag = as;\n\n  return (\n    <Tag\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_1vnry_1\",\"size100\":\"_size100_1vnry_8\",\"size200\":\"_size200_1vnry_12\",\"size300\":\"_size300_1vnry_16\",\"size500\":\"_size500_1vnry_20\",\"size600\":\"_size600_1vnry_24\",\"size700\":\"_size700_1vnry_28\",\"size800\":\"_size800_1vnry_32\",\"center\":\"_center_1vnry_37\",\"forceLeft\":\"_forceLeft_1vnry_41\",\"forceRight\":\"_forceRight_1vnry_45\",\"start\":\"_start_1vnry_49\",\"end\":\"_end_1vnry_53\",\"bold\":\"_bold_1vnry_58\",\"regular\":\"_regular_1vnry_62\",\"interactive\":\"_interactive_1vnry_66\",\"semiBold\":\"_semiBold_1vnry_70\",\"heavy\":\"_heavy_1vnry_74\",\"underline\":\"_underline_1vnry_78\",\"inline\":\"_inline_1vnry_82\",\"uppercase\":\"_uppercase_1vnry_86\",\"lineClamp\":\"_lineClamp_1vnry_90\"}"],"mappings":";;;;;AAAA,OAAO,gBAAgB;;;ACA6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,UAAS,oBAAmB,aAAY,uBAAsB,cAAa,wBAAuB,SAAQ,mBAAkB,OAAM,iBAAgB,QAAO,kBAAiB,WAAU,qBAAoB,eAAc,yBAAwB,YAAW,sBAAqB,SAAQ,mBAAkB,aAAY,uBAAsB,UAAS,oBAAmB,aAAY,uBAAsB,aAAY,sBAAqB;;;ADwH7wB;AAlHJ,SAAS,UAAU,OAAuC;AACxD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,MA2EoB;AAClB,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,MAC9B;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/__chunks/BJXYKZMK.mjs

@@ -0,0 +1,53 @@
+import {
+  Box_default
+} from "./LKQ7PJ4S.mjs";
+import {
+  Typography_default
+} from "./BCWLWS7W.mjs";
+
+// css-module:./Badge.module.css#css-module
+var Badge_module_default = { "icon": "_icon_1g9xb_1" };
+
+// src/Badge/Badge.tsx
+import { jsx, jsxs } from "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__ */ jsx(
+  Box_default,
+  {
+    display: "inlineBlock",
+    paddingX: 2,
+    paddingY: 1,
+    rounding: "full",
+    backgroundColor: color,
+    children: /* @__PURE__ */ jsx(Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ jsxs(Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: Badge_module_default.icon }),
+      /* @__PURE__ */ jsx(
+        Typography_default,
+        {
+          color: textColorForBackgroundColor(color),
+          size: 100,
+          weight: "bold",
+          children: text
+        }
+      )
+    ] }) })
+  }
+);
+var Badge_default = Badge;
+
+export {
+  Badge_default
+};
+//# sourceMappingURL=BJXYKZMK.mjs.map

package/dist/__chunks/BJXYKZMK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/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"],"mappings":";;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0D1H,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;","names":[]}

package/dist/__chunks/BSFWQWVJ.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _F3ZST4RLjs = require('./F3ZST4RL.js');
+
+// src/Heading/Heading.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Heading = ({
+  align = "start",
+  as = "h1",
+  children,
+  color = "gray900",
+  "data-testid": dataTestId,
+  lineClamp,
+  size = 500
+}) => {
+  const weight = [700, 800].includes(size) ? "heavy" : "bold";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _F3ZST4RLjs.Typography_default,
+    {
+      align,
+      as,
+      color,
+      "data-testid": dataTestId,
+      lineClamp,
+      size,
+      weight,
+      children
+    }
+  );
+};
+var Heading_default = Heading;
+
+
+
+exports.Heading_default = Heading_default;
+//# sourceMappingURL=BSFWQWVJ.js.map

package/dist/__chunks/BSFWQWVJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";;;;;AA8DI;AAvDJ,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;AAAA,EACA,OAAO;AACT,MA4CoB;AAClB,QAAM,SAAS,CAAC,KAAK,GAAG,EAAE,SAAS,IAAI,IAAI,UAAU;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ","sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n  align = \"start\",\n  as = \"h1\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  lineClamp,\n  size = 500,\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"h1\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the text.\n   */\n  \"data-testid\"?: string;\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text.\n   *\n   * * `500`: 20px\n   * * `600`: 28px\n   * * `700`: 40px\n   * * `800`: 64px\n   *\n   * @defaultValue 500\n   */\n  size?: 500 | 600 | 700 | 800;\n}): ReactElement => {\n  const weight = [700, 800].includes(size) ? \"heavy\" : \"bold\";\n  return (\n    <Typography\n      align={align}\n      as={as}\n      color={color}\n      data-testid={dataTestId}\n      lineClamp={lineClamp}\n      size={size}\n      weight={weight}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"]}

package/dist/__chunks/BSWWGQAS.js

@@ -0,0 +1,111 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _2O6FDRTFjs = require('./2O6FDRTF.js');
+
+
+var _F3ZST4RLjs = require('./F3ZST4RL.js');
+
+
+var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
+
+
+var _OGJDUOWPjs = require('./OGJDUOWP.js');
+
+// src/Checkbox/Checkbox.tsx
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:./Checkbox.module.css#css-module
+var Checkbox_module_default = { "mainContainer": "_mainContainer_an7al_1", "inputOverlay": "_inputOverlay_an7al_9", "checkbox": "_checkbox_an7al_17", "disabled": "_disabled_an7al_25", "cursorDisabled": "_cursorDisabled_an7al_29", "cursorEnabled": "_cursorEnabled_an7al_33", "uncheckedBox": "_uncheckedBox_an7al_37", "uncheckedBorder": "_uncheckedBorder_an7al_41", "uncheckedErrorBorder": "_uncheckedErrorBorder_an7al_45", "checkedBox": "_checkedBox_an7al_49", "checkedNonError": "_checkedNonError_an7al_53", "checkedError": "_checkedError_an7al_57", "sm": "_sm_an7al_61", "md": "_md_an7al_67" };
+
+// src/Checkbox/Checkbox.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var typographySize = {
+  sm: 100,
+  md: 200
+};
+var iconWidth = {
+  sm: 12,
+  md: 20
+};
+var Checkbox = ({
+  checked = false,
+  "data-testid": dataTestId,
+  disabled: disabledProp = false,
+  size = "md",
+  label,
+  error = false,
+  onChange
+}) => {
+  const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
+  const disabled = !isHydrated || disabledProp;
+  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+  const { isFocusVisible } = _OGJDUOWPjs.useFocusVisible.call(void 0, );
+  const checkboxStyling = _classnames2.default.call(void 0, Checkbox_module_default.checkbox, Checkbox_module_default[size]);
+  const uncheckedStyling = _classnames2.default.call(void 0, checkboxStyling, Checkbox_module_default.uncheckedBox, {
+    [Checkbox_module_default.uncheckedBorder]: !error,
+    [Checkbox_module_default.uncheckedErrorBorder]: error,
+    [_2O6FDRTFjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
+  });
+  const checkedStyling = _classnames2.default.call(void 0, checkboxStyling, Checkbox_module_default.checkedBox, {
+    [Checkbox_module_default.checkedNonError]: !error,
+    [Checkbox_module_default.checkedError]: error,
+    [_2O6FDRTFjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
+  });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "label",
+    {
+      className: _classnames2.default.call(void 0, 
+        Checkbox_module_default.mainContainer,
+        Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
+        {
+          [Checkbox_module_default.disabled]: disabled
+        }
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "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__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            "data-testid": dataTestId,
+            type: "checkbox",
+            className: _classnames2.default.call(void 0, 
+              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__ */ _jsxruntime.jsx.call(void 0, 
+          _F3ZST4RLjs.Typography_default,
+          {
+            size: typographySize[size],
+            color: error ? "destructive-primary" : "gray800",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var Checkbox_default = Checkbox;
+
+
+
+exports.Checkbox_default = Checkbox_default;
+//# sourceMappingURL=BSWWGQAS.js.map

package/dist/__chunks/BSWWGQAS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,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;;;ADwFjoB,SAYQ,KAZR;AAhFJ,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,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,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","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\";\nimport useIsHydrated from \"../useIsHydrated\";\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: disabledProp = 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 isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_an7al_1\",\"inputOverlay\":\"_inputOverlay_an7al_9\",\"checkbox\":\"_checkbox_an7al_17\",\"disabled\":\"_disabled_an7al_25\",\"cursorDisabled\":\"_cursorDisabled_an7al_29\",\"cursorEnabled\":\"_cursorEnabled_an7al_33\",\"uncheckedBox\":\"_uncheckedBox_an7al_37\",\"uncheckedBorder\":\"_uncheckedBorder_an7al_41\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_an7al_45\",\"checkedBox\":\"_checkedBox_an7al_49\",\"checkedNonError\":\"_checkedNonError_an7al_53\",\"checkedError\":\"_checkedError_an7al_57\",\"sm\":\"_sm_an7al_61\",\"md\":\"_md_an7al_67\"}"]}

package/dist/__chunks/BWTLHCW3.mjs

@@ -0,0 +1,111 @@
+import {
+  Focus_module_default
+} from "./WJDAVT5R.mjs";
+import {
+  Typography_default
+} from "./BCWLWS7W.mjs";
+import {
+  useIsHydrated
+} from "./XFKGXL73.mjs";
+import {
+  useFocusVisible
+} from "./FCX7QDZS.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_an7al_1", "inputOverlay": "_inputOverlay_an7al_9", "checkbox": "_checkbox_an7al_17", "disabled": "_disabled_an7al_25", "cursorDisabled": "_cursorDisabled_an7al_29", "cursorEnabled": "_cursorEnabled_an7al_33", "uncheckedBox": "_uncheckedBox_an7al_37", "uncheckedBorder": "_uncheckedBorder_an7al_41", "uncheckedErrorBorder": "_uncheckedErrorBorder_an7al_45", "checkedBox": "_checkedBox_an7al_49", "checkedNonError": "_checkedNonError_an7al_53", "checkedError": "_checkedError_an7al_57", "sm": "_sm_an7al_61", "md": "_md_an7al_67" };
+
+// 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: disabledProp = false,
+  size = "md",
+  label,
+  error = false,
+  onChange
+}) => {
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  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=BWTLHCW3.mjs.map

package/dist/__chunks/BWTLHCW3.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\";\nimport useIsHydrated from \"../useIsHydrated\";\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: disabledProp = 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 isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_an7al_1\",\"inputOverlay\":\"_inputOverlay_an7al_9\",\"checkbox\":\"_checkbox_an7al_17\",\"disabled\":\"_disabled_an7al_25\",\"cursorDisabled\":\"_cursorDisabled_an7al_29\",\"cursorEnabled\":\"_cursorEnabled_an7al_33\",\"uncheckedBox\":\"_uncheckedBox_an7al_37\",\"uncheckedBorder\":\"_uncheckedBorder_an7al_41\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_an7al_45\",\"checkedBox\":\"_checkedBox_an7al_49\",\"checkedNonError\":\"_checkedNonError_an7al_53\",\"checkedError\":\"_checkedError_an7al_57\",\"sm\":\"_sm_an7al_61\",\"md\":\"_md_an7al_67\"}"],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,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;;;ADwFjoB,SAYQ,KAZR;AAhFJ,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,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,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":[]}