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

package/dist/__chunks/KCIQ73YD.js

@@ -0,0 +1,111 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _VPGRPGP7js = require('./VPGRPGP7.js');
+
+
+var _PTAZUBW6js = require('./PTAZUBW6.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,
+    [_VPGRPGP7js.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,
+    [_VPGRPGP7js.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, 
+          _PTAZUBW6js.Typography_default,
+          {
+            size: typographySize[size],
+            color: error ? "destructive-primary" : "gray800",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var Checkbox_default = Checkbox;
+
+
+
+exports.Checkbox_default = Checkbox_default;
+//# sourceMappingURL=KCIQ73YD.js.map

package/dist/__chunks/{GOSWBV5D.cjs.map → KCIQ73YD.js.map}

@@ -1 +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\"}"]}
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"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;;;ADwFhoB,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 \"/Users/christian/cambly/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/KDEHEUYG.mjs

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

package/dist/__chunks/KDEHEUYG.mjs.map

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

package/dist/__chunks/KEVWT27Z.mjs

@@ -0,0 +1,81 @@
+import {
+  Box_default
+} from "./4VIJNV7V.mjs";
+import {
+  Typography_default
+} from "./WIDP7NHD.mjs";
+
+// src/TextField/TextField.tsx
+import {
+  useId
+} from "react";
+import classNames from "classnames";
+
+// css-module:./TextField.module.css#css-module
+var TextField_module_default = { "textfield": "_textfield_cltsv_1", "label": "_label_cltsv_21", "sm": "_sm_cltsv_25", "md": "_md_cltsv_30", "lg": "_lg_cltsv_35", "inputError": "_inputError_cltsv_40" };
+
+// src/TextField/TextField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextField({
+  autoComplete,
+  "data-testid": dataTestId,
+  disabled = false,
+  errorText = "",
+  helperText = "",
+  id,
+  label,
+  onChange,
+  placeholder = "",
+  size = "md",
+  type = "text",
+  value = ""
+}) {
+  const reactId = useId();
+  const inputId = id != null ? id : reactId;
+  return /* @__PURE__ */ jsxs(
+    Box_default,
+    {
+      display: "flex",
+      direction: "column",
+      gap: 2,
+      width: "100%",
+      dangerouslySetInlineStyle: {
+        __style: {
+          opacity: disabled ? 0.5 : 1
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ jsx("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            autoComplete,
+            className: classNames(TextField_module_default.textfield, TextField_module_default[size], {
+              [TextField_module_default.inputError]: errorText
+            }),
+            "data-testid": dataTestId,
+            disabled,
+            id: inputId,
+            type,
+            onChange,
+            placeholder,
+            value
+          }
+        ),
+        (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
+          Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: errorText || helperText
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  TextField
+};
+//# sourceMappingURL=KEVWT27Z.mjs.map

package/dist/__chunks/KEVWT27Z.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\n}): ReactElement {\n  const reactId = useId();\n  const inputId = id ?? reactId;\n\n  return (\n    <Box\n      display=\"flex\"\n      direction=\"column\"\n      gap={2}\n      width=\"100%\"\n      dangerouslySetInlineStyle={{\n        __style: {\n          opacity: disabled ? 0.5 : 1,\n        },\n      }}\n    >\n      {label && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(styles.textfield, styles[size], {\n          [styles.inputError]: errorText,\n        })}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText || helperText}\n          </Typography>\n        </Box>\n      )}\n    </Box>\n  );\n}\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_cltsv_1\",\"label\":\"_label_cltsv_21\",\"sm\":\"_sm_cltsv_25\",\"md\":\"_md_cltsv_30\",\"lg\":\"_lg_cltsv_35\",\"inputError\":\"_inputError_cltsv_40\"}"],"mappings":";;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL0E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;AD2FvQ,SAcQ,KAdR;AA9EW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GA4DiB;AACf,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,WAAW,yBAAO,WAAW,yBAAO,IAAI,GAAG;AAAA,cACpD,CAAC,yBAAO,UAAU,GAAG;AAAA,YACvB,CAAC;AAAA,YACD,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/__chunks/KG7XQLVR.js

@@ -0,0 +1,32 @@
+// css-module:./ButtonGroup.module.css#css-module
+var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_1f9x9_1", "horizontal": "_horizontal_1f9x9_5", "vertical": "_vertical_1f9x9_9", "smallGap": "_smallGap_1f9x9_13", "mediumGap": "_mediumGap_1f9x9_17", "largeGap": "_largeGap_1f9x9_21" };
+
+// src/ButtonGroup/ButtonGroup.tsx
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+var gap = {
+  sm: ButtonGroup_module_default.smallGap,
+  md: ButtonGroup_module_default.mediumGap,
+  lg: ButtonGroup_module_default.largeGap
+};
+var ButtonGroup = ({
+  orientation = "horizontal",
+  size = "md",
+  children
+}) => {
+  const classnames = classNames(
+    ButtonGroup_module_default.buttonGroup,
+    size === "xl" ? gap.lg : gap[size],
+    {
+      [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
+      [ButtonGroup_module_default.vertical]: orientation === "vertical"
+    }
+  );
+  return /* @__PURE__ */ jsx("div", { className: classnames, children });
+};
+var ButtonGroup_default = ButtonGroup;
+
+export {
+  ButtonGroup_default
+};
+//# sourceMappingURL=KG7XQLVR.js.map

package/dist/__chunks/KG7XQLVR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./ButtonGroup.module.css#css-module","../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_1f9x9_1\",\"horizontal\":\"_horizontal_1f9x9_5\",\"vertical\":\"_vertical_1f9x9_9\",\"smallGap\":\"_smallGap_1f9x9_13\",\"mediumGap\":\"_mediumGap_1f9x9_17\",\"largeGap\":\"_largeGap_1f9x9_21\"}","import { type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { type Size } from \"../constants\";\nimport classNames from \"classnames\";\n\nconst gap = {\n  sm: styles.smallGap,\n  md: styles.mediumGap,\n  lg: styles.largeGap,\n} as const;\n\n/**\n * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.\n */\nconst ButtonGroup = ({\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n}: {\n  /**\n   * The orientation of the button group\n   *\n   * @defaultValue \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The size of the button group defines the spacing between each button\n   *\n   * * `sm`: 8px\n   * * `md`: 12px\n   * * `lg`: 16px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * Buttons to be rendered inside the button group\n   */\n  children?: ReactNode;\n}): ReactElement => {\n  const classnames = classNames(\n    styles.buttonGroup,\n    size === \"xl\" ? gap.lg : gap[size],\n    {\n      [styles.horizontal]: orientation === \"horizontal\",\n      [styles.vertical]: orientation === \"vertical\",\n    },\n  );\n\n  return <div className={classnames}>{children}</div>;\n};\n\nexport default ButtonGroup;\n"],"mappings":";AAAqG,IAAO,6BAAQ,EAAC,eAAc,wBAAuB,cAAa,uBAAsB,YAAW,qBAAoB,YAAW,sBAAqB,aAAY,uBAAsB,YAAW,qBAAoB;;;ACG7T,OAAO,gBAAgB;AA8Cd;AA5CT,IAAM,MAAM;AAAA,EACV,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AACb;AAKA,IAAM,cAAc,CAAC;AAAA,EACnB,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AACF,MAqBoB;AAClB,QAAM,aAAa;AAAA,IACjB,2BAAO;AAAA,IACP,SAAS,OAAO,IAAI,KAAK,IAAI,IAAI;AAAA,IACjC;AAAA,MACE,CAAC,2BAAO,UAAU,GAAG,gBAAgB;AAAA,MACrC,CAAC,2BAAO,QAAQ,GAAG,gBAAgB;AAAA,IACrC;AAAA,EACF;AAEA,SAAO,oBAAC,SAAI,WAAW,YAAa,UAAS;AAC/C;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/__chunks/KGJ6GIIS.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _IXWQIXINcjs = require('./IXWQIXIN.cjs');
+
+// 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, 
+    _IXWQIXINcjs.Typography_default,
+    {
+      align,
+      as,
+      color,
+      "data-testid": dataTestId,
+      lineClamp,
+      size,
+      weight,
+      children
+    }
+  );
+};
+var Heading_default = Heading;
+
+
+
+exports.Heading_default = Heading_default;
+//# sourceMappingURL=KGJ6GIIS.cjs.map

package/dist/__chunks/KGJ6GIIS.cjs.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/KNBS7I65.mjs

@@ -0,0 +1,34 @@
+import {
+  Typography_default
+} from "./WIDP7NHD.mjs";
+
+// src/Heading/Heading.tsx
+import { jsx } from "react/jsx-runtime";
+var Heading = ({
+  align = "start",
+  as = "h1",
+  children,
+  color = "gray900",
+  "data-testid": dataTestId,
+  size = 500
+}) => {
+  const weight = [700, 800].includes(size) ? "heavy" : "bold";
+  return /* @__PURE__ */ jsx(
+    Typography_default,
+    {
+      align,
+      as,
+      color,
+      "data-testid": dataTestId,
+      size,
+      weight,
+      children
+    }
+  );
+};
+var Heading_default = Heading;
+
+export {
+  Heading_default
+};
+//# sourceMappingURL=KNBS7I65.mjs.map

package/dist/__chunks/KNBS7I65.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Heading/Heading.tsx"],"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  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   * 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      size={size}\n      weight={weight}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"],"mappings":";;;;;AAyDI;AAlDJ,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,OAAO;AACT,MAwCoB;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,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/__chunks/KNDHXB3A.js

@@ -0,0 +1,66 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _4EEVXYO7js = require('./4EEVXYO7.js');
+
+
+var _R3JL4P3Qjs = require('./R3JL4P3Q.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_1rwvt_1", "selectedChip": "_selectedChip_1rwvt_12", "icon": "_icon_1rwvt_17", "selectedIcon": "_selectedIcon_1rwvt_25", "sm": "_sm_1rwvt_29", "lg": "_lg_1rwvt_35" };
+
+// 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 chipStyles = _classnames2.default.call(void 0, Chip_module_default.chip, Chip_module_default[size], {
+      [Chip_module_default.selectedChip]: selected
+    });
+    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,
+        "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, _4EEVXYO7js.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _R3JL4P3Qjs.Typography_default,
+            {
+              size: typographySize[size],
+              color: selected ? "white" : "gray900",
+              children: text
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Chip_default = Chip;
+
+
+
+exports.Chip_default = Chip_default;
+//# sourceMappingURL=KNDHXB3A.js.map

package/dist/__chunks/KNDHXB3A.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,gBAAe,0BAAyB,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADmEvQ,SAQW,KARX;AAvBN,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,WAAW,oBAAO,MAAM,oBAAO,IAAI,GAAG;AAAA,MACvD,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,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,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\";\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 chipStyles = classnames(styles.chip, styles[size], {\n      [styles.selectedChip]: selected,\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        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_1rwvt_1\",\"selectedChip\":\"_selectedChip_1rwvt_12\",\"icon\":\"_icon_1rwvt_17\",\"selectedIcon\":\"_selectedIcon_1rwvt_25\",\"sm\":\"_sm_1rwvt_29\",\"lg\":\"_lg_1rwvt_35\"}"]}

package/dist/__chunks/KNTQWIRZ.mjs

@@ -0,0 +1,64 @@
+import {
+  foregroundColor
+} from "./F4HTASEF.mjs";
+import {
+  backgroundColor
+} from "./ZHZ6U63Z.mjs";
+
+// src/IconButton/IconButton.tsx
+import classNames from "classnames";
+import { forwardRef } from "react";
+
+// css-module:./IconButton.module.css#css-module
+var IconButton_module_default = { "iconButton": "_iconButton_4e8qe_1", "sm": "_sm_4e8qe_46", "md": "_md_4e8qe_51", "lg": "_lg_4e8qe_56", "smIcon": "_smIcon_4e8qe_61", "mdIcon": "_mdIcon_4e8qe_68", "lgIcon": "_lgIcon_4e8qe_75", "secondaryBorder": "_secondaryBorder_4e8qe_82", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_4e8qe_86" };
+
+// src/IconButton/IconButton.tsx
+import { jsx } from "react/jsx-runtime";
+var iconSize = {
+  ["sm"]: IconButton_module_default.smIcon,
+  ["md"]: IconButton_module_default.mdIcon,
+  ["lg"]: IconButton_module_default.lgIcon
+};
+var IconButton = forwardRef(
+  ({
+    accessibilityLabel,
+    color = "primary",
+    "data-testid": dataTestId,
+    disabled = false,
+    icon: Icon,
+    size = "md",
+    tooltip,
+    onClick
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": accessibilityLabel,
+        "data-testid": dataTestId,
+        type: "button",
+        title: tooltip,
+        disabled,
+        onClick,
+        className: classNames(
+          IconButton_module_default.iconButton,
+          foregroundColor(color),
+          backgroundColor(color),
+          IconButton_module_default[size],
+          {
+            [IconButton_module_default.secondaryBorder]: color === "secondary",
+            [IconButton_module_default.secondaryDestructiveBorder]: color === "destructive-secondary"
+          }
+        ),
+        ref,
+        children: /* @__PURE__ */ jsx(Icon, { className: iconSize[size] })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
+
+export {
+  IconButton_default
+};
+//# sourceMappingURL=KNTQWIRZ.mjs.map

package/dist/__chunks/KNTQWIRZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Color, type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColor(color),\n          backgroundColor(color),\n          styles[size],\n          {\n            [styles.secondaryBorder]: color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon className={iconSize[size]} />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_4e8qe_1\",\"sm\":\"_sm_4e8qe_46\",\"md\":\"_md_4e8qe_51\",\"lg\":\"_lg_4e8qe_56\",\"smIcon\":\"_smIcon_4e8qe_61\",\"mdIcon\":\"_mdIcon_4e8qe_68\",\"lgIcon\":\"_lgIcon_4e8qe_75\",\"secondaryBorder\":\"_secondaryBorder_4e8qe_82\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_4e8qe_86\"}"],"mappings":";;;;;;;;AAAA,OAAO,gBAAgB;AAGvB,SAAgB,kBAAkB;;;ACHiE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,uCAAsC;;;ADgG/Y;AAzFR,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AACjB;AAkDA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,0BAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,0BAAO,eAAe,GAAG,UAAU;AAAA,YACpC,CAAC,0BAAO,0BAA0B,GAChC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}