@westpac/ui 0.5.0 → 0.7.0

package/dist/components/link/link.component.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { type LinkProps } from './link.types.js';
-export declare function BaseLink({ className, children, href, iconBefore: IconBefore, iconAfter: IconAfter, iconSize, target, type, underline, ...props }: LinkProps, propRef: any): JSX.Element;
+export declare function BaseLink({ className, children, href, iconBefore: IconBefore, iconAfter: IconAfter, iconSize, target, type, underline, ...props }: LinkProps, propRef: any): import("react/jsx-runtime").JSX.Element;
 export declare const Link: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     className?: string | undefined;
     iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-    iconSize?: "small" | "xsmall" | "medium" | "large" | "xlarge" | undefined;
+    iconSize?: "small" | "medium" | "large" | "xlarge" | "xsmall" | undefined;
     type?: "inline" | "standalone" | undefined;
     underline?: boolean | undefined;
 } & Omit<import("react-aria").AriaLinkOptions, "isDisabled" | "elementType"> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<unknown>>;

package/dist/components/link/link.component.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useRef } from 'react';
-import { useLink } from 'react-aria';
+import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import { ArrowRightIcon } from '../icon/index.js';
 import { styles as linkStyles } from './link.styles.js';
 export function BaseLink({ className , children , href , iconBefore: IconBefore , iconAfter: IconAfter , iconSize ='small' , target , type ='standalone' , underline =true , ...props }, propRef) {
@@ -21,14 +21,16 @@ export function BaseLink({ className , children , href , iconBefore: IconBefore
     const { linkProps  } = useLink({
         ...props
     }, ref);
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = linkStyles({
         type,
-        underline
+        underline,
+        isFocusVisible
     });
     if (type === 'standalone' && !IconBefore && !IconAfter) {
         IconBefore = ArrowRightIcon;
     }
-    return React.createElement("a", _extends({}, linkProps, {
+    return React.createElement("a", _extends({}, mergeProps(linkProps, focusProps), {
         ref: propRef,
         href: href,
         target: target,
@@ -39,9 +41,7 @@ export function BaseLink({ className , children , href , iconBefore: IconBefore
         size: iconSize,
         color: "link",
         className: styles.iconBefore()
-    }), React.createElement("span", {
-        className: styles.text()
-    }, children), IconAfter && React.createElement(IconAfter, {
+    }), React.createElement("span", null, children), IconAfter && React.createElement(IconAfter, {
         size: iconSize,
         color: "link",
         className: styles.iconAfter()

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Link } from './link.component.js';
 declare const meta: Meta<typeof Link>;
@@ -7,17 +6,17 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Standalone link with iconSizes, arrowRight is default but can be overridden.
  * > If no icon is passed it defaults to ArrowRightIcon in the iconBefore position
  */
-export declare const StandaloneLink: () => JSX.Element;
+export declare const Standalone: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Inline link example
  */
-export declare const InlineLink: () => JSX.Element;
+export declare const Inline: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > example of icon sizes
  */
-export declare const IconSizes: () => JSX.Element;
+export declare const IconSizes: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/link/link.stories.js

@@ -1,22 +1,17 @@
 import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
 import { Link } from './link.component.js';
 const meta = {
-    title: 'Example/Link',
+    title: 'Components/Link',
     component: Link,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-1"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: "Look, I'm a default link",
         href: '#'
@@ -29,8 +24,8 @@ const SIZES = [
     'large',
     'xlarge'
 ];
-export const StandaloneLink = ()=>React.createElement("div", {
-        className: "space-y-1 pl-1"
+export const Standalone = ()=>React.createElement("div", {
+        className: "space-y-1"
     }, React.createElement("h1", {
         className: "font-bold"
     }, "Default"), React.createElement(Link, {
@@ -46,8 +41,8 @@ export const StandaloneLink = ()=>React.createElement("div", {
         href: "#",
         iconAfter: ArrowRightIcon
     }, "Look I'm a standalone link"));
-export const InlineLink = ()=>React.createElement("div", {
-        className: "space-y-1 p-1"
+export const Inline = ()=>React.createElement("div", {
+        className: "space-y-1"
     }, React.createElement("p", {
         className: "typography-body-10"
     }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
@@ -77,7 +72,7 @@ export const InlineLink = ()=>React.createElement("div", {
         iconBefore: PdfFileIcon
     }, "look, I'm an inline link"));
 export const IconSizes = ()=>React.createElement("div", {
-        className: "space-y-1 pl-1"
+        className: "space-y-1"
     }, SIZES.map((size)=>React.createElement("div", {
             key: size
         }, React.createElement("h1", {

package/dist/components/link/link.styles.d.ts

@@ -12,9 +12,16 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     underline: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
-    text: string;
     iconBefore: string;
     iconAfter: string;
 }, undefined, {
@@ -33,9 +40,16 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     underline: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
-    text: string;
     iconBefore: string;
     iconAfter: string;
 }>;

package/dist/components/link/link.styles.js

@@ -1,8 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'inline-flex bg-[transparent] hover:underline focus:focus-outline',
-        text: 'typography-body-10',
+        base: 'inline-flex bg-[transparent] hover:underline',
         iconBefore: 'mr-1',
         iconAfter: 'ml-1'
     },
@@ -19,6 +18,14 @@ export const styles = tv({
         },
         underline: {
             true: ''
+        },
+        isFocusVisible: {
+            true: {
+                base: 'focus-outline'
+            },
+            false: {
+                base: 'outline-none'
+            }
         }
     },
     compoundSlots: [

package/dist/components/list/components/item/item.component.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { type ItemProps } from './item.types.js';
-export declare function BaseItem({ className, children, href, look, type, spacing, icon, ...props }: ItemProps, ref: any): JSX.Element;
+export declare function BaseItem({ className, children, href, look, type, spacing, icon, ...props }: ItemProps, ref: any): import("react/jsx-runtime").JSX.Element;
 export declare const Item: React.ForwardRefExoticComponent<{
     href?: string | undefined;
     icon?: ((props: import("../../../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-    look?: "link" | "success" | "danger" | "hero" | "neutral" | "primary" | undefined;
+    look?: "link" | "primary" | "hero" | "success" | "danger" | "neutral" | undefined;
     nested?: number | undefined;
     spacing?: "medium" | "large" | undefined;
     type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;

package/dist/components/list/components/item/item.component.js

@@ -13,6 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useContext } from 'react';
+import { useFocusRing } from 'react-aria';
 import { ListContext } from '../../list.component.js';
 import { getStateValues } from '../../list.utils.js';
 import { styles as itemStyles } from './item.styles.js';
@@ -28,12 +29,14 @@ export function BaseItem({ className , children , href , look , type , spacing ,
     look = stateValues.look;
     type = stateValues.type;
     const Icon = stateValues.icon;
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = itemStyles({
         look,
         type,
         spacing: stateValues.spacing,
         icon: !!Icon,
-        nested: state.nested && state.nested > 0 || false
+        nested: state.nested && state.nested > 0 || false,
+        isFocusVisible
     });
     const bulletToRender = ()=>{
         if (type === 'ordered' || type === 'unstyled') {
@@ -59,10 +62,10 @@ export function BaseItem({ className , children , href , look , type , spacing ,
         className: styles.base({
             className
         })
-    }, props), type === 'link' ? React.createElement("a", {
+    }, props), type === 'link' ? React.createElement("a", _extends({
         href: href,
         className: styles.link(),
         ref: ref
-    }, children) : children));
+    }, focusProps), children) : children));
 }
 export const Item = forwardRef(BaseItem);

package/dist/components/list/components/item/item.styles.d.ts

@@ -60,6 +60,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             bullet: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            link: string;
+        };
+    };
 }, {
     base: string;
     bullet: string;
@@ -129,6 +134,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             bullet: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            link: string;
+        };
+    };
 }, {
     base: string;
     bullet: string;

package/dist/components/list/components/item/item.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         base: 'pl-[1.1875rem]',
         bullet: 'absolute block border',
-        link: 'text-text hover:cursor-pointer hover:underline focus:focus-outline',
+        link: 'text-text hover:cursor-pointer hover:underline',
         wrapper: 'relative'
     },
     variants: {
@@ -67,6 +67,11 @@ export const styles = tv({
             true: {
                 bullet: 'bg-[transparent]'
             }
+        },
+        isFocusVisible: {
+            true: {
+                link: 'focus-outline'
+            }
         }
     },
     compoundSlots: [

package/dist/components/list/list.component.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ListContextState, type ListProps } from './list.types.js';
 export declare const ListContext: React.Context<ListContextState>;
-export declare function List({ assistiveText, className, children, look, nested, icon, type, spacing, ...props }: ListProps): JSX.Element;
+export declare function List({ assistiveText, className, children, look, nested, icon, type, spacing, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace List {
     var Item: React.ForwardRefExoticComponent<{
         href?: string | undefined;
         icon?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-        look?: "link" | "success" | "danger" | "hero" | "neutral" | "primary" | undefined;
+        look?: "link" | "primary" | "hero" | "success" | "danger" | "neutral" | undefined;
         nested?: number | undefined;
         spacing?: "medium" | "large" | undefined;
         type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { List } from './list.component.js';
 declare const meta: Meta<typeof List>;
@@ -7,20 +6,20 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Type of list
  */
-export declare const ListTypes: () => JSX.Element[];
+export declare const Types: () => import("react/jsx-runtime").JSX.Element[];
 /**
  * > Type of list
  */
-export declare const ListLooks: () => JSX.Element[];
+export declare const Looks: () => import("react/jsx-runtime").JSX.Element[];
 /**
  * Nested list
  */
-export declare const NestedList: () => JSX.Element;
+export declare const Nested: () => import("react/jsx-runtime").JSX.Element;
 /**
  * List spacing
  */
-export declare const ListSpacing: () => JSX.Element;
+export declare const Spacing: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/list/list.stories.js

@@ -1,19 +1,14 @@
 import { AndroidIcon } from '../icon/index.js';
 import { List } from './list.component.js';
 const meta = {
-    title: 'Example/List',
+    title: 'Components/List',
     component: List,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-2"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'center'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
 const LOOKS = [
@@ -33,7 +28,7 @@ const TYPES = [
     'icon',
     'ordered'
 ];
-export const DefaultStory = {
+export const Default = {
     args: {
         children: [
             React.createElement(List.Item, null, "Styled list"),
@@ -42,7 +37,7 @@ export const DefaultStory = {
         ]
     }
 };
-export const ListTypes = ()=>TYPES.map((type)=>React.createElement("div", {
+export const Types = ()=>TYPES.map((type)=>React.createElement("div", {
             className: "mb-2",
             key: type
         }, React.createElement("h1", {
@@ -50,10 +45,16 @@ export const ListTypes = ()=>TYPES.map((type)=>React.createElement("div", {
         }, type), React.createElement(List, {
             type: type,
             icon: type === 'icon' ? AndroidIcon : undefined
-        }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List, {
+        }, React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List, {
             icon: type === 'link' ? AndroidIcon : undefined
         }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list")), React.createElement(List.Item, null, "Styled ", type, " list"))));
-export const ListLooks = ()=>LOOKS.map((look)=>React.createElement("div", {
+export const Looks = ()=>LOOKS.map((look)=>React.createElement("div", {
             className: "mb-2",
             key: look
         }, React.createElement("h1", {
@@ -64,13 +65,13 @@ export const ListLooks = ()=>LOOKS.map((look)=>React.createElement("div", {
         }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List, {
             icon: look === 'link' ? AndroidIcon : undefined
         }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list")), React.createElement(List.Item, null, "Styled ", look, " list"))));
-export const NestedList = ()=>React.createElement("div", null, React.createElement(List, {
+export const Nested = ()=>React.createElement("div", null, React.createElement(List, {
         type: "bullet",
         assistiveText: "test"
     }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, {
         nested: 0
     }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"))))));
-export const ListSpacing = ()=>React.createElement("div", null, React.createElement("h1", {
+export const Spacing = ()=>React.createElement("div", null, React.createElement("h1", {
         className: "typography-body-10 mb-2"
     }, "Medium"), React.createElement(List, {
         type: "bullet",

package/dist/components/list/list.utils.d.ts

@@ -2,7 +2,7 @@
 import { GetStateValuesProps } from './list.types.js';
 export declare const getStateValues: (props: GetStateValuesProps) => {
     type: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered";
-    look: "link" | "success" | "danger" | "hero" | "neutral" | "primary";
+    look: "link" | "primary" | "hero" | "success" | "danger" | "neutral";
     spacing: "medium" | "large";
     icon: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
 };

package/dist/components/modal/components/backdrop/backdrop.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type BackdropProps } from './backdrop.types.js';
-export declare function Backdrop({ zIndex, portalContainer, ...props }: BackdropProps): JSX.Element | null;
+export declare function Backdrop({ zIndex, portalContainer, ...props }: BackdropProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/modal/components/backdrop/backdrop.styles.js

@@ -2,6 +2,6 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
-        modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown focus:outline-none'
+        modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown'
     }
 });

package/dist/components/modal/components/dialog/components/dialog-body/dialog-body.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type DialogBodyProps } from './dialog-body.types.js';
-export declare function DialogBody({ className, children, ...props }: DialogBodyProps): JSX.Element;
+export declare function DialogBody({ className, children, ...props }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/components/dialog/components/dialog-footer/dialog-footer.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type DialogFooterProps } from './dialog-footer.types.js';
-export declare function DialogFooter({ className, children, ...props }: DialogFooterProps): JSX.Element;
+export declare function DialogFooter({ className, children, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/components/dialog/dialog.component.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" resolution-mode="require"/>
 import { DialogBody } from './components/dialog-body/index.js';
 import { DialogFooter } from './components/dialog-footer/index.js';
 import { type DialogProps } from './dialog.types.js';
-export declare function Dialog({ className, body, onClose, size, ...props }: DialogProps): JSX.Element;
+export declare function Dialog({ className, body, onClose, size, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Dialog {
     var Body: typeof DialogBody;
     var Footer: typeof DialogFooter;

package/dist/components/modal/components/dialog/dialog.component.js

@@ -13,27 +13,29 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useRef } from 'react';
-import { useDialog } from 'react-aria';
+import { useDialog, useFocusRing } from 'react-aria';
 import { CloseIcon } from '../../../../components/icon/index.js';
 import { DialogBody } from './components/dialog-body/index.js';
 import { DialogFooter } from './components/dialog-footer/index.js';
 import { styles as dialogStyles } from './dialog.styles.js';
 export function Dialog({ className , body , onClose , size ='md' , ...props }) {
     const { children  } = props;
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = dialogStyles({
         className,
-        size
+        size,
+        isFocusVisible
     });
     const ref = useRef(null);
     const { dialogProps , titleProps  } = useDialog(props, ref);
     return React.createElement("div", _extends({}, dialogProps, {
         ref: ref,
         className: styles.base()
-    }), onClose && React.createElement("button", {
+    }), onClose && React.createElement("button", _extends({
         className: styles.close(),
         onClick: onClose,
         "aria-label": "Close modal"
-    }, React.createElement(CloseIcon, {
+    }, focusProps), React.createElement(CloseIcon, {
         className: "block",
         size: "small"
     })), props.title && React.createElement("h3", _extends({}, titleProps, {

package/dist/components/modal/components/dialog/dialog.styles.d.ts

@@ -10,6 +10,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            close: string;
+        };
+        false: {
+            close: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -28,6 +36,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            close: string;
+        };
+        false: {
+            close: string;
+        };
+    };
 }, {
     base: string;
     title: string;

package/dist/components/modal/components/dialog/dialog.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white focus:focus-outline',
+        base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white outline-none',
         title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-        close: 'absolute right-1 top-1 block p-1 focus:focus-outline'
+        close: 'absolute right-1 top-1 block p-1'
     },
     variants: {
         size: {
@@ -16,6 +16,14 @@ export const styles = tv({
             sm: {
                 base: 'w-[18.75rem]'
             }
+        },
+        isFocusVisible: {
+            true: {
+                close: 'focus-outline'
+            },
+            false: {
+                close: 'outline-none'
+            }
         }
     }
 }, {

package/dist/components/modal/components/dialog/dialog.types.d.ts

@@ -18,7 +18,7 @@ export type DialogProps = {
     /**
      * onClose callback
      */
-    onClose?: () => any;
+    onClose?: () => unknown;
     /**
      * Title for Modal
      */

package/dist/components/modal/modal.component.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ModalProps } from './modal.types.js';
-export declare function Modal({ children, title, role, body, size, ...props }: ModalProps): JSX.Element;
+export declare function Modal({ children, title, role, body, size, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Modal {
     var Footer: typeof import("./components/dialog/components/dialog-footer/dialog-footer.component.js").DialogFooter;
     var Body: typeof import("./components/dialog/components/dialog-body/dialog-body.component.js").DialogBody;

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

@@ -6,16 +6,16 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > WithFooter usage example
  */
-export declare const WithFooterStory: Story;
+export declare const WithFooter: Story;
 /**
  * > All sizes usage example
  */
-export declare const AllSizesStory: Story;
+export declare const Sizes: Story;
 /**
  * > Not dismissable example
  */
-export declare const NotDismissibleStory: Story;
+export declare const NotDismissible: Story;