@westpac/ui 0.6.0 → 0.7.0

package/dist/components/table/components/header-row/header-row.component.d.ts

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

package/dist/components/table/components/row/row.component.d.ts

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TableContextState, type TableProps } from './table.types.js';
 export declare const TableContext: React.Context<TableContextState>;
-export declare function Table({ bordered, striped, children, className, ...props }: TableProps): JSX.Element;
+export declare function Table({ bordered, striped, children, className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var Body: typeof import("./components/index.js").Body;
     var Caption: typeof import("./components/index.js").Caption;

package/dist/components/table/table.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;
 /**
  * > Striped example
  */
-export declare const StripedTable: Story;
+export declare const Striped: Story;
 /**
- * > Striped example
+ * > Bordered example
+ */
+export declare const Bordered: Story;
+/**
+ * > Bordered & Striped example
  */
-export declare const BorderedTable: Story;
+export declare const BorderedAndStriped: Story;
 /**
  * > Example of table with highlighted rows or cells
  */
-export declare const HighlightedRowCellTable: Story;
+export declare const HighlightedRowCell: Story;

package/dist/components/table/table.stories.js

@@ -1,28 +1,23 @@
 import { Table } from './table.component.js';
 const meta = {
-    title: 'Example/Table',
+    title: 'Components/Table',
     component: Table,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
             colspan: 3
         }, "Footer goes here and should colSpan all columns"))
     }
 };
-export const StripedTable = {
+export const Striped = {
     args: {
         striped: true,
         children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
@@ -30,15 +25,24 @@ export const StripedTable = {
         }, "Footer goes here and should colSpan all columns"))
     }
 };
-export const BorderedTable = {
+export const Bordered = {
+    args: {
+        bordered: true,
+        children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+            colspan: 3
+        }, "Footer goes here and should colSpan all columns"))
+    }
+};
+export const BorderedAndStriped = {
     args: {
         bordered: true,
+        striped: true,
         children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
             colspan: 3
         }, "Footer goes here and should colSpan all columns"))
     }
 };
-export const HighlightedRowCellTable = {
+export const HighlightedRowCell = {
     args: {
         children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, {
             highlighted: true

package/dist/components/tabs/components/tab/tab.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type TabProps } from './tab.types.js';
-export declare function Tab({ item: { key, rendered }, state, orientation, justify, color, look }: TabProps): JSX.Element;
+export declare function Tab({ item: { key, rendered }, state, orientation, justify, color, look }: TabProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/components/tab/tab.styles.d.ts

@@ -22,7 +22,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "typography-body-9 text-text flex cursor-pointer px-3 py-2 transition-colors hover:bg-white", {
+}, undefined, "typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white", {
     responsiveVariants: string[];
 }, {
     look: {

package/dist/components/tabs/components/tab/tab.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-9 text-text flex cursor-pointer px-3 py-2 transition-colors hover:bg-white',
+    base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white',
     variants: {
         look: {
-            default: 'border-border border bg-white',
+            default: 'border border-border bg-white',
             material: ''
         },
         selected: {
@@ -56,35 +56,35 @@ export const styles = tv({
             color: 'primary',
             look: 'default',
             selected: false,
-            className: 'border-primary-90 bg-primary hover:bg-primary-70 text-white'
+            className: 'border-primary-90 bg-primary text-white hover:bg-primary-70'
         },
         {
             color: 'hero',
             selected: false,
             look: 'default',
-            className: 'border-hero-90 bg-hero hover:bg-hero-70 text-white'
+            className: 'border-hero-90 bg-hero text-white hover:bg-hero-70'
         },
         {
             look: 'material',
             orientation: 'horizontal',
-            className: 'border-r-border border-b-4 border-r border-b-white last:border-r-0'
+            className: 'border-b-4 border-r border-b-white border-r-border last:border-r-0'
         },
         {
             look: 'material',
             orientation: 'vertical',
-            className: 'border-b-border border-b border-l-4 border-l-white last:border-b-0'
+            className: 'border-b border-l-4 border-b-border border-l-white last:border-b-0'
         },
         {
             look: 'material',
             selected: true,
             orientation: 'horizontal',
-            className: 'border-bottom text-text border-b-white'
+            className: 'border-bottom border-b-white text-text'
         },
         {
             look: 'material',
             selected: true,
             orientation: 'vertical',
-            className: 'border-left text-text border-l-transparent'
+            className: 'border-left border-l-transparent text-text'
         },
         {
             color: 'primary',

package/dist/components/tabs/components/tab-panel/tab-panel.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type TabPanelProps } from './tab-panel.types.js';
-export declare function TabPanel({ className, state, look, ...props }: TabPanelProps): JSX.Element;
+export declare function TabPanel({ className, state, look, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/components/tab-panel/tab-panel.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     base: 'flex-1 bg-white p-4',
     variants: {
         look: {
-            default: 'border-border border',
+            default: 'border border-border',
             material: ''
         },
         isFocused: {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" resolution-mode="require"/>
 import { type TabsProps } from './tabs.types.js';
-export declare function Tabs({ className, orientation, justify, children, color, look, sticky, stickyOffset, ...props }: TabsProps): JSX.Element;
+export declare function Tabs({ className, orientation, justify, children, color, look, sticky, stickyOffset, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Tabs {
     var Panel: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;
 }

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

@@ -6,28 +6,16 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Default usage example
  */
-export declare const JustifyStory: Story;
+export declare const Justify: Story;
 /**
  * > Default usage example
  */
-export declare const ColorStory: Story;
+export declare const Color: Story;
 /**
  * > Vertical story usage example
  */
-export declare const VerticalStory: Story;
-/**
- * > Vertical story usage example
- */
-export declare const MaterialLookStory: Story;
-/**
- * > Vertical story usage example
- */
-export declare const VerticalMaterialLookStory: Story;
-/**
- * > Vertical story usage example
- */
-export declare const ControlledMaterialLookStory: Story;
+export declare const Vertical: Story;

package/dist/components/tabs/tabs.stories.js

@@ -1,22 +1,19 @@
-import { useState } from 'react';
 import { Tabs } from './tabs.component.js';
 const meta = {
-    title: 'Example/Tabs',
+    title: 'Components/Tabs',
     component: Tabs,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>{
+            Tabs.Panel.displayName = 'Tabs.Panel';
+            return React.createElement(Story, null);
+        }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         look: 'default',
         color: undefined,
@@ -38,7 +35,7 @@ export const DefaultStory = {
         ]
     }
 };
-export const JustifyStory = {
+export const Justify = {
     args: {
         justify: true,
         children: [
@@ -57,7 +54,7 @@ export const JustifyStory = {
         ]
     }
 };
-export const ColorStory = {
+export const Color = {
     args: {
         justify: true,
         color: 'hero',
@@ -77,7 +74,7 @@ export const ColorStory = {
         ]
     }
 };
-export const VerticalStory = {
+export const Vertical = {
     args: {
         orientation: 'vertical',
         children: [
@@ -96,64 +93,3 @@ export const VerticalStory = {
         ]
     }
 };
-export const MaterialLookStory = {
-    args: {
-        look: 'material',
-        color: 'primary',
-        children: [
-            React.createElement(Tabs.Panel, {
-                key: "FoR",
-                title: "Founding of Rome"
-            }, "Arma virumque cano, Troiae qui primus ab oris."),
-            React.createElement(Tabs.Panel, {
-                key: "MaR",
-                title: "Monarchy and Republic"
-            }, "Senatus Populusque Romanus."),
-            React.createElement(Tabs.Panel, {
-                key: "Emp",
-                title: "Empire"
-            }, "Alea jacta est.")
-        ]
-    }
-};
-export const VerticalMaterialLookStory = {
-    args: {
-        look: 'material',
-        color: 'primary',
-        orientation: 'vertical',
-        children: [
-            React.createElement(Tabs.Panel, {
-                key: "FoR",
-                title: "Founding of Rome"
-            }, "Arma virumque cano, Troiae qui primus ab oris"),
-            React.createElement(Tabs.Panel, {
-                key: "MaR",
-                title: "Monarchy and Republic"
-            }, "Senatus Populusque Romanus."),
-            React.createElement(Tabs.Panel, {
-                key: "Emp",
-                title: "Empire"
-            }, "Alea jacta est.")
-        ]
-    }
-};
-export const ControlledMaterialLookStory = {
-    render: ()=>{
-        const [selectedKey, setSelectedKey] = useState('FoR');
-        return React.createElement(Tabs, {
-            selectedKey: selectedKey,
-            onSelectionChange: (key)=>{
-                setSelectedKey(key);
-            }
-        }, React.createElement(Tabs.Panel, {
-            key: "FoR",
-            title: "Founding of Rome"
-        }, "Arma virumque cano, Troiae qui primus ab oris."), React.createElement(Tabs.Panel, {
-            key: "MaR",
-            title: "Monarchy and Republic"
-        }, "Senatus Populusque Romanus."), React.createElement(Tabs.Panel, {
-            key: "Emp",
-            title: "Empire"
-        }, "Alea jacta est."));
-    }
-};

package/dist/components/textarea/textarea.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;
 /**
  * > Invalid usage example
  */
-export declare const InvalidStory: Story;
+export declare const Invalid: Story;
 /**
  * > Disabled usage example
  */
-export declare const DisabledStory: Story;
+export declare const Disabled: Story;
 /**
  * > ReadOnly usage example
  */
-export declare const ReadOnlyStory: Story;
+export declare const ReadOnly: Story;
+/**
+ * > Form field example
+ */
+export declare const FormField: Story;

package/dist/components/textarea/textarea.stories.js

@@ -1,38 +1,44 @@
+import { Field } from '../field/index.js';
 import { Textarea } from './textarea.component.js';
 const meta = {
-    title: 'Example/Textarea',
+    title: 'Components/Textarea',
     component: Textarea,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex justify-center p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         placeholder: 'placeholder',
         size: 'medium'
     }
 };
-export const InvalidStory = {
+export const Invalid = {
     args: {
         invalid: true
     }
 };
-export const DisabledStory = {
+export const Disabled = {
     args: {
         disabled: true
     }
 };
-export const ReadOnlyStory = {
+export const ReadOnly = {
     args: {
         readOnly: true
     }
 };
+export const FormField = {
+    args: {},
+    render: ()=>{
+        return React.createElement(Field, {
+            label: "Are you an existing customer?",
+            hintMessage: "Hint: choose from one of the following options",
+            errorMessage: "This is an inline error message"
+        }, React.createElement(Textarea, null));
+    }
+};

package/dist/components/visually-hidden/visually-hidden.component.d.ts

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

package/dist/components/visually-hidden/visually-hidden.stories.d.ts

@@ -9,4 +9,4 @@ type Story = StoryObj<typeof meta>;
  * Note: The examples below the following headings are visibility hidden.
  * Best you inspect what is being rendered using your browser’s DevTools.
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;

package/dist/components/visually-hidden/visually-hidden.stories.js

@@ -1,19 +1,16 @@
 import { VisuallyHidden } from './visually-hidden.component.js';
 const meta = {
-    title: 'Example/VisuallyHidden',
+    title: 'Components/VisuallyHidden',
     component: VisuallyHidden,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'Only screen reader can read this'
     }

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

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

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

@@ -6,20 +6,20 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultUsage: Story;
+export declare const Default: Story;
 /**
  * > Nested usage example
  */
-export declare const NestedUsage: Story;
+export declare const Nested: Story;
 /**
  * > Tag as <article>
  */
-export declare const CustomTagUsage: Story;
+export declare const CustomTag: Story;
 /**
  * > Nested tag as <article>
  */
-export declare const CustomTagNestedUsage: Story;
+export declare const CustomTagNested: Story;
 /**
  * > Tag as <aside> with child <san>, passed as a component
  */
-export declare const ComplexCustomTagNestedUsage: Story;
+export declare const ComplexCustomTagNested: Story;

package/dist/components/well/well.stories.js

@@ -1,41 +1,34 @@
 import { Well } from './well.component.js';
 const meta = {
-    title: 'Example/Well',
+    title: 'Components/Well',
     component: Well,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                style: {
-                    padding: '3rem'
-                }
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
-export const DefaultUsage = {
+export const Default = {
     args: {
         children: "Look, I'm in a well"
     }
 };
-export const NestedUsage = {
+export const Nested = {
     args: {
         children: React.createElement(React.Fragment, null, "I am outside", React.createElement(Well, {
             color: "white"
         }, "I am inside"))
     }
 };
-export const CustomTagUsage = {
+export const CustomTag = {
     args: {
         tag: 'article',
         children: "Look, I'm in a well"
     }
 };
-export const CustomTagNestedUsage = {
+export const CustomTagNested = {
     args: {
         tag: 'article',
         children: React.createElement(React.Fragment, null, "I am outside", React.createElement(Well, {
@@ -43,7 +36,7 @@ export const CustomTagNestedUsage = {
         }, "I am inside"))
     }
 };
-export const ComplexCustomTagNestedUsage = {
+export const ComplexCustomTagNested = {
     args: {
         tag: 'aside',
         children: React.createElement("span", null, "Look, I'm in a well")