@westpac/ui 0.6.0 → 0.7.0

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

@@ -1,9 +1,8 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { SkipLink } from './skip-link.component.js';
 declare const meta: Meta<typeof SkipLink>;
 export default meta;
-type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,29 @@
+import { useRef } from 'react';
+import { Button } from '../index.js';
 import { SkipLink } from './skip-link.component.js';
 const meta = {
-    title: 'Example/SkipLink',
+    title: 'Components/SkipLink',
     component: SkipLink,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
-    args: {
-        children: 'This is a text only for screen reader',
-        href: '#batata'
-    }
+export const Default = ()=>{
+    const skipLinkRef = useRef();
+    return React.createElement(React.Fragment, null, React.createElement(SkipLink, {
+        href: "#skiptohere",
+        ref: skipLinkRef
+    }, "Skip to lower contents", ' '), React.createElement("div", null, "‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought!’", ' ', React.createElement("h3", {
+        id: "skiptohere",
+        className: "typography-body-7 p-2 font-bold"
+    }, "Will skip to here"), ' ', "‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought!’ ‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought!’ ‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought!’"), React.createElement(Button, {
+        onClick: ()=>{
+            var _skipLinkRef_current;
+            return (_skipLinkRef_current = skipLinkRef.current) === null || _skipLinkRef_current === void 0 ? void 0 : _skipLinkRef_current.focus();
+        }
+    }, "Open content skipper"));
 };

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SwitchProps } from './switch.types.js';
-export declare function Switch({ className, label, size, block, checked, isDisabled, ...props }: SwitchProps): JSX.Element;
+export declare function Switch({ className, label, size, block, checked, isDisabled, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Switch } from './switch.component.js';
 declare const meta: Meta<typeof Switch>;
@@ -7,24 +6,24 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Selected switch example
  */
-export declare const SelectedSwitch: Story;
+export declare const Selected: Story;
 /**
  * > Switch size example
  */
-export declare const SwitchSizes: () => JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Disabled switch example
  */
-export declare const DisabledSwitch: Story;
+export declare const Disabled: Story;
 /**
  * > Block switch example
  */
-export declare const BlockSwitch: () => JSX.Element;
+export declare const Block: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Responsive switch example
  */
-export declare const ResponsiveSizeSwitch: Story;
+export declare const ResponsiveSize: Story;

package/dist/components/switch/switch.stories.js

@@ -1,18 +1,13 @@
 import { Switch } from './switch.component.js';
 const meta = {
-    title: 'Example/Switch',
+    title: 'Components/Switch',
     component: Switch,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
 const SIZES = [
@@ -21,19 +16,19 @@ const SIZES = [
     'large',
     'xlarge'
 ];
-export const DefaultStory = {
+export const Default = {
     args: {
         size: 'medium',
         label: 'eStatements'
     }
 };
-export const SelectedSwitch = {
+export const Selected = {
     args: {
         label: 'eStatements',
         checked: true
     }
 };
-export const SwitchSizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement("div", {
+export const Sizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement("div", {
             key: size
         }, React.createElement("h3", {
             className: "font-bold"
@@ -43,13 +38,13 @@ export const SwitchSizes = ()=>React.createElement("div", null, SIZES.map((size)
             size: size,
             label: "eStatements"
         })))));
-export const DisabledSwitch = {
+export const Disabled = {
     args: {
         label: 'eStatements',
         isDisabled: true
     }
 };
-export const BlockSwitch = ()=>React.createElement("div", null, React.createElement(React.Fragment, null, React.createElement("div", {
+export const Block = ()=>React.createElement("div", null, React.createElement(React.Fragment, null, React.createElement("div", {
         className: "mb-2"
     }, React.createElement(Switch, {
         block: true,
@@ -60,7 +55,7 @@ export const BlockSwitch = ()=>React.createElement("div", null, React.createElem
         block: true,
         label: "eStatements"
     }))));
-export const ResponsiveSizeSwitch = {
+export const ResponsiveSize = {
     args: {
         label: 'eStatements',
         size: {

package/dist/components/switch/switch.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'mb-1 inline-flex items-center hover:cursor-pointer',
-        switchDiv: 'border-borderDark after:shadow-switch relative box-content overflow-hidden border transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-[50%] after:bg-white after:transition-all after:duration-[.3s]',
+        switchDiv: 'relative box-content overflow-hidden border border-borderDark transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-[50%] after:bg-white after:shadow-switch after:transition-all after:duration-[.3s]',
         label: 'pr-1'
     },
     variants: {

package/dist/components/symbol/components/logos/bom-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function BOMLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): JSX.Element;
+export declare function BOMLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/bom-multibrand-large-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function BOMMultibrandLargeLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps): JSX.Element;
+export declare function BOMMultibrandLargeLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/bom-multibrand-small-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function BOMMultibrandSmallLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps): JSX.Element;
+export declare function BOMMultibrandSmallLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/bom-shield-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function BOMShieldLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): JSX.Element;
+export declare function BOMShieldLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/bsa-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const BSALogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const BSALogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/bsa-multibrand-large-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const BSAMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const BSAMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/bsa-multibrand-small-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const BSAMultibrandSmallLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxHeight, viewBoxWidth, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const BSAMultibrandSmallLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxHeight, viewBoxWidth, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/bsa-stacked-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const BSAStackedLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const BSAStackedLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/rams-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const RAMSLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const RAMSLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/rams-multibrand-large-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const RAMSMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const RAMSMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/rams-multibrand-small-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const RAMSMultibrandSmallLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const RAMSMultibrandSmallLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/red-avatar-circle-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const RedAvatarCircleLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const RedAvatarCircleLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/red-avatar-circle-reversed-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const RedAvatarCircleReversedLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const RedAvatarCircleReversedLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/red-avatar-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const RedAvatarLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const RedAvatarLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/stg-dragon-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const STGDragonLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const STGDragonLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/stg-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const STGLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const STGLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/stg-multibrand-large-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const STGMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const STGMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/stg-multibrand-small-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const STGMultibrandSmallLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const STGMultibrandSmallLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/wbc-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function WBCLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): JSX.Element;
+export declare function WBCLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/wbc-multibrand-large-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const WBCMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const WBCMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/wbc-multibrand-small-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function WBCMultibrandSmallLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps): JSX.Element;
+export declare function WBCMultibrandSmallLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/wbg-internal-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const WBGInternalLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const WBGInternalLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/wbg-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const WBGLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const WBGLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/wbg-multibrand-large-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const WBGMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const WBGMultibrandLargeLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/logos/wbg-multibrand-small-logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const WBGMultibrandSmallLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => JSX.Element;
+export declare const WBGMultibrandSmallLogo: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, align, offset, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/american-express-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function AmericanExpressSymbol({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): JSX.Element;
+export declare function AmericanExpressSymbol({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/apple-store-inverse-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function AppleStoreInverseSymbol({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): JSX.Element;
+export declare function AppleStoreInverseSymbol({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/apple-store-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function AppleStoreSymbol({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): JSX.Element;
+export declare function AppleStoreSymbol({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/bpay-land-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function BPayLandSymbol({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): JSX.Element;
+export declare function BPayLandSymbol({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/bpay-port-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const BPayPortSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const BPayPortSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/facebook-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const FacebookSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const FacebookSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/google-plus-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const GooglePlusSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const GooglePlusSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/google-store-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const GoogleStoreSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const GoogleStoreSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/instagram-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const InstagramSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const InstagramSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/linked-in-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const LinkedInSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const LinkedInSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/mastercard-accepted-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const MastercardAcceptedSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const MastercardAcceptedSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/mastercard-horizontal-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const MastercardHorizontalSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const MastercardHorizontalSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/mastercard-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const MastercardSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const MastercardSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/microsoft-store-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const MicrosoftStoreSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const MicrosoftStoreSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/pay-id-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const PayIDSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const PayIDSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/slack-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const SlackSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const SlackSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/twitter-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const TwitterSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const TwitterSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/visa-blue-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const VisaBlueSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const VisaBlueSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/visa-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const VisaSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const VisaSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/visa-white-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const VisaWhiteSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const VisaWhiteSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/yammer-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const YammerSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const YammerSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/youtube-symbol.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from '../../symbol.types.js';
-export declare const YouTubeSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => JSX.Element;
+export declare const YouTubeSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type SymbolProps } from './symbol.types.js';
-export declare function Symbol({ copyrightYear, xmlns, role, focusable, className, viewBoxWidth, viewBoxHeight, align, offset, children, ...props }: SymbolProps): JSX.Element;
+export declare function Symbol({ copyrightYear, xmlns, role, focusable, className, viewBoxWidth, viewBoxHeight, align, offset, children, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Symbol>;
 export default meta;
@@ -6,7 +5,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
-export declare const Offset: () => JSX.Element;
-export declare const AllSymbols: () => JSX.Element;
-export declare const AllLogos: () => JSX.Element;
+export declare const Default: Story;
+export declare const Offset: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllSymbols: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllLogos: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/symbol.stories.js

@@ -2,20 +2,17 @@ import React from 'react';
 import { WBCLogo, WBCMultibrandSmallLogo } from './index.js';
 import * as symbols from './index.js';
 const meta = {
-    title: 'Example/Symbol',
+    title: 'Foundation/Symbols',
     component: WBCLogo,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'centered'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {}
 };
 export const Offset = ()=>React.createElement("div", null, React.createElement("p", null, "Left"), React.createElement(WBCMultibrandSmallLogo, {

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

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

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

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

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

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

package/dist/components/table/components/cell/cell.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 border border-x-0 border-b-[1px] border-t-0 border-border p-2 text-left align-bottom'
+        base: 'typography-body-10 border border-x-0 border-b-[1px] border-t-0 border-border p-2 text-left align-top'
     },
     variants: {
         bordered: {

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

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

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

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

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

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