@westpac/ui 0.6.0 → 0.7.0

package/dist/components/input-field/components/supporting-text/supporting-text.component.d.ts

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

package/dist/components/input-field/input-field.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type InputFieldProps } from './input-field.types.js';
-export declare function InputField({ label, hideLabel, size, hint, errorMessage, supportingText, instanceId, after, before, children, tag: Tag, ...props }: InputFieldProps): JSX.Element;
+export declare function InputField({ label, hideLabel, size, hint, errorMessage, supportingText, instanceId, after, before, children, tag: Tag, ...props }: InputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/input-field/input-field.component.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { Children, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
-import { Form } from '../form/form.component.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 import { InputAddOn } from './components/add-ons/add-ons.component.js';
 import { SupportingText } from './components/index.js';
 import { styles } from './input-field.styles.js';
@@ -102,14 +102,14 @@ export function InputField({ label , hideLabel , size ='medium' , hint , errorMe
             afterInset,
             beforeInset
         })
-    }, props), label && React.createElement(Form.Label, _extends({
+    }, props), label && React.createElement(FormLabel, _extends({
         srOnly: hideLabel,
         tag: isFieldset ? 'legend' : 'label'
     }, !isFieldset && {
         htmlFor: id
-    }), label), hint && React.createElement(Form.Hint, {
+    }), label), hint && React.createElement(FormHint, {
         id: `${id}-hint`
-    }, hint), errorMessage && React.createElement(Form.ErrorMessage, {
+    }, hint), errorMessage && React.createElement(ErrorMessage, {
         id: `${id}-error`,
         message: errorMessage
     }), React.createElement("div", {

package/dist/components/input-field/input-field.scenarios.stories.d.ts

@@ -6,21 +6,21 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Number of dependents
  */
-export declare const NumberStepperStory: Story;
+export declare const NumberStepper: Story;
 /**
  * > Masked characters in field
  */
-export declare const MaskedCharactersStory: Story;
+export declare const MaskedCharacters: Story;
 /**
  * > Search with left icon and clear button
  */
-export declare const SearchWithLeftIconAndClearButtonStory: Story;
+export declare const SearchWithLeftIconAndClearButton: Story;
 /**
  * > Inline field validation flow
  */
-export declare const InlineFieldValidationFlowStory: Story;
+export declare const InlineFieldValidationFlow: Story;
 /**
  * > Search Currency and frequency
  */
-export declare const CurrencyAndFrequencyStory: Story;
-export declare const TextareaWithCharacterCountStory: Story;
+export declare const CurrencyAndFrequency: Story;
+export declare const TextareaWithCharacterCount: Story;

package/dist/components/input-field/input-field.scenarios.stories.js

@@ -3,20 +3,17 @@ import { CloseIcon, RefreshIcon, SearchIcon, VisibilityIcon, VisibilityOffIcon }
 import { Button, Input, Select, Textarea } from '../index.js';
 import { InputField } from './input-field.component.js';
 const meta = {
-    title: 'Example/InputField/Scenarios',
+    title: 'Components/InputField/Scenarios',
     component: InputField,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'padded'
-    }
+    ]
 };
 export default meta;
-export const NumberStepperStory = {
+export const NumberStepper = {
     args: {},
     render: ()=>{
         const [numberOfDependents, setNumberOfDependents] = useState(0);
@@ -35,7 +32,7 @@ export const NumberStepperStory = {
         }));
     }
 };
-export const MaskedCharactersStory = {
+export const MaskedCharacters = {
     args: {},
     render: ()=>{
         const [typeInput, setTypeInput] = useState('password');
@@ -56,7 +53,7 @@ export const MaskedCharactersStory = {
         }));
     }
 };
-export const SearchWithLeftIconAndClearButtonStory = {
+export const SearchWithLeftIconAndClearButton = {
     args: {},
     render: ()=>{
         const [inputValue, setInputValue] = useState('');
@@ -81,7 +78,7 @@ export const SearchWithLeftIconAndClearButtonStory = {
         }));
     }
 };
-export const InlineFieldValidationFlowStory = {
+export const InlineFieldValidationFlow = {
     args: {},
     render: ()=>{
         const [inputValue, setInputValue] = useState('');
@@ -115,7 +112,7 @@ export const InlineFieldValidationFlowStory = {
         }));
     }
 };
-export const CurrencyAndFrequencyStory = {
+export const CurrencyAndFrequency = {
     args: {},
     render: ()=>{
         const [inputValue, setInputValue] = useState('');
@@ -130,7 +127,7 @@ export const CurrencyAndFrequencyStory = {
     }
 };
 const MAX_LENGTH = 250;
-export const TextareaWithCharacterCountStory = {
+export const TextareaWithCharacterCount = {
     args: {},
     render: ()=>{
         const [inputValue, setInputValue] = useState('');

package/dist/components/input-field/input-field.sizes.stories.d.ts

@@ -6,4 +6,4 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Input field with different sizes
  */
-export declare const InputFieldWithDifferentSizesStory: Story;
+export declare const InputFieldWithDifferentSizes: Story;

package/dist/components/input-field/input-field.sizes.stories.js

@@ -2,20 +2,17 @@ import { VisibilityIcon } from '../icon/index.js';
 import { Button, Input, Select } from '../index.js';
 import { InputField } from './input-field.component.js';
 const meta = {
-    title: 'Example/InputField/Sizes',
+    title: 'Components/InputField/Sizes',
     component: InputField,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'padded'
-    }
+    ]
 };
 export default meta;
-export const InputFieldWithDifferentSizesStory = {
+export const InputFieldWithDifferentSizes = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, [

package/dist/components/input-field/input-field.state.stories.d.ts

@@ -6,12 +6,12 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Invalid with error message/s
  */
-export declare const InvalidWithErrorMessagesStory: Story;
+export declare const InvalidWithErrorMessages: Story;
 /**
  * > Input field with disabled state
  */
-export declare const InputFieldWithDisabledStateStory: Story;
+export declare const InputFieldWithDisabledState: Story;
 /**
  * > Input field with read-only state
  */
-export declare const InputFieldWithReadOnlyStateStory: Story;
+export declare const InputFieldWithReadOnlyState: Story;

package/dist/components/input-field/input-field.state.stories.js

@@ -2,20 +2,17 @@ import { SearchIcon } from '../icon/index.js';
 import { Button, Input, Select } from '../index.js';
 import { InputField } from './input-field.component.js';
 const meta = {
-    title: 'Example/InputField/State',
+    title: 'Components/InputField/State',
     component: InputField,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'padded'
-    }
+    ]
 };
 export default meta;
-export const InvalidWithErrorMessagesStory = {
+export const InvalidWithErrorMessages = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, React.createElement(InputField, {
@@ -76,7 +73,7 @@ export const InvalidWithErrorMessagesStory = {
         })));
     }
 };
-export const InputFieldWithDisabledStateStory = {
+export const InputFieldWithDisabledState = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, React.createElement(InputField, {
@@ -102,7 +99,7 @@ export const InputFieldWithDisabledStateStory = {
         })));
     }
 };
-export const InputFieldWithReadOnlyStateStory = {
+export const InputFieldWithReadOnlyState = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, React.createElement(InputField, {

package/dist/components/input-field/input-field.stories.d.ts

@@ -6,16 +6,20 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
+/**
+ * > Another usage example
+ */
+export declare const AnotherDefault: Story;
 /**
  * > SrOnlyLabel usage example
  */
-export declare const SrOnlyLabelStory: Story;
+export declare const SrOnlyLabel: Story;
 /**
  * > Combination usage example
  */
-export declare const CombinationStory: Story;
+export declare const Combination: Story;
 /**
  * > Fieldset as tag
  */
-export declare const WithFieldsetStory: Story;
+export declare const WithFieldset: Story;

package/dist/components/input-field/input-field.stories.js

@@ -1,20 +1,17 @@
 import { Button, Input } from '../index.js';
 import { InputField } from './input-field.component.js';
 const meta = {
-    title: 'Example/InputField',
+    title: 'Components/InputField',
     component: InputField,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'padded'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {},
     render: ()=>{
         return React.createElement(InputField, {
@@ -25,7 +22,17 @@ export const DefaultStory = {
         }, React.createElement(Input, null));
     }
 };
-export const SrOnlyLabelStory = {
+export const AnotherDefault = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Label",
+            hint: "I am a hint",
+            supportingText: "I am supporting text"
+        }, React.createElement(Input, null));
+    }
+};
+export const SrOnlyLabel = {
     args: {},
     render: ()=>{
         return React.createElement(InputField, {
@@ -37,7 +44,7 @@ export const SrOnlyLabelStory = {
         }, React.createElement(Input, null));
     }
 };
-export const CombinationStory = {
+export const Combination = {
     args: {},
     render: ()=>{
         return React.createElement(InputField, {
@@ -49,7 +56,7 @@ export const CombinationStory = {
         }, React.createElement(Input, null));
     }
 };
-export const WithFieldsetStory = {
+export const WithFieldset = {
     args: {},
     render: ()=>{
         return React.createElement(InputField, {

package/dist/components/input-field/input-field.type.stories.d.ts

@@ -10,28 +10,28 @@ export declare const TextBeforeStory: Story;
 /**
  * > Text Beforoe story example
  */
-export declare const TextAfterStory: Story;
+export declare const TextAfter: Story;
 /**
  * > Text After and Beforoe story example
  */
-export declare const TextAfterAndBeforeStory: Story;
+export declare const TextAfterAndBefore: Story;
 /**
  * > Textarea
  */
-export declare const IconAddOnStory: Story;
+export declare const IconAddOn: Story;
 /**
  * > Icons in buttons
  */
-export declare const IconInButtonsOnStory: Story;
+export declare const IconInButtonsOn: Story;
 /**
  * > Button add ons
  */
-export declare const ButtonAddOnStory: Story;
+export declare const ButtonAddOn: Story;
 /**
  * > Select add ons
  */
-export declare const SelectAddOnStory: Story;
+export declare const SelectAddOn: Story;
 /**
  * > Textarea
  */
-export declare const TextAreaStory: Story;
+export declare const TextArea: Story;

package/dist/components/input-field/input-field.type.stories.js

@@ -2,17 +2,14 @@ import { SearchIcon, VisibilityIcon } from '../icon/index.js';
 import { Button, Input, Select, Textarea } from '../index.js';
 import { InputField } from './input-field.component.js';
 const meta = {
-    title: 'Example/InputField/Types',
+    title: 'Components/InputField/Types',
     component: InputField,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'padded'
-    }
+    ]
 };
 export default meta;
 export const TextBeforeStory = {
@@ -26,7 +23,7 @@ export const TextBeforeStory = {
         }, React.createElement(Input, null));
     }
 };
-export const TextAfterStory = {
+export const TextAfter = {
     args: {},
     render: ()=>{
         return React.createElement(InputField, {
@@ -37,7 +34,7 @@ export const TextAfterStory = {
         }, React.createElement(Input, null));
     }
 };
-export const TextAfterAndBeforeStory = {
+export const TextAfterAndBefore = {
     args: {},
     render: ()=>{
         return React.createElement(InputField, {
@@ -49,7 +46,7 @@ export const TextAfterAndBeforeStory = {
         }, React.createElement(Input, null));
     }
 };
-export const IconAddOnStory = {
+export const IconAddOn = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, React.createElement(InputField, {
@@ -79,7 +76,7 @@ export const IconAddOnStory = {
         }, React.createElement(Input, null)));
     }
 };
-export const IconInButtonsOnStory = {
+export const IconInButtonsOn = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, React.createElement(InputField, {
@@ -129,7 +126,7 @@ export const IconInButtonsOnStory = {
         }, React.createElement(Input, null)));
     }
 };
-export const ButtonAddOnStory = {
+export const ButtonAddOn = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, React.createElement(InputField, {
@@ -165,7 +162,7 @@ export const ButtonAddOnStory = {
         }, React.createElement(Input, null)));
     }
 };
-export const SelectAddOnStory = {
+export const SelectAddOn = {
     args: {},
     render: ()=>{
         return React.createElement(InputField, {
@@ -177,7 +174,7 @@ export const SelectAddOnStory = {
         }, React.createElement(Input, null));
     }
 };
-export const TextAreaStory = {
+export const TextArea = {
     args: {},
     render: ()=>{
         return React.createElement(InputField, {

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

@@ -1,6 +1,6 @@
 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;

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

@@ -41,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

@@ -22,7 +22,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    text: string;
     iconBefore: string;
     iconAfter: string;
 }, undefined, {
@@ -51,7 +50,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    text: string;
     iconBefore: string;
     iconAfter: string;
 }>;

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

@@ -2,19 +2,18 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'inline-flex bg-[transparent] hover:underline',
-        text: 'typography-body-10',
         iconBefore: 'mr-1',
         iconAfter: 'ml-1'
     },
     variants: {
         type: {
             inline: {
-                base: 'text-link items-baseline',
+                base: 'items-baseline text-link',
                 iconBefore: 'self-center',
                 iconAfter: 'self-center'
             },
             standalone: {
-                base: 'text-text items-center'
+                base: 'items-center text-text'
             }
         },
         underline: {

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

@@ -1,6 +1,6 @@
 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;

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

@@ -1,7 +1,7 @@
 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;

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;