@uva-glass/component-library 3.43.0 → 3.44.0

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,7 +1,7 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { l as d } from "../../index-BamlKH-k.js";
+import { l as d } from "../../index-DvUwfXNb.js";
 import { useState as p } from "react";
-import { M as e } from "../../TablePlugin-CAoOq8iA.js";
+import { M as e } from "../../TablePlugin-DaKDRL4G.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";
 const C = `
   // MultiSelectHeader can be added optionally

package/dist/components/MultiSelect/components/MultiSelectHeader.js

@@ -16,7 +16,7 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import { a as A } from "../../../TablePlugin-CAoOq8iA.js";
+import { a as A } from "../../../TablePlugin-DaKDRL4G.js";
 import "../../RteEditor/Providers/LanguageProvider.js";
 import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../RteEditor/hooks/components/Flyout.js";

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { M as l } from "../../TablePlugin-CAoOq8iA.js";
+import { M as l } from "../../TablePlugin-DaKDRL4G.js";
 export {
   l as MultiSelect
 };

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { l as n } from "../../index-BamlKH-k.js";
+import { l as n } from "../../index-DvUwfXNb.js";
 import { MultiSelectBox as e } from "./MultiSelectBox.js";
 const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", f = {
   title: "Organisms/MultiSelectBox",

package/dist/components/Notification/Notification.stories.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { l as a } from "../../index-BamlKH-k.js";
+import { l as a } from "../../index-DvUwfXNb.js";
 import { Notification as t } from "./Notification.js";
 const l = `<Notification title={title} subtitle={subtitle} action={action} 
   level={level} variant={variant} onClose={() => {}} />`, m = {

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { l as t } from "../../index-BamlKH-k.js";
+import { l as t } from "../../index-DvUwfXNb.js";
 import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
 import { Container as a } from "../../storyComponents/Container/Container.js";
 const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {

package/dist/components/PeriodSelector/PeriodSelector.js

@@ -18,7 +18,7 @@ import "../Input/Input.js";
 import "../InputField/InputField.js";
 import { Label as I } from "../Label/Label.js";
 import "react-router";
-import "../../TablePlugin-CAoOq8iA.js";
+import "../../TablePlugin-DaKDRL4G.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/PeriodSelector/PeriodSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as t } from "../../index-BamlKH-k.js";
+import { l as t } from "../../index-DvUwfXNb.js";
 import { PeriodSelector as e } from "./PeriodSelector.js";
 const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition={} required={} onChange={} />", m = {
   title: "Organisms/PeriodSelector",

package/dist/components/ProgrammeCard/ProgrammeCard.stories.js

@@ -18,7 +18,7 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
-import "../../TablePlugin-CAoOq8iA.js";
+import "../../TablePlugin-DaKDRL4G.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { l as a } from "../../index-BamlKH-k.js";
+import { l as a } from "../../index-DvUwfXNb.js";
 import { RadioGroup as o } from "./RadioGroup.js";
 const l = `
   <RadioGroup label={label} options={options} 

package/dist/components/RadioTabSelector/RadioTabSelector.js

@@ -18,7 +18,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-CAoOq8iA.js";
+import "../../TablePlugin-DaKDRL4G.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/RadioTabSelector/RadioTabSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l as t } from "../../index-BamlKH-k.js";
+import { l as t } from "../../index-DvUwfXNb.js";
 import { RadioTabSelector as e } from "./RadioTabSelector.js";
 const i = "<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />", b = {
   title: "Molecules/RadioTabSelector",

package/dist/components/RteEditor/EditorHeader/EditorHeader.js

@@ -15,7 +15,7 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import "../../../TablePlugin-CAoOq8iA.js";
+import "../../../TablePlugin-DaKDRL4G.js";
 import "../Providers/LanguageProvider.js";
 import "../Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../hooks/components/Flyout.js";

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

@@ -4,7 +4,7 @@ import { c as f } from "../../../../clsx-OuTLNxxd.js";
 import { w as _, a as p, U as h } from "../../../../Lexical.prod-nXWuyOKD.js";
 import { useState as l, useEffect as k } from "react";
 import { Icon as I } from "../../../Icon/Icon.js";
-import { s as a } from "../../../../RteEditor.module-dE9wQTC9.js";
+import { s as a } from "../../../../RteEditor.module-CovRFt0S.js";
 import { useTranslation as B } from "../../hooks/useTranslation.js";
 const C = {
   bold: "Bold",

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

@@ -18,8 +18,8 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../TablePlugin-CAoOq8iA.js";
-import { s as r } from "../../../../RteEditor.module-dE9wQTC9.js";
+import "../../../../TablePlugin-DaKDRL4G.js";
+import { s as r } from "../../../../RteEditor.module-CovRFt0S.js";
 import { useTranslation as x } from "../../hooks/useTranslation.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../hooks/components/Flyout.js";

package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { A as G } from "../../../../../TablePlugin-CAoOq8iA.js";
+import { A as G } from "../../../../../TablePlugin-DaKDRL4G.js";
 import "../../../../../helpers-mE437H2Y.js";
 import "../../../../Accordion/Accordion.js";
 import "../../../../Icon/Icon.js";

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

@@ -4,7 +4,7 @@ import { c as Y } from "../../../../clsx-OuTLNxxd.js";
 import { p as O, k as q, v as G } from "../../../../LexicalLink.prod-Brzpgs_K.js";
 import { useRef as a, useState as J, useEffect as m } from "react";
 import { a2 as X, w as p, u as Z, as as $, a as w, I as tt, k as et, Q as ot } from "../../../../Lexical.prod-nXWuyOKD.js";
-import { A as rt } from "../../../../TablePlugin-CAoOq8iA.js";
+import { A as rt } from "../../../../TablePlugin-DaKDRL4G.js";
 import { e as nt } from "../../../../helpers-mE437H2Y.js";
 import { LinkContextMenu as it } from "./LinkContextMenu/LinkContextMenu.js";
 import { useFlyout as st } from "../../hooks/useFlyout.js";
@@ -24,7 +24,7 @@ import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
 import { setScrollableContainers as K, removeScrollableContainers as lt } from "../../helpers.js";
-import { s as h } from "../../../../RteEditor.module-dE9wQTC9.js";
+import { s as h } from "../../../../RteEditor.module-CovRFt0S.js";
 import { useTranslation as at } from "../../hooks/useTranslation.js";
 import "react-dom";
 import "../../../../index-yEhaxKq-.js";

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

@@ -6,7 +6,7 @@ import { useState as p, useEffect as K } from "react";
 import { c as x } from "../../../../clsx-OuTLNxxd.js";
 import { as as O, I as U, a0 as B, w as b, a as h, K as E, F } from "../../../../Lexical.prod-nXWuyOKD.js";
 import { Icon as T } from "../../../Icon/Icon.js";
-import { s as l } from "../../../../RteEditor.module-dE9wQTC9.js";
+import { s as l } from "../../../../RteEditor.module-CovRFt0S.js";
 import { useTranslation as $ } from "../../hooks/useTranslation.js";
 const j = {
   bullet: "BulletList",

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

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { b as D } from "../../../../TablePlugin-CAoOq8iA.js";
+import { b as D } from "../../../../TablePlugin-DaKDRL4G.js";
 import "../../../Accordion/Accordion.js";
 import "../../../Buttons/Button.js";
 import "../../../Buttons/LinkButton.js";

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

@@ -5,7 +5,7 @@ import "../../../../LexicalTable.prod-DJktN6jF.js";
 import "../../../../Lexical.prod-nXWuyOKD.js";
 import "../../../../LexicalUtils.prod-Ckfw0Hjt.js";
 import "react";
-import { T as J } from "../../../../TablePlugin-CAoOq8iA.js";
+import { T as J } from "../../../../TablePlugin-DaKDRL4G.js";
 import "./helpers.js";
 import "../../nodes/TableWrapperNode/TableWrapperNode.js";
 import "../../hooks/useFlyout.js";
@@ -24,7 +24,7 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../RteEditor.module-dE9wQTC9.js";
+import "../../../../RteEditor.module-CovRFt0S.js";
 import "../../hooks/useTranslation.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "react-dom";

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

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

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

@@ -7,11 +7,11 @@ import { BlockFormatPlugin as T } from "../BlockFormatPlugin/BlockFormatPlugin.j
 import { ListPlugin as N } 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-CAoOq8iA.js";
+import { T as S } from "../../../../TablePlugin-DaKDRL4G.js";
 import { TableCellContextMenu as z } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 import "react-dom";
 import "../../../../index-yEhaxKq-.js";
-import { s as A } from "../../../../RteEditor.module-dE9wQTC9.js";
+import { s as A } from "../../../../RteEditor.module-CovRFt0S.js";
 import { setScrollableContainers as w, removeScrollableContainers as K } from "../../helpers.js";
 const V = ({ editorScrollPosition: m }) => {
   const [t] = y(), [r, i] = L(null), d = E(null), u = k(() => {

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

@@ -3,7 +3,7 @@ import { BlockFormatPlugin as t } from "./BlockFormatPlugin/BlockFormatPlugin.js
 import { ListPlugin as n } from "./ListPlugin/ListPlugin.js";
 import { LinkPlugin as g, getLinkNodeTag as m } from "./LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as f } from "./HistoryPlugin/HistoryPlugin.js";
-import { T as u } from "../../../TablePlugin-CAoOq8iA.js";
+import { T as u } from "../../../TablePlugin-DaKDRL4G.js";
 import { TableCellContextMenu as T } from "./TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 import { T as b } from "../../../TableCellResizerPlugin-DFzNK-ve.js";
 import { PasteHandlerPlugin as C } from "./PasteHandlerPlugin/PasteHandlerPlugin.js";

package/dist/components/RteEditor/RteEditor.js

@@ -14,10 +14,10 @@ import { s as er, d as tr, b as He, e as rr, w as nr, S as or, y as Je, O as ar
 import { a as sr, w as ir, M as lr } from "../../helpers-mE437H2Y.js";
 import { c as ur } from "../../clsx-OuTLNxxd.js";
 import { exportMap as cr, isStartingWithHtmlTag as dr, mergeBoldStrongTags as fr, cleanUpTable as mr } from "./helpers.js";
-import { s as R } from "../../RteEditor.module-dE9wQTC9.js";
+import { s as R } from "../../RteEditor.module-CovRFt0S.js";
 import { ToolBarPlugin as pr } from "./Plugins/ToolbarPlugin/ToolbarPlugin.js";
 import { useTranslation as gr } from "./hooks/useTranslation.js";
-import "../../TablePlugin-CAoOq8iA.js";
+import "../../TablePlugin-DaKDRL4G.js";
 import "./Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "./hooks/components/Flyout.js";
 import "../Accordion/Accordion.js";

package/dist/components/RteEditor/RteEditor.stories.js

@@ -1,7 +1,7 @@
-import { jsxs as o, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { useState as d } from "react";
-import { RteEditor as r } from "./RteEditor.js";
-import { MOCK_RTE_CONTENT as m } from "./mockRteContent.js";
+import { jsxs as n, Fragment as a, jsx as e } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { RteEditor as i } from "./RteEditor.js";
+import { MOCK_RTE_CONTENT as p } from "./mockRteContent.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
 const g = `<RteEditor
           initialValue=""
@@ -13,15 +13,15 @@ const g = `<RteEditor
           onChange={handleChange}
         />`, v = {
   title: "Organisms/RteEditor",
-  component: r,
+  component: i,
   parameters: {
-    inspectComponent: r,
+    inspectComponent: i,
     codeString: g
   }
-}, p = (t) => {
-  const [n, i] = d(t.initialValue || "");
-  return /* @__PURE__ */ o(s, { children: [
-    /* @__PURE__ */ e(u, { size: "large-full-height", children: /* @__PURE__ */ e(r, { ...t, onChange: (l) => i(l) }) }),
+}, m = (l) => {
+  const [r, t] = s(l.initialValue || "");
+  return /* @__PURE__ */ n(a, { children: [
+    /* @__PURE__ */ e(u, { size: "large-full-height", children: /* @__PURE__ */ e(i, { ...l, onChange: (d) => t(d) }) }),
     /* @__PURE__ */ e("br", {}),
     /* @__PURE__ */ e("br", {}),
     /* @__PURE__ */ e("p", { style: { margin: "0", marginTop: "2rem" }, children: "HTML Output:" }),
@@ -35,11 +35,11 @@ const g = `<RteEditor
           borderRadius: "0.25rem",
           color: "#666"
         },
-        children: n
+        children: r
       }
     )
   ] });
-}, c = p.bind({});
+}, c = m.bind({});
 c.args = {
   placeholder: "Voeg hier tekst in...",
   currentLanguage: "NL",
@@ -47,11 +47,50 @@ c.args = {
   info: "Studiemateriaal is essentieel voor succesvol leren. Het omvat boeken, artikelen, video's en oefeningen die studenten helpen hun kennis te vergroten, vaardigheden te ontwikkelen en hun studieprestaties te verbeteren.",
   required: !0,
   maxWords: 100,
-  initialValue: m
+  initialValue: p
 };
 const C = () => {
-  const [t, n] = d("Editor 1 <ul><li>aap</li> <li>noot</li> <li>mies</li></ul>"), [i, l] = d("<p>Editor 2</p>");
-  return /* @__PURE__ */ o(
+  const [l, r] = s(
+    "Editor 1 <ul><li>aap</li><li>noot</li><li>mies</li></ul><ol><li>een</li><li>twee</li><li>drie</li></ol><p></p><ul><li>nesting</li><li><ul><li>nested 1</li><li>nested 2</li><li><ul><li>deep nested 1</li><li>deep nested 2</li><li><ul><li>deeper nested 1</li><li>deeper nested 2</li><li><ul><li>deepest nested 1</li><li>deepest nested 2</li></ul></li></ul></li></ul></li></ul></li><li>nesting end</li></ul><p></p><ol><li>nesting</li><li><ol><li>nested 1</li><li>nested 2</li><li><ol><li>deep nested 1</li><li>deep nested 2</li><li><ol><li>deeper nested 1</li><li>deeper nested 2</li><li><ol><li>deepest nested 1</li><li>deepest nested 2</li></ol></li></ol></li></ol></li></ol></li><li>nesting end</li></ol>"
+  ), [t, d] = s(
+    `<p>Editor 2</p>
+    <ul>
+      <li>nesting</li>
+      <li>
+        <ol>
+          <li>nested 1</li>
+          <li>nested 2</li>
+        </ol>
+      </li>
+      <li>nesting 2</li>
+      <li>
+        <ul>
+          <li>deep nested 1</li>
+            <li>deep nested 2</li>
+            <li>
+              <ol>
+                <li>deeper nested 1</li>
+                <li>
+                <ul>
+                <li>deepest nested 1</li>
+                <li>deepest nested 2</li>
+                </ul>
+                </li>
+                <li>deeper nested 2</li>
+                <li>
+                  <ol>
+                    <li>deepest nested 1</li>
+                    <li>deepest nested 2</li>
+                  </ol>
+                </li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+      <li>nesting end</li>
+    </ul>`
+  );
+  return /* @__PURE__ */ n(
     "div",
     {
       style: {
@@ -63,16 +102,16 @@ const C = () => {
         backgroundColor: "#FFF"
       },
       children: [
-        /* @__PURE__ */ o("div", { style: { flex: "1" }, children: [
+        /* @__PURE__ */ n("div", { style: { flex: "1" }, children: [
           /* @__PURE__ */ e(
-            r,
+            i,
             {
-              initialValue: t,
+              initialValue: l,
               label: "Editor 1",
               info: "Uitleg over editor 1",
               placeholder: "Voeg hier tekst in...",
               notValidatedText: "",
-              onChange: (a) => n(a)
+              onChange: (o) => r(o)
             }
           ),
           /* @__PURE__ */ e("br", {}),
@@ -87,20 +126,20 @@ const C = () => {
                 borderRadius: "0.25rem",
                 color: "#666"
               },
-              children: t
+              children: l
             }
           )
         ] }),
-        /* @__PURE__ */ o("div", { style: { flex: "1" }, children: [
+        /* @__PURE__ */ n("div", { style: { flex: "1" }, children: [
           /* @__PURE__ */ e(
-            r,
+            i,
             {
-              initialValue: i,
+              initialValue: t,
               label: "Editor 2",
               info: "Uitleg over editor 2 wat langer om te kijken of dat ook goed gaat, want je weet maar nooit.",
               placeholder: "Voeg hier tekst in...",
               notValidatedText: "",
-              onChange: (a) => l(a)
+              onChange: (o) => d(o)
             }
           ),
           /* @__PURE__ */ e("br", {}),
@@ -115,7 +154,7 @@ const C = () => {
                 borderRadius: "0.25rem",
                 color: "#666"
               },
-              children: i
+              children: t
             }
           )
         ] })

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

@@ -1 +1 @@
-{"version":3,"file":"RteEditor.stories.js","sources":["../../../src/components/RteEditor/RteEditor.stories.tsx"],"sourcesContent":["import { useState, type PropsWithChildren } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RteEditorProps } from './RteEditor';\n\nimport { RteEditor } from './RteEditor';\nimport { MOCK_RTE_CONTENT } from './mockRteContent';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `<RteEditor\n          initialValue=\"\"\n          currentLanguage=\"NL\"\n          label=\"\"\n          info=\"\"\n          placeholder=\"\"\n          notValidatedText=\"\"\n          onChange={handleChange}\n        />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/RteEditor',\n  component: RteEditor,\n  parameters: {\n    inspectComponent: RteEditor,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<RteEditorProps>>;\n\nconst Template: StoryFn<PropsWithChildren<RteEditorProps>> = (args) => {\n  const [result, setResult] = useState<string>(args.initialValue || '');\n\n  return (\n    <>\n      <Container size=\"large-full-height\">\n        <RteEditor {...args} onChange={(evt) => setResult(evt)} />\n      </Container>\n      <br />\n      <br />\n\n      <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n      <div\n        style={{\n          marginTop: '0rem',\n          padding: '1rem',\n          backgroundColor: '#F9F9F9',\n          borderRadius: '0.25rem',\n          color: '#666',\n        }}\n      >\n        {result}\n      </div>\n    </>\n  );\n};\n\nexport const RteEditorExample = Template.bind({});\n\nRteEditorExample.args = {\n  placeholder: 'Voeg hier tekst in...',\n  currentLanguage: 'NL',\n  label: 'Studiemateriaal',\n  info: \"Studiemateriaal is essentieel voor succesvol leren. Het omvat boeken, artikelen, video's en oefeningen die studenten helpen hun kennis te vergroten, vaardigheden te ontwikkelen en hun studieprestaties te verbeteren.\",\n  required: true,\n  maxWords: 100,\n  initialValue: MOCK_RTE_CONTENT,\n};\n\nexport const MultipleRteEditors = () => {\n  const [result01, setResult01] = useState<string>('Editor 1 <ul><li>aap</li> <li>noot</li> <li>mies</li></ul>');\n  const [result02, setResult02] = useState<string>('<p>Editor 2</p>');\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'row',\n        gap: '1rem',\n        width: '100%',\n        padding: '1rem',\n        backgroundColor: '#FFF',\n      }}\n    >\n      <div style={{ flex: '1' }}>\n        <RteEditor\n          initialValue={result01}\n          label=\"Editor 1\"\n          info=\"Uitleg over editor 1\"\n          placeholder=\"Voeg hier tekst in...\"\n          notValidatedText=\"\"\n          onChange={(evt) => setResult01(evt)}\n        />\n        <br />\n        <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n        <div\n          style={{\n            marginTop: '0rem',\n            padding: '1rem',\n            backgroundColor: '#F9F9F9',\n            borderRadius: '0.25rem',\n            color: '#666',\n          }}\n        >\n          {result01}\n        </div>\n      </div>\n      <div style={{ flex: '1' }}>\n        <RteEditor\n          initialValue={result02}\n          label=\"Editor 2\"\n          info=\"Uitleg over editor 2 wat langer om te kijken of dat ook goed gaat, want je weet maar nooit.\"\n          placeholder=\"Voeg hier tekst in...\"\n          notValidatedText=\"\"\n          onChange={(evt) => setResult02(evt)}\n        />\n        <br />\n        <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n        <div\n          style={{\n            marginTop: '0rem',\n            padding: '1rem',\n            backgroundColor: '#F9F9F9',\n            borderRadius: '0.25rem',\n            color: '#666',\n          }}\n        >\n          {result02}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["codeString","RteEditor_stories","RteEditor","Template","args","result","setResult","useState","jsxs","Fragment","jsx","Container","evt","RteEditorExample","MOCK_RTE_CONTENT","MultipleRteEditors","result01","setResult01","result02","setResult02"],"mappings":"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"}
+{"version":3,"file":"RteEditor.stories.js","sources":["../../../src/components/RteEditor/RteEditor.stories.tsx"],"sourcesContent":["import { useState, type PropsWithChildren } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RteEditorProps } from './RteEditor';\n\nimport { RteEditor } from './RteEditor';\nimport { MOCK_RTE_CONTENT } from './mockRteContent';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `<RteEditor\n          initialValue=\"\"\n          currentLanguage=\"NL\"\n          label=\"\"\n          info=\"\"\n          placeholder=\"\"\n          notValidatedText=\"\"\n          onChange={handleChange}\n        />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/RteEditor',\n  component: RteEditor,\n  parameters: {\n    inspectComponent: RteEditor,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<RteEditorProps>>;\n\nconst Template: StoryFn<PropsWithChildren<RteEditorProps>> = (args) => {\n  const [result, setResult] = useState<string>(args.initialValue || '');\n\n  return (\n    <>\n      <Container size=\"large-full-height\">\n        <RteEditor {...args} onChange={(evt) => setResult(evt)} />\n      </Container>\n      <br />\n      <br />\n\n      <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n      <div\n        style={{\n          marginTop: '0rem',\n          padding: '1rem',\n          backgroundColor: '#F9F9F9',\n          borderRadius: '0.25rem',\n          color: '#666',\n        }}\n      >\n        {result}\n      </div>\n    </>\n  );\n};\n\nexport const RteEditorExample = Template.bind({});\n\nRteEditorExample.args = {\n  placeholder: 'Voeg hier tekst in...',\n  currentLanguage: 'NL',\n  label: 'Studiemateriaal',\n  info: \"Studiemateriaal is essentieel voor succesvol leren. Het omvat boeken, artikelen, video's en oefeningen die studenten helpen hun kennis te vergroten, vaardigheden te ontwikkelen en hun studieprestaties te verbeteren.\",\n  required: true,\n  maxWords: 100,\n  initialValue: MOCK_RTE_CONTENT,\n};\n\nexport const MultipleRteEditors = () => {\n  const [result01, setResult01] = useState<string>(\n    'Editor 1 <ul><li>aap</li><li>noot</li><li>mies</li></ul><ol><li>een</li><li>twee</li><li>drie</li></ol><p></p><ul><li>nesting</li><li><ul><li>nested 1</li><li>nested 2</li><li><ul><li>deep nested 1</li><li>deep nested 2</li><li><ul><li>deeper nested 1</li><li>deeper nested 2</li><li><ul><li>deepest nested 1</li><li>deepest nested 2</li></ul></li></ul></li></ul></li></ul></li><li>nesting end</li></ul><p></p><ol><li>nesting</li><li><ol><li>nested 1</li><li>nested 2</li><li><ol><li>deep nested 1</li><li>deep nested 2</li><li><ol><li>deeper nested 1</li><li>deeper nested 2</li><li><ol><li>deepest nested 1</li><li>deepest nested 2</li></ol></li></ol></li></ol></li></ol></li><li>nesting end</li></ol>'\n  );\n  const [result02, setResult02] = useState<string>(\n    `<p>Editor 2</p>\n    <ul>\n      <li>nesting</li>\n      <li>\n        <ol>\n          <li>nested 1</li>\n          <li>nested 2</li>\n        </ol>\n      </li>\n      <li>nesting 2</li>\n      <li>\n        <ul>\n          <li>deep nested 1</li>\n            <li>deep nested 2</li>\n            <li>\n              <ol>\n                <li>deeper nested 1</li>\n                <li>\n                <ul>\n                <li>deepest nested 1</li>\n                <li>deepest nested 2</li>\n                </ul>\n                </li>\n                <li>deeper nested 2</li>\n                <li>\n                  <ol>\n                    <li>deepest nested 1</li>\n                    <li>deepest nested 2</li>\n                  </ol>\n                </li>\n              </ol>\n            </li>\n          </ul>\n        </li>\n      <li>nesting end</li>\n    </ul>`\n  );\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'row',\n        gap: '1rem',\n        width: '100%',\n        padding: '1rem',\n        backgroundColor: '#FFF',\n      }}\n    >\n      <div style={{ flex: '1' }}>\n        <RteEditor\n          initialValue={result01}\n          label=\"Editor 1\"\n          info=\"Uitleg over editor 1\"\n          placeholder=\"Voeg hier tekst in...\"\n          notValidatedText=\"\"\n          onChange={(evt) => setResult01(evt)}\n        />\n        <br />\n        <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n        <div\n          style={{\n            marginTop: '0rem',\n            padding: '1rem',\n            backgroundColor: '#F9F9F9',\n            borderRadius: '0.25rem',\n            color: '#666',\n          }}\n        >\n          {result01}\n        </div>\n      </div>\n      <div style={{ flex: '1' }}>\n        <RteEditor\n          initialValue={result02}\n          label=\"Editor 2\"\n          info=\"Uitleg over editor 2 wat langer om te kijken of dat ook goed gaat, want je weet maar nooit.\"\n          placeholder=\"Voeg hier tekst in...\"\n          notValidatedText=\"\"\n          onChange={(evt) => setResult02(evt)}\n        />\n        <br />\n        <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n        <div\n          style={{\n            marginTop: '0rem',\n            padding: '1rem',\n            backgroundColor: '#F9F9F9',\n            borderRadius: '0.25rem',\n            color: '#666',\n          }}\n        >\n          {result02}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["codeString","RteEditor_stories","RteEditor","Template","args","result","setResult","useState","jsxs","Fragment","jsx","Container","evt","RteEditorExample","MOCK_RTE_CONTENT","MultipleRteEditors","result01","setResult01","result02","setResult02"],"mappings":"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"}

package/dist/components/RteEditor/UvaTheme/UvaTheme.d.ts

@@ -9,11 +9,13 @@ export declare const UvaTheme: {
     list: {
         listitem: string;
         nested: {
+            list: string;
             listitem: string;
         };
         olDepth: string[];
         ulDepth: string[];
         ul: string;
+        ulDepthNested: string[];
     };
     link: string;
     tableWrapper: string;

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

@@ -1,4 +1,4 @@
-import { s as t } from "../../../RteEditor.module-dE9wQTC9.js";
+import { s as t } from "../../../RteEditor.module-CovRFt0S.js";
 const i = {
   ltr: t["guide-text-ltr"],
   rtl: t["guide-text-rtl"],
@@ -10,6 +10,7 @@ const i = {
   list: {
     listitem: t["guide-text__list--listitem"],
     nested: {
+      list: t["guide-text__list--nested"],
       listitem: t["guide-text__list--nested-listitem"]
     },
     olDepth: [
@@ -26,7 +27,8 @@ const i = {
       t["guide-text__list--ul4"],
       t["guide-text__list--ul5"]
     ],
-    ul: t["guide-text__list--ul"]
+    ul: t["guide-text__list--ul"],
+    ulDepthNested: [t["guide-text__list--ol"]]
   },
   link: t["guide-text__link"],
   tableWrapper: t["guide-text__table-wrapper"],

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

@@ -1 +1 @@
-{"version":3,"file":"UvaTheme.js","sources":["../../../../src/components/RteEditor/UvaTheme/UvaTheme.tsx"],"sourcesContent":["import styles from 'components/RteEditor/RteEditor.module.css';\n\nexport const UvaTheme = {\n  ltr: styles['guide-text-ltr'],\n  rtl: styles['guide-text-rtl'],\n  paragraph: styles['guide-text-paragraph'],\n  text: {\n    bold: styles['guide-text__text--bold'],\n    italic: styles['guide-text__text--italic'],\n  },\n  list: {\n    listitem: styles['guide-text__list--listitem'],\n    nested: {\n      listitem: styles['guide-text__list--nested-listitem'],\n    },\n    olDepth: [\n      styles['guide-text__list--ol'],\n      styles['guide-text__list--ol2'],\n      styles['guide-text__list--ol3'],\n      styles['guide-text__list--ol4'],\n      styles['guide-text__list--ol5'],\n    ],\n    ulDepth: [\n      styles['guide-text__list--ul'],\n      styles['guide-text__list--ul2'],\n      styles['guide-text__list--ul3'],\n      styles['guide-text__list--ul4'],\n      styles['guide-text__list--ul5'],\n    ],\n    ul: styles['guide-text__list--ul'],\n  },\n  link: styles['guide-text__link'],\n  tableWrapper: styles['guide-text__table-wrapper'],\n  table: styles['guide-text__table'],\n};\n"],"names":["UvaTheme","styles"],"mappings":";AAEO,MAAMA,IAAW;AAAA,EACtB,KAAKC,EAAO,gBAAgB;AAAA,EAC5B,KAAKA,EAAO,gBAAgB;AAAA,EAC5B,WAAWA,EAAO,sBAAsB;AAAA,EACxC,MAAM;AAAA,IACJ,MAAMA,EAAO,wBAAwB;AAAA,IACrC,QAAQA,EAAO,0BAA0B;AAAA,EAAA;AAAA,EAE3C,MAAM;AAAA,IACJ,UAAUA,EAAO,4BAA4B;AAAA,IAC7C,QAAQ;AAAA,MACN,UAAUA,EAAO,mCAAmC;AAAA,IAAA;AAAA,IAEtD,SAAS;AAAA,MACPA,EAAO,sBAAsB;AAAA,MAC7BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,IAAA;AAAA,IAEhC,SAAS;AAAA,MACPA,EAAO,sBAAsB;AAAA,MAC7BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,IAAA;AAAA,IAEhC,IAAIA,EAAO,sBAAsB;AAAA,EAAA;AAAA,EAEnC,MAAMA,EAAO,kBAAkB;AAAA,EAC/B,cAAcA,EAAO,2BAA2B;AAAA,EAChD,OAAOA,EAAO,mBAAmB;AACnC;"}
+{"version":3,"file":"UvaTheme.js","sources":["../../../../src/components/RteEditor/UvaTheme/UvaTheme.tsx"],"sourcesContent":["import styles from 'components/RteEditor/RteEditor.module.css';\n\nexport const UvaTheme = {\n  ltr: styles['guide-text-ltr'],\n  rtl: styles['guide-text-rtl'],\n  paragraph: styles['guide-text-paragraph'],\n  text: {\n    bold: styles['guide-text__text--bold'],\n    italic: styles['guide-text__text--italic'],\n  },\n  list: {\n    listitem: styles['guide-text__list--listitem'],\n    nested: {\n      list: styles['guide-text__list--nested'],\n      listitem: styles['guide-text__list--nested-listitem'],\n    },\n    olDepth: [\n      styles['guide-text__list--ol'],\n      styles['guide-text__list--ol2'],\n      styles['guide-text__list--ol3'],\n      styles['guide-text__list--ol4'],\n      styles['guide-text__list--ol5'],\n    ],\n    ulDepth: [\n      styles['guide-text__list--ul'],\n      styles['guide-text__list--ul2'],\n      styles['guide-text__list--ul3'],\n      styles['guide-text__list--ul4'],\n      styles['guide-text__list--ul5'],\n    ],\n    ul: styles['guide-text__list--ul'],\n    ulDepthNested: [styles['guide-text__list--ol']],\n  },\n  link: styles['guide-text__link'],\n  tableWrapper: styles['guide-text__table-wrapper'],\n  table: styles['guide-text__table'],\n};\n"],"names":["UvaTheme","styles"],"mappings":";AAEO,MAAMA,IAAW;AAAA,EACtB,KAAKC,EAAO,gBAAgB;AAAA,EAC5B,KAAKA,EAAO,gBAAgB;AAAA,EAC5B,WAAWA,EAAO,sBAAsB;AAAA,EACxC,MAAM;AAAA,IACJ,MAAMA,EAAO,wBAAwB;AAAA,IACrC,QAAQA,EAAO,0BAA0B;AAAA,EAAA;AAAA,EAE3C,MAAM;AAAA,IACJ,UAAUA,EAAO,4BAA4B;AAAA,IAC7C,QAAQ;AAAA,MACN,MAAMA,EAAO,0BAA0B;AAAA,MACvC,UAAUA,EAAO,mCAAmC;AAAA,IAAA;AAAA,IAEtD,SAAS;AAAA,MACPA,EAAO,sBAAsB;AAAA,MAC7BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,IAAA;AAAA,IAEhC,SAAS;AAAA,MACPA,EAAO,sBAAsB;AAAA,MAC7BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,MAC9BA,EAAO,uBAAuB;AAAA,IAAA;AAAA,IAEhC,IAAIA,EAAO,sBAAsB;AAAA,IACjC,eAAe,CAACA,EAAO,sBAAsB,CAAC;AAAA,EAAA;AAAA,EAEhD,MAAMA,EAAO,kBAAkB;AAAA,EAC/B,cAAcA,EAAO,2BAA2B;AAAA,EAChD,OAAOA,EAAO,mBAAmB;AACnC;"}

package/dist/components/SelectListbox/SelectListBox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as M } from "react/jsx-runtime";
-import { l as i } from "../../index-BamlKH-k.js";
+import { l as i } from "../../index-DvUwfXNb.js";
 import { SelectListbox as r } from "./SelectListbox.js";
 import * as e from "react";
 const E = ({
@@ -92,7 +92,7 @@ const E = ({
       default: !1
     },
     variant: {
-      options: ["default", "noborder", "pill", "pillLeft", "pillRight", "darkBorder"],
+      options: ["default", "noborder", "pill", "pillLeft", "pillRight", "darkBorder", "roundedLeft", "roundedRight"],
       control: { type: "select" }
     },
     optionPositionRight: {
@@ -149,7 +149,7 @@ const E = ({
   mobileBreakpoint: "28rem",
   size: "default",
   onChange: i()
-}, L = (t) => /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: d.map(({ label: l, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: h, children: l }, `${c}`)) }) }), f = L.bind({});
+}, L = (t) => /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: d.map(({ label: l, value: c }, n) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: n, children: l }, `${c}`)) }) }), f = L.bind({});
 f.args = {
   ...m
 };
@@ -171,7 +171,7 @@ const S = ({ label: t, value: l }) => /* @__PURE__ */ M("div", { style: { displa
     ES: /* @__PURE__ */ a(u, { style: { width: "24px", height: "24px", marginRight: "10px" } })
   }[l],
   t
-] }), y = (t) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: t.options.map(({ label: l, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: h, children: /* @__PURE__ */ a(S, { label: l, value: c }) }, `${c}`)) }) }), k = y.bind({});
+] }), y = (t) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: t.options.map(({ label: l, value: c }, n) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: n, children: /* @__PURE__ */ a(S, { label: l, value: c }) }, `${c}`)) }) }), k = y.bind({});
 k.args = {
   ...m
 };
@@ -234,8 +234,8 @@ const B = [
   size: "default",
   onChange: i()
 }, N = (t) => {
-  const { options: l, ...c } = t, n = (t.SwitchLanguage ?? "EN") === "NL" ? B : j;
-  return /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...c, options: n, children: n.map(({ label: o, value: s }, p) => /* @__PURE__ */ a(r.SelectOption, { option: { label: o, value: s }, index: p, children: o }, `${s}`)) }) });
+  const { options: l, ...c } = t, h = (t.SwitchLanguage ?? "EN") === "NL" ? B : j;
+  return /* @__PURE__ */ a("div", { style: { width: "50rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...c, options: h, children: h.map(({ label: o, value: s }, p) => /* @__PURE__ */ a(r.SelectOption, { option: { label: o, value: s }, index: p, children: o }, `${s}`)) }) });
 }, D = N.bind({});
 D.args = {
   ...V