@purpur/library 9.0.1 → 9.0.3

package/dist/scss/action.scss

@@ -0,0 +1,173 @@
+@mixin color {
+  $root: &;
+
+  position: relative;
+  outline: 0;
+  transition: all var(--purpur-motion-duration-100) ease;
+
+  &:focus {
+    &::before {
+      box-shadow: 0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);
+      content: "";
+      display: block;
+      inset: calc(var(--purpur-spacing-25) * -1);
+      position: absolute;
+    }
+
+    &:not(:focus-visible) {
+      &::before {
+        box-shadow: none;
+      }
+    }
+  }
+
+  &--primary {
+    background-color: var(--purpur-color-background-interactive-primary);
+    color: var(--purpur-color-text-interactive-on-primary);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-primary-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-primary-active);
+    }
+  }
+
+  &--primary-negative {
+    background-color: var(--purpur-color-background-interactive-primary-negative);
+    color: var(--purpur-color-text-interactive-on-primary-negative);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-primary-hover-negative);
+      border-color: var(--purpur-color-background-interactive-primary-hover-negative);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-primary-active-negative);
+      border-color: var(--purpur-color-background-interactive-primary-active-negative);
+    }
+  }
+
+  &--secondary {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 var(--purpur-border-width-xs)
+      var(--purpur-color-border-interactive-primary);
+    color: var(--purpur-color-text-interactive-primary);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-active);
+    }
+  }
+
+  &--secondary-negative {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 var(--purpur-border-width-xs)
+      var(--purpur-color-border-interactive-primary-negative);
+    color: var(--purpur-color-text-interactive-primary-negative);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-hover-negative);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-active-negative);
+    }
+  }
+
+  &--expressive {
+    background-color: var(--purpur-color-background-interactive-expressive);
+    color: var(--purpur-color-text-interactive-on-expressive);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-expressive-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-expressive-active);
+    }
+  }
+
+  &--expressive-negative {
+    background-color: var(--purpur-color-background-interactive-expressive-negative);
+    color: var(--purpur-color-text-interactive-on-expressive-negative);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-expressive-hover-negative);
+      color: var(--purpur-color-text-interactive-on-expressive-hover-negative);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-expressive-active-negative);
+      color: var(--purpur-color-text-interactive-on-expressive-active-negative);
+    }
+  }
+}
+
+@mixin action {
+  $root: &;
+
+  align-items: center;
+  border-radius: var(--purpur-border-radius-full);
+  border-width: 0;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--purpur-typography-scale-100);
+  font-family: var(--purpur-typography-family-default);
+  font-weight: var(--purpur-typography-weight-medium);
+  gap: var(--purpur-spacing-100);
+  justify-content: center;
+  line-height: var(--purpur-spacing-300);
+  text-decoration: none;
+  width: auto;
+
+  &:focus::before {
+    border-radius: var(--purpur-border-radius-full);
+  }
+
+  svg {
+    display: block;
+  }
+
+  &--xs {
+    padding: var(--purpur-spacing-50) var(--purpur-spacing-250);
+
+    &#{$root}--icon-only {
+      padding: var(--purpur-spacing-100);
+    }
+  }
+
+  &--sm {
+    padding: var(--purpur-spacing-100) var(--purpur-spacing-250);
+
+    &#{$root}--icon-only {
+      padding: var(--purpur-spacing-100);
+    }
+  }
+
+  &--md {
+    padding: var(--purpur-spacing-150) var(--purpur-spacing-300);
+
+    &#{$root}--icon-only {
+      padding: var(--purpur-spacing-150);
+    }
+  }
+
+  &--lg {
+    padding: var(--purpur-spacing-200) var(--purpur-spacing-400);
+
+    &#{$root}--icon-only {
+      padding: var(--purpur-spacing-200);
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  @include color();
+}

package/dist/text-area-9ggiIWtJ.js

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),j=require("react"),y=require("./field-error-text-FhQulSV5.js"),O=require("./field-helper-text-DSKO-Tce.js"),R=require("./label-yHK80hhV.js");require("./ThemeProvider-ipAIFRUi.js");const T=require("./useColorScheme-DNNu9bz0.js"),A=require("./bind-DeUYJ6m9.js"),s={"purpur-text-area":"_purpur-text-area_1qqf0_1","purpur-text-area__label":"_purpur-text-area__label_1qqf0_8","purpur-text-area__label-text":"_purpur-text-area__label-text_1qqf0_13","purpur-text-area__frame":"_purpur-text-area__frame_1qqf0_16","purpur-text-area__textarea-container":"_purpur-text-area__textarea-container_1qqf0_23","purpur-text-area__textarea-container--disabled":"_purpur-text-area__textarea-container--disabled_1qqf0_33","purpur-text-area__textarea-container--readonly":"_purpur-text-area__textarea-container--readonly_1qqf0_36","purpur-text-area__textarea":"_purpur-text-area__textarea_1qqf0_23","purpur-text-area__textarea--light":"_purpur-text-area__textarea--light_1qqf0_52","purpur-text-area__textarea--dark":"_purpur-text-area__textarea--dark_1qqf0_60","purpur-text-area__textarea--valid":"_purpur-text-area__textarea--valid_1qqf0_91","purpur-text-area__textarea--error":"_purpur-text-area__textarea--error_1qqf0_91"},c={NONE:"none",BOTH:"both",HORIZONTAL:"horizontal",VERTICAL:"vertical"},l=A.c.bind(s),e="purpur-text-area",p=j.forwardRef(({id:i,["data-testid"]:x,className:o,errorText:r,helperText:n,label:d,rows:q=3,cols:b=90,resize:f=c.BOTH,style:h,...a},m)=>{const[$]=T.useColorScheme(),_=N=>x?`${x}-${N}`:void 0,u=n?`${i}-helper-text`:void 0,v=l(`${e}__textarea-container`,{[`${e}__textarea-container--disabled`]:a.disabled,[`${e}__textarea-container--readonly`]:a.readOnly&&!a.disabled});return t.jsxs("div",{className:l(o,e),"data-testid":x,children:[d&&t.jsxs(R.Label,{htmlFor:i,disabled:a.disabled,className:s[`${e}__label`],"data-testid":_("label"),children:[a.required&&t.jsx("span",{"aria-hidden":!0,children:"*"}),d]}),t.jsxs("div",{className:v,children:[t.jsx("textarea",{...a,ref:m,id:i,"data-testid":_("textarea"),"aria-describedby":a["aria-describedby"]||u,"aria-invalid":a["aria-invalid"]||!!r,className:l(`${e}__textarea`,`${e}__textarea--${$}`,{[`${e}__textarea--error`]:!!r}),rows:q,cols:b,style:{resize:f,...h}}),t.jsx("div",{className:s[`${e}__frame`]})]}),u&&t.jsx(O.FieldHelperText,{"data-testid":_("helper-text"),id:u,children:n}),r&&t.jsx(y.FieldErrorText,{"data-testid":_("error-text"),children:r})]})});p.displayName="TextArea";exports.ResizeOption=c;exports.TextArea=p;
+//# sourceMappingURL=text-area-9ggiIWtJ.js.map

package/dist/text-area-9ggiIWtJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area-9ggiIWtJ.js","sources":["../../../components/text-area/src/text-area.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { FieldErrorText } from \"@purpur/field-error-text\";\nimport { FieldHelperText } from \"@purpur/field-helper-text\";\nimport { Label } from \"@purpur/label\";\nimport { useColorScheme } from \"@purpur/theme\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./text-area.module.scss\";\n\nexport const ResizeOption = {\n  NONE: \"none\",\n  BOTH: \"both\",\n  HORIZONTAL: \"horizontal\",\n  VERTICAL: \"vertical\",\n} as const;\n\nexport type ResizeOption = (typeof ResizeOption)[keyof typeof ResizeOption];\n\nexport type TextAreaProps = Omit<BaseProps<\"textarea\">, \"id\"> & {\n  id: string;\n  /**\n   * Use to render error message below the text area. The text area renders with error appearance.\n   * */\n  errorText?: string;\n  /**\n   * Use to give context about the text area's input. Renders below the text area.\n   * */\n  helperText?: string;\n  /**\n   * The label of the text area.\n   * */\n  label?: string;\n  /**\n   * The height of the text area, measured in number of rows.\n   * */\n  rows?: number;\n  /**\n   * The width of the text area, measured in number of cols.\n   * */\n  cols?: number;\n  /**\n   * Controls whether the text area can be resized, and in which direction.\n   * */\n  resize?: ResizeOption;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-text-area\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      id,\n      [\"data-testid\"]: dataTestId,\n      className,\n      errorText,\n      helperText,\n      label,\n      rows = 3,\n      cols = 90,\n      resize = ResizeOption.BOTH,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const [colorScheme] = useColorScheme();\n\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n\n    const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n    const textAreaContainerClassnames = cx(`${rootClassName}__textarea-container`, {\n      [`${rootClassName}__textarea-container--disabled`]: props.disabled,\n      [`${rootClassName}__textarea-container--readonly`]: props.readOnly && !props.disabled,\n    });\n\n    return (\n      <div className={cx(className, rootClassName)} data-testid={dataTestId}>\n        {label && (\n          <Label\n            htmlFor={id}\n            disabled={props.disabled}\n            className={styles[`${rootClassName}__label`]}\n            data-testid={getTestId(\"label\")}\n          >\n            {props.required && <span aria-hidden>*</span>}\n            {label}\n          </Label>\n        )}\n        <div className={textAreaContainerClassnames}>\n          <textarea\n            {...props}\n            ref={ref}\n            id={id}\n            data-testid={getTestId(\"textarea\")}\n            aria-describedby={props[\"aria-describedby\"] || helperTextId}\n            aria-invalid={props[\"aria-invalid\"] || !!errorText}\n            className={cx(\n              `${rootClassName}__textarea`,\n              `${rootClassName}__textarea--${colorScheme}`,\n              {\n                [`${rootClassName}__textarea--error`]: !!errorText,\n              }\n            )}\n            rows={rows}\n            cols={cols}\n            style={{ resize, ...style }}\n          />\n          <div className={styles[`${rootClassName}__frame`]} />\n        </div>\n        {helperTextId && (\n          <FieldHelperText data-testid={getTestId(\"helper-text\")} id={helperTextId}>\n            {helperText}\n          </FieldHelperText>\n        )}\n        {errorText && (\n          <FieldErrorText data-testid={getTestId(\"error-text\")}>{errorText}</FieldErrorText>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["ResizeOption","cx","c","styles","rootClassName","TextArea","forwardRef","id","dataTestId","className","errorText","helperText","label","rows","cols","resize","style","props","ref","colorScheme","useColorScheme","getTestId","name","helperTextId","textAreaContainerClassnames","jsxs","Label","jsx","FieldHelperText","FieldErrorText"],"mappings":"suCAUaA,EAAe,CAC1B,KAAM,OACN,KAAM,OACN,WAAY,aACZ,SAAU,UACZ,EAgCMC,EAAKC,EAAAA,EAAE,KAAKC,CAAM,EAClBC,EAAgB,mBAETC,EAAWC,EAAAA,WACtB,CACE,CACE,GAAAC,EACA,CAAC,eAAgBC,EACjB,UAAAC,EACA,UAAAC,EACA,WAAAC,EAAA,MACAC,EACA,KAAAC,EAAO,EACP,KAAAC,EAAO,GACP,OAAAC,EAASf,EAAa,KACtB,MAAAgB,EACA,GAAGC,CAAA,EAELC,IACG,CACH,KAAM,CAACC,CAAW,EAAIC,iBAAA,EAEhBC,EAAaC,GAAkBd,EAAa,GAAGA,CAAU,IAAIc,CAAI,GAAK,OAEtEC,EAAeZ,EAAa,GAAGJ,CAAE,eAAiB,OAElDiB,EAA8BvB,EAAG,GAAGG,CAAa,uBAAwB,CAC7E,CAAC,GAAGA,CAAa,gCAAgC,EAAGa,EAAM,SAC1D,CAAC,GAAGb,CAAa,gCAAgC,EAAGa,EAAM,UAAY,CAACA,EAAM,QAAA,CAC9E,EAED,OACEQ,OAAC,OAAI,UAAWxB,EAAGQ,EAAWL,CAAa,EAAG,cAAaI,EACxD,SAAA,CAAAI,GACCa,EAAAA,KAACC,EAAAA,MAAA,CACC,QAASnB,EACT,SAAUU,EAAM,SAChB,UAAWd,EAAO,GAAGC,CAAa,SAAS,EAC3C,cAAaiB,EAAU,OAAO,EAE7B,SAAA,CAAAJ,EAAM,UAAYU,EAAAA,IAAC,OAAA,CAAK,cAAW,GAAC,SAAA,IAAC,EACrCf,CAAA,CAAA,CAAA,EAGLa,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAG,EAAAA,IAAC,WAAA,CACE,GAAGV,EACJ,IAAAC,EACA,GAAAX,EACA,cAAac,EAAU,UAAU,EACjC,mBAAkBJ,EAAM,kBAAkB,GAAKM,EAC/C,eAAcN,EAAM,cAAc,GAAK,CAAC,CAACP,EACzC,UAAWT,EACT,GAAGG,CAAa,aAChB,GAAGA,CAAa,eAAee,CAAW,GAC1C,CACE,CAAC,GAAGf,CAAa,mBAAmB,EAAG,CAAC,CAACM,CAAA,CAC3C,EAEF,KAAAG,EACA,KAAAC,EACA,MAAO,CAAE,OAAAC,EAAQ,GAAGC,CAAA,CAAM,CAAA,QAE3B,MAAA,CAAI,UAAWb,EAAO,GAAGC,CAAa,SAAS,CAAA,CAAG,CAAA,EACrD,EACCmB,SACEK,kBAAA,CAAgB,cAAaP,EAAU,aAAa,EAAG,GAAIE,EACzD,SAAAZ,CAAA,CACH,EAEDD,GACCiB,EAAAA,IAACE,EAAAA,eAAA,CAAe,cAAaR,EAAU,YAAY,EAAI,SAAAX,CAAA,CAAU,CAAA,EAErE,CAEJ,CACF,EAEAL,EAAS,YAAc"}

package/dist/text-area-Cb9Hm2Z9.mjs

@@ -0,0 +1,93 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { F as y } from "./field-error-text-CBSX8dGx.mjs";
+import { F as O } from "./field-helper-text-C5ee4SFV.mjs";
+import { L as A } from "./label-7sJe5-pX.mjs";
+import "./ThemeProvider-CrjMv3M8.mjs";
+import { u as C } from "./useColorScheme-DRQcbSog.mjs";
+import { c as F } from "./bind-CU-R61T-.mjs";
+const p = {
+  "purpur-text-area": "_purpur-text-area_1qqf0_1",
+  "purpur-text-area__label": "_purpur-text-area__label_1qqf0_8",
+  "purpur-text-area__label-text": "_purpur-text-area__label-text_1qqf0_13",
+  "purpur-text-area__frame": "_purpur-text-area__frame_1qqf0_16",
+  "purpur-text-area__textarea-container": "_purpur-text-area__textarea-container_1qqf0_23",
+  "purpur-text-area__textarea-container--disabled": "_purpur-text-area__textarea-container--disabled_1qqf0_33",
+  "purpur-text-area__textarea-container--readonly": "_purpur-text-area__textarea-container--readonly_1qqf0_36",
+  "purpur-text-area__textarea": "_purpur-text-area__textarea_1qqf0_23",
+  "purpur-text-area__textarea--light": "_purpur-text-area__textarea--light_1qqf0_52",
+  "purpur-text-area__textarea--dark": "_purpur-text-area__textarea--dark_1qqf0_60",
+  "purpur-text-area__textarea--valid": "_purpur-text-area__textarea--valid_1qqf0_91",
+  "purpur-text-area__textarea--error": "_purpur-text-area__textarea--error_1qqf0_91"
+}, R = {
+  NONE: "none",
+  BOTH: "both",
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical"
+}, l = F.bind(p), e = "purpur-text-area", T = N(
+  ({
+    id: i,
+    ["data-testid"]: x,
+    className: s,
+    errorText: r,
+    helperText: n,
+    label: o,
+    rows: c = 3,
+    cols: m = 90,
+    resize: q = R.BOTH,
+    style: f,
+    ...a
+  }, b) => {
+    const [h] = C(), _ = (v) => x ? `${x}-${v}` : void 0, d = n ? `${i}-helper-text` : void 0, $ = l(`${e}__textarea-container`, {
+      [`${e}__textarea-container--disabled`]: a.disabled,
+      [`${e}__textarea-container--readonly`]: a.readOnly && !a.disabled
+    });
+    return /* @__PURE__ */ u("div", { className: l(s, e), "data-testid": x, children: [
+      o && /* @__PURE__ */ u(
+        A,
+        {
+          htmlFor: i,
+          disabled: a.disabled,
+          className: p[`${e}__label`],
+          "data-testid": _("label"),
+          children: [
+            a.required && /* @__PURE__ */ t("span", { "aria-hidden": !0, children: "*" }),
+            o
+          ]
+        }
+      ),
+      /* @__PURE__ */ u("div", { className: $, children: [
+        /* @__PURE__ */ t(
+          "textarea",
+          {
+            ...a,
+            ref: b,
+            id: i,
+            "data-testid": _("textarea"),
+            "aria-describedby": a["aria-describedby"] || d,
+            "aria-invalid": a["aria-invalid"] || !!r,
+            className: l(
+              `${e}__textarea`,
+              `${e}__textarea--${h}`,
+              {
+                [`${e}__textarea--error`]: !!r
+              }
+            ),
+            rows: c,
+            cols: m,
+            style: { resize: q, ...f }
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: p[`${e}__frame`] })
+      ] }),
+      d && /* @__PURE__ */ t(O, { "data-testid": _("helper-text"), id: d, children: n }),
+      r && /* @__PURE__ */ t(y, { "data-testid": _("error-text"), children: r })
+    ] });
+  }
+);
+T.displayName = "TextArea";
+export {
+  R,
+  T
+};
+//# sourceMappingURL=text-area-Cb9Hm2Z9.mjs.map

package/dist/text-area-Cb9Hm2Z9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area-Cb9Hm2Z9.mjs","sources":["../../../components/text-area/src/text-area.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { FieldErrorText } from \"@purpur/field-error-text\";\nimport { FieldHelperText } from \"@purpur/field-helper-text\";\nimport { Label } from \"@purpur/label\";\nimport { useColorScheme } from \"@purpur/theme\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./text-area.module.scss\";\n\nexport const ResizeOption = {\n  NONE: \"none\",\n  BOTH: \"both\",\n  HORIZONTAL: \"horizontal\",\n  VERTICAL: \"vertical\",\n} as const;\n\nexport type ResizeOption = (typeof ResizeOption)[keyof typeof ResizeOption];\n\nexport type TextAreaProps = Omit<BaseProps<\"textarea\">, \"id\"> & {\n  id: string;\n  /**\n   * Use to render error message below the text area. The text area renders with error appearance.\n   * */\n  errorText?: string;\n  /**\n   * Use to give context about the text area's input. Renders below the text area.\n   * */\n  helperText?: string;\n  /**\n   * The label of the text area.\n   * */\n  label?: string;\n  /**\n   * The height of the text area, measured in number of rows.\n   * */\n  rows?: number;\n  /**\n   * The width of the text area, measured in number of cols.\n   * */\n  cols?: number;\n  /**\n   * Controls whether the text area can be resized, and in which direction.\n   * */\n  resize?: ResizeOption;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-text-area\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      id,\n      [\"data-testid\"]: dataTestId,\n      className,\n      errorText,\n      helperText,\n      label,\n      rows = 3,\n      cols = 90,\n      resize = ResizeOption.BOTH,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const [colorScheme] = useColorScheme();\n\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n\n    const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n    const textAreaContainerClassnames = cx(`${rootClassName}__textarea-container`, {\n      [`${rootClassName}__textarea-container--disabled`]: props.disabled,\n      [`${rootClassName}__textarea-container--readonly`]: props.readOnly && !props.disabled,\n    });\n\n    return (\n      <div className={cx(className, rootClassName)} data-testid={dataTestId}>\n        {label && (\n          <Label\n            htmlFor={id}\n            disabled={props.disabled}\n            className={styles[`${rootClassName}__label`]}\n            data-testid={getTestId(\"label\")}\n          >\n            {props.required && <span aria-hidden>*</span>}\n            {label}\n          </Label>\n        )}\n        <div className={textAreaContainerClassnames}>\n          <textarea\n            {...props}\n            ref={ref}\n            id={id}\n            data-testid={getTestId(\"textarea\")}\n            aria-describedby={props[\"aria-describedby\"] || helperTextId}\n            aria-invalid={props[\"aria-invalid\"] || !!errorText}\n            className={cx(\n              `${rootClassName}__textarea`,\n              `${rootClassName}__textarea--${colorScheme}`,\n              {\n                [`${rootClassName}__textarea--error`]: !!errorText,\n              }\n            )}\n            rows={rows}\n            cols={cols}\n            style={{ resize, ...style }}\n          />\n          <div className={styles[`${rootClassName}__frame`]} />\n        </div>\n        {helperTextId && (\n          <FieldHelperText data-testid={getTestId(\"helper-text\")} id={helperTextId}>\n            {helperText}\n          </FieldHelperText>\n        )}\n        {errorText && (\n          <FieldErrorText data-testid={getTestId(\"error-text\")}>{errorText}</FieldErrorText>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["ResizeOption","cx","c","styles","rootClassName","TextArea","forwardRef","id","dataTestId","className","errorText","helperText","label","rows","cols","resize","style","props","ref","colorScheme","useColorScheme","getTestId","name","helperTextId","textAreaContainerClassnames","jsxs","Label","jsx","FieldHelperText","FieldErrorText"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAUaA,IAAe;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,UAAU;AACZ,GAgCMC,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,oBAETC,IAAWC;AAAA,EACtB,CACE;AAAA,IACE,IAAAC;AAAA,IACA,CAAC,gBAAgBC;AAAA,IACjB,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,MAAAC,IAAO;AAAA,IACP,QAAAC,IAASf,EAAa;AAAA,IACtB,OAAAgB;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAACC,CAAW,IAAIC,EAAA,GAEhBC,IAAY,CAACC,MAAkBd,IAAa,GAAGA,CAAU,IAAIc,CAAI,KAAK,QAEtEC,IAAeZ,IAAa,GAAGJ,CAAE,iBAAiB,QAElDiB,IAA8BvB,EAAG,GAAGG,CAAa,wBAAwB;AAAA,MAC7E,CAAC,GAAGA,CAAa,gCAAgC,GAAGa,EAAM;AAAA,MAC1D,CAAC,GAAGb,CAAa,gCAAgC,GAAGa,EAAM,YAAY,CAACA,EAAM;AAAA,IAAA,CAC9E;AAED,WACE,gBAAAQ,EAAC,SAAI,WAAWxB,EAAGQ,GAAWL,CAAa,GAAG,eAAaI,GACxD,UAAA;AAAA,MAAAI,KACC,gBAAAa;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASnB;AAAA,UACT,UAAUU,EAAM;AAAA,UAChB,WAAWd,EAAO,GAAGC,CAAa,SAAS;AAAA,UAC3C,eAAaiB,EAAU,OAAO;AAAA,UAE7B,UAAA;AAAA,YAAAJ,EAAM,YAAY,gBAAAU,EAAC,QAAA,EAAK,eAAW,IAAC,UAAA,KAAC;AAAA,YACrCf;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAa,EAAC,OAAA,EAAI,WAAWD,GACd,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGV;AAAA,YACJ,KAAAC;AAAA,YACA,IAAAX;AAAA,YACA,eAAac,EAAU,UAAU;AAAA,YACjC,oBAAkBJ,EAAM,kBAAkB,KAAKM;AAAA,YAC/C,gBAAcN,EAAM,cAAc,KAAK,CAAC,CAACP;AAAA,YACzC,WAAWT;AAAA,cACT,GAAGG,CAAa;AAAA,cAChB,GAAGA,CAAa,eAAee,CAAW;AAAA,cAC1C;AAAA,gBACE,CAAC,GAAGf,CAAa,mBAAmB,GAAG,CAAC,CAACM;AAAA,cAAA;AAAA,YAC3C;AAAA,YAEF,MAAAG;AAAA,YACA,MAAAC;AAAA,YACA,OAAO,EAAE,QAAAC,GAAQ,GAAGC,EAAA;AAAA,UAAM;AAAA,QAAA;AAAA,0BAE3B,OAAA,EAAI,WAAWb,EAAO,GAAGC,CAAa,SAAS,EAAA,CAAG;AAAA,MAAA,GACrD;AAAA,MACCmB,uBACEK,GAAA,EAAgB,eAAaP,EAAU,aAAa,GAAG,IAAIE,GACzD,UAAAZ,EAAA,CACH;AAAA,MAEDD,KACC,gBAAAiB,EAACE,GAAA,EAAe,eAAaR,EAAU,YAAY,GAAI,UAAAX,EAAA,CAAU;AAAA,IAAA,GAErE;AAAA,EAEJ;AACF;AAEAL,EAAS,cAAc;"}

package/dist/text-area.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./text-area-C4mcG5c0.js");exports.ResizeOption=e.ResizeOption;exports.TextArea=e.TextArea;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./text-area-9ggiIWtJ.js");exports.ResizeOption=e.ResizeOption;exports.TextArea=e.TextArea;
 //# sourceMappingURL=text-area.cjs.js.map

package/dist/text-area.es.js

@@ -1,4 +1,4 @@
-import { R as o, T as r } from "./text-area-CJD8ksqm.mjs";
+import { R as o, T as r } from "./text-area-Cb9Hm2Z9.mjs";
 export {
   o as ResizeOption,
   r as TextArea

package/dist/theme.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ThemeProvider-djmNDpmy.js"),r=require("./useColorScheme-DwlZAnlk.js");exports.ThemeProvider=e.ThemeProvider;exports.teliaTheme=e.teliaTheme;exports.useApplyTheme=e.useApplyTheme;exports.useTheme=e.useTheme;exports.useColorScheme=r.useColorScheme;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ThemeProvider-ipAIFRUi.js"),r=require("./useColorScheme-DNNu9bz0.js");exports.ThemeProvider=e.ThemeProvider;exports.teliaTheme=e.teliaTheme;exports.useApplyTheme=e.useApplyTheme;exports.useTheme=e.useTheme;exports.useColorScheme=r.useColorScheme;
 //# sourceMappingURL=theme.cjs.js.map

package/dist/theme.es.js

@@ -1,5 +1,5 @@
-import { T as a, t as m, a as o, u as r } from "./ThemeProvider-mOHIAi2k.mjs";
-import { u } from "./useColorScheme-CgjazeGp.mjs";
+import { T as a, t as m, a as o, u as r } from "./ThemeProvider-CrjMv3M8.mjs";
+import { u } from "./useColorScheme-DRQcbSog.mjs";
 export {
   a as ThemeProvider,
   m as teliaTheme,

package/dist/tokens/_dark.scss

@@ -0,0 +1,9 @@
+@forward "./border/variables.dark";
+@forward "./breakpoint/variables.dark";
+@forward "./color/variables.dark";
+@forward "./filter/variables.dark";
+@forward "./gradient/variables.dark";
+@forward "./motion/variables.dark";
+@forward "./shadow/variables.dark";
+@forward "./spacing/variables.dark";
+@forward "./typography/variables.dark";

package/dist/tokens/_index.scss

@@ -0,0 +1,9 @@
+@forward "./border/variables";
+@forward "./breakpoint/variables";
+@forward "./color/variables";
+@forward "./filter/variables";
+@forward "./gradient/variables";
+@forward "./motion/variables";
+@forward "./shadow/variables";
+@forward "./spacing/variables";
+@forward "./typography/variables";

package/dist/tokens/border/variables.css

@@ -0,0 +1,12 @@
+:root,
+[data-color-scheme="light"] {
+  --purpur-border-radius-xs: 2px;
+  --purpur-border-radius-sm: 4px;
+  --purpur-border-radius-md: 8px;
+  --purpur-border-radius-lg: 16px;
+  --purpur-border-radius-full: 999px;
+  --purpur-border-width-xs: 1px;
+  --purpur-border-width-sm: 2px;
+  --purpur-border-width-md: 3px;
+  --purpur-border-width-lg: 6px;
+}

package/dist/tokens/border/variables.d.ts

@@ -0,0 +1,9 @@
+export const purpurBorderRadiusXs: string;
+export const purpurBorderRadiusSm: string;
+export const purpurBorderRadiusMd: string;
+export const purpurBorderRadiusLg: string;
+export const purpurBorderRadiusFull: string;
+export const purpurBorderWidthXs: string;
+export const purpurBorderWidthSm: string;
+export const purpurBorderWidthMd: string;
+export const purpurBorderWidthLg: string;

package/dist/tokens/border/variables.dark.css

@@ -0,0 +1,11 @@
+[data-color-scheme="dark"] {
+  --purpur-border-radius-xs: 2px;
+  --purpur-border-radius-sm: 4px;
+  --purpur-border-radius-md: 8px;
+  --purpur-border-radius-lg: 16px;
+  --purpur-border-radius-full: 999px;
+  --purpur-border-width-xs: 1px;
+  --purpur-border-width-sm: 2px;
+  --purpur-border-width-md: 3px;
+  --purpur-border-width-lg: 6px;
+}

package/dist/tokens/border/variables.dark.d.ts

@@ -0,0 +1,9 @@
+export const purpurBorderRadiusXs: string;
+export const purpurBorderRadiusSm: string;
+export const purpurBorderRadiusMd: string;
+export const purpurBorderRadiusLg: string;
+export const purpurBorderRadiusFull: string;
+export const purpurBorderWidthXs: string;
+export const purpurBorderWidthSm: string;
+export const purpurBorderWidthMd: string;
+export const purpurBorderWidthLg: string;

package/dist/tokens/border/variables.dark.js

@@ -0,0 +1,9 @@
+export const purpurBorderRadiusXs = "2px";
+export const purpurBorderRadiusSm = "4px";
+export const purpurBorderRadiusMd = "8px";
+export const purpurBorderRadiusLg = "16px";
+export const purpurBorderRadiusFull = "999px";
+export const purpurBorderWidthXs = "1px";
+export const purpurBorderWidthSm = "2px";
+export const purpurBorderWidthMd = "3px";
+export const purpurBorderWidthLg = "6px";

package/dist/tokens/border/variables.dark.json

@@ -0,0 +1,17 @@
+{
+  "border": {
+    "radius": {
+      "xs": "2px",
+      "sm": "4px",
+      "md": "8px",
+      "lg": "16px",
+      "full": "999px"
+    },
+    "width": {
+      "xs": "1px",
+      "sm": "2px",
+      "md": "3px",
+      "lg": "6px"
+    }
+  }
+}

package/dist/tokens/border/variables.dark.scss

@@ -0,0 +1,9 @@
+$purpur-border-radius-xs: 2px;
+$purpur-border-radius-sm: 4px;
+$purpur-border-radius-md: 8px;
+$purpur-border-radius-lg: 16px;
+$purpur-border-radius-full: 999px;
+$purpur-border-width-xs: 1px;
+$purpur-border-width-sm: 2px;
+$purpur-border-width-md: 3px;
+$purpur-border-width-lg: 6px;

package/dist/tokens/border/variables.js

@@ -0,0 +1,9 @@
+export const purpurBorderRadiusXs = "2px";
+export const purpurBorderRadiusSm = "4px";
+export const purpurBorderRadiusMd = "8px";
+export const purpurBorderRadiusLg = "16px";
+export const purpurBorderRadiusFull = "999px";
+export const purpurBorderWidthXs = "1px";
+export const purpurBorderWidthSm = "2px";
+export const purpurBorderWidthMd = "3px";
+export const purpurBorderWidthLg = "6px";

package/dist/tokens/border/variables.json

@@ -0,0 +1,17 @@
+{
+  "border": {
+    "radius": {
+      "xs": "2px",
+      "sm": "4px",
+      "md": "8px",
+      "lg": "16px",
+      "full": "999px"
+    },
+    "width": {
+      "xs": "1px",
+      "sm": "2px",
+      "md": "3px",
+      "lg": "6px"
+    }
+  }
+}

package/dist/tokens/border/variables.scss

@@ -0,0 +1,9 @@
+$purpur-border-radius-xs: 2px;
+$purpur-border-radius-sm: 4px;
+$purpur-border-radius-md: 8px;
+$purpur-border-radius-lg: 16px;
+$purpur-border-radius-full: 999px;
+$purpur-border-width-xs: 1px;
+$purpur-border-width-sm: 2px;
+$purpur-border-width-md: 3px;
+$purpur-border-width-lg: 6px;

package/dist/tokens/breakpoint/variables.css

@@ -0,0 +1,11 @@
+:root,
+[data-color-scheme="light"] {
+  --purpur-breakpoint-sm: 0px;
+  --purpur-breakpoint-md: 600px;
+  --purpur-breakpoint-lg: 1024px;
+  --purpur-breakpoint-xl: 1440px;
+  --purpur-breakpoint-relative-sm: 0em;
+  --purpur-breakpoint-relative-md: 37.5em;
+  --purpur-breakpoint-relative-lg: 64em;
+  --purpur-breakpoint-relative-xl: 90em;
+}

package/dist/tokens/breakpoint/variables.d.ts

@@ -0,0 +1,8 @@
+export const purpurBreakpointSm: string;
+export const purpurBreakpointMd: string;
+export const purpurBreakpointLg: string;
+export const purpurBreakpointXl: string;
+export const purpurBreakpointRelativeSm: string;
+export const purpurBreakpointRelativeMd: string;
+export const purpurBreakpointRelativeLg: string;
+export const purpurBreakpointRelativeXl: string;

package/dist/tokens/breakpoint/variables.dark.css

@@ -0,0 +1,10 @@
+[data-color-scheme="dark"] {
+  --purpur-breakpoint-sm: 0px;
+  --purpur-breakpoint-md: 600px;
+  --purpur-breakpoint-lg: 1024px;
+  --purpur-breakpoint-xl: 1440px;
+  --purpur-breakpoint-relative-sm: 0em;
+  --purpur-breakpoint-relative-md: 37.5em;
+  --purpur-breakpoint-relative-lg: 64em;
+  --purpur-breakpoint-relative-xl: 90em;
+}

package/dist/tokens/breakpoint/variables.dark.d.ts

@@ -0,0 +1,8 @@
+export const purpurBreakpointSm: string;
+export const purpurBreakpointMd: string;
+export const purpurBreakpointLg: string;
+export const purpurBreakpointXl: string;
+export const purpurBreakpointRelativeSm: string;
+export const purpurBreakpointRelativeMd: string;
+export const purpurBreakpointRelativeLg: string;
+export const purpurBreakpointRelativeXl: string;

package/dist/tokens/breakpoint/variables.dark.js

@@ -0,0 +1,8 @@
+export const purpurBreakpointSm = "0px";
+export const purpurBreakpointMd = "600px";
+export const purpurBreakpointLg = "1024px";
+export const purpurBreakpointXl = "1440px";
+export const purpurBreakpointRelativeSm = "0em";
+export const purpurBreakpointRelativeMd = "37.5em";
+export const purpurBreakpointRelativeLg = "64em";
+export const purpurBreakpointRelativeXl = "90em";

package/dist/tokens/breakpoint/variables.dark.json

@@ -0,0 +1,14 @@
+{
+  "breakpoint": {
+    "sm": "0px",
+    "md": "600px",
+    "lg": "1024px",
+    "xl": "1440px",
+    "relative": {
+      "sm": "0em",
+      "md": "37.5em",
+      "lg": "64em",
+      "xl": "90em"
+    }
+  }
+}

package/dist/tokens/breakpoint/variables.dark.scss

@@ -0,0 +1,8 @@
+$purpur-breakpoint-sm: 0px;
+$purpur-breakpoint-md: 600px;
+$purpur-breakpoint-lg: 1024px;
+$purpur-breakpoint-xl: 1440px;
+$purpur-breakpoint-relative-sm: 0em;
+$purpur-breakpoint-relative-md: 37.5em;
+$purpur-breakpoint-relative-lg: 64em;
+$purpur-breakpoint-relative-xl: 90em;

package/dist/tokens/breakpoint/variables.js

@@ -0,0 +1,8 @@
+export const purpurBreakpointSm = "0px";
+export const purpurBreakpointMd = "600px";
+export const purpurBreakpointLg = "1024px";
+export const purpurBreakpointXl = "1440px";
+export const purpurBreakpointRelativeSm = "0em";
+export const purpurBreakpointRelativeMd = "37.5em";
+export const purpurBreakpointRelativeLg = "64em";
+export const purpurBreakpointRelativeXl = "90em";

package/dist/tokens/breakpoint/variables.json

@@ -0,0 +1,14 @@
+{
+  "breakpoint": {
+    "sm": "0px",
+    "md": "600px",
+    "lg": "1024px",
+    "xl": "1440px",
+    "relative": {
+      "sm": "0em",
+      "md": "37.5em",
+      "lg": "64em",
+      "xl": "90em"
+    }
+  }
+}

package/dist/tokens/breakpoint/variables.scss

@@ -0,0 +1,8 @@
+$purpur-breakpoint-sm: 0px;
+$purpur-breakpoint-md: 600px;
+$purpur-breakpoint-lg: 1024px;
+$purpur-breakpoint-xl: 1440px;
+$purpur-breakpoint-relative-sm: 0em;
+$purpur-breakpoint-relative-md: 37.5em;
+$purpur-breakpoint-relative-lg: 64em;
+$purpur-breakpoint-relative-xl: 90em;