@uva-glass/component-library 3.21.2 → 3.23.0

package/dist/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.js

@@ -5,28 +5,28 @@ import { o as $ } from "../../../../../LexicalComposerContext.prod-DLlRM5wP.js";
 import { Icon as k } from "../../../../Icon/Icon.js";
 import { useTranslation as H } from "../../../hooks/useTranslation.js";
 import '../../../../../assets/TableCellContextMenu.css';const n = {
-  "context-menu__wrapper": "_context-menu__wrapper_17pea_1",
-  "context-menu__button": "_context-menu__button_17pea_10",
-  "context-menu": "_context-menu_17pea_1",
-  "context-menu--open": "_context-menu--open_17pea_38",
-  "context-menu__item": "_context-menu__item_17pea_43",
-  "context-menu__item-divider": "_context-menu__item-divider_17pea_57",
-  "context-menu__wrapper--hidden": "_context-menu__wrapper--hidden_17pea_61"
-}, O = 25, N = 10, f = 4, A = 25, M = (u) => {
-  const r = u.cloneNode(!0);
+  "context-menu__wrapper": "_context-menu__wrapper_6m871_1",
+  "context-menu__button": "_context-menu__button_6m871_10",
+  "context-menu": "_context-menu_6m871_1",
+  "context-menu--open": "_context-menu--open_6m871_38",
+  "context-menu__item": "_context-menu__item_6m871_43",
+  "context-menu__item-divider": "_context-menu__item-divider_6m871_57",
+  "context-menu__wrapper--hidden": "_context-menu__wrapper--hidden_6m871_61"
+}, O = 25, N = 10, f = 4, A = 25, M = (a) => {
+  const r = a.cloneNode(!0);
   r.style.height = "auto", r.style.left = "-3000px", document.body.appendChild(r);
   const b = r.getBoundingClientRect().height;
   return document.body.removeChild(r), b;
-}, W = ({ position: u, parentScrollPosition: r, onAction: b }) => {
-  const t = H(), [T, p] = _(!1), [E, x] = _(!1), [c, B] = _({ xPos: 0, yPos: 0, height: 0 }), [m, I] = _(0), C = d(0), i = d(null), s = d(null), o = d(null), [v] = $(), a = (l) => {
+}, W = ({ position: a, parentScrollPosition: r, onAction: b }) => {
+  const t = H(), [T, p] = _(!1), [E, x] = _(!1), [c, B] = _({ xPos: 0, yPos: 0, height: 0 }), [m, I] = _(0), C = d(0), i = d(null), s = d(null), o = d(null), [v] = $(), u = (l) => {
     b(l), p(!1);
   }, g = () => {
     const l = i.current ? i.current.getBoundingClientRect().width : 0;
     s.current && i.current && o.current && (c.xPos < l && s.current ? (s.current.style.left = `${l - c.xPos + N}px`, o.current.style.right = `${l - c.xPos + f + N}px`) : (s.current.style.left = "0px", o.current.style.right = `${f}px`), m || I(M(i.current)), m > document.documentElement.clientHeight - c.yPos ? (s.current.style.top = `-${m + c.height}px`, o.current.style.top = `${m + f}px`, o.current.style.transform = "rotate(180deg)") : (s.current.style.top = "0px", o.current.style.top = `-${A}px`, o.current.style.transform = "none"));
   }, P = () => (g(), `translate(${((c == null ? void 0 : c.xPos) ?? 0) - (i.current ? i.current.getBoundingClientRect().width : 0)}px, ${c.yPos - (r - C.current)}px)`);
   return R(() => {
-    B(u), u && (C.current = r), p(!1), x(!1);
-  }, [u]), R(() => {
+    B(a), a && (C.current = r), p(!1), x(!1);
+  }, [a]), R(() => {
     if (o.current) {
       const l = o.current.getBoundingClientRect(), h = v.getRootElement();
       if (!h) return;
@@ -56,7 +56,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("insertRowAbove"),
+              onClick: () => u("insertRowAbove"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableInsertRowAbove,
               children: t.table.insertRowAbove
@@ -66,7 +66,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("insertRowBelow"),
+              onClick: () => u("insertRowBelow"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableInsertRowBelow,
               children: t.table.insertRowBelow
@@ -76,7 +76,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("deleteRow"),
+              onClick: () => u("deleteRow"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableDeleteRow,
               children: t.table.deleteRow
@@ -86,7 +86,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("insertColumnLeft"),
+              onClick: () => u("insertColumnLeft"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableInsertColumnLeft,
               children: t.table.insertColumnLeft
@@ -96,7 +96,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("insertColumnRight"),
+              onClick: () => u("insertColumnRight"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableInsertColumnRight,
               children: t.table.insertColumnRight
@@ -106,7 +106,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("deleteColumn"),
+              onClick: () => u("deleteColumn"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableDeleteColumn,
               children: t.table.deleteColumn
@@ -116,7 +116,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("deleteTable"),
+              onClick: () => u("deleteTable"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableDeleteTable,
               children: t.table.deleteTable

package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js

@@ -4,7 +4,7 @@ import "../../../../clsx-OuTLNxxd.js";
 import "../../../../LexicalTable.prod-M0HiIwBZ.js";
 import "../../../../Lexical.prod-DOV_uwol.js";
 import "react";
-import { T as F } from "../../../../TablePlugin-CrCof8yO.js";
+import { T as F } from "../../../../TablePlugin-Bj5FObQ_.js";
 import "./helpers.js";
 import "../../hooks/useFlyout.js";
 import "../../../Icon/Icon.js";
@@ -21,7 +21,7 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../RteEditor.module-45648CA2.js";
+import "../../../../RteEditor.module-B_3uFnFu.js";
 import "../../hooks/useTranslation.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../Providers/LanguageProvider.js";
@@ -29,7 +29,7 @@ import "../../../../index-DllfJcv4.js";
 import "../../../SelectListbox/SelectListbox.js";
 import "../../../SelectListbox/SelectProvider.js";
 import "../../../Sortable/components/SortableItem.js";
-import "../../../../SortableProvider-B3_u0pKv.js";
+import "../../../../SortableProvider-CwX1lFMa.js";
 export {
   F as TablePlugin
 };

package/dist/components/RteEditor/Plugins/TablePlugin/index.js

@@ -1,4 +1,4 @@
-import { T as o } from "../../../../TablePlugin-CrCof8yO.js";
+import { T as o } from "../../../../TablePlugin-Bj5FObQ_.js";
 import { TableCellContextMenu as t } from "./TableCellContextMenu/TableCellContextMenu.js";
 export {
   t as TableCellContextMenu,

package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js

@@ -7,9 +7,9 @@ import { BlockFormatPlugin as T } from "../BlockFormatPlugin/BlockFormatPlugin.j
 import { ListPlugin as k } from "../ListPlugin/ListPlugin.js";
 import { LinkPlugin as x } from "../LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as B } from "../HistoryPlugin/HistoryPlugin.js";
-import { T as S } from "../../../../TablePlugin-CrCof8yO.js";
+import { T as S } from "../../../../TablePlugin-Bj5FObQ_.js";
 import { TableCellContextMenu as z } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
-import { s as A } from "../../../../RteEditor.module-45648CA2.js";
+import { s as A } from "../../../../RteEditor.module-B_3uFnFu.js";
 import { setScrollableContainers as w, removeScrollableContainers as K } from "../../helpers.js";
 const O = ({ editorScrollPosition: d }) => {
   const [t] = P(), [i, s] = L(null), u = E(null), f = N(() => {

package/dist/components/RteEditor/Plugins/index.js

@@ -3,7 +3,7 @@ import { BlockFormatPlugin as l } from "./BlockFormatPlugin/BlockFormatPlugin.js
 import { ListPlugin as n } from "./ListPlugin/ListPlugin.js";
 import { LinkPlugin as m, getLinkNodeTag as x } from "./LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as p } from "./HistoryPlugin/HistoryPlugin.js";
-import { T as a } from "../../../TablePlugin-CrCof8yO.js";
+import { T as a } from "../../../TablePlugin-Bj5FObQ_.js";
 import { TableCellContextMenu as T } from "./TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 export {
   l as BlockFormatPlugin,

package/dist/components/RteEditor/RteEditor.js

@@ -13,10 +13,10 @@ import { s as Yt, c as Qt, a as je, b as Zt, w as er, S as tr, y as Je, O as rr
 import { a as nr, w as or, M as ar } from "../../helpers-DxxBlpKs.js";
 import { c as sr } from "../../clsx-OuTLNxxd.js";
 import { exportMap as ir, isStartingWithHtmlTag as lr, mergeBoldStrongTags as ur } from "./helpers.js";
-import { s as I } from "../../RteEditor.module-45648CA2.js";
+import { s as I } from "../../RteEditor.module-B_3uFnFu.js";
 import { ToolBarPlugin as cr } from "./Plugins/ToolbarPlugin/ToolbarPlugin.js";
 import { useTranslation as dr } from "./hooks/useTranslation.js";
-import "../../TablePlugin-CrCof8yO.js";
+import "../../TablePlugin-Bj5FObQ_.js";
 import "./Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "./hooks/components/Flyout.js";
 import "../Buttons/Button.js";
@@ -36,7 +36,7 @@ import "react-router";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-B3_u0pKv.js";
+import "../../SortableProvider-CwX1lFMa.js";
 import { UvaTheme as mr } from "./UvaTheme/UvaTheme.js";
 import { EditorHeader as pr } from "./EditorHeader/EditorHeader.js";
 import { LanguageProvider as gr, useLanguage as hr } from "./Providers/LanguageProvider.js";

package/dist/components/RteEditor/UvaTheme/UvaTheme.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../../RteEditor.module-45648CA2.js";
+import { s as t } from "../../../RteEditor.module-B_3uFnFu.js";
 const i = {
   ltr: t["guide-text-ltr"],
   rtl: t["guide-text-rtl"],

package/dist/components/RteEditor/hooks/components/Flyout.js

@@ -1,9 +1,9 @@
 import { jsx as e } from "react/jsx-runtime";
 import { c as f } from "../../../../clsx-OuTLNxxd.js";
 import { forwardRef as l } from "react";
-import '../../../../assets/Flyout.css';const s = "_flyout__wrapper_1d8z8_1", y = "_flyout__open_1d8z8_14", t = {
-  flyout__wrapper: s,
-  flyout__open: y
+import '../../../../assets/Flyout.css';const a = "_flyout__wrapper_cadga_1", s = "_flyout__open_cadga_14", t = {
+  flyout__wrapper: a,
+  flyout__open: s
 }, m = l(
   ({ position: o, visible: _, children: p }, r) => /* @__PURE__ */ e(
     "div",

package/dist/components/SelectListbox/components/SelectButton.js

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as C } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-OuTLNxxd.js";
 import { forwardRef as E, useRef as g, useEffect as c } from "react";
-import { s as t } from "../../../SelectListbox.module-N3Kg0UvL.js";
+import { s as t } from "../../../SelectListbox.module-DHFU0NjU.js";
 import { Icon as L } from "../../Icon/Icon.js";
 import { useSelect as N } from "../SelectProvider.js";
 const O = E((d, u) => {

package/dist/components/SelectListbox/components/SelectContainer.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useRef as i, useCallback as u, useEffect as l } from "react";
 import { useSelect as m } from "../SelectProvider.js";
-import { s as f } from "../../../SelectListbox.module-N3Kg0UvL.js";
+import { s as f } from "../../../SelectListbox.module-DHFU0NjU.js";
 const E = ({ children: o }) => {
   const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
     ({ target: s }) => {

package/dist/components/SelectListbox/components/SelectOption.js

@@ -2,7 +2,7 @@ import { jsxs as D, Fragment as h, jsx as m } from "react/jsx-runtime";
 import { c as y } from "../../../clsx-OuTLNxxd.js";
 import { useRef as O, useEffect as d } from "react";
 import { useSelect as x } from "../SelectProvider.js";
-import { s as o } from "../../../SelectListbox.module-N3Kg0UvL.js";
+import { s as o } from "../../../SelectListbox.module-DHFU0NjU.js";
 const j = ({ option: l, index: t, dividerAfter: u, children: v }) => {
   const i = O(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: p, setIsOpen: n, options: a } = x(), w = (e) => {
     p(a[e]), n(!1);

package/dist/components/SelectListbox/components/SelectOptionBox.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as m, useRef as x } from "react";
-import { s as i } from "../../../SelectListbox.module-N3Kg0UvL.js";
+import { s as i } from "../../../SelectListbox.module-DHFU0NjU.js";
 import { useSelect as a } from "../SelectProvider.js";
 const h = m((l, e) => {
   const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);

package/dist/components/Sortable/Sortable.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Children as e } from "react";
 import { SortableItem as b } from "./components/SortableItem.js";
-import { S as n } from "../../SortableProvider-B3_u0pKv.js";
+import { S as n } from "../../SortableProvider-CwX1lFMa.js";
 const S = ({ children: t, ItemHandlePlacement: m = "left", scrollable: a, disabled: l, onSort: i }) => /* @__PURE__ */ o(
   n,
   {

package/dist/components/Sortable/SortableProvider.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "./sortableReducer.js";
-import { S as p, u as a } from "../../SortableProvider-B3_u0pKv.js";
+import { S as p, u as a } from "../../SortableProvider-CwX1lFMa.js";
 import "./actions.js";
 export {
   p as SortableProvider,

package/dist/components/Sortable/components/SortableContainer.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "react";
 import "../../../clsx-OuTLNxxd.js";
-import "../../../Sortable.module-CuvuQhr8.js";
-import { a } from "../../../SortableProvider-B3_u0pKv.js";
+import "../../../Sortable.module-CekPNg54.js";
+import { a } from "../../../SortableProvider-CwX1lFMa.js";
 export {
   a as SortableContainer
 };

package/dist/components/Sortable/components/SortableHandle.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Icon as e } from "../../Icon/Icon.js";
-import { s as t } from "../../../Sortable.module-CuvuQhr8.js";
+import { s as t } from "../../../Sortable.module-CekPNg54.js";
 const r = "ontouchstart" in globalThis.document.documentElement;
 function m({ placement: n }) {
   return r ? null : /* @__PURE__ */ o("div", { className: `${t.sortable__handle} ${t[`sortable__handle--${n}`]}`, children: /* @__PURE__ */ o(e, { name: "Dots" }) });

package/dist/components/Sortable/components/SortableItem.js

@@ -2,8 +2,8 @@ import { jsxs as i, jsx as r, Fragment as v } from "react/jsx-runtime";
 import { useState as S, useRef as M, useEffect as Q } from "react";
 import { Icon as w } from "../../Icon/Icon.js";
 import { SortableHandle as E } from "./SortableHandle.js";
-import { s as t } from "../../../Sortable.module-CuvuQhr8.js";
-import { u as k } from "../../../SortableProvider-B3_u0pKv.js";
+import { s as t } from "../../../Sortable.module-CekPNg54.js";
+import { u as k } from "../../../SortableProvider-CwX1lFMa.js";
 const G = ["Space", "ArrowDown", "ArrowUp"], J = "ontouchstart" in globalThis.document.documentElement, C = new Image(0, 0);
 C.src = // 1px transparent png
 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";

package/dist/components/StatusBadge/StatusBage.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import { c as g } from "../../clsx-OuTLNxxd.js";
-import '../../assets/StatusBage.css';const o = "_statusbadge_6tmbw_1", t = {
-  statusbadge: o,
-  "statusbadge--high-contrast": "_statusbadge--high-contrast_6tmbw_14"
-}, d = ({ label: s, highContrast: a = !1 }) => /* @__PURE__ */ e("div", { className: g(t.statusbadge, [a && t["statusbadge--high-contrast"]]), children: s });
+import { c } from "../../clsx-OuTLNxxd.js";
+import '../../assets/StatusBage.css';const d = "_statusbadge_1dz6c_1", t = {
+  statusbadge: d,
+  "statusbadge--high-contrast": "_statusbadge--high-contrast_1dz6c_14"
+}, r = ({ label: s, highContrast: a = !1 }) => /* @__PURE__ */ e("div", { className: c(t.statusbadge, [a && t["statusbadge--high-contrast"]]), children: s });
 export {
-  d as StatusBadge
+  r as StatusBadge
 };
 //# sourceMappingURL=StatusBage.js.map

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

@@ -5,5 +5,7 @@ export interface TextAreaProps {
     label?: string;
     /** The max amount of allowed charecters in the text area */
     maxCharacters?: number;
+    /** The default value for the text area */
+    defaultValue?: string;
 }
-export declare function TextArea({ onChange, label, maxCharacters }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextArea({ onChange, label, maxCharacters, defaultValue }: TextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as _ } from "react/jsx-runtime";
-import { useRef as u, useState as x } from "react";
-import { c as d } from "../../clsx-OuTLNxxd.js";
+import { useRef as x, useState as d } from "react";
+import { c as i } from "../../clsx-OuTLNxxd.js";
 import '../../assets/TextArea.css';const t = {
   "text-area__wrapper": "_text-area__wrapper_13728_1",
   "text-area__header": "_text-area__header_13728_7",
@@ -9,15 +9,15 @@ import '../../assets/TextArea.css';const t = {
   "text-area__word-count--alert": "_text-area__word-count--alert_13728_25",
   "text-area": "_text-area_13728_1"
 };
-function m({ onChange: l, label: c, maxCharacters: a = 0 }) {
-  const e = u(null), [n, o] = x(0), s = () => {
-    e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, o(e.current.value.length), l(e.current.value.trim()));
+function w({ onChange: l, label: c, maxCharacters: a = 0, defaultValue: o = "" }) {
+  const e = x(null), [n, s] = d(0), u = () => {
+    e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, s(e.current.value.length), l(e.current.value.trim()));
   };
   return /* @__PURE__ */ r("div", { className: t["text-area__wrapper"], children: [
     /* @__PURE__ */ r("div", { className: t["text-area__header"], children: [
       /* @__PURE__ */ _("span", { className: t["text-area__label"], children: c }),
       a > 0 && /* @__PURE__ */ r("div", { className: t["text-area__word-count"], children: [
-        /* @__PURE__ */ _("span", { className: d({ [t["text-area__word-count--alert"]]: n === a }), children: n }),
+        /* @__PURE__ */ _("span", { className: i({ [t["text-area__word-count--alert"]]: n === a }), children: n }),
         " / ",
         a
       ] })
@@ -28,12 +28,13 @@ function m({ onChange: l, label: c, maxCharacters: a = 0 }) {
         ref: e,
         className: t["text-area"],
         maxLength: a > 0 ? a : void 0,
-        onInput: s
+        onInput: u,
+        defaultValue: o
       }
     )
   ] });
 }
 export {
-  m as TextArea
+  w 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  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n}\n\nexport function TextArea({ onChange, label, maxCharacters = 0 }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\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      <div className={styles['text-area__header']}>\n        <span className={styles['text-area__label']}>{label}</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      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","maxCharacters","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;AAcO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,KAAoB;AACxE,QAAAC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACFA,EAAA,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEpDG,EAAAH,EAAY,QAAQ,MAAM,MAAM,GAClDH,EAASG,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACG,gBAAAM,EAAA,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACzC,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAI,EAAA,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,kBAAkB,GAAI,UAAMT,GAAA;AAAA,MACnDC,IAAgB,KACf,gBAAAO,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBH,EAAc,CAAC,GACjG,UACHG,EAAA,CAAA;AAAA,QAAO;AAAA,QACOH;AAAA,MAAA,EAChB,CAAA;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWR,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASM;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,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  /** 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, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\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      <div className={styles['text-area__header']}>\n        <span className={styles['text-area__label']}>{label}</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      <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","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;AAgBgB,SAAAA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AAC3F,QAAAC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACFA,EAAA,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEpDG,EAAAH,EAAY,QAAQ,MAAM,MAAM,GAClDJ,EAASI,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACG,gBAAAM,EAAA,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACzC,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAI,EAAA,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,kBAAkB,GAAI,UAAMV,GAAA;AAAA,MACnDC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAc,CAAC,GACjG,UACHI,EAAA,CAAA;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAChB,CAAA;AAAA,IAAA,GAEJ;AAAA,IAEA,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;"}

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

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { fn as r } from "../../index-Dwqes6RH.js";
 import { TextArea as e } from "./TextArea.js";
-const o = `
-  <TextArea label={label} maxCharacters={maxCharacters} /> `, x = {
+const l = `
+  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, p = {
   title: "Atoms/TextArea",
   component: e,
   argTypes: {
@@ -15,16 +15,17 @@ const o = `
   },
   parameters: {
     inspectComponent: e,
-    codeString: o
+    codeString: l
   }
-}, m = (a) => /* @__PURE__ */ t(e, { ...a }), n = m.bind({});
-n.args = {
+}, o = (a) => /* @__PURE__ */ t(e, { ...a }), m = o.bind({});
+m.args = {
   label: "Sample label",
   maxCharacters: 140,
+  defaultValue: "Sample default value",
   onChange: r()
 };
 export {
-  n as TextAreaExample,
-  x as default
+  m as TextAreaExample,
+  p as default
 };
 //# sourceMappingURL=TextArea.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} /> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    maxCharacters: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: TextArea,\n    codeString: codeString,\n  },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,8DAIJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAE,CAAA;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAUC,EAAG;AACf;"}
+{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    maxCharacters: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: TextArea,\n    codeString: codeString,\n  },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,mFAIJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAE,CAAA;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUC,EAAG;AACf;"}

package/dist/components/ToggleSwitch/ToggleSwitch.js

@@ -1,14 +1,14 @@
 import { jsx as e, jsxs as _ } from "react/jsx-runtime";
 import { c as a } from "../../clsx-OuTLNxxd.js";
 import '../../assets/ToggleSwitch.css';const l = {
-  "toggle-switch": "_toggle-switch_98blk_1",
-  "toggle-switch__visible": "_toggle-switch__visible_98blk_9",
-  "toggle-switch--disabled": "_toggle-switch--disabled_98blk_52",
-  "toggle-switch--loading": "_toggle-switch--loading_98blk_62",
-  "toggle-switch--visually-hidden": "_toggle-switch--visually-hidden_98blk_72",
-  "toggle-switch--disabled-label": "_toggle-switch--disabled-label_98blk_85",
-  "toggle-switch--loading-cursor": "_toggle-switch--loading-cursor_98blk_89",
-  "toggle-switch--extra-left-gap": "_toggle-switch--extra-left-gap_98blk_93"
+  "toggle-switch": "_toggle-switch_1lmpu_1",
+  "toggle-switch__visible": "_toggle-switch__visible_1lmpu_9",
+  "toggle-switch--disabled": "_toggle-switch--disabled_1lmpu_54",
+  "toggle-switch--loading": "_toggle-switch--loading_1lmpu_64",
+  "toggle-switch--visually-hidden": "_toggle-switch--visually-hidden_1lmpu_74",
+  "toggle-switch--disabled-label": "_toggle-switch--disabled-label_1lmpu_87",
+  "toggle-switch--loading-cursor": "_toggle-switch--loading-cursor_1lmpu_91",
+  "toggle-switch--extra-left-gap": "_toggle-switch--extra-left-gap_1lmpu_95"
 };
 function n({
   condition: i,
@@ -17,7 +17,7 @@ function n({
 }) {
   return i ? g(t) : t;
 }
-function b({
+function p({
   label: i,
   labelPosition: g = "after",
   labelVisible: t = !0,
@@ -61,6 +61,6 @@ function b({
   );
 }
 export {
-  b as ToggleSwitch
+  p as ToggleSwitch
 };
 //# sourceMappingURL=ToggleSwitch.js.map

package/dist/components/index.js

@@ -33,7 +33,7 @@ import { Label as no } from "./Label/Label.js";
 import { MenuLink as co } from "./MenuLink/MenuLink.js";
 import { MetaDataList as Bo } from "./MetaDataList/MetaDataList.js";
 import { ModalDialog as So } from "./ModalDialog/ModalDialog.js";
-import { M as Co } from "../TablePlugin-CrCof8yO.js";
+import { M as Co } from "../TablePlugin-Bj5FObQ_.js";
 import { MultiSelectBox as Fo } from "./MultiSelectBox/MultiSelectBox.js";
 import { OverlayCloseButton as go } from "./OverlayCloseButton/OverlayCloseButton.js";
 import { OverlayStepBar as Lo } from "./OverlayStepBar/OverlayStepBar.js";

package/dist/index.js

@@ -33,7 +33,7 @@ import { Label as no } from "./components/Label/Label.js";
 import { MenuLink as co } from "./components/MenuLink/MenuLink.js";
 import { MetaDataList as Bo } from "./components/MetaDataList/MetaDataList.js";
 import { ModalDialog as So } from "./components/ModalDialog/ModalDialog.js";
-import { M as Co } from "./TablePlugin-CrCof8yO.js";
+import { M as Co } from "./TablePlugin-Bj5FObQ_.js";
 import { MultiSelectBox as Fo } from "./components/MultiSelectBox/MultiSelectBox.js";
 import { OverlayCloseButton as go } from "./components/OverlayCloseButton/OverlayCloseButton.js";
 import { OverlayStepBar as Lo } from "./components/OverlayStepBar/OverlayStepBar.js";

package/dist/storyComponents/Container/Container.js

@@ -1,23 +1,23 @@
-import { jsxs as i, Fragment as l, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, Fragment as l, jsx as r } from "react/jsx-runtime";
 import { c as d } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Container.css';const _ = "_container_cgawq_1", n = {
+import '../../assets/Container.css';const _ = "_container_1fwsz_1", n = {
   container: _,
-  "container--padded": "_container--padded_cgawq_8",
-  "container--small": "_container--small_cgawq_12",
-  "container--medium": "_container--medium_cgawq_17",
-  "container--large": "_container--large_cgawq_22",
-  "container--large-full-height": "_container--large-full-height_cgawq_27",
-  "container--hidden": "_container--hidden_cgawq_31",
-  "container--centered-content": "_container--centered-content_cgawq_35"
-}, s = ({
-  children: r,
+  "container--padded": "_container--padded_1fwsz_8",
+  "container--small": "_container--small_1fwsz_12",
+  "container--medium": "_container--medium_1fwsz_17",
+  "container--large": "_container--large_1fwsz_22",
+  "container--large-full-height": "_container--large-full-height_1fwsz_27",
+  "container--hidden": "_container--hidden_1fwsz_31",
+  "container--centered-content": "_container--centered-content_1fwsz_35"
+}, h = ({
+  children: a,
   size: e = "medium",
-  centerContent: c = !1,
-  visible: o = !0,
-  padded: a = !0
-}) => /* @__PURE__ */ i(l, { children: [
-  /* @__PURE__ */ t("label", { htmlFor: "container", children: a ? "Storybook container with 1rem padding" : "Storybook container" }),
-  /* @__PURE__ */ t(
+  centerContent: o = !1,
+  visible: i = !0,
+  padded: t = !0
+}) => /* @__PURE__ */ c(l, { children: [
+  /* @__PURE__ */ r("label", { htmlFor: "container", children: t ? "Storybook container with 1rem padding" : "Storybook container" }),
+  /* @__PURE__ */ r(
     "div",
     {
       id: "container",
@@ -26,15 +26,15 @@ import '../../assets/Container.css';const _ = "_container_cgawq_1", n = {
         [n["container--medium"]]: e === "medium",
         [n["container--large"]]: e === "large",
         [n["container--large-full-height"]]: e === "large-full-height",
-        [n["container--padded"]]: a,
-        [n["container--centered-content"]]: c,
-        [n["container--hidden"]]: !o
+        [n["container--padded"]]: t,
+        [n["container--centered-content"]]: o,
+        [n["container--hidden"]]: !i
       }),
-      children: r
+      children: a
     }
   )
 ] });
 export {
-  s as Container
+  h as Container
 };
 //# sourceMappingURL=Container.js.map

package/dist/types/UserInterface.d.ts

@@ -1,4 +1,4 @@
 export type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank' | 'blank-subtle' | 'blank-icon';
 export type UISelectVariant = 'small' | 'regular';
 export type UITooltipSize = 'small' | 'medium' | 'large';
-export type UIStatus = 'information' | 'danger' | 'warning' | 'success' | 'default';
+export type UIStatus = 'information' | 'danger' | 'warning' | 'success' | 'default' | 'cluster' | 'information-light' | 'warning-light' | 'success-light' | 'default-light';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.21.2",
+  "version": "3.23.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -64,9 +64,9 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.19",
+    "@types/node": "^22.15.21",
     "@types/react-dom": "^19.1.5",
-    "@types/react": "^19.1.4",
+    "@types/react": "^19.1.5",
     "@uva-glass/eslint-config": "^1.3.10",
     "@uva-glass/stylelint-config": "^1.2.2",
     "@vitejs/plugin-react": "^4.4.1",
@@ -81,7 +81,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jsdom": "^26.1.0",
-    "npm-run-all2": "^8.0.2",
+    "npm-run-all2": "^8.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.0",

package/dist/Button.module-BVsTgdTe.js

@@ -1,15 +0,0 @@
-import './assets/Button.css';const t = "_button_ged5k_1", n = {
-  button: t,
-  "button--blank": "_button--blank_ged5k_35",
-  "button--blank-subtle": "_button--blank-subtle_ged5k_36",
-  "button--blank-icon": "_button--blank-icon_ged5k_37",
-  "button--primary": "_button--primary_ged5k_82",
-  "button--secondary": "_button--secondary_ged5k_98",
-  "button--destructive-primary": "_button--destructive-primary_ged5k_114",
-  "button--destructive-secondary": "_button--destructive-secondary_ged5k_132",
-  "button--wide-column": "_button--wide-column_ged5k_150"
-};
-export {
-  n as s
-};
-//# sourceMappingURL=Button.module-BVsTgdTe.js.map