npm - @uva-glass/component-library - Versions diffs - 1.42.2 → 1.43.0 - Mend

@uva-glass/component-library 1.42.2 → 1.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/dist/assets/ModalDialog.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._modal-~~dialog_14t7m_1~~{--modal-dialog-padding: 1.5rem;--modal-dialog-padding-mobile: 1.25rem;background:var(--color-white);box-shadow:0 2px 2px #0000000f,0 4px 3px #00000012;display:flex;flex-direction:column;height:100dvh;position:relative;width:100vw}._modal-dialog--~~padded_14t7m_18~~{padding:0}._modal-~~dialog__content_14t7m_22~~{display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:auto;padding:0 var(--modal-dialog-padding-mobile);width:100%}._modal-~~dialog__children_14t7m_32~~{padding-bottom:var(--modal-dialog-padding-mobile)}._modal-~~dialog__title_14t7m_36~~{font-size:var(--font-size-m);line-height:var(--line-height-m);margin:0 var(--modal-dialog-padding-mobile) 0 0;padding:var(--modal-dialog-padding-mobile)}._modal-dialog--~~confirm_14t7m_43~~{padding:var(--modal-dialog-padding-mobile) 0 0}._modal-~~dialog__buttons_14t7m_47~~{background-color:var(--color-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 calc(-1 * var(--modal-dialog-padding-mobile));padding:var(--modal-dialog-padding-mobile);position:sticky;right:0}._modal-~~dialog~~--~~buttons-border_14t7m_60~~{border-top:1px solid var(--color-pattens-blue)}._modal-~~dialog__close_14t7m_64~~{position:absolute;right:var(--modal-dialog-padding-mobile);top:var(--modal-dialog-padding-mobile)}@media (min-width: 28rem) and (min-height: 28rem){._modal-~~dialog_14t7m_1~~{height:unset;max-height:100svh;max-width:100vw;width:30rem}._modal-dialog--~~padded_14t7m_18~~{width:34.25rem}._modal-dialog--~~slim_14t7m_82~~{width:27.5rem}._modal-dialog--~~wide_14t7m_86~~{width:36rem}._modal-~~dialog__title_14t7m_36~~{margin-right:var(--modal-dialog-padding);padding:var(--modal-dialog-padding)}._modal-~~dialog__content_14t7m_22~~{height:unset;padding:0 var(--modal-dialog-padding)}._modal-dialog--content-with-~~buttons_14t7m_100~~{margin-bottom:6.~~25rem~~}._modal-~~dialog__children_14t7m_32~~{padding-bottom:var(--modal-dialog-padding)}._modal-dialog--~~confirm_14t7m_43~~{padding:var(--modal-dialog-padding) 0 0}._modal-~~dialog__buttons_14t7m_47~~{margin:unset;padding:var(--modal-dialog-padding);position:absolute;width:inherit}._modal-~~dialog__close_14t7m_64~~{position:absolute;right:var(--modal-dialog-padding);top:var(--modal-dialog-padding)}}
1	+ ._modal-dialog_1w1ar_1{--modal-dialog-padding: 1.5rem;--modal-dialog-padding-mobile: 1.25rem;background:var(--color-white);box-shadow:0 2px 2px #0000000f,0 4px 3px #00000012;display:flex;flex-direction:column;height:100dvh;position:relative;width:100vw}._modal-dialog--padded_1w1ar_18{padding:0}._modal-dialog__content_1w1ar_22{display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 var(--modal-dialog-padding-mobile);width:100%}._modal-dialog__children_1w1ar_33{padding-bottom:var(--modal-dialog-padding-mobile)}._modal-dialog__title_1w1ar_37{font-size:var(--font-size-m);line-height:var(--line-height-m);margin:0 var(--modal-dialog-padding-mobile) 0 0;padding:var(--modal-dialog-padding-mobile)}._modal-dialog--confirm_1w1ar_44{padding:var(--modal-dialog-padding-mobile) 0 0}._modal-dialog__buttons_1w1ar_48{background-color:var(--color-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 calc(-1 * var(--modal-dialog-padding-mobile));padding:var(--modal-dialog-padding-mobile);position:sticky;right:0}._modal-dialog__buttons--border_1w1ar_61{border-top:1px solid var(--color-pattens-blue)}._modal-dialog__buttons_1w1ar_48:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px;background:linear-gradient(to top,#0000004d,#0000);opacity:0;transition:opacity .4s ease-out;pointer-events:none}._modal-dialog__buttons--shadow_1w1ar_78:before{opacity:1}._modal-dialog__close_1w1ar_82{position:absolute;right:var(--modal-dialog-padding-mobile);top:var(--modal-dialog-padding-mobile)}@media (min-width: 28rem) and (min-height: 28rem){._modal-dialog_1w1ar_1{height:unset;max-height:100svh;max-width:100vw;width:30rem}._modal-dialog--padded_1w1ar_18{width:34.25rem}._modal-dialog--slim_1w1ar_100{width:27.5rem}._modal-dialog--wide_1w1ar_104{width:36rem}._modal-dialog__title_1w1ar_37{margin-right:var(--modal-dialog-padding);padding:var(--modal-dialog-padding)}._modal-dialog__content_1w1ar_22{height:unset;padding:0 var(--modal-dialog-padding)}._modal-dialog--content-with-buttons_1w1ar_118{margin-bottom:5.75rem}._modal-dialog__children_1w1ar_33{padding-bottom:var(--modal-dialog-padding)}._modal-dialog--confirm_1w1ar_44{padding:var(--modal-dialog-padding) 0 0}._modal-dialog__buttons_1w1ar_48{margin:unset;padding:var(--modal-dialog-padding);position:absolute;width:inherit}._modal-dialog__close_1w1ar_82{position:absolute;right:var(--modal-dialog-padding);top:var(--modal-dialog-padding)}}

package/dist/components/Accordion/Accordion.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
 export interface AccordionProps {
     title: ReactNode;
     content: ReactNode;

package/dist/components/Accordion/Accordion.stories.d.ts CHANGED Viewed

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

package/dist/components/ActionList/ActionList.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { ReactElement } from 'react';
 import { IconProps } from 'components/Icon';
 import { UIButtonVariant } from 'types/UserInterface';
 export interface ActionListProps {
     label: string;
     prefixIcon?: IconProps['name'];

package/dist/components/ActionList/ActionList.stories.d.ts CHANGED Viewed

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

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

@@ -1,5 +1,4 @@
 import { Meta } from '@storybook/react';
 interface AppStatusBarProps {
     message: string;
     severity: 'info' | 'warning' | 'error';

package/dist/components/Attention/Attention.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 import { PropsWithChildren } from 'react';
 export declare const Attention: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Attention/Attention.stories.d.ts CHANGED Viewed

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

package/dist/components/Backdrop/Backdrop.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
 import { HTMLAttributes } from 'react';
 export type BackdropProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
 export declare const Backdrop: ({ children, ...restProps }: BackdropProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Backdrop/Backdrop.stories.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { BackdropProps } from './Backdrop';
 type BackdropStoryProps = BackdropProps & {
     visible: boolean;
 };

package/dist/components/Button/Button.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 export type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {
     variant: UIButtonVariant;

package/dist/components/Button/Button.stories.d.ts CHANGED Viewed

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

package/dist/components/ButtonGroup/ButtonGroup.d.ts CHANGED Viewed

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

package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts CHANGED Viewed

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

package/dist/components/Card/Card.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { PropsWithChildren, ReactNode } from 'react';
 export interface CardProps {
     header?: ReactNode;
     highContrast?: boolean;

package/dist/components/Card/Card.stories.d.ts CHANGED Viewed

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

package/dist/components/Checkbox/Checkbox.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
 import { InputHTMLAttributes } from 'react';
 export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;
 export declare const Checkbox: ({ ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.stories.d.ts CHANGED Viewed

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

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
     buttons?: ReactNode;
     isOpen?: boolean;

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

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

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

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

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

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

package/dist/components/Fieldset/Fieldset.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { PropsWithChildren, ReactNode } from 'react';
 export interface FieldsetProps {
     description?: ReactNode;
     descriptionId?: string;

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

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

package/dist/components/FormField/FormField.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
 export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
     outerSpace?: boolean;
     inline?: boolean;

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

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

package/dist/components/GridRow/Column/Column.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from 'react';
 type columnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export interface ColumnProps {
     size?: columnSize;

package/dist/components/GridRow/GridRow.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from 'react';
 type spacing = '0' | '025' | '050' | '075' | '100' | '125' | '150' | '175' | '200' | '250' | '300' | '350';
 export interface GridRowProps {
     gutter?: spacing;

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

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

package/dist/components/HorizontalList/HorizontalList.stories.d.ts CHANGED Viewed

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

package/dist/components/Icon/Icon.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { ReactNode, SVGAttributes } from 'react';
 import { Icons } from './icons';
 type IconName = keyof typeof Icons;
 export interface IconProps extends Omit<SVGAttributes<SVGElement>, 'height' | 'width'> {
     name: IconName;

package/dist/components/Icon/Icon.stories.d.ts CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
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: 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/components/SectionNotification/SectionNotification.stories.d.ts CHANGED Viewed

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

package/dist/components/SelectListbox/SelectListBox.stories.d.ts CHANGED Viewed

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

package/dist/components/SelectListbox/SelectListbox.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { OptionValue, SelectValue } from './SelectProvider';
 export interface SelectListboxProps {
     options: OptionValue[];
     defaultValue?: SelectValue;

package/dist/components/SelectListbox/SelectProvider.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from 'react';
 export type SelectValue = string | number | null;
 export type OptionValue = {
     value: SelectValue;

package/dist/components/SelectListbox/components/SelectButton.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { OptionValue } from 'components/SelectListbox/SelectProvider';
 export interface SelectButtonProps {
     variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
     size?: 'small' | 'default';

package/dist/components/SelectListbox/components/SelectContainer.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 import { PropsWithChildren } from 'react';
 export declare const SelectContainer: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectListbox/components/SelectOption.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { OptionValue } from 'components/SelectListbox/SelectProvider';
 export interface SelectOptionProps {
     option: OptionValue;
     index: number;

package/dist/components/SelectListbox/components/SelectOptionBox.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode } from 'react';
 export interface SelectOptionBoxProps {
     style: CSSProperties;
     children: ReactNode;

package/dist/components/Spinner/Spinner.stories.d.ts CHANGED Viewed

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

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

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

package/dist/components/Tooltip/Tooltip.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
 export interface TooltipProps {
     element: ReactNode;
     id: string;

package/dist/components/Tooltip/Tooltip.stories.d.ts CHANGED Viewed

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

package/dist/components/storyComponents/Container/Container.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from 'react';
 interface ContainerProps {
     size?: 'small' | 'medium' | 'large';
     visible?: boolean;

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.42.2",
+  "version": "1.43.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,7 +39,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@react-aria/dialog": "^3.5.16",
     "@react-aria/overlays": "^3.23.1",
@@ -47,18 +47,18 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^13.2.1",
     "@semantic-release/npm": "^12.0.1",
-    "@storybook/addon-a11y": "^8.2.7",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-interactions": "^8.2.7",
-    "@storybook/addon-links": "^8.2.7",
-    "@storybook/blocks": "^8.2.7",
-    "@storybook/react": "^8.2.7",
-    "@storybook/react-vite": "^8.2.7",
-    "@storybook/test": "^8.2.7",
-    "@types/node": "^20.14.14",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@types/node": "^20.14.15",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@uva-glass/eslint-config": "^1.2.0",
+    "@uva-glass/eslint-config": "^1.3.1",
     "@uva-glass/stylelint-config": "^1.1.0",
     "@vitejs/plugin-react": "^4.3.1",
     "clsx": "^2.1.1",
@@ -79,18 +79,18 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0",
     "semantic-release": "^24.0.0",
-    "storybook": "^8.2.7",
+    "storybook": "^8.2.9",
     "style-dictionary": "^4.0.1",
     "stylelint": "^16.8.1",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "^3.9.1",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "dependencies": {
     "react-aria": "^3.34.1"