@uva-glass/component-library 3.24.0 → 3.25.0

package/dist/assets/ExpandableInfoPanel.css

@@ -0,0 +1 @@
+._expandable-info-panel_wrapper_946pe_1{display:flex;flex-direction:column;width:100%}._expandable-info-panel_header_946pe_7{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding-bottom:.5rem;width:100%}._expandable-info-panel_trigger_946pe_16{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:.25rem;display:flex;font-size:var(--font-size-default);gap:.5rem;height:2.75rem;margin-bottom:0;outline:none;padding:.5rem;position:relative;width:fit-content}._expandable-info-panel_trigger_946pe_16:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem;text-decoration:underline}._expandable-info-panel_trigger_946pe_16:hover{background-color:var(--new-color-grey-200);text-decoration:underline}._expandable-info-panel_trigger--active_946pe_44{background-color:var(--new-color-navy-200);border-radius:.25rem .25rem 0 0}._expandable-info-panel_trigger--active_946pe_44:after{background-color:var(--new-color-navy-200);content:"";display:block;height:.5rem;left:0;position:absolute;right:0;top:100%;z-index:-1}._expandable-info-panel_trigger--active_946pe_44:hover,._expandable-info-panel_trigger--active_946pe_44:hover:after{background-color:var(--new-color-navy-300)}._expandable-info-panel_content-wrapper_946pe_66{align-items:start;background-color:var(--new-color-navy-200);display:grid;gap:1rem;grid-template-columns:1.5rem 1fr;padding:2rem 1.5rem}

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface ExpandableInfoPanelProps {
+    /** Label for the trigger button that toggles the expandable panel. */
+    triggerLabel: string;
+    /** Main header displayed inline left of the trigger button. */
+    mainHeader?: ReactNode | string;
+    /** Aria-label for the button when the panel is collapsed. */
+    collapseLabel?: string;
+    /** Aria-label for the button when the panel is expanded. */
+    expandLabel?: string;
+    /** Content to be displayed inside the expandable panel. */
+    content: ReactNode | string;
+}
+export declare const ExpandableInfoPanel: ({ triggerLabel, mainHeader, collapseLabel, expandLabel, content, }: ExpandableInfoPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.js

@@ -0,0 +1,50 @@
+import { jsxs as n, jsx as p } from "react/jsx-runtime";
+import { useState as s, useId as f } from "react";
+import { c as x } from "../../clsx-OuTLNxxd.js";
+import { Icon as r } from "../Icon/Icon.js";
+import '../../assets/ExpandableInfoPanel.css';const a = {
+  "expandable-info-panel_wrapper": "_expandable-info-panel_wrapper_946pe_1",
+  "expandable-info-panel_header": "_expandable-info-panel_header_946pe_7",
+  "expandable-info-panel_trigger": "_expandable-info-panel_trigger_946pe_16",
+  "expandable-info-panel_trigger--active": "_expandable-info-panel_trigger--active_946pe_44",
+  "expandable-info-panel_content-wrapper": "_expandable-info-panel_content-wrapper_946pe_66"
+}, h = ({
+  triggerLabel: l,
+  mainHeader: o,
+  collapseLabel: t = "",
+  expandLabel: d = "",
+  content: _
+}) => {
+  const [e, c] = s(!1), i = f();
+  return /* @__PURE__ */ n("div", { className: a["expandable-info-panel_wrapper"], children: [
+    /* @__PURE__ */ n("div", { className: a["expandable-info-panel_header"], children: [
+      o,
+      /* @__PURE__ */ n(
+        "button",
+        {
+          className: x(a["expandable-info-panel_trigger"], {
+            [a["expandable-info-panel_trigger--active"]]: e
+          }),
+          type: "button",
+          "aria-expanded": e,
+          "aria-controls": i,
+          "aria-label": `${l} - ${e ? t : d}`,
+          onClick: () => c(!e),
+          children: [
+            /* @__PURE__ */ p(r, { name: e ? "SquareInfoSolid" : "SquareInfo", size: 24 }),
+            l,
+            /* @__PURE__ */ p(r, { name: e ? "CheveronUp" : "CheveronDown", size: 16 })
+          ]
+        }
+      )
+    ] }),
+    e && /* @__PURE__ */ n("div", { id: i, className: a["expandable-info-panel_content-wrapper"], children: [
+      /* @__PURE__ */ p(r, { name: "SquareInfo", size: 24 }),
+      /* @__PURE__ */ p("div", { children: _ })
+    ] })
+  ] });
+};
+export {
+  h as ExpandableInfoPanel
+};
+//# sourceMappingURL=ExpandableInfoPanel.js.map

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableInfoPanel.js","sources":["../../../src/components/ExpandableInfoPanel/ExpandableInfoPanel.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\r\nimport clsx from 'clsx';\r\nimport { useId } from 'react';\r\n\r\nimport styles from './ExpandableInfoPanel.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ExpandableInfoPanelProps {\r\n  /** Label for the trigger button that toggles the expandable panel. */\r\n  triggerLabel: string;\r\n  /** Main header displayed inline left of the trigger button. */\r\n  mainHeader?: ReactNode | string;\r\n  /** Aria-label for the button when the panel is collapsed. */\r\n  collapseLabel?: string;\r\n  /** Aria-label for the button when the panel is expanded. */\r\n  expandLabel?: string;\r\n  /** Content to be displayed inside the expandable panel. */\r\n  content: ReactNode | string;\r\n}\r\n\r\nexport const ExpandableInfoPanel = ({\r\n  triggerLabel,\r\n  mainHeader,\r\n  collapseLabel = '',\r\n  expandLabel = '',\r\n  content,\r\n}: ExpandableInfoPanelProps) => {\r\n  const [active, setActive] = useState(false);\r\n  const contentId = useId();\r\n\r\n  return (\r\n    <div className={styles['expandable-info-panel_wrapper']}>\r\n      <div className={styles['expandable-info-panel_header']}>\r\n        {mainHeader}\r\n        <button\r\n          className={clsx(styles['expandable-info-panel_trigger'], {\r\n            [styles['expandable-info-panel_trigger--active']]: active,\r\n          })}\r\n          type=\"button\"\r\n          aria-expanded={active}\r\n          aria-controls={contentId}\r\n          aria-label={`${triggerLabel} - ${active ? collapseLabel : expandLabel}`}\r\n          onClick={() => setActive(!active)}\r\n        >\r\n          <Icon name={active ? 'SquareInfoSolid' : 'SquareInfo'} size={24} />\r\n          {triggerLabel}\r\n          <Icon name={active ? 'CheveronUp' : 'CheveronDown'} size={16} />\r\n        </button>\r\n      </div>\r\n      {active && (\r\n        <div id={contentId} className={styles['expandable-info-panel_content-wrapper']}>\r\n          <Icon name=\"SquareInfo\" size={24} />\r\n          <div>{content}</div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["ExpandableInfoPanel","triggerLabel","mainHeader","collapseLabel","expandLabel","content","active","setActive","useState","contentId","useId","jsxs","styles","clsx","jsx","Icon"],"mappings":";;;;;;;;;;GAqBaA,IAAsB,CAAC;AAAA,EAClC,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,SAAAC;AACF,MAAgC;AAC9B,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAYC,EAAM;AAExB,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAI,EAAA,WAAWC,EAAO,8BAA8B,GAClD,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAKD,EAAO,+BAA+B,GAAG;AAAA,YACvD,CAACA,EAAO,uCAAuC,CAAC,GAAGN;AAAA,UAAA,CACpD;AAAA,UACD,MAAK;AAAA,UACL,iBAAeA;AAAA,UACf,iBAAeG;AAAA,UACf,cAAY,GAAGR,CAAY,MAAMK,IAASH,IAAgBC,CAAW;AAAA,UACrE,SAAS,MAAMG,EAAU,CAACD,CAAM;AAAA,UAEhC,UAAA;AAAA,YAAA,gBAAAQ,EAACC,KAAK,MAAMT,IAAS,oBAAoB,cAAc,MAAM,IAAI;AAAA,YAChEL;AAAA,8BACAc,GAAK,EAAA,MAAMT,IAAS,eAAe,gBAAgB,MAAM,GAAI,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChE,GACF;AAAA,IACCA,uBACE,OAAI,EAAA,IAAIG,GAAW,WAAWG,EAAO,uCAAuC,GAC3E,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAK,EAAA,MAAK,cAAa,MAAM,IAAI;AAAA,MAClC,gBAAAD,EAAC,SAAK,UAAQT,EAAA,CAAA;AAAA,IAAA,EAChB,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ExpandableInfoPanelProps } from './ExpandableInfoPanel';
+declare const _default: Meta<ExpandableInfoPanelProps>;
+export default _default;
+export declare const ExpandableInfoPanelExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ExpandableInfoPanelProps>;

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.js

@@ -0,0 +1,31 @@
+import { jsxs as a, jsx as e, Fragment as t } from "react/jsx-runtime";
+import { ExpandableInfoPanel as n } from "./ExpandableInfoPanel.js";
+const r = "<ExpandableInfoPanel triggerLabel={string} mainHeader={string or reactnode} collapseLabel={string} expandLabel={string} content={string or reactnode} />", p = {
+  title: "Molecules/ExpandableInfoPanel",
+  component: n,
+  parameters: {
+    inspectComponent: n,
+    codeString: r
+  }
+}, o = (i) => /* @__PURE__ */ a(t, { children: [
+  /* @__PURE__ */ e(n, { ...i }),
+  /* @__PURE__ */ e("div", { style: { marginTop: "1rem" }, children: "De universiteit biedt een breed scala aan vakken aan, variërend van exacte wetenschappen tot geesteswetenschappen. Studenten kunnen kiezen uit uitdagende keuzevakken, minors en specialisaties die hun studie verrijken. Deze vaklaanbiedingen stimuleren interdisciplinair leren, persoonlijke ontwikkeling en academische verdieping, afgestemd op actuele maatschappelijke vraagstukken en de behoeften van de arbeidsmarkt." })
+] }), s = o.bind({});
+s.args = {
+  triggerLabel: "Wat moet ik doen?",
+  mainHeader: /* @__PURE__ */ e("h1", { children: "Basisgegevens" }),
+  collapseLabel: "Sluit informatiepaneel",
+  expandLabel: "Open informatiepaneel",
+  content: /* @__PURE__ */ a(t, { children: [
+    /* @__PURE__ */ e("h3", { style: { marginTop: "0" }, children: "Wat moet ik doen?" }),
+    /* @__PURE__ */ e("span", { children: "Controleer de onderstaande basisgegevens. Klik daarna op ‘Start’ om te beginnen met het invoeren van de roosterwensen. Je kunt tussentijds opslaan en op een later moment verdergaan." }),
+    /* @__PURE__ */ e("br", {}),
+    /* @__PURE__ */ e("br", {}),
+    /* @__PURE__ */ e("span", { children: "Kloppen de gegevens niet? Neem contact op met de opleidingscoördinator." })
+  ] })
+};
+export {
+  s as ExpandableInfoPanelExample,
+  p as default
+};
+//# sourceMappingURL=ExpandableInfoPanel.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableInfoPanel.stories.js","sources":["../../../src/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ExpandableInfoPanelProps } from './ExpandableInfoPanel';\r\n\r\nimport { ExpandableInfoPanel } from './ExpandableInfoPanel';\r\n\r\nconst codeString =\r\n  '<ExpandableInfoPanel triggerLabel={string} mainHeader={string or reactnode} collapseLabel={string} expandLabel={string} content={string or reactnode} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/ExpandableInfoPanel',\r\n  component: ExpandableInfoPanel,\r\n  parameters: {\r\n    inspectComponent: ExpandableInfoPanel,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ExpandableInfoPanelProps>;\r\n\r\nconst Template: StoryFn<ExpandableInfoPanelProps> = (args) => (\r\n  <>\r\n    <ExpandableInfoPanel {...args} />\r\n    <div style={{ marginTop: '1rem' }}>\r\n      De universiteit biedt een breed scala aan vakken aan, variërend van exacte wetenschappen tot geesteswetenschappen.\r\n      Studenten kunnen kiezen uit uitdagende keuzevakken, minors en specialisaties die hun studie verrijken. Deze\r\n      vaklaanbiedingen stimuleren interdisciplinair leren, persoonlijke ontwikkeling en academische verdieping,\r\n      afgestemd op actuele maatschappelijke vraagstukken en de behoeften van de arbeidsmarkt.\r\n    </div>\r\n  </>\r\n);\r\n\r\nexport const ExpandableInfoPanelExample = Template.bind({});\r\nExpandableInfoPanelExample.args = {\r\n  triggerLabel: 'Wat moet ik doen?',\r\n  mainHeader: <h1>Basisgegevens</h1>,\r\n  collapseLabel: 'Sluit informatiepaneel',\r\n  expandLabel: 'Open informatiepaneel',\r\n  content: (\r\n    <>\r\n      <h3 style={{ marginTop: '0' }}>Wat moet ik doen?</h3>\r\n      <span>\r\n        Controleer de onderstaande basisgegevens. Klik daarna op ‘Start’ om te beginnen met het invoeren van de\r\n        roosterwensen. Je kunt tussentijds opslaan en op een later moment verdergaan.\r\n      </span>\r\n      <br />\r\n      <br />\r\n      <span>Kloppen de gegevens niet? Neem contact op met de opleidingscoördinator.</span>\r\n    </>\r\n  ),\r\n};\r\n"],"names":["codeString","ExpandableInfoPanel_stories","ExpandableInfoPanel","Template","args","jsxs","Fragment","jsx","ExpandableInfoPanelExample"],"mappings":";;AAKA,MAAMA,IACJ,4JAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA8C,CAACC,MAEjD,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAC,gBAAAC,EAAAL,GAAA,EAAqB,GAAGE,GAAM;AAAA,oBAC9B,OAAI,EAAA,OAAO,EAAE,WAAW,UAAU,UAKnC,maAAA,CAAA;AAAA,GACF,GAGWI,IAA6BL,EAAS,KAAK,CAAE,CAAA;AAC1DK,EAA2B,OAAO;AAAA,EAChC,cAAc;AAAA,EACd,YAAa,gBAAAD,EAAA,MAAA,EAAG,UAAa,gBAAA,CAAA;AAAA,EAC7B,eAAe;AAAA,EACf,aAAa;AAAA,EACb,SAEI,gBAAAF,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAG,OAAO,EAAE,WAAW,OAAO,UAAiB,qBAAA;AAAA,IAChD,gBAAAA,EAAC,UAAK,UAGN,wLAAA,CAAA;AAAA,sBACC,MAAG,EAAA;AAAA,sBACH,MAAG,EAAA;AAAA,IACJ,gBAAAA,EAAC,UAAK,UAAuE,0EAAA,CAAA;AAAA,EAAA,EAC/E,CAAA;AAEJ;"}

package/dist/components/ExpandableInfoPanel/index.d.ts

@@ -0,0 +1 @@
+export * from './ExpandableInfoPanel';

package/dist/components/ExpandableInfoPanel/index.js

@@ -0,0 +1,5 @@
+import { ExpandableInfoPanel as n } from "./ExpandableInfoPanel.js";
+export {
+  n as ExpandableInfoPanel
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ExpandableInfoPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './Chip';
 export * from './ControlsButton';
 export * from './Drawer';
 export * from './EmptyStateDataDisplay';
+export * from './ExpandableInfoPanel';
 export * from './FeedbackBar';
 export * from './FeedbackBox';
 export * from './FieldHint';

package/dist/components/index.js

@@ -7,57 +7,58 @@ import { Backdrop as c } from "./Backdrop/Backdrop.js";
 import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
 import { Button as s } from "./Buttons/Button.js";
 import { LinkButton as b } from "./Buttons/LinkButton.js";
-import { MenuButton as k } from "./Buttons/MenuButton.js";
-import { Card as I } from "./Card/Card.js";
+import { MenuButton as I } from "./Buttons/MenuButton.js";
+import { Card as F } from "./Card/Card.js";
 import { Checkbox as g } from "./Checkbox/Checkbox.js";
-import { CheckboxButtonBar as R } from "./CheckboxButtonBar/CheckboxButtonBar.js";
-import { CheckboxTree as P } from "./CheckboxTree/CheckboxTree.js";
+import { CheckboxButtonBar as P } from "./CheckboxButtonBar/CheckboxButtonBar.js";
+import { CheckboxTree as A } from "./CheckboxTree/CheckboxTree.js";
 import { Chip as y } from "./Chip/Chip.js";
 import { ControlsButton as T } from "./ControlsButton/ControlsButton.js";
 import { Drawer as w } from "./Drawer/Drawer.js";
-import { EmptyStateDataDisplay as O } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
-import { FeedbackBar as H } from "./FeedbackBar/FeedbackBar.js";
-import { FeedbackBox as N } from "./FeedbackBox/FeedbackBox.js";
-import { FieldHint as j } from "./FieldHint/FieldHint.js";
-import { Fieldset as J } from "./Fieldset/Fieldset.js";
-import { FormField as Q } from "./FormField/FormField.js";
-import { FormInput as W } from "./FormInput/FormInput.js";
-import { GridRow as Y } from "./GridRow/GridRow.js";
-import { HorizontalList as _ } from "./HorizontalList/HorizontalList.js";
-import { Icon as oo } from "./Icon/Icon.js";
-import { IconButton as to } from "./IconButton/IconButton.js";
-import { InfoBanner as po } from "./InfoBanner/InfoBanner.js";
-import { InfoMessage as mo } from "./InfoMessage/InfoMessage.js";
-import { Input as ao } from "./Input/Input.js";
-import { InputField as no } from "./InputField/InputField.js";
-import { Label as co } from "./Label/Label.js";
-import { MenuLink as Bo } from "./MenuLink/MenuLink.js";
-import { MetaDataList as So } from "./MetaDataList/MetaDataList.js";
-import { ModalDialog as Co } from "./ModalDialog/ModalDialog.js";
-import { M as Fo } from "../TablePlugin-Bj5FObQ_.js";
-import { MultiSelectBox as Mo } from "./MultiSelectBox/MultiSelectBox.js";
-import { OverlayCloseButton as Lo } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { OverlayStepBar as Ao } from "./OverlayStepBar/OverlayStepBar.js";
-import { PageOverlay as ho } from "./PageOverlay/PageOverlay.js";
-import { Periods as Do } from "./Periods/Periods.js";
-import { PeriodSelector as vo } from "./PeriodSelector/PeriodSelector.js";
-import { ProgrammeCard as Go } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as Eo } from "./RadioButton/RadioButton.js";
-import { RadioGroup as zo } from "./RadioGroup/RadioGroup.js";
-import { RadioTabSelector as Vo } from "./RadioTabSelector/RadioTabSelector.js";
-import { Repeater as qo } from "./Repeater/Repeater.js";
-import { Rte as Ko, RteEditor as Qo } from "./RteEditor/RteEditor.js";
-import { SectionNotification as Wo } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as Yo } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as _o, useSelect as $o } from "./SelectListbox/SelectProvider.js";
-import { Sortable as rr } from "./Sortable/Sortable.js";
-import { Spinner as er } from "./Spinner/Spinner.js";
-import { StatusBadge as xr } from "./StatusBadge/StatusBage.js";
-import { StatusPill as fr } from "./StatusPill/StatusPill.js";
-import { TextArea as ir } from "./TextArea/TextArea.js";
-import { ToggleSwitch as lr } from "./ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as dr } from "./Tooltip/Tooltip.js";
-import { VarIndicator as Br } from "./VarIndicator/VarIndicator.js";
+import { EmptyStateDataDisplay as G } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
+import { ExpandableInfoPanel as H } from "./ExpandableInfoPanel/ExpandableInfoPanel.js";
+import { FeedbackBar as N } from "./FeedbackBar/FeedbackBar.js";
+import { FeedbackBox as j } from "./FeedbackBox/FeedbackBox.js";
+import { FieldHint as J } from "./FieldHint/FieldHint.js";
+import { Fieldset as Q } from "./Fieldset/Fieldset.js";
+import { FormField as W } from "./FormField/FormField.js";
+import { FormInput as Y } from "./FormInput/FormInput.js";
+import { GridRow as _ } from "./GridRow/GridRow.js";
+import { HorizontalList as oo } from "./HorizontalList/HorizontalList.js";
+import { Icon as to } from "./Icon/Icon.js";
+import { IconButton as po } from "./IconButton/IconButton.js";
+import { InfoBanner as mo } from "./InfoBanner/InfoBanner.js";
+import { InfoMessage as ao } from "./InfoMessage/InfoMessage.js";
+import { Input as no } from "./Input/Input.js";
+import { InputField as co } from "./InputField/InputField.js";
+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-Bj5FObQ_.js";
+import { MultiSelectBox as Lo } from "./MultiSelectBox/MultiSelectBox.js";
+import { OverlayCloseButton as Ro } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { OverlayStepBar as ho } from "./OverlayStepBar/OverlayStepBar.js";
+import { PageOverlay as Do } from "./PageOverlay/PageOverlay.js";
+import { Periods as vo } from "./Periods/Periods.js";
+import { PeriodSelector as Eo } from "./PeriodSelector/PeriodSelector.js";
+import { ProgrammeCard as Oo } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as zo } from "./RadioButton/RadioButton.js";
+import { RadioGroup as Vo } from "./RadioGroup/RadioGroup.js";
+import { RadioTabSelector as qo } from "./RadioTabSelector/RadioTabSelector.js";
+import { Repeater as Ko } from "./Repeater/Repeater.js";
+import { Rte as Uo, RteEditor as Wo } from "./RteEditor/RteEditor.js";
+import { SectionNotification as Yo } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as _o } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as or, useSelect as rr } from "./SelectListbox/SelectProvider.js";
+import { Sortable as er } from "./Sortable/Sortable.js";
+import { Spinner as xr } from "./Spinner/Spinner.js";
+import { StatusBadge as fr } from "./StatusBadge/StatusBage.js";
+import { StatusPill as ir } from "./StatusPill/StatusPill.js";
+import { TextArea as lr } from "./TextArea/TextArea.js";
+import { ToggleSwitch as dr } from "./ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as Br } from "./Tooltip/Tooltip.js";
+import { VarIndicator as Sr } from "./VarIndicator/VarIndicator.js";
 export {
   t as Accordion,
   p as AccordionCard,
@@ -67,59 +68,60 @@ export {
   c as Backdrop,
   s as Button,
   u as ButtonGroup,
-  I as Card,
+  F as Card,
   g as Checkbox,
-  R as CheckboxButtonBar,
-  P as CheckboxTree,
+  P as CheckboxButtonBar,
+  A as CheckboxTree,
   y as Chip,
   T as ControlsButton,
   w as Drawer,
-  O as EmptyStateDataDisplay,
-  H as FeedbackBar,
-  N as FeedbackBox,
-  j as FieldHint,
-  J as Fieldset,
-  Q as FormField,
-  W as FormInput,
-  Y as GridRow,
-  _ as HorizontalList,
-  oo as Icon,
-  to as IconButton,
-  po as InfoBanner,
-  mo as InfoMessage,
-  ao as Input,
-  no as InputField,
-  co as Label,
+  G as EmptyStateDataDisplay,
+  H as ExpandableInfoPanel,
+  N as FeedbackBar,
+  j as FeedbackBox,
+  J as FieldHint,
+  Q as Fieldset,
+  W as FormField,
+  Y as FormInput,
+  _ as GridRow,
+  oo as HorizontalList,
+  to as Icon,
+  po as IconButton,
+  mo as InfoBanner,
+  ao as InfoMessage,
+  no as Input,
+  co as InputField,
+  Bo as Label,
   b as LinkButton,
-  k as MenuButton,
-  Bo as MenuLink,
-  So as MetaDataList,
-  Co as ModalDialog,
-  Fo as MultiSelect,
-  Mo as MultiSelectBox,
-  Lo as OverlayCloseButton,
-  Ao as OverlayStepBar,
-  ho as PageOverlay,
-  vo as PeriodSelector,
-  Do as Periods,
-  Go as ProgrammeCard,
-  Eo as RadioButton,
-  zo as RadioGroup,
-  Vo as RadioTabSelector,
-  qo as Repeater,
-  Ko as Rte,
-  Qo as RteEditor,
-  Wo as SectionNotification,
-  Yo as SelectListbox,
-  _o as SelectProvider,
-  rr as Sortable,
-  er as Spinner,
-  xr as StatusBadge,
-  fr as StatusPill,
-  ir as TextArea,
-  lr as ToggleSwitch,
-  dr as Tooltip,
-  Br as VarIndicator,
-  $o as useSelect
+  I as MenuButton,
+  So as MenuLink,
+  Co as MetaDataList,
+  ko as ModalDialog,
+  Mo as MultiSelect,
+  Lo as MultiSelectBox,
+  Ro as OverlayCloseButton,
+  ho as OverlayStepBar,
+  Do as PageOverlay,
+  Eo as PeriodSelector,
+  vo as Periods,
+  Oo as ProgrammeCard,
+  zo as RadioButton,
+  Vo as RadioGroup,
+  qo as RadioTabSelector,
+  Ko as Repeater,
+  Uo as Rte,
+  Wo as RteEditor,
+  Yo as SectionNotification,
+  _o as SelectListbox,
+  or as SelectProvider,
+  er as Sortable,
+  xr as Spinner,
+  fr as StatusBadge,
+  ir as StatusPill,
+  lr as TextArea,
+  dr as ToggleSwitch,
+  Br as Tooltip,
+  Sr as VarIndicator,
+  rr as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -7,57 +7,58 @@ import { Backdrop as c } from "./components/Backdrop/Backdrop.js";
 import { ButtonGroup as u } from "./components/ButtonGroup/ButtonGroup.js";
 import { Button as s } from "./components/Buttons/Button.js";
 import { LinkButton as b } from "./components/Buttons/LinkButton.js";
-import { MenuButton as k } from "./components/Buttons/MenuButton.js";
-import { Card as I } from "./components/Card/Card.js";
+import { MenuButton as I } from "./components/Buttons/MenuButton.js";
+import { Card as F } from "./components/Card/Card.js";
 import { Checkbox as g } from "./components/Checkbox/Checkbox.js";
-import { CheckboxButtonBar as R } from "./components/CheckboxButtonBar/CheckboxButtonBar.js";
-import { CheckboxTree as P } from "./components/CheckboxTree/CheckboxTree.js";
+import { CheckboxButtonBar as P } from "./components/CheckboxButtonBar/CheckboxButtonBar.js";
+import { CheckboxTree as A } from "./components/CheckboxTree/CheckboxTree.js";
 import { Chip as y } from "./components/Chip/Chip.js";
 import { ControlsButton as T } from "./components/ControlsButton/ControlsButton.js";
 import { Drawer as w } from "./components/Drawer/Drawer.js";
-import { EmptyStateDataDisplay as O } from "./components/EmptyStateDataDisplay/EmptyStateDataDisplay.js";
-import { FeedbackBar as H } from "./components/FeedbackBar/FeedbackBar.js";
-import { FeedbackBox as N } from "./components/FeedbackBox/FeedbackBox.js";
-import { FieldHint as j } from "./components/FieldHint/FieldHint.js";
-import { Fieldset as J } from "./components/Fieldset/Fieldset.js";
-import { FormField as Q } from "./components/FormField/FormField.js";
-import { FormInput as W } from "./components/FormInput/FormInput.js";
-import { GridRow as Y } from "./components/GridRow/GridRow.js";
-import { HorizontalList as _ } from "./components/HorizontalList/HorizontalList.js";
-import { Icon as oo } from "./components/Icon/Icon.js";
-import { IconButton as to } from "./components/IconButton/IconButton.js";
-import { InfoBanner as po } from "./components/InfoBanner/InfoBanner.js";
-import { InfoMessage as mo } from "./components/InfoMessage/InfoMessage.js";
-import { Input as ao } from "./components/Input/Input.js";
-import { InputField as no } from "./components/InputField/InputField.js";
-import { Label as co } from "./components/Label/Label.js";
-import { MenuLink as Bo } from "./components/MenuLink/MenuLink.js";
-import { MetaDataList as So } from "./components/MetaDataList/MetaDataList.js";
-import { ModalDialog as Co } from "./components/ModalDialog/ModalDialog.js";
-import { M as Fo } from "./TablePlugin-Bj5FObQ_.js";
-import { MultiSelectBox as Mo } from "./components/MultiSelectBox/MultiSelectBox.js";
-import { OverlayCloseButton as Lo } from "./components/OverlayCloseButton/OverlayCloseButton.js";
-import { OverlayStepBar as Ao } from "./components/OverlayStepBar/OverlayStepBar.js";
-import { PageOverlay as ho } from "./components/PageOverlay/PageOverlay.js";
-import { Periods as Do } from "./components/Periods/Periods.js";
-import { PeriodSelector as vo } from "./components/PeriodSelector/PeriodSelector.js";
-import { ProgrammeCard as Go } from "./components/ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as Eo } from "./components/RadioButton/RadioButton.js";
-import { RadioGroup as zo } from "./components/RadioGroup/RadioGroup.js";
-import { RadioTabSelector as Vo } from "./components/RadioTabSelector/RadioTabSelector.js";
-import { Repeater as qo } from "./components/Repeater/Repeater.js";
-import { Rte as Ko, RteEditor as Qo } from "./components/RteEditor/RteEditor.js";
-import { SectionNotification as Wo } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as Yo } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as _o, useSelect as $o } from "./components/SelectListbox/SelectProvider.js";
-import { Sortable as rr } from "./components/Sortable/Sortable.js";
-import { Spinner as er } from "./components/Spinner/Spinner.js";
-import { StatusBadge as xr } from "./components/StatusBadge/StatusBage.js";
-import { StatusPill as fr } from "./components/StatusPill/StatusPill.js";
-import { TextArea as ir } from "./components/TextArea/TextArea.js";
-import { ToggleSwitch as lr } from "./components/ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as dr } from "./components/Tooltip/Tooltip.js";
-import { VarIndicator as Br } from "./components/VarIndicator/VarIndicator.js";
+import { EmptyStateDataDisplay as G } from "./components/EmptyStateDataDisplay/EmptyStateDataDisplay.js";
+import { ExpandableInfoPanel as H } from "./components/ExpandableInfoPanel/ExpandableInfoPanel.js";
+import { FeedbackBar as N } from "./components/FeedbackBar/FeedbackBar.js";
+import { FeedbackBox as j } from "./components/FeedbackBox/FeedbackBox.js";
+import { FieldHint as J } from "./components/FieldHint/FieldHint.js";
+import { Fieldset as Q } from "./components/Fieldset/Fieldset.js";
+import { FormField as W } from "./components/FormField/FormField.js";
+import { FormInput as Y } from "./components/FormInput/FormInput.js";
+import { GridRow as _ } from "./components/GridRow/GridRow.js";
+import { HorizontalList as oo } from "./components/HorizontalList/HorizontalList.js";
+import { Icon as to } from "./components/Icon/Icon.js";
+import { IconButton as po } from "./components/IconButton/IconButton.js";
+import { InfoBanner as mo } from "./components/InfoBanner/InfoBanner.js";
+import { InfoMessage as ao } from "./components/InfoMessage/InfoMessage.js";
+import { Input as no } from "./components/Input/Input.js";
+import { InputField as co } from "./components/InputField/InputField.js";
+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-Bj5FObQ_.js";
+import { MultiSelectBox as Lo } from "./components/MultiSelectBox/MultiSelectBox.js";
+import { OverlayCloseButton as Ro } from "./components/OverlayCloseButton/OverlayCloseButton.js";
+import { OverlayStepBar as ho } from "./components/OverlayStepBar/OverlayStepBar.js";
+import { PageOverlay as Do } from "./components/PageOverlay/PageOverlay.js";
+import { Periods as vo } from "./components/Periods/Periods.js";
+import { PeriodSelector as Eo } from "./components/PeriodSelector/PeriodSelector.js";
+import { ProgrammeCard as Oo } from "./components/ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as zo } from "./components/RadioButton/RadioButton.js";
+import { RadioGroup as Vo } from "./components/RadioGroup/RadioGroup.js";
+import { RadioTabSelector as qo } from "./components/RadioTabSelector/RadioTabSelector.js";
+import { Repeater as Ko } from "./components/Repeater/Repeater.js";
+import { Rte as Uo, RteEditor as Wo } from "./components/RteEditor/RteEditor.js";
+import { SectionNotification as Yo } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as _o } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as or, useSelect as rr } from "./components/SelectListbox/SelectProvider.js";
+import { Sortable as er } from "./components/Sortable/Sortable.js";
+import { Spinner as xr } from "./components/Spinner/Spinner.js";
+import { StatusBadge as fr } from "./components/StatusBadge/StatusBage.js";
+import { StatusPill as ir } from "./components/StatusPill/StatusPill.js";
+import { TextArea as lr } from "./components/TextArea/TextArea.js";
+import { ToggleSwitch as dr } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as Br } from "./components/Tooltip/Tooltip.js";
+import { VarIndicator as Sr } from "./components/VarIndicator/VarIndicator.js";
 export {
   t as Accordion,
   p as AccordionCard,
@@ -67,59 +68,60 @@ export {
   c as Backdrop,
   s as Button,
   u as ButtonGroup,
-  I as Card,
+  F as Card,
   g as Checkbox,
-  R as CheckboxButtonBar,
-  P as CheckboxTree,
+  P as CheckboxButtonBar,
+  A as CheckboxTree,
   y as Chip,
   T as ControlsButton,
   w as Drawer,
-  O as EmptyStateDataDisplay,
-  H as FeedbackBar,
-  N as FeedbackBox,
-  j as FieldHint,
-  J as Fieldset,
-  Q as FormField,
-  W as FormInput,
-  Y as GridRow,
-  _ as HorizontalList,
-  oo as Icon,
-  to as IconButton,
-  po as InfoBanner,
-  mo as InfoMessage,
-  ao as Input,
-  no as InputField,
-  co as Label,
+  G as EmptyStateDataDisplay,
+  H as ExpandableInfoPanel,
+  N as FeedbackBar,
+  j as FeedbackBox,
+  J as FieldHint,
+  Q as Fieldset,
+  W as FormField,
+  Y as FormInput,
+  _ as GridRow,
+  oo as HorizontalList,
+  to as Icon,
+  po as IconButton,
+  mo as InfoBanner,
+  ao as InfoMessage,
+  no as Input,
+  co as InputField,
+  Bo as Label,
   b as LinkButton,
-  k as MenuButton,
-  Bo as MenuLink,
-  So as MetaDataList,
-  Co as ModalDialog,
-  Fo as MultiSelect,
-  Mo as MultiSelectBox,
-  Lo as OverlayCloseButton,
-  Ao as OverlayStepBar,
-  ho as PageOverlay,
-  vo as PeriodSelector,
-  Do as Periods,
-  Go as ProgrammeCard,
-  Eo as RadioButton,
-  zo as RadioGroup,
-  Vo as RadioTabSelector,
-  qo as Repeater,
-  Ko as Rte,
-  Qo as RteEditor,
-  Wo as SectionNotification,
-  Yo as SelectListbox,
-  _o as SelectProvider,
-  rr as Sortable,
-  er as Spinner,
-  xr as StatusBadge,
-  fr as StatusPill,
-  ir as TextArea,
-  lr as ToggleSwitch,
-  dr as Tooltip,
-  Br as VarIndicator,
-  $o as useSelect
+  I as MenuButton,
+  So as MenuLink,
+  Co as MetaDataList,
+  ko as ModalDialog,
+  Mo as MultiSelect,
+  Lo as MultiSelectBox,
+  Ro as OverlayCloseButton,
+  ho as OverlayStepBar,
+  Do as PageOverlay,
+  Eo as PeriodSelector,
+  vo as Periods,
+  Oo as ProgrammeCard,
+  zo as RadioButton,
+  Vo as RadioGroup,
+  qo as RadioTabSelector,
+  Ko as Repeater,
+  Uo as Rte,
+  Wo as RteEditor,
+  Yo as SectionNotification,
+  _o as SelectListbox,
+  or as SelectProvider,
+  er as Sortable,
+  xr as Spinner,
+  fr as StatusBadge,
+  ir as StatusPill,
+  lr as TextArea,
+  dr as ToggleSwitch,
+  Br as Tooltip,
+  Sr as VarIndicator,
+  rr as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

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