@westpac/ui 0.7.0 → 0.7.1

package/dist/components/select/select.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
     variants: {
         size: {
             small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',

package/dist/components/select/select.types.d.ts

@@ -1,4 +1,15 @@
 import { SelectHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './select.styles.js';
-export type SelectProps = VariantProps<typeof styles> & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>;
+type Variants = VariantProps<typeof styles>;
+export type SelectProps = {
+    /**
+     * Whether select is invalid
+     */
+    invalid?: Variants['invalid'];
+    /**
+     * Size of select
+     */
+    size?: Variants['size'];
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>;
+export {};

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.types.d.ts

@@ -1,10 +1,8 @@
 import { type AriaCheckboxGroupItemProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
 import { FlexiCellProps } from '../../../../../index.js';
-import { styles } from './selector-checkbox-group-option.styles.js';
 export type SelectorCheckboxGroupOptionProps = {
     /**
      * Check icon to render
      */
     checkIcon?: 'checkbox' | 'arrow';
-} & FlexiCellProps & VariantProps<typeof styles> & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;
+} & FlexiCellProps & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.d.ts

@@ -4,12 +4,33 @@ export declare const SelectorCheckboxGroupContext: React.Context<import("react-s
 export declare function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SelectorCheckboxGroup {
     var Option: React.ForwardRefExoticComponent<import("./components/index.js").SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
-        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
-        Body: ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
-        Button: ({ className, ...props }: import("../../../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
-        Circle: ({ className, ...props }: import("../../../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
-        Footer: ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
-        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
-        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
+        Adornment: {
+            ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Body: {
+            ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Button: {
+            ({ className, ...props }: import("../../../index.js").ButtonProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Circle: {
+            ({ className, ...props }: import("../../../index.js").CircleProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Footer: {
+            ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Hint: {
+            ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Label: {
+            ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
     };
 }

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.types.d.ts

@@ -1,8 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './selector-checkbox-group.styles.js';
 export type SelectorCheckboxGroupContextState = CheckboxGroupState;
 export type SelectorCheckboxGroupProps = {
     /**
@@ -17,4 +15,4 @@ export type SelectorCheckboxGroupProps = {
      * Controls size of `CheckboxItem` components, can't be applied directly to `CheckboxItem`
      */
     size?: 'medium' | 'large';
-} & AriaCheckboxGroupProps & VariantProps<typeof styles> & Omit<HTMLAttributes<Element>, 'onChange'>;
+} & AriaCheckboxGroupProps & Omit<HTMLAttributes<Element>, 'onChange'>;

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.types.d.ts

@@ -1,8 +1,6 @@
 import { type HTMLAttributes } from 'react';
 import { type AriaRadioProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
 import { type FlexiCellProps } from '../../../../../../index.js';
-import { styles } from './selector-radio-group-option.styles.js';
 export type SelectorRadioGroupOptionProps = {
     /**
      * Check icon to render
@@ -12,4 +10,4 @@ export type SelectorRadioGroupOptionProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & FlexiCellProps & AriaRadioProps & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & FlexiCellProps & AriaRadioProps & HTMLAttributes<Element>;

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.d.ts

@@ -4,12 +4,33 @@ export declare const SelectorRadioGroupContext: React.Context<SelectorRadioGroup
 export declare function SelectorRadioGroup({ className, children, label, orientation, errorMessage, description, ...props }: SelectorRadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SelectorRadioGroup {
     var Option: React.ForwardRefExoticComponent<import("./components/index.js").SelectorRadioGroupOptionProps & React.RefAttributes<unknown>> & {
-        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
-        Body: ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
-        Button: ({ className, ...props }: import("../../../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
-        Circle: ({ className, ...props }: import("../../../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
-        Footer: ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
-        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
-        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
+        Adornment: {
+            ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Body: {
+            ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Button: {
+            ({ className, ...props }: import("../../../index.js").ButtonProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Circle: {
+            ({ className, ...props }: import("../../../index.js").CircleProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Footer: {
+            ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Hint: {
+            ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Label: {
+            ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
     };
 }

package/dist/components/selector/components/selector-radio-group/selector-radio-group.types.d.ts

@@ -3,15 +3,21 @@ import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './selector-radio-group.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type SelectorRadioGroupProps = {
+    /**
+     * Orientation of radio
+     */
+    orientation?: Variants['orientation'];
     /**
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & AriaRadioGroupProps & Omit<HTMLAttributes<Element>, 'onChange'>;
+} & AriaRadioGroupProps & Omit<HTMLAttributes<Element>, 'onChange'>;
 export type SelectorRadioGroupContextState = {
     /**
      * Controls orientation of `Radio` components, can't be applied directly on `Radio`
      */
     orientation: 'vertical' | 'horizontal';
 } & RadioGroupState;
+export {};

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

@@ -4,28 +4,88 @@ import { type SelectorProps } from './selector.types.js';
 export declare function Selector(props: SelectorProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Selector {
     var Radio: React.ForwardRefExoticComponent<import("./components/selector-radio-group/components/index.js").SelectorRadioGroupOptionProps & React.RefAttributes<unknown>> & {
-        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
-        Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
-        Button: ({ className, ...props }: import("../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
-        Circle: ({ className, ...props }: import("../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
-        Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
-        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
-        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
+        Adornment: {
+            ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Body: {
+            ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Button: {
+            ({ className, ...props }: import("../index.js").ButtonProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Circle: {
+            ({ className, ...props }: import("../index.js").CircleProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Footer: {
+            ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Hint: {
+            ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Label: {
+            ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
     };
     var Checkbox: React.ForwardRefExoticComponent<import("./components/selector-checkbox-group/components/index.js").SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
-        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
-        Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
-        Button: ({ className, ...props }: import("../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
-        Circle: ({ className, ...props }: import("../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
-        Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
-        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
-        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
-    };
-    var Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
-    var Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
-    var Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
-    var Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
+        Adornment: {
+            ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Body: {
+            ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Button: {
+            ({ className, ...props }: import("../index.js").ButtonProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Circle: {
+            ({ className, ...props }: import("../index.js").CircleProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Footer: {
+            ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Hint: {
+            ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Label: {
+            ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+    };
+    var Body: {
+        ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    var Footer: {
+        ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    var Adornment: {
+        ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    var Hint: {
+        ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     var Label: typeof SelectorLabel;
-    var Button: ({ className, ...props }: import("../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
-    var Circle: ({ className, ...props }: import("../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
+    var Button: {
+        ({ className, ...props }: import("../index.js").ButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    var Circle: {
+        ({ className, ...props }: import("../index.js").CircleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 }

package/dist/components/selector/selector.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

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

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

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

@@ -1,6 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './skip-link.styles.js';
 export type SkipLinkProps = ({
     /**
      * Tag to render
@@ -15,4 +13,4 @@ export type SkipLinkProps = ({
      * Tag to render
      */
     tag?: keyof Pick<JSX.IntrinsicElements, 'a'>;
-}) & VariantProps<typeof styles> & HTMLAttributes<Element>;
+}) & HTMLAttributes<Element>;

package/dist/components/switch/switch.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

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

@@ -1,11 +1,12 @@
 import { AriaCheckboxProps } from 'react-aria';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './switch.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type SwitchProps = {
     /**
      * Whether to display switch as block
      */
-    block?: boolean;
+    block?: Variants['block'];
     /**
      * Default checked
      */
@@ -18,4 +19,9 @@ export type SwitchProps = {
      * Label for the switch
      */
     label: string;
-} & Omit<AriaCheckboxProps, 'children' | 'isSelected'> & Pick<VariantProps<typeof styles>, 'size'>;
+    /**
+     * Size of switch
+     */
+    size?: Variants['size'];
+} & Omit<AriaCheckboxProps, 'children' | 'isSelected'>;
+export {};

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

@@ -13,6 +13,7 @@ export { BSAMultibrandSmallLogo } from './components/logos/bsa-multibrand-small-
 export { BSAStackedLogo } from './components/logos/bsa-stacked-logo.js';
 export { FacebookSymbol } from './components/symbols/facebook-symbol.js';
 export { GooglePlusSymbol } from './components/symbols/google-plus-symbol.js';
+export { GoogleStoreSymbol } from './components/symbols/google-store-symbol.js';
 export { InstagramSymbol } from './components/symbols/instagram-symbol.js';
 export { LinkedInSymbol } from './components/symbols/linked-in-symbol.js';
 export { MastercardAcceptedSymbol } from './components/symbols/mastercard-accepted-symbol.js';

package/dist/components/symbol/index.js

@@ -13,6 +13,7 @@ export { BSAMultibrandSmallLogo } from './components/logos/bsa-multibrand-small-
 export { BSAStackedLogo } from './components/logos/bsa-stacked-logo.js';
 export { FacebookSymbol } from './components/symbols/facebook-symbol.js';
 export { GooglePlusSymbol } from './components/symbols/google-plus-symbol.js';
+export { GoogleStoreSymbol } from './components/symbols/google-store-symbol.js';
 export { InstagramSymbol } from './components/symbols/instagram-symbol.js';
 export { LinkedInSymbol } from './components/symbols/linked-in-symbol.js';
 export { MastercardAcceptedSymbol } from './components/symbols/mastercard-accepted-symbol.js';

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

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react';
+import { Symbol } from './symbol.component.js';
 declare const meta: Meta<typeof Symbol>;
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -43,12 +43,71 @@ export const AllLogos = ()=>{
             ...curr,
             [key]: symbol
         } : curr, {});
-    return React.createElement("div", {
+    const logos = Object.entries(allLogos).reduce((curr, [key, symbol])=>!key.includes('Multibrand') ? {
+            ...curr,
+            [key]: symbol
+        } : curr, {});
+    const multibrandLargeLogos = Object.entries(allLogos).reduce((curr, [key, symbol])=>key.includes('MultibrandLarge') ? {
+            ...curr,
+            [key]: symbol
+        } : curr, {});
+    const multibrandSmallLogos = Object.entries(allLogos).reduce((curr, [key, symbol])=>key.includes('MultibrandSmall') ? {
+            ...curr,
+            [key]: symbol
+        } : curr, {});
+    const align = [
+        'left',
+        'center',
+        'right'
+    ];
+    return React.createElement(React.Fragment, null, React.createElement("h3", {
+        className: "typography-body-7 mb-4 font-bold"
+    }, "Logos"), React.createElement("div", {
         className: "grid grid-cols-4 gap-5"
-    }, Object.entries(allLogos).map(([key, Logo])=>React.createElement("div", {
+    }, Object.entries(logos).map(([key, Logo])=>React.createElement("div", {
             key: key,
             className: " flex flex-col items-center justify-end"
         }, React.createElement(Logo, null), React.createElement("p", {
             className: "mt-2"
-        }, key))));
+        }, `<${key} />`)))), React.createElement("h3", {
+        className: "typography-body-7 mb-2 mt-6 font-bold"
+    }, "Multi-brand logos"), React.createElement("h4", {
+        className: "typography-body-8 mb-4 font-bold"
+    }, "Large"), React.createElement("div", {
+        className: "grid grid-cols-4 gap-5"
+    }, Object.entries(multibrandLargeLogos).map(([key, Logo])=>React.createElement(React.Fragment, null, React.createElement("div", {
+            key: `${key}-${align}`,
+            className: " flex flex-col items-center justify-end"
+        }, React.createElement(Logo, {
+            className: "border border-dashed border-border"
+        }), React.createElement("p", {
+            className: "mt-2"
+        }, `<${key} />`)), align.map((align)=>React.createElement("div", {
+                key: `${key}-${align}`,
+                className: " flex flex-col items-center justify-end"
+            }, React.createElement(Logo, {
+                align: align,
+                className: "border border-dashed border-border"
+            }), React.createElement("p", {
+                className: "mt-2"
+            }, `<${key} align=${align} />`)))))), React.createElement("h4", {
+        className: "typography-body-8 my-4 font-bold"
+    }, "Small"), React.createElement("div", {
+        className: "grid grid-cols-4 gap-5"
+    }, Object.entries(multibrandSmallLogos).map(([key, Logo])=>React.createElement(React.Fragment, null, React.createElement("div", {
+            key: `${key}-${align}`,
+            className: " flex flex-col items-center justify-end"
+        }, React.createElement(Logo, {
+            className: "border border-dashed border-border"
+        }), React.createElement("p", {
+            className: "mt-2"
+        }, `<${key} />`)), align.map((align)=>React.createElement("div", {
+                key: `${key}-${align}`,
+                className: " flex flex-col items-center justify-end"
+            }, React.createElement(Logo, {
+                align: align,
+                className: "border border-dashed border-border"
+            }), React.createElement("p", {
+                className: "mt-2"
+            }, `<${key} align=${align} />`)))))));
 };

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

@@ -1,6 +1,4 @@
 import { type SVGAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './symbol.styles.js';
 export type Align = 'left' | 'center' | 'right';
 export type SymbolProps = Omit<SVGAttributes<SVGElement>, 'offset'> & {
     /**
@@ -27,4 +25,4 @@ export type SymbolProps = Omit<SVGAttributes<SVGElement>, 'offset'> & {
      * SVG viewBox width
      */
     viewBoxWidth?: number;
-} & VariantProps<typeof styles>;
+};

package/dist/components/table/table.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

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

@@ -3,7 +3,12 @@ import { Orientation } from 'react-aria';
 import { Node, TabListState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './tab.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type TabProps<T = any> = {
+    /**
+     * Color of tab
+     */
+    color?: Variants['color'];
     /**
      * isDisabled flag
      */
@@ -12,6 +17,14 @@ export type TabProps<T = any> = {
      * Item
      */
     item: Node<T>;
+    /**
+     * Whether tab is justified
+     */
+    justify?: Variants['justify'];
+    /**
+     * Look of tab
+     */
+    look?: Variants['look'];
     /**
      * Orientation, vertical or horizontal for tab
      */
@@ -24,4 +37,5 @@ export type TabProps<T = any> = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;
+export {};

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

@@ -1,2 +1,5 @@
 import { type TabPanelProps } from './tab-panel.types.js';
 export declare function TabPanel({ className, state, look, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabPanel {
+    var displayName: string;
+}

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

@@ -31,3 +31,4 @@ export function TabPanel({ className , state , look , ...props }) {
         })
     }), (_state_selectedItem = state.selectedItem) === null || _state_selectedItem === void 0 ? void 0 : _state_selectedItem.props.children);
 }
+TabPanel.displayName = 'Tabs.Panel';

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

@@ -3,9 +3,15 @@ import { AriaTabPanelProps } from 'react-aria';
 import { TabListState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './tab-panel.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type TabPanelProps<T = any> = {
+    /**
+     * Look of tab panel
+     */
+    look?: Variants['look'];
     /**
      * Tab list state
      */
     state: TabListState<T>;
-} & AriaTabPanelProps & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & AriaTabPanelProps & HTMLAttributes<Element>;
+export {};

package/dist/components/tabs/tabs.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

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

@@ -3,7 +3,8 @@ import { HTMLAttributes, ReactElement } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { TabProps } from './components/index.js';
 import { styles } from './tabs.styles.js';
-export type TabsProps<T = any> = SpectrumTabsProps<T> & VariantProps<typeof styles> & {
+type Variants = VariantProps<typeof styles>;
+export type TabsProps<T = any> = SpectrumTabsProps<T> & {
     /**
      * Children
      */
@@ -16,6 +17,18 @@ export type TabsProps<T = any> = SpectrumTabsProps<T> & VariantProps<typeof styl
      * Stretch the tab to fill the whole content
      */
     justify?: boolean;
+    /**
+     * Look of tabs
+     */
+    look?: Variants['look'];
+    /**
+     * Orientation of tabs
+     */
+    orientation?: Variants['orientation'];
+    /**
+     * Sticky
+     */
+    sticky?: Variants['sticky'];
     /**
      * set the offset for the sticky tab
      */
@@ -26,3 +39,4 @@ export type TabsProps<T = any> = SpectrumTabsProps<T> & VariantProps<typeof styl
         top?: string;
     };
 } & HTMLAttributes<HTMLDivElement>;
+export {};

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

@@ -1,32 +1,9 @@
 import React from 'react';
-export declare const Textarea: React.ForwardRefExoticComponent<import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-    isFocused: {
-        true: string;
-    };
-}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled w-full", {
-    responsiveVariants: string[];
-}, {
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-    isFocused: {
-        true: string;
-    };
-}, undefined>> & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: React.ForwardRefExoticComponent<{
+    invalid?: boolean | {
+        [x: string]: boolean | undefined;
+    } | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | {
+        [x: string]: "small" | "medium" | "large" | "xlarge" | undefined;
+    } | undefined;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea/textarea.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){