@uva-glass/component-library 1.42.1 → 1.43.0

package/dist/components/IconButton/IconButton.d.ts

@@ -1,5 +1,4 @@
 import { ButtonHTMLAttributes } from 'react';
-
 export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     'aria-label': string;
     variant?: 'destructive';

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { IconButtonProps } from 'components/IconButton';
-
 declare const _default: Meta<IconButtonProps>;
 export default _default;
 export declare const IconButtonExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconButtonProps>;

package/dist/components/InfoMessage/InfoMessage.d.ts

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from 'react';
-
 export interface InfoMessageProps {
     message: string;
     hasOwnContainer?: boolean;

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { InfoMessageProps } from './InfoMessage';
-
 declare const _default: Meta<InfoMessageProps>;
 export default _default;
 export declare const InfoMessageExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InfoMessageProps>;

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,4 @@
 import { InputHTMLAttributes } from 'react';
-
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
     appearance?: 'error';
     type?: 'text' | 'search' | 'password' | 'email' | 'file';

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { InputProps } from './Input';
-
 declare const _default: Meta<InputProps>;
 export default _default;
 export declare const InputExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;

package/dist/components/InputField/InputField.d.ts

@@ -1,5 +1,4 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
-
 export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
     variant?: 'large';
     type?: 'text' | 'password' | 'email';

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { InputFieldProps } from './InputField';
-
 declare const _default: Meta<InputFieldProps>;
 export default _default;
 export declare const InputFieldExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;

package/dist/components/Label/Label.d.ts

@@ -1,5 +1,4 @@
 import { LabelHTMLAttributes } from 'react';
-
 export interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {
     htmlFor: string;
     noFontWeight?: boolean;

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { LabelProps } from './Label';
-
 declare const _default: Meta<LabelProps>;
 export default _default;
 export declare const LabelExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, LabelProps>;

package/dist/components/MenuButton/MenuButton.d.ts

@@ -3,7 +3,6 @@ import { AriaButtonProps } from '@react-aria/button';
 import { IconProps } from 'components/Icon';
 import { RefObject } from 'react';
 import { UIButtonVariant } from 'types/UserInterface';
-
 export interface MenuButtonProps extends AriaButtonProps<'button'> {
     buttonRef: RefObject<HTMLButtonElement>;
     variant: UIButtonVariant;

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { MenuButtonProps } from './MenuButton';
-
 declare const _default: Meta<MenuButtonProps>;
 export default _default;
 export declare const MenuButtonExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MenuButtonProps>;

package/dist/components/MenuLink/MenuLink.d.ts

@@ -1,3 +1,2 @@
 import { NavLinkProps } from 'react-router-dom';
-
 export declare const MenuLink: (props: Omit<NavLinkProps, "style">) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
 import { NavLinkProps } from 'react-router-dom';
 import { Meta } from '@storybook/react';
-
 declare const _default: Meta<Omit<NavLinkProps, "style">>;
 export default _default;
 export declare const MenuLinkExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, Omit<NavLinkProps, "style">>;

package/dist/components/MetaDataList/MetaDataList.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 export interface MetaDataListProps {
     items: Record<string, ReactNode>;
 }

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { MetaDataListProps } from './MetaDataList';
-
 declare const _default: Meta<MetaDataListProps>;
 export default _default;
 export declare const MetaDataListExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MetaDataListProps>;

package/dist/components/ModalDialog/ModalDialog.d.ts

@@ -1,6 +1,5 @@
 import { AriaDialogProps } from '@react-types/dialog';
 import { FormHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-
 export interface ModalDialogProps {
     buttons?: ReactNode;
     isDismissable?: boolean;

package/dist/components/ModalDialog/ModalDialog.js

@@ -1,98 +1,119 @@
-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-DZhIlo2a.js";
-import { c as l } from "../../clsx-OuTLNxxd.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 { jsx as l, Fragment as $, jsxs as c } from "react/jsx-runtime";
+import { d as q, b as G, c as J, e as Q, f as W, g as X } from "../../useDialog-DZhIlo2a.js";
+import { c as i } from "../../clsx-OuTLNxxd.js";
+import { useRef as x, useState as v, useEffect as Y } from "react";
+import { Backdrop as Z } from "../Backdrop/Backdrop.js";
+import { OverlayCloseButton as oo } from "../OverlayCloseButton/OverlayCloseButton.js";
+import { Spinner as ao } 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"
+  "modal-dialog": "_modal-dialog_1w1ar_1",
+  "modal-dialog--padded": "_modal-dialog--padded_1w1ar_18",
+  "modal-dialog__content": "_modal-dialog__content_1w1ar_22",
+  "modal-dialog__children": "_modal-dialog__children_1w1ar_33",
+  "modal-dialog__title": "_modal-dialog__title_1w1ar_37",
+  "modal-dialog--confirm": "_modal-dialog--confirm_1w1ar_44",
+  "modal-dialog__buttons": "_modal-dialog__buttons_1w1ar_48",
+  "modal-dialog__buttons--border": "_modal-dialog__buttons--border_1w1ar_61",
+  "modal-dialog__buttons--shadow": "_modal-dialog__buttons--shadow_1w1ar_78",
+  "modal-dialog__close": "_modal-dialog__close_1w1ar_82",
+  "modal-dialog--slim": "_modal-dialog--slim_1w1ar_100",
+  "modal-dialog--wide": "_modal-dialog--wide_1w1ar_104",
+  "modal-dialog--content-with-buttons": "_modal-dialog--content-with-buttons_1w1ar_118"
 };
-function W(p) {
+function co(S) {
   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
+    buttons: t,
+    children: T,
+    isDismissable: m = !0,
+    isKeyboardDismissDisabled: B = !m,
+    isLoading: y,
+    spinnerAriaValueText: D = "Loading",
+    closeButtonAriaValueText: E = "Close",
+    isOpen: e,
+    noValidate: L = !1,
+    onClose: _,
+    onSubmit: N,
+    role: P = "dialog",
+    title: r,
+    headerContent: g,
+    variant: s = "dialog",
+    padded: f,
+    slim: C,
+    wide: H,
+    noButtonBorder: u = !1
+  } = S, n = x(null), p = x(null), [V, k] = v(!1), [z, A] = v(!1), { dialogProps: F, titleProps: I } = q({ role: P }, n), { modalProps: R } = G({ isDisabled: !e }), { overlayProps: j, underlayProps: K } = J(
+    { isDismissable: m, isKeyboardDismissDisabled: B, isOpen: e, onClose: _ },
+    n
   );
-  L({ isDisabled: !d });
-  function T(j) {
-    j.stopPropagation();
+  Q({ isDisabled: !e }), Y(() => {
+    const a = p.current;
+    function b() {
+      if (a) {
+        const h = a.scrollHeight, w = a.clientHeight, U = a.scrollTop;
+        k(h > w), A(U + w >= h);
+      }
+    }
+    function d() {
+      b();
+    }
+    a && (a.addEventListener("scroll", d), window.addEventListener("resize", d));
+    const O = setTimeout(() => {
+      b();
+    }, 0);
+    return () => {
+      a && a.removeEventListener("scroll", d), window.removeEventListener("resize", d), clearTimeout(O);
+    };
+  }, [e]);
+  function M(a) {
+    a.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(
+  return e ? /* @__PURE__ */ l(W, { children: /* @__PURE__ */ l(Z, { ...K, children: y ? /* @__PURE__ */ l(ao, { ariaValueText: D }) : /* @__PURE__ */ l($, { children: /* @__PURE__ */ l(X, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
     "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
+      ...F,
+      ...R,
+      ...j,
+      className: i(o["modal-dialog"], {
+        [o["modal-dialog--confirm"]]: s === "confirm",
+        [o["modal-dialog--padded"]]: f,
+        [o["modal-dialog--slim"]]: C,
+        [o["modal-dialog--wide"]]: H
       }),
-      onKeyUp: T,
+      onKeyUp: M,
       role: "presentation",
-      ref: m,
+      ref: n,
       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,
+        (r || g) && s === "dialog" && /* @__PURE__ */ c($, { children: [
+          r && /* @__PURE__ */ l("h1", { ...I, className: o["modal-dialog__title"], children: r }),
+          g,
+          s === "dialog" && /* @__PURE__ */ l("span", { className: o["modal-dialog__close"], children: /* @__PURE__ */ l(
+            oo,
             {
-              "aria-label": x,
-              onClick: n,
-              paddedModal: c
+              "aria-label": E,
+              onClick: _,
+              paddedModal: f
             }
           ) })
         ] }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ c(
           "form",
           {
-            className: l(o["modal-dialog__content"], {
-              [o["modal-dialog--content-with-buttons"]]: e
+            className: i(o["modal-dialog__content"], {
+              [o["modal-dialog--content-with-buttons"]]: t
             }),
-            onSubmit: v,
-            noValidate: w,
+            onSubmit: N,
+            noValidate: L,
+            ref: p,
             children: [
-              /* @__PURE__ */ a("div", { className: l({ [o["modal-dialog__children"]]: !g }), children: u }),
-              e && /* @__PURE__ */ a(
+              /* @__PURE__ */ l("div", { className: i({ [o["modal-dialog__children"]]: !u }), children: T }),
+              t && /* @__PURE__ */ l(
                 "div",
                 {
-                  className: l(o["modal-dialog__buttons"], {
-                    [o["modal-dialog--buttons-border"]]: !g
+                  className: i(o["modal-dialog__buttons"], {
+                    [o["modal-dialog__buttons--border"]]: !u,
+                    [o["modal-dialog__buttons--shadow"]]: V && !z
                   }),
-                  children: e
+                  children: t
                 }
               )
             ]
@@ -103,6 +124,6 @@ function W(p) {
   ) }) }) }) }) : null;
 }
 export {
-  W as ModalDialog
+  co as ModalDialog
 };
 //# sourceMappingURL=ModalDialog.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"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 { useEffect, useRef, useState } 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\n  const ref = useRef<HTMLDivElement>(null);\n  const formRef = useRef<HTMLFormElement>(null);\n  const [isScrollable, setIsScrollable] = useState(false);\n  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\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  useEffect(() => {\n    const formElement = formRef.current;\n\n    function checkScrollable() {\n      if (formElement) {\n        const scrollHeight = formElement.scrollHeight;\n        const clientHeight = formElement.clientHeight;\n        const scrollTop = formElement.scrollTop;\n\n        setIsScrollable(scrollHeight > clientHeight);\n        setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n      }\n    }\n\n    function handleScrollAndResize() {\n      checkScrollable();\n    }\n\n    if (formElement) {\n      formElement.addEventListener('scroll', handleScrollAndResize);\n      window.addEventListener('resize', handleScrollAndResize);\n    }\n\n    const timeoutId = setTimeout(() => {\n      checkScrollable();\n    }, 0);\n\n    return () => {\n      if (formElement) {\n        formElement.removeEventListener('scroll', handleScrollAndResize);\n      }\n      window.removeEventListener('resize', handleScrollAndResize);\n      clearTimeout(timeoutId);\n    };\n  }, [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                  ref={formRef}\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                        [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\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","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","classNames","styles","OverlayCloseButton"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react';
 import { ModalDialogProps } from './ModalDialog';
-
 declare const _default: Meta<ModalDialogProps>;
 export default _default;
 export declare const ModalDialogExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ModalDialogProps>;
 export declare const Loading: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ModalDialogProps>;
+export declare const WithLongContentAndNoBorder: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ModalDialogProps>;

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

@@ -1,15 +1,15 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { $ as d } from "../../useDialog-DZhIlo2a.js";
-import { f as o } from "../../index-C7tAT8j7.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 { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { $ as o } from "../../useDialog-DZhIlo2a.js";
+import { f as i } from "../../index-C7tAT8j7.js";
+import { ModalDialog as r } from "./ModalDialog.js";
+import { Button as l } from "../Button/Button.js";
+import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
+import { FormField as n } from "../FormField/FormField.js";
+import { InputField as d } from "../InputField/InputField.js";
 import { Label as c } from "../Label/Label.js";
-const v = {
+const S = {
   title: "Molecules/ModalDialog",
-  component: a,
+  component: r,
   argTypes: {
     isOpen: {
       table: {
@@ -39,10 +39,10 @@ const v = {
       }
     }
   }
-}, i = (n) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(a, { ...n, children: /* @__PURE__ */ l(m, { outerSpace: !0, children: [
+}, u = (t) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(r, { ...t, children: /* @__PURE__ */ a(n, { outerSpace: !0, children: [
   /* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
-  /* @__PURE__ */ e(p, { id: "text-field" })
-] }) }) }), r = {
+  /* @__PURE__ */ e(d, { id: "text-field" })
+] }) }) }), s = {
   padded: !1,
   slim: !1,
   wide: !1,
@@ -52,26 +52,35 @@ const v = {
   title: "Example Title",
   closeButtonAriaValueText: "Close",
   noValidate: !1,
-  onSubmit: o(),
-  onClose: o(),
-  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" })
+  onSubmit: i(),
+  onClose: i(),
+  buttons: /* @__PURE__ */ a(m, { reversed: !0, children: [
+    /* @__PURE__ */ e(l, { variant: "primary", onClick: i(), children: "OK" }),
+    /* @__PURE__ */ e(l, { variant: "secondary", onClick: i(), children: "Cancel" })
   ] }),
   isOpen: !0
-}, u = i.bind({});
-u.args = {
-  ...r
+}, p = u.bind({});
+p.args = {
+  ...s
 };
-const f = i.bind({});
-f.args = {
-  ...r,
+const b = u.bind({});
+b.args = {
+  ...s,
   isLoading: !0,
   spinnerAriaValueText: "Loading"
 };
+const f = (t) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(r, { ...t, children: /* @__PURE__ */ a(n, { outerSpace: !0, children: [
+  /* @__PURE__ */ e("div", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla. Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod. Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae ultrices erat." }),
+  /* @__PURE__ */ e("div", { children: "Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut sapien tempor, a ornare ipsum faucibus." })
+] }) }) }), g = f.bind({});
+g.args = {
+  ...s,
+  noButtonBorder: !0
+};
 export {
-  f as Loading,
-  u as ModalDialogExample,
-  v as default
+  b as Loading,
+  p as ModalDialogExample,
+  g as WithLongContentAndNoBorder,
+  S 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: ModalDialogProps) => (\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\nconst LongContentTemplate: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n  <ModalProvider>\n    <ModalDialog {...args}>\n      <FormField outerSpace>\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla.\n          Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut\n          fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n          cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod.\n          Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet\n          dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac\n          molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit\n          consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus\n          neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae\n          ultrices erat.\n        </div>\n        <div>\n          Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam\n          porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac\n          diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non,\n          vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut\n          sapien tempor, a ornare ipsum faucibus.\n        </div>\n      </FormField>\n    </ModalDialog>\n  </ModalProvider>\n);\n\nexport const WithLongContentAndNoBorder = LongContentTemplate.bind({});\nWithLongContentAndNoBorder.args = {\n  ...defaultArgs,\n  noButtonBorder: true,\n};\n"],"names":["ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading","LongContentTemplate","WithLongContentAndNoBorder"],"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;AAEA,MAAMM,IAAiD,CAACb,MACtD,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAA,gBAAAH,EAAC,SAAI,UAWL,88BAAA,CAAA;AAAA,EACA,gBAAAA,EAAC,SAAI,UAML,4dAAA,CAAA;AAAA,GACF,GACF,EACF,CAAA,GAGWa,IAA6BD,EAAoB,KAAK,EAAE;AACrEC,EAA2B,OAAO;AAAA,EAChC,GAAGP;AAAA,EACH,gBAAgB;AAClB;"}

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,7 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';
 import { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';
-
 export interface MultiSelectProps {
     scrollable?: boolean;
     noBorder?: boolean;

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

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Meta } from '@storybook/react';
 import { MultiSelectProps } from './MultiSelect';
-
 declare const _default: Meta<PropsWithChildren<MultiSelectProps>>;
 export default _default;
 export declare const MultiSelectExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;

package/dist/components/MultiSelect/components/MultiSelectItem.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEvent } from 'react';
-
 export interface MultiSelectItemProps {
     label: string;
     value: string | number;

package/dist/components/OverlayCloseButton/OverlayCloseButton.d.ts

@@ -1,5 +1,4 @@
 import { ButtonHTMLAttributes } from 'react';
-
 export interface OverlayCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     'aria-label': string;
     paddedModal?: boolean;

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { OverlayCloseButtonProps } from './OverlayCloseButton';
-
 declare const _default: Meta<OverlayCloseButtonProps>;
 export default _default;
 export declare const OverlayCloseButtonExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayCloseButtonProps>;

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { PeriodsProps } from './Periods';
-
 declare const _default: Meta<PeriodsProps>;
 export default _default;
 export declare const PeriodsExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PeriodsProps>;

package/dist/components/ProgrammeCard/ProgrammeCard.d.ts

@@ -1,5 +1,4 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-
 export interface ProgrammeCardProps {
     onClick: (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
     header?: ReactNode;

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { ProgrammeCardProps } from './ProgrammeCard';
-
 declare const _default: Meta<ProgrammeCardProps>;
 export default _default;
 export declare const ProgrammeCardExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ProgrammeCardProps>;

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,5 +1,4 @@
 import { InputHTMLAttributes } from 'react';
-
 export interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
     label: string;

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

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { RadioButtonProps } from './RadioButton';
-
 declare const _default: Meta<RadioButtonProps>;
 export default _default;
 export declare const RadioButtonExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, RadioButtonProps>;

package/dist/components/Repeater/Repeater.d.ts

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from 'react';
-
 export interface RepeaterProps {
     flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
     gap?: '025' | '050' | '075' | '100' | '150' | '200';

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

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Meta } from '@storybook/react';
 import { RepeaterProps } from './Repeater';
-
 declare const _default: Meta<PropsWithChildren<RepeaterProps>>;
 export default _default;
 export declare const RepeaterExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<RepeaterProps>>;

package/dist/components/SectionNotification/SectionNotification.d.ts

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from 'react';
-
 export interface SectionNotificationProps {
     fullWidth?: boolean;
 }