@uva-glass/component-library 3.30.1 → 3.31.0

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

@@ -1,59 +1,58 @@
-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-yzXaWwsm.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);
-  }, k = (e) => {
-    switch (e.key) {
+import { jsxs as k, Fragment as D, jsx as b } from "react/jsx-runtime";
+import { c as h } from "../../../clsx-OuTLNxxd.js";
+import { useRef as y, useEffect as m } from "react";
+import { useSelect as O } from "../SelectProvider.js";
+import { s as c } from "../../../SelectListbox.module-yzXaWwsm.js";
+const E = ({ option: l, index: t, dividerAfter: u, children: d }) => {
+  const i = y(null), { isOpen: a, activeIndex: e, setActiveIndex: r, selectedValue: n, setSelectedValue: p, setIsOpen: f, options: o } = O(), v = (s) => {
+    p(o[s]), f(!1);
+  }, w = (s) => {
+    switch (s.key) {
       case "Tab":
-        e.preventDefault(), r && n(!1);
+        s.preventDefault(), a && f(!1);
         break;
       case "ArrowDown":
       case "ArrowUp":
-        if (e.preventDefault(), !r)
+        if (s.preventDefault(), !a)
           return;
-        e.key === "ArrowDown" && s < a.length - 1 && c(s + 1), e.key === "ArrowUp" && s > 0 && c(s - 1);
+        s.key === "ArrowDown" && e < o.length - 1 && r(e + 1), s.key === "ArrowUp" && e > 0 && r(e - 1);
         break;
       case "Enter":
-        e.preventDefault(), a != null && a.length && s > -1 && !a[s].disabled && w(s);
+        s.preventDefault(), o?.length && e > -1 && !o[e].disabled && v(e);
         break;
       case "Escape":
-        r && (e.stopPropagation(), n(!1));
+        a && (s.stopPropagation(), f(!1));
         break;
     }
   };
-  return d(() => {
-    var e, b;
-    t === s && (r ? (e = i.current) == null || e.focus() : (b = i.current) == null || b.blur());
-  }, [s, t, r]), d(() => {
-    f.value === l.value && c(t);
-  }, [t, l.value, f.value, c]), /* @__PURE__ */ D(h, { children: [
-    /* @__PURE__ */ m(
+  return m(() => {
+    t === e && (a ? i.current?.focus() : i.current?.blur());
+  }, [e, t, a]), m(() => {
+    n.value === l.value && r(t);
+  }, [t, l.value, n.value, r]), /* @__PURE__ */ k(D, { children: [
+    /* @__PURE__ */ b(
       "li",
       {
-        className: y(o["select-listbox-option"], {
-          [o["select-listbox-option--active"]]: t === s,
-          [o["select-listbox-option--divider"]]: t + 1 === u
+        className: h(c["select-listbox-option"], {
+          [c["select-listbox-option--active"]]: t === e,
+          [c["select-listbox-option--divider"]]: t + 1 === u
         }),
         ...!l.disabled && {
           onClick: () => p(l),
-          onKeyDown: k,
+          onKeyDown: w,
           tabIndex: 0,
           role: "option",
-          "aria-selected": f.value === l.value
+          "aria-selected": n.value === l.value
         },
         ref: i,
-        children: v
+        children: d
       },
       `${l.value}`
     ),
-    t + 1 === u && /* @__PURE__ */ m("div", { className: o["select-listbox-divider"], "aria-hidden": "true" })
+    t + 1 === u && /* @__PURE__ */ b("div", { className: c["select-listbox-divider"], "aria-hidden": "true" })
   ] });
 };
 export {
-  j as SelectOption
+  E as SelectOption
 };
 //# sourceMappingURL=SelectOption.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string | number;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AAC5F,QAAMC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAA,GAE/FC,IAAqB,CAACC,MAAmB;AAC7C,IAAAL,EAAiBE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACFX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAA,GACF,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAA,GACFL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAA,GACNN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EACJ;AAGF,SAAAO,EAAU,MAAM;;AACd,IAAIjB,MAAUM,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EACvE,GACC,CAACb,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACd,IAAIT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAa,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGxB,MAAUM;AAAA,UACrD,CAACkB,EAAO,gCAAgC,CAAC,GAAGxB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAAA;AAAA,QAElD,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAAA;AAAA,IAYrBC,IAAQ,MAAMC,KAAgB,gBAAAqB,EAAC,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAA,CAAO;AAAA,EAAA,GACtG;AAEJ;"}
+{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string | number;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AAC5F,QAAMC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAA,GAE/FC,IAAqB,CAACC,MAAmB;AAC7C,IAAAL,EAAiBE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACFX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAA,GACF,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAA,GACFL,GAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAA,GACNN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EACJ;AAGF,SAAAO,EAAU,MAAM;AACd,IAAIjB,MAAUM,MACZD,IAASF,EAAgB,SAAS,MAAA,IAAUA,EAAgB,SAAS,KAAA;AAAA,EACvE,GACC,CAACG,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACd,IAAIT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAW,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGtB,MAAUM;AAAA,UACrD,CAACgB,EAAO,gCAAgC,CAAC,GAAGtB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAAA;AAAA,QAElD,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAAA;AAAA,IAYrBC,IAAQ,MAAMC,KAAgB,gBAAAmB,EAAC,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAA,CAAO;AAAA,EAAA,GACtG;AAEJ;"}

package/dist/components/Sortable/Sortable.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { SortableItemProps } from './components/SortableItem';
 export type Index = string | number;
+export type SortableItemColors = 'grey-200' | 'white';
 export interface SortableProps {
     /** The elements to show inside the Sortable. */
     children: ReactElement[] | string[];
@@ -10,7 +11,11 @@ export interface SortableProps {
     scrollable?: boolean;
     /** If true, the sorting will be disabled. */
     disabled?: boolean;
+    /** Hide the numbers shown next to the sortable elements. */
+    hideNumbers?: boolean;
+    /** Change the color of the SortableItem wrapper. */
+    sortableItemColor?: SortableItemColors;
     /** The callback function that is invoked when new sorting takes place. */
     onSort?: (items: (string | ReactElement)[]) => void;
 }
-export declare const Sortable: ({ children, ItemHandlePlacement, scrollable, disabled, onSort }: SortableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Sortable: ({ children, ItemHandlePlacement, scrollable, disabled, onSort, hideNumbers, sortableItemColor, }: SortableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sortable/Sortable.js

@@ -1,27 +1,37 @@
 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-CwX1lFMa.js";
-const S = ({ children: t, ItemHandlePlacement: m = "left", scrollable: a, disabled: l, onSort: i }) => /* @__PURE__ */ o(
-  n,
+import { SortableItem as p } from "./components/SortableItem.js";
+import { S as f } from "../../SortableProvider-C2T7b-pm.js";
+const u = ({
+  children: r,
+  ItemHandlePlacement: m = "left",
+  scrollable: a,
+  disabled: l,
+  onSort: i,
+  hideNumbers: s,
+  sortableItemColor: b = "grey-200"
+}) => /* @__PURE__ */ o(
+  f,
   {
-    items: t,
+    items: r,
     scrollable: a,
+    hideNumbers: s,
     onSort: i,
-    children: t.map((s, r) => /* @__PURE__ */ o(
-      b,
+    children: r.map((n, t) => /* @__PURE__ */ o(
+      p,
       {
         handlePlacement: m,
-        disabled: l || e.count(t) <= 1,
-        index: r,
-        children: s
+        disabled: l || e.count(r) <= 1,
+        sortableItemColor: b,
+        index: t,
+        children: n
       },
-      `sortable-item-${r}`
+      `sortable-item-${t}`
     ))
   },
-  `sortable-with-children-${e.count(t)}`
+  `sortable-with-children-${e.count(r)}`
 );
 export {
-  S as Sortable
+  u as Sortable
 };
 //# sourceMappingURL=Sortable.js.map

package/dist/components/Sortable/Sortable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.js","sources":["../../../src/components/Sortable/Sortable.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableItemProps } from './components/SortableItem';\n\nimport { SortableItem } from './components/SortableItem';\nimport { SortableProvider } from './SortableProvider';\n\nexport type Index = string | number;\n\nexport interface SortableProps {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The placement of each item Handle (6 dots 2x3). */\n  ItemHandlePlacement?: SortableItemProps['handlePlacement'];\n  /** If true, a scrollable version of the list will be rendered (max height 21rem/336px). */\n  scrollable?: boolean;\n  /** If true, the sorting will be disabled. */\n  disabled?: boolean;\n  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: (string | ReactElement)[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = ({ children, ItemHandlePlacement = 'left', scrollable, disabled, onSort }: SortableProps) => {\n  return (\n    <SortableProvider\n      items={children}\n      scrollable={scrollable}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {children.map((child, index) => (\n        <SortableItem\n          handlePlacement={ItemHandlePlacement}\n          disabled={disabled || Children.count(children) <= 1}\n          index={index}\n          key={`sortable-item-${index}`}\n        >\n          {child}\n        </SortableItem>\n      ))}\n    </SortableProvider>\n  );\n};\n"],"names":["Sortable","children","ItemHandlePlacement","scrollable","disabled","onSort","jsx","SortableProvider","child","index","SortableItem","Children"],"mappings":";;;;AAwBO,MAAMA,IAAW,CAAC,EAAE,UAAAC,GAAU,qBAAAC,IAAsB,QAAQ,YAAAC,GAAY,UAAAC,GAAU,QAAAC,QAErF,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAON;AAAA,IACP,YAAAE;AAAA,IACA,QAAAE;AAAA,IAGC,UAAAJ,EAAS,IAAI,CAACO,GAAOC,MACpB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,iBAAiBR;AAAA,QACjB,UAAUE,KAAYO,EAAS,MAAMV,CAAQ,KAAK;AAAA,QAClD,OAAAQ;AAAA,QAGC,UAAAD;AAAA,MAAA;AAAA,MAFI,iBAAiBC,CAAK;AAAA,IAAA,CAI9B;AAAA,EAAA;AAAA,EAXI,0BAA0BE,EAAS,MAAMV,CAAQ,CAAC;AAAA;"}
+{"version":3,"file":"Sortable.js","sources":["../../../src/components/Sortable/Sortable.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableItemProps } from './components/SortableItem';\n\nimport { SortableItem } from './components/SortableItem';\nimport { SortableProvider } from './SortableProvider';\n\nexport type Index = string | number;\nexport type SortableItemColors = 'grey-200' | 'white';\n\nexport interface SortableProps {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The placement of each item Handle (6 dots 2x3). */\n  ItemHandlePlacement?: SortableItemProps['handlePlacement'];\n  /** If true, a scrollable version of the list will be rendered (max height 21rem/336px). */\n  scrollable?: boolean;\n  /** If true, the sorting will be disabled. */\n  disabled?: boolean;\n  /** Hide the numbers shown next to the sortable elements. */\n  hideNumbers?: boolean;\n  /** Change the color of the SortableItem wrapper. */\n  sortableItemColor?: SortableItemColors;\n  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: (string | ReactElement)[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = ({\n  children,\n  ItemHandlePlacement = 'left',\n  scrollable,\n  disabled,\n  onSort,\n  hideNumbers,\n  sortableItemColor = 'grey-200',\n}: SortableProps) => {\n  return (\n    <SortableProvider\n      items={children}\n      scrollable={scrollable}\n      hideNumbers={hideNumbers}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {children.map((child, index) => (\n        <SortableItem\n          handlePlacement={ItemHandlePlacement}\n          disabled={disabled || Children.count(children) <= 1}\n          sortableItemColor={sortableItemColor}\n          index={index}\n          key={`sortable-item-${index}`}\n        >\n          {child}\n        </SortableItem>\n      ))}\n    </SortableProvider>\n  );\n};\n"],"names":["Sortable","children","ItemHandlePlacement","scrollable","disabled","onSort","hideNumbers","sortableItemColor","jsx","SortableProvider","child","index","SortableItem","Children"],"mappings":";;;;AA6BO,MAAMA,IAAW,CAAC;AAAA,EACvB,UAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAOR;AAAA,IACP,YAAAE;AAAA,IACA,aAAAG;AAAA,IACA,QAAAD;AAAA,IAGC,UAAAJ,EAAS,IAAI,CAACS,GAAOC,MACpB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,iBAAiBV;AAAA,QACjB,UAAUE,KAAYS,EAAS,MAAMZ,CAAQ,KAAK;AAAA,QAClD,mBAAAM;AAAA,QACA,OAAAI;AAAA,QAGC,UAAAD;AAAA,MAAA;AAAA,MAFI,iBAAiBC,CAAK;AAAA,IAAA,CAI9B;AAAA,EAAA;AAAA,EAZI,0BAA0BE,EAAS,MAAMZ,CAAQ,CAAC;AAAA;"}

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

@@ -1,12 +1,13 @@
 import { jsx as e, jsxs as m, Fragment as i } from "react/jsx-runtime";
-import { W as s } from "../../index-Di9WPZUe.js";
+import { l as s } from "../../index-C2E9FY6V.js";
 import { Sortable as o } from "./Sortable.js";
-import { InputField as c } from "../InputField/InputField.js";
-import { Icon as d } from "../Icon/Icon.js";
-import { Button as p } from "../Buttons/Button.js";
+import { InputField as d } from "../InputField/InputField.js";
+import { Icon as c } from "../Icon/Icon.js";
+import { Button as b } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
 import "@react-aria/button";
-const b = "<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {children} </ Sortable>", W = {
+const p = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} 
+    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `, j = {
   title: "Organisms/Sortable",
   component: o,
   argTypes: {
@@ -23,23 +24,23 @@ const b = "<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlac
   },
   parameters: {
     inspectComponent: o,
-    codeString: b
+    codeString: p
   }
 }, r = {
   ItemHandlePlacement: "left",
   onSort: s()
-}, n = ["Item-1", "Item-2", "Item-3", "Item-4", "Item-5"], a = (l) => /* @__PURE__ */ e(o, { ...l, children: n }), h = a.bind({});
+}, a = ["Item-1", "Item-2", "Item-3", "Item-4", "Item-5"], n = (l) => /* @__PURE__ */ e(o, { ...l, children: a }), h = n.bind({});
 h.args = {
   ...r
 };
-const I = a.bind({});
+const I = n.bind({});
 I.args = {
   ...r,
   ItemHandlePlacement: "right"
 };
-const f = (l) => /* @__PURE__ */ e(o, { ...l, children: n.map((t) => /* @__PURE__ */ m(i, { children: [
-  /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(c, { id: t, placeholder: t }, t) }),
-  /* @__PURE__ */ e(p, { variant: "blank-icon", children: /* @__PURE__ */ e(d, { name: "Trash", color: "#a0002aff" }) })
+const f = (l) => /* @__PURE__ */ e(o, { ...l, children: a.map((t) => /* @__PURE__ */ m(i, { children: [
+  /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(d, { id: t, placeholder: t }, t) }),
+  /* @__PURE__ */ e(b, { variant: "blank-icon", children: /* @__PURE__ */ e(c, { name: "Trash", color: "#a0002aff" }) })
 ] }, t)) }), g = f.bind({});
 g.args = {
   ...r
@@ -47,7 +48,7 @@ g.args = {
 export {
   h as SortableExample,
   g as WithComplexChildren,
-  W as default,
+  j as default,
   I as withHandleRight
 };
 //# sourceMappingURL=Sortable.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sortable.stories.js","sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString =\n  '<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {children} </ Sortable>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/Sortable',\n  component: Sortable,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    ItemHandlePlacement: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Sortable,\n    codeString: codeString,\n  },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n  ItemHandlePlacement: 'left',\n  onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n  ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n  ...defaultArgs,\n  ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n  <Sortable {...args}>\n    {mockItems.map((item) => (\n      <Fragment key={item}>\n        <div style={{ width: '100%' }}>\n          <InputField key={item} id={item} placeholder={item} />\n        </div>\n        <Button variant=\"blank-icon\">\n          <Icon name=\"Trash\" color=\"#a0002aff\" />\n        </Button>\n      </Fragment>\n    ))}\n  </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","Sortable_stories","Sortable","defaultArgs","fn","mockItems","Template","args","SortableExample","withHandleRight","TemplateComplex","jsx","item","jsxs","Fragment","InputField","Button","Icon","WithComplexChildren"],"mappings":";;;;;;;;AAYA,MAAMA,IACJ,oJAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,QAAQC,EAAA;AACV,GAEMC,IAAY,CAAC,UAAU,UAAU,UAAU,UAAU,QAAQ,GAE7DC,IAAmC,CAACC,wBAAUL,GAAA,EAAU,GAAGK,GAAO,UAAAF,GAAU,GAErEG,IAAkBF,EAAS,KAAK,CAAA,CAAE;AAC/CE,EAAgB,OAAO;AAAA,EACrB,GAAGL;AACL;AAEO,MAAMM,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,GAAGN;AAAA,EACH,qBAAqB;AACvB;AAEA,MAAMO,IAA0C,CAACH,MAC/C,gBAAAI,EAACT,GAAA,EAAU,GAAGK,GACX,UAAAF,EAAU,IAAI,CAACO,MACd,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAH,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,OAAA,GACnB,UAAA,gBAAAA,EAACI,GAAA,EAAsB,IAAIH,GAAM,aAAaA,EAAA,GAA7BA,CAAmC,GACtD;AAAA,EACA,gBAAAD,EAACK,GAAA,EAAO,SAAQ,cACd,UAAA,gBAAAL,EAACM,KAAK,MAAK,SAAQ,OAAM,YAAA,CAAY,EAAA,CACvC;AAAA,KANaL,CAOf,CACD,GACH,GAGWM,IAAsBR,EAAgB,KAAK,CAAA,CAAE;AAC1DQ,EAAoB,OAAO;AAAA,EACzB,GAAGf;AACL;"}
+{"version":3,"file":"Sortable.stories.js","sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} \n    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/Sortable',\n  component: Sortable,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    ItemHandlePlacement: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Sortable,\n    codeString: codeString,\n  },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n  ItemHandlePlacement: 'left',\n  onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n  ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n  ...defaultArgs,\n  ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n  <Sortable {...args}>\n    {mockItems.map((item) => (\n      <Fragment key={item}>\n        <div style={{ width: '100%' }}>\n          <InputField key={item} id={item} placeholder={item} />\n        </div>\n        <Button variant=\"blank-icon\">\n          <Icon name=\"Trash\" color=\"#a0002aff\" />\n        </Button>\n      </Fragment>\n    ))}\n  </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","Sortable_stories","Sortable","defaultArgs","fn","mockItems","Template","args","SortableExample","withHandleRight","TemplateComplex","jsx","item","jsxs","Fragment","InputField","Button","Icon","WithComplexChildren"],"mappings":";;;;;;;;AAYA,MAAMA,IAAa;AAAA,8HAInBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,QAAQC,EAAA;AACV,GAEMC,IAAY,CAAC,UAAU,UAAU,UAAU,UAAU,QAAQ,GAE7DC,IAAmC,CAACC,wBAAUL,GAAA,EAAU,GAAGK,GAAO,UAAAF,GAAU,GAErEG,IAAkBF,EAAS,KAAK,CAAA,CAAE;AAC/CE,EAAgB,OAAO;AAAA,EACrB,GAAGL;AACL;AAEO,MAAMM,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,GAAGN;AAAA,EACH,qBAAqB;AACvB;AAEA,MAAMO,IAA0C,CAACH,MAC/C,gBAAAI,EAACT,GAAA,EAAU,GAAGK,GACX,UAAAF,EAAU,IAAI,CAACO,MACd,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAH,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,OAAA,GACnB,UAAA,gBAAAA,EAACI,GAAA,EAAsB,IAAIH,GAAM,aAAaA,EAAA,GAA7BA,CAAmC,GACtD;AAAA,EACA,gBAAAD,EAACK,GAAA,EAAO,SAAQ,cACd,UAAA,gBAAAL,EAACM,KAAK,MAAK,SAAQ,OAAM,YAAA,CAAY,EAAA,CACvC;AAAA,KANaL,CAOf,CACD,GACH,GAGWM,IAAsBR,EAAgB,KAAK,CAAA,CAAE;AAC1DQ,EAAoB,OAAO;AAAA,EACzB,GAAGf;AACL;"}

package/dist/components/Sortable/SortableProvider.d.ts

@@ -16,8 +16,9 @@ interface Props {
     children: SortableStateType['sortableItems'];
     items: ReactElement[] | string[];
     scrollable?: boolean;
+    hideNumbers?: boolean;
     onSort?: (items: (string | ReactElement)[]) => void;
 }
-export declare function SortableProvider({ children, items, scrollable, onSort }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SortableProvider({ children, items, scrollable, hideNumbers, onSort }: Props): import("react/jsx-runtime").JSX.Element;
 export declare function useSortable(): SortableContextType & SortableStateType;
 export {};

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-CwX1lFMa.js";
+import { S as p, u as a } from "../../SortableProvider-C2T7b-pm.js";
 import "./actions.js";
 export {
   p as SortableProvider,

package/dist/components/Sortable/components/SortableContainer.d.ts

@@ -1,7 +1,8 @@
 export type OnSort = (indices: number[]) => void;
 interface SortableContainerProps {
     scrollable?: boolean;
+    hideNumbers?: boolean;
     onSort?: OnSort;
 }
-export declare function SortableContainer({ scrollable, onSort }: SortableContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "react";
 import "../../../clsx-OuTLNxxd.js";
-import "../../../Sortable.module-CekPNg54.js";
-import { a } from "../../../SortableProvider-CwX1lFMa.js";
+import "../../../Sortable.module--kgnzOjW.js";
+import { a } from "../../../SortableProvider-C2T7b-pm.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-CekPNg54.js";
+import { s as t } from "../../../Sortable.module--kgnzOjW.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.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
 import { SortableHandleProps } from './SortableHandle';
+import { SortableItemColors } from 'components/Sortable/Sortable';
 export interface SortableItemProps {
     children: ReactNode;
     handlePlacement: SortableHandleProps['placement'];
     disabled?: boolean;
+    sortableItemColor: SortableItemColors;
     index: number;
 }
-export declare function SortableItem({ children, handlePlacement, disabled, index }: SortableItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableItem({ children, handlePlacement, disabled, sortableItemColor, index }: SortableItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,67 +1,68 @@
 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 { 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 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);
+import { s as e } from "../../../Sortable.module--kgnzOjW.js";
+import { u as J } from "../../../SortableProvider-C2T7b-pm.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==";
-function L({ children: D, handlePlacement: u, disabled: _, index: e }) {
+function q({ children: D, handlePlacement: m, disabled: g, sortableItemColor: N, index: t }) {
   const {
     clone: h,
-    dragEnd: m,
+    dragEnd: u,
     draggingSource: c,
     draggingTarget: f,
-    dragStart: g,
-    drop: N,
+    dragStart: _,
+    drop: T,
     maxIndex: p,
-    moveToPosition: T,
-    setClone: I,
-    setDraggingSource: U
-  } = k(), [$, A] = S(!1), [y, d] = S(!1), n = M(null), s = e !== void 0 && e >= 0;
-  Q(() => {
-    n.current && globalThis.document.activeElement !== n.current && (e === f && f === c ? (n.current.focus(), d(!0)) : d(!1));
-  }, [e, f, c, U]);
-  function K(a) {
+    moveToPosition: I,
+    setClone: U,
+    setDraggingSource: $
+  } = J(), [y, A] = S(!1), [K, d] = S(!1), n = Q(null), s = t !== void 0 && t >= 0;
+  k(() => {
+    n.current && globalThis.document.activeElement !== n.current && (t === f && f === c ? (n.current.focus(), d(!0)) : d(!1));
+  }, [t, f, c, $]);
+  function R(a) {
     if (a.stopPropagation(), a.dataTransfer.effectAllowed = "move", a.dataTransfer.setDragImage(C, 0, 0), n.current) {
       const o = n.current.cloneNode(!0);
-      o.classList.add(t["sortable__sort-item--ghost"]), I(o);
+      o.classList.add(e["sortable__sort-item--ghost"]), U(o);
     }
-    s && g(e), A(!0);
+    s && _(t), A(!0);
   }
-  function R() {
-    $ || (h && document.body.removeChild(h), A(!1), m());
+  function B() {
+    y || (h && document.body.removeChild(h), A(!1), u());
   }
-  function B(a) {
+  function M(a) {
     const { code: o } = a;
     if (o === "Tab" && c !== void 0) {
-      m();
+      u();
       return;
     }
-    if (G.includes(o) === !1 || !s) return;
+    if (j.includes(o) === !1 || !s) return;
     if (o === "Space") {
-      y ? (d(!1), m()) : (d(!0), g(e));
+      K ? (d(!1), u()) : (d(!0), _(t));
       return;
     }
     if (c === void 0) return;
-    const l = o === "ArrowUp" ? e - 1 : e + 1;
-    l < 0 || l > p || T(l);
+    const l = o === "ArrowUp" ? t - 1 : t + 1;
+    l < 0 || l > p || I(l);
   }
   function b(a) {
     if (a.preventDefault(), !s) return;
-    g(e);
-    const { direction: o } = a.currentTarget.dataset, l = o === "up" ? e - 1 : e + 1;
-    N(l);
+    _(t);
+    const { direction: o } = a.currentTarget.dataset, l = o === "up" ? t - 1 : t + 1;
+    T(l);
   }
   return /* @__PURE__ */ i(
     "div",
     {
-      className: t["sortable__sort-item"],
-      draggable: !_,
-      onDragEnd: R,
-      onDragStart: K,
-      onKeyUpCapture: B,
+      className: G(e["sortable__sort-item"], e[`sortable__sort-item--${N}`]),
+      draggable: !g,
+      onDragEnd: B,
+      onDragStart: R,
+      onKeyUpCapture: M,
       ref: n,
       role: "presentation",
       tabIndex: 0,
@@ -69,36 +70,36 @@ function L({ children: D, handlePlacement: u, disabled: _, index: e }) {
         /* @__PURE__ */ i(
           "div",
           {
-            className: `${t["sortable__sort-item__contents"]} ${t[`sortable__sort-item__contents--handle-${u}`]}`,
+            className: `${e["sortable__sort-item__contents"]} ${e[`sortable__sort-item__contents--handle-${m}`]}`,
             children: [
-              u === "left" && /* @__PURE__ */ r(E, { placement: "left" }),
+              m === "left" && /* @__PURE__ */ r(E, { placement: "left" }),
               D,
-              u === "right" && /* @__PURE__ */ r(E, { placement: "right" })
+              m === "right" && /* @__PURE__ */ r(E, { placement: "right" })
             ]
           }
         ),
-        /* @__PURE__ */ r("div", { className: t["sortable__sort-item__button-container"], "data-touch": J, children: !_ && s && /* @__PURE__ */ r(v, { children: s && /* @__PURE__ */ i(v, { children: [
-          e > 0 && /* @__PURE__ */ i(
+        /* @__PURE__ */ r("div", { className: e["sortable__sort-item__button-container"], "data-touch": F, children: !g && s && /* @__PURE__ */ r(v, { children: s && /* @__PURE__ */ i(v, { children: [
+          t > 0 && /* @__PURE__ */ i(
             "button",
             {
-              className: `${t["sortable__sort-item__handle"]} ${t["sortable__sort-item__handle--up"]}`,
+              className: `${e["sortable__sort-item__handle"]} ${e["sortable__sort-item__handle--up"]}`,
               "data-direction": "up",
               onClickCapture: b,
               children: [
-                /* @__PURE__ */ r("div", { className: t["sortable__sort-item__handle--icon"], children: /* @__PURE__ */ r(w, { name: "CheveronDown" }) }),
-                /* @__PURE__ */ r("span", { className: t["sortable__visually-hidden"], children: "Move up" })
+                /* @__PURE__ */ r("div", { className: e["sortable__sort-item__handle--icon"], children: /* @__PURE__ */ r(w, { name: "CheveronDown" }) }),
+                /* @__PURE__ */ r("span", { className: e["sortable__visually-hidden"], children: "Move up" })
               ]
             }
           ),
-          e < p && /* @__PURE__ */ i(
+          t < p && /* @__PURE__ */ i(
             "button",
             {
-              className: `${t["sortable__sort-item__handle"]} ${t["sortable__sort-item__handle--down"]}`,
+              className: `${e["sortable__sort-item__handle"]} ${e["sortable__sort-item__handle--down"]}`,
               "data-direction": "down",
               onClickCapture: b,
               children: [
-                /* @__PURE__ */ r("div", { className: t["sortable__sort-item__handle--icon"], children: /* @__PURE__ */ r(w, { name: "CheveronDown" }) }),
-                /* @__PURE__ */ r("span", { className: t["sortable__visually-hidden"], children: "Move down" })
+                /* @__PURE__ */ r("div", { className: e["sortable__sort-item__handle--icon"], children: /* @__PURE__ */ r(w, { name: "CheveronDown" }) }),
+                /* @__PURE__ */ r("span", { className: e["sortable__visually-hidden"], children: "Move down" })
               ]
             }
           )
@@ -108,6 +109,6 @@ function L({ children: D, handlePlacement: u, disabled: _, index: e }) {
   );
 }
 export {
-  L as SortableItem
+  q as SortableItem
 };
 //# sourceMappingURL=SortableItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\n\nimport { Icon } from 'components/Icon';\nimport { SortableHandle } from 'components/Sortable/components/SortableHandle';\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport interface SortableItemProps {\n  children: ReactNode;\n  handlePlacement: SortableHandleProps['placement'];\n  disabled?: boolean;\n  index: number;\n}\n\nconst ACCESS_KEYS = ['Space', 'ArrowDown', 'ArrowUp'];\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\nconst dragImage = new Image(0, 0);\n\ndragImage.src =\n  // 1px transparent png\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';\n\nexport function SortableItem({ children, handlePlacement, disabled, index }: SortableItemProps) {\n  const {\n    clone,\n    dragEnd,\n    draggingSource,\n    draggingTarget,\n    dragStart,\n    drop,\n    maxIndex,\n    moveToPosition,\n    setClone,\n    setDraggingSource,\n  } = useSortable();\n  const [grabbing, setGrabbing] = useState(false);\n  const [moving, setmoving] = useState(false);\n  const itemRef = useRef<HTMLDivElement>(null);\n  const hasIndex = index !== undefined && index >= 0;\n\n  useEffect(() => {\n    if (!itemRef.current) return;\n    if (globalThis.document.activeElement === itemRef.current) return;\n\n    if (index === draggingTarget && draggingTarget === draggingSource) {\n      // Manually setting focus after an item has been moved with the keyboard; focus is lost after rerender\n      itemRef.current.focus();\n      setmoving(true);\n    } else {\n      setmoving(false);\n    }\n  }, [index, draggingTarget, draggingSource, setDraggingSource]);\n\n  function handleDragStart(event: DragEvent<HTMLDivElement>) {\n    event.stopPropagation();\n\n    event.dataTransfer.effectAllowed = 'move';\n    event.dataTransfer.setDragImage(dragImage, 0, 0);\n\n    if (itemRef.current) {\n      const cloned = itemRef.current.cloneNode(true) as Element;\n\n      cloned.classList.add(styles['sortable__sort-item--ghost']);\n\n      setClone(cloned);\n    }\n\n    if (hasIndex) dragStart(index);\n    setGrabbing(true);\n  }\n\n  function handleDragEnd() {\n    if (grabbing) return;\n\n    if (clone) document.body.removeChild(clone);\n\n    setGrabbing(false);\n    dragEnd();\n  }\n\n  function handleKeyUp(event: ReactKeyboardEvent<HTMLDivElement>) {\n    const { code } = event;\n\n    if (code === 'Tab' && draggingSource !== undefined) {\n      dragEnd();\n      return;\n    }\n\n    if (ACCESS_KEYS.includes(code) === false) return;\n\n    if (!hasIndex) return;\n\n    if (code === 'Space') {\n      if (moving) {\n        setmoving(false);\n        dragEnd();\n      } else {\n        setmoving(true);\n        dragStart(index);\n      }\n\n      return;\n    }\n\n    if (draggingSource === undefined) return;\n\n    const newTarget = code === 'ArrowUp' ? index - 1 : index + 1;\n\n    if (newTarget < 0 || newTarget > maxIndex) return;\n\n    moveToPosition(newTarget);\n  }\n\n  function handleMove(event: MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n\n    if (!hasIndex) return;\n\n    dragStart(index);\n\n    const { direction } = event.currentTarget.dataset;\n    const newTarget = direction === 'up' ? index - 1 : index + 1;\n\n    drop(newTarget);\n  }\n\n  return (\n    <div\n      className={styles['sortable__sort-item']}\n      draggable={!disabled}\n      onDragEnd={handleDragEnd}\n      onDragStart={handleDragStart}\n      onKeyUpCapture={handleKeyUp}\n      ref={itemRef}\n      role=\"presentation\"\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n    >\n      <div\n        className={`${styles['sortable__sort-item__contents']} ${styles[`sortable__sort-item__contents--handle-${handlePlacement}`]}`}\n      >\n        {handlePlacement === 'left' && <SortableHandle placement=\"left\" />}\n        {children}\n        {handlePlacement === 'right' && <SortableHandle placement=\"right\" />}\n      </div>\n\n      <div className={styles['sortable__sort-item__button-container']} data-touch={noSupportTouch}>\n        {!disabled && hasIndex && (\n          <>\n            {hasIndex && (\n              <>\n                {index > 0 && (\n                  <button\n                    className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--up']}`}\n                    data-direction=\"up\"\n                    onClickCapture={handleMove}\n                  >\n                    <div className={styles['sortable__sort-item__handle--icon']}>\n                      <Icon name=\"CheveronDown\" />\n                    </div>\n                    <span className={styles['sortable__visually-hidden']}>Move up</span>\n                  </button>\n                )}\n\n                {index < maxIndex && (\n                  <button\n                    className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--down']}`}\n                    data-direction=\"down\"\n                    onClickCapture={handleMove}\n                  >\n                    <div className={styles['sortable__sort-item__handle--icon']}>\n                      <Icon name=\"CheveronDown\" />\n                    </div>\n                    <span className={styles['sortable__visually-hidden']}>Move down</span>\n                  </button>\n                )}\n              </>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ACCESS_KEYS","noSupportTouch","dragImage","SortableItem","children","handlePlacement","disabled","index","clone","dragEnd","draggingSource","draggingTarget","dragStart","drop","maxIndex","moveToPosition","setClone","setDraggingSource","useSortable","grabbing","setGrabbing","useState","moving","setmoving","itemRef","useRef","hasIndex","useEffect","handleDragStart","event","cloned","styles","handleDragEnd","handleKeyUp","code","newTarget","handleMove","direction","jsxs","jsx","SortableHandle","Fragment","Icon"],"mappings":"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"}
+{"version":3,"file":"SortableItem.js","sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\nimport type { SortableItemColors } from 'components/Sortable/Sortable';\n\nimport { Icon } from 'components/Icon';\nimport { SortableHandle } from 'components/Sortable/components/SortableHandle';\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport interface SortableItemProps {\n  children: ReactNode;\n  handlePlacement: SortableHandleProps['placement'];\n  disabled?: boolean;\n  sortableItemColor: SortableItemColors;\n  index: number;\n}\n\nconst ACCESS_KEYS = ['Space', 'ArrowDown', 'ArrowUp'];\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\nconst dragImage = new Image(0, 0);\n\ndragImage.src =\n  // 1px transparent png\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';\n\nexport function SortableItem({ children, handlePlacement, disabled, sortableItemColor, index }: SortableItemProps) {\n  const {\n    clone,\n    dragEnd,\n    draggingSource,\n    draggingTarget,\n    dragStart,\n    drop,\n    maxIndex,\n    moveToPosition,\n    setClone,\n    setDraggingSource,\n  } = useSortable();\n  const [grabbing, setGrabbing] = useState(false);\n  const [moving, setmoving] = useState(false);\n  const itemRef = useRef<HTMLDivElement>(null);\n  const hasIndex = index !== undefined && index >= 0;\n\n  useEffect(() => {\n    if (!itemRef.current) return;\n    if (globalThis.document.activeElement === itemRef.current) return;\n\n    if (index === draggingTarget && draggingTarget === draggingSource) {\n      // Manually setting focus after an item has been moved with the keyboard; focus is lost after rerender\n      itemRef.current.focus();\n      setmoving(true);\n    } else {\n      setmoving(false);\n    }\n  }, [index, draggingTarget, draggingSource, setDraggingSource]);\n\n  function handleDragStart(event: DragEvent<HTMLDivElement>) {\n    event.stopPropagation();\n\n    event.dataTransfer.effectAllowed = 'move';\n    event.dataTransfer.setDragImage(dragImage, 0, 0);\n\n    if (itemRef.current) {\n      const cloned = itemRef.current.cloneNode(true) as Element;\n\n      cloned.classList.add(styles['sortable__sort-item--ghost']);\n\n      setClone(cloned);\n    }\n\n    if (hasIndex) dragStart(index);\n    setGrabbing(true);\n  }\n\n  function handleDragEnd() {\n    if (grabbing) return;\n\n    if (clone) document.body.removeChild(clone);\n\n    setGrabbing(false);\n    dragEnd();\n  }\n\n  function handleKeyUp(event: ReactKeyboardEvent<HTMLDivElement>) {\n    const { code } = event;\n\n    if (code === 'Tab' && draggingSource !== undefined) {\n      dragEnd();\n      return;\n    }\n\n    if (ACCESS_KEYS.includes(code) === false) return;\n\n    if (!hasIndex) return;\n\n    if (code === 'Space') {\n      if (moving) {\n        setmoving(false);\n        dragEnd();\n      } else {\n        setmoving(true);\n        dragStart(index);\n      }\n\n      return;\n    }\n\n    if (draggingSource === undefined) return;\n\n    const newTarget = code === 'ArrowUp' ? index - 1 : index + 1;\n\n    if (newTarget < 0 || newTarget > maxIndex) return;\n\n    moveToPosition(newTarget);\n  }\n\n  function handleMove(event: MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n\n    if (!hasIndex) return;\n\n    dragStart(index);\n\n    const { direction } = event.currentTarget.dataset;\n    const newTarget = direction === 'up' ? index - 1 : index + 1;\n\n    drop(newTarget);\n  }\n\n  return (\n    <div\n      className={clsx(styles['sortable__sort-item'], styles[`sortable__sort-item--${sortableItemColor}`])}\n      draggable={!disabled}\n      onDragEnd={handleDragEnd}\n      onDragStart={handleDragStart}\n      onKeyUpCapture={handleKeyUp}\n      ref={itemRef}\n      role=\"presentation\"\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n    >\n      <div\n        className={`${styles['sortable__sort-item__contents']} ${styles[`sortable__sort-item__contents--handle-${handlePlacement}`]}`}\n      >\n        {handlePlacement === 'left' && <SortableHandle placement=\"left\" />}\n        {children}\n        {handlePlacement === 'right' && <SortableHandle placement=\"right\" />}\n      </div>\n\n      <div className={styles['sortable__sort-item__button-container']} data-touch={noSupportTouch}>\n        {!disabled && hasIndex && (\n          <>\n            {hasIndex && (\n              <>\n                {index > 0 && (\n                  <button\n                    className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--up']}`}\n                    data-direction=\"up\"\n                    onClickCapture={handleMove}\n                  >\n                    <div className={styles['sortable__sort-item__handle--icon']}>\n                      <Icon name=\"CheveronDown\" />\n                    </div>\n                    <span className={styles['sortable__visually-hidden']}>Move up</span>\n                  </button>\n                )}\n\n                {index < maxIndex && (\n                  <button\n                    className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--down']}`}\n                    data-direction=\"down\"\n                    onClickCapture={handleMove}\n                  >\n                    <div className={styles['sortable__sort-item__handle--icon']}>\n                      <Icon name=\"CheveronDown\" />\n                    </div>\n                    <span className={styles['sortable__visually-hidden']}>Move down</span>\n                  </button>\n                )}\n              </>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ACCESS_KEYS","noSupportTouch","dragImage","SortableItem","children","handlePlacement","disabled","sortableItemColor","index","clone","dragEnd","draggingSource","draggingTarget","dragStart","drop","maxIndex","moveToPosition","setClone","setDraggingSource","useSortable","grabbing","setGrabbing","useState","moving","setmoving","itemRef","useRef","hasIndex","useEffect","handleDragStart","event","cloned","styles","handleDragEnd","handleKeyUp","code","newTarget","handleMove","direction","jsxs","clsx","jsx","SortableHandle","Fragment","Icon"],"mappings":"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"}

package/dist/components/StatusBadge/StatusBadge.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DV47hRzi.js";
-import { r as t, s } from "../../react.esm-CFMwGdo5.js";
+import "../../index-Br0QepD6.js";
+import { r as t, s } from "../../react.esm-BKjCIfbB.js";
 import { StatusBadge as a } from "./StatusBage.js";
 describe("StatusBadge", () => {
   it("should render with message", () => {

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

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { W as r } from "../../index-Di9WPZUe.js";
+import { l as r } from "../../index-C2E9FY6V.js";
 import { TextArea as e } from "./TextArea.js";
 const l = `
   <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, p = {

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

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
-import "../../index-DV47hRzi.js";
-import { r as o, s as t, f as r } from "../../react.esm-CFMwGdo5.js";
-import { j as c } from "../../index-Di9WPZUe.js";
+import "../../index-Br0QepD6.js";
+import { r as o, s as t, f as r } from "../../react.esm-BKjCIfbB.js";
+import { J as c } from "../../index-C2E9FY6V.js";
 import { TextArea as n } from "./TextArea.js";
 describe("TextArea", () => {
   it("should render correctly with label", () => {

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

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