@uva-glass/component-library 3.49.0 → 3.50.1

package/dist/components/Slider/Slider.js

@@ -1,73 +1,74 @@
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import { useState as S, useRef as m, useEffectEvent as x, useEffect as B } from "react";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { useState as S, useRef as v, useEffectEvent as x, useEffect as B } from "react";
 import { c as H } from "../../clsx-OuTLNxxd.js";
 import { Icon as E } from "../Icon/Icon.js";
-import '../../assets/Slider.css';const T = "_slider_wrapper_43bdt_1", j = "_slider_button_43bdt_8", C = "_slider_trackwrapper_43bdt_38", D = "_slider_balloon_43bdt_44", F = "_slider_input_43bdt_52", l = {
+import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slider_button_136tg_8", C = "_slider_trackwrapper_136tg_38", D = "_slider_balloon_136tg_44", F = "_slider_input_136tg_52", l = {
   slider_wrapper: T,
   slider_button: j,
   slider_trackwrapper: C,
   slider_balloon: D,
   slider_input: F
-}, v = 0.5, I = 100, p = 16, U = 16, G = ({
+}, w = 0.5, I = 100, p = 16, U = 16, G = ({
   min: t,
   max: o,
   value: i,
   step: k = 1,
   units: c,
   navigationLabels: d,
-  disabled: n = !1,
-  onChange: _
+  disabled: s = !1,
+  onChange: u
 }) => {
-  const [s, f] = S(i !== void 0 ? i : (t + o) * v), [V, P] = S(""), u = m(null), w = m(null), b = m(null), N = (r) => {
-    const e = s + r * k;
-    e >= t && e <= o && (f(e), h(e), y(e), _ && _(e));
-  }, R = (r) => {
-    const e = Number(r.target.value);
-    f(e), h(e), y(e), _ && _(e);
-  }, h = (r) => {
-    if (!u.current) return;
-    const e = (r - t) / (o - t) * I;
-    n ? u.current.style.background = `linear-gradient(
+  const [n, f] = S(i !== void 0 ? i : (t + o) * w), [V, P] = S(""), _ = v(null), g = v(null), b = v(null), N = (e) => {
+    const r = n + e * k;
+    r >= t && r <= o && (f(r), h(r), y(r), u && u(r));
+  }, R = (e) => {
+    const r = Number(e.target.value);
+    f(r), h(r), y(r), u && u(r);
+  }, h = (e) => {
+    if (!_.current) return;
+    const r = (e - t) / (o - t) * I;
+    s ? _.current.style.background = `linear-gradient(
          to right, 
-         var(--new-color-grey-700) 0%, 
-         var(--new-color-grey-700) ${e}%, 
-         var(--new-color-grey-400) ${e}%, 
-         var(--new-color-grey-400) 100%)` : u.current.style.background = `linear-gradient(
+         var(--color-grey-700) 0%, 
+         var(--color-grey-700) ${r}%, 
+         var(--color-grey-400) ${r}%, 
+         var(--color-grey-400) 100%)` : _.current.style.background = `linear-gradient(
          to right, 
-         var(--new-color-navy-600) 0%, 
-         var(--new-color-navy-600) ${e}%, 
-         var(--new-color-grey-400) ${e}%, 
-         var(--new-color-grey-400) 100%)`;
-  }, y = (r) => {
-    if (w.current && b.current) {
-      const e = b.current.clientWidth, $ = w.current.clientWidth - p, W = (r - t) / (o - t) * $ - (e - p) * v, z = Math.max(0, Math.min(W, $ - e + p * v));
+         var(--color-navy-600) 0%, 
+         var(--color-navy-600) ${r}%, 
+         var(--color-grey-400) ${r}%, 
+         var(--color-grey-400) 100%)`;
+  }, y = (e) => {
+    if (g.current && b.current) {
+      const r = b.current.clientWidth, $ = g.current.clientWidth - p, W = (e - t) / (o - t) * $ - (r - p) * w, z = Math.max(0, Math.min(W, $ - r + p * w));
       P(`${z}px`);
     }
-  }, M = x((r) => {
-    f(r), h(r), y(r);
+  }, M = x((e) => {
+    f(e), h(e), y(e);
   });
   return B(() => {
     i !== void 0 && M(i);
-  }, [i, n]), /* @__PURE__ */ g("div", { className: l.slider_wrapper, children: [
+  }, [i, s]), /* @__PURE__ */ m("div", { className: l.slider_wrapper, children: [
     /* @__PURE__ */ a(
       "button",
       {
+        type: "button",
         className: l.slider_button,
         onClick: () => N(-1),
         "aria-label": d?.decrease ? d.decrease : "Verlaag waarde",
-        disabled: n,
+        disabled: s,
         children: /* @__PURE__ */ a(E, { name: "Minus", size: 20 })
       }
     ),
-    /* @__PURE__ */ g("div", { className: l.slider_trackwrapper, ref: w, children: [
-      /* @__PURE__ */ g(
+    /* @__PURE__ */ m("div", { className: l.slider_trackwrapper, ref: g, children: [
+      /* @__PURE__ */ m(
         "div",
         {
-          className: H(l.slider_balloon, { [l["slider_balloon--disabled"]]: n }),
+          className: H(l.slider_balloon, { [l["slider_balloon--disabled"]]: s }),
           style: { left: V },
           ref: b,
           children: [
-            s,
+            n,
             c && /* @__PURE__ */ a("span", { className: l.slider_units, children: c })
           ]
         }
@@ -80,26 +81,27 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_43bdt_1", j = "_slid
           min: t,
           max: o,
           step: k,
-          value: s,
+          value: n,
           onChange: R,
-          ref: u,
+          ref: _,
           style: { "--thumb-size": `${p / U}rem` },
           "aria-valuemin": t,
           "aria-valuemax": o,
-          "aria-valuenow": s,
-          "aria-valuetext": c ? `${s} ${c}` : `${s}`,
+          "aria-valuenow": n,
+          "aria-valuetext": c ? `${n} ${c}` : `${n}`,
           "aria-label": "Slider",
-          disabled: n
+          disabled: s
         }
       )
     ] }),
     /* @__PURE__ */ a(
       "button",
       {
+        type: "button",
         className: l.slider_button,
         onClick: () => N(1),
         "aria-label": d?.increase ? d.increase : "Verhoog waarde",
-        disabled: n,
+        disabled: s,
         children: /* @__PURE__ */ a(E, { name: "Plus", size: 20 })
       }
     )

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n  /* The minimum value of the slider */\r\n  min: number;\r\n  /* The maximum value of the slider */\r\n  max: number;\r\n  /* The current value of the slider */\r\n  value?: number;\r\n  /* The step value of the slider */\r\n  step?: number;\r\n  /* The units to display next to the value */\r\n  units?: string;\r\n  /* aria-label labels for navigation buttons  */\r\n  navigationLabels?: { increase: string; decrease: string };\r\n  /* Whether the slider is disabled */\r\n  disabled?: boolean;\r\n  /* Callback function when the value changes */\r\n  onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n  min,\r\n  max,\r\n  value,\r\n  step = 1,\r\n  units,\r\n  navigationLabels,\r\n  disabled = false,\r\n  onChange,\r\n}: SliderProps) => {\r\n  const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n  const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n  const sliderRef = useRef<HTMLInputElement>(null);\r\n  const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n  const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleButtonClick = (direction: number) => {\r\n    const newValue = sliderValue + direction * step;\r\n    if (newValue >= min && newValue <= max) {\r\n      setSliderValue(newValue);\r\n      paintValueOnTrack(newValue);\r\n      setFloaterPosition(newValue);\r\n      if (onChange) {\r\n        onChange(newValue);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const newValue = Number(event.target.value);\r\n    setSliderValue(newValue);\r\n    paintValueOnTrack(newValue);\r\n    setFloaterPosition(newValue);\r\n    if (onChange) {\r\n      onChange(newValue);\r\n    }\r\n  };\r\n\r\n  const paintValueOnTrack = (valueToPaint: number) => {\r\n    if (!sliderRef.current) return;\r\n    const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n    if (disabled) {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--new-color-grey-700) 0%, \r\n         var(--new-color-grey-700) ${percentage}%, \r\n         var(--new-color-grey-400) ${percentage}%, \r\n         var(--new-color-grey-400) 100%)`;\r\n    } else {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--new-color-navy-600) 0%, \r\n         var(--new-color-navy-600) ${percentage}%, \r\n         var(--new-color-grey-400) ${percentage}%, \r\n         var(--new-color-grey-400) 100%)`;\r\n    }\r\n  };\r\n\r\n  const setFloaterPosition = (value: number) => {\r\n    if (trackWrapperRef.current && balloonRef.current) {\r\n      const balloonWidth = balloonRef.current.clientWidth;\r\n      const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n      const position = ((value - min) / (max - min)) * trackWidth;\r\n      const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n      const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n      setBalloonLeftPosition(`${clampedLeft}px`);\r\n    }\r\n  };\r\n\r\n  const initializeSlider = useEffectEvent((value: number) => {\r\n    setSliderValue(value);\r\n    paintValueOnTrack(value);\r\n    setFloaterPosition(value);\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (value !== undefined) {\r\n      initializeSlider(value);\r\n    }\r\n  }, [value, disabled]);\r\n\r\n  return (\r\n    <div className={styles['slider_wrapper']}>\r\n      <button\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(-1)}\r\n        aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Minus\" size={20} />\r\n      </button>\r\n      <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n        <div\r\n          className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n          style={{ left: balloonLeftPosition }}\r\n          ref={balloonRef}\r\n        >\r\n          {sliderValue}\r\n          {units && <span className={styles['slider_units']}>{units}</span>}\r\n        </div>\r\n        <input\r\n          type=\"range\"\r\n          className={styles['slider_input']}\r\n          min={min}\r\n          max={max}\r\n          step={step}\r\n          value={sliderValue}\r\n          onChange={handleSliderChange}\r\n          ref={sliderRef}\r\n          style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n          aria-valuemin={min}\r\n          aria-valuemax={max}\r\n          aria-valuenow={sliderValue}\r\n          aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n          aria-label=\"Slider\"\r\n          disabled={disabled}\r\n        />\r\n      </div>\r\n      <button\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(1)}\r\n        aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Plus\" size={20} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["HALF_STEP","HUNDRED","THUMB_SIZE","REM","Slider","min","max","value","step","units","navigationLabels","disabled","onChange","sliderValue","setSliderValue","useState","balloonLeftPosition","setBalloonLeftPosition","sliderRef","useRef","trackWrapperRef","balloonRef","handleButtonClick","direction","newValue","paintValueOnTrack","setFloaterPosition","handleSliderChange","event","valueToPaint","percentage","balloonWidth","trackWidth","leftPosition","clampedLeft","initializeSlider","useEffectEvent","useEffect","jsxs","styles","jsx","Icon","clsx"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n  /* The minimum value of the slider */\r\n  min: number;\r\n  /* The maximum value of the slider */\r\n  max: number;\r\n  /* The current value of the slider */\r\n  value?: number;\r\n  /* The step value of the slider */\r\n  step?: number;\r\n  /* The units to display next to the value */\r\n  units?: string;\r\n  /* aria-label labels for navigation buttons  */\r\n  navigationLabels?: { increase: string; decrease: string };\r\n  /* Whether the slider is disabled */\r\n  disabled?: boolean;\r\n  /* Callback function when the value changes */\r\n  onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n  min,\r\n  max,\r\n  value,\r\n  step = 1,\r\n  units,\r\n  navigationLabels,\r\n  disabled = false,\r\n  onChange,\r\n}: SliderProps) => {\r\n  const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n  const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n  const sliderRef = useRef<HTMLInputElement>(null);\r\n  const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n  const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleButtonClick = (direction: number) => {\r\n    const newValue = sliderValue + direction * step;\r\n    if (newValue >= min && newValue <= max) {\r\n      setSliderValue(newValue);\r\n      paintValueOnTrack(newValue);\r\n      setFloaterPosition(newValue);\r\n      if (onChange) {\r\n        onChange(newValue);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const newValue = Number(event.target.value);\r\n    setSliderValue(newValue);\r\n    paintValueOnTrack(newValue);\r\n    setFloaterPosition(newValue);\r\n    if (onChange) {\r\n      onChange(newValue);\r\n    }\r\n  };\r\n\r\n  const paintValueOnTrack = (valueToPaint: number) => {\r\n    if (!sliderRef.current) return;\r\n    const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n    if (disabled) {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--color-grey-700) 0%, \r\n         var(--color-grey-700) ${percentage}%, \r\n         var(--color-grey-400) ${percentage}%, \r\n         var(--color-grey-400) 100%)`;\r\n    } else {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--color-navy-600) 0%, \r\n         var(--color-navy-600) ${percentage}%, \r\n         var(--color-grey-400) ${percentage}%, \r\n         var(--color-grey-400) 100%)`;\r\n    }\r\n  };\r\n\r\n  const setFloaterPosition = (value: number) => {\r\n    if (trackWrapperRef.current && balloonRef.current) {\r\n      const balloonWidth = balloonRef.current.clientWidth;\r\n      const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n      const position = ((value - min) / (max - min)) * trackWidth;\r\n      const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n      const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n      setBalloonLeftPosition(`${clampedLeft}px`);\r\n    }\r\n  };\r\n\r\n  const initializeSlider = useEffectEvent((value: number) => {\r\n    setSliderValue(value);\r\n    paintValueOnTrack(value);\r\n    setFloaterPosition(value);\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (value !== undefined) {\r\n      initializeSlider(value);\r\n    }\r\n  }, [value, disabled]);\r\n\r\n  return (\r\n    <div className={styles['slider_wrapper']}>\r\n      <button\r\n        type=\"button\"\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(-1)}\r\n        aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Minus\" size={20} />\r\n      </button>\r\n      <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n        <div\r\n          className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n          style={{ left: balloonLeftPosition }}\r\n          ref={balloonRef}\r\n        >\r\n          {sliderValue}\r\n          {units && <span className={styles['slider_units']}>{units}</span>}\r\n        </div>\r\n        <input\r\n          type=\"range\"\r\n          className={styles['slider_input']}\r\n          min={min}\r\n          max={max}\r\n          step={step}\r\n          value={sliderValue}\r\n          onChange={handleSliderChange}\r\n          ref={sliderRef}\r\n          style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n          aria-valuemin={min}\r\n          aria-valuemax={max}\r\n          aria-valuenow={sliderValue}\r\n          aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n          aria-label=\"Slider\"\r\n          disabled={disabled}\r\n        />\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(1)}\r\n        aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Plus\" size={20} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["HALF_STEP","HUNDRED","THUMB_SIZE","REM","Slider","min","max","value","step","units","navigationLabels","disabled","onChange","sliderValue","setSliderValue","useState","balloonLeftPosition","setBalloonLeftPosition","sliderRef","useRef","trackWrapperRef","balloonRef","handleButtonClick","direction","newValue","paintValueOnTrack","setFloaterPosition","handleSliderChange","event","valueToPaint","percentage","balloonWidth","trackWidth","leftPosition","clampedLeft","initializeSlider","useEffectEvent","useEffect","jsxs","styles","jsx","Icon","clsx"],"mappings":"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"}

package/dist/components/Sortable/Sortable.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Children as a } from "react";
 import { SortableItem as f } from "./components/SortableItem.js";
-import { S as I } from "../../SortableProvider-l8-7ClBJ.js";
+import { S as I } from "../../SortableProvider-BbwlEPIr.js";
 const P = ({
   children: t,
   childrenData: m,

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-l8-7ClBJ.js";
+import { S as p, u as a } from "../../SortableProvider-BbwlEPIr.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-B6I6E9un.js";
-import { a } from "../../../SortableProvider-l8-7ClBJ.js";
+import "../../../Sortable.module-DCVXxKnw.js";
+import { a } from "../../../SortableProvider-BbwlEPIr.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-B6I6E9un.js";
+import { s as t } from "../../../Sortable.module-DCVXxKnw.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

@@ -3,8 +3,8 @@ import { useState as S, useRef as Q, useEffect as k } from "react";
 import { c as G } from "../../../clsx-OuTLNxxd.js";
 import { Icon as w } from "../../Icon/Icon.js";
 import { SortableHandle as E } from "./SortableHandle.js";
-import { s as e } from "../../../Sortable.module-B6I6E9un.js";
-import { u as J } from "../../../SortableProvider-l8-7ClBJ.js";
+import { s as e } from "../../../Sortable.module-DCVXxKnw.js";
+import { u as J } from "../../../SortableProvider-BbwlEPIr.js";
 const j = ["Space", "ArrowDown", "ArrowUp"], F = "ontouchstart" in globalThis.document.documentElement, C = new Image(0, 0);
 C.src = // 1px transparent png
 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";

package/dist/components/Spinner/Spinner.js

@@ -1,20 +1,20 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { useState as a, useEffect as c } from "react";
-import '../../assets/Spinner.css';const l = "_spinner_1e7wd_11", r = {
-  "spinner-container": "_spinner-container_1e7wd_11",
+import '../../assets/Spinner.css';const l = "_spinner_n7kdw_11", r = {
+  "spinner-container": "_spinner-container_n7kdw_11",
   spinner: l
-}, p = 250, m = ({ ariaValueText: i, showAfterMs: e = p }) => {
-  const [t, s] = a(() => e === 0);
+}, p = 250, m = ({ ariaValueText: i, showAfterMs: n = p }) => {
+  const [t, s] = a(() => n === 0);
   return c(() => {
-    if (e === 0)
+    if (n === 0)
       return;
     const o = window.setTimeout(() => {
       s(!0);
-    }, e);
+    }, n);
     return () => {
       window.clearTimeout(o);
     };
-  }), t ? /* @__PURE__ */ n("div", { className: r["spinner-container"], children: /* @__PURE__ */ n("div", { className: r.spinner, role: "progressbar", "aria-label": "Spinner", "aria-valuetext": i }) }) : null;
+  }), t ? /* @__PURE__ */ e("div", { className: r["spinner-container"], children: /* @__PURE__ */ e("div", { className: r.spinner, role: "progressbar", "aria-label": "Spinner", "aria-valuetext": i }) }) : null;
 };
 export {
   m as Spinner

package/dist/components/StatusBadge/StatusBage.js

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

package/dist/components/StatusPill/StatusPill.js

@@ -1,33 +1,33 @@
 import { jsxs as _, jsx as p } from "react/jsx-runtime";
-import { c as e } from "../../clsx-OuTLNxxd.js";
-import { Icon as a } from "../Icon/Icon.js";
+import { c as o } from "../../clsx-OuTLNxxd.js";
+import { Icon as e } from "../Icon/Icon.js";
 import '../../assets/StatusPill.css';const l = {
-  "status-pill": "_status-pill_1df7x_1",
-  "status-pill__possible": "_status-pill__possible_1df7x_10",
-  "status-pill__impossible": "_status-pill__impossible_1df7x_15",
-  "status-pill__new": "_status-pill__new_1df7x_20",
-  "status-pill--bar": "_status-pill--bar_1df7x_26"
-}, o = {
+  "status-pill": "_status-pill_mojwk_1",
+  "status-pill__possible": "_status-pill__possible_mojwk_10",
+  "status-pill__impossible": "_status-pill__impossible_mojwk_15",
+  "status-pill__new": "_status-pill__new_mojwk_20",
+  "status-pill--bar": "_status-pill--bar_mojwk_26"
+}, a = {
   possible: "CheckCircleFillMini",
   impossible: "CrossCircleFillMini"
 };
-function c({ status: s, variant: i = "default", label: t }) {
+function r({ status: s, variant: i = "default", label: t }) {
   return /* @__PURE__ */ _(
     "span",
     {
-      className: e(
+      className: o(
         l["status-pill"],
         l[`status-pill__${s}`],
         i !== "default" && l[`status-pill--${i}`]
       ),
       children: [
-        s !== "new" && /* @__PURE__ */ p(a, { name: o[s], title: s, size: 16 }),
+        s !== "new" && /* @__PURE__ */ p(e, { name: a[s], title: s, size: 16 }),
         t
       ]
     }
   );
 }
 export {
-  c as StatusPill
+  r as StatusPill
 };
 //# sourceMappingURL=StatusPill.js.map

package/dist/components/TextArea/TextArea.js

@@ -1,19 +1,19 @@
 import { jsxs as r, jsx as _ } from "react/jsx-runtime";
-import { useRef as h, useState as u } from "react";
-import { c as p } from "../../clsx-OuTLNxxd.js";
+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_2mhm2_1",
-  "text-area__header": "_text-area__header_2mhm2_7",
-  "text-area__label-wrapper": "_text-area__label-wrapper_2mhm2_13",
-  "text-area__label": "_text-area__label_2mhm2_13",
-  "text-area__sub-label": "_text-area__sub-label_2mhm2_25",
-  "text-area__word-count": "_text-area__word-count_2mhm2_30",
-  "text-area__word-count--alert": "_text-area__word-count--alert_2mhm2_35",
-  "text-area": "_text-area_2mhm2_1"
+  "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"
 };
-function b({ onChange: o, label: l, subLabel: n, maxCharacters: a = 0, defaultValue: s = "" }) {
-  const t = h(null), [c, x] = u(s.length), m = () => {
-    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, x(t.current.value.length), o(t.current.value.trim()));
+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()));
   };
   return /* @__PURE__ */ r("div", { className: e["text-area__wrapper"], children: [
     (l || a > 0) && /* @__PURE__ */ r("div", { className: e["text-area__header"], children: [
@@ -22,7 +22,7 @@ function b({ onChange: o, label: l, subLabel: n, maxCharacters: a = 0, defaultVa
         n && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: n })
       ] }),
       a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
-        /* @__PURE__ */ _("span", { className: p({ [e["text-area__word-count--alert"]]: c === a }), children: c }),
+        /* @__PURE__ */ _("span", { className: i({ [e["text-area__word-count--alert"]]: s === a }), children: s }),
         " / ",
         a
       ] })
@@ -33,13 +33,13 @@ function b({ onChange: o, label: l, subLabel: n, maxCharacters: a = 0, defaultVa
         ref: t,
         className: e["text-area"],
         maxLength: a > 0 ? a : void 0,
-        onInput: m,
-        defaultValue: s
+        onInput: u,
+        defaultValue: x
       }
     )
   ] });
 }
 export {
-  b as TextArea
+  j as TextArea
 };
 //# sourceMappingURL=TextArea.js.map

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_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"
+  "toggle-switch": "_toggle-switch_lh249_1",
+  "toggle-switch__visible": "_toggle-switch__visible_lh249_9",
+  "toggle-switch--disabled": "_toggle-switch--disabled_lh249_54",
+  "toggle-switch--loading": "_toggle-switch--loading_lh249_64",
+  "toggle-switch--visually-hidden": "_toggle-switch--visually-hidden_lh249_74",
+  "toggle-switch--disabled-label": "_toggle-switch--disabled-label_lh249_87",
+  "toggle-switch--loading-cursor": "_toggle-switch--loading-cursor_lh249_91",
+  "toggle-switch--extra-left-gap": "_toggle-switch--extra-left-gap_lh249_95"
 };
 function n({
   condition: i,
@@ -17,12 +17,12 @@ function n({
 }) {
   return i ? g(t) : t;
 }
-function p({
+function b({
   label: i,
   labelPosition: g = "after",
   labelVisible: t = !0,
   loading: o = !1,
-  extraLeftGap: d,
+  extraLeftGap: h,
   ...s
 }) {
   const c = /* @__PURE__ */ e(
@@ -39,7 +39,7 @@ function p({
     n,
     {
       condition: o,
-      wrapper: (h) => /* @__PURE__ */ e("div", { className: l["toggle-switch--loading-cursor"], children: h }),
+      wrapper: (d) => /* @__PURE__ */ e("div", { className: l["toggle-switch--loading-cursor"], children: d }),
       children: /* @__PURE__ */ _(
         "label",
         {
@@ -47,7 +47,7 @@ function p({
             l["toggle-switch"],
             { [l["toggle-switch--disabled"]]: s.disabled },
             { [l["toggle-switch--loading"]]: o },
-            { [l["toggle-switch--extra-left-gap"]]: d }
+            { [l["toggle-switch--extra-left-gap"]]: h }
           ),
           children: [
             g === "before" && c,
@@ -61,6 +61,6 @@ function p({
   );
 }
 export {
-  p as ToggleSwitch
+  b as ToggleSwitch
 };
 //# sourceMappingURL=ToggleSwitch.js.map

package/dist/components/Tooltip/Tooltip.js

@@ -1,60 +1,60 @@
-import { jsxs as B, jsx as R } from "react/jsx-runtime";
-import { useRef as y, useState as E, useCallback as b, useEffect as a } from "react";
-import '../../assets/Tooltip.css';const M = "_tooltip_small_622pq_8", j = "_tooltip_medium_622pq_9", I = "_tooltip_large_622pq_10", f = {
-  "tooltip-container": "_tooltip-container_622pq_1",
+import { jsxs as B, jsx as h } from "react/jsx-runtime";
+import { useRef as z, useState as R, useCallback as E, useEffect as p } from "react";
+import '../../assets/Tooltip.css';const M = "_tooltip_small_zy1z9_8", j = "_tooltip_medium_zy1z9_9", I = "_tooltip_large_zy1z9_10", f = {
+  "tooltip-container": "_tooltip-container_zy1z9_1",
   tooltip_small: M,
   tooltip_medium: j,
   tooltip_large: I,
-  "tooltip_under-trigger": "_tooltip_under-trigger_622pq_64"
+  "tooltip_under-trigger": "_tooltip_under-trigger_zy1z9_64"
 };
-function X({ element: q, id: _, text: L, size: n = "medium", openUnderTrigger: s = !1 }) {
-  const l = y(null), c = y(null), [i, o] = E(!1), [d, k] = E({ top: 0, left: 0 }), m = n === "small" && 20 || n === "large" && 35 || 27, g = n === "small" && 25 || n === "large" && 70 || 47, e = b(() => {
+function X({ element: b, id: _, text: L, size: n = "medium", openUnderTrigger: s = !1 }) {
+  const l = z(null), c = z(null), [i, o] = R(!1), [d, k] = R({ top: 0, left: 0 }), m = n === "small" && 20 || n === "large" && 35 || 27, g = n === "small" && 25 || n === "large" && 70 || 47, e = E(() => {
     if (l.current && c.current) {
-      const t = l.current.getBoundingClientRect(), h = c.current.getBoundingClientRect(), p = window.scrollY, C = window.scrollX;
-      let r = t.top + p + m - h.height;
-      const O = t.left + C + g + (t.width - h.width) / 2;
-      r -= p, r < 0 && (r = t.bottom + p), k({ top: r, left: O });
+      const t = l.current.getBoundingClientRect(), v = c.current.getBoundingClientRect(), a = window.scrollY, C = window.scrollX;
+      let r = t.top + a + m - v.height;
+      const O = t.left + C + g + (t.width - v.width) / 2;
+      r -= a, r < 0 && (r = t.bottom + a), k({ top: r, left: O });
     }
-  }, [g, m]), u = b(
+  }, [g, m]), u = E(
     (t) => {
       t.key === "Escape" && o(!1);
     },
     [o]
   );
-  function w() {
+  function y() {
     o(!0);
   }
-  function v() {
+  function w() {
     o(!1);
   }
   function x() {
     o(!i);
   }
-  return a(() => {
+  return p(() => {
     if (!l.current) return;
     const t = l.current;
     return t.addEventListener("keyup", u, !0), () => {
       t.removeEventListener("keyup", u, !0);
     };
-  }, [u]), a(() => (e(), window.addEventListener("resize", e), () => {
+  }, [u]), p(() => (e(), window.addEventListener("resize", e), () => {
     window.removeEventListener("resize", e);
-  }), [e]), a(() => {
+  }), [e]), p(() => {
     i && !s && e();
   }, [i, s, e]), /* @__PURE__ */ B(
     "div",
     {
       className: f["tooltip-container"],
-      onBlur: v,
-      onFocus: w,
-      onMouseEnter: w,
-      onMouseLeave: v,
+      onBlur: w,
+      onFocus: y,
+      onMouseEnter: y,
+      onMouseLeave: w,
       onMouseUp: x,
       ref: l,
       role: "button",
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ R("div", { "aria-describedby": i ? _ : void 0, children: q }),
-        i && /* @__PURE__ */ R(
+        /* @__PURE__ */ h("div", { "aria-describedby": i ? _ : void 0, children: b }),
+        i && /* @__PURE__ */ h(
           "span",
           {
             ref: c,

package/dist/components/VarIndicator/VarIndicator.js

@@ -2,46 +2,46 @@ import { jsx as r, jsxs as o, Fragment as d } from "react/jsx-runtime";
 import { c as l } from "../../clsx-OuTLNxxd.js";
 import { Icon as t } from "../Icon/Icon.js";
 import '../../assets/VarIndicator.css';const a = {
-  "var-indicator__container": "_var-indicator__container_9n427_27",
-  "var-indicator__label": "_var-indicator__label_9n427_46",
-  "var-indicator__step-container": "_var-indicator__step-container_9n427_50",
-  "var-indicator__container--compact": "_var-indicator__container--compact_9n427_61",
-  "var-indicator__container--compact-flyover-wrapper": "_var-indicator__container--compact-flyover-wrapper_9n427_71",
-  "var-indicator__container--draft": "_var-indicator__container--draft_9n427_85",
-  "var-indicator__container--rejected": "_var-indicator__container--rejected_9n427_86",
-  "var-indicator__container--submitted": "_var-indicator__container--submitted_9n427_101",
-  "var-indicator__container--active": "_var-indicator__container--active_9n427_113"
+  "var-indicator__container": "_var-indicator__container_15lwy_27",
+  "var-indicator__label": "_var-indicator__label_15lwy_46",
+  "var-indicator__step-container": "_var-indicator__step-container_15lwy_50",
+  "var-indicator__container--compact": "_var-indicator__container--compact_15lwy_61",
+  "var-indicator__container--compact-flyover-wrapper": "_var-indicator__container--compact-flyover-wrapper_15lwy_71",
+  "var-indicator__container--draft": "_var-indicator__container--draft_15lwy_85",
+  "var-indicator__container--rejected": "_var-indicator__container--rejected_15lwy_86",
+  "var-indicator__container--submitted": "_var-indicator__container--submitted_15lwy_101",
+  "var-indicator__container--active": "_var-indicator__container--active_15lwy_113"
 }, v = {
   DRAFT: "CircleLarge",
   REJECTED: "CircleLarge",
   SUBMITTED: "CircleLargeDotted",
   ACTIVE: "SignalActive"
-}, E = ({
+}, T = ({
   label: s,
-  variant: n = "DRAFT",
-  maxSteps: i,
+  variant: i = "DRAFT",
+  maxSteps: n,
   currentStep: m = 1,
   isCompact: _,
   onClick: p
 }) => {
   const e = () => /* @__PURE__ */ o(d, { children: [
-    /* @__PURE__ */ r(t, { name: v[n], size: 16 }),
-    /* @__PURE__ */ r("span", { className: a["var-indicator__label"], children: s[`${n}`] }),
-    i && i > 0 && n === "SUBMITTED" && Array.from({ length: i }, (c, f) => f + 1).map((c) => /* @__PURE__ */ r("div", { className: a["var-indicator__step-container"], children: /* @__PURE__ */ r(t, { name: c <= m ? "CircleSmallFilled" : "CircleSmall" }) }, c))
+    /* @__PURE__ */ r(t, { name: v[i], size: 16 }),
+    /* @__PURE__ */ r("span", { className: a["var-indicator__label"], children: s[`${i}`] }),
+    n && n > 0 && i === "SUBMITTED" && Array.from({ length: n }, (c, y) => y + 1).map((c) => /* @__PURE__ */ r("div", { className: a["var-indicator__step-container"], children: /* @__PURE__ */ r(t, { name: c <= m ? "CircleSmallFilled" : "CircleSmall" }) }, c))
   ] });
   return /* @__PURE__ */ r(
     "button",
     {
       className: l(
         a["var-indicator__container"],
-        a[`var-indicator__container--${n.toLowerCase()}`],
+        a[`var-indicator__container--${i.toLowerCase()}`],
         {
           [a["var-indicator__container--compact"]]: _
         }
       ),
       onClick: p,
       children: _ ? /* @__PURE__ */ o(d, { children: [
-        /* @__PURE__ */ r(t, { name: v[n], size: 16 }),
+        /* @__PURE__ */ r(t, { name: v[i], size: 16 }),
         /* @__PURE__ */ r(
           "div",
           {
@@ -57,6 +57,6 @@ import '../../assets/VarIndicator.css';const a = {
   );
 };
 export {
-  E as VarIndicator
+  T as VarIndicator
 };
 //# sourceMappingURL=VarIndicator.js.map