@uva-glass/component-library 3.53.6 → 3.53.8

package/dist/assets/TextArea.css

@@ -1 +1 @@
-._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)}
+._text-area__wrapper_19dqk_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_19dqk_7{align-items:flex-end;display:flex;justify-content:space-between}._text-area__label-wrapper_19dqk_13{display:flex;flex-direction:column;gap:.5rem}._text-area__label_19dqk_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold)}._text-area__label_19dqk_13._required_19dqk_25:after{color:var(--color-red-600);content:"★";font-size:.5rem;margin-left:.25rem;vertical-align:top}._text-area__sub-label_19dqk_33{color:var(--color-grey-700);font-size:var(--font-size-text-non-essential)}._text-area__word-count_19dqk_38{color:var(--color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_19dqk_43{color:var(--color-red-600);font-weight:700}._text-area_19dqk_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--oneLine_19dqk_61{max-height:2.5rem;min-height:2.5rem}._text-area_19dqk_1._not-valid_19dqk_66{border-color:var(--color-red-600)}

package/dist/components/CopyableText/CopyableText.d.ts

@@ -7,5 +7,7 @@ export interface CopyableTextProps {
     ariaLabelCopy?: string;
     /** ARIA label for the copied state */
     ariaLabelHasBeenCopied?: string;
+    /** custom value to be copied in place of the display text */
+    customCopyValue?: string;
 }
-export declare const CopyableText: ({ text, additionalClassName, ariaLabelCopy, ariaLabelHasBeenCopied, }: CopyableTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CopyableText: ({ text, additionalClassName, ariaLabelCopy, ariaLabelHasBeenCopied, customCopyValue, }: CopyableTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CopyableText/CopyableText.js

@@ -1,25 +1,26 @@
 import { jsxs as u, jsx as y } from "react/jsx-runtime";
 import { c as b } from "../../clsx-OuTLNxxd.js";
-import { useState as f, useRef as m, useEffect as h } from "react";
-import { Icon as C } from "../Icon/Icon.js";
+import { useState as f, useRef as m, useEffect as C } from "react";
+import { Icon as _ } from "../Icon/Icon.js";
 import '../../assets/CopyableText.css';const a = {
   "copyable-text-container": "_copyable-text-container_l97qt_1",
   "copyable-text-copy-button": "_copyable-text-copy-button_l97qt_8",
   "copyable-text-copy-visually-hidden": "_copyable-text-copy-visually-hidden_l97qt_32"
-}, _ = 2e3, T = ({
-  text: o,
+}, v = 2e3, g = ({
+  text: n,
   additionalClassName: r = "",
   ariaLabelCopy: s,
-  ariaLabelHasBeenCopied: p
+  ariaLabelHasBeenCopied: p,
+  customCopyValue: x
 }) => {
-  const [e, n] = f(!1), c = m(null), x = m(null), [d, t] = f(!1);
-  h(() => () => {
-    c.current && clearTimeout(c.current);
+  const [o, c] = f(!1), l = m(null), d = m(null), [h, e] = f(!1);
+  C(() => () => {
+    l.current && clearTimeout(l.current);
   }, []);
-  const i = () => {
-    n(!0), c.current = setTimeout(() => {
-      n(!1), t(!1);
-    }, _), navigator.clipboard.writeText(o).catch(() => n(!1));
+  const i = (t) => {
+    t.stopPropagation(), t.preventDefault(), c(!0), l.current = setTimeout(() => {
+      c(!1), e(!1);
+    }, v), navigator.clipboard.writeText(x ?? n).catch(() => c(!1));
   };
   return /* @__PURE__ */ u(
     "span",
@@ -27,29 +28,29 @@ import '../../assets/CopyableText.css';const a = {
       className: b(a["copyable-text-container"], r),
       role: "button",
       tabIndex: 0,
-      onFocus: () => t(!0),
-      onBlur: () => !e && t(!1),
-      onKeyDown: (l) => {
-        t(!0), (l.key === "Enter" || l.key === " ") && (l.preventDefault(), i());
+      onFocus: () => e(!0),
+      onBlur: () => !o && e(!1),
+      onKeyDown: (t) => {
+        e(!0), (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i(t));
       },
-      onMouseEnter: () => t(!0),
-      onMouseLeave: () => !e && t(!1),
+      onMouseEnter: () => e(!0),
+      onMouseLeave: () => !o && e(!1),
       children: [
-        o,
-        d && /* @__PURE__ */ u(
+        n,
+        h && /* @__PURE__ */ u(
           "button",
           {
-            ref: x,
+            ref: d,
             className: b(a["copyable-text-copy-button"], r),
             onClick: i,
             type: "button",
             "aria-keyshortcuts": "Enter Space",
-            "aria-label": e ? p ?? "Copied" : s ?? "Copy to clipboard",
+            "aria-label": o ? p ?? "Copied" : s ?? "Copy to clipboard",
             tabIndex: -1,
             children: [
-              o,
-              /* @__PURE__ */ y(C, { name: e ? "CheckSmall" : "Copy", size: 20 }),
-              /* @__PURE__ */ y("span", { className: a["copyable-text-copy-visually-hidden"], "aria-live": "polite", children: e ? p ?? "Copied" : s ?? "Copy to clipboard" })
+              n,
+              /* @__PURE__ */ y(_, { name: o ? "CheckSmall" : "Copy", size: 20 }),
+              /* @__PURE__ */ y("span", { className: a["copyable-text-copy-visually-hidden"], "aria-live": "polite", children: o ? p ?? "Copied" : s ?? "Copy to clipboard" })
             ]
           }
         )
@@ -58,6 +59,6 @@ import '../../assets/CopyableText.css';const a = {
   );
 };
 export {
-  T as CopyableText
+  g as CopyableText
 };
 //# sourceMappingURL=CopyableText.js.map

package/dist/components/CopyableText/CopyableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.js","sources":["../../../src/components/CopyableText/CopyableText.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { useState, useRef, useEffect } from 'react';\r\n\r\nimport styles from './CopyableText.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface CopyableTextProps {\r\n  /** The text to be copied */\r\n  text: string;\r\n  /** Additional class name to style the text so it suits the design */\r\n  additionalClassName?: string;\r\n  /** ARIA label for the copy button */\r\n  ariaLabelCopy?: string;\r\n  /** ARIA label for the copied state */\r\n  ariaLabelHasBeenCopied?: string;\r\n}\r\n\r\nconst COPYTIME = 2000;\r\n\r\nexport const CopyableText = ({\r\n  text,\r\n  additionalClassName = '',\r\n  ariaLabelCopy,\r\n  ariaLabelHasBeenCopied,\r\n}: CopyableTextProps) => {\r\n  const [isCopying, setIsCopying] = useState(false);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\r\n  const [buttonActive, setButtonActive] = useState(false);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const handleCopy = () => {\r\n    setIsCopying(true);\r\n    timeoutRef.current = setTimeout(() => {\r\n      setIsCopying(false);\r\n      setButtonActive(false);\r\n    }, COPYTIME);\r\n    navigator.clipboard.writeText(text).catch(() => setIsCopying(false));\r\n  };\r\n\r\n  return (\r\n    <span\r\n      className={clsx(styles['copyable-text-container'], additionalClassName)}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n      onFocus={() => setButtonActive(true)}\r\n      onBlur={() => !isCopying && setButtonActive(false)}\r\n      onKeyDown={(event) => {\r\n        setButtonActive(true);\r\n        if (event.key === 'Enter' || event.key === ' ') {\r\n          event.preventDefault();\r\n          handleCopy();\r\n        }\r\n      }}\r\n      onMouseEnter={() => setButtonActive(true)}\r\n      onMouseLeave={() => !isCopying && setButtonActive(false)}\r\n    >\r\n      {text}\r\n      {buttonActive && (\r\n        <button\r\n          ref={buttonRef}\r\n          className={clsx(styles['copyable-text-copy-button'], additionalClassName)}\r\n          onClick={handleCopy}\r\n          type=\"button\"\r\n          aria-keyshortcuts=\"Enter Space\"\r\n          aria-label={isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          tabIndex={-1}\r\n        >\r\n          {text}\r\n          <Icon name={isCopying ? 'CheckSmall' : 'Copy'} size={20} />\r\n          <span className={styles['copyable-text-copy-visually-hidden']} aria-live=\"polite\">\r\n            {isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          </span>\r\n        </button>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n"],"names":["COPYTIME","CopyableText","text","additionalClassName","ariaLabelCopy","ariaLabelHasBeenCopied","isCopying","setIsCopying","useState","timeoutRef","useRef","buttonRef","buttonActive","setButtonActive","useEffect","handleCopy","jsxs","clsx","styles","event","Icon","jsx"],"mappings":";;;;;;;;GAkBMA,IAAW,KAEJC,IAAe,CAAC;AAAA,EAC3B,MAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,eAAAC;AAAA,EACA,wBAAAC;AACF,MAAyB;AACvB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAaC,EAA6C,IAAI,GAC9DC,IAAYD,EAAiC,IAAI,GACjD,CAACE,GAAcC,CAAe,IAAIL,EAAS,EAAK;AAEtD,EAAAM,EAAU,MACD,MAAM;AACX,IAAIL,EAAW,WAAS,aAAaA,EAAW,OAAO;AAAA,EACzD,GACC,CAAA,CAAE;AAEL,QAAMM,IAAa,MAAM;AACvB,IAAAR,EAAa,EAAI,GACjBE,EAAW,UAAU,WAAW,MAAM;AACpC,MAAAF,EAAa,EAAK,GAClBM,EAAgB,EAAK;AAAA,IACvB,GAAGb,CAAQ,GACX,UAAU,UAAU,UAAUE,CAAI,EAAE,MAAM,MAAMK,EAAa,EAAK,CAAC;AAAA,EACrE;AAEA,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,yBAAyB,GAAGf,CAAmB;AAAA,MACtE,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAMU,EAAgB,EAAI;AAAA,MACnC,QAAQ,MAAM,CAACP,KAAaO,EAAgB,EAAK;AAAA,MACjD,WAAW,CAACM,MAAU;AACpB,QAAAN,EAAgB,EAAI,IAChBM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACNJ,EAAA;AAAA,MAEJ;AAAA,MACA,cAAc,MAAMF,EAAgB,EAAI;AAAA,MACxC,cAAc,MAAM,CAACP,KAAaO,EAAgB,EAAK;AAAA,MAEtD,UAAA;AAAA,QAAAX;AAAA,QACAU,KACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKL;AAAA,YACL,WAAWM,EAAKC,EAAO,2BAA2B,GAAGf,CAAmB;AAAA,YACxE,SAASY;AAAA,YACT,MAAK;AAAA,YACL,qBAAkB;AAAA,YAClB,cAAYT,IAAaD,KAA0B,WAAaD,KAAiB;AAAA,YACjF,UAAU;AAAA,YAET,UAAA;AAAA,cAAAF;AAAA,gCACAkB,GAAA,EAAK,MAAMd,IAAY,eAAe,QAAQ,MAAM,IAAI;AAAA,cACzD,gBAAAe,EAAC,QAAA,EAAK,WAAWH,EAAO,oCAAoC,GAAG,aAAU,UACtE,UAAAZ,IAAaD,KAA0B,WAAaD,KAAiB,oBAAA,CACxE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"CopyableText.js","sources":["../../../src/components/CopyableText/CopyableText.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { useState, useRef, useEffect } from 'react';\r\n\r\nimport type { KeyboardEvent, MouseEvent } from 'react';\r\n\r\nimport styles from './CopyableText.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface CopyableTextProps {\r\n  /** The text to be copied */\r\n  text: string;\r\n  /** Additional class name to style the text so it suits the design */\r\n  additionalClassName?: string;\r\n  /** ARIA label for the copy button */\r\n  ariaLabelCopy?: string;\r\n  /** ARIA label for the copied state */\r\n  ariaLabelHasBeenCopied?: string;\r\n  /** custom value to be copied in place of the display text */\r\n  customCopyValue?: string;\r\n}\r\n\r\nconst COPYTIME = 2000;\r\n\r\nexport const CopyableText = ({\r\n  text,\r\n  additionalClassName = '',\r\n  ariaLabelCopy,\r\n  ariaLabelHasBeenCopied,\r\n  customCopyValue,\r\n}: CopyableTextProps) => {\r\n  const [isCopying, setIsCopying] = useState(false);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\r\n  const [buttonActive, setButtonActive] = useState(false);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const handleCopy = (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLSpanElement>) => {\r\n    // prevent event bubbling if placed inside another clikable element\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n\r\n    setIsCopying(true);\r\n    timeoutRef.current = setTimeout(() => {\r\n      setIsCopying(false);\r\n      setButtonActive(false);\r\n    }, COPYTIME);\r\n    navigator.clipboard.writeText(customCopyValue ?? text).catch(() => setIsCopying(false));\r\n  };\r\n\r\n  return (\r\n    <span\r\n      className={clsx(styles['copyable-text-container'], additionalClassName)}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n      onFocus={() => setButtonActive(true)}\r\n      onBlur={() => !isCopying && setButtonActive(false)}\r\n      onKeyDown={(event) => {\r\n        setButtonActive(true);\r\n        if (event.key === 'Enter' || event.key === ' ') {\r\n          event.preventDefault();\r\n          handleCopy(event);\r\n        }\r\n      }}\r\n      onMouseEnter={() => setButtonActive(true)}\r\n      onMouseLeave={() => !isCopying && setButtonActive(false)}\r\n    >\r\n      {text}\r\n      {buttonActive && (\r\n        <button\r\n          ref={buttonRef}\r\n          className={clsx(styles['copyable-text-copy-button'], additionalClassName)}\r\n          onClick={handleCopy}\r\n          type=\"button\"\r\n          aria-keyshortcuts=\"Enter Space\"\r\n          aria-label={isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          tabIndex={-1}\r\n        >\r\n          {text}\r\n          <Icon name={isCopying ? 'CheckSmall' : 'Copy'} size={20} />\r\n          <span className={styles['copyable-text-copy-visually-hidden']} aria-live=\"polite\">\r\n            {isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          </span>\r\n        </button>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n"],"names":["COPYTIME","CopyableText","text","additionalClassName","ariaLabelCopy","ariaLabelHasBeenCopied","customCopyValue","isCopying","setIsCopying","useState","timeoutRef","useRef","buttonRef","buttonActive","setButtonActive","useEffect","handleCopy","event","jsxs","clsx","styles","Icon","jsx"],"mappings":";;;;;;;;GAsBMA,IAAW,KAEJC,IAAe,CAAC;AAAA,EAC3B,MAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,eAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,iBAAAC;AACF,MAAyB;AACvB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAaC,EAA6C,IAAI,GAC9DC,IAAYD,EAAiC,IAAI,GACjD,CAACE,GAAcC,CAAe,IAAIL,EAAS,EAAK;AAEtD,EAAAM,EAAU,MACD,MAAM;AACX,IAAIL,EAAW,WAAS,aAAaA,EAAW,OAAO;AAAA,EACzD,GACC,CAAA,CAAE;AAEL,QAAMM,IAAa,CAACC,MAA0E;AAE5F,IAAAA,EAAM,gBAAA,GACNA,EAAM,eAAA,GAENT,EAAa,EAAI,GACjBE,EAAW,UAAU,WAAW,MAAM;AACpC,MAAAF,EAAa,EAAK,GAClBM,EAAgB,EAAK;AAAA,IACvB,GAAGd,CAAQ,GACX,UAAU,UAAU,UAAUM,KAAmBJ,CAAI,EAAE,MAAM,MAAMM,EAAa,EAAK,CAAC;AAAA,EACxF;AAEA,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,yBAAyB,GAAGjB,CAAmB;AAAA,MACtE,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAMW,EAAgB,EAAI;AAAA,MACnC,QAAQ,MAAM,CAACP,KAAaO,EAAgB,EAAK;AAAA,MACjD,WAAW,CAACG,MAAU;AACpB,QAAAH,EAAgB,EAAI,IAChBG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACND,EAAWC,CAAK;AAAA,MAEpB;AAAA,MACA,cAAc,MAAMH,EAAgB,EAAI;AAAA,MACxC,cAAc,MAAM,CAACP,KAAaO,EAAgB,EAAK;AAAA,MAEtD,UAAA;AAAA,QAAAZ;AAAA,QACAW,KACC,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKN;AAAA,YACL,WAAWO,EAAKC,EAAO,2BAA2B,GAAGjB,CAAmB;AAAA,YACxE,SAASa;AAAA,YACT,MAAK;AAAA,YACL,qBAAkB;AAAA,YAClB,cAAYT,IAAaF,KAA0B,WAAaD,KAAiB;AAAA,YACjF,UAAU;AAAA,YAET,UAAA;AAAA,cAAAF;AAAA,gCACAmB,GAAA,EAAK,MAAMd,IAAY,eAAe,QAAQ,MAAM,IAAI;AAAA,cACzD,gBAAAe,EAAC,QAAA,EAAK,WAAWF,EAAO,oCAAoC,GAAG,aAAU,UACtE,UAAAb,IAAaF,KAA0B,WAAaD,KAAiB,oBAAA,CACxE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -7,6 +7,8 @@ export interface TextAreaProps {
     subLabel?: string;
     /** The max amount of allowed charecters in the text area */
     maxCharacters?: number;
+    /** The max number of visible lines in the text area */
+    heightAsTextField?: boolean;
     /** The default value for the text area */
     defaultValue?: string;
     /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
@@ -14,4 +16,4 @@ export interface TextAreaProps {
     /** `true` to color border red to show not valid; otherwise, `false`. */
     notValid?: boolean;
 }
-export declare function TextArea({ onChange, label, subLabel, maxCharacters, defaultValue, required, notValid, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextArea({ onChange, label, subLabel, maxCharacters, heightAsTextField, defaultValue, required, notValid, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.js

@@ -1,38 +1,40 @@
 import { jsxs as r, jsx as _ } from "react/jsx-runtime";
-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"
+import { useRef as q, useState as w } from "react";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import '../../assets/TextArea.css';const k = "_required_19dqk_25", e = {
+  "text-area__wrapper": "_text-area__wrapper_19dqk_1",
+  "text-area__header": "_text-area__header_19dqk_7",
+  "text-area__label-wrapper": "_text-area__label-wrapper_19dqk_13",
+  "text-area__label": "_text-area__label_19dqk_13",
+  required: k,
+  "text-area__sub-label": "_text-area__sub-label_19dqk_33",
+  "text-area__word-count": "_text-area__word-count_19dqk_38",
+  "text-area__word-count--alert": "_text-area__word-count--alert_19dqk_43",
+  "text-area": "_text-area_19dqk_1",
+  "text-area--oneLine": "_text-area--oneLine_19dqk_61",
+  "not-valid": "_not-valid_19dqk_66"
 };
-function N({
-  onChange: s,
-  label: l,
-  subLabel: u,
+function b({
+  onChange: c,
+  label: n,
+  subLabel: d,
   maxCharacters: a = 0,
-  defaultValue: d = "",
-  required: c = !1,
-  notValid: o = !1
+  heightAsTextField: x = !1,
+  defaultValue: s = "",
+  required: i = !1,
+  notValid: u = !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()));
+  const t = q(null), [o, p] = w(s.length), h = () => {
+    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, p(t.current.value.length), c(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: [
+    (n || 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: n(e["text-area__label"], { [e.required]: c }), children: l }),
-        u && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: u })
+        n && /* @__PURE__ */ _("span", { className: l(e["text-area__label"], { [e.required]: i }), children: n }),
+        d && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: d })
       ] }),
       a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
-        /* @__PURE__ */ _("span", { className: n({ [e["text-area__word-count--alert"]]: i === a }), children: i }),
+        /* @__PURE__ */ _("span", { className: l({ [e["text-area__word-count--alert"]]: o === a }), children: o }),
         " / ",
         a
       ] })
@@ -41,15 +43,18 @@ function N({
       "textarea",
       {
         ref: t,
-        className: n(e["text-area"], { [e["not-valid"]]: o }),
+        className: l(e["text-area"], {
+          [e["not-valid"]]: u,
+          [e["text-area--oneLine"]]: x
+        }),
         maxLength: a > 0 ? a : void 0,
-        onInput: p,
-        defaultValue: d
+        onInput: h,
+        defaultValue: s
       }
     )
   ] });
 }
 export {
-  N as TextArea
+  b 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  /** `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;"}
+{"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 max number of visible lines in the text area */\n  heightAsTextField?: boolean;\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  heightAsTextField = false,\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'], {\n          [styles['not-valid']]: notValid,\n          [styles['text-area--oneLine']]: heightAsTextField,\n        })}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","subLabel","maxCharacters","heightAsTextField","defaultValue","required","notValid","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;AAwBO,SAASA,EAAS;AAAA,EACvB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,mBAAAC,IAAoB;AAAA,EACpB,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,GAClDR,EAASQ,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAd,KAASE,IAAgB,MACzB,gBAAAW,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAd,uBACE,QAAA,EAAK,WAAWe,EAAKD,EAAO,kBAAkB,GAAG,EAAE,CAACA,EAAO,QAAW,GAAGT,EAAA,CAAU,GAAI,UAAAL,GAAM;AAAA,QAE/FC,KAAY,gBAAAe,EAAC,QAAA,EAAK,WAAWF,EAAO,sBAAsB,GAAI,UAAAb,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAW,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWD,EAAK,EAAE,CAACD,EAAO,8BAA8B,CAAC,GAAGL,MAAmBP,EAAA,CAAe,GACjG,UAAAO,EAAA,CACH;AAAA,QAAO;AAAA,QACOP;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,WAAWQ,EAAKD,EAAO,WAAW,GAAG;AAAA,UACnC,CAACA,EAAO,WAAW,CAAC,GAAGR;AAAA,UACvB,CAACQ,EAAO,oBAAoB,CAAC,GAAGX;AAAA,QAAA,CACjC;AAAA,QACD,WAAWD,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASU;AAAA,QACT,cAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.53.6",
+  "version": "3.53.8",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -61,8 +61,8 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.0.6",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@uva-glass/eslint-config": "^1.3.11",
     "@uva-glass/stylelint-config": "^1.2.3",
@@ -96,7 +96,7 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.5.0",
-    "vite-tsconfig-paths": "^6.0.3"
+    "vite-tsconfig-paths": "^6.0.4"
   },
   "dependencies": {
     "@babel/preset-env": "^7.28.5",
@@ -109,7 +109,7 @@
     "lexical": "^0.39.0"
   },
   "optionalDependencies": {
-    "@ast-grep/napi-linux-x64-gnu": "0.40.4",
+    "@ast-grep/napi-linux-x64-gnu": "0.40.5",
     "@rollup/rollup-linux-x64-gnu": "^4.55.1",
     "@rspack/binding-darwin-arm64": "1.7.1",
     "@rspack/binding-linux-x64-gnu": "1.7.1"