@cambly/syntax-core 23.0.0 → 23.2.0

package/dist/Badge/Badge.d.ts

@@ -10,7 +10,7 @@ declare const Badge: ({ icon: Icon, text, color, }: {
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | React.ComponentType<{
-        color?: "inherit" | "black" | "destructive100" | "destructive200" | "destructive300" | "destructive700" | "destructive800" | "destructive900" | "gray10" | "gray100" | "gray200" | "gray30" | "gray60" | "gray300" | "gray700" | "gray80" | "gray800" | "gray900" | "orange100" | "orange200" | "orange300" | "orange700" | "orange800" | "orange900" | "primary100" | "primary200" | "primary300" | "primary700" | "primary800" | "primary900" | "purple100" | "purple200" | "purple300" | "purple700" | "purple800" | "purple900" | "success100" | "success200" | "success300" | "success700" | "success800" | "success900" | "white" | "yellow100" | "yellow200" | "yellow300" | "yellow700" | "yellow800" | "yellow900" | "white40" | "white70" | "gray270" | "gray370" | "gray870" | "cream" | "lilac" | "navy" | "orange" | "pink" | "purple" | "red" | "sky" | "slate" | "tan" | "teal" | "thistle" | undefined;
+        color?: "inherit" | "black" | "navy" | "orange" | "pink" | "purple" | "red" | "tan" | "teal" | "thistle" | "white" | "destructive100" | "destructive200" | "destructive300" | "destructive700" | "destructive800" | "destructive900" | "gray10" | "gray100" | "gray200" | "gray30" | "gray60" | "gray300" | "gray700" | "gray80" | "gray800" | "gray900" | "orange100" | "orange200" | "orange300" | "orange700" | "orange800" | "orange900" | "primary100" | "primary200" | "primary300" | "primary700" | "primary800" | "primary900" | "purple100" | "purple200" | "purple300" | "purple700" | "purple800" | "purple900" | "success100" | "success200" | "success300" | "success700" | "success800" | "success900" | "yellow100" | "yellow200" | "yellow300" | "yellow700" | "yellow800" | "yellow900" | "white40" | "white70" | "gray270" | "gray370" | "gray870" | "cream" | "lilac" | "sky" | "slate" | undefined;
         size?: 100 | 200 | 300 | 400 | 500 | 700 | 800 | 900 | 600 | 1000 | undefined;
         path?: string | undefined;
         rtlMirror?: boolean | undefined;
@@ -24,7 +24,7 @@ declare const Badge: ({ icon: Icon, text, color, }: {
      *
      * @defaultValue "sky"
      */
-    color?: "destructive100" | "destructive300" | "success100" | "success300" | "yellow700" | "gray370" | "gray870" | "cream" | "lilac" | "orange" | "pink" | "sky" | "tan" | "thistle" | "silver" | "blackandwhite" | "graytertiary" | undefined;
+    color?: "orange" | "pink" | "silver" | "tan" | "thistle" | "destructive100" | "destructive300" | "success100" | "success300" | "yellow700" | "gray370" | "gray870" | "cream" | "lilac" | "sky" | "blackandwhite" | "graytertiary" | undefined;
 }) => JSX.Element;
 
 export { Badge as default };

package/dist/Heading/Heading.d.ts

@@ -27,7 +27,7 @@ declare const Heading: ({ align, as, children, color, "data-testid": dataTestId,
      *
      * @defaultValue "gray900"
      */
-    color?: "inherit" | "gray700" | "gray900" | "white" | "primary" | "destructive-primary" | "success" | undefined;
+    color?: "inherit" | "white" | "gray700" | "gray900" | "primary" | "destructive-primary" | "success" | undefined;
     /**
      * Test id for the text.
      */
@@ -39,7 +39,7 @@ declare const Heading: ({ align, as, children, color, "data-testid": dataTestId,
      *
      * @defaultValue "sans-serif"
      */
-    fontStyle?: "serif" | "sans-serif" | undefined;
+    fontStyle?: "sans-serif" | "serif" | undefined;
     /**
      * The number of lines we should truncate the text at
      */

package/dist/RichSelect/RichSelectList.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   RichSelectList_default
-} from "../__chunks/BF3QK6IT.js";
+} from "../__chunks/5ZLA3LWK.js";
 import "../__chunks/R6OBV53M.js";
 import "../__chunks/36DG472B.js";
 import "../__chunks/WJ4QY73I.js";
@@ -12,7 +12,7 @@ import "../__chunks/576PJXFR.js";
 import "../__chunks/3WKVZ2UU.js";
 import "../__chunks/KEJPRZJ5.js";
 import "../__chunks/4U4UW4AK.js";
-import "../__chunks/FPYIQTF7.js";
+import "../__chunks/UAHVOHJL.js";
 import "../__chunks/Y53Z25OG.js";
 import "../__chunks/DDUJFFG7.js";
 import "../__chunks/N7G37EKF.js";

package/dist/SelectList/SelectList.js

@@ -1,9 +1,9 @@
 "use client"
 import {
   SelectList
-} from "../__chunks/RK5LMYZS.js";
+} from "../__chunks/H3ONAELZ.js";
 import "../__chunks/SPQ7DQHG.js";
-import "../__chunks/FPYIQTF7.js";
+import "../__chunks/UAHVOHJL.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/X552U42S.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/TextArea/TextArea.d.ts

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React__default, { ReactElement } from 'react';
 
 type TextAreaProps = {
     /**
@@ -24,7 +24,7 @@ type TextAreaProps = {
     /**
      * TextArea visible label
      */
-    label: string;
+    label: string | ReactElement;
     /**
      * Maximum number of characters allowed in the TextArea
      */
@@ -67,4 +67,4 @@ type TextAreaProps = {
  */
 declare const TextArea: React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
 
-export { TextArea as default };
+export { TextAreaProps, TextArea as default };

package/dist/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   TextArea_default
-} from "../__chunks/OCGBS7FM.js";
+} from "../__chunks/FTC7VVZ2.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/X552U42S.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/TextField/TextField.d.ts

@@ -1,9 +1,9 @@
-import React__default, { HTMLInputTypeAttribute, ReactElement } from 'react';
+import React__default, { ReactElement, HTMLInputTypeAttribute } from 'react';
 
 /**
  * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.
  */
-declare function TextField({ autoComplete, "data-testid": dataTestId, disabled: disabledProp, on, endBadge, errorText, helperText, id, label, maxLength, onChange, placeholder, type, value, step, }: {
+type TextFieldProps = {
     /**
      * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
      *
@@ -45,7 +45,7 @@ declare function TextField({ autoComplete, "data-testid": dataTestId, disabled:
     /**
      * TextField visible label
      */
-    label: string;
+    label: string | ReactElement;
     /**
      * Maximum length of the TextField
      */
@@ -72,6 +72,7 @@ declare function TextField({ autoComplete, "data-testid": dataTestId, disabled:
      * Specified legal number intervals for an input field. Specifically for time or number. If for time, specify in milliseconds. Must be a positive value.
      */
     step?: number;
-}): ReactElement;
+};
+declare function TextField({ autoComplete, "data-testid": dataTestId, disabled: disabledProp, on, endBadge, errorText, helperText, id, label, maxLength, onChange, placeholder, type, value, step, }: TextFieldProps): ReactElement;
 
-export { TextField as default };
+export { TextFieldProps, TextField as default };

package/dist/TextField/TextField.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   TextField
-} from "../__chunks/ZJMZR5UG.js";
+} from "../__chunks/XLJZY2KR.js";
 import "../__chunks/UCZXBZIM.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/X552U42S.js";

package/dist/Toast/Toast.d.ts

@@ -31,10 +31,16 @@ type ToastProps = {
      * @defaultValue 5000
      */
     timeout?: number;
+    /**
+     * The z-index of the toast
+     *
+     * @defaultValue 0
+     */
+    zIndex?: number;
 };
 /**
  * [Toast](https://cambly-syntax.vercel.app/?path=/docs/components-toast--docs) is a component to display a small, dismissible notification.
  */
-declare function Toast({ body, "data-testid": dataTestId, heading, icon: Icon, on, timeout, }: ToastProps): JSX.Element;
+declare function Toast({ body, "data-testid": dataTestId, heading, icon: Icon, on, timeout, zIndex, }: ToastProps): JSX.Element;
 
 export { Toast as default };

package/dist/Toast/Toast.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   Toast
-} from "../__chunks/CAB67Z66.js";
+} from "../__chunks/RQVUNK7V.js";
 import "../__chunks/X552U42S.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/Typography/Typography.d.ts

@@ -28,7 +28,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
      *
      * @defaultValue "gray900"
      */
-    color?: "inherit" | "gray700" | "gray900" | "white" | "primary" | "destructive-primary" | "destructive-lightBackground" | "destructive-darkBackground" | "success" | "success-darkBackground" | "white-secondary" | undefined;
+    color?: "inherit" | "white" | "gray700" | "gray900" | "primary" | "destructive-primary" | "destructive-lightBackground" | "destructive-darkBackground" | "success" | "success-darkBackground" | "white-secondary" | undefined;
     /**
      * Test id for the text
      */
@@ -40,7 +40,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
      *
      * @defaultValue "sans-serif"
      */
-    fontStyle?: "serif" | "sans-serif" | undefined;
+    fontStyle?: "sans-serif" | "serif" | undefined;
     /**
      * The id for the element
      */
@@ -111,7 +111,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
      *
      * @defaultValue "regular"
      */
-    weight?: "bold" | "regular" | "medium" | "semiBold" | undefined;
+    weight?: "bold" | "medium" | "regular" | "semiBold" | undefined;
     /**
      * Controls how whitespace within the element is handled.
      *
@@ -119,7 +119,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
      *
      * @defaultValue "inherit"
      */
-    whiteSpace?: "inherit" | "nowrap" | "normal" | "preLine" | undefined;
+    whiteSpace?: "inherit" | "normal" | "nowrap" | "preLine" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 
 export { Typography as default };

package/dist/__chunks/{BF3QK6IT.js → 5ZLA3LWK.js}

@@ -14,7 +14,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./FPYIQTF7.js";
+} from "./UAHVOHJL.js";
 import {
   RichSelectSection_default
 } from "./Y53Z25OG.js";
@@ -293,4 +293,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=BF3QK6IT.js.map
+//# sourceMappingURL=5ZLA3LWK.js.map

package/dist/__chunks/{OCGBS7FM.js → FTC7VVZ2.js}

@@ -43,6 +43,7 @@ var TextArea = forwardRef(
     const inputId = id != null ? id : reactId;
     const textColor = on === "darkBackground" ? "white" : "gray900";
     const errorTextColor = on !== "darkBackground" ? "destructive-lightBackground" : "destructive-darkBackground";
+    const labelElement = typeof label === "string" ? /* @__PURE__ */ jsx(Typography_default, { size: 100, color: textColor, children: label }) : label;
     return /* @__PURE__ */ jsxs(
       Box_default,
       {
@@ -57,7 +58,7 @@ var TextArea = forwardRef(
         },
         position: "relative",
         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: textColor, children: label }) }) }),
+          label && /* @__PURE__ */ jsx("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: labelElement }) }),
           /* @__PURE__ */ jsx(Typography_default, { size: 100, children: /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -99,4 +100,4 @@ var TextArea_default = TextArea;
 export {
   TextArea_default
 };
-//# sourceMappingURL=OCGBS7FM.js.map
+//# sourceMappingURL=FTC7VVZ2.js.map

package/dist/__chunks/FTC7VVZ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nexport type TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string | ReactElement;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Indicate whether the component renders on a light or dark background. Changes the color of the input field and text\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Sets which part resizes when the user drags the resize handle.\n   * * `none`: TextArea can not be resized\n   * * `horizontal`: TextArea can only be resized horizontally\n   * * `vertical`: TextArea can only be resized vertically\n   * * `both`: TextArea can be resized horizontally and vertically\n   *\n   * @defaultvalue `none`\n   */\n  resize?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      value = \"\",\n      on,\n      onChange,\n      resize = \"none\",\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const inputId = id ?? reactId;\n    const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n    const errorTextColor =\n      on !== \"darkBackground\"\n        ? \"destructive-lightBackground\"\n        : \"destructive-darkBackground\";\n\n    const labelElement =\n      typeof label === \"string\" ? (\n        <Typography size={100} color={textColor}>\n          {label}\n        </Typography>\n      ) : (\n        label\n      );\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        position=\"relative\"\n      >\n        {label && (\n          <label className={textFieldStyles.label} htmlFor={inputId}>\n            <Box paddingX={1}>{labelElement}</Box>\n          </label>\n        )}\n        <Typography size={100}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              styles.textarea,\n              styles[`resize${resize}`],\n              errorText &&\n                (on === \"darkBackground\"\n                  ? textFieldStyles.transparentInputError\n                  : textFieldStyles.inputError),\n              {\n                [textFieldStyles.transparent]: on === \"darkBackground\",\n              },\n            )}\n            id={inputId}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            onChange={onChange}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n          />\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? errorTextColor : textColor}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_1sb0v_1\",\"resizenone\":\"_resizenone_1sb0v_6\",\"resizehorizontal\":\"_resizehorizontal_1sb0v_10\",\"resizevertical\":\"_resizevertical_1sb0v_14\",\"resizeboth\":\"_resizeboth_1sb0v_18\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_17wxq_1\",\"transparent\":\"_transparent_17wxq_20\",\"label\":\"_label_17wxq_36\",\"md\":\"_md_17wxq_40\",\"height\":\"_height_17wxq_44\",\"inputError\":\"_inputError_17wxq_48\",\"transparentInputError\":\"_transparentInputError_17wxq_57\",\"transparenInputError\":\"_transparenInputError_17wxq_62\"}"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,cAAa,uBAAsB,oBAAmB,8BAA6B,kBAAiB,4BAA2B,cAAa,uBAAsB;;;ACA/M,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,eAAc,yBAAwB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,wBAAuB,yBAAwB,mCAAkC,wBAAuB,iCAAgC;;;AFKxZ,OAAO,gBAAgB;AAoGf,cAQF,YARE;AA/BR,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,UAAU,kBAAM;AACtB,UAAM,YAAY,OAAO,mBAAmB,UAAU;AACtD,UAAM,iBACJ,OAAO,mBACH,gCACA;AAEN,UAAM,eACJ,OAAO,UAAU,WACf,oBAAC,sBAAW,MAAM,KAAK,OAAO,WAC3B,iBACH,IAEA;AAGJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAS;AAAA,QAER;AAAA,mBACC,oBAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GAAI,wBAAa,GAClC;AAAA,UAEF,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,wBAAO;AAAA,gBACP,wBAAO,SAAS,QAAQ;AAAA,gBACxB,cACG,OAAO,mBACJ,yBAAgB,wBAChB,yBAAgB;AAAA,gBACtB;AAAA,kBACE,CAAC,yBAAgB,WAAW,GAAG,OAAO;AAAA,gBACxC;AAAA,cACF;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,iBAAiB;AAAA,cAEnC,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}

package/dist/__chunks/{RK5LMYZS.js → H3ONAELZ.js}

@@ -6,7 +6,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./FPYIQTF7.js";
+} from "./UAHVOHJL.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -141,4 +141,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=RK5LMYZS.js.map
+//# sourceMappingURL=H3ONAELZ.js.map

package/dist/__chunks/{CAB67Z66.js → RQVUNK7V.js}

@@ -20,7 +20,8 @@ function Toast({
   heading,
   icon: Icon,
   on = "lightBackground",
-  timeout = 5e3
+  timeout = 5e3,
+  zIndex = 0
 }) {
   const [displayToast, setDisplayToast] = useState(true);
   useEffect(() => {
@@ -47,7 +48,8 @@ function Toast({
           left: 0,
           right: 0,
           bottom: 50,
-          boxShadow: "0px 16px 32px 0px rgba(0, 0, 0, 0.25)"
+          boxShadow: "0px 16px 32px 0px rgba(0, 0, 0, 0.25)",
+          zIndex
         }
       },
       "data-testid": dataTestId,
@@ -73,4 +75,4 @@ function Toast({
 export {
   Toast
 };
-//# sourceMappingURL=CAB67Z66.js.map
+//# sourceMappingURL=RQVUNK7V.js.map

package/dist/__chunks/RQVUNK7V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["import { type ComponentProps, useEffect, useState } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nfunction typographyColor({\n  on,\n}: {\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  return on === \"lightBackground\" ? \"white\" : \"gray900\";\n}\n\ntype ToastProps = {\n  /**\n   * The optional text of the toast under the heading\n   */\n  body?: string;\n  /**\n   * Test id for the toast\n   */\n  \"data-testid\"?: string;\n  heading: string;\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n  /**\n   * Indicate whether the toast renders on a light or dark background. Changes the color of the toast\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The number of milliseconds to wait before automatically dismissing the toast\n   *\n   * @defaultValue 5000\n   */\n  timeout?: number;\n  /**\n   * The z-index of the toast\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n};\n/**\n * [Toast](https://cambly-syntax.vercel.app/?path=/docs/components-toast--docs) is a component to display a small, dismissible notification.\n */\n\nexport default function Toast({\n  body,\n  \"data-testid\": dataTestId,\n  heading,\n  icon: Icon,\n  on = \"lightBackground\",\n  timeout = 5000,\n  zIndex = 0,\n}: ToastProps): JSX.Element {\n  const [displayToast, setDisplayToast] = useState<boolean>(true);\n\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setDisplayToast(false);\n    }, timeout);\n    return () => clearTimeout(timeoutId);\n  }, [timeout]);\n\n  return (\n    <Box\n      position=\"fixed\"\n      width=\"fit-content\"\n      marginStart=\"auto\"\n      marginEnd=\"auto\"\n      padding={4}\n      rounding=\"md\"\n      display={displayToast ? \"flex\" : \"none\"}\n      gap={5}\n      alignItems=\"center\"\n      backgroundColor={on === \"lightBackground\" ? \"gray900\" : \"white\"}\n      dangerouslySetInlineStyle={{\n        __style: {\n          left: 0,\n          right: 0,\n          bottom: 50,\n          boxShadow: \"0px 16px 32px 0px rgba(0, 0, 0, 0.25)\",\n          zIndex: zIndex,\n        },\n      }}\n      data-testid={dataTestId}\n    >\n      {Icon && <Icon color={typographyColor({ on })} size={400} />}\n      <Box display=\"flex\" direction=\"column\" gap={1}>\n        <Typography\n          size={300}\n          weight=\"semiBold\"\n          color={typographyColor({ on })}\n        >\n          {heading}\n        </Typography>\n        {body && (\n          <Typography lineClamp={2} color={typographyColor({ on })}>\n            {body}\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAAA,SAA8B,WAAW,gBAAgB;AA8F1C,cACT,YADS;AAzFf,SAAS,gBAAgB;AAAA,EACvB;AACF,GAEwB;AACtB,SAAO,OAAO,oBAAoB,UAAU;AAC9C;AA0Ce,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AACX,GAA4B;AAC1B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,YAAU,MAAM;AACd,UAAM,YAAY,WAAW,MAAM;AACjC,sBAAgB,KAAK;AAAA,IACvB,GAAG,OAAO;AACV,WAAO,MAAM,aAAa,SAAS;AAAA,EACrC,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAS,eAAe,SAAS;AAAA,MACjC,KAAK;AAAA,MACL,YAAW;AAAA,MACX,iBAAiB,OAAO,oBAAoB,YAAY;AAAA,MACxD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA,gBAAQ,oBAAC,QAAK,OAAO,gBAAgB,EAAE,GAAG,CAAC,GAAG,MAAM,KAAK;AAAA,QAC1D,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,KAAK,GAC1C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,OAAO,gBAAgB,EAAE,GAAG,CAAC;AAAA,cAE5B;AAAA;AAAA,UACH;AAAA,UACC,QACC,oBAAC,sBAAW,WAAW,GAAG,OAAO,gBAAgB,EAAE,GAAG,CAAC,GACpD,gBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/__chunks/{FPYIQTF7.js → UAHVOHJL.js}

@@ -10,4 +10,4 @@ export {
   ColorBaseGray700,
   ColorCambioWhite100
 };
-//# sourceMappingURL=FPYIQTF7.js.map
+//# sourceMappingURL=UAHVOHJL.js.map

package/dist/__chunks/{FPYIQTF7.js.map → UAHVOHJL.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 09 Dec 2025 00:02:58 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 06 Feb 2026 18:03:54 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}

package/dist/__chunks/{ZJMZR5UG.js → XLJZY2KR.js}

@@ -46,6 +46,7 @@ function TextField({
   const inputId = id != null ? id : reactId;
   const textColor = on === "darkBackground" ? "white" : "gray900";
   const errorTextColor = on !== "darkBackground" ? "destructive-lightBackground" : "destructive-darkBackground";
+  const labelElement = typeof label === "string" ? /* @__PURE__ */ jsx(Typography_default, { size: 100, color: textColor, children: label }) : label;
   return /* @__PURE__ */ jsxs(
     Box_default,
     {
@@ -59,7 +60,7 @@ function TextField({
         }
       },
       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: textColor, children: label }) }) }),
+        label && /* @__PURE__ */ jsx("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: labelElement }) }),
         /* @__PURE__ */ jsxs(
           Box_default,
           {
@@ -118,4 +119,4 @@ function TextField({
 export {
   TextField
 };
-//# sourceMappingURL=ZJMZR5UG.js.map
+//# sourceMappingURL=XLJZY2KR.js.map

package/dist/__chunks/XLJZY2KR.js.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\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Badge from \"../Badge/Badge\";\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 type TextFieldProps = {\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   * Indicate whether the component renders on a light or dark background. Changes the color of the input field, text and badge\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * Text for endBadge shown at the end of the input field.\n   */\n  endBadge?: string;\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 | ReactElement;\n  /**\n   * Maximum length of the TextField\n   */\n  maxLength?: number;\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   * 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  /**\n   * Specified legal number intervals for an input field. Specifically for time or number. If for time, specify in milliseconds. Must be a positive value.\n   */\n  step?: number;\n};\n\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  on = \"lightBackground\",\n  endBadge,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  maxLength,\n  onChange,\n  placeholder = \"\",\n  type = \"text\",\n  value = \"\",\n  step,\n}: TextFieldProps): ReactElement {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const reactId = useId();\n  const inputId = id ?? reactId;\n  const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n  const errorTextColor =\n    on !== \"darkBackground\"\n      ? \"destructive-lightBackground\"\n      : \"destructive-darkBackground\";\n\n  const labelElement =\n    typeof label === \"string\" ? (\n      <Typography size={100} color={textColor}>\n        {label}\n      </Typography>\n    ) : (\n      label\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}>{labelElement}</Box>\n        </label>\n      )}\n      <Box\n        display=\"flex\"\n        position=\"relative\"\n        justifyContent={endBadge ? \"end\" : \"start\"}\n      >\n        <input\n          autoComplete={autoComplete}\n          className={classNames(\n            styles.textfield,\n            styles.md,\n            styles.height,\n            errorText &&\n              (on === \"darkBackground\"\n                ? styles.transparentInputError\n                : styles.inputError),\n            {\n              [styles.transparent]: on === \"darkBackground\",\n            },\n          )}\n          data-testid={dataTestId}\n          disabled={disabled}\n          id={inputId}\n          maxLength={maxLength}\n          type={type}\n          onChange={onChange}\n          placeholder={placeholder}\n          value={value}\n          step={step}\n        />\n        {endBadge && (\n          <Box\n            position=\"absolute\"\n            dangerouslySetInlineStyle={{ __style: { top: \"25%\" } }}\n            marginEnd={4}\n          >\n            <Badge\n              text={endBadge}\n              color={on === \"lightBackground\" ? \"gray370\" : \"gray870\"}\n            />\n          </Box>\n        )}\n      </Box>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography size={100} color={errorText ? errorTextColor : textColor}>\n            {errorText || helperText}\n          </Typography>\n        </Box>\n      )}\n    </Box>\n  );\n}\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_17wxq_1\",\"transparent\":\"_transparent_17wxq_20\",\"label\":\"_label_17wxq_36\",\"md\":\"_md_17wxq_40\",\"height\":\"_height_17wxq_44\",\"inputError\":\"_inputError_17wxq_48\",\"transparentInputError\":\"_transparentInputError_17wxq_57\",\"transparenInputError\":\"_transparenInputError_17wxq_62\"}"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,eAAc,yBAAwB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,wBAAuB,yBAAwB,mCAAkC,wBAAuB,iCAAgC;;;ADmHlZ,cAuBA,YAvBA;AA7BS,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,KAAK;AAAA,EACL;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AACF,GAAiC;AAC/B,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AACtB,QAAM,YAAY,OAAO,mBAAmB,UAAU;AACtD,QAAM,iBACJ,OAAO,mBACH,gCACA;AAEN,QAAM,eACJ,OAAO,UAAU,WACf,oBAAC,sBAAW,MAAM,KAAK,OAAO,WAC3B,iBACH,IAEA;AAEJ,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,GAAI,wBAAa,GAClC;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,gBAAgB,WAAW,QAAQ;AAAA,YAEnC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,WAAW;AAAA,oBACT,yBAAO;AAAA,oBACP,yBAAO;AAAA,oBACP,yBAAO;AAAA,oBACP,cACG,OAAO,mBACJ,yBAAO,wBACP,yBAAO;AAAA,oBACb;AAAA,sBACE,CAAC,yBAAO,WAAW,GAAG,OAAO;AAAA,oBAC/B;AAAA,kBACF;AAAA,kBACA,eAAa;AAAA,kBACb;AAAA,kBACA,IAAI;AAAA,kBACJ;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cACC,YACC;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAS;AAAA,kBACT,2BAA2B,EAAE,SAAS,EAAE,KAAK,MAAM,EAAE;AAAA,kBACrD,WAAW;AAAA,kBAEX;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM;AAAA,sBACN,OAAO,OAAO,oBAAoB,YAAY;AAAA;AAAA,kBAChD;AAAA;AAAA,cACF;AAAA;AAAA;AAAA,QAEJ;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAO,YAAY,iBAAiB,WACxD,uBAAa,YAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/index.js

@@ -38,11 +38,11 @@ import {
 } from "./__chunks/STLN5GZL.js";
 import {
   SelectList
-} from "./__chunks/RK5LMYZS.js";
+} from "./__chunks/H3ONAELZ.js";
 import "./__chunks/SPQ7DQHG.js";
 import {
   RichSelectList_default
-} from "./__chunks/BF3QK6IT.js";
+} from "./__chunks/5ZLA3LWK.js";
 import "./__chunks/R6OBV53M.js";
 import {
   ButtonGroup_default
@@ -63,7 +63,7 @@ import {
   IconButton_default
 } from "./__chunks/KEJPRZJ5.js";
 import "./__chunks/4U4UW4AK.js";
-import "./__chunks/FPYIQTF7.js";
+import "./__chunks/UAHVOHJL.js";
 import "./__chunks/Y53Z25OG.js";
 import "./__chunks/DDUJFFG7.js";
 import "./__chunks/N7G37EKF.js";
@@ -80,19 +80,19 @@ import "./__chunks/6TM2ES2T.js";
 import "./__chunks/ODMJANSX.js";
 import {
   Toast
-} from "./__chunks/CAB67Z66.js";
+} from "./__chunks/RQVUNK7V.js";
 import {
   ThemeProvider
 } from "./__chunks/KTX4P4Q2.js";
 import {
   TextField
-} from "./__chunks/ZJMZR5UG.js";
+} from "./__chunks/XLJZY2KR.js";
 import {
   Badge_default
 } from "./__chunks/UCZXBZIM.js";
 import {
   TextArea_default
-} from "./__chunks/OCGBS7FM.js";
+} from "./__chunks/FTC7VVZ2.js";
 import "./__chunks/4U4UW4AK.js";
 import {
   TapArea_default

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cambly/syntax-core",
   "description": "Cambly design system core components",
-  "version": "23.0.0",
+  "version": "23.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/__chunks/CAB67Z66.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["import { type ComponentProps, useEffect, useState } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nfunction typographyColor({\n  on,\n}: {\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  return on === \"lightBackground\" ? \"white\" : \"gray900\";\n}\n\ntype ToastProps = {\n  /**\n   * The optional text of the toast under the heading\n   */\n  body?: string;\n  /**\n   * Test id for the toast\n   */\n  \"data-testid\"?: string;\n  heading: string;\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n  /**\n   * Indicate whether the toast renders on a light or dark background. Changes the color of the toast\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The number of milliseconds to wait before automatically dismissing the toast\n   *\n   * @defaultValue 5000\n   */\n  timeout?: number;\n};\n/**\n * [Toast](https://cambly-syntax.vercel.app/?path=/docs/components-toast--docs) is a component to display a small, dismissible notification.\n */\n\nexport default function Toast({\n  body,\n  \"data-testid\": dataTestId,\n  heading,\n  icon: Icon,\n  on = \"lightBackground\",\n  timeout = 5000,\n}: ToastProps): JSX.Element {\n  const [displayToast, setDisplayToast] = useState<boolean>(true);\n\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setDisplayToast(false);\n    }, timeout);\n    return () => clearTimeout(timeoutId);\n  }, [timeout]);\n\n  return (\n    <Box\n      position=\"fixed\"\n      width=\"fit-content\"\n      marginStart=\"auto\"\n      marginEnd=\"auto\"\n      padding={4}\n      rounding=\"md\"\n      display={displayToast ? \"flex\" : \"none\"}\n      gap={5}\n      alignItems=\"center\"\n      backgroundColor={on === \"lightBackground\" ? \"gray900\" : \"white\"}\n      dangerouslySetInlineStyle={{\n        __style: {\n          left: 0,\n          right: 0,\n          bottom: 50,\n          boxShadow: \"0px 16px 32px 0px rgba(0, 0, 0, 0.25)\",\n        },\n      }}\n      data-testid={dataTestId}\n    >\n      {Icon && <Icon color={typographyColor({ on })} size={400} />}\n      <Box display=\"flex\" direction=\"column\" gap={1}>\n        <Typography\n          size={300}\n          weight=\"semiBold\"\n          color={typographyColor({ on })}\n        >\n          {heading}\n        </Typography>\n        {body && (\n          <Typography lineClamp={2} color={typographyColor({ on })}>\n            {body}\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAAA,SAA8B,WAAW,gBAAgB;AAsF1C,cACT,YADS;AAjFf,SAAS,gBAAgB;AAAA,EACvB;AACF,GAEwB;AACtB,SAAO,OAAO,oBAAoB,UAAU;AAC9C;AAoCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,GAA4B;AAC1B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,YAAU,MAAM;AACd,UAAM,YAAY,WAAW,MAAM;AACjC,sBAAgB,KAAK;AAAA,IACvB,GAAG,OAAO;AACV,WAAO,MAAM,aAAa,SAAS;AAAA,EACrC,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAS,eAAe,SAAS;AAAA,MACjC,KAAK;AAAA,MACL,YAAW;AAAA,MACX,iBAAiB,OAAO,oBAAoB,YAAY;AAAA,MACxD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA,gBAAQ,oBAAC,QAAK,OAAO,gBAAgB,EAAE,GAAG,CAAC,GAAG,MAAM,KAAK;AAAA,QAC1D,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,KAAK,GAC1C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,OAAO,gBAAgB,EAAE,GAAG,CAAC;AAAA,cAE5B;AAAA;AAAA,UACH;AAAA,UACC,QACC,oBAAC,sBAAW,WAAW,GAAG,OAAO,gBAAgB,EAAE,GAAG,CAAC,GACpD,gBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/__chunks/OCGBS7FM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Indicate whether the component renders on a light or dark background. Changes the color of the input field and text\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Sets which part resizes when the user drags the resize handle.\n   * * `none`: TextArea can not be resized\n   * * `horizontal`: TextArea can only be resized horizontally\n   * * `vertical`: TextArea can only be resized vertically\n   * * `both`: TextArea can be resized horizontally and vertically\n   *\n   * @defaultvalue `none`\n   */\n  resize?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      value = \"\",\n      on,\n      onChange,\n      resize = \"none\",\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const inputId = id ?? reactId;\n    const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n    const errorTextColor =\n      on !== \"darkBackground\"\n        ? \"destructive-lightBackground\"\n        : \"destructive-darkBackground\";\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        position=\"relative\"\n      >\n        {label && (\n          <label className={textFieldStyles.label} htmlFor={inputId}>\n            <Box paddingX={1}>\n              <Typography size={100} color={textColor}>\n                {label}\n              </Typography>\n            </Box>\n          </label>\n        )}\n        <Typography size={100}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              styles.textarea,\n              styles[`resize${resize}`],\n              errorText &&\n                (on === \"darkBackground\"\n                  ? textFieldStyles.transparentInputError\n                  : textFieldStyles.inputError),\n              {\n                [textFieldStyles.transparent]: on === \"darkBackground\",\n              },\n            )}\n            id={inputId}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            onChange={onChange}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n          />\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? errorTextColor : textColor}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_1sb0v_1\",\"resizenone\":\"_resizenone_1sb0v_6\",\"resizehorizontal\":\"_resizehorizontal_1sb0v_10\",\"resizevertical\":\"_resizevertical_1sb0v_14\",\"resizeboth\":\"_resizeboth_1sb0v_18\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_17wxq_1\",\"transparent\":\"_transparent_17wxq_20\",\"label\":\"_label_17wxq_36\",\"md\":\"_md_17wxq_40\",\"height\":\"_height_17wxq_44\",\"inputError\":\"_inputError_17wxq_48\",\"transparentInputError\":\"_transparentInputError_17wxq_57\",\"transparenInputError\":\"_transparenInputError_17wxq_62\"}"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,cAAa,uBAAsB,oBAAmB,8BAA6B,kBAAiB,4BAA2B,cAAa,uBAAsB;;;ACA/M,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,eAAc,yBAAwB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,wBAAuB,yBAAwB,mCAAkC,wBAAuB,iCAAgC;;;AFKxZ,OAAO,gBAAgB;AAmGjB,SAeQ,KAfR;AA9BN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,UAAU,kBAAM;AACtB,UAAM,YAAY,OAAO,mBAAmB,UAAU;AACtD,UAAM,iBACJ,OAAO,mBACH,gCACA;AAEN,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAS;AAAA,QAER;AAAA,mBACC,oBAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAO,WAC3B,iBACH,GACF,GACF;AAAA,UAEF,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,wBAAO;AAAA,gBACP,wBAAO,SAAS,QAAQ;AAAA,gBACxB,cACG,OAAO,mBACJ,yBAAgB,wBAChB,yBAAgB;AAAA,gBACtB;AAAA,kBACE,CAAC,yBAAgB,WAAW,GAAG,OAAO;AAAA,gBACxC;AAAA,cACF;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,iBAAiB;AAAA,cAEnC,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}

package/dist/__chunks/ZJMZR5UG.js.map

@@ -1 +0,0 @@
-{"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\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Badge from \"../Badge/Badge\";\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: disabledProp = false,\n  on = \"lightBackground\",\n  endBadge,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  maxLength,\n  onChange,\n  placeholder = \"\",\n  type = \"text\",\n  value = \"\",\n  step,\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   * Indicate whether the component renders on a light or dark background. Changes the color of the input field, text and badge\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * Text for endBadge shown at the end of the input field.\n   */\n  endBadge?: string;\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   * Maximum length of the TextField\n   */\n  maxLength?: number;\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   * 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  /**\n   * Specified legal number intervals for an input field. Specifically for time or number. If for time, specify in milliseconds. Must be a positive value.\n   */\n  step?: number;\n}): ReactElement {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const reactId = useId();\n  const inputId = id ?? reactId;\n  const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n  const errorTextColor =\n    on !== \"darkBackground\"\n      ? \"destructive-lightBackground\"\n      : \"destructive-darkBackground\";\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={textColor}>\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <Box\n        display=\"flex\"\n        position=\"relative\"\n        justifyContent={endBadge ? \"end\" : \"start\"}\n      >\n        <input\n          autoComplete={autoComplete}\n          className={classNames(\n            styles.textfield,\n            styles.md,\n            styles.height,\n            errorText &&\n              (on === \"darkBackground\"\n                ? styles.transparentInputError\n                : styles.inputError),\n            {\n              [styles.transparent]: on === \"darkBackground\",\n            },\n          )}\n          data-testid={dataTestId}\n          disabled={disabled}\n          id={inputId}\n          maxLength={maxLength}\n          type={type}\n          onChange={onChange}\n          placeholder={placeholder}\n          value={value}\n          step={step}\n        />\n        {endBadge && (\n          <Box\n            position=\"absolute\"\n            dangerouslySetInlineStyle={{ __style: { top: \"25%\" } }}\n            marginEnd={4}\n          >\n            <Badge\n              text={endBadge}\n              color={on === \"lightBackground\" ? \"gray370\" : \"gray870\"}\n            />\n          </Box>\n        )}\n      </Box>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography size={100} color={errorText ? errorTextColor : textColor}>\n            {errorText || helperText}\n          </Typography>\n        </Box>\n      )}\n    </Box>\n  );\n}\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_17wxq_1\",\"transparent\":\"_transparent_17wxq_20\",\"label\":\"_label_17wxq_36\",\"md\":\"_md_17wxq_40\",\"height\":\"_height_17wxq_44\",\"inputError\":\"_inputError_17wxq_48\",\"transparentInputError\":\"_transparentInputError_17wxq_57\",\"transparenInputError\":\"_transparenInputError_17wxq_62\"}"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,eAAc,yBAAwB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,wBAAuB,yBAAwB,mCAAkC,wBAAuB,iCAAgC;;;AD6H5Y,cAMN,YANM;AA9GG,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,KAAK;AAAA,EACL;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AACF,GAqEiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AACtB,QAAM,YAAY,OAAO,mBAAmB,UAAU;AACtD,QAAM,iBACJ,OAAO,mBACH,gCACA;AACN,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,OAAO,WAC3B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,gBAAgB,WAAW,QAAQ;AAAA,YAEnC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,WAAW;AAAA,oBACT,yBAAO;AAAA,oBACP,yBAAO;AAAA,oBACP,yBAAO;AAAA,oBACP,cACG,OAAO,mBACJ,yBAAO,wBACP,yBAAO;AAAA,oBACb;AAAA,sBACE,CAAC,yBAAO,WAAW,GAAG,OAAO;AAAA,oBAC/B;AAAA,kBACF;AAAA,kBACA,eAAa;AAAA,kBACb;AAAA,kBACA,IAAI;AAAA,kBACJ;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cACC,YACC;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAS;AAAA,kBACT,2BAA2B,EAAE,SAAS,EAAE,KAAK,MAAM,EAAE;AAAA,kBACrD,WAAW;AAAA,kBAEX;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM;AAAA,sBACN,OAAO,OAAO,oBAAoB,YAAY;AAAA;AAAA,kBAChD;AAAA;AAAA,cACF;AAAA;AAAA;AAAA,QAEJ;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAO,YAAY,iBAAiB,WACxD,uBAAa,YAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}