@cambly/syntax-core 9.6.0 → 9.8.0-beta.1

package/dist/__chunks/PN7GAGSA.mjs

@@ -0,0 +1,111 @@
+import {
+  rounding_module_default
+} from "./QQUTU6E5.mjs";
+import {
+  useIsHydrated
+} from "./XFKGXL73.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./CUDAH5IW.mjs";
+
+// src/TapArea/TapArea.tsx
+import { forwardRef, useReducer } from "react";
+import classNames from "classnames";
+
+// css-module:./TapArea.module.css#css-module
+var TapArea_module_default = { "tapArea": "_tapArea_g6gkz_1", "fullWidth": "_fullWidth_g6gkz_5", "disabled": "_disabled_g6gkz_9", "enabled": "_enabled_g6gkz_16", "overlay": "_overlay_g6gkz_29", "hoveredOrFocussed": "_hoveredOrFocussed_g6gkz_39" };
+
+// src/TapArea/TapArea.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function reducer(state, action) {
+  switch (action.type) {
+    case "BLUR":
+      return __spreadProps(__spreadValues({}, state), { focussed: false });
+    case "FOCUS":
+      return __spreadProps(__spreadValues({}, state), { focussed: true });
+    case "MOUSE_ENTER":
+      return __spreadProps(__spreadValues({}, state), { hovered: true });
+    case "MOUSE_LEAVE":
+      return __spreadProps(__spreadValues({}, state), { hovered: false });
+    default:
+      return state;
+  }
+}
+var TapArea = forwardRef(
+  ({
+    children,
+    accessibilityLabel,
+    "data-testid": dataTestId,
+    disabled: disabledProp = false,
+    fullWidth = true,
+    onClick,
+    rounding = "none",
+    tabIndex = 0
+  }, ref) => {
+    const isHydrated = useIsHydrated();
+    const disabled = !isHydrated || disabledProp;
+    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {
+      hovered: false,
+      focussed: false
+    });
+    const handleClick = (event) => {
+      if (disabled) {
+      } else {
+        event.currentTarget.blur();
+        onClick(event);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled)
+        return;
+      if (event.key === "Enter" || event.key === " " || event.key === "Space") {
+        event.preventDefault();
+        onClick(event);
+      }
+    };
+    const isHoveredOrFocussed = !disabled && (hovered || focussed);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-disabled": disabled,
+        "aria-label": accessibilityLabel,
+        className: classNames(
+          TapArea_module_default.tapArea,
+          TapArea_module_default[`${disabled ? "disabled" : "enabled"}`],
+          fullWidth && TapArea_module_default.fullWidth,
+          isHoveredOrFocussed && TapArea_module_default.hoveredOrFocussed
+        ),
+        "data-testid": dataTestId,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onMouseEnter: () => dispatch({ type: "MOUSE_ENTER" }),
+        onMouseLeave: () => dispatch({ type: "MOUSE_LEAVE" }),
+        onFocus: () => dispatch({ type: "FOCUS" }),
+        onBlur: () => dispatch({ type: "BLUR" }),
+        ref,
+        role: "button",
+        tabIndex: disabled ? void 0 : tabIndex,
+        children: [
+          !disabled && (hovered || focussed) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(
+                TapArea_module_default.overlay,
+                rounding !== "none" && rounding_module_default[`rounding${rounding}`]
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+TapArea.displayName = "TapArea";
+var TapArea_default = TapArea;
+
+export {
+  TapArea_default
+};
+//# sourceMappingURL=PN7GAGSA.mjs.map

package/dist/__chunks/PN7GAGSA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"sourcesContent":["import React, { type ReactNode, forwardRef, useReducer } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TapAreaProps = {\n  /**\n   * The children to be rendered inside the tap area.\n   */\n  children?: ReactNode;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the tap area\n   */\n  \"data-testid\"?: string;\n  /**\n   * If `true`, the tap area will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the tap area will be full width\n   */\n  fullWidth?: boolean;\n  /**\n   * The callback to be called when the tap area is clicked\n   */\n  onClick: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Border radius of the tap area.\n   *\n   * * `none`: 0px\n   * * `sm`: 8px\n   * * `md`: 12px\n   * * `lg`: 16px\n   * * `xl`: 32px\n   * * `full`: 999px\n   *\n   * @defaultValue \"none\"\n   */\n  rounding?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"full\" | \"none\";\n  /**\n   * The tab index of the tap area\n   */\n  tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n  state: {\n    hovered: boolean;\n    focussed: boolean;\n  },\n  action: {\n    type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n  },\n) {\n  switch (action.type) {\n    case \"BLUR\":\n      return { ...state, focussed: false };\n    case \"FOCUS\":\n      return { ...state, focussed: true };\n    case \"MOUSE_ENTER\":\n      return { ...state, hovered: true };\n    case \"MOUSE_LEAVE\":\n      return { ...state, hovered: false };\n    default:\n      return state;\n  }\n}\n\n/**\n * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.\n */\nconst TapArea = forwardRef<HTMLDivElement, TapAreaProps>(\n  (\n    {\n      children,\n      accessibilityLabel,\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      fullWidth = true,\n      onClick,\n      rounding = \"none\",\n      tabIndex = 0,\n    }: TapAreaProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n      hovered: false,\n      focussed: false,\n    });\n\n    const handleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        undefined;\n      } else {\n        event.currentTarget.blur();\n        onClick(event);\n      }\n    };\n\n    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n        event.preventDefault();\n        onClick(event);\n      }\n    };\n\n    const isHoveredOrFocussed = !disabled && (hovered || focussed);\n\n    return (\n      <div\n        aria-disabled={disabled}\n        aria-label={accessibilityLabel}\n        className={classNames(\n          styles.tapArea,\n          styles[`${disabled ? \"disabled\" : \"enabled\"}`],\n          fullWidth && styles.fullWidth,\n          isHoveredOrFocussed && styles.hoveredOrFocussed,\n        )}\n        data-testid={dataTestId}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={() => dispatch({ type: \"MOUSE_ENTER\" })}\n        onMouseLeave={() => dispatch({ type: \"MOUSE_LEAVE\" })}\n        onFocus={() => dispatch({ type: \"FOCUS\" })}\n        onBlur={() => dispatch({ type: \"BLUR\" })}\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? undefined : tabIndex}\n      >\n        {!disabled && (hovered || focussed) && (\n          <div\n            className={classNames(\n              styles.overlay,\n              rounding !== \"none\" && roundingStyles[`rounding${rounding}`],\n            )}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nTapArea.displayName = \"TapArea\";\n\nexport default TapArea;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_g6gkz_1\",\"fullWidth\":\"_fullWidth_g6gkz_5\",\"disabled\":\"_disabled_g6gkz_9\",\"enabled\":\"_enabled_g6gkz_16\",\"overlay\":\"_overlay_g6gkz_29\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_g6gkz_39\"}"],"mappings":";;;;;;;;;;;;AAAA,SAAgC,YAAY,kBAAkB;AAC9D,OAAO,gBAAgB;;;ACDsE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,aAAY,sBAAqB,YAAW,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,qBAAoB,8BAA6B;;;ADyHjT,SAqBI,KArBJ;AArEN,SAAS,QACP,OAIA,QAGA;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,KAAK;AAAA,IACpC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,KAAK;AAAA,IACnC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,MAAM;AAAA,IACpC;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,EACb,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,CAAC,EAAE,SAAS,SAAS,GAAG,QAAQ,IAAI,WAAW,SAAS;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,cAAuD,CAAC,UAAU;AACtE,UAAI,UAAU;AAAA,MAEd,OAAO;AACL,cAAM,cAAc,KAAK;AACzB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,gBAA4D,CAChE,UACG;AACH,UAAI;AAAU;AACd,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAM,eAAe;AACrB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,sBAAsB,CAAC,aAAa,WAAW;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,uBAAO;AAAA,UACP,uBAAO,GAAG,WAAW,aAAa,WAAW;AAAA,UAC7C,aAAa,uBAAO;AAAA,UACpB,uBAAuB,uBAAO;AAAA,QAChC;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,SAAS,MAAM,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,QACzC,QAAQ,MAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,QACvC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,SAAY;AAAA,QAEhC;AAAA,WAAC,aAAa,WAAW,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,uBAAO;AAAA,gBACP,aAAa,UAAU,wBAAe,WAAW,UAAU;AAAA,cAC7D;AAAA;AAAA,UACF;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ;","names":[]}

package/dist/__chunks/PR3BB3FG.js

@@ -0,0 +1,96 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _5DBWL6IKjs = require('./5DBWL6IK.js');
+
+
+var _BNRC45PXjs = require('./BNRC45PX.js');
+
+
+var _PTAZUBW6js = require('./PTAZUBW6.js');
+
+
+var _YKIJQZYOjs = require('./YKIJQZYO.js');
+
+
+var _QX4SPXNOjs = require('./QX4SPXNO.js');
+
+
+var _3N6HHI46js = require('./3N6HHI46.js');
+
+// src/LinkButton/LinkButton.tsx
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:../Button/Button.module.css#css-module
+var Button_module_default = { "button": "_button_raa9c_1", "buttonGap": "_buttonGap_raa9c_10", "fullWidth": "_fullWidth_raa9c_51", "sm": "_sm_raa9c_55", "md": "_md_raa9c_61", "lg": "_lg_raa9c_67", "icon": "_icon_raa9c_73", "smIcon": "_smIcon_raa9c_77", "mdIcon": "_mdIcon_raa9c_84", "lgIcon": "_lgIcon_raa9c_91", "secondaryBorder": "_secondaryBorder_raa9c_98", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_raa9c_102", "loading": "_loading_raa9c_116", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_raa9c_1", "loadingCircle": "_loadingCircle_raa9c_120" };
+
+// css-module:./LinkButton.module.css#css-module
+var LinkButton_module_default = { "linkButton": "_linkButton_1qjrb_1", "fitContent": "_fitContent_1qjrb_11" };
+
+// src/LinkButton/LinkButton.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var LinkButton = _react.forwardRef.call(void 0, 
+  ({
+    text,
+    href,
+    target,
+    rel,
+    "data-testid": dataTestId,
+    color = "primary",
+    size = "md",
+    fullWidth = false,
+    startIcon: StartIcon,
+    endIcon: EndIcon,
+    onClick
+  }, ref) => {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "a",
+      {
+        href,
+        "data-testid": dataTestId,
+        target,
+        ref,
+        rel,
+        className: _classnames2.default.call(void 0, 
+          LinkButton_module_default.linkButton,
+          Button_module_default.button,
+          _QX4SPXNOjs.foregroundColor.call(void 0, color),
+          _3N6HHI46js.backgroundColor.call(void 0, color),
+          Button_module_default[size],
+          {
+            [Button_module_default.fullWidth]: fullWidth,
+            [LinkButton_module_default.fitContent]: !fullWidth,
+            [Button_module_default.buttonGap]: size === "lg" || size === "md",
+            [Button_module_default.secondaryBorder]: color === "secondary",
+            [Button_module_default.secondaryDestructiveBorder]: color === "destructive-secondary"
+          }
+        ),
+        onClick,
+        children: [
+          StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            StartIcon,
+            {
+              className: _classnames2.default.call(void 0, Button_module_default.icon, _BNRC45PXjs.iconSize_default[size])
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _PTAZUBW6js.Typography_default,
+            {
+              color: _YKIJQZYOjs.foregroundTypographyColor.call(void 0, color),
+              size: _5DBWL6IKjs.textVariant_default[size],
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: 500 }, children: text })
+            }
+          ),
+          EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EndIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _BNRC45PXjs.iconSize_default[size]) })
+        ]
+      }
+    );
+  }
+);
+LinkButton.displayName = "LinkButton";
+var LinkButton_default = LinkButton;
+
+
+
+exports.LinkButton_default = LinkButton_default;
+//# sourceMappingURL=PR3BB3FG.js.map

package/dist/__chunks/PR3BB3FG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:../Button/Button.module.css#css-module","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACDoE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,uBAAsB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACA5gB,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AFwGnL,SAwBI,KAxBJ;AAlBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,sBAAa,IAAI;AAAA,UACjB;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,eAAe,GAAG,UAAU;AAAA,YAC1C,CAAC,sBAAa,0BAA0B,GACtC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,MAAM,iBAAS,IAAI,CAAC;AAAA;AAAA,UACzD;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,0BAA0B,KAAK;AAAA,cACtC,MAAM,oBAAY,IAAI;AAAA,cAEtB,8BAAC,UAAK,OAAO,EAAE,YAAY,IAAI,GAAI,gBAAK;AAAA;AAAA,UAC1C;AAAA,UACC,WACC,oBAAC,WAAQ,WAAW,WAAW,sBAAa,MAAM,iBAAS,IAAI,CAAC,GAAG;AAAA;AAAA;AAAA,IAEvE;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport backgroundColor from \"../colors/backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport foregroundTypographyColor from \"../colors/foregroundTypographyColor\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\n\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\n\nimport styles from \"./LinkButton.module.css\";\n\ntype LinkButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The link that the LinkButton should route to.\n   *\n   */\n  href?: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\";\n  /**\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   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      color = \"primary\",\n      size = \"md\",\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    return (\n      <a\n        href={href}\n        data-testid={dataTestId}\n        target={target}\n        ref={ref}\n        rel={rel}\n        className={classNames(\n          styles.linkButton,\n          buttonStyles.button,\n          foregroundColor(color),\n          backgroundColor(color),\n          buttonStyles[size],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.secondaryBorder]: color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        onClick={onClick}\n      >\n        {StartIcon && (\n          <StartIcon\n            className={classNames(buttonStyles.icon, iconSize[size])}\n          />\n        )}\n        <Typography\n          color={foregroundTypographyColor(color)}\n          size={textVariant[size]}\n        >\n          <span style={{ fontWeight: 500 }}>{text}</span>\n        </Typography>\n        {EndIcon && (\n          <EndIcon className={classNames(buttonStyles.icon, iconSize[size])} />\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_raa9c_1\",\"buttonGap\":\"_buttonGap_raa9c_10\",\"fullWidth\":\"_fullWidth_raa9c_51\",\"sm\":\"_sm_raa9c_55\",\"md\":\"_md_raa9c_61\",\"lg\":\"_lg_raa9c_67\",\"icon\":\"_icon_raa9c_73\",\"smIcon\":\"_smIcon_raa9c_77\",\"mdIcon\":\"_mdIcon_raa9c_84\",\"lgIcon\":\"_lgIcon_raa9c_91\",\"secondaryBorder\":\"_secondaryBorder_raa9c_98\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_raa9c_102\",\"loading\":\"_loading_raa9c_116\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_raa9c_1\",\"loadingCircle\":\"_loadingCircle_raa9c_120\"}","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}

package/dist/__chunks/PRHHEVW3.mjs

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

package/dist/__chunks/PRHHEVW3.mjs.map

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

package/dist/__chunks/PTAZUBW6.js

@@ -0,0 +1,74 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _ESGV3EEUjs = require('./ESGV3EEU.js');
+
+// src/Typography/Typography.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_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
+var _jsxruntime = require('react/jsx-runtime');
+function textColor(color) {
+  switch (color) {
+    case "gray700":
+      return _ESGV3EEUjs.colors_module_default.gray700Color;
+    case "white":
+      return _ESGV3EEUjs.colors_module_default.whiteColor;
+    case "inherit":
+      return _ESGV3EEUjs.colors_module_default.inheritColor;
+    case "primary":
+      return _ESGV3EEUjs.colors_module_default.primary700Color;
+    case "destructive-primary":
+      return _ESGV3EEUjs.colors_module_default.destructive700Color;
+    case "success":
+      return _ESGV3EEUjs.colors_module_default.success700Color;
+    default:
+      return _ESGV3EEUjs.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__ */ _jsxruntime.jsx.call(void 0, 
+    Tag,
+    {
+      className: _classnames2.default.call(void 0, 
+        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;
+
+
+
+exports.Typography_default = Typography_default;
+//# sourceMappingURL=PTAZUBW6.js.map

package/dist/__chunks/PTAZUBW6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":[],"mappings":";;;;;AAAA,OAAO,gBAAgB;;;ACA4E,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;;;ADwH5wB;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","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 \"/Users/christian/cambly/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\"}"]}

package/dist/__chunks/QQUTU6E5.mjs

@@ -0,0 +1,7 @@
+// css-module:../rounding.module.css#css-module
+var rounding_module_default = { "roundingsm": "_roundingsm_1bo6p_2", "roundingmd": "_roundingmd_1bo6p_6", "roundinglg": "_roundinglg_1bo6p_10", "roundingxl": "_roundingxl_1bo6p_14", "roundingfull": "_roundingfull_1bo6p_18" };
+
+export {
+  rounding_module_default
+};
+//# sourceMappingURL=QQUTU6E5.mjs.map

package/dist/__chunks/QQUTU6E5.mjs.map

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

package/dist/__chunks/QTRAGVT2.js

@@ -0,0 +1,81 @@
+"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/TextField/TextField.tsx
+
+
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_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
+var _jsxruntime = require('react/jsx-runtime');
+function TextField({
+  autoComplete,
+  "data-testid": dataTestId,
+  disabled = false,
+  errorText = "",
+  helperText = "",
+  id,
+  label,
+  onChange,
+  placeholder = "",
+  size = "md",
+  type = "text",
+  value = ""
+}) {
+  const reactId = _react.useId.call(void 0, );
+  const inputId = id != null ? id : reactId;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _4EEVXYO7js.Box_default,
+    {
+      display: "flex",
+      direction: "column",
+      gap: 2,
+      width: "100%",
+      dangerouslySetInlineStyle: {
+        __style: {
+          opacity: disabled ? 0.5 : 1
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4EEVXYO7js.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _R3JL4P3Qjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            autoComplete,
+            className: _classnames2.default.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, _4EEVXYO7js.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _R3JL4P3Qjs.Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: errorText || helperText
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+
+
+exports.TextField = TextField;
+//# sourceMappingURL=QTRAGVT2.js.map

package/dist/__chunks/QTRAGVT2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"names":[],"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","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\"}"]}

package/dist/__chunks/QX4SPXNO.js

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _DOUZDU3Ajs = require('./DOUZDU3A.js');
+
+// src/colors/foregroundColor.ts
+function foregroundColor(color) {
+  switch (color) {
+    case "secondary":
+    case "tertiary":
+      return _DOUZDU3Ajs.colors_module_default.primary700Color;
+    case "destructive-secondary":
+    case "destructive-tertiary":
+      return _DOUZDU3Ajs.colors_module_default.destructive700Color;
+    case "primary":
+    case "branded":
+      return _DOUZDU3Ajs.colors_module_default.gray900Color;
+    case "inverse":
+      return _DOUZDU3Ajs.colors_module_default.whiteColor;
+    default:
+      return _DOUZDU3Ajs.colors_module_default.whiteColor;
+  }
+}
+
+
+
+exports.foregroundColor = foregroundColor;
+//# sourceMappingURL=QX4SPXNO.js.map

package/dist/__chunks/QX4SPXNO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/foregroundColor.ts"],"names":[],"mappings":";;;;;AAGe,SAAR,gBAAiC,OAAuC;AAC7E,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB;AACE,aAAO,sBAAO;AAAA,EAClB;AACF","sourcesContent":["import { type Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return styles.primary700Color;\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return styles.destructive700Color;\n    case \"primary\":\n    case \"branded\":\n      return styles.gray900Color;\n    case \"inverse\":\n      return styles.whiteColor;\n    default:\n      return styles.whiteColor;\n  }\n}\n"]}

package/dist/__chunks/R3JL4P3Q.js

@@ -0,0 +1,72 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _HPQ27RVDjs = require('./HPQ27RVD.js');
+
+// src/Typography/Typography.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_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
+var _jsxruntime = require('react/jsx-runtime');
+function textColor(color) {
+  switch (color) {
+    case "gray700":
+      return _HPQ27RVDjs.colors_module_default.gray700Color;
+    case "white":
+      return _HPQ27RVDjs.colors_module_default.whiteColor;
+    case "inherit":
+      return _HPQ27RVDjs.colors_module_default.inheritColor;
+    case "primary":
+      return _HPQ27RVDjs.colors_module_default.primary700Color;
+    case "destructive-primary":
+      return _HPQ27RVDjs.colors_module_default.destructive700Color;
+    default:
+      return _HPQ27RVDjs.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__ */ _jsxruntime.jsx.call(void 0, 
+    Tag,
+    {
+      className: _classnames2.default.call(void 0, 
+        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;
+
+
+
+exports.Typography_default = Typography_default;
+//# sourceMappingURL=R3JL4P3Q.js.map

package/dist/__chunks/R3JL4P3Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":[],"mappings":";;;;;AAAA,OAAO,gBAAgB;;;ACA4E,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;;;ADsH5wB;AAhHJ,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;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","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    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 \"/Users/christian/cambly/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\"}"]}