@uva-glass/component-library 1.4.2 → 1.6.0

package/dist/components/AppStatusBar/AppStatusBar.d.ts

@@ -0,0 +1,6 @@
+interface AppStatusBarProps {
+    message: string;
+    severity: 'info' | 'warning' | 'error';
+}
+export declare const AppStatusBar: ({ message, severity }: AppStatusBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AppStatusBar/AppStatusBar.js

@@ -0,0 +1,13 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as r } from "../../clsx-DB4S2d7J.js";
+import '../../assets/AppStatusBar.css';const a = {
+  "app-status-bar": "_app-status-bar_1ddv0_1",
+  "app-status-bar__message": "_app-status-bar__message_1ddv0_9",
+  "app-status-bar--info": "_app-status-bar--info_1ddv0_13",
+  "app-status-bar--warning": "_app-status-bar--warning_1ddv0_17",
+  "app-status-bar--error": "_app-status-bar--error_1ddv0_21"
+}, u = ({ message: t, severity: p }) => /* @__PURE__ */ s("div", { className: r(a["app-status-bar"], a[`app-status-bar--${p.toLowerCase()}`]), children: /* @__PURE__ */ s("p", { className: a["app-status-bar__message"], dangerouslySetInnerHTML: { __html: t } }) });
+export {
+  u as AppStatusBar
+};
+//# sourceMappingURL=AppStatusBar.js.map

package/dist/components/AppStatusBar/AppStatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatusBar.js","sources":["../../../src/components/AppStatusBar/AppStatusBar.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport styles from './AppStatusBar.module.css';\n\ninterface AppStatusBarProps {\n  message: string;\n  severity: 'info' | 'warning' | 'error';\n}\n\nexport const AppStatusBar = ({ message, severity }: AppStatusBarProps) => (\n  <div className={classNames(styles['app-status-bar'], styles[`app-status-bar--${severity.toLowerCase()}`])}>\n    <p className={styles['app-status-bar__message']} dangerouslySetInnerHTML={{ __html: message }} />\n  </div>\n);\n"],"names":["AppStatusBar","message","severity","jsx","classNames","styles"],"mappings":";;;;;;;;GASaA,IAAe,CAAC,EAAE,SAAAC,GAAS,UAAAC,QACtC,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAWC,EAAO,gBAAgB,GAAGA,EAAO,mBAAmBH,EAAS,YAAY,CAAC,EAAE,CAAC,GACtG,UAAA,gBAAAC,EAAC,OAAE,WAAWE,EAAO,yBAAyB,GAAG,yBAAyB,EAAE,QAAQJ,EAAA,EAAW,CAAA,EACjG,CAAA;"}

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

@@ -0,0 +1,7 @@
+interface AppStatusBarProps {
+    message: string;
+    severity: 'info' | 'warning' | 'error';
+}
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, AppStatusBarProps>;
+export default _default;
+export declare const AppStatusBarExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, AppStatusBarProps>;

package/dist/components/AppStatusBar/AppStatusBar.stories.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { AppStatusBar as t } from "./AppStatusBar.js";
+const p = {
+  title: "Atoms/AppStatusBar",
+  component: t,
+  argTypes: {
+    severity: {
+      options: ["info", "warning", "error"],
+      control: { type: "radio" }
+    }
+  }
+}, n = (e) => /* @__PURE__ */ o(t, { ...e }), r = {
+  message: "Dit is de ontwikkelomgeving van Storybook. Hier kun je componenten bekijken en testen.",
+  severity: "warning"
+}, s = n.bind({});
+s.args = {
+  ...r
+};
+export {
+  s as AppStatusBarExample,
+  p as default
+};
+//# sourceMappingURL=AppStatusBar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatusBar.stories.js","sources":["../../../src/components/AppStatusBar/AppStatusBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { AppStatusBar } from './AppStatusBar';\n\ninterface AppStatusBarProps {\n  message: string;\n  severity: 'info' | 'warning' | 'error';\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/AppStatusBar',\n  component: AppStatusBar,\n  argTypes: {\n    severity: {\n      options: ['info', 'warning', 'error'],\n      control: { type: 'radio' },\n    },\n  },\n} as Meta<AppStatusBarProps>;\n\nconst Template: StoryFn<AppStatusBarProps> = (args) => <AppStatusBar {...args} />;\n\nconst defaultArgs: Partial<AppStatusBarProps> = {\n  message: 'Dit is de ontwikkelomgeving van Storybook. Hier kun je componenten bekijken en testen.',\n  severity: 'warning',\n};\n\nexport const AppStatusBarExample = Template.bind({});\nAppStatusBarExample.args = {\n  ...defaultArgs,\n};\n"],"names":["AppStatusBar_stories","AppStatusBar","Template","args","jsx","defaultArgs","AppStatusBarExample"],"mappings":";;AAUA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS,CAAC,QAAQ,WAAW,OAAO;AAAA,MACpC,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AACF,GAEMC,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,GAEzEE,IAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,UAAU;AACZ,GAEaC,IAAsBJ,EAAS,KAAK,EAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,GAAGD;AACL;"}

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

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

package/dist/components/AppStatusBar/index.js

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

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

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

package/dist/components/Button/Button.js

@@ -1,31 +1,30 @@
-import { jsx as _ } from "react/jsx-runtime";
+import { jsx as b } from "react/jsx-runtime";
 import { c as m } from "../../clsx-DB4S2d7J.js";
-import { forwardRef as b } from "react";
-import '../../assets/Button.css';const a = "_button_1gimu_3", t = {
-  "visually-hidden": "_visually-hidden_1gimu_1",
-  button: a,
+import { forwardRef as _ } from "react";
+import '../../assets/Button.css';const c = "_button_1gimu_3", t = {
+  button: c,
   "button--blank": "_button--blank_1gimu_36",
   "button--primary": "_button--primary_1gimu_53",
   "button--secondary": "_button--secondary_1gimu_69",
   "button--destructive-primary": "_button--destructive-primary_1gimu_85",
   "button--destructive-secondary": "_button--destructive-secondary_1gimu_103",
   "button--wide-column": "_button--wide-column_1gimu_121"
-}, y = b((o, n) => {
-  const { children: u, type: r = "button", variant: i, displayColumn: e = !1, ...s } = o;
-  return /* @__PURE__ */ _(
+}, p = _((o, n) => {
+  const { children: u, type: r = "button", variant: e, displayColumn: i = !1, ...s } = o;
+  return /* @__PURE__ */ b(
     "button",
     {
       ...s,
       type: r,
       ref: n,
-      className: m(t.button, t[`button--${i}`], {
-        [t["button--wide-column"]]: e
+      className: m(t.button, t[`button--${e}`], {
+        [t["button--wide-column"]]: i
       }),
       children: u
     }
   );
 });
 export {
-  y as Button
+  p as Button
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {\n  variant: UIButtonVariant;\n  children: ReactNode;\n  displayColumn?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const { children, type = 'button', variant, displayColumn = false, ...restProps } = props;\n\n  return (\n    <button\n      {...restProps}\n      type={type}\n      ref={forwardedRef}\n      className={clsx(styles['button'], styles[`button--${variant}`], {\n        [styles['button--wide-column']]: displayColumn,\n      })}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["Button","forwardRef","props","forwardedRef","children","type","variant","displayColumn","restProps","jsx","clsx","styles"],"mappings":";;;;;;;;;;;;GAeaA,IAASC,EAA2C,CAACC,GAAOC,MAAiB;AAClF,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAc,IAAAN;AAGlF,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,MAAAH;AAAA,MACA,KAAKF;AAAA,MACL,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWL,CAAO,EAAE,GAAG;AAAA,QAC9D,CAACK,EAAO,qBAAqB,CAAC,GAAGJ;AAAA,MAAA,CAClC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {\n  variant: UIButtonVariant;\n  children: ReactNode;\n  displayColumn?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const { children, type = 'button', variant, displayColumn = false, ...restProps } = props;\n\n  return (\n    <button\n      {...restProps}\n      type={type}\n      ref={forwardedRef}\n      className={clsx(styles['button'], styles[`button--${variant}`], {\n        [styles['button--wide-column']]: displayColumn,\n      })}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["Button","forwardRef","props","forwardedRef","children","type","variant","displayColumn","restProps","jsx","clsx","styles"],"mappings":";;;;;;;;;;;GAeaA,IAASC,EAA2C,CAACC,GAAOC,MAAiB;AAClF,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAc,IAAAN;AAGlF,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,MAAAH;AAAA,MACA,KAAKF;AAAA,MACL,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWL,CAAO,EAAE,GAAG;AAAA,QAC9D,CAACK,EAAO,qBAAqB,CAAC,GAAGJ;AAAA,MAAA,CAClC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/Card/Card.js

@@ -1,9 +1,8 @@
-import { jsxs as h, jsx as d } from "react/jsx-runtime";
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
 import { c as t } from "../../clsx-DB4S2d7J.js";
-import { SectionNotification as i } from "../SectionNotification/SectionNotification.js";
-import '../../assets/Card.css';const n = "_card_aw9hz_3", a = {
-  "visually-hidden": "_visually-hidden_aw9hz_1",
-  card: n,
+import { SectionNotification as o } from "../SectionNotification/SectionNotification.js";
+import '../../assets/Card.css';const g = "_card_aw9hz_3", a = {
+  card: g,
   "card--regular": "_card--regular_aw9hz_9",
   "card--large": "_card--large_aw9hz_10",
   "card--small": "_card--small_aw9hz_15",
@@ -11,10 +10,10 @@ import '../../assets/Card.css';const n = "_card_aw9hz_3", a = {
   "card--high-contrast": "_card--high-contrast_aw9hz_35",
   "card--align-center": "_card--align-center_aw9hz_39"
 }, w = ({
-  children: e,
+  children: d,
   header: c,
   highContrast: s,
-  notification: l,
+  notification: e,
   padding: r = "regular",
   alignCenter: _ = !1
 }) => /* @__PURE__ */ h(
@@ -28,9 +27,9 @@ import '../../assets/Card.css';const n = "_card_aw9hz_3", a = {
       [a["card--align-center"]]: _
     }),
     children: [
-      l && /* @__PURE__ */ d(i, { children: l }),
-      c && /* @__PURE__ */ d("div", { className: a["card-header"], children: c }),
-      e
+      e && /* @__PURE__ */ l(o, { children: e }),
+      c && /* @__PURE__ */ l("div", { className: a["card-header"], children: c }),
+      d
     ]
   }
 );

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Card.module.css';\n\nimport { SectionNotification } from 'components/SectionNotification';\n\nexport interface CardProps {\n  header?: ReactNode;\n  highContrast?: boolean;\n  notification?: ReactNode;\n  padding?: 'small' | 'regular' | 'large';\n  alignCenter?: boolean;\n}\n\nexport const Card = ({\n  children,\n  header,\n  highContrast,\n  notification,\n  padding = 'regular',\n  alignCenter = false,\n}: PropsWithChildren<CardProps>) => (\n  <div\n    className={classNames(styles['card'], {\n      [styles['card--high-contrast']]: highContrast,\n      [styles['card--regular']]: padding === 'regular',\n      [styles['card--small']]: padding === 'small',\n      [styles['card--large']]: padding === 'large',\n      [styles['card--align-center']]: alignCenter,\n    })}\n  >\n    {notification && <SectionNotification>{notification}</SectionNotification>}\n    {header && <div className={styles['card-header']}>{header}</div>}\n    {children}\n  </div>\n);\n"],"names":["Card","children","header","highContrast","notification","padding","alignCenter","jsxs","classNames","styles","jsx","SectionNotification"],"mappings":";;;;;;;;;;;;GAgBaA,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAChB,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,MAAS;AAAA,MACpC,CAACA,EAAO,qBAAqB,CAAC,GAAGN;AAAA,MACjC,CAACM,EAAO,eAAe,CAAC,GAAGJ,MAAY;AAAA,MACvC,CAACI,EAAO,aAAa,CAAC,GAAGJ,MAAY;AAAA,MACrC,CAACI,EAAO,aAAa,CAAC,GAAGJ,MAAY;AAAA,MACrC,CAACI,EAAO,oBAAoB,CAAC,GAAGH;AAAA,IAAA,CACjC;AAAA,IAEA,UAAA;AAAA,MAAgBF,KAAA,gBAAAM,EAACC,KAAqB,UAAaP,EAAA,CAAA;AAAA,MACnDF,KAAW,gBAAAQ,EAAA,OAAA,EAAI,WAAWD,EAAO,aAAa,GAAI,UAAOP,GAAA;AAAA,MACzDD;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Card.module.css';\n\nimport { SectionNotification } from 'components/SectionNotification';\n\nexport interface CardProps {\n  header?: ReactNode;\n  highContrast?: boolean;\n  notification?: ReactNode;\n  padding?: 'small' | 'regular' | 'large';\n  alignCenter?: boolean;\n}\n\nexport const Card = ({\n  children,\n  header,\n  highContrast,\n  notification,\n  padding = 'regular',\n  alignCenter = false,\n}: PropsWithChildren<CardProps>) => (\n  <div\n    className={classNames(styles['card'], {\n      [styles['card--high-contrast']]: highContrast,\n      [styles['card--regular']]: padding === 'regular',\n      [styles['card--small']]: padding === 'small',\n      [styles['card--large']]: padding === 'large',\n      [styles['card--align-center']]: alignCenter,\n    })}\n  >\n    {notification && <SectionNotification>{notification}</SectionNotification>}\n    {header && <div className={styles['card-header']}>{header}</div>}\n    {children}\n  </div>\n);\n"],"names":["Card","children","header","highContrast","notification","padding","alignCenter","jsxs","classNames","styles","jsx","SectionNotification"],"mappings":";;;;;;;;;;;GAgBaA,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAChB,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,MAAS;AAAA,MACpC,CAACA,EAAO,qBAAqB,CAAC,GAAGN;AAAA,MACjC,CAACM,EAAO,eAAe,CAAC,GAAGJ,MAAY;AAAA,MACvC,CAACI,EAAO,aAAa,CAAC,GAAGJ,MAAY;AAAA,MACrC,CAACI,EAAO,aAAa,CAAC,GAAGJ,MAAY;AAAA,MACrC,CAACI,EAAO,oBAAoB,CAAC,GAAGH;AAAA,IAAA,CACjC;AAAA,IAEA,UAAA;AAAA,MAAgBF,KAAA,gBAAAM,EAACC,KAAqB,UAAaP,EAAA,CAAA;AAAA,MACnDF,KAAW,gBAAAQ,EAAA,OAAA,EAAI,WAAWD,EAAO,aAAa,GAAI,UAAOP,GAAA;AAAA,MACzDD;AAAA,IAAA;AAAA,EAAA;AACH;"}

package/dist/components/IconButton/IconButton.js

@@ -1,29 +1,28 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as b } from "../../clsx-DB4S2d7J.js";
-import { forwardRef as l } from "react";
+import { jsx as b } from "react/jsx-runtime";
+import { c as d } from "../../clsx-DB4S2d7J.js";
+import { forwardRef as s } from "react";
 import '../../assets/IconButton.css';const t = {
-  "visually-hidden": "_visually-hidden_ldxal_1",
   "icon-button": "_icon-button_ldxal_3",
   "icon-button--destructive": "_icon-button--destructive_ldxal_29",
   "icon-button--no-border": "_icon-button--no-border_ldxal_37",
   "icon-button--wide": "_icon-button--wide_ldxal_46"
-}, x = l(
-  ({ children: o, type: n = "button", variant: i, noBorder: c, wide: e, ...u }, d) => /* @__PURE__ */ r(
+}, m = s(
+  ({ children: o, type: n = "button", variant: c, noBorder: i, wide: r, ...e }, u) => /* @__PURE__ */ b(
     "button",
     {
-      ...u,
-      className: b(t["icon-button"], {
-        [t["icon-button--destructive"]]: i === "destructive",
-        [t["icon-button--no-border"]]: c,
-        [t["icon-button--wide"]]: e
+      ...e,
+      className: d(t["icon-button"], {
+        [t["icon-button--destructive"]]: c === "destructive",
+        [t["icon-button--no-border"]]: i,
+        [t["icon-button--wide"]]: r
       }),
-      ref: d,
+      ref: u,
       type: n,
       children: o
     }
   )
 );
 export {
-  x as IconButton
+  m as IconButton
 };
 //# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  'aria-label': string;\n  variant?: 'destructive';\n  noBorder?: boolean;\n  wide?: boolean;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ children, type = 'button', variant, noBorder, wide, ...restProps }: IconButtonProps, forwardedRef) => (\n    <button\n      {...restProps}\n      className={clsx(styles['icon-button'], {\n        [styles['icon-button--destructive']]: variant === 'destructive',\n        [styles['icon-button--no-border']]: noBorder,\n        [styles['icon-button--wide']]: wide,\n      })}\n      ref={forwardedRef}\n      type={type}\n    >\n      {children}\n    </button>\n  )\n);\n"],"names":["IconButton","forwardRef","children","type","variant","noBorder","wide","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;;GAcaA,IAAaC;AAAA,EACxB,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,UAAAC,GAAU,MAAAC,GAAM,GAAGC,KAA8BC,MACtF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG,EAAKC,EAAO,aAAa,GAAG;AAAA,QACrC,CAACA,EAAO,0BAA0B,CAAC,GAAGP,MAAY;AAAA,QAClD,CAACO,EAAO,wBAAwB,CAAC,GAAGN;AAAA,QACpC,CAACM,EAAO,mBAAmB,CAAC,GAAGL;AAAA,MAAA,CAChC;AAAA,MACD,KAAKE;AAAA,MACL,MAAAL;AAAA,MAEC,UAAAD;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  'aria-label': string;\n  variant?: 'destructive';\n  noBorder?: boolean;\n  wide?: boolean;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ children, type = 'button', variant, noBorder, wide, ...restProps }: IconButtonProps, forwardedRef) => (\n    <button\n      {...restProps}\n      className={clsx(styles['icon-button'], {\n        [styles['icon-button--destructive']]: variant === 'destructive',\n        [styles['icon-button--no-border']]: noBorder,\n        [styles['icon-button--wide']]: wide,\n      })}\n      ref={forwardedRef}\n      type={type}\n    >\n      {children}\n    </button>\n  )\n);\n"],"names":["IconButton","forwardRef","children","type","variant","noBorder","wide","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;GAcaA,IAAaC;AAAA,EACxB,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,UAAAC,GAAU,MAAAC,GAAM,GAAGC,KAA8BC,MACtF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG,EAAKC,EAAO,aAAa,GAAG;AAAA,QACrC,CAACA,EAAO,0BAA0B,CAAC,GAAGP,MAAY;AAAA,QAClD,CAACO,EAAO,wBAAwB,CAAC,GAAGN;AAAA,QACpC,CAACM,EAAO,mBAAmB,CAAC,GAAGL;AAAA,MAAA,CAChC;AAAA,MACD,KAAKE;AAAA,MACL,MAAAL;AAAA,MAEC,UAAAD;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/InfoMessage/InfoMessage.js

@@ -1,24 +1,23 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { c as _ } from "../../clsx-DB4S2d7J.js";
-import { Icon as a } from "../Icon/Icon.js";
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { c as a } from "../../clsx-DB4S2d7J.js";
+import { Icon as _ } from "../Icon/Icon.js";
 import '../../assets/InfoMessage.css';const e = {
-  "visually-hidden": "_visually-hidden_elg9f_1",
   "info-message": "_info-message_elg9f_3",
   "info-message__container": "_info-message__container_elg9f_8",
   "info-message__icon": "_info-message__icon_elg9f_13"
-}, c = ({ message: s, hasOwnContainer: i = !1 }) => /* @__PURE__ */ n(
+}, g = ({ message: s, hasOwnContainer: o = !1 }) => /* @__PURE__ */ n(
   "div",
   {
-    className: _(e["info-message"], {
-      [e["info-message__container"]]: i
+    className: a(e["info-message"], {
+      [e["info-message__container"]]: o
     }),
     children: [
-      /* @__PURE__ */ o(a, { name: "InformationCircleFillMini", className: e["info-message__icon"] }),
+      /* @__PURE__ */ i(_, { name: "InformationCircleFillMini", className: e["info-message__icon"] }),
       s
     ]
   }
 );
 export {
-  c as InfoMessage
+  g as InfoMessage
 };
 //# sourceMappingURL=InfoMessage.js.map

package/dist/components/InfoMessage/InfoMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.js","sources":["../../../src/components/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './InfoMessage.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface InfoMessageProps {\n  message: string;\n  hasOwnContainer?: boolean;\n}\n\nexport const InfoMessage = ({ message, hasOwnContainer = false }: PropsWithChildren<InfoMessageProps>) => (\n  <div\n    className={clsx(styles['info-message'], {\n      [styles['info-message__container']]: hasOwnContainer,\n    })}\n  >\n    <Icon name=\"InformationCircleFillMini\" className={styles['info-message__icon']} />\n    {message}\n  </div>\n);\n"],"names":["InfoMessage","message","hasOwnContainer","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAaaA,IAAc,CAAC,EAAE,SAAAC,GAAS,iBAAAC,IAAkB,GACvD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGH;AAAA,IAAA,CACtC;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAI,EAACC,KAAK,MAAK,6BAA4B,WAAWF,EAAO,oBAAoB,GAAG;AAAA,MAC/EJ;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"InfoMessage.js","sources":["../../../src/components/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './InfoMessage.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface InfoMessageProps {\n  message: string;\n  hasOwnContainer?: boolean;\n}\n\nexport const InfoMessage = ({ message, hasOwnContainer = false }: PropsWithChildren<InfoMessageProps>) => (\n  <div\n    className={clsx(styles['info-message'], {\n      [styles['info-message__container']]: hasOwnContainer,\n    })}\n  >\n    <Icon name=\"InformationCircleFillMini\" className={styles['info-message__icon']} />\n    {message}\n  </div>\n);\n"],"names":["InfoMessage","message","hasOwnContainer","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;GAaaA,IAAc,CAAC,EAAE,SAAAC,GAAS,iBAAAC,IAAkB,GACvD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGH;AAAA,IAAA,CACtC;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAI,EAACC,KAAK,MAAK,6BAA4B,WAAWF,EAAO,oBAAoB,GAAG;AAAA,MAC/EJ;AAAA,IAAA;AAAA,EAAA;AACH;"}

package/dist/components/SectionNotification/SectionNotification.js

@@ -1,13 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
-import { c as s } from "../../clsx-DB4S2d7J.js";
+import { c } from "../../clsx-DB4S2d7J.js";
 import '../../assets/SectionNotification.css';const i = {
-  "visually-hidden": "_visually-hidden_xsb8x_1",
   "section-notification": "_section-notification_xsb8x_3",
   "section-notification--fullwidth": "_section-notification--fullwidth_xsb8x_12"
 }, a = ({ fullWidth: t = !1, children: o }) => /* @__PURE__ */ n(
   "div",
   {
-    className: s(i["section-notification"], {
+    className: c(i["section-notification"], {
       [i["section-notification--fullwidth"]]: t
     }),
     children: o

package/dist/components/SectionNotification/SectionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNotification.js","sources":["../../../src/components/SectionNotification/SectionNotification.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './SectionNotification.module.css';\n\nexport interface SectionNotificationProps {\n  fullWidth?: boolean;\n}\n\nexport const SectionNotification = ({ fullWidth = false, children }: PropsWithChildren<SectionNotificationProps>) => (\n  <div\n    className={classNames(styles['section-notification'], {\n      [styles['section-notification--fullwidth']]: fullWidth,\n    })}\n  >\n    {children}\n  </div>\n);\n"],"names":["SectionNotification","fullWidth","children","jsx","classNames","styles"],"mappings":";;;;;;GAUaA,IAAsB,CAAC,EAAE,WAAAC,IAAY,IAAO,UAAAC,EACvD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,sBAAsB,GAAG;AAAA,MACpD,CAACA,EAAO,iCAAiC,CAAC,GAAGJ;AAAA,IAAA,CAC9C;AAAA,IAEA,UAAAC;AAAA,EAAA;AACH;"}
+{"version":3,"file":"SectionNotification.js","sources":["../../../src/components/SectionNotification/SectionNotification.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './SectionNotification.module.css';\n\nexport interface SectionNotificationProps {\n  fullWidth?: boolean;\n}\n\nexport const SectionNotification = ({ fullWidth = false, children }: PropsWithChildren<SectionNotificationProps>) => (\n  <div\n    className={classNames(styles['section-notification'], {\n      [styles['section-notification--fullwidth']]: fullWidth,\n    })}\n  >\n    {children}\n  </div>\n);\n"],"names":["SectionNotification","fullWidth","children","jsx","classNames","styles"],"mappings":";;;;;GAUaA,IAAsB,CAAC,EAAE,WAAAC,IAAY,IAAO,UAAAC,EACvD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,sBAAsB,GAAG;AAAA,MACpD,CAACA,EAAO,iCAAiC,CAAC,GAAGJ;AAAA,IAAA,CAC9C;AAAA,IAEA,UAAAC;AAAA,EAAA;AACH;"}

package/dist/components/SelectListbox/components/SelectButton.js

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as C } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-DB4S2d7J.js";
 import { forwardRef as E, useRef as g, useEffect as c } from "react";
-import { s as t } from "../../../SelectListbox.module-1nd3xIGj.js";
+import { s as t } from "../../../SelectListbox.module-DSjx989r.js";
 import { Icon as L } from "../../Icon/Icon.js";
 import { useSelect as N } from "../SelectProvider.js";
 const O = E((d, u) => {

package/dist/components/SelectListbox/components/SelectContainer.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useRef as i, useCallback as u, useEffect as l } from "react";
 import { useSelect as m } from "../SelectProvider.js";
-import { s as f } from "../../../SelectListbox.module-1nd3xIGj.js";
+import { s as f } from "../../../SelectListbox.module-DSjx989r.js";
 const E = ({ children: o }) => {
   const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
     ({ target: s }) => {

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

@@ -2,7 +2,7 @@ import { jsx as d } from "react/jsx-runtime";
 import { c as v } from "../../../clsx-DB4S2d7J.js";
 import { useRef as D, useEffect as p } from "react";
 import { useSelect as y } from "../SelectProvider.js";
-import { s as b } from "../../../SelectListbox.module-1nd3xIGj.js";
+import { s as b } from "../../../SelectListbox.module-DSjx989r.js";
 const S = ({ option: t, index: l, children: m }) => {
   const o = D(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: u, setIsOpen: i, options: a } = y(), w = (e) => {
     u(a[e]), i(!1);

package/dist/components/SelectListbox/components/SelectOptionBox.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as m, useRef as x } from "react";
-import { s as i } from "../../../SelectListbox.module-1nd3xIGj.js";
+import { s as i } from "../../../SelectListbox.module-DSjx989r.js";
 import { useSelect as a } from "../SelectProvider.js";
 const h = m((l, e) => {
   const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './AppStatusBar';
 export * from './Button';
 export * from './Card';
 export * from './Icon';

package/dist/components/index.js

@@ -1,22 +1,24 @@
-import { Button as e } from "./Button/Button.js";
-import { Card as f } from "./Card/Card.js";
-import { Icon as x } from "./Icon/Icon.js";
-import { IconButton as n } from "./IconButton/IconButton.js";
-import { InfoMessage as i } from "./InfoMessage/InfoMessage.js";
-import { SectionNotification as s } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as l } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as I, useSelect as d } from "./SelectListbox/SelectProvider.js";
-import { Spinner as b } from "./Spinner/Spinner.js";
+import { AppStatusBar as t } from "./AppStatusBar/AppStatusBar.js";
+import { Button as p } from "./Button/Button.js";
+import { Card as x } from "./Card/Card.js";
+import { Icon as n } from "./Icon/Icon.js";
+import { IconButton as i } from "./IconButton/IconButton.js";
+import { InfoMessage as a } from "./InfoMessage/InfoMessage.js";
+import { SectionNotification as u } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as B } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as d, useSelect as b } from "./SelectListbox/SelectProvider.js";
+import { Spinner as v } from "./Spinner/Spinner.js";
 export {
-  e as Button,
-  f as Card,
-  x as Icon,
-  n as IconButton,
-  i as InfoMessage,
-  s as SectionNotification,
-  l as SelectListbox,
-  I as SelectProvider,
-  b as Spinner,
-  d as useSelect
+  t as AppStatusBar,
+  p as Button,
+  x as Card,
+  n as Icon,
+  i as IconButton,
+  a as InfoMessage,
+  u as SectionNotification,
+  B as SelectListbox,
+  d as SelectProvider,
+  v as Spinner,
+  b as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/index.js

@@ -1,22 +1,24 @@
-import { Button as e } from "./components/Button/Button.js";
-import { Card as f } from "./components/Card/Card.js";
-import { Icon as x } from "./components/Icon/Icon.js";
-import { IconButton as n } from "./components/IconButton/IconButton.js";
-import { InfoMessage as i } from "./components/InfoMessage/InfoMessage.js";
-import { SectionNotification as s } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as l } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as I, useSelect as d } from "./components/SelectListbox/SelectProvider.js";
-import { Spinner as b } from "./components/Spinner/Spinner.js";
+import { AppStatusBar as t } from "./components/AppStatusBar/AppStatusBar.js";
+import { Button as p } from "./components/Button/Button.js";
+import { Card as x } from "./components/Card/Card.js";
+import { Icon as n } from "./components/Icon/Icon.js";
+import { IconButton as i } from "./components/IconButton/IconButton.js";
+import { InfoMessage as a } from "./components/InfoMessage/InfoMessage.js";
+import { SectionNotification as u } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as B } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as d, useSelect as b } from "./components/SelectListbox/SelectProvider.js";
+import { Spinner as v } from "./components/Spinner/Spinner.js";
 export {
-  e as Button,
-  f as Card,
-  x as Icon,
-  n as IconButton,
-  i as InfoMessage,
-  s as SectionNotification,
-  l as SelectListbox,
-  I as SelectProvider,
-  b as Spinner,
-  d as useSelect
+  t as AppStatusBar,
+  p as Button,
+  x as Card,
+  n as Icon,
+  i as IconButton,
+  a as InfoMessage,
+  u as SectionNotification,
+  B as SelectListbox,
+  d as SelectProvider,
+  v as Spinner,
+  b as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.4.2",
+  "version": "1.6.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -44,14 +44,14 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^13.1.0",
     "@semantic-release/npm": "^12.0.1",
-    "@storybook/addon-a11y": "^8.1.0",
-    "@storybook/addon-essentials": "^8.1.0",
-    "@storybook/addon-interactions": "^8.1.0",
-    "@storybook/addon-links": "^8.1.0",
-    "@storybook/blocks": "^8.1.0",
-    "@storybook/react": "^8.1.0",
-    "@storybook/react-vite": "^8.1.0",
-    "@storybook/test": "^8.1.0",
+    "@storybook/addon-a11y": "^8.1.1",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-vite": "^8.1.1",
+    "@storybook/test": "^8.1.1",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
@@ -77,7 +77,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "semantic-release": "^23.1.1",
-    "storybook": "^8.1.0",
+    "storybook": "^8.1.1",
     "style-dictionary": "^3.9.2",
     "stylelint": "^16.5.0",
     "stylelint-config-recommended": "^14.0.0",

package/dist/SelectListbox.module-1nd3xIGj.js.map

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