@uva-glass/component-library 3.31.0 → 3.32.1

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

@@ -4,7 +4,7 @@ import "../../../../clsx-OuTLNxxd.js";
 import "../../../../LexicalTable.prod-9xjyWB0C.js";
 import "../../../../Lexical.prod-B84LhBo3.js";
 import "react";
-import { T as F } from "../../../../TablePlugin-Dmy98Epb.js";
+import { T as F } from "../../../../TablePlugin-oF-gInNx.js";
 import "./helpers.js";
 import "../../hooks/useFlyout.js";
 import "../../../Icon/Icon.js";
@@ -29,7 +29,7 @@ import "../../../../index-nrPtQ1dv.js";
 import "../../../SelectListbox/SelectListbox.js";
 import "../../../SelectListbox/SelectProvider.js";
 import "../../../Sortable/components/SortableItem.js";
-import "../../../../SortableProvider-C2T7b-pm.js";
+import "../../../../SortableProvider-DisCfTTN.js";
 export {
   F as TablePlugin
 };

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

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

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

@@ -7,7 +7,7 @@ import { BlockFormatPlugin as T } from "../BlockFormatPlugin/BlockFormatPlugin.j
 import { ListPlugin as k } from "../ListPlugin/ListPlugin.js";
 import { LinkPlugin as x } from "../LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as B } from "../HistoryPlugin/HistoryPlugin.js";
-import { T as S } from "../../../../TablePlugin-Dmy98Epb.js";
+import { T as S } from "../../../../TablePlugin-oF-gInNx.js";
 import { TableCellContextMenu as z } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 import { s as A } from "../../../../RteEditor.module-B_3uFnFu.js";
 import { setScrollableContainers as b, removeScrollableContainers as K } from "../../helpers.js";

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

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

package/dist/components/RteEditor/RteEditor.js

@@ -16,7 +16,7 @@ import { exportMap as ir, isStartingWithHtmlTag as lr, mergeBoldStrongTags as ur
 import { s as I } from "../../RteEditor.module-B_3uFnFu.js";
 import { ToolBarPlugin as cr } from "./Plugins/ToolbarPlugin/ToolbarPlugin.js";
 import { useTranslation as dr } from "./hooks/useTranslation.js";
-import "../../TablePlugin-Dmy98Epb.js";
+import "../../TablePlugin-oF-gInNx.js";
 import "./Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "./hooks/components/Flyout.js";
 import "../Buttons/Button.js";
@@ -36,7 +36,7 @@ import "react-router";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-C2T7b-pm.js";
+import "../../SortableProvider-DisCfTTN.js";
 import { UvaTheme as mr } from "./UvaTheme/UvaTheme.js";
 import { EditorHeader as pr } from "./EditorHeader/EditorHeader.js";
 import { LanguageProvider as gr, useLanguage as hr } from "./Providers/LanguageProvider.js";

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

@@ -2,9 +2,11 @@ import { ReactElement } from 'react';
 import { SortableItemProps } from './components/SortableItem';
 export type Index = string | number;
 export type SortableItemColors = 'grey-200' | 'white';
-export interface SortableProps {
+export interface SortableProps<T = unknown> {
     /** The elements to show inside the Sortable. */
     children: ReactElement[] | string[];
+    /** The data objects that are actually being sorted. */
+    childrenData?: T[];
     /** The placement of each item Handle (6 dots 2x3). */
     ItemHandlePlacement?: SortableItemProps['handlePlacement'];
     /** If true, a scrollable version of the list will be rendered (max height 21rem/336px). */
@@ -16,6 +18,6 @@ export interface SortableProps {
     /** 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;
+    onSort?: (items: T[]) => void;
 }
-export declare const Sortable: ({ children, ItemHandlePlacement, scrollable, disabled, onSort, hideNumbers, sortableItemColor, }: SortableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Sortable: <T>({ children, childrenData, ItemHandlePlacement, scrollable, disabled, onSort, hideNumbers, sortableItemColor, }: SortableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sortable/Sortable.js

@@ -1,37 +1,42 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Children as e } from "react";
-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,
+import { Children as a } from "react";
+import { SortableItem as f } from "./components/SortableItem.js";
+import { S as I } from "../../SortableProvider-DisCfTTN.js";
+const P = ({
+  children: t,
+  childrenData: m,
+  ItemHandlePlacement: s = "left",
+  scrollable: l,
+  disabled: n,
   onSort: i,
-  hideNumbers: s,
+  hideNumbers: p,
   sortableItemColor: b = "grey-200"
-}) => /* @__PURE__ */ o(
-  f,
-  {
-    items: r,
-    scrollable: a,
-    hideNumbers: s,
-    onSort: i,
-    children: r.map((n, t) => /* @__PURE__ */ o(
-      p,
-      {
-        handlePlacement: m,
-        disabled: l || e.count(r) <= 1,
-        sortableItemColor: b,
-        index: t,
-        children: n
-      },
-      `sortable-item-${t}`
-    ))
-  },
-  `sortable-with-children-${e.count(r)}`
-);
+}) => {
+  const d = m ?? t, r = t.map((c, e) => /* @__PURE__ */ o(
+    f,
+    {
+      handlePlacement: s,
+      disabled: n || a.count(t) <= 1,
+      sortableItemColor: b,
+      index: e,
+      children: c
+    },
+    `sortable-item-${e}`
+  ));
+  return /* @__PURE__ */ o(
+    I,
+    {
+      renderItems: r,
+      dataItems: d,
+      scrollable: l,
+      hideNumbers: p,
+      onSort: i,
+      children: r
+    },
+    `sortable-with-children-${a.count(t)}`
+  );
+};
 export {
-  u as Sortable
+  P 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;\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;"}
+{"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<T = unknown> {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The data objects that are actually being sorted. */\n  childrenData?: T[];\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: T[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = <T,>({\n  children,\n  childrenData,\n  ItemHandlePlacement = 'left',\n  scrollable,\n  disabled,\n  onSort,\n  hideNumbers,\n  sortableItemColor = 'grey-200',\n}: SortableProps<T>) => {\n  const sortableData: T[] = childrenData ?? (children as unknown as T[]);\n\n  const wrappedItems = 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\n  return (\n    <SortableProvider\n      renderItems={wrappedItems}\n      dataItems={sortableData}\n      scrollable={scrollable}\n      hideNumbers={hideNumbers}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {wrappedItems}\n    </SortableProvider>\n  );\n};\n"],"names":["Sortable","children","childrenData","ItemHandlePlacement","scrollable","disabled","onSort","hideNumbers","sortableItemColor","sortableData","wrappedItems","child","index","jsx","SortableItem","Children","SortableProvider"],"mappings":";;;;AA+BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,MAAwB;AACtB,QAAMC,IAAoBP,KAAiBD,GAErCS,IAAeT,EAAS,IAAI,CAACU,GAAOC,MACxC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,iBAAiBX;AAAA,MACjB,UAAUE,KAAYU,EAAS,MAAMd,CAAQ,KAAK;AAAA,MAClD,mBAAAO;AAAA,MACA,OAAAI;AAAA,MAGC,UAAAD;AAAA,IAAA;AAAA,IAFI,iBAAiBC,CAAK;AAAA,EAAA,CAI9B;AAED,SACE,gBAAAC;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,aAAaN;AAAA,MACb,WAAWD;AAAA,MACX,YAAAL;AAAA,MACA,aAAAG;AAAA,MACA,QAAAD;AAAA,MAGC,UAAAI;AAAA,IAAA;AAAA,IAFI,0BAA0BK,EAAS,MAAMd,CAAQ,CAAC;AAAA,EAAA;AAK7D;"}

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

@@ -2,6 +2,6 @@ import { Meta } from '@storybook/react';
 import { SortableProps } from './Sortable';
 declare const _default: Meta<SortableProps>;
 export default _default;
-export declare const SortableExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
-export declare const withHandleRight: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
-export declare const WithComplexChildren: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
+export declare const SortableExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps<unknown>>;
+export declare const withHandleRight: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps<unknown>>;
+export declare const WithComplexChildren: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps<unknown>>;

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

@@ -1,15 +1,15 @@
-import { jsx as e, jsxs as m, Fragment as i } from "react/jsx-runtime";
+import { jsx as e, jsxs as i, Fragment as m } from "react/jsx-runtime";
 import { l as s } from "../../index-C2E9FY6V.js";
-import { Sortable as o } from "./Sortable.js";
+import { Sortable as l } from "./Sortable.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 p = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} 
-    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `, j = {
+    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `, F = {
   title: "Organisms/Sortable",
-  component: o,
+  component: l,
   argTypes: {
     children: {
       table: {
@@ -23,13 +23,13 @@ const p = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlac
     }
   },
   parameters: {
-    inspectComponent: o,
+    inspectComponent: l,
     codeString: p
   }
 }, r = {
   ItemHandlePlacement: "left",
   onSort: s()
-}, a = ["Item-1", "Item-2", "Item-3", "Item-4", "Item-5"], n = (l) => /* @__PURE__ */ e(o, { ...l, children: a }), h = n.bind({});
+}, a = ["Item-1", "Item-2", "Item-3", "Item-4", "Item-5"], n = (o) => /* @__PURE__ */ e(l, { ...o, children: a }), h = n.bind({});
 h.args = {
   ...r
 };
@@ -38,17 +38,24 @@ I.args = {
   ...r,
   ItemHandlePlacement: "right"
 };
-const f = (l) => /* @__PURE__ */ e(o, { ...l, children: a.map((t) => /* @__PURE__ */ m(i, { children: [
+const u = (o) => /* @__PURE__ */ e(l, { ...o, children: a.map((t) => /* @__PURE__ */ i(m, { 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
+] }, t)) }), f = u.bind({});
+f.args = {
+  ...r,
+  childrenData: [
+    { title: "item-1", value: 1 },
+    { title: "item-2", value: 2 },
+    { title: "item-3", value: 3 },
+    { title: "item-4", value: 4 },
+    { title: "item-5", value: 5 }
+  ]
 };
 export {
   h as SortableExample,
-  g as WithComplexChildren,
-  j as default,
+  f as WithComplexChildren,
+  F 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 = `<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;"}
+{"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  childrenData: [\n    { title: 'item-1', value: 1 },\n    { title: 'item-2', value: 2 },\n    { title: 'item-3', value: 3 },\n    { title: 'item-4', value: 4 },\n    { title: 'item-5', value: 5 },\n  ],\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;AAAA,EACH,cAAc;AAAA,IACZ,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,IAC1B,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,IAC1B,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,IAC1B,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,IAC1B,EAAE,OAAO,UAAU,OAAO,EAAA;AAAA,EAAE;AAEhC;"}

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

@@ -1,5 +1,6 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { SortableStateType } from './sortableReducer';
+import { SortableItem, SortableItemProps } from './components/SortableItem';
 type SortableContextType = {
     clearDraggingSource: () => void;
     clearDraggingTarget: () => void;
@@ -12,13 +13,15 @@ type SortableContextType = {
     setDraggingSource: (index: number) => void;
     setDraggingTarget: (index: number) => void;
 };
-interface Props {
-    children: SortableStateType['sortableItems'];
-    items: ReactElement[] | string[];
+type SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];
+interface Props<T = unknown> {
+    renderItems: SortableItems;
+    dataItems: T[];
     scrollable?: boolean;
     hideNumbers?: boolean;
-    onSort?: (items: (string | ReactElement)[]) => void;
+    onSort?: (items: T[]) => void;
+    children?: ReactNode;
 }
-export declare function SortableProvider({ children, items, scrollable, hideNumbers, onSort }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>): 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-C2T7b-pm.js";
+import { S as p, u as a } from "../../SortableProvider-DisCfTTN.js";
 import "./actions.js";
 export {
   p as SortableProvider,

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

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../../clsx-OuTLNxxd.js";
 import "../../../Sortable.module--kgnzOjW.js";
-import { a } from "../../../SortableProvider-C2T7b-pm.js";
+import { a } from "../../../SortableProvider-DisCfTTN.js";
 export {
   a as SortableContainer
 };

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

@@ -4,7 +4,7 @@ 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--kgnzOjW.js";
-import { u as J } from "../../../SortableProvider-C2T7b-pm.js";
+import { u as J } from "../../../SortableProvider-DisCfTTN.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/TextArea/TextArea.d.ts

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

package/dist/components/TextArea/TextArea.js

@@ -1,40 +1,45 @@
-import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import { jsxs as r, jsx as _ } from "react/jsx-runtime";
 import { useRef as x, useState as p } from "react";
 import { c as d } from "../../clsx-OuTLNxxd.js";
-import '../../assets/TextArea.css';const r = {
-  "text-area__wrapper": "_text-area__wrapper_1pu93_1",
-  "text-area__header": "_text-area__header_1pu93_7",
-  "text-area__label": "_text-area__label_1pu93_13",
-  "text-area__word-count": "_text-area__word-count_1pu93_20",
-  "text-area__word-count--alert": "_text-area__word-count--alert_1pu93_25",
-  "text-area": "_text-area_1pu93_1"
+import '../../assets/TextArea.css';const e = {
+  "text-area__wrapper": "_text-area__wrapper_iztus_1",
+  "text-area__header": "_text-area__header_iztus_7",
+  "text-area__label-wrapper": "_text-area__label-wrapper_iztus_13",
+  "text-area__label": "_text-area__label_iztus_13",
+  "text-area__sub-label": "_text-area__sub-label_iztus_26",
+  "text-area__word-count": "_text-area__word-count_iztus_31",
+  "text-area__word-count--alert": "_text-area__word-count--alert_iztus_36",
+  "text-area": "_text-area_iztus_1"
 };
-function w({ onChange: u, label: a, maxCharacters: t = 0, defaultValue: c = "" }) {
-  const e = x(null), [o, l] = p(0), s = () => {
-    e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, l(e.current.value.length), u(e.current.value.trim()));
+function b({ onChange: u, label: l, subLabel: s, maxCharacters: a = 0, defaultValue: c = "" }) {
+  const t = x(null), [n, o] = p(0), i = () => {
+    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, o(t.current.value.length), u(t.current.value.trim()));
   };
-  return /* @__PURE__ */ _("div", { className: r["text-area__wrapper"], children: [
-    (a || t > 0) && /* @__PURE__ */ _("div", { className: r["text-area__header"], children: [
-      a && /* @__PURE__ */ n("span", { className: r["text-area__label"], children: a }),
-      t > 0 && /* @__PURE__ */ _("div", { className: r["text-area__word-count"], children: [
-        /* @__PURE__ */ n("span", { className: d({ [r["text-area__word-count--alert"]]: o === t }), children: o }),
+  return /* @__PURE__ */ r("div", { className: e["text-area__wrapper"], children: [
+    (l || a > 0) && /* @__PURE__ */ r("div", { className: e["text-area__header"], children: [
+      /* @__PURE__ */ r("span", { className: e["text-area__label-wrapper"], children: [
+        l && /* @__PURE__ */ _("span", { className: e["text-area__label"], children: l }),
+        s && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: s })
+      ] }),
+      a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
+        /* @__PURE__ */ _("span", { className: d({ [e["text-area__word-count--alert"]]: n === a }), children: n }),
         " / ",
-        t
+        a
       ] })
     ] }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ _(
       "textarea",
       {
-        ref: e,
-        className: r["text-area"],
-        maxLength: t > 0 ? t : void 0,
-        onInput: s,
+        ref: t,
+        className: e["text-area"],
+        maxLength: a > 0 ? a : void 0,
+        onInput: i,
         defaultValue: c
       }
     )
   ] });
 }
 export {
-  w as TextArea
+  b as TextArea
 };
 //# sourceMappingURL=TextArea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          {label && <span className={styles['text-area__label']}>{label}</span>}\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;AAgBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AACjG,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDJ,EAASI,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAC3C;AAGF,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAV,KAASC,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACvC,UAAA;AAAA,MAAAV,uBAAU,QAAA,EAAK,WAAWU,EAAO,kBAAkB,GAAI,UAAAV,GAAM;AAAA,MAC7DC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAA,CAAe,GACjG,UAAAI,EAAA,CACH;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, subLabel, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && <span className={styles['text-area__label']}>{label}</span>}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","subLabel","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAkBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,UAAAC,GAAU,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AAC3G,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDL,EAASK,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAC3C;AAGF,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAX,KAASE,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAX,uBAAU,QAAA,EAAK,WAAWW,EAAO,kBAAkB,GAAI,UAAAX,GAAM;AAAA,QAC7DC,KAAY,gBAAAW,EAAC,QAAA,EAAK,WAAWD,EAAO,sBAAsB,GAAI,UAAAV,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAA,CAAe,GACjG,UAAAI,EAAA,CACH;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

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

@@ -3,3 +3,4 @@ import { TextAreaProps } from './TextArea';
 declare const _default: Meta<TextAreaProps>;
 export default _default;
 export declare const TextAreaExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
+export declare const TextAreaSubtitleExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;

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

@@ -1,31 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { l as r } from "../../index-C2E9FY6V.js";
+import { jsx as r } from "react/jsx-runtime";
+import { l as a } from "../../index-C2E9FY6V.js";
 import { TextArea as e } from "./TextArea.js";
-const l = `
-  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, p = {
+const o = `
+  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, x = {
   title: "Atoms/TextArea",
   component: e,
-  argTypes: {
-    label: {
-      control: "text"
-    },
-    maxCharacters: {
-      control: "number"
-    }
-  },
-  parameters: {
-    inspectComponent: e,
-    codeString: l
-  }
-}, o = (a) => /* @__PURE__ */ t(e, { ...a }), m = o.bind({});
+  argTypes: { label: { control: "text" }, maxCharacters: { control: "number" } },
+  parameters: { inspectComponent: e, codeString: o }
+}, t = (l) => /* @__PURE__ */ r(e, { ...l }), m = t.bind({});
 m.args = {
   label: "Sample label",
   maxCharacters: 140,
   defaultValue: "Sample default value",
-  onChange: r()
+  onChange: a()
+};
+const s = t.bind({});
+s.args = {
+  label: "Sample label",
+  subLabel: "Sample sub label",
+  maxCharacters: 140,
+  defaultValue: "Sample default value",
+  onChange: a()
 };
 export {
   m as TextAreaExample,
-  p as default
+  s as TextAreaSubtitleExample,
+  x as default
 };
 //# sourceMappingURL=TextArea.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    maxCharacters: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: TextArea,\n    codeString: codeString,\n  },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,mFAInBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,eAAe;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUC,EAAA;AACZ;"}
+{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: { label: { control: 'text' }, maxCharacters: { control: 'number' } },\n  parameters: { inspectComponent: TextArea, codeString: codeString },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n\nexport const TextAreaSubtitleExample = Template.bind({});\nTextAreaSubtitleExample.args = {\n  label: 'Sample label',\n  subLabel: 'Sample sub label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn","TextAreaSubtitleExample"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,mFAInBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,EAAE,OAAO,EAAE,SAAS,OAAA,GAAU,eAAe,EAAE,SAAS,WAAS;AAAA,EAC3E,YAAY,EAAE,kBAAkBA,GAAU,YAAAF,EAAA;AAC5C,GAEMG,IAAmC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUC,EAAA;AACZ;AAEO,MAAMC,IAA0BL,EAAS,KAAK,CAAA,CAAE;AACvDK,EAAwB,OAAO;AAAA,EAC7B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUD,EAAA;AACZ;"}

package/dist/components/index.js

@@ -35,7 +35,7 @@ import { Label as Bo } from "./Label/Label.js";
 import { MenuLink as So } from "./MenuLink/MenuLink.js";
 import { MetaDataList as Co } from "./MetaDataList/MetaDataList.js";
 import { ModalDialog as ko } from "./ModalDialog/ModalDialog.js";
-import { M as Mo } from "../TablePlugin-Dmy98Epb.js";
+import { M as Mo } from "../TablePlugin-oF-gInNx.js";
 import { MultiSelectBox as Lo } from "./MultiSelectBox/MultiSelectBox.js";
 import { Notification as Ro } from "./Notification/Notification.js";
 import { OverlayCloseButton as ho } from "./OverlayCloseButton/OverlayCloseButton.js";

package/dist/index.js

@@ -35,7 +35,7 @@ import { Label as Bo } from "./components/Label/Label.js";
 import { MenuLink as So } from "./components/MenuLink/MenuLink.js";
 import { MetaDataList as Co } from "./components/MetaDataList/MetaDataList.js";
 import { ModalDialog as ko } from "./components/ModalDialog/ModalDialog.js";
-import { M as Mo } from "./TablePlugin-Dmy98Epb.js";
+import { M as Mo } from "./TablePlugin-oF-gInNx.js";
 import { MultiSelectBox as Lo } from "./components/MultiSelectBox/MultiSelectBox.js";
 import { Notification as Ro } from "./components/Notification/Notification.js";
 import { OverlayCloseButton as ho } from "./components/OverlayCloseButton/OverlayCloseButton.js";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.31.0",
+  "version": "3.32.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",