@westpac/ui 0.7.0 → 0.8.0

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.d.ts

@@ -5,24 +5,4 @@ export declare const BreadcrumbItem: React.ForwardRefExoticComponent<{
     isCurrent?: boolean | undefined;
     isDisabled?: boolean | undefined;
     tag?: keyof JSX.IntrinsicElements | undefined;
-} & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
-    isCurrent: {
-        true: string;
-        false: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-}, undefined, "text-[0.8125rem]", {
-    responsiveVariants: string[];
-}, {
-    isCurrent: {
-        true: string;
-        false: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-}, undefined>> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<any>>;
+} & React.AnchorHTMLAttributes<Element> & React.RefAttributes<any>>;

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.js

@@ -48,3 +48,4 @@ export function BaseBreadcrumbItem({ className , isDisabled =false , isCurrent =
     })));
 }
 export const BreadcrumbItem = forwardRef(BaseBreadcrumbItem);
+BreadcrumbItem.displayName = 'Breadcrumb.Item';

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.types.d.ts

@@ -1,6 +1,4 @@
 import { AnchorHTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './breadcrumb-item.styles.js';
 export type BreadcrumbItemProps = {
     /**
      * isCurrent flag
@@ -14,4 +12,4 @@ export type BreadcrumbItemProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & AnchorHTMLAttributes<Element>;
+} & AnchorHTMLAttributes<Element>;

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

@@ -1,133 +1,24 @@
 import React from 'react';
 export declare const Button: React.ForwardRefExoticComponent<{
+    block?: boolean | {
+        [x: string]: boolean | undefined;
+    } | undefined;
     iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconColor?: "link" | "text" | "border" | "heading" | "primary" | "hero" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "light" | "muted" | "neutral" | "pop" | (string & {
         [x: string]: "link" | "text" | "border" | "heading" | "primary" | "hero" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "light" | "muted" | "neutral" | "pop" | undefined;
     }) | undefined;
+    justify?: boolean | {
+        [x: string]: boolean | undefined;
+    } | undefined;
+    look?: "link" | "primary" | "hero" | "faint" | {
+        [x: string]: "link" | "primary" | "hero" | "faint" | undefined;
+    } | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | {
+        [x: string]: "small" | "medium" | "large" | "xlarge" | undefined;
+    } | undefined;
+    soft?: boolean | {
+        [x: string]: boolean | undefined;
+    } | undefined;
     tag?: "a" | "button" | "div" | "span" | undefined;
-} & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
-    size: {
-        small: {
-            base: string;
-        };
-        medium: {
-            base: string;
-        };
-        large: {
-            base: string;
-        };
-        xlarge: {
-            base: string;
-        };
-    };
-    look: {
-        primary: {
-            base: string;
-        };
-        hero: {
-            base: string;
-        };
-        faint: {
-            base: string;
-        };
-        link: {
-            base: string;
-        };
-    };
-    soft: {
-        true: {
-            base: string;
-        };
-    };
-    block: {
-        true: {
-            base: string;
-        };
-    };
-    justify: {
-        true: {
-            base: string;
-        };
-    };
-    hasChildren: {
-        true: string;
-    };
-    isFocusVisible: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    iconBefore: string;
-    iconAfter: string;
-    dropdown: string;
-    text: string;
-}, undefined, {
-    responsiveVariants: string[];
-}, {
-    size: {
-        small: {
-            base: string;
-        };
-        medium: {
-            base: string;
-        };
-        large: {
-            base: string;
-        };
-        xlarge: {
-            base: string;
-        };
-    };
-    look: {
-        primary: {
-            base: string;
-        };
-        hero: {
-            base: string;
-        };
-        faint: {
-            base: string;
-        };
-        link: {
-            base: string;
-        };
-    };
-    soft: {
-        true: {
-            base: string;
-        };
-    };
-    block: {
-        true: {
-            base: string;
-        };
-    };
-    justify: {
-        true: {
-            base: string;
-        };
-    };
-    hasChildren: {
-        true: string;
-    };
-    isFocusVisible: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    iconBefore: string;
-    iconAfter: string;
-    dropdown: string;
-    text: string;
-}>> & React.RefAttributes<unknown>>;
+} & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<unknown>>;

package/dist/components/button/button.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/button/button.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+        base: 'inline-flex items-center justify-center rounded-[0.1875rem] leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
         iconBefore: '',
         iconAfter: '',
         dropdown: 'ml-[0.4em]',
@@ -10,21 +10,21 @@ export const styles = tv({
     variants: {
         size: {
             small: {
-                base: 'active-theme-rams:before:h-[0.0625rem] typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem]'
+                base: 'typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem] active-theme-rams:before:h-[0.0625rem]'
             },
             medium: {
-                base: 'active-theme-rams:before:h-[0.125rem] typography-body-9 px-2 py-[0.3125rem]'
+                base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem]'
             },
             large: {
-                base: 'active-theme-rams:before:h-[0.1875rem] typography-body-9 px-[0.9375rem] py-[0.5rem]'
+                base: 'typography-body-9 px-[0.9375rem] py-[0.5rem] active-theme-rams:before:h-[0.1875rem]'
             },
             xlarge: {
-                base: 'active-theme-rams:before:h-[0.25rem] typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]'
+                base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem] active-theme-rams:before:h-[0.25rem]'
             }
         },
         look: {
             primary: {
-                base: 'active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50'
+                base: 'relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop'
             },
             hero: {
                 base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50'

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

@@ -2,7 +2,12 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { IconProps } from '../icon/index.js';
 import { styles } from './button.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type ButtonProps = {
+    /**
+     * Fit button width to its parent width.
+     */
+    block?: Variants['block'];
     /**
      * Places an icon within the button, after the button’s text
      */
@@ -17,8 +22,25 @@ export type ButtonProps = {
      * Defaults to the current text color.
      */
     iconColor?: IconProps['color'];
+    /**
+     * Justify align button children
+     */
+    justify?: Variants['justify'];
+    /**
+     * Button look
+     */
+    look?: Variants['look'];
+    /**
+     * Size of the button
+     */
+    size?: Variants['size'];
+    /**
+     * Removes background colour and adjusts text colour.
+     */
+    soft?: Variants['soft'];
     /**
      * Tag to render
      */
     tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
-} & ButtonHTMLAttributes<Element> & AnchorHTMLAttributes<Element> & VariantProps<typeof styles>;
+} & ButtonHTMLAttributes<Element> & AnchorHTMLAttributes<Element>;
+export {};

package/dist/components/button-dropdown/button-dropdown.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/button-dropdown/button-dropdown.styles.d.ts

@@ -13,6 +13,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     block: {
         true: {
             panel: string;
+            base: string;
         };
     };
 }, {
@@ -35,6 +36,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     block: {
         true: {
             panel: string;
+            base: string;
         };
     };
 }, {

package/dist/components/button-dropdown/button-dropdown.styles.js

@@ -18,7 +18,8 @@ export const styles = tv({
         },
         block: {
             true: {
-                panel: ''
+                panel: '',
+                base: 'justify-between'
             }
         }
     }

package/dist/components/button-dropdown/button-dropdown.types.d.ts

@@ -2,7 +2,12 @@ import { ButtonHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { ButtonProps } from '../button/index.js';
 import { styles } from './button-dropdown.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type ButtonDropdownProps = {
+    /**
+     * Size of the the dropdown panel
+     */
+    dropdownSize?: Variants['dropdownSize'];
     /**
      * Look for button
      */
@@ -19,4 +24,5 @@ export type ButtonDropdownProps = {
      * Button text
      */
     text: string;
-} & ButtonHTMLAttributes<Element> & Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> & VariantProps<typeof styles>;
+} & ButtonHTMLAttributes<Element> & Pick<ButtonProps, 'size' | 'iconBefore' | 'block'>;
+export {};

package/dist/components/button-dropdown/components/panel/panel.component.d.ts

@@ -1,2 +1,5 @@
 import { type PanelProps } from './panel.types.js';
+/**
+ * @private
+ */
 export declare function Panel({ className, children, state, block, id, ...props }: PanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-dropdown/components/panel/panel.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'mt-[0.1875rem] rounded-[3px] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+        base: 'mt-[0.1875rem] rounded-[0.1875rem] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
         dialog: ''
     },
     variants: {

package/dist/components/button-group/button-group.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/button-group/components/button/button.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        button: 'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden'
+        button: 'rounded-none hover:cursor-pointer group-first/buttons:rounded-l-[0.1875rem] group-last/buttons:rounded-r-[0.1875rem] group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden'
     },
     variants: {
         isDisabled: {

package/dist/components/checkbox-group/checkbox-group.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/checkbox-group/components/checkbox/checkbox.component.js

@@ -17,11 +17,16 @@ import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 import { Icon } from '../../../icon/icon.component.js';
 import { CheckboxGroupContext } from '../../checkbox-group.component.js';
 import { styles as checkboxItemStyles } from './checkbox.styles.js';
-function CheckIcon({ copyrightYear ='2023' , ...props }) {
+function CheckIcon({ copyrightYear ='2023' , size , ...props }) {
+    const viewBoxSize = size === 'large' ? '0 0 30 30' : '0 0 24 24';
     return React.createElement(Icon, _extends({
-        copyrightYear: copyrightYear
-    }, props), React.createElement("path", {
-        d: "M16.285 6.0003L10.769 13.8053L6.936 11.0173L5 13.6463L11.526 18.5263L19 8.0053L16.285 6.0003Z",
+        copyrightYear: copyrightYear,
+        viewBox: viewBoxSize
+    }, props), size === 'large' ? React.createElement("path", {
+        d: "M12.9952 17.5891L20.2923 10.292L21.7023 11.712L12.9952 20.4191L8.28809 15.712L9.69809 14.302L12.9952 17.5891Z",
+        fill: "currentColor"
+    }) : React.createElement("path", {
+        d: "M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z",
         fill: "currentColor"
     }));
 }
@@ -52,6 +57,7 @@ function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
         className: styles.checkbox()
     }, isSelected && React.createElement(CheckIcon, {
         className: styles.checkIcon(),
+        size: size,
         color: isDisabled ? 'border' : 'hero'
     })), React.createElement("div", {
         className: styles.textWrapper()
@@ -62,3 +68,4 @@ function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
     }, hint)));
 }
 export const Checkbox = forwardRef(BaseCheckbox);
+Checkbox.displayName = 'CheckboxGroup.Checkbox';

package/dist/components/checkbox-group/components/checkbox/checkbox.styles.js

@@ -6,7 +6,7 @@ export const styles = tv({
         textWrapper: 'flex flex-col justify-center',
         labelText: 'typography-body-10 py-[2px] pl-1',
         hintText: 'typography-body-10 pl-1 text-muted',
-        checkbox: 'flex shrink-0 items-center justify-center rounded border border-hero'
+        checkbox: 'flex shrink-0 items-center justify-center rounded-[0.1875rem] border border-hero'
     },
     variants: {
         isDisabled: {

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

@@ -1,9 +1,7 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './circle.styles.js';
 export type CircleProps = {
     /**
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/dist/components/collapsible/collapsible.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/collapsible/collapsible.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'text-text px-0 no-underline hover:underline',
+        base: 'px-0 text-text no-underline hover:underline',
         content: 'typography-body-10 mb-2 block'
     },
     variants: {

package/dist/components/compacta/compacta.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -221,7 +222,7 @@ export function Compacta({ className , children , titleTag: Tag = 'h3' , addText
             setPrimaryTitle: (title)=>setTitle(item.id, 'primary', title),
             setSecondaryTitle: (title)=>setTitle(item.id, 'secondary', title),
             setTertiaryTitle: (title)=>setTitle(item.id, 'tertiary', title)
-        }), React.createElement(Button, {
+        }), items.length > 1 && React.createElement(Button, {
             className: styles.removeBtn(),
             "aria-label": `remove item ${index + 1}`,
             iconBefore: (props)=>React.createElement(RemoveCircleIcon, _extends({}, props, {

package/dist/components/compacta/compacta.styles.js

@@ -3,20 +3,20 @@ export const styles = tv({
     slots: {
         base: '',
         item: 'border-borderDark mb-2 overflow-hidden rounded-[0.1875rem] border',
-        header: 'text-text bg-white p-[0.8125rem_1.125rem]',
+        header: 'text-text bg-white px-3 py-[0.9375rem]',
         headerTitle: 'flex min-w-0 flex-1 items-center',
-        primaryHeading: 'my-[16px] flex',
-        secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-[2.25rem]',
-        itemIndex: 'mr-2 w-4 flex-none font-bold',
+        primaryHeading: 'flex w-full',
+        secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-4',
+        itemIndex: 'typography-body-9 mr-1 w-3 flex-none font-bold',
         removeBtn: 'mt-[0.875rem] h-auto p-0 no-underline hover:underline',
         addBtn: 'h-auto p-0 no-underline hover:underline',
-        toggleBtn: 'ml-auto p-0',
+        toggleBtn: 'p-0',
         collapsible: '',
         content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
-        footer: 'pt-[0.5rem]',
-        titlePrimary: 'font-bold',
-        titleSecondary: 'mt-[0.125rem]',
-        titleTertiary: 'mt-[0.125rem]'
+        footer: '',
+        titlePrimary: 'typography-body-9 font-bold',
+        titleSecondary: 'mt-1 items-center',
+        titleTertiary: 'mt-1 items-center'
     },
     variants: {},
     compoundSlots: [
@@ -27,7 +27,7 @@ export const styles = tv({
                 'titleTertiary'
             ],
             class: [
-                'mr-2',
+                'mr-1',
                 'truncate',
                 'flex-1'
             ]

package/dist/components/date-picker/date-picker.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/date-picker/date-picker.types.d.ts

@@ -11,6 +11,7 @@ export type DuetDatePickerElement = Element & {
     name?: string;
     value?: string;
 };
+type Variants = VariantProps<typeof styles>;
 export type DatePickerProps = {
     disableDates?: string[];
     disableDaysOfWeek?: number[];
@@ -29,5 +30,10 @@ export type DatePickerProps = {
     onClose?: (...args: any[]) => unknown;
     onFocus?: (...args: any[]) => unknown;
     onOpen?: (...args: any[]) => unknown;
+    /**
+     * Size of datepicker input
+     */
+    size?: Variants['size'];
     value?: string;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;
+export {};

package/dist/components/error-message/error-message.styles.js

@@ -1,8 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 flex items-center text-danger',
+        base: 'typography-body-11 flex items-center text-danger',
         list: 'mb-2 flex flex-col gap-1',
-        icon: 'mr-[0.5rem] mt-[mr-0.25rem] align-top'
+        icon: 'mr-[0.5em] align-top'
     }
 });

package/dist/components/error-message/error-message.types.d.ts

@@ -1,6 +1,4 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './error-message.styles.js';
 export type ErrorMessageProps = {
     /**
      * Icon
@@ -14,4 +12,4 @@ export type ErrorMessageProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/dist/components/field/field.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/field/field.types.d.ts

@@ -1,8 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { AriaFieldProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
 import { FormHintProps } from '../index.js';
-import { styles } from './field.styles.js';
 export type FieldProps = {
     /**
      * error message
@@ -16,4 +14,4 @@ export type FieldProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & AriaFieldProps & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & AriaFieldProps & HTMLAttributes<Element>;

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.d.ts

@@ -1,3 +1,6 @@
 import { type FlexiCellAdornmentProps } from './flexi-cell-adornment.types.js';
 /** Flexi Cell Adornment: Flexi Cell Adornment */
-export declare const FlexiCellAdornment: ({ children, tag: Tag, align, className, ...props }: FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexiCellAdornment: {
+    ({ children, tag: Tag, align, className, ...props }: FlexiCellAdornmentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.js

@@ -22,3 +22,4 @@ export const FlexiCellAdornment = ({ children , tag: Tag = 'div' , align ='cente
         })
     }), children);
 };
+FlexiCellAdornment.displayName = 'FlexiCell.Adornment';

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.types.d.ts

@@ -1,6 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './flexi-cell-adornment.styles.js';
 export type FlexiCellAdornmentProps = {
     /**
      * Define the alignment of content
@@ -14,4 +12,4 @@ export type FlexiCellAdornmentProps = {
      * Component's tag
      */
     tag?: keyof JSX.IntrinsicElements;
-} & HTMLAttributes<HTMLOrSVGElement> & VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.d.ts

@@ -1,3 +1,6 @@
 import { type FlexiCellBodyProps } from './flexi-cell-body.types.js';
 /** Flexi Cell Body: Flexi Cell Body */
-export declare const FlexiCellBody: ({ children, tag: Tag, className, ...props }: FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexiCellBody: {
+    ({ children, tag: Tag, className, ...props }: FlexiCellBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.js

@@ -21,3 +21,4 @@ export const FlexiCellBody = ({ children , tag: Tag = 'div' , className , ...pro
         })
     }), children);
 };
+FlexiCellBody.displayName = 'FlexiCell.Body';

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.types.d.ts

@@ -1,6 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './flexi-cell-body.styles.js';
 export type BaseFlexiCellBodyProps = {
     /**
      * Children attributes
@@ -30,5 +28,5 @@ type CircleAsAllOtherTagsProps<Tag> = {
     tag?: Tag;
 };
 type ElementKeysWithoutA = keyof Omit<JSX.IntrinsicElements, 'a'>;
-export type FlexiCellBodyProps<Tag extends ElementKeysWithoutA = ElementKeysWithoutA> = (FlexiCellBodyAsLinkProps | CircleAsAllOtherTagsProps<Tag>) & BaseFlexiCellBodyProps & VariantProps<typeof styles>;
+export type FlexiCellBodyProps<Tag extends ElementKeysWithoutA = ElementKeysWithoutA> = (FlexiCellBodyAsLinkProps | CircleAsAllOtherTagsProps<Tag>) & BaseFlexiCellBodyProps;
 export {};

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.d.ts

@@ -1,3 +1,6 @@
 import { type FlexiCellButtonProps } from './flexi-cell-button.types.js';
 /** Flexi Cell Button: Flexi Cell Button */
-export declare const FlexiCellButton: ({ className, ...props }: FlexiCellButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexiCellButton: {
+    ({ className, ...props }: FlexiCellButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.js

@@ -23,3 +23,4 @@ export const FlexiCellButton = ({ className , ...props })=>{
         look: "link"
     }, props));
 };
+FlexiCellButton.displayName = 'FlexiCell.Button';