@uva-glass/component-library 1.25.0 → 1.27.0

package/dist/assets/Drawer.css

@@ -0,0 +1 @@
+._drawer_1ytb4_1{background-color:#fff;bottom:0;box-shadow:0 0 .75rem .25rem #0000001a;display:flex;flex-direction:column;left:10vw;max-width:90vw;min-width:25rem;padding:2.5rem 2rem;position:fixed;right:0;top:0;transform:translate(100%);transform-origin:right;transition-duration:.2s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}._drawer__content_1ytb4_22{max-height:calc(100vh - 7rem);overflow-y:auto}._drawer__header_1ytb4_32{display:flex;gap:2rem;justify-content:space-between;position:relative}._drawer__footer_1ytb4_39{gap:2rem;justify-content:flex-end;margin-top:auto}._drawer__heading_1ytb4_26{font-size:var(--font-size-s);line-height:var(--line-height-s);margin:.25rem 0 .5rem;padding-right:2rem}@media only screen and (min-width: 40rem){._drawer_1ytb4_1{left:auto;max-width:37.5rem}}._drawer--open_1ytb4_59{transform:translate(0);transition-duration:.25s}._drawer__buttons_1ytb4_64{display:flex;flex-flow:row wrap;gap:.75rem;justify-content:flex-end;margin:2.5rem 0 0}

package/dist/assets/StatusPill.css

@@ -0,0 +1 @@
+._status-pill_x7rv2_1{align-items:center;border-radius:1.5rem;display:flex;gap:.25rem;padding:.25rem .5rem;width:fit-content}._status-pill__possible_x7rv2_10{background-color:var(--color-mint-cream);color:var(--color-san-felix)}._status-pill__impossible_x7rv2_15{background-color:var(--color-amour);color:var(--color-uva-red-dark)}._status-pill--bar_x7rv2_20{border-radius:0;justify-content:center;padding:.5rem;width:100%}

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

@@ -0,0 +1,10 @@
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+    buttons?: ReactNode;
+    isOpen?: boolean;
+    onClose: () => void;
+    title: string;
+    closeButtonAriaValueText?: string;
+}
+export declare function Drawer({ buttons, children, isOpen, onClose, title, closeButtonAriaValueText, ...restProps }: PropsWithChildren<DrawerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,60 @@
+import { jsx as r, jsxs as _ } from "react/jsx-runtime";
+import { b as u, c as y, d as x, e as g, f as C, g as D } from "../../useDialog-DDVWB2iX.js";
+import { c as N } from "../../clsx-DB4S2d7J.js";
+import { useState as P, useRef as v, useEffect as j } from "react";
+import { Backdrop as k } from "../Backdrop/Backdrop.js";
+import { OverlayCloseButton as B } from "../OverlayCloseButton/OverlayCloseButton.js";
+import '../../assets/Drawer.css';const R = "_drawer_1ytb4_1", T = "_drawer__content_1ytb4_22", E = "_drawer__header_1ytb4_32", F = "_drawer__footer_1ytb4_39", K = "_drawer__heading_1ytb4_26", S = "_drawer__buttons_1ytb4_64", e = {
+  drawer: R,
+  drawer__content: T,
+  drawer__header: E,
+  drawer__footer: F,
+  drawer__heading: K,
+  "drawer--open": "_drawer--open_1ytb4_59",
+  drawer__buttons: S
+}, q = 200;
+function L({
+  buttons: s,
+  children: n,
+  isOpen: a,
+  onClose: c,
+  title: l,
+  closeButtonAriaValueText: i = "Close",
+  ...f
+}) {
+  const [w, t] = P(e.drawer), { modalProps: b } = u({ isDisabled: !a }), o = v(null);
+  function d() {
+    t(e.drawer), globalThis.setTimeout(() => {
+      c();
+    }, q);
+  }
+  const { overlayProps: m, underlayProps: h } = y(
+    { isDismissable: !0, isKeyboardDismissDisabled: !1, isOpen: a, onClose: d },
+    o
+  ), { dialogProps: p, titleProps: $ } = x({}, o);
+  return g({ isDisabled: !a }), j(() => {
+    t(N(e.drawer, { [e["drawer--open"]]: a }));
+  }, [a]), /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(k, { ...h, children: /* @__PURE__ */ r(D, { contain: !0, restoreFocus: !0, children: /* @__PURE__ */ _(
+    "aside",
+    {
+      ...b,
+      ...m,
+      ...p,
+      ...f,
+      className: w,
+      ref: o,
+      children: [
+        /* @__PURE__ */ _("header", { className: e.drawer__header, children: [
+          /* @__PURE__ */ r("h1", { className: e.drawer__heading, ...$, children: l }),
+          /* @__PURE__ */ r(B, { "aria-label": i, onClick: d })
+        ] }),
+        /* @__PURE__ */ r("div", { className: e.drawer__content, children: n }),
+        s && /* @__PURE__ */ r("footer", { className: e.drawer__footer, children: /* @__PURE__ */ r("div", { className: e.drawer__buttons, children: s }) })
+      ]
+    }
+  ) }) }) });
+}
+export {
+  L as Drawer
+};
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +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  buttons?: ReactNode;\n  isOpen?: boolean;\n  onClose: () => void;\n  title: string;\n  closeButtonAriaValueText?: string;\n}\n\nconst closingDelay = 200;\n\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":";;;;;;;;;;;;;;GAqBMA,IAAe;AAEd,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;OACPL,CAAY;AAAA,EACjB;AAIM,QAAA,EAAE,cAAAkB,GAAc,eAAAC,EAAA,IAAkBC;AAAAA,IACtC,EAAE,eAAe,IAAM,2BAA2B,IAAO,QAAAhB,GAAQ,SAASa,EAAc;AAAA,IACxFF;AAAA,EAAA,GAII,EAAE,aAAAM,GAAa,YAAAC,EAAA,IAAeC,EAAU,CAAA,GAAIR,CAAU;AAE5DS,SAAAA,EAAiB,EAAE,YAAY,CAACpB,EAAQ,CAAA,GAExCqB,EAAU,MAAM;AAGS,IAAAf,EAAAgB,EAAKd,EAAO,QAAQ,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGR,EAAQ,CAAA,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,GAAe;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,EAAQ,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN,GACF,EACF,CAAA;AAEJ;"}

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

@@ -0,0 +1,6 @@
+import { DrawerProps } from './Drawer';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, DrawerProps>;
+export default _default;
+export declare const DrawerExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
+export declare const WithButtons: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;

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

@@ -0,0 +1,57 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { a as m } from "../../useDialog-DDVWB2iX.js";
+import { f as p } from "../../index-DFUrxrKJ.js";
+import { useState as c } from "react";
+import { Drawer as n } from "./Drawer.js";
+import { Button as t } from "../Button/Button.js";
+import { ButtonGroup as u } from "../ButtonGroup/ButtonGroup.js";
+const E = {
+  title: "Molecules/Drawer",
+  component: n,
+  argTypes: {
+    isOpen: {
+      table: {
+        disable: !0
+      }
+    },
+    buttons: {
+      table: {
+        disable: !0
+      }
+    }
+  }
+}, s = (l) => {
+  const [r, a] = c(!1);
+  return /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ e(t, { onClick: () => a(!r), variant: "primary", children: "Open drawer" }),
+    r && /* @__PURE__ */ e(
+      n,
+      {
+        ...l,
+        isOpen: r,
+        onClose: () => (p()(), a(!r)),
+        children: "Example Drawer Content"
+      }
+    )
+  ] });
+}, i = {
+  title: "Example Title",
+  closeButtonAriaValueText: "Close"
+}, d = s.bind({});
+d.args = {
+  ...i
+};
+const f = s.bind({});
+f.args = {
+  ...i,
+  buttons: /* @__PURE__ */ o(u, { children: [
+    /* @__PURE__ */ e(t, { variant: "primary", children: "Primary Example Button" }),
+    /* @__PURE__ */ e(t, { variant: "secondary", children: "Secondary Example Button" })
+  ] })
+};
+export {
+  d as DrawerExample,
+  f as WithButtons,
+  E as default
+};
+//# sourceMappingURL=Drawer.stories.js.map

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

@@ -0,0 +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/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\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  },\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":["Drawer_stories","Drawer","Template","args","isOpen","setIsOpen","useState","OverlayProvider","jsx","Button","fn","defaultArgs","DrawerExample","WithButtons","ButtonGroup"],"mappings":";;;;;;;AAaA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,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,EAAK,EAAA,GACEL,EAAU,CAACD,CAAM;AAAA,QAE3B,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEMO,IAAoC;AAAA,EACxC,OAAO;AAAA,EACP,0BAA0B;AAC5B,GAEaC,IAAgBV,EAAS,KAAK,EAAE;AAC7CU,EAAc,OAAO;AAAA,EACnB,GAAGD;AACL;AAEO,MAAME,IAAcX,EAAS,KAAK,EAAE;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,4BAAA;AAAA,EAAA,GACtD;AAEJ;"}

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

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

package/dist/components/Drawer/index.js

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

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

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

package/dist/components/ModalDialog/ModalDialog.js

@@ -1,11 +1,108 @@
-import "react/jsx-runtime";
-import { M } from "../../ModalDialog-B1c9QYLZ.js";
-import "../../clsx-DB4S2d7J.js";
-import "react";
-import "../Backdrop/Backdrop.js";
-import "../OverlayCloseButton/OverlayCloseButton.js";
-import "../Spinner/Spinner.js";
+import { jsx as a, Fragment as f, jsxs as r } from "react/jsx-runtime";
+import { d as k, b as A, c as K, e as L, f as M, g as O } from "../../useDialog-DDVWB2iX.js";
+import { c as l } from "../../clsx-DB4S2d7J.js";
+import { useRef as S } from "react";
+import { Backdrop as R } from "../Backdrop/Backdrop.js";
+import { OverlayCloseButton as U } from "../OverlayCloseButton/OverlayCloseButton.js";
+import { Spinner as q } from "../Spinner/Spinner.js";
+import '../../assets/ModalDialog.css';const o = {
+  "modal-dialog": "_modal-dialog_14t7m_1",
+  "modal-dialog--padded": "_modal-dialog--padded_14t7m_18",
+  "modal-dialog__content": "_modal-dialog__content_14t7m_22",
+  "modal-dialog__children": "_modal-dialog__children_14t7m_32",
+  "modal-dialog__title": "_modal-dialog__title_14t7m_36",
+  "modal-dialog--confirm": "_modal-dialog--confirm_14t7m_43",
+  "modal-dialog__buttons": "_modal-dialog__buttons_14t7m_47",
+  "modal-dialog--buttons-border": "_modal-dialog--buttons-border_14t7m_60",
+  "modal-dialog__close": "_modal-dialog__close_14t7m_64",
+  "modal-dialog--slim": "_modal-dialog--slim_14t7m_82",
+  "modal-dialog--wide": "_modal-dialog--wide_14t7m_86",
+  "modal-dialog--content-with-buttons": "_modal-dialog--content-with-buttons_14t7m_100"
+};
+function W(p) {
+  const {
+    buttons: e,
+    children: u,
+    isDismissable: s = !0,
+    isKeyboardDismissDisabled: b = !s,
+    isLoading: h,
+    spinnerAriaValueText: $ = "Loading",
+    closeButtonAriaValueText: x = "Close",
+    isOpen: d,
+    noValidate: w = !1,
+    onClose: n,
+    onSubmit: v,
+    role: y = "dialog",
+    title: i,
+    headerContent: _,
+    variant: t = "dialog",
+    padded: c,
+    slim: D,
+    wide: N,
+    noButtonBorder: g = !1
+  } = p, m = S(null), { dialogProps: P, titleProps: B } = k({ role: y }, m), { modalProps: C } = A({ isDisabled: !d }), { overlayProps: V, underlayProps: F } = K(
+    { isDismissable: s, isKeyboardDismissDisabled: b, isOpen: d, onClose: n },
+    m
+  );
+  L({ isDisabled: !d });
+  function T(j) {
+    j.stopPropagation();
+  }
+  return d ? /* @__PURE__ */ a(M, { children: /* @__PURE__ */ a(R, { ...F, children: h ? /* @__PURE__ */ a(q, { ariaValueText: $ }) : /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(O, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ r(
+    "div",
+    {
+      ...P,
+      ...C,
+      ...V,
+      className: l(o["modal-dialog"], {
+        [o["modal-dialog--confirm"]]: t === "confirm",
+        [o["modal-dialog--padded"]]: c,
+        [o["modal-dialog--slim"]]: D,
+        [o["modal-dialog--wide"]]: N
+      }),
+      onKeyUp: T,
+      role: "presentation",
+      ref: m,
+      children: [
+        (i || _) && t === "dialog" && /* @__PURE__ */ r(f, { children: [
+          i && /* @__PURE__ */ a("h1", { ...B, className: o["modal-dialog__title"], children: i }),
+          _,
+          t === "dialog" && /* @__PURE__ */ a("span", { className: o["modal-dialog__close"], children: /* @__PURE__ */ a(
+            U,
+            {
+              "aria-label": x,
+              onClick: n,
+              paddedModal: c
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r(
+          "form",
+          {
+            className: l(o["modal-dialog__content"], {
+              [o["modal-dialog--content-with-buttons"]]: e
+            }),
+            onSubmit: v,
+            noValidate: w,
+            children: [
+              /* @__PURE__ */ a("div", { className: l({ [o["modal-dialog__children"]]: !g }), children: u }),
+              e && /* @__PURE__ */ a(
+                "div",
+                {
+                  className: l(o["modal-dialog__buttons"], {
+                    [o["modal-dialog--buttons-border"]]: !g
+                  }),
+                  children: e
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) }) }) }) }) : null;
+}
 export {
-  M as ModalDialog
+  W as ModalDialog
 };
 //# sourceMappingURL=ModalDialog.js.map

package/dist/components/ModalDialog/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames from 'clsx';\nimport { useRef } from 'react';\n\nimport type { AriaDialogProps } from '@react-types/dialog';\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n  buttons?: ReactNode;\n  isDismissable?: boolean;\n  isKeyboardDismissDisabled?: boolean;\n  isLoading?: boolean;\n  spinnerAriaValueText?: string;\n  closeButtonAriaValueText?: string;\n  isOpen: boolean;\n  noValidate?: boolean;\n  onClose?(): void;\n  onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n  role?: AriaDialogProps['role'];\n  title?: string;\n  headerContent?: ReactNode;\n  variant?: 'confirm' | 'dialog';\n  padded?: boolean;\n  slim?: boolean;\n  wide?: boolean;\n  noButtonBorder?: boolean;\n}\n\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n  const {\n    buttons,\n    children,\n    isDismissable = true,\n    isKeyboardDismissDisabled = !isDismissable,\n    isLoading,\n    spinnerAriaValueText = 'Loading',\n    closeButtonAriaValueText = 'Close',\n    isOpen,\n    noValidate = false,\n    onClose,\n    onSubmit,\n    role = 'dialog',\n    title,\n    headerContent,\n    variant = 'dialog',\n    padded,\n    slim,\n    wide,\n    noButtonBorder = false,\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const { dialogProps, titleProps } = useDialog({ role }, ref);\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n    ref\n  );\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  function onKeyUp(event: KeyboardEvent) {\n    event.stopPropagation();\n  }\n\n  if (!isOpen) return null;\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        {isLoading ? (\n          <Spinner ariaValueText={spinnerAriaValueText} />\n        ) : (\n          <>\n            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n            <FocusScope autoFocus contain restoreFocus>\n              <div\n                {...dialogProps}\n                {...modalProps}\n                {...overlayProps}\n                className={classNames(styles['modal-dialog'], {\n                  [styles['modal-dialog--confirm']]: variant === 'confirm',\n                  [styles['modal-dialog--padded']]: padded,\n                  [styles['modal-dialog--slim']]: slim,\n                  [styles['modal-dialog--wide']]: wide,\n                })}\n                onKeyUp={onKeyUp}\n                role=\"presentation\"\n                ref={ref}\n              >\n                {(title || headerContent) && variant === 'dialog' && (\n                  <>\n                    {title && (\n                      <h1 {...titleProps} className={styles['modal-dialog__title']}>\n                        {title}\n                      </h1>\n                    )}\n                    {headerContent}\n                    {variant === 'dialog' && (\n                      <span className={styles['modal-dialog__close']}>\n                        <OverlayCloseButton\n                          aria-label={closeButtonAriaValueText}\n                          onClick={onClose}\n                          paddedModal={padded}\n                        />\n                      </span>\n                    )}\n                  </>\n                )}\n                <form\n                  className={classNames(styles['modal-dialog__content'], {\n                    [styles['modal-dialog--content-with-buttons']]: buttons,\n                  })}\n                  onSubmit={onSubmit}\n                  noValidate={noValidate}\n                >\n                  <div className={classNames({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n                  {buttons && (\n                    <div\n                      className={classNames(styles['modal-dialog__buttons'], {\n                        [styles['modal-dialog--buttons-border']]: !noButtonBorder,\n                      })}\n                    >\n                      {buttons}\n                    </div>\n                  )}\n                </form>\n              </div>\n            </FocusScope>\n          </>\n        )}\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","slim","wide","noButtonBorder","ref","useRef","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","classNames","styles","OverlayCloseButton"],"mappings":"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"}

package/dist/components/ModalDialog/ModalDialog.stories.js

@@ -1,14 +1,15 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { M as l, $ as d } from "../../ModalDialog-B1c9QYLZ.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { $ as d } from "../../useDialog-DDVWB2iX.js";
 import { f as o } from "../../index-DFUrxrKJ.js";
+import { ModalDialog as a } from "./ModalDialog.js";
 import { Button as t } from "../Button/Button.js";
 import { ButtonGroup as s } from "../ButtonGroup/ButtonGroup.js";
 import { FormField as m } from "../FormField/FormField.js";
 import { InputField as p } from "../InputField/InputField.js";
 import { Label as c } from "../Label/Label.js";
-const F = {
+const v = {
   title: "Molecules/ModalDialog",
-  component: l,
+  component: a,
   argTypes: {
     isOpen: {
       table: {
@@ -38,7 +39,7 @@ const F = {
       }
     }
   }
-}, i = (n) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(l, { ...n, children: /* @__PURE__ */ a(m, { outerSpace: !0, children: [
+}, i = (n) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(a, { ...n, children: /* @__PURE__ */ l(m, { outerSpace: !0, children: [
   /* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
   /* @__PURE__ */ e(p, { id: "text-field" })
 ] }) }) }), r = {
@@ -53,7 +54,7 @@ const F = {
   noValidate: !1,
   onSubmit: o(),
   onClose: o(),
-  buttons: /* @__PURE__ */ a(s, { reversed: !0, children: [
+  buttons: /* @__PURE__ */ l(s, { reversed: !0, children: [
     /* @__PURE__ */ e(t, { variant: "primary", onClick: o(), children: "OK" }),
     /* @__PURE__ */ e(t, { variant: "secondary", onClick: o(), children: "Cancel" })
   ] }),
@@ -71,6 +72,6 @@ f.args = {
 export {
   f as Loading,
   u as ModalDialogExample,
-  F as default
+  v as default
 };
 //# sourceMappingURL=ModalDialog.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/ModalDialog',\n  component: ModalDialog,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    noValidate: {\n      control: 'boolean',\n    },\n    role: {\n      control: 'radio',\n      options: ['dialog', 'alertdialog'],\n    },\n    onSubmit: {\n      table: {\n        disable: true,\n      },\n    },\n    onClose: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args) => (\n  <ModalProvider>\n    <ModalDialog {...args}>\n      <FormField outerSpace>\n        <Label htmlFor=\"text-field\">Example Text Field</Label>\n        <InputField id=\"text-field\" />\n      </FormField>\n    </ModalDialog>\n  </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n  padded: false,\n  slim: false,\n  wide: false,\n  noButtonBorder: false,\n  variant: 'dialog',\n  role: 'dialog',\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n  noValidate: false,\n  onSubmit: fn(),\n  onClose: fn(),\n  buttons: (\n    <ButtonGroup reversed>\n      <Button variant=\"primary\" onClick={fn()}>\n        OK\n      </Button>\n      <Button variant=\"secondary\" onClick={fn()}>\n        Cancel\n      </Button>\n    </ButtonGroup>\n  ),\n  isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n  ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n  ...defaultArgs,\n  isLoading: true,\n  spinnerAriaValueText: 'Loading',\n};\n"],"names":["ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading"],"mappings":";;;;;;;;AAeA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,cAAa,UAAkB,sBAAA;AAAA,EAC9C,gBAAAJ,EAACK,GAAW,EAAA,IAAG,aAAa,CAAA;AAAA,GAC9B,GACF,EACF,CAAA,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAG;AAAA,EACb,SAASA,EAAG;AAAA,EACZ,SACE,gBAAAL,EAACM,GAAY,EAAA,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,KAAM,UAEzC,MAAA;AAAA,sBACCE,GAAO,EAAA,SAAQ,aAAY,SAASF,KAAM,UAE3C,UAAA;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,EAAE;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,EAAE;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;"}
+{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/ModalDialog',\n  component: ModalDialog,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    noValidate: {\n      control: 'boolean',\n    },\n    role: {\n      control: 'radio',\n      options: ['dialog', 'alertdialog'],\n    },\n    onSubmit: {\n      table: {\n        disable: true,\n      },\n    },\n    onClose: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args) => (\n  <ModalProvider>\n    <ModalDialog {...args}>\n      <FormField outerSpace>\n        <Label htmlFor=\"text-field\">Example Text Field</Label>\n        <InputField id=\"text-field\" />\n      </FormField>\n    </ModalDialog>\n  </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n  padded: false,\n  slim: false,\n  wide: false,\n  noButtonBorder: false,\n  variant: 'dialog',\n  role: 'dialog',\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n  noValidate: false,\n  onSubmit: fn(),\n  onClose: fn(),\n  buttons: (\n    <ButtonGroup reversed>\n      <Button variant=\"primary\" onClick={fn()}>\n        OK\n      </Button>\n      <Button variant=\"secondary\" onClick={fn()}>\n        Cancel\n      </Button>\n    </ButtonGroup>\n  ),\n  isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n  ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n  ...defaultArgs,\n  isLoading: true,\n  spinnerAriaValueText: 'Loading',\n};\n"],"names":["ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading"],"mappings":";;;;;;;;;AAeA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,cAAa,UAAkB,sBAAA;AAAA,EAC9C,gBAAAJ,EAACK,GAAW,EAAA,IAAG,aAAa,CAAA;AAAA,GAC9B,GACF,EACF,CAAA,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAG;AAAA,EACb,SAASA,EAAG;AAAA,EACZ,SACE,gBAAAL,EAACM,GAAY,EAAA,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,KAAM,UAEzC,MAAA;AAAA,sBACCE,GAAO,EAAA,SAAQ,aAAY,SAASF,KAAM,UAE3C,UAAA;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,EAAE;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,EAAE;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;"}

package/dist/components/ModalDialog/index.js

@@ -1,4 +1,4 @@
-import { M as l } from "../../ModalDialog-B1c9QYLZ.js";
+import { ModalDialog as l } from "./ModalDialog.js";
 export {
   l as ModalDialog
 };

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

@@ -5,10 +5,10 @@ import { Container as n } from "../storyComponents/Container/Container.js";
 import "react";
 import { Icon as m } from "../Icon/Icon.js";
 import "../Button/Button.js";
+import "../OverlayCloseButton/OverlayCloseButton.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
-import "../OverlayCloseButton/OverlayCloseButton.js";
 import { Repeater as i } from "../Repeater/Repeater.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";

package/dist/components/StatusPill/StatusPill.d.ts

@@ -0,0 +1,6 @@
+export interface StatusPillProps {
+    status: 'possible' | 'impossible';
+    variant?: 'default' | 'bar';
+    label: string;
+}
+export declare function StatusPill({ status, variant, label }: StatusPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/StatusPill/StatusPill.js

@@ -0,0 +1,32 @@
+import { jsxs as p, jsx as _ } from "react/jsx-runtime";
+import { c as e } from "../../clsx-DB4S2d7J.js";
+import { Icon as a } from "../Icon/Icon.js";
+import '../../assets/StatusPill.css';const l = {
+  "status-pill": "_status-pill_x7rv2_1",
+  "status-pill__possible": "_status-pill__possible_x7rv2_10",
+  "status-pill__impossible": "_status-pill__impossible_x7rv2_15",
+  "status-pill--bar": "_status-pill--bar_x7rv2_20"
+}, o = {
+  possible: "CheckCircleFillMini",
+  impossible: "CrossCircleFillMini"
+};
+function m({ status: s, variant: i = "default", label: t }) {
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      className: e(
+        l["status-pill"],
+        l[`status-pill__${s}`],
+        i !== "default" && l[`status-pill--${i}`]
+      ),
+      children: [
+        /* @__PURE__ */ _(a, { name: o[s], title: s, size: 16 }),
+        t
+      ]
+    }
+  );
+}
+export {
+  m as StatusPill
+};
+//# sourceMappingURL=StatusPill.js.map

package/dist/components/StatusPill/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n  status: 'possible' | 'impossible';\n  variant?: 'default' | 'bar';\n  label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n  possible: 'CheckCircleFillMini',\n  impossible: 'CrossCircleFillMini',\n};\n\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n  return (\n    <span\n      className={clsx(\n        styles['status-pill'],\n        styles[`status-pill__${status}`],\n        variant !== 'default' && styles[`status-pill--${variant}`]\n      )}\n    >\n      <Icon name={iconNameMap[status]!} title={status} size={16} />\n      {label}\n    </span>\n  );\n}\n"],"names":["iconNameMap","StatusPill","status","variant","label","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAcMA,IAA6E;AAAA,EACjF,UAAU;AAAA,EACV,YAAY;AACd;AAEO,SAASC,EAAW,EAAE,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,KAA0B;AAEhF,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,aAAa;AAAA,QACpBA,EAAO,gBAAgBL,CAAM,EAAE;AAAA,QAC/BC,MAAY,aAAaI,EAAO,gBAAgBJ,CAAO,EAAE;AAAA,MAC3D;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAK,EAAAC,GAAA,EAAK,MAAMT,EAAYE,CAAM,GAAI,OAAOA,GAAQ,MAAM,IAAI;AAAA,QAC1DE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,5 @@
+import { StatusPillProps } from './StatusPill';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, StatusPillProps>;
+export default _default;
+export declare const StatusPillExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, StatusPillProps>;

package/dist/components/StatusPill/StatusPill.stories.js

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+import { StatusPill as l } from "./StatusPill.js";
+import { Container as a } from "../storyComponents/Container/Container.js";
+const n = {
+  title: "Molecules/StatusPill",
+  component: l
+}, e = (s) => /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(l, { ...s }) }), o = e.bind({});
+o.args = {
+  status: "possible",
+  variant: "default",
+  label: "Example Status Pill"
+};
+export {
+  o as StatusPillExample,
+  n as default
+};
+//# sourceMappingURL=StatusPill.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.stories.js","sources":["../../../src/components/StatusPill/StatusPill.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusPillProps } from './StatusPill';\n\nimport { StatusPill } from './StatusPill';\n\nimport { Container } from 'components/storyComponents/Container';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/StatusPill',\n  component: StatusPill,\n} as Meta<StatusPillProps>;\n\nconst Template: StoryFn<StatusPillProps> = (args) => (\n  <Container>\n    <StatusPill {...args} />\n  </Container>\n);\n\nexport const StatusPillExample = Template.bind({});\nStatusPillExample.args = {\n  status: 'possible',\n  variant: 'default',\n  label: 'Example Status Pill',\n};\n"],"names":["StatusPill_stories","StatusPill","Template","args","jsx","Container","StatusPillExample"],"mappings":";;;AAQA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAqC,CAACC,MAC1C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAY,GAAGE,EAAM,CAAA,EACxB,CAAA,GAGWG,IAAoBJ,EAAS,KAAK,EAAE;AACjDI,EAAkB,OAAO;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AACT;"}

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

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

package/dist/components/StatusPill/index.js

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

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

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

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './Button';
 export * from './ButtonGroup';
 export * from './Card';
 export * from './Checkbox';
+export * from './Drawer';
 export * from './FieldHint';
 export * from './FormField';
 export * from './Icon';
@@ -24,4 +25,5 @@ export * from './SectionNotification';
 export * from './SelectListbox';
 export * from './SelectListbox/SelectProvider';
 export * from './Spinner';
+export * from './StatusPill';
 export * from './Tooltip';

package/dist/components/index.js

@@ -2,57 +2,61 @@ import { Accordion as t } from "./Accordion/Accordion.js";
 import { AppStatusBar as p } from "./AppStatusBar/AppStatusBar.js";
 import { Backdrop as f } from "./Backdrop/Backdrop.js";
 import { Button as a } from "./Button/Button.js";
-import { ButtonGroup as i } from "./ButtonGroup/ButtonGroup.js";
-import { Card as c } from "./Card/Card.js";
+import { ButtonGroup as n } from "./ButtonGroup/ButtonGroup.js";
+import { Card as u } from "./Card/Card.js";
 import { Checkbox as d } from "./Checkbox/Checkbox.js";
-import { FieldHint as B } from "./FieldHint/FieldHint.js";
-import { FormField as S } from "./FormField/FormField.js";
-import { Icon as C } from "./Icon/Icon.js";
-import { IconButton as L } from "./IconButton/IconButton.js";
-import { InfoMessage as g } from "./InfoMessage/InfoMessage.js";
+import { Drawer as B } from "./Drawer/Drawer.js";
+import { FieldHint as I } from "./FieldHint/FieldHint.js";
+import { FormField as C } from "./FormField/FormField.js";
+import { Icon as L } from "./Icon/Icon.js";
+import { IconButton as g } from "./IconButton/IconButton.js";
+import { InfoMessage as D } from "./InfoMessage/InfoMessage.js";
 import { Input as v } from "./Input/Input.js";
-import { InputField as D } from "./InputField/InputField.js";
-import { Label as R } from "./Label/Label.js";
-import { M as y } from "../MenuLink-CLEqkVVh.js";
-import { MetaDataList as H } from "./MetaDataList/MetaDataList.js";
-import { M as O } from "../ModalDialog-B1c9QYLZ.js";
-import { OverlayCloseButton as j } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { ProgrammeCard as w } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as E } from "./RadioButton/RadioButton.js";
-import { Repeater as K } from "./Repeater/Repeater.js";
-import { SectionNotification as U } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as W } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as Y, useSelect as Z } from "./SelectListbox/SelectProvider.js";
-import { Spinner as $ } from "./Spinner/Spinner.js";
-import { Tooltip as ro } from "./Tooltip/Tooltip.js";
+import { InputField as R } from "./InputField/InputField.js";
+import { Label as w } from "./Label/Label.js";
+import { M as G } from "../MenuLink-CLEqkVVh.js";
+import { MetaDataList as N } from "./MetaDataList/MetaDataList.js";
+import { ModalDialog as T } from "./ModalDialog/ModalDialog.js";
+import { OverlayCloseButton as q } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { ProgrammeCard as E } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as K } from "./RadioButton/RadioButton.js";
+import { Repeater as U } from "./Repeater/Repeater.js";
+import { SectionNotification as W } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as Y } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as _, useSelect as $ } from "./SelectListbox/SelectProvider.js";
+import { Spinner as ro } from "./Spinner/Spinner.js";
+import { StatusPill as eo } from "./StatusPill/StatusPill.js";
+import { Tooltip as mo } from "./Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
   f as Backdrop,
   a as Button,
-  i as ButtonGroup,
-  c as Card,
+  n as ButtonGroup,
+  u as Card,
   d as Checkbox,
-  B as FieldHint,
-  S as FormField,
-  C as Icon,
-  L as IconButton,
-  g as InfoMessage,
+  B as Drawer,
+  I as FieldHint,
+  C as FormField,
+  L as Icon,
+  g as IconButton,
+  D as InfoMessage,
   v as Input,
-  D as InputField,
-  R as Label,
-  y as MenuLink,
-  H as MetaDataList,
-  O as ModalDialog,
-  j as OverlayCloseButton,
-  w as ProgrammeCard,
-  E as RadioButton,
-  K as Repeater,
-  U as SectionNotification,
-  W as SelectListbox,
-  Y as SelectProvider,
-  $ as Spinner,
-  ro as Tooltip,
-  Z as useSelect
+  R as InputField,
+  w as Label,
+  G as MenuLink,
+  N as MetaDataList,
+  T as ModalDialog,
+  q as OverlayCloseButton,
+  E as ProgrammeCard,
+  K as RadioButton,
+  U as Repeater,
+  W as SectionNotification,
+  Y as SelectListbox,
+  _ as SelectProvider,
+  ro as Spinner,
+  eo as StatusPill,
+  mo as Tooltip,
+  $ 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}