@uva-glass/component-library 3.29.0 → 3.30.0

package/dist/components/ControlsButton/ControlsButton.stories.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { fn as n } from "../../index-Dwqes6RH.js";
+import { W as r } from "../../index-Di9WPZUe.js";
 import { ControlsButton as o } from "./ControlsButton.js";
-const r = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", u = {
+const n = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", u = {
   title: "Atoms/ControlsButton",
   component: o,
   argTypes: {
@@ -28,7 +28,7 @@ const r = "<ControlsButton type={radio or checkbox} label={} value={} prefix={}
   },
   parameters: {
     inspectComponent: o,
-    codeString: r
+    codeString: n
   }
 }, l = (e) => /* @__PURE__ */ t(o, { ...e }), a = l.bind({});
 a.args = {
@@ -36,7 +36,7 @@ a.args = {
   label: "1.2",
   value: "1.2",
   forceSquared: !0,
-  onSetValue: n()
+  onSetValue: r()
 };
 export {
   a as ControlsButtonExample,

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

@@ -1 +1 @@
-{"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nconst codeString =\r\n  '<ControlsButton type={radio or checkbox} label={} value={} prefix={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/ControlsButton',\r\n  component: ControlsButton,\r\n  argTypes: {\r\n    label: {\r\n      control: 'text',\r\n    },\r\n    value: {\r\n      control: 'string',\r\n    },\r\n    forceSquared: {\r\n      control: 'boolean',\r\n    },\r\n    isChecked: {\r\n      control: 'boolean',\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n    },\r\n    onSetValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: ControlsButton,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n  type: 'checkbox',\r\n  label: '1.2',\r\n  value: '1.2',\r\n  forceSquared: true,\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,+JAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAE,CAAA;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAG;AACjB;"}
+{"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nconst codeString =\r\n  '<ControlsButton type={radio or checkbox} label={} value={} prefix={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/ControlsButton',\r\n  component: ControlsButton,\r\n  argTypes: {\r\n    label: {\r\n      control: 'text',\r\n    },\r\n    value: {\r\n      control: 'string',\r\n    },\r\n    forceSquared: {\r\n      control: 'boolean',\r\n    },\r\n    isChecked: {\r\n      control: 'boolean',\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n    },\r\n    onSetValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: ControlsButton,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n  type: 'checkbox',\r\n  label: '1.2',\r\n  value: '1.2',\r\n  forceSquared: true,\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,+JAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAA,CAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAA;AACd;"}

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Drawer.module.css';\n\nimport { Backdrop } from 'components/Backdrop/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {\n  /** The buttons to render in the drawer. */\n  buttons?: ReactNode;\n  /** true if the drawer should be open; otherwise, false. The default is false. */\n  isOpen?: boolean;\n  /** The callback method that is invoked when the drawer is closed. */\n  onClose: () => void;\n  /** The title of the drawer. */\n  title: string;\n  /** The aria-label of the close button. */\n  closeButtonAriaValueText?: string;\n}\n\nconst closingDelay = 200;\n\n/** Represents a Drawer component. */\nexport function Drawer({\n  buttons,\n  children,\n  isOpen,\n  onClose,\n  title,\n  closeButtonAriaValueText = 'Close',\n  ...restProps\n}: PropsWithChildren<DrawerProps>) {\n  const [containerClassNames, setContainerClassNames] = useState(styles.drawer);\n  // Hide content outside the modal from screen readers.\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  function onCloseDrawer() {\n    setContainerClassNames(styles.drawer);\n\n    globalThis.setTimeout(() => {\n      onClose();\n    }, closingDelay);\n  }\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable: true, isKeyboardDismissDisabled: false, isOpen, onClose: onCloseDrawer },\n    contentRef\n  );\n\n  // Get props for the dialog and its title\n  const { dialogProps, titleProps } = useDialog({}, contentRef);\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    // setting class name after render so that element can slide in after it is mounted and slide out\n    // before it is unmounted\n    setContainerClassNames(clsx(styles.drawer, { [styles['drawer--open']]: isOpen }));\n  }, [isOpen]);\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        <FocusScope contain restoreFocus>\n          <aside\n            {...modalProps}\n            {...overlayProps}\n            {...dialogProps}\n            {...restProps}\n            className={containerClassNames}\n            ref={contentRef}\n          >\n            <header className={styles.drawer__header}>\n              <h1 className={styles.drawer__heading} {...titleProps}>\n                {title}\n              </h1>\n\n              <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onCloseDrawer} />\n            </header>\n\n            <div className={styles.drawer__content}>{children}</div>\n\n            {buttons && (\n              <footer className={styles.drawer__footer}>\n                <div className={styles.drawer__buttons}>{buttons}</div>\n              </footer>\n            )}\n          </aside>\n        </FocusScope>\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["closingDelay","Drawer","buttons","children","isOpen","onClose","title","closeButtonAriaValueText","restProps","containerClassNames","setContainerClassNames","useState","styles","modalProps","useModal","contentRef","useRef","onCloseDrawer","overlayProps","underlayProps","useOverlay","dialogProps","titleProps","useDialog","usePreventScroll","useEffect","clsx","jsx","OverlayContainer","Backdrop","FocusScope","jsxs","OverlayCloseButton"],"mappings":";;;;;;;;;;;;;;;;GA0BMA,IAAe;AAGd,SAASC,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GAAmC;AACjC,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAASC,EAAO,MAAM,GAEtE,EAAE,YAAAC,MAAeC,EAAS,EAAE,YAAY,CAACV,GAAQ,GACjDW,IAAaC,EAAuB,IAAI;AAE9C,WAASC,IAAgB;AACvB,IAAAP,EAAuBE,EAAO,MAAM,GAEpC,WAAW,WAAW,MAAM;AAClB,MAAAP,EAAA;AAAA,OACPL,CAAY;AAAA,EAAA;AAKX,QAAA,EAAE,cAAAkB,GAAc,eAAAC,EAAA,IAAkBC;AAAA,IACtC,EAAE,eAAe,IAAM,2BAA2B,IAAO,QAAAhB,GAAQ,SAASa,EAAc;AAAA,IACxFF;AAAA,EACF,GAGM,EAAE,aAAAM,GAAa,YAAAC,EAAA,IAAeC,EAAU,CAAA,GAAIR,CAAU;AAE5D,SAAAS,EAAiB,EAAE,YAAY,CAACpB,GAAQ,GAExCqB,EAAU,MAAM;AAGS,IAAAf,EAAAgB,EAAKd,EAAO,QAAQ,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGR,EAAO,CAAC,CAAC;AAAA,EAAA,GAC/E,CAACA,CAAM,CAAC,GAGT,gBAAAuB,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,GAAGV,GACZ,UAAA,gBAAAQ,EAACG,GAAW,EAAA,SAAO,IAAC,cAAY,IAC9B,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACH,GAAGK;AAAA,MACH,GAAGG;AAAA,MACH,GAAGb;AAAA,MACJ,WAAWC;AAAA,MACX,KAAKM;AAAA,MAEL,UAAA;AAAA,QAAC,gBAAAgB,EAAA,UAAA,EAAO,WAAWnB,EAAO,gBACxB,UAAA;AAAA,UAAA,gBAAAe,EAAC,QAAG,WAAWf,EAAO,iBAAkB,GAAGU,GACxC,UACHhB,GAAA;AAAA,UAEC,gBAAAqB,EAAAK,GAAA,EAAmB,cAAYzB,GAA0B,SAASU,EAAe,CAAA;AAAA,QAAA,GACpF;AAAA,QAEC,gBAAAU,EAAA,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAT,GAAS;AAAA,QAEjDD,KACC,gBAAAyB,EAAC,UAAO,EAAA,WAAWf,EAAO,gBACxB,UAAC,gBAAAe,EAAA,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAV,EAAA,CAAQ,EACnD,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAGN,CAAA,EACF,CAAA,GACF;AAEJ;"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Drawer.module.css';\n\nimport { Backdrop } from 'components/Backdrop/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {\n  /** The buttons to render in the drawer. */\n  buttons?: ReactNode;\n  /** true if the drawer should be open; otherwise, false. The default is false. */\n  isOpen?: boolean;\n  /** The callback method that is invoked when the drawer is closed. */\n  onClose: () => void;\n  /** The title of the drawer. */\n  title: string;\n  /** The aria-label of the close button. */\n  closeButtonAriaValueText?: string;\n}\n\nconst closingDelay = 200;\n\n/** Represents a Drawer component. */\nexport function Drawer({\n  buttons,\n  children,\n  isOpen,\n  onClose,\n  title,\n  closeButtonAriaValueText = 'Close',\n  ...restProps\n}: PropsWithChildren<DrawerProps>) {\n  const [containerClassNames, setContainerClassNames] = useState(styles.drawer);\n  // Hide content outside the modal from screen readers.\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  function onCloseDrawer() {\n    setContainerClassNames(styles.drawer);\n\n    globalThis.setTimeout(() => {\n      onClose();\n    }, closingDelay);\n  }\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable: true, isKeyboardDismissDisabled: false, isOpen, onClose: onCloseDrawer },\n    contentRef\n  );\n\n  // Get props for the dialog and its title\n  const { dialogProps, titleProps } = useDialog({}, contentRef);\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    // setting class name after render so that element can slide in after it is mounted and slide out\n    // before it is unmounted\n    setContainerClassNames(clsx(styles.drawer, { [styles['drawer--open']]: isOpen }));\n  }, [isOpen]);\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        <FocusScope contain restoreFocus>\n          <aside\n            {...modalProps}\n            {...overlayProps}\n            {...dialogProps}\n            {...restProps}\n            className={containerClassNames}\n            ref={contentRef}\n          >\n            <header className={styles.drawer__header}>\n              <h1 className={styles.drawer__heading} {...titleProps}>\n                {title}\n              </h1>\n\n              <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onCloseDrawer} />\n            </header>\n\n            <div className={styles.drawer__content}>{children}</div>\n\n            {buttons && (\n              <footer className={styles.drawer__footer}>\n                <div className={styles.drawer__buttons}>{buttons}</div>\n              </footer>\n            )}\n          </aside>\n        </FocusScope>\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["closingDelay","Drawer","buttons","children","isOpen","onClose","title","closeButtonAriaValueText","restProps","containerClassNames","setContainerClassNames","useState","styles","modalProps","useModal","contentRef","useRef","onCloseDrawer","overlayProps","underlayProps","useOverlay","dialogProps","titleProps","useDialog","usePreventScroll","useEffect","clsx","jsx","OverlayContainer","Backdrop","FocusScope","jsxs","OverlayCloseButton"],"mappings":";;;;;;;;;;;;;;;;GA0BMA,IAAe;AAGd,SAASC,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GAAmC;AACjC,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAASC,EAAO,MAAM,GAEtE,EAAE,YAAAC,MAAeC,EAAS,EAAE,YAAY,CAACV,GAAQ,GACjDW,IAAaC,EAAuB,IAAI;AAE9C,WAASC,IAAgB;AACvB,IAAAP,EAAuBE,EAAO,MAAM,GAEpC,WAAW,WAAW,MAAM;AAC1B,MAAAP,EAAA;AAAA,IAAQ,GACPL,CAAY;AAAA,EAAA;AAKjB,QAAM,EAAE,cAAAkB,GAAc,eAAAC,EAAA,IAAkBC;AAAA,IACtC,EAAE,eAAe,IAAM,2BAA2B,IAAO,QAAAhB,GAAQ,SAASa,EAAA;AAAA,IAC1EF;AAAA,EAAA,GAII,EAAE,aAAAM,GAAa,YAAAC,EAAA,IAAeC,EAAU,CAAA,GAAIR,CAAU;AAE5D,SAAAS,EAAiB,EAAE,YAAY,CAACpB,GAAQ,GAExCqB,EAAU,MAAM;AAGd,IAAAf,EAAuBgB,EAAKd,EAAO,QAAQ,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGR,EAAA,CAAQ,CAAC;AAAA,EAAA,GAC/E,CAACA,CAAM,CAAC,GAGT,gBAAAuB,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAU,GAAGV,GACZ,UAAA,gBAAAQ,EAACG,GAAA,EAAW,SAAO,IAAC,cAAY,IAC9B,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACH,GAAGK;AAAA,MACH,GAAGG;AAAA,MACH,GAAGb;AAAA,MACJ,WAAWC;AAAA,MACX,KAAKM;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAgB,EAAC,UAAA,EAAO,WAAWnB,EAAO,gBACxB,UAAA;AAAA,UAAA,gBAAAe,EAAC,QAAG,WAAWf,EAAO,iBAAkB,GAAGU,GACxC,UAAAhB,GACH;AAAA,UAEA,gBAAAqB,EAACK,GAAA,EAAmB,cAAYzB,GAA0B,SAASU,EAAA,CAAe;AAAA,QAAA,GACpF;AAAA,QAEA,gBAAAU,EAAC,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAT,GAAS;AAAA,QAEjDD,KACC,gBAAAyB,EAAC,UAAA,EAAO,WAAWf,EAAO,gBACxB,UAAA,gBAAAe,EAAC,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAV,EAAA,CAAQ,EAAA,CACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAEJ,CACF,GACF,GACF;AAEJ;"}

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

@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
 import { DrawerProps } from './Drawer';
 declare const _default: Meta<DrawerProps>;
 export default _default;
-export declare const DrawerExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
-export declare const WithButtons: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
+export declare const DrawerExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
+export declare const WithButtons: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;

package/dist/components/Drawer/Drawer.stories.js

@@ -1,6 +1,6 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
-import { fn as m } from "../../index-Dwqes6RH.js";
+import { W as m } from "../../index-Di9WPZUe.js";
 import { useState as c } from "react";
 import { Drawer as r } from "./Drawer.js";
 import { Button as o } from "../Buttons/Button.js";
@@ -34,15 +34,15 @@ const d = `
     codeString: d
   }
 }, i = (l) => {
-  const [t, n] = c(!1);
+  const [e, n] = c(!1);
   return /* @__PURE__ */ a(p, { children: [
-    /* @__PURE__ */ e(o, { onClick: () => n(!t), variant: "primary", children: "Open drawer" }),
-    t && /* @__PURE__ */ e(
+    /* @__PURE__ */ t(o, { onClick: () => n(!e), variant: "primary", children: "Open drawer" }),
+    e && /* @__PURE__ */ t(
       r,
       {
         ...l,
-        isOpen: t,
-        onClose: () => (m()(), n(!t)),
+        isOpen: e,
+        onClose: () => (m()(), n(!e)),
         children: "Example Drawer Content"
       }
     )
@@ -58,8 +58,8 @@ const f = i.bind({});
 f.args = {
   ...s,
   buttons: /* @__PURE__ */ a(u, { children: [
-    /* @__PURE__ */ e(o, { variant: "primary", children: "Primary Example Button" }),
-    /* @__PURE__ */ e(o, { variant: "secondary", children: "Secondary Example Button" })
+    /* @__PURE__ */ t(o, { variant: "primary", children: "Primary Example Button" }),
+    /* @__PURE__ */ t(o, { variant: "secondary", children: "Secondary Example Button" })
   ] })
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.stories.js","sources":["../../../src/components/Drawer/Drawer.stories.tsx"],"sourcesContent":["import { OverlayProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { DrawerProps } from './Drawer';\n\nimport { Drawer } from './Drawer';\n\nimport { Button } from 'components/Buttons';\nimport { ButtonGroup } from 'components/ButtonGroup';\n\nconst codeString = `\n  <Drawer isOpen={isOpen} onClose={onCloseFunction} title={title} buttons={buttons}> {children} </Drawer>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/Drawer',\n  component: Drawer,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n    closeButtonAriaValueText: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Drawer,\n    codeString: codeString,\n  },\n} as Meta<DrawerProps>;\n\nconst Template: StoryFn<DrawerProps> = (args) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <OverlayProvider>\n      <Button onClick={() => setIsOpen(!isOpen)} variant=\"primary\">\n        Open drawer\n      </Button>\n      {isOpen && (\n        <Drawer\n          {...args}\n          isOpen={isOpen}\n          onClose={() => {\n            fn()();\n            return setIsOpen(!isOpen);\n          }}\n        >\n          Example Drawer Content\n        </Drawer>\n      )}\n    </OverlayProvider>\n  );\n};\n\nconst defaultArgs: Partial<DrawerProps> = {\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n};\n\nexport const DrawerExample = Template.bind({});\nDrawerExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithButtons = Template.bind({});\nWithButtons.args = {\n  ...defaultArgs,\n  buttons: (\n    <ButtonGroup>\n      <Button variant=\"primary\">Primary Example Button</Button>\n      <Button variant=\"secondary\">Secondary Example Button</Button>\n    </ButtonGroup>\n  ),\n};\n"],"names":["codeString","Drawer_stories","Drawer","Template","args","isOpen","setIsOpen","useState","OverlayProvider","jsx","Button","fn","defaultArgs","DrawerExample","WithButtons","ButtonGroup"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA,GAKJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,0BAA0B;AAAA,MACxB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAiC,CAACC,MAAS;AAC/C,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACGC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAO,SAAS,MAAMJ,EAAU,CAACD,CAAM,GAAG,SAAQ,WAAU,UAE7D,cAAA,CAAA;AAAA,IACCA,KACC,gBAAAI;AAAA,MAACP;AAAA,MAAA;AAAA,QACE,GAAGE;AAAA,QACJ,QAAAC;AAAA,QACA,SAAS,OACPM,IAAK,GACEL,EAAU,CAACD,CAAM;AAAA,QAE3B,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GAEJ;AAEJ,GAEMO,IAAoC;AAAA,EACxC,OAAO;AAAA,EACP,0BAA0B;AAC5B,GAEaC,IAAgBV,EAAS,KAAK,CAAE,CAAA;AAC7CU,EAAc,OAAO;AAAA,EACnB,GAAGD;AACL;AAEO,MAAME,IAAcX,EAAS,KAAK,CAAE,CAAA;AAC3CW,EAAY,OAAO;AAAA,EACjB,GAAGF;AAAA,EACH,2BACGG,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAN,EAAAC,GAAA,EAAO,SAAQ,WAAU,UAAsB,0BAAA;AAAA,IAC/C,gBAAAD,EAAAC,GAAA,EAAO,SAAQ,aAAY,UAAwB,2BAAA,CAAA;AAAA,EAAA,EACtD,CAAA;AAEJ;"}
+{"version":3,"file":"Drawer.stories.js","sources":["../../../src/components/Drawer/Drawer.stories.tsx"],"sourcesContent":["import { OverlayProvider } from '@react-aria/overlays';\nimport { fn } from 'storybook/test';\nimport { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { DrawerProps } from './Drawer';\n\nimport { Drawer } from './Drawer';\n\nimport { Button } from 'components/Buttons';\nimport { ButtonGroup } from 'components/ButtonGroup';\n\nconst codeString = `\n  <Drawer isOpen={isOpen} onClose={onCloseFunction} title={title} buttons={buttons}> {children} </Drawer>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/Drawer',\n  component: Drawer,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n    closeButtonAriaValueText: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Drawer,\n    codeString: codeString,\n  },\n} as Meta<DrawerProps>;\n\nconst Template: StoryFn<DrawerProps> = (args) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <OverlayProvider>\n      <Button onClick={() => setIsOpen(!isOpen)} variant=\"primary\">\n        Open drawer\n      </Button>\n      {isOpen && (\n        <Drawer\n          {...args}\n          isOpen={isOpen}\n          onClose={() => {\n            fn()();\n            return setIsOpen(!isOpen);\n          }}\n        >\n          Example Drawer Content\n        </Drawer>\n      )}\n    </OverlayProvider>\n  );\n};\n\nconst defaultArgs: Partial<DrawerProps> = {\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n};\n\nexport const DrawerExample = Template.bind({});\nDrawerExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithButtons = Template.bind({});\nWithButtons.args = {\n  ...defaultArgs,\n  buttons: (\n    <ButtonGroup>\n      <Button variant=\"primary\">Primary Example Button</Button>\n      <Button variant=\"secondary\">Secondary Example Button</Button>\n    </ButtonGroup>\n  ),\n};\n"],"names":["codeString","Drawer_stories","Drawer","Template","args","isOpen","setIsOpen","useState","OverlayProvider","jsx","Button","fn","defaultArgs","DrawerExample","WithButtons","ButtonGroup"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA,GAKnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,0BAA0B;AAAA,MACxB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAiC,CAACC,MAAS;AAC/C,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO,SAAS,MAAMJ,EAAU,CAACD,CAAM,GAAG,SAAQ,WAAU,UAAA,cAAA,CAE7D;AAAA,IACCA,KACC,gBAAAI;AAAA,MAACP;AAAA,MAAA;AAAA,QACE,GAAGE;AAAA,QACJ,QAAAC;AAAA,QACA,SAAS,OACPM,IAAG,GACIL,EAAU,CAACD,CAAM;AAAA,QAE3B,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GAEJ;AAEJ,GAEMO,IAAoC;AAAA,EACxC,OAAO;AAAA,EACP,0BAA0B;AAC5B,GAEaC,IAAgBV,EAAS,KAAK,CAAA,CAAE;AAC7CU,EAAc,OAAO;AAAA,EACnB,GAAGD;AACL;AAEO,MAAME,IAAcX,EAAS,KAAK,CAAA,CAAE;AAC3CW,EAAY,OAAO;AAAA,EACjB,GAAGF;AAAA,EACH,2BACGG,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAN,EAACC,GAAA,EAAO,SAAQ,WAAU,UAAA,0BAAsB;AAAA,IAChD,gBAAAD,EAACC,GAAA,EAAO,SAAQ,aAAY,UAAA,2BAAA,CAAwB;AAAA,EAAA,EAAA,CACtD;AAEJ;"}

package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n  /** The main text to display. */\n  label: string;\n  /** The sub-text to display. */\n  paragraph?: string;\n  /** The colors of the wrapper and icon background are inverted. */\n  invertColors?: boolean;\n}\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({ label, paragraph, invertColors }: EmptyStateDataDisplayProps) {\n  return (\n    <div\n      className={clsx(styles['empty-state-data-display_wrapper'], {\n        [styles['empty-state-data-display_wrapper--invert-colors']]: invertColors,\n      })}\n    >\n      <div\n        className={clsx(styles['empty-state-data-display_icon-frame'], {\n          [styles['empty-state-data-display_icon-frame--invert-colors']]: invertColors,\n        })}\n      >\n        <Icon name=\"CubeTransparent\" />\n      </div>\n      <div className={styles['empty-state-data-display_text-content']}>\n        <label className={styles['empty-state-data-display_label']}>{label}</label>\n        {paragraph && <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>}\n      </div>\n    </div>\n  );\n}\n"],"names":["EmptyStateDataDisplay","label","paragraph","invertColors","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;AAgBO,SAASA,EAAsB,EAAE,OAAAC,GAAO,WAAAC,GAAW,cAAAC,KAA4C;AAElG,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,kCAAkC,GAAG;AAAA,QAC1D,CAACA,EAAO,iDAAiD,CAAC,GAAGH;AAAA,MAAA,CAC9D;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,qCAAqC,GAAG;AAAA,cAC7D,CAACA,EAAO,oDAAoD,CAAC,GAAGH;AAAA,YAAA,CACjE;AAAA,YAED,UAAA,gBAAAI,EAACC,GAAK,EAAA,MAAK,kBAAkB,CAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,QACC,gBAAAJ,EAAA,OAAA,EAAI,WAAWE,EAAO,uCAAuC,GAC5D,UAAA;AAAA,UAAA,gBAAAC,EAAC,SAAM,EAAA,WAAWD,EAAO,gCAAgC,GAAI,UAAML,GAAA;AAAA,UAClEC,KAAc,gBAAAK,EAAA,KAAA,EAAE,WAAWD,EAAO,oCAAoC,GAAI,UAAUJ,EAAA,CAAA;AAAA,QAAA,EACvF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n  /** The main text to display. */\n  label: string;\n  /** The sub-text to display. */\n  paragraph?: string;\n  /** The colors of the wrapper and icon background are inverted. */\n  invertColors?: boolean;\n}\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({ label, paragraph, invertColors }: EmptyStateDataDisplayProps) {\n  return (\n    <div\n      className={clsx(styles['empty-state-data-display_wrapper'], {\n        [styles['empty-state-data-display_wrapper--invert-colors']]: invertColors,\n      })}\n    >\n      <div\n        className={clsx(styles['empty-state-data-display_icon-frame'], {\n          [styles['empty-state-data-display_icon-frame--invert-colors']]: invertColors,\n        })}\n      >\n        <Icon name=\"CubeTransparent\" />\n      </div>\n      <div className={styles['empty-state-data-display_text-content']}>\n        <label className={styles['empty-state-data-display_label']}>{label}</label>\n        {paragraph && <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>}\n      </div>\n    </div>\n  );\n}\n"],"names":["EmptyStateDataDisplay","label","paragraph","invertColors","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;AAgBO,SAASA,EAAsB,EAAE,OAAAC,GAAO,WAAAC,GAAW,cAAAC,KAA4C;AACpG,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,kCAAkC,GAAG;AAAA,QAC1D,CAACA,EAAO,iDAAiD,CAAC,GAAGH;AAAA,MAAA,CAC9D;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,qCAAqC,GAAG;AAAA,cAC7D,CAACA,EAAO,oDAAoD,CAAC,GAAGH;AAAA,YAAA,CACjE;AAAA,YAED,UAAA,gBAAAI,EAACC,GAAA,EAAK,MAAK,kBAAA,CAAkB;AAAA,UAAA;AAAA,QAAA;AAAA,QAE/B,gBAAAJ,EAAC,OAAA,EAAI,WAAWE,EAAO,uCAAuC,GAC5D,UAAA;AAAA,UAAA,gBAAAC,EAAC,SAAA,EAAM,WAAWD,EAAO,gCAAgC,GAAI,UAAAL,GAAM;AAAA,UAClEC,KAAa,gBAAAK,EAAC,KAAA,EAAE,WAAWD,EAAO,oCAAoC,GAAI,UAAAJ,EAAA,CAAU;AAAA,QAAA,EAAA,CACvF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
 import { EmptyStateDataDisplayProps } from './EmptyStateDataDisplay';
 declare const _default: Meta<EmptyStateDataDisplayProps>;
 export default _default;
-export declare const EmptyStateDataDisplayExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, EmptyStateDataDisplayProps>;
+export declare const EmptyStateDataDisplayExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, EmptyStateDataDisplayProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateDataDisplay.stories.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { EmptyStateDataDisplayProps } from './EmptyStateDataDisplay';\n\nimport { EmptyStateDataDisplay } from './EmptyStateDataDisplay';\n\nconst codeString = '<EmptyStateDataDisplay label={label} paragraph={paragraph} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/EmptyStateDataDisplay',\n  component: EmptyStateDataDisplay,\n  parameters: {\n    inspectComponent: EmptyStateDataDisplay,\n    codeString: codeString,\n  },\n} as Meta<EmptyStateDataDisplayProps>;\n\nconst Template: StoryFn<EmptyStateDataDisplayProps> = (args) => <EmptyStateDataDisplay {...args} />;\n\nexport const EmptyStateDataDisplayExample = Template.bind({});\nEmptyStateDataDisplayExample.args = {\n  label: 'This is an example info empty state data display label',\n  paragraph: 'This is an example info empty state data display paragraph',\n};\n"],"names":["codeString","EmptyStateDataDisplay_stories","EmptyStateDataDisplay","Template","args","jsx","EmptyStateDataDisplayExample"],"mappings":";;AAKA,MAAMA,IAAa,iEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAgD,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAuB,GAAGE,GAAM,GAEpFE,IAA+BH,EAAS,KAAK,CAAE,CAAA;AAC5DG,EAA6B,OAAO;AAAA,EAClC,OAAO;AAAA,EACP,WAAW;AACb;"}
+{"version":3,"file":"EmptyStateDataDisplay.stories.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { EmptyStateDataDisplayProps } from './EmptyStateDataDisplay';\n\nimport { EmptyStateDataDisplay } from './EmptyStateDataDisplay';\n\nconst codeString = '<EmptyStateDataDisplay label={label} paragraph={paragraph} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/EmptyStateDataDisplay',\n  component: EmptyStateDataDisplay,\n  parameters: {\n    inspectComponent: EmptyStateDataDisplay,\n    codeString: codeString,\n  },\n} as Meta<EmptyStateDataDisplayProps>;\n\nconst Template: StoryFn<EmptyStateDataDisplayProps> = (args) => <EmptyStateDataDisplay {...args} />;\n\nexport const EmptyStateDataDisplayExample = Template.bind({});\nEmptyStateDataDisplayExample.args = {\n  label: 'This is an example info empty state data display label',\n  paragraph: 'This is an example info empty state data display paragraph',\n};\n"],"names":["codeString","EmptyStateDataDisplay_stories","EmptyStateDataDisplay","Template","args","jsx","EmptyStateDataDisplayExample"],"mappings":";;AAKA,MAAMA,IAAa,iEAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAgD,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAuB,GAAGE,GAAM,GAEpFE,IAA+BH,EAAS,KAAK,CAAA,CAAE;AAC5DG,EAA6B,OAAO;AAAA,EAClC,OAAO;AAAA,EACP,WAAW;AACb;"}

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

@@ -1 +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;"}
+{"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,EAAA;AAElB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,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,GAAA,EAAK,MAAMT,IAAS,eAAe,gBAAgB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChE,GACF;AAAA,IACCA,uBACE,OAAA,EAAI,IAAIG,GAAW,WAAWG,EAAO,uCAAuC,GAC3E,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,cAAa,MAAM,IAAI;AAAA,MAClC,gBAAAD,EAAC,SAAK,UAAAT,EAAA,CAAQ;AAAA,IAAA,EAAA,CAChB;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -2,4 +2,4 @@ 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>;
+export declare const ExpandableInfoPanelExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ExpandableInfoPanelProps>;

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

@@ -1 +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;"}
+{"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,4JAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA8C,CAACC,MACnD,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAA,EAAqB,GAAGE,GAAM;AAAA,oBAC9B,OAAA,EAAI,OAAO,EAAE,WAAW,OAAA,GAAU,UAAA,maAAA,CAKnC;AAAA,GACF,GAGWI,IAA6BL,EAAS,KAAK,CAAA,CAAE;AAC1DK,EAA2B,OAAO;AAAA,EAChC,cAAc;AAAA,EACd,YAAY,gBAAAD,EAAC,MAAA,EAAG,UAAA,gBAAA,CAAa;AAAA,EAC7B,eAAe;AAAA,EACf,aAAa;AAAA,EACb,SACE,gBAAAF,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAG,OAAO,EAAE,WAAW,IAAA,GAAO,UAAA,qBAAiB;AAAA,IAChD,gBAAAA,EAAC,UAAK,UAAA,wLAAA,CAGN;AAAA,sBACC,MAAA,EAAG;AAAA,sBACH,MAAA,EAAG;AAAA,IACJ,gBAAAA,EAAC,UAAK,UAAA,0EAAA,CAAuE;AAAA,EAAA,EAAA,CAC/E;AAEJ;"}

package/dist/components/FeedbackBar/FeedbackBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBar.js","sources":["../../../src/components/FeedbackBar/FeedbackBar.tsx"],"sourcesContent":["import classNames from 'clsx';\nimport { useEffect, useState, type PropsWithChildren } from 'react';\n\nimport styles from './FeedbackBar.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Repeater } from 'components/Repeater';\n\n/** Represents a component to show feedback within a Page. */\nexport const FeedbackBar = ({ children }: PropsWithChildren) => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    setIsVisible(true);\n  }, []);\n\n  const close = () => {\n    setIsVisible(false);\n  };\n\n  return (\n    <div className={classNames(styles['feedback-bar'], { [styles['feedback-bar--visible']]: isVisible })} role=\"alert\">\n      <Repeater flexDirection=\"row\">\n        <Icon className={classNames(styles['feedback-bar__icon'])} name=\"CheckCircle\" />\n        {children}\n      </Repeater>\n      <button className={classNames(styles['feedback-bar__close-button'])} type=\"button\" onClick={close}>\n        <Icon name=\"Cross\" size={24} />\n      </button>\n    </div>\n  );\n};\n"],"names":["FeedbackBar","children","isVisible","setIsVisible","useState","useEffect","close","classNames","styles","jsxs","Repeater","jsx","Icon"],"mappings":";;;;;;;;;;GASaA,IAAc,CAAC,EAAE,UAAAC,QAAkC;AAC9D,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAEhD,EAAAC,EAAU,MAAM;AACd,IAAAF,EAAa,EAAI;AAAA,EACnB,GAAG,EAAE;AAEL,QAAMG,IAAQ,MAAM;AAClB,IAAAH,EAAa,EAAK;AAAA,EACpB;AAEA,2BACG,OAAI,EAAA,WAAWI,EAAWC,EAAO,cAAc,GAAG,EAAE,CAACA,EAAO,uBAAuB,CAAC,GAAGN,GAAW,GAAG,MAAK,SACzG,UAAA;AAAA,IAAC,gBAAAO,EAAAC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAWL,EAAWC,EAAO,oBAAoB,CAAC,GAAG,MAAK,eAAc;AAAA,MAC7EP;AAAA,IAAA,GACH;AAAA,sBACC,UAAO,EAAA,WAAWM,EAAWC,EAAO,4BAA4B,CAAC,GAAG,MAAK,UAAS,SAASF,GAC1F,UAAC,gBAAAK,EAAAC,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,EAC/B,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"FeedbackBar.js","sources":["../../../src/components/FeedbackBar/FeedbackBar.tsx"],"sourcesContent":["import classNames from 'clsx';\nimport { useEffect, useState, type PropsWithChildren } from 'react';\n\nimport styles from './FeedbackBar.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Repeater } from 'components/Repeater';\n\n/** Represents a component to show feedback within a Page. */\nexport const FeedbackBar = ({ children }: PropsWithChildren) => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    setIsVisible(true);\n  }, []);\n\n  const close = () => {\n    setIsVisible(false);\n  };\n\n  return (\n    <div className={classNames(styles['feedback-bar'], { [styles['feedback-bar--visible']]: isVisible })} role=\"alert\">\n      <Repeater flexDirection=\"row\">\n        <Icon className={classNames(styles['feedback-bar__icon'])} name=\"CheckCircle\" />\n        {children}\n      </Repeater>\n      <button className={classNames(styles['feedback-bar__close-button'])} type=\"button\" onClick={close}>\n        <Icon name=\"Cross\" size={24} />\n      </button>\n    </div>\n  );\n};\n"],"names":["FeedbackBar","children","isVisible","setIsVisible","useState","useEffect","close","classNames","styles","jsxs","Repeater","jsx","Icon"],"mappings":";;;;;;;;;;GASaA,IAAc,CAAC,EAAE,UAAAC,QAAkC;AAC9D,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAEhD,EAAAC,EAAU,MAAM;AACd,IAAAF,EAAa,EAAI;AAAA,EAAA,GAChB,EAAE;AAEL,QAAMG,IAAQ,MAAM;AAClB,IAAAH,EAAa,EAAK;AAAA,EAAA;AAGpB,2BACG,OAAA,EAAI,WAAWI,EAAWC,EAAO,cAAc,GAAG,EAAE,CAACA,EAAO,uBAAuB,CAAC,GAAGN,GAAW,GAAG,MAAK,SACzG,UAAA;AAAA,IAAA,gBAAAO,EAACC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAK,WAAWL,EAAWC,EAAO,oBAAoB,CAAC,GAAG,MAAK,eAAc;AAAA,MAC7EP;AAAA,IAAA,GACH;AAAA,sBACC,UAAA,EAAO,WAAWM,EAAWC,EAAO,4BAA4B,CAAC,GAAG,MAAK,UAAS,SAASF,GAC1F,UAAA,gBAAAK,EAACC,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,EAAA,CAC/B;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -2,6 +2,6 @@ import { PropsWithChildren } from 'react';
 import { Meta } from '@storybook/react';
 declare const _default: Meta<PropsWithChildren>;
 export default _default;
-export declare const FeedbackBarExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, {
+export declare const FeedbackBarExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, {
     children?: import('react').ReactNode | undefined;
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBar.stories.js","sources":["../../../src/components/FeedbackBar/FeedbackBar.stories.tsx"],"sourcesContent":["import { useState, type PropsWithChildren } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { FeedbackBar } from 'components/FeedbackBar';\nimport { Button } from 'components/Buttons';\nimport { Repeater } from 'components/Repeater';\nimport { ButtonGroup } from 'components/ButtonGroup';\n\nconst codeString = '<FeedbackBar>{children}</FeedbackBar>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/FeedbackBar',\n  component: FeedbackBar,\n  parameters: {\n    inspectComponent: FeedbackBar,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren>;\n\nconst Template: StoryFn<PropsWithChildren> = (args) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Repeater>\n      <ButtonGroup>\n        <Button variant=\"primary\" onClick={() => setIsOpen(true)}>\n          Click to open FeedbackBar\n        </Button>\n        <Button variant=\"primary\" onClick={() => setIsOpen(false)}>\n          Click to reset animation for FeedbackBar\n        </Button>\n      </ButtonGroup>\n      {isOpen && <FeedbackBar {...args} />}\n    </Repeater>\n  );\n};\n\nexport const FeedbackBarExample = Template.bind({});\nFeedbackBarExample.args = {\n  children: 'This is example feedback',\n};\n"],"names":["codeString","FeedbackBar_stories","FeedbackBar","Template","args","isOpen","setIsOpen","useState","Repeater","jsxs","ButtonGroup","jsx","Button","FeedbackBarExample"],"mappings":";;;;;;;;AASA,MAAMA,IAAa,yCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAS;AACrD,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACGC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAO,SAAQ,WAAU,SAAS,MAAMN,EAAU,EAAI,GAAG,UAE1D,4BAAA,CAAA;AAAA,MACA,gBAAAK,EAACC,KAAO,SAAQ,WAAU,SAAS,MAAMN,EAAU,EAAK,GAAG,UAE3D,2CAAA,CAAA;AAAA,IAAA,GACF;AAAA,IACCD,KAAU,gBAAAM,EAACT,GAAa,EAAA,GAAGE,EAAM,CAAA;AAAA,EAAA,GACpC;AAEJ,GAEaS,IAAqBV,EAAS,KAAK,CAAE,CAAA;AAClDU,EAAmB,OAAO;AAAA,EACxB,UAAU;AACZ;"}
+{"version":3,"file":"FeedbackBar.stories.js","sources":["../../../src/components/FeedbackBar/FeedbackBar.stories.tsx"],"sourcesContent":["import { useState, type PropsWithChildren } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { FeedbackBar } from 'components/FeedbackBar';\nimport { Button } from 'components/Buttons';\nimport { Repeater } from 'components/Repeater';\nimport { ButtonGroup } from 'components/ButtonGroup';\n\nconst codeString = '<FeedbackBar>{children}</FeedbackBar>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/FeedbackBar',\n  component: FeedbackBar,\n  parameters: {\n    inspectComponent: FeedbackBar,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren>;\n\nconst Template: StoryFn<PropsWithChildren> = (args) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Repeater>\n      <ButtonGroup>\n        <Button variant=\"primary\" onClick={() => setIsOpen(true)}>\n          Click to open FeedbackBar\n        </Button>\n        <Button variant=\"primary\" onClick={() => setIsOpen(false)}>\n          Click to reset animation for FeedbackBar\n        </Button>\n      </ButtonGroup>\n      {isOpen && <FeedbackBar {...args} />}\n    </Repeater>\n  );\n};\n\nexport const FeedbackBarExample = Template.bind({});\nFeedbackBarExample.args = {\n  children: 'This is example feedback',\n};\n"],"names":["codeString","FeedbackBar_stories","FeedbackBar","Template","args","isOpen","setIsOpen","useState","Repeater","jsxs","ButtonGroup","jsx","Button","FeedbackBarExample"],"mappings":";;;;;;;;AASA,MAAMA,IAAa,yCAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAS;AACrD,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAO,SAAQ,WAAU,SAAS,MAAMN,EAAU,EAAI,GAAG,UAAA,4BAAA,CAE1D;AAAA,MACA,gBAAAK,EAACC,KAAO,SAAQ,WAAU,SAAS,MAAMN,EAAU,EAAK,GAAG,UAAA,2CAAA,CAE3D;AAAA,IAAA,GACF;AAAA,IACCD,KAAU,gBAAAM,EAACT,GAAA,EAAa,GAAGE,EAAA,CAAM;AAAA,EAAA,GACpC;AAEJ,GAEaS,IAAqBV,EAAS,KAAK,CAAA,CAAE;AAClDU,EAAmB,OAAO;AAAA,EACxB,UAAU;AACZ;"}

package/dist/components/FeedbackBar/FeedbackBar.test.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../index-BqLi4tOb.js";
-import { r as s, s as e, f as r } from "../../react.esm-CsMDid07.js";
+import "../../index-DV47hRzi.js";
+import { r as s, s as e, f as r } from "../../react.esm-CFMwGdo5.js";
 import { FeedbackBar as c } from "./FeedbackBar.js";
 describe("FeedbackBar", () => {
   it("should render with children text", () => {

package/dist/components/FeedbackBar/FeedbackBar.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBar.test.js","sources":["../../../src/components/FeedbackBar/FeedbackBar.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { fireEvent, render, screen } from '@testing-library/react';\n\nimport { FeedbackBar } from './FeedbackBar';\n\ndescribe('FeedbackBar', () => {\n  it('should render with children text', () => {\n    render(<FeedbackBar>My feedback message</FeedbackBar>);\n    expect(screen.getByText('My feedback message')).toBeInTheDocument();\n  });\n\n  it('should close when the close button is clicked', () => {\n    render(<FeedbackBar>My closed feedback message</FeedbackBar>);\n\n    expect(screen.getByRole('alert')).toHaveClass('feedback-bar--visible');\n\n    const closeButton = screen.getByRole('button');\n    fireEvent.click(closeButton);\n\n    expect(screen.getByRole('alert')).not.toHaveClass('feedback-bar--visible');\n  });\n});\n"],"names":["render","jsx","FeedbackBar","screen","closeButton","fireEvent"],"mappings":";;;;AAKA,SAAS,eAAe,MAAM;AAC5B,KAAG,oCAAoC,MAAM;AACpC,IAAAA,EAAA,gBAAAC,EAACC,GAAY,EAAA,UAAA,sBAAmB,CAAA,CAAc,GACrD,OAAOC,EAAO,UAAU,qBAAqB,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACnE,GAED,GAAG,iDAAiD,MAAM;AACjD,IAAAH,EAAA,gBAAAC,EAACC,GAAY,EAAA,UAAA,6BAA0B,CAAA,CAAc,GAE5D,OAAOC,EAAO,UAAU,OAAO,CAAC,EAAE,YAAY,uBAAuB;AAE/D,UAAAC,IAAcD,EAAO,UAAU,QAAQ;AAC7C,IAAAE,EAAU,MAAMD,CAAW,GAE3B,OAAOD,EAAO,UAAU,OAAO,CAAC,EAAE,IAAI,YAAY,uBAAuB;AAAA,EAAA,CAC1E;AACH,CAAC;"}
+{"version":3,"file":"FeedbackBar.test.js","sources":["../../../src/components/FeedbackBar/FeedbackBar.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { fireEvent, render, screen } from '@testing-library/react';\n\nimport { FeedbackBar } from './FeedbackBar';\n\ndescribe('FeedbackBar', () => {\n  it('should render with children text', () => {\n    render(<FeedbackBar>My feedback message</FeedbackBar>);\n    expect(screen.getByText('My feedback message')).toBeInTheDocument();\n  });\n\n  it('should close when the close button is clicked', () => {\n    render(<FeedbackBar>My closed feedback message</FeedbackBar>);\n\n    expect(screen.getByRole('alert')).toHaveClass('feedback-bar--visible');\n\n    const closeButton = screen.getByRole('button');\n    fireEvent.click(closeButton);\n\n    expect(screen.getByRole('alert')).not.toHaveClass('feedback-bar--visible');\n  });\n});\n"],"names":["render","jsx","FeedbackBar","screen","closeButton","fireEvent"],"mappings":";;;;AAKA,SAAS,eAAe,MAAM;AAC5B,KAAG,oCAAoC,MAAM;AAC3C,IAAAA,EAAO,gBAAAC,EAACC,GAAA,EAAY,UAAA,sBAAA,CAAmB,CAAc,GACrD,OAAOC,EAAO,UAAU,qBAAqB,CAAC,EAAE,kBAAA;AAAA,EAAkB,CACnE,GAED,GAAG,iDAAiD,MAAM;AACxD,IAAAH,EAAO,gBAAAC,EAACC,GAAA,EAAY,UAAA,6BAAA,CAA0B,CAAc,GAE5D,OAAOC,EAAO,UAAU,OAAO,CAAC,EAAE,YAAY,uBAAuB;AAErE,UAAMC,IAAcD,EAAO,UAAU,QAAQ;AAC7C,IAAAE,EAAU,MAAMD,CAAW,GAE3B,OAAOD,EAAO,UAAU,OAAO,CAAC,EAAE,IAAI,YAAY,uBAAuB;AAAA,EAAA,CAC1E;AACH,CAAC;"}

package/dist/components/FeedbackBox/FeedbackBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBox.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactElement } from 'react';\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './FeedbackBox.module.css';\n\nimport { Icon } from 'components/Icon';\n\ntype FeedbackLevel = 'success' | 'warning' | 'error';\n\nconst LEVEL_ICON_MAP: Record<FeedbackLevel, IconProps['name']> = {\n  success: 'CheckCircle',\n  warning: 'ExclamationCircle',\n  error: 'ExclamationTriangleMini',\n};\n\nexport interface FeedbackBoxProps {\n  /** The id of the element. */\n  id?: string;\n  /** The feedback level, indicates what icon is used. */\n  level: FeedbackLevel;\n  /** The feedback value. */\n  feedback: string | ReactElement;\n}\n\n/** Represents a component to show feedback. */\nexport const FeedbackBox = ({ id, level, feedback }: FeedbackBoxProps) => (\n  <div\n    className={clsx(styles['feedback-box'], {\n      [styles['feedback-box__success']]: level === 'success',\n      [styles['feedback-box__warning']]: level === 'warning',\n      [styles['feedback-box__error']]: level === 'error',\n    })}\n    id={id}\n  >\n    <Icon name={LEVEL_ICON_MAP[level]} size={16} />\n    {feedback}\n  </div>\n);\n"],"names":["LEVEL_ICON_MAP","FeedbackBox","id","level","feedback","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAWMA,IAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAYaC,IAAc,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,UAAAC,EACvC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,qBAAqB,CAAC,GAAGJ,MAAU;AAAA,IAAA,CAC5C;AAAA,IACD,IAAAD;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAM,EAACC,KAAK,MAAMT,EAAeG,CAAK,GAAG,MAAM,IAAI;AAAA,MAC5CC;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"FeedbackBox.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactElement } from 'react';\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './FeedbackBox.module.css';\n\nimport { Icon } from 'components/Icon';\n\ntype FeedbackLevel = 'success' | 'warning' | 'error';\n\nconst LEVEL_ICON_MAP: Record<FeedbackLevel, IconProps['name']> = {\n  success: 'CheckCircle',\n  warning: 'ExclamationCircle',\n  error: 'ExclamationTriangleMini',\n};\n\nexport interface FeedbackBoxProps {\n  /** The id of the element. */\n  id?: string;\n  /** The feedback level, indicates what icon is used. */\n  level: FeedbackLevel;\n  /** The feedback value. */\n  feedback: string | ReactElement;\n}\n\n/** Represents a component to show feedback. */\nexport const FeedbackBox = ({ id, level, feedback }: FeedbackBoxProps) => (\n  <div\n    className={clsx(styles['feedback-box'], {\n      [styles['feedback-box__success']]: level === 'success',\n      [styles['feedback-box__warning']]: level === 'warning',\n      [styles['feedback-box__error']]: level === 'error',\n    })}\n    id={id}\n  >\n    <Icon name={LEVEL_ICON_MAP[level]} size={16} />\n    {feedback}\n  </div>\n);\n"],"names":["LEVEL_ICON_MAP","FeedbackBox","id","level","feedback","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAWMA,IAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAYaC,IAAc,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,UAAAC,QACvC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,qBAAqB,CAAC,GAAGJ,MAAU;AAAA,IAAA,CAC5C;AAAA,IACD,IAAAD;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAM,EAACC,KAAK,MAAMT,EAAeG,CAAK,GAAG,MAAM,IAAI;AAAA,MAC5CC;AAAA,IAAA;AAAA,EAAA;AACH;"}

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

@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
 import { FeedbackBoxProps } from './FeedbackBox';
 declare const _default: Meta<FeedbackBoxProps>;
 export default _default;
-export declare const FeedbackBoxExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FeedbackBoxProps>;
-export declare const WithElementFeedback: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FeedbackBoxProps>;
+export declare const FeedbackBoxExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FeedbackBoxProps>;
+export declare const WithElementFeedback: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FeedbackBoxProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBox.stories.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FeedbackBoxProps } from './FeedbackBox';\n\nimport { FeedbackBox } from './FeedbackBox';\n\nimport { Container } from 'storyComponents/Container';\nimport { Repeater } from 'components/Repeater';\n\nconst codeString = '<FeedbackBox id={id} level={level} feedback={feedback} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/FeedbackBox',\n  component: FeedbackBox,\n  parameters: {\n    inspectComponent: FeedbackBox,\n    codeString,\n  },\n} as Meta<FeedbackBoxProps>;\n\nconst Template: StoryFn<FeedbackBoxProps> = (args) => (\n  <Container>\n    <FeedbackBox {...args} />\n  </Container>\n);\n\nexport const FeedbackBoxExample = Template.bind({});\nFeedbackBoxExample.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: 'Example FeedbackBox text',\n};\n\nexport const WithElementFeedback = Template.bind({});\nWithElementFeedback.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: (\n    <Repeater>\n      <h2>FeedbackElement</h2>\n      <ul>\n        <li>Feedback 1</li>\n        <li>Feedback 2</li>\n        <li>Feedback 3</li>\n      </ul>\n    </Repeater>\n  ),\n};\n"],"names":["codeString","FeedbackBox_stories","FeedbackBox","Template","args","jsx","Container","FeedbackBoxExample","WithElementFeedback","Repeater"],"mappings":";;;;AAQA,MAAMA,IAAa,6DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAA,CAAM,EACzB,CAAA,GAGWG,IAAqBJ,EAAS,KAAK,CAAE,CAAA;AAClDI,EAAmB,OAAO;AAAA,EACxB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,UAAU;AACZ;AAEO,MAAMC,IAAsBL,EAAS,KAAK,CAAE,CAAA;AACnDK,EAAoB,OAAO;AAAA,EACzB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,4BACGC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAJ,EAAC,QAAG,UAAe,kBAAA,CAAA;AAAA,sBAClB,MACC,EAAA,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAG,UAAU,aAAA,CAAA;AAAA,MACd,gBAAAA,EAAC,QAAG,UAAU,aAAA,CAAA;AAAA,MACd,gBAAAA,EAAC,QAAG,UAAU,aAAA,CAAA;AAAA,IAAA,EAChB,CAAA;AAAA,EAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"FeedbackBox.stories.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FeedbackBoxProps } from './FeedbackBox';\n\nimport { FeedbackBox } from './FeedbackBox';\n\nimport { Container } from 'storyComponents/Container';\nimport { Repeater } from 'components/Repeater';\n\nconst codeString = '<FeedbackBox id={id} level={level} feedback={feedback} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/FeedbackBox',\n  component: FeedbackBox,\n  parameters: {\n    inspectComponent: FeedbackBox,\n    codeString,\n  },\n} as Meta<FeedbackBoxProps>;\n\nconst Template: StoryFn<FeedbackBoxProps> = (args) => (\n  <Container>\n    <FeedbackBox {...args} />\n  </Container>\n);\n\nexport const FeedbackBoxExample = Template.bind({});\nFeedbackBoxExample.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: 'Example FeedbackBox text',\n};\n\nexport const WithElementFeedback = Template.bind({});\nWithElementFeedback.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: (\n    <Repeater>\n      <h2>FeedbackElement</h2>\n      <ul>\n        <li>Feedback 1</li>\n        <li>Feedback 2</li>\n        <li>Feedback 3</li>\n      </ul>\n    </Repeater>\n  ),\n};\n"],"names":["codeString","FeedbackBox_stories","FeedbackBox","Template","args","jsx","Container","FeedbackBoxExample","WithElementFeedback","Repeater"],"mappings":";;;;AAQA,MAAMA,IAAa,6DAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,KACC,UAAA,gBAAAD,EAACH,GAAA,EAAa,GAAGE,EAAA,CAAM,EAAA,CACzB,GAGWG,IAAqBJ,EAAS,KAAK,CAAA,CAAE;AAClDI,EAAmB,OAAO;AAAA,EACxB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,UAAU;AACZ;AAEO,MAAMC,IAAsBL,EAAS,KAAK,CAAA,CAAE;AACnDK,EAAoB,OAAO;AAAA,EACzB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,4BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAJ,EAAC,QAAG,UAAA,kBAAA,CAAe;AAAA,sBAClB,MAAA,EACC,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAG,UAAA,aAAA,CAAU;AAAA,MACd,gBAAAA,EAAC,QAAG,UAAA,aAAA,CAAU;AAAA,MACd,gBAAAA,EAAC,QAAG,UAAA,aAAA,CAAU;AAAA,IAAA,EAAA,CAChB;AAAA,EAAA,EAAA,CACF;AAEJ;"}

package/dist/components/FieldHint/FieldHint.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHint.js","sources":["../../../src/components/FieldHint/FieldHint.tsx"],"sourcesContent":["import styles from './FieldHint.module.css';\n\nimport { Spinner } from 'components/Spinner/Spinner';\n\nexport interface FieldHintProps {\n  /** The value to display. */\n  value?: string;\n  /** The aria-valuetext value of the spinner component. */\n  spinnerAriaValueText: string;\n  /** true if the field hint is loading; otherwise, false. The default is false. */\n  loading?: boolean;\n}\n\n/** Represents a component to show a hint for an input element. */\nexport function FieldHint({ value, spinnerAriaValueText, loading }: FieldHintProps) {\n  return (\n    <span className={styles['field-hint']}>\n      {value && <>{value}</>}\n      {!value && loading && <Spinner ariaValueText={spinnerAriaValueText} />}\n    </span>\n  );\n}\n"],"names":["FieldHint","value","spinnerAriaValueText","loading","jsxs","styles","jsx","Spinner"],"mappings":";;;;;AAcO,SAASA,EAAU,EAAE,OAAAC,GAAO,sBAAAC,GAAsB,SAAAC,KAA2B;AAClF,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,YAAY,GACjC,UAAA;AAAA,IAAAJ,4BAAY,UAAMA,EAAA,CAAA;AAAA,IAClB,CAACA,KAASE,KAAY,gBAAAG,EAAAC,GAAA,EAAQ,eAAeL,EAAsB,CAAA;AAAA,EAAA,GACtE;AAEJ;"}
+{"version":3,"file":"FieldHint.js","sources":["../../../src/components/FieldHint/FieldHint.tsx"],"sourcesContent":["import styles from './FieldHint.module.css';\n\nimport { Spinner } from 'components/Spinner/Spinner';\n\nexport interface FieldHintProps {\n  /** The value to display. */\n  value?: string;\n  /** The aria-valuetext value of the spinner component. */\n  spinnerAriaValueText: string;\n  /** true if the field hint is loading; otherwise, false. The default is false. */\n  loading?: boolean;\n}\n\n/** Represents a component to show a hint for an input element. */\nexport function FieldHint({ value, spinnerAriaValueText, loading }: FieldHintProps) {\n  return (\n    <span className={styles['field-hint']}>\n      {value && <>{value}</>}\n      {!value && loading && <Spinner ariaValueText={spinnerAriaValueText} />}\n    </span>\n  );\n}\n"],"names":["FieldHint","value","spinnerAriaValueText","loading","jsxs","styles","jsx","Spinner"],"mappings":";;;;;AAcO,SAASA,EAAU,EAAE,OAAAC,GAAO,sBAAAC,GAAsB,SAAAC,KAA2B;AAClF,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAO,YAAY,GACjC,UAAA;AAAA,IAAAJ,4BAAY,UAAAA,EAAA,CAAM;AAAA,IAClB,CAACA,KAASE,KAAW,gBAAAG,EAACC,GAAA,EAAQ,eAAeL,EAAA,CAAsB;AAAA,EAAA,GACtE;AAEJ;"}

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

@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
 import { FieldHintProps } from './FieldHint';
 declare const _default: Meta<FieldHintProps>;
 export default _default;
-export declare const FieldHintExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FieldHintProps>;
-export declare const LoadingFieldHint: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FieldHintProps>;
+export declare const FieldHintExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FieldHintProps>;
+export declare const LoadingFieldHint: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FieldHintProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"FieldHint.stories.js","sources":["../../../src/components/FieldHint/FieldHint.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FieldHintProps } from './FieldHint';\n\nimport { FieldHint } from './FieldHint';\n\nconst codeString = '<FieldHint value={value} loading={loading} spinnerAriaValueText={spinnerAriaValueText} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FieldHint',\n  component: FieldHint,\n  argTypes: {\n    value: {\n      control: 'text',\n    },\n    spinnerAriaValueText: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: FieldHint,\n    codeString: codeString,\n  },\n} as Meta<FieldHintProps>;\n\nconst Template: StoryFn<FieldHintProps> = (args) => <FieldHint {...args} />;\n\nconst defaultArgs: Partial<FieldHintProps> = {\n  spinnerAriaValueText: 'FieldHint Loading',\n};\n\nexport const FieldHintExample = Template.bind({});\nFieldHintExample.args = {\n  value: 'This is a FieldHint',\n  loading: false,\n  ...defaultArgs,\n};\n\nexport const LoadingFieldHint = Template.bind({});\nLoadingFieldHint.args = {\n  value: '',\n  loading: true,\n  ...defaultArgs,\n};\n"],"names":["codeString","FieldHint_stories","FieldHint","Template","args","jsx","defaultArgs","FieldHintExample","LoadingFieldHint"],"mappings":";;AAKA,MAAMA,IAAa,6FAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAW,GAAGE,GAAM,GAEnEE,IAAuC;AAAA,EAC3C,sBAAsB;AACxB,GAEaC,IAAmBJ,EAAS,KAAK,CAAE,CAAA;AAChDI,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAGD;AACL;AAEO,MAAME,IAAmBL,EAAS,KAAK,CAAE,CAAA;AAChDK,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAGF;AACL;"}
+{"version":3,"file":"FieldHint.stories.js","sources":["../../../src/components/FieldHint/FieldHint.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FieldHintProps } from './FieldHint';\n\nimport { FieldHint } from './FieldHint';\n\nconst codeString = '<FieldHint value={value} loading={loading} spinnerAriaValueText={spinnerAriaValueText} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FieldHint',\n  component: FieldHint,\n  argTypes: {\n    value: {\n      control: 'text',\n    },\n    spinnerAriaValueText: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: FieldHint,\n    codeString: codeString,\n  },\n} as Meta<FieldHintProps>;\n\nconst Template: StoryFn<FieldHintProps> = (args) => <FieldHint {...args} />;\n\nconst defaultArgs: Partial<FieldHintProps> = {\n  spinnerAriaValueText: 'FieldHint Loading',\n};\n\nexport const FieldHintExample = Template.bind({});\nFieldHintExample.args = {\n  value: 'This is a FieldHint',\n  loading: false,\n  ...defaultArgs,\n};\n\nexport const LoadingFieldHint = Template.bind({});\nLoadingFieldHint.args = {\n  value: '',\n  loading: true,\n  ...defaultArgs,\n};\n"],"names":["codeString","FieldHint_stories","FieldHint","Template","args","jsx","defaultArgs","FieldHintExample","LoadingFieldHint"],"mappings":";;AAKA,MAAMA,IAAa,6FAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,sBAAsB;AAAA,MACpB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAW,GAAGE,GAAM,GAEnEE,IAAuC;AAAA,EAC3C,sBAAsB;AACxB,GAEaC,IAAmBJ,EAAS,KAAK,CAAA,CAAE;AAChDI,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAGD;AACL;AAEO,MAAME,IAAmBL,EAAS,KAAK,CAAA,CAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAGF;AACL;"}

package/dist/components/Fieldset/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Fieldset.module.css';\n\nexport interface FieldsetProps {\n  /** The description to render. */\n  description?: ReactNode;\n  /** The id of the description element. Used together with the description property. */\n  descriptionId?: string;\n  /** true if the form fields should render inline; otherwise, false. The default is false. */\n  inline?: boolean;\n  /** The legend to render. */\n  legend: string;\n}\n\n/** Represents a component to show a collection of form field elements. */\nexport const Fieldset = ({\n  inline,\n  legend,\n  description,\n  descriptionId,\n  children,\n}: PropsWithChildren<FieldsetProps>) => (\n  <fieldset\n    className={clsx(styles['fieldset'], {\n      [styles['fieldset--inline']]: inline,\n    })}\n  >\n    <div>\n      <legend className={styles['fieldset__legend']}>{legend}</legend>\n      {description && (\n        <p className={styles['fieldset__description']} id={descriptionId}>\n          {description}\n        </p>\n      )}\n    </div>\n    {children}\n  </fieldset>\n);\n"],"names":["Fieldset","inline","legend","description","descriptionId","children","jsxs","clsx","styles","jsx"],"mappings":";;;;;;;GAkBaA,IAAW,CAAC;AAAA,EACvB,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,UAAa;AAAA,MAClC,CAACA,EAAO,kBAAkB,CAAC,GAAGP;AAAA,IAAA,CAC/B;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAK,EAAC,OACC,EAAA,UAAA;AAAA,QAAA,gBAAAG,EAAC,UAAO,EAAA,WAAWD,EAAO,kBAAsB,UAAON,GAAA;AAAA,QACtDC,uBACE,KAAE,EAAA,WAAWK,EAAO,uBAA0B,IAAIJ,GAChD,UACHD,EAAA,CAAA;AAAA,MAAA,GAEJ;AAAA,MACCE;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Fieldset.module.css';\n\nexport interface FieldsetProps {\n  /** The description to render. */\n  description?: ReactNode;\n  /** The id of the description element. Used together with the description property. */\n  descriptionId?: string;\n  /** true if the form fields should render inline; otherwise, false. The default is false. */\n  inline?: boolean;\n  /** The legend to render. */\n  legend: string;\n}\n\n/** Represents a component to show a collection of form field elements. */\nexport const Fieldset = ({\n  inline,\n  legend,\n  description,\n  descriptionId,\n  children,\n}: PropsWithChildren<FieldsetProps>) => (\n  <fieldset\n    className={clsx(styles['fieldset'], {\n      [styles['fieldset--inline']]: inline,\n    })}\n  >\n    <div>\n      <legend className={styles['fieldset__legend']}>{legend}</legend>\n      {description && (\n        <p className={styles['fieldset__description']} id={descriptionId}>\n          {description}\n        </p>\n      )}\n    </div>\n    {children}\n  </fieldset>\n);\n"],"names":["Fieldset","inline","legend","description","descriptionId","children","jsxs","clsx","styles","jsx"],"mappings":";;;;;;;GAkBaA,IAAW,CAAC;AAAA,EACvB,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,UAAa;AAAA,MAClC,CAACA,EAAO,kBAAkB,CAAC,GAAGP;AAAA,IAAA,CAC/B;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAA,EACC,UAAA;AAAA,QAAA,gBAAAG,EAAC,UAAA,EAAO,WAAWD,EAAO,kBAAsB,UAAAN,GAAO;AAAA,QACtDC,uBACE,KAAA,EAAE,WAAWK,EAAO,uBAA0B,IAAIJ,GAChD,UAAAD,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MACCE;AAAA,IAAA;AAAA,EAAA;AACH;"}

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

@@ -3,5 +3,5 @@ import { PropsWithChildren } from 'react';
 import { FieldsetProps } from './Fieldset';
 declare const _default: Meta<PropsWithChildren<FieldsetProps>>;
 export default _default;
-export declare const FieldsetExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<FieldsetProps>>;
-export declare const WithDescriptionExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<FieldsetProps>>;
+export declare const FieldsetExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<FieldsetProps>>;
+export declare const WithDescriptionExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<FieldsetProps>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.stories.js","sources":["../../../src/components/Fieldset/Fieldset.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FieldsetProps } from './Fieldset';\n\nimport { Fieldset } from './Fieldset';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\nimport { FormField } from 'components/FormField';\n\nconst codeString = '<Fieldset legend={legend} description={description}>{children}</Fieldset>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Fieldset',\n  component: Fieldset,\n  argTypes: {\n    descriptionId: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Fieldset,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FieldsetProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FieldsetProps>> = (args) => (\n  <Container size=\"large\">\n    <Fieldset {...args}>\n      <FormField>\n        <Label htmlFor=\"d6aa53fd\">Example label 1</Label>\n        <InputField id=\"d6aa53fd\" />\n      </FormField>\n      <FormField>\n        <Label htmlFor=\"4e7a2f22\">Example label 2</Label>\n        <InputField id=\"4e7a2f22\" />\n      </FormField>\n    </Fieldset>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FieldsetProps>> = {\n  legend: 'Fieldset example',\n  inline: false,\n};\n\nexport const FieldsetExample = Template.bind({});\nFieldsetExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDescriptionExample = Template.bind({});\nWithDescriptionExample.args = {\n  ...defaultArgs,\n  description: 'A Fieldset groups several controls as well as labels',\n};\n"],"names":["codeString","Fieldset_stories","Fieldset","Template","args","jsx","Container","jsxs","FormField","Label","InputField","defaultArgs","FieldsetExample","WithDescriptionExample"],"mappings":";;;;;;AAWA,MAAMA,IAAa,6EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsD,CAACC,MAC1D,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAC,EAACL,GAAU,EAAA,GAAGE,GACZ,UAAA;AAAA,EAAA,gBAAAG,EAACC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAJ,EAACK,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,oBACCF,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAJ,EAACK,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,EAC5B,CAAA;AAAA,EAAA,CACF,EACF,CAAA,GAGIC,IAAyD;AAAA,EAC7D,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAAkBT,EAAS,KAAK,CAAE,CAAA;AAC/CS,EAAgB,OAAO;AAAA,EACrB,GAAGD;AACL;AAEO,MAAME,IAAyBV,EAAS,KAAK,CAAE,CAAA;AACtDU,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,aAAa;AACf;"}
+{"version":3,"file":"Fieldset.stories.js","sources":["../../../src/components/Fieldset/Fieldset.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FieldsetProps } from './Fieldset';\n\nimport { Fieldset } from './Fieldset';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\nimport { FormField } from 'components/FormField';\n\nconst codeString = '<Fieldset legend={legend} description={description}>{children}</Fieldset>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Fieldset',\n  component: Fieldset,\n  argTypes: {\n    descriptionId: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Fieldset,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FieldsetProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FieldsetProps>> = (args) => (\n  <Container size=\"large\">\n    <Fieldset {...args}>\n      <FormField>\n        <Label htmlFor=\"d6aa53fd\">Example label 1</Label>\n        <InputField id=\"d6aa53fd\" />\n      </FormField>\n      <FormField>\n        <Label htmlFor=\"4e7a2f22\">Example label 2</Label>\n        <InputField id=\"4e7a2f22\" />\n      </FormField>\n    </Fieldset>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FieldsetProps>> = {\n  legend: 'Fieldset example',\n  inline: false,\n};\n\nexport const FieldsetExample = Template.bind({});\nFieldsetExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDescriptionExample = Template.bind({});\nWithDescriptionExample.args = {\n  ...defaultArgs,\n  description: 'A Fieldset groups several controls as well as labels',\n};\n"],"names":["codeString","Fieldset_stories","Fieldset","Template","args","jsx","Container","jsxs","FormField","Label","InputField","defaultArgs","FieldsetExample","WithDescriptionExample"],"mappings":";;;;;;AAWA,MAAMA,IAAa,6EAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsD,CAACC,MAC3D,gBAAAC,EAACC,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAC,EAACL,GAAA,EAAU,GAAGE,GACZ,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAM,SAAQ,YAAW,UAAA,mBAAe;AAAA,IACzC,gBAAAJ,EAACK,GAAA,EAAW,IAAG,WAAA,CAAW;AAAA,EAAA,GAC5B;AAAA,oBACCF,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAM,SAAQ,YAAW,UAAA,mBAAe;AAAA,IACzC,gBAAAJ,EAACK,GAAA,EAAW,IAAG,WAAA,CAAW;AAAA,EAAA,EAAA,CAC5B;AAAA,EAAA,CACF,EAAA,CACF,GAGIC,IAAyD;AAAA,EAC7D,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAAkBT,EAAS,KAAK,CAAA,CAAE;AAC/CS,EAAgB,OAAO;AAAA,EACrB,GAAGD;AACL;AAEO,MAAME,IAAyBV,EAAS,KAAK,CAAA,CAAE;AACtDU,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,aAAa;AACf;"}

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

@@ -3,4 +3,4 @@ import { PropsWithChildren } from 'react';
 import { FormFieldProps } from './FormField';
 declare const _default: Meta<PropsWithChildren<FormFieldProps>>;
 export default _default;
-export declare const FormFieldExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<FormFieldProps>>;
+export declare const FormFieldExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<FormFieldProps>>;

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.stories.js","sources":["../../../src/components/FormField/FormField.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FormFieldProps } from './FormField';\n\nimport { FormField } from './FormField';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FormField>{children}</FormField>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FormField',\n  component: FormField,\n  argTypes: {\n    outerSpace: {\n      control: 'boolean',\n    },\n    inline: {\n      control: 'boolean',\n    },\n    alignStart: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    inspectComponent: FormField,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FormFieldProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FormFieldProps>> = (args) => (\n  <Container>\n    <FormField {...args}>\n      <Label htmlFor=\"d6aa53fd\">Example label</Label>\n      <InputField id=\"d6aa53fd\" />\n    </FormField>\n    <FormField {...args}>\n      <Label htmlFor=\"4e7a2f22\">Example very very very long label to display input alingment compared to label</Label>\n      <InputField id=\"4e7a2f22\" />\n    </FormField>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FormFieldProps>> = {\n  outerSpace: false,\n  inline: false,\n  alignStart: false,\n};\n\nexport const FormFieldExample = Template.bind({});\nFormFieldExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","FormField_stories","FormField","Template","args","jsxs","Container","jsx","Label","InputField","defaultArgs","FormFieldExample"],"mappings":";;;;;AAUA,MAAMA,IAAa,qCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuD,CAACC,MAC5D,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAa,iBAAA;AAAA,IACvC,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACA,gBAAAJ,EAACH,GAAW,EAAA,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAA8E,kFAAA;AAAA,IACxG,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,EAC5B,CAAA;AAAA,GACF,GAGIC,IAA0D;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AACd,GAEaC,IAAmBR,EAAS,KAAK,CAAE,CAAA;AAChDQ,EAAiB,OAAO;AAAA,EACtB,GAAGD;AACL;"}
+{"version":3,"file":"FormField.stories.js","sources":["../../../src/components/FormField/FormField.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FormFieldProps } from './FormField';\n\nimport { FormField } from './FormField';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FormField>{children}</FormField>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FormField',\n  component: FormField,\n  argTypes: {\n    outerSpace: {\n      control: 'boolean',\n    },\n    inline: {\n      control: 'boolean',\n    },\n    alignStart: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    inspectComponent: FormField,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FormFieldProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FormFieldProps>> = (args) => (\n  <Container>\n    <FormField {...args}>\n      <Label htmlFor=\"d6aa53fd\">Example label</Label>\n      <InputField id=\"d6aa53fd\" />\n    </FormField>\n    <FormField {...args}>\n      <Label htmlFor=\"4e7a2f22\">Example very very very long label to display input alingment compared to label</Label>\n      <InputField id=\"4e7a2f22\" />\n    </FormField>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FormFieldProps>> = {\n  outerSpace: false,\n  inline: false,\n  alignStart: false,\n};\n\nexport const FormFieldExample = Template.bind({});\nFormFieldExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","FormField_stories","FormField","Template","args","jsxs","Container","jsx","Label","InputField","defaultArgs","FormFieldExample"],"mappings":";;;;;AAUA,MAAMA,IAAa,qCAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuD,CAACC,MAC5D,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAD,EAACH,GAAA,EAAW,GAAGE,GACb,UAAA;AAAA,IAAA,gBAAAG,EAACC,GAAA,EAAM,SAAQ,YAAW,UAAA,iBAAa;AAAA,IACvC,gBAAAD,EAACE,GAAA,EAAW,IAAG,WAAA,CAAW;AAAA,EAAA,GAC5B;AAAA,EACA,gBAAAJ,EAACH,GAAA,EAAW,GAAGE,GACb,UAAA;AAAA,IAAA,gBAAAG,EAACC,GAAA,EAAM,SAAQ,YAAW,UAAA,kFAA8E;AAAA,IACxG,gBAAAD,EAACE,GAAA,EAAW,IAAG,WAAA,CAAW;AAAA,EAAA,EAAA,CAC5B;AAAA,GACF,GAGIC,IAA0D;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AACd,GAEaC,IAAmBR,EAAS,KAAK,CAAA,CAAE;AAChDQ,EAAiB,OAAO;AAAA,EACtB,GAAGD;AACL;"}

package/dist/components/FormInput/FormInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n  /** The id of the input element. */\n  id: string;\n  /** label text if empthy the label is not renderd */\n  label: string;\n  /** label position `top` or `left`. The default is `top`. */\n  labelPosition?: 'top' | 'left';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email' | 'number';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange?: (value: string) => void;\n  /** Determines if the container wrapper is rendered. */\n  noContainer?: boolean;\n  /** Optional custom input that will replace the default input */\n  customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n  id,\n  label,\n  labelPosition = 'top',\n  type = 'text',\n  required = false,\n  notValidatedText = '',\n  onChange,\n  noContainer = false,\n  customInput,\n}: FormInputProps) => {\n  const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n    ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (typeof onChange === 'function') {\n      onChange(event.target.value);\n    }\n  };\n\n  const componentContent = (\n    <>\n      {label && (\n        <Label htmlFor={id} required={required} alignRight>\n          {label}\n        </Label>\n      )}\n\n      <div className={styles['form-input__input-feedback-container']}>\n        {customInput ? (\n          customInput\n        ) : (\n          <div className={styles['form-input__input-container']}>\n            <input\n              id={id}\n              type={type}\n              {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n              onChange={handleChange}\n              className={styles['form-input__input']}\n            />\n          </div>\n        )}\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </>\n  );\n\n  return noContainer ? (\n    componentContent\n  ) : (\n    <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n      {componentContent}\n    </div>\n  );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOJ,KAAa,cACbA,EAAAI,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEME,IAED,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAb,uBACEc,GAAM,EAAA,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UACHH,EAAA,CAAA;AAAA,IAGD,gBAAAY,EAAA,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGE,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAkB,CAAA;AAAA,IAAA,EACrF,CAAA;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEC,gBAAAK,EAAA,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UACHU,GAAA;AAEJ;"}
+{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n  /** The id of the input element. */\n  id: string;\n  /** label text if empthy the label is not renderd */\n  label: string;\n  /** label position `top` or `left`. The default is `top`. */\n  labelPosition?: 'top' | 'left';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email' | 'number';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange?: (value: string) => void;\n  /** Determines if the container wrapper is rendered. */\n  noContainer?: boolean;\n  /** Optional custom input that will replace the default input */\n  customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n  id,\n  label,\n  labelPosition = 'top',\n  type = 'text',\n  required = false,\n  notValidatedText = '',\n  onChange,\n  noContainer = false,\n  customInput,\n}: FormInputProps) => {\n  const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n    ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (typeof onChange === 'function') {\n      onChange(event.target.value);\n    }\n  };\n\n  const componentContent = (\n    <>\n      {label && (\n        <Label htmlFor={id} required={required} alignRight>\n          {label}\n        </Label>\n      )}\n\n      <div className={styles['form-input__input-feedback-container']}>\n        {customInput ? (\n          customInput\n        ) : (\n          <div className={styles['form-input__input-container']}>\n            <input\n              id={id}\n              type={type}\n              {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n              onChange={handleChange}\n              className={styles['form-input__input']}\n            />\n          </div>\n        )}\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </>\n  );\n\n  return noContainer ? (\n    componentContent\n  ) : (\n    <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n      {componentContent}\n    </div>\n  );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAA,GAE9CC,IAAe,CAACD,MAA+C;AACnE,IAAI,OAAOJ,KAAa,cACtBA,EAASI,EAAM,OAAO,KAAK;AAAA,EAC7B,GAGIE,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBACEc,GAAA,EAAM,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAY,EAAC,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UAAAU,GACH;AAEJ;"}

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

@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
 import { FormInputProps } from './FormInput';
 declare const _default: Meta<FormInputProps>;
 export default _default;
-export declare const FromInputExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;
-export declare const WithCustomInputExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;
+export declare const FromInputExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;
+export declare const WithCustomInputExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;

package/dist/components/FormInput/FormInput.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { fn as i } from "../../index-Dwqes6RH.js";
+import { W as i } from "../../index-Di9WPZUe.js";
 import { FormInput as a } from "./FormInput.js";
 import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
 const m = `

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

@@ -1 +1 @@
-{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FormInputProps } from './FormInput';\n\nimport { FormInput } from './FormInput';\n\nimport { SelectListbox } from 'components/SelectListbox';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<FormInput  />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/FormInput',\n  component: FormInput,\n  argTypes: {},\n  args: {},\n  parameters: {\n    inspectComponent: FormInput,\n    codeString: codeString,\n  },\n} as Meta<FormInputProps>;\n\nconst Template: StoryFn<FormInputProps> = (args) => {\n  return <FormInput {...args} />;\n};\n\nexport const FromInputExample = Template.bind({});\n\nFromInputExample.args = {\n  id: 'vak',\n  label: 'Vaknaam (NL)',\n  labelPosition: 'left',\n  required: true,\n  onChange: fn(),\n};\n\nexport const WithCustomInputExample = Template.bind({});\n\nconst mockOptions = [\n  { label: 'English', value: 'EN' },\n  { label: 'Dutch', value: 'NL' },\n  { label: 'German', value: 'DE' },\n  { label: 'Danish', value: 'DK' },\n];\n\nWithCustomInputExample.args = {\n  id: 'language',\n  label: 'Language',\n  labelPosition: 'left',\n  required: true,\n  customInput: (\n    <SelectListbox options={mockOptions} defaultValue=\"NL\" size=\"medium\">\n      {mockOptions.map(({ label, value }, index) => (\n        <SelectListbox.SelectOption option={{ label, value }} index={index} key={value}>\n          {label}\n        </SelectListbox.SelectOption>\n      ))}\n    </SelectListbox>\n  ),\n};\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn","WithCustomInputExample","mockOptions","SelectListbox","label","value","index"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,MAAM,CAAC;AAAA,EACP,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MAClC,gBAAAC,EAACH,GAAW,EAAA,GAAGE,EAAM,CAAA,GAGjBE,IAAmBH,EAAS,KAAK,CAAE,CAAA;AAEhDG,EAAiB,OAAO;AAAA,EACtB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAUC,EAAG;AACf;AAEO,MAAMC,IAAyBL,EAAS,KAAK,CAAE,CAAA,GAEhDM,IAAc;AAAA,EAClB,EAAE,OAAO,WAAW,OAAO,KAAK;AAAA,EAChC,EAAE,OAAO,SAAS,OAAO,KAAK;AAAA,EAC9B,EAAE,OAAO,UAAU,OAAO,KAAK;AAAA,EAC/B,EAAE,OAAO,UAAU,OAAO,KAAK;AACjC;AAEAD,EAAuB,OAAO;AAAA,EAC5B,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,aACE,gBAAAH,EAACK,GAAc,EAAA,SAASD,GAAa,cAAa,MAAK,MAAK,UACzD,UAAAA,EAAY,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,EAAA,GAASC,MACjC,gBAAAR,EAAAK,EAAc,cAAd,EAA2B,QAAQ,EAAE,OAAAC,GAAO,OAAAC,EAAS,GAAA,OAAAC,GACnD,UADsEF,EAAA,GAAAC,CAEzE,CACD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FormInputProps } from './FormInput';\n\nimport { FormInput } from './FormInput';\n\nimport { SelectListbox } from 'components/SelectListbox';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<FormInput  />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/FormInput',\n  component: FormInput,\n  argTypes: {},\n  args: {},\n  parameters: {\n    inspectComponent: FormInput,\n    codeString: codeString,\n  },\n} as Meta<FormInputProps>;\n\nconst Template: StoryFn<FormInputProps> = (args) => {\n  return <FormInput {...args} />;\n};\n\nexport const FromInputExample = Template.bind({});\n\nFromInputExample.args = {\n  id: 'vak',\n  label: 'Vaknaam (NL)',\n  labelPosition: 'left',\n  required: true,\n  onChange: fn(),\n};\n\nexport const WithCustomInputExample = Template.bind({});\n\nconst mockOptions = [\n  { label: 'English', value: 'EN' },\n  { label: 'Dutch', value: 'NL' },\n  { label: 'German', value: 'DE' },\n  { label: 'Danish', value: 'DK' },\n];\n\nWithCustomInputExample.args = {\n  id: 'language',\n  label: 'Language',\n  labelPosition: 'left',\n  required: true,\n  customInput: (\n    <SelectListbox options={mockOptions} defaultValue=\"NL\" size=\"medium\">\n      {mockOptions.map(({ label, value }, index) => (\n        <SelectListbox.SelectOption option={{ label, value }} index={index} key={value}>\n          {label}\n        </SelectListbox.SelectOption>\n      ))}\n    </SelectListbox>\n  ),\n};\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn","WithCustomInputExample","mockOptions","SelectListbox","label","value","index"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAA;AAAA,EACV,MAAM,CAAA;AAAA,EACN,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MAClC,gBAAAC,EAACH,GAAA,EAAW,GAAGE,EAAA,CAAM,GAGjBE,IAAmBH,EAAS,KAAK,CAAA,CAAE;AAEhDG,EAAiB,OAAO;AAAA,EACtB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAUC,EAAA;AACZ;AAEO,MAAMC,IAAyBL,EAAS,KAAK,CAAA,CAAE,GAEhDM,IAAc;AAAA,EAClB,EAAE,OAAO,WAAW,OAAO,KAAA;AAAA,EAC3B,EAAE,OAAO,SAAS,OAAO,KAAA;AAAA,EACzB,EAAE,OAAO,UAAU,OAAO,KAAA;AAAA,EAC1B,EAAE,OAAO,UAAU,OAAO,KAAA;AAC5B;AAEAD,EAAuB,OAAO;AAAA,EAC5B,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,aACE,gBAAAH,EAACK,GAAA,EAAc,SAASD,GAAa,cAAa,MAAK,MAAK,UACzD,UAAAA,EAAY,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,EAAA,GAASC,MAClC,gBAAAR,EAACK,EAAc,cAAd,EAA2B,QAAQ,EAAE,OAAAC,GAAO,OAAAC,EAAA,GAAS,OAAAC,GACnD,UAAAF,EAAA,GADsEC,CAEzE,CACD,EAAA,CACH;AAEJ;"}

package/dist/components/GridRow/GridRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridRow.js","sources":["../../../src/components/GridRow/GridRow.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { CSSProperties, PropsWithChildren } from 'react';\n\nimport { Column } from './Column';\nimport styles from './GridRow.module.css';\n\ntype spacing = '0' | '025' | '050' | '075' | '100' | '125' | '150' | '175' | '200' | '250' | '300' | '350';\nexport interface GridRowProps {\n  /** The horizontal padding between columns. */\n  gutter?: spacing;\n  /** The vertical padding (at the bottom) between rows. */\n  marginBottom?: spacing;\n  /** The vertical padding (at the top) between rows. */\n  marginTop?: spacing;\n}\n\nconst gapStyles = {\n  '0': { '--grid-gap': '0.25rem' },\n  '025': { '--grid-gap': '0.25rem' },\n  '050': { '--grid-gap': '0.5rem' },\n  '075': { '--grid-gap': '0.75rem' },\n  '100': { '--grid-gap': '1rem' },\n  '125': { '--grid-gap': '1.25rem' },\n  '150': { '--grid-gap': '1.5rem' },\n  '175': { '--grid-gap': '1.75rem' },\n  '200': { '--grid-gap': '2rem' },\n  '250': { '--grid-gap': '2.5rem' },\n  '300': { '--grid-gap': '3rem' },\n  '350': { '--grid-gap': '3.5rem' },\n};\n\n/** Represents a component for a grid. */\nexport const GridRow = ({\n  gutter = '200',\n  marginBottom = '0',\n  marginTop = '0',\n  children,\n}: PropsWithChildren<GridRowProps>) => {\n  return (\n    <div\n      className={clsx(\n        styles['page-grid__row'],\n        marginBottom && styles[`page-grid__row-mb-${marginBottom}`],\n        marginTop && styles[`page-grid__row-mt-${marginTop}`]\n      )}\n      style={gutter && (gapStyles[gutter] as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n};\n\nGridRow.Column = Column;\n"],"names":["gapStyles","GridRow","gutter","marginBottom","marginTop","children","jsx","clsx","styles","Column"],"mappings":";;;AAiBA,MAAMA,IAAY;AAAA,EAChB,GAAK,EAAE,cAAc,UAAU;AAAA,EAC/B,OAAO,EAAE,cAAc,UAAU;AAAA,EACjC,OAAO,EAAE,cAAc,SAAS;AAAA,EAChC,OAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,SAAS;AAAA,EAChC,KAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,SAAS;AAAA,EAChC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,SAAS;AAClC,GAGaC,IAAU,CAAC;AAAA,EACtB,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACTC,EAAO,gBAAgB;AAAA,MACvBL,KAAgBK,EAAO,qBAAqBL,CAAY,EAAE;AAAA,MAC1DC,KAAaI,EAAO,qBAAqBJ,CAAS,EAAE;AAAA,IACtD;AAAA,IACA,OAAOF,KAAWF,EAAUE,CAAM;AAAA,IAEjC,UAAAG;AAAA,EAAA;AACH;AAIJJ,EAAQ,SAASQ;"}
+{"version":3,"file":"GridRow.js","sources":["../../../src/components/GridRow/GridRow.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { CSSProperties, PropsWithChildren } from 'react';\n\nimport { Column } from './Column';\nimport styles from './GridRow.module.css';\n\ntype spacing = '0' | '025' | '050' | '075' | '100' | '125' | '150' | '175' | '200' | '250' | '300' | '350';\nexport interface GridRowProps {\n  /** The horizontal padding between columns. */\n  gutter?: spacing;\n  /** The vertical padding (at the bottom) between rows. */\n  marginBottom?: spacing;\n  /** The vertical padding (at the top) between rows. */\n  marginTop?: spacing;\n}\n\nconst gapStyles = {\n  '0': { '--grid-gap': '0.25rem' },\n  '025': { '--grid-gap': '0.25rem' },\n  '050': { '--grid-gap': '0.5rem' },\n  '075': { '--grid-gap': '0.75rem' },\n  '100': { '--grid-gap': '1rem' },\n  '125': { '--grid-gap': '1.25rem' },\n  '150': { '--grid-gap': '1.5rem' },\n  '175': { '--grid-gap': '1.75rem' },\n  '200': { '--grid-gap': '2rem' },\n  '250': { '--grid-gap': '2.5rem' },\n  '300': { '--grid-gap': '3rem' },\n  '350': { '--grid-gap': '3.5rem' },\n};\n\n/** Represents a component for a grid. */\nexport const GridRow = ({\n  gutter = '200',\n  marginBottom = '0',\n  marginTop = '0',\n  children,\n}: PropsWithChildren<GridRowProps>) => {\n  return (\n    <div\n      className={clsx(\n        styles['page-grid__row'],\n        marginBottom && styles[`page-grid__row-mb-${marginBottom}`],\n        marginTop && styles[`page-grid__row-mt-${marginTop}`]\n      )}\n      style={gutter && (gapStyles[gutter] as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n};\n\nGridRow.Column = Column;\n"],"names":["gapStyles","GridRow","gutter","marginBottom","marginTop","children","jsx","clsx","styles","Column"],"mappings":";;;AAiBA,MAAMA,IAAY;AAAA,EAChB,GAAK,EAAE,cAAc,UAAA;AAAA,EACrB,OAAO,EAAE,cAAc,UAAA;AAAA,EACvB,OAAO,EAAE,cAAc,SAAA;AAAA,EACvB,OAAO,EAAE,cAAc,UAAA;AAAA,EACvB,KAAO,EAAE,cAAc,OAAA;AAAA,EACvB,KAAO,EAAE,cAAc,UAAA;AAAA,EACvB,KAAO,EAAE,cAAc,SAAA;AAAA,EACvB,KAAO,EAAE,cAAc,UAAA;AAAA,EACvB,KAAO,EAAE,cAAc,OAAA;AAAA,EACvB,KAAO,EAAE,cAAc,SAAA;AAAA,EACvB,KAAO,EAAE,cAAc,OAAA;AAAA,EACvB,KAAO,EAAE,cAAc,SAAA;AACzB,GAGaC,IAAU,CAAC;AAAA,EACtB,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACTC,EAAO,gBAAgB;AAAA,MACvBL,KAAgBK,EAAO,qBAAqBL,CAAY,EAAE;AAAA,MAC1DC,KAAaI,EAAO,qBAAqBJ,CAAS,EAAE;AAAA,IAAA;AAAA,IAEtD,OAAOF,KAAWF,EAAUE,CAAM;AAAA,IAEjC,UAAAG;AAAA,EAAA;AAAA;AAKPJ,EAAQ,SAASQ;"}

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

@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
 import { GridRowProps } from './GridRow';
 declare const _default: Meta<GridRowProps>;
 export default _default;
-export declare const GridRowExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, GridRowProps>;
-export declare const WithMediumBreakpoint: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, GridRowProps>;
+export declare const GridRowExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, GridRowProps>;
+export declare const WithMediumBreakpoint: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, GridRowProps>;