@uva-glass/component-library 3.52.0 → 3.52.2

package/dist/assets/TextArea.css

@@ -1 +1 @@
-._text-area__wrapper_1kj5x_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_1kj5x_7{align-items:flex-end;display:flex;justify-content:space-between}._text-area__label-wrapper_1kj5x_13{display:flex;flex-direction:column;gap:.5rem}._text-area__label_1kj5x_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold)}._text-area__sub-label_1kj5x_25{color:var(--color-grey-700);font-size:var(--font-size-text-non-essential)}._text-area__word-count_1kj5x_30{color:var(--color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_1kj5x_35{color:var(--color-red-600);font-weight:700}._text-area_1kj5x_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
+._text-area__wrapper_di3u1_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_di3u1_7{align-items:flex-end;display:flex;justify-content:space-between}._text-area__label-wrapper_di3u1_13{display:flex;flex-direction:column;gap:.5rem}._text-area__label_di3u1_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold)}._text-area__label_di3u1_13._required_di3u1_25:after{color:var(--color-red-600);content:"★";font-size:.5rem;margin-left:.25rem;vertical-align:top}._text-area__sub-label_di3u1_33{color:var(--color-grey-700);font-size:var(--font-size-text-non-essential)}._text-area__word-count_di3u1_38{color:var(--color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_di3u1_43{color:var(--color-red-600);font-weight:700}._text-area_di3u1_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}._text-area_di3u1_1._not-valid_di3u1_61{border-color:var(--color-red-600)}

package/dist/components/Buttons/Button.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as a, Fragment as s } from "react/jsx-runtime";
-import { l } from "../../index-DvUwfXNb.js";
+import { l } from "../../index-BJRrLdmi.js";
 import { Button as n } from "./Button.js";
 const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
   title: "Atoms/Buttons/Button",

package/dist/components/Buttons/LinkButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
-import { l as s } from "../../index-DvUwfXNb.js";
+import { l as s } from "../../index-BJRrLdmi.js";
 import { BrowserRouter as c } from "react-router";
 import { LinkButton as e } from "./LinkButton.js";
 const d = `

package/dist/components/Buttons/MenuButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as l, Fragment as s } from "react/jsx-runtime";
-import { l as c } from "../../index-DvUwfXNb.js";
+import { l as c } from "../../index-BJRrLdmi.js";
 import { MenuButton as n } from "./MenuButton.js";
 const d = `
 // Has all LabelHTMLAttributes props available except "className" and "style" 

package/dist/components/Checkbox/Checkbox.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { l as e } from "../../index-DvUwfXNb.js";
+import { l as e } from "../../index-BJRrLdmi.js";
 import { Checkbox as n } from "./Checkbox.js";
 import { FormField as t } from "../FormField/FormField.js";
 import { Label as i } from "../Label/Label.js";

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t, Fragment as l } from "react/jsx-runtime";
-import { l as o } from "../../index-DvUwfXNb.js";
+import { l as o } from "../../index-BJRrLdmi.js";
 import { CheckboxButtonBar as i } from "./CheckboxButtonBar.js";
 const u = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", v = {
   title: "Molecules/CheckboxButtonBar",

package/dist/components/CheckboxTree/CheckboxTree.stories.js

@@ -1,6 +1,6 @@
 import { jsx as d, jsxs as _ } from "react/jsx-runtime";
-import { s as T, l as C } from "../../index-DvUwfXNb.js";
-import { G as v, _ as w } from "../../index-BfMTX2kB.js";
+import { s as T, l as C } from "../../index-BJRrLdmi.js";
+import { G as v, _ as w } from "../../index-fdIFY6eP.js";
 import { useState as R } from "react";
 import { CheckboxTree as b } from "./CheckboxTree.js";
 import { Chip as S } from "../Chip/Chip.js";

package/dist/components/Chip/Chip.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l as t } from "../../index-DvUwfXNb.js";
+import { l as t } from "../../index-BJRrLdmi.js";
 import { Chip as e } from "./Chip.js";
 const s = "<Chip label={string} onDelete={onDeleteFunction(label)}/>", b = {
   title: "Atoms/Chip",

package/dist/components/ControlsButton/ControlsButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as l, Fragment as s } from "react/jsx-runtime";
-import { l as e } from "../../index-DvUwfXNb.js";
+import { l as e } from "../../index-BJRrLdmi.js";
 import { ControlsButton as t } from "./ControlsButton.js";
 import { Icons as a } from "../Icon/icons/index.js";
 import { Periods as i } from "../Periods/Periods.js";

package/dist/components/Drawer/Drawer.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
-import { l as m } from "../../index-DvUwfXNb.js";
+import { l as m } from "../../index-BJRrLdmi.js";
 import { useState as c } from "react";
 import { Drawer as r } from "./Drawer.js";
 import { Button as o } from "../Buttons/Button.js";

package/dist/components/FormInput/FormInput.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { l as i } from "../../index-DvUwfXNb.js";
+import { l as i } from "../../index-BJRrLdmi.js";
 import { FormInput as a } from "./FormInput.js";
 import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
 const m = `

package/dist/components/IconButton/IconButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { l as r } from "../../index-DvUwfXNb.js";
+import { l as r } from "../../index-BJRrLdmi.js";
 import { IconButton as t } from "./IconButton.js";
 import { Icon as i } from "../Icon/Icon.js";
 const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>

package/dist/components/InputField/InputField.stories.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
-import { l as p } from "../../index-DvUwfXNb.js";
+import { l as p } from "../../index-BJRrLdmi.js";
 import { InputField as e } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
 import "../Accordion/Accordion.js";

package/dist/components/ModalDialog/ModalDialog.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { ModalProvider as n } from "@react-aria/overlays";
-import { l as i } from "../../index-DvUwfXNb.js";
+import { l as i } from "../../index-BJRrLdmi.js";
 import { ModalDialog as t } from "./ModalDialog.js";
 import { Button as l } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { l as d } from "../../index-DvUwfXNb.js";
+import { l as d } from "../../index-BJRrLdmi.js";
 import { useState as p } from "react";
 import { M as e } from "../../TablePlugin-BLbsvcuu.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { l as u } from "../../index-DvUwfXNb.js";
+import { l as u } from "../../index-BJRrLdmi.js";
 import { useState as r } from "react";
 import { MultiSelectBox as t } from "./MultiSelectBox.js";
 const b = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", S = {

package/dist/components/Notification/Notification.stories.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { l as a } from "../../index-DvUwfXNb.js";
+import { l as a } from "../../index-BJRrLdmi.js";
 import { Notification as t } from "./Notification.js";
 const l = `<Notification title={title} subtitle={subtitle} action={action} 
   level={level} variant={variant} onClose={() => {}} />`, m = {

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { l as t } from "../../index-DvUwfXNb.js";
+import { l as t } from "../../index-BJRrLdmi.js";
 import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
 import { Container as a } from "../../storyComponents/Container/Container.js";
 const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {

package/dist/components/PeriodSelector/PeriodSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as t } from "../../index-DvUwfXNb.js";
+import { l as t } from "../../index-BJRrLdmi.js";
 import { PeriodSelector as e } from "./PeriodSelector.js";
 const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition={} required={} onChange={} />", m = {
   title: "Organisms/PeriodSelector",

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { l as a } from "../../index-DvUwfXNb.js";
+import { l as a } from "../../index-BJRrLdmi.js";
 import { RadioGroup as o } from "./RadioGroup.js";
 const l = `
   <RadioGroup label={label} options={options} 

package/dist/components/RadioTabSelector/RadioTabSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l as t } from "../../index-DvUwfXNb.js";
+import { l as t } from "../../index-BJRrLdmi.js";
 import { RadioTabSelector as e } from "./RadioTabSelector.js";
 const i = "<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />", b = {
   title: "Molecules/RadioTabSelector",

package/dist/components/SelectListbox/SelectListBox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as M } from "react/jsx-runtime";
-import { l as i } from "../../index-DvUwfXNb.js";
+import { l as i } from "../../index-BJRrLdmi.js";
 import { SelectListbox as r } from "./SelectListbox.js";
 import * as e from "react";
 const E = ({

package/dist/components/Sortable/Sortable.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as i, Fragment as m } from "react/jsx-runtime";
-import { l as s } from "../../index-DvUwfXNb.js";
+import { l as s } from "../../index-BJRrLdmi.js";
 import { Sortable as l } from "./Sortable.js";
 import { InputField as d } from "../InputField/InputField.js";
 import { Icon as c } from "../Icon/Icon.js";

package/dist/components/TextArea/TextArea.d.ts

@@ -9,5 +9,9 @@ export interface TextAreaProps {
     maxCharacters?: number;
     /** The default value for the text area */
     defaultValue?: string;
+    /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
+    required?: boolean;
+    /** `true` to color border red to show not valid; otherwise, `false`. */
+    notValid?: boolean;
 }
-export declare function TextArea({ onChange, label, subLabel, maxCharacters, defaultValue }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextArea({ onChange, label, subLabel, maxCharacters, defaultValue, required, notValid, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.js

@@ -1,28 +1,38 @@
 import { jsxs as r, jsx as _ } from "react/jsx-runtime";
-import { useRef as p, useState as d } from "react";
-import { c as i } from "../../clsx-OuTLNxxd.js";
-import '../../assets/TextArea.css';const e = {
-  "text-area__wrapper": "_text-area__wrapper_1kj5x_1",
-  "text-area__header": "_text-area__header_1kj5x_7",
-  "text-area__label-wrapper": "_text-area__label-wrapper_1kj5x_13",
-  "text-area__label": "_text-area__label_1kj5x_13",
-  "text-area__sub-label": "_text-area__sub-label_1kj5x_25",
-  "text-area__word-count": "_text-area__word-count_1kj5x_30",
-  "text-area__word-count--alert": "_text-area__word-count--alert_1kj5x_35",
-  "text-area": "_text-area_1kj5x_1"
+import { useRef as h, useState as w } from "react";
+import { c as n } from "../../clsx-OuTLNxxd.js";
+import '../../assets/TextArea.css';const m = "_required_di3u1_25", e = {
+  "text-area__wrapper": "_text-area__wrapper_di3u1_1",
+  "text-area__header": "_text-area__header_di3u1_7",
+  "text-area__label-wrapper": "_text-area__label-wrapper_di3u1_13",
+  "text-area__label": "_text-area__label_di3u1_13",
+  required: m,
+  "text-area__sub-label": "_text-area__sub-label_di3u1_33",
+  "text-area__word-count": "_text-area__word-count_di3u1_38",
+  "text-area__word-count--alert": "_text-area__word-count--alert_di3u1_43",
+  "text-area": "_text-area_di3u1_1",
+  "not-valid": "_not-valid_di3u1_61"
 };
-function j({ onChange: c, label: l, subLabel: n, maxCharacters: a = 0, defaultValue: x = "" }) {
-  const t = p(null), [s, o] = d(x.length), u = () => {
-    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, o(t.current.value.length), c(t.current.value.trim()));
+function N({
+  onChange: s,
+  label: l,
+  subLabel: u,
+  maxCharacters: a = 0,
+  defaultValue: d = "",
+  required: c = !1,
+  notValid: o = !1
+}) {
+  const t = h(null), [i, x] = w(d.length), p = () => {
+    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, x(t.current.value.length), s(t.current.value.trim()));
   };
   return /* @__PURE__ */ r("div", { className: e["text-area__wrapper"], children: [
     (l || a > 0) && /* @__PURE__ */ r("div", { className: e["text-area__header"], children: [
       /* @__PURE__ */ r("span", { className: e["text-area__label-wrapper"], children: [
-        l && /* @__PURE__ */ _("span", { className: e["text-area__label"], children: l }),
-        n && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: n })
+        l && /* @__PURE__ */ _("span", { className: n(e["text-area__label"], { [e.required]: c }), children: l }),
+        u && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: u })
       ] }),
       a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
-        /* @__PURE__ */ _("span", { className: i({ [e["text-area__word-count--alert"]]: s === a }), children: s }),
+        /* @__PURE__ */ _("span", { className: n({ [e["text-area__word-count--alert"]]: i === a }), children: i }),
         " / ",
         a
       ] })
@@ -31,15 +41,15 @@ function j({ onChange: c, label: l, subLabel: n, maxCharacters: a = 0, defaultVa
       "textarea",
       {
         ref: t,
-        className: e["text-area"],
+        className: n(e["text-area"], { [e["not-valid"]]: o }),
         maxLength: a > 0 ? a : void 0,
-        onInput: u,
-        defaultValue: x
+        onInput: p,
+        defaultValue: d
       }
     )
   ] });
 }
 export {
-  j as TextArea
+  N as TextArea
 };
 //# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, subLabel, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && <span className={styles['text-area__label']}>{label}</span>}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","subLabel","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAkBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,UAAAC,GAAU,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AAC3G,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAASL,EAAa,MAAM,GAElEM,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDL,EAASK,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAX,KAASE,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAX,uBAAU,QAAA,EAAK,WAAWW,EAAO,kBAAkB,GAAI,UAAAX,GAAM;AAAA,QAC7DC,KAAY,gBAAAW,EAAC,QAAA,EAAK,WAAWD,EAAO,sBAAsB,GAAI,UAAAV,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAA,CAAe,GACjG,UAAAI,EAAA,CACH;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n}\n\nexport function TextArea({\n  onChange,\n  label,\n  subLabel,\n  maxCharacters = 0,\n  defaultValue = '',\n  required = false,\n  notValid = false,\n}: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && (\n              <span className={clsx(styles['text-area__label'], { [styles['required']]: required })}>{label}</span>\n            )}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={clsx(styles['text-area'], { [styles['not-valid']]: notValid })}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","subLabel","maxCharacters","defaultValue","required","notValid","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;AAsBO,SAASA,EAAS;AAAA,EACvB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAAC,IAAe;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AACb,GAAkB;AAChB,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAASP,EAAa,MAAM,GAElEQ,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDP,EAASO,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAb,KAASE,IAAgB,MACzB,gBAAAU,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAb,uBACE,QAAA,EAAK,WAAWc,EAAKD,EAAO,kBAAkB,GAAG,EAAE,CAACA,EAAO,QAAW,GAAGT,EAAA,CAAU,GAAI,UAAAJ,GAAM;AAAA,QAE/FC,KAAY,gBAAAc,EAAC,QAAA,EAAK,WAAWF,EAAO,sBAAsB,GAAI,UAAAZ,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAU,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWD,EAAK,EAAE,CAACD,EAAO,8BAA8B,CAAC,GAAGL,MAAmBN,EAAA,CAAe,GACjG,UAAAM,EAAA,CACH;AAAA,QAAO;AAAA,QACON;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,WAAWQ,EAAKD,EAAO,WAAW,GAAG,EAAE,CAACA,EAAO,WAAW,CAAC,GAAGR,GAAU;AAAA,QACxE,WAAWH,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASS;AAAA,QACT,cAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/TextArea/TextArea.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as a } from "../../index-DvUwfXNb.js";
+import { l as a } from "../../index-BJRrLdmi.js";
 import { TextArea as e } from "./TextArea.js";
 const o = `
   <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, x = {

package/dist/components/TextArea/TextArea.test.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import "../../index-DYPpFe2R.js";
 import { r as o, s as t, f as r } from "../../react.esm-DdELhthz.js";
-import { J as c } from "../../index-DvUwfXNb.js";
+import { J as c } from "../../index-BJRrLdmi.js";
 import { TextArea as n } from "./TextArea.js";
 describe("TextArea", () => {
   it("should render correctly with label", () => {

package/dist/components/ToggleSwitch/ToggleSwitch.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l } from "../../index-DvUwfXNb.js";
+import { l } from "../../index-BJRrLdmi.js";
 import { ToggleSwitch as e } from "./ToggleSwitch.js";
 const a = `
 // Has all InputHTMLAttributes props available except "className" and "style" 

package/dist/components/VarIndicator/VarIndicator.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as n } from "../../index-DvUwfXNb.js";
+import { l as n } from "../../index-BJRrLdmi.js";
 import { VarIndicator as t } from "./VarIndicator.js";
 const o = {
   DRAFT: "Concept",