@westpac/ui 0.5.0 → 0.7.0

package/dist/components/checkbox-group/components/checkbox/checkbox.styles.d.ts

@@ -8,7 +8,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             checkbox: string;
         };
@@ -52,7 +52,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             checkbox: string;
         };

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 h-4 w-4 items-center justify-center rounded border border-hero'
+        checkbox: 'flex shrink-0 items-center justify-center rounded border border-hero'
     },
     variants: {
         isDisabled: {
@@ -18,9 +18,9 @@ export const styles = tv({
                 base: 'hover:cursor-pointer'
             }
         },
-        isFocusVisible: {
+        isFocused: {
             true: {
-                checkbox: 'rounded focus-outline'
+                checkbox: 'focus-outline'
             }
         },
         orientation: {

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

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

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

@@ -6,4 +6,4 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;

package/dist/components/circle/circle.stories.js

@@ -1,19 +1,16 @@
 import { Circle } from './circle.component.js';
 const meta = {
-    title: 'Example/Circle',
+    title: 'Components/Circle',
     component: Circle,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'centered'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'GK'
     }

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type CollapsibleProps } from './collapsible.types.js';
-export declare function Collapsible({ className, children, open, text, size, onClick, }: CollapsibleProps): JSX.Element;
+export declare function Collapsible({ className, children, open, text, size, onClick, }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/collapsible/collapsible.component.js

@@ -43,6 +43,7 @@ export function Collapsible({ className , children , open =false , text , size =
             className
         }),
         look: "link",
+        iconColor: "primary",
         iconAfter: ButtonIcon,
         onClick: handleClick,
         size: size,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Collapsible } from './collapsible.component.js';
 declare const meta: Meta<typeof Collapsible>;
@@ -7,12 +6,12 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Examples of sizes of collapsible button
  */
-export declare const CollapsibleSizes: () => JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Setting the default of collapsible to open
  */
-export declare const CollapsibleOpen: () => JSX.Element;
+export declare const Open: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/collapsible/collapsible.stories.js

@@ -1,18 +1,13 @@
 import { Collapsible } from './collapsible.component.js';
 const meta = {
-    title: 'Example/Collapsible',
+    title: 'Components/Collapsible',
     component: Collapsible,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "typography-body-10 p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
 const SIZES = [
@@ -21,15 +16,13 @@ const SIZES = [
     'large',
     'xlarge'
 ];
-export const DefaultStory = {
+export const Default = {
     args: {
         text: 'Toggle collapsible',
         children: 'Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta nobis modi officia incidunt eos dolores atque, unde error delectus officiis.'
     }
 };
-export const CollapsibleSizes = ()=>React.createElement("div", {
-        className: "typography-body-10 p-3"
-    }, SIZES.map((size)=>React.createElement("div", {
+export const Sizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement("div", {
             className: "mb-2",
             key: size
         }, React.createElement("h2", {
@@ -38,9 +31,7 @@ export const CollapsibleSizes = ()=>React.createElement("div", {
             text: "Toggle collapsible",
             size: size
         }, React.createElement("p", null, "Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta nobis modi officia incidunt eos dolores atque, unde error delectus officiis.")), React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit, praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora deleniti deserunt!"))));
-export const CollapsibleOpen = ()=>React.createElement("div", {
-        className: "typography-body-10 p-3"
-    }, SIZES.map((size)=>React.createElement("div", {
+export const Open = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement("div", {
             className: "mb-2",
             key: size
         }, React.createElement("h2", {

package/dist/components/collapsible/collapsible.styles.js

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

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta } from '@storybook/react';
 import { Compacta } from './compacta.component.js';
 declare const meta: Meta<typeof Compacta>;
@@ -6,4 +5,4 @@ export default meta;
 /**
  * > Default usage example
  */
-export declare const StoryDefault: () => JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/compacta/compacta.stories.js

@@ -2,23 +2,18 @@ import { useState } from 'react';
 import { Form, Input } from '../index.js';
 import { Compacta } from './compacta.component.js';
 const meta = {
-    title: 'Example/Compacta',
+    title: 'Components/Compacta',
     component: Compacta,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-5"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     args: {}
 };
 export default meta;
-export const StoryDefault = ()=>{
+export const Default = ()=>{
     const [inputs, setInputs] = useState({});
     const handleChange = (e)=>{
         setInputs((prev)=>({

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

@@ -10,7 +10,7 @@ export const styles = tv({
         itemIndex: 'mr-2 w-4 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: 'focus:outline-focus ml-auto p-0',
+        toggleBtn: 'ml-auto p-0',
         collapsible: '',
         content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
         footer: 'pt-[0.5rem]',

package/dist/components/date-picker/date-picker.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type DatePickerProps } from './date-picker.types.js';
-export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, ...props }: DatePickerProps): JSX.Element;
+export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/date-picker.stories.d.ts

@@ -6,12 +6,28 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Different sizes example
  */
-export declare const DifferentSizesStory: Story;
+export declare const Sizes: Story;
 /**
  * > Controlled value
  */
-export declare const ControlledValueStory: Story;
+export declare const Controlled: Story;
+/**
+ * > Disable weekends
+ */
+export declare const DisableWeekends: Story;
+/**
+ * > Disable days of the week (Mon, Wed, Fri in example)
+ */
+export declare const DisableDaysOfWeek: Story;
+/**
+ * > Disable specific dates (2023-10-10 in example)
+ */
+export declare const DisableSpecificDates: Story;
+/**
+ * > Form field example
+ */
+export declare const FormField: Story;

package/dist/components/date-picker/date-picker.stories.js

@@ -1,25 +1,23 @@
 import { useState } from 'react';
+import { Field } from '../field/field.component.js';
 import { DatePicker } from './date-picker.component.js';
 const meta = {
-    title: 'Example/DatePicker',
+    title: 'Components/DatePicker',
     component: DatePicker,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement("div", {
-                className: "h-30 p-3"
+                className: "h-30"
             }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {}
 };
-export const DifferentSizesStory = {
+export const Sizes = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, [
@@ -37,7 +35,7 @@ export const DifferentSizesStory = {
         }));
     }
 };
-export const ControlledValueStory = {
+export const Controlled = {
     args: {},
     render: ()=>{
         const [value, setValue] = useState('2023-08-01');
@@ -62,3 +60,53 @@ export const ControlledValueStory = {
         });
     }
 };
+export const DisableWeekends = {
+    args: {
+        disableWeekends: true
+    }
+};
+export const DisableDaysOfWeek = {
+    args: {
+        disableDaysOfWeek: [
+            1,
+            3,
+            5
+        ]
+    }
+};
+export const DisableSpecificDates = {
+    args: {
+        disableDates: [
+            '2023-10-10'
+        ]
+    }
+};
+export const FormField = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('2023-08-01');
+        return React.createElement(Field, {
+            label: "Are you an existing customer?",
+            hintMessage: "Hint: choose from one of the following options",
+            errorMessage: "This is an inline error message"
+        }, React.createElement(DatePicker, {
+            onChange: (value)=>{
+                console.log(value.target.value);
+                setValue(value.target.value);
+            },
+            onOpen: ()=>{
+                console.log('onOpen');
+            },
+            onClose: ()=>{
+                console.log('onClose');
+            },
+            onBlur: ()=>{
+                console.log('onBlur');
+            },
+            onFocus: ()=>{
+                console.log('onFocus');
+            },
+            value: value
+        }));
+    }
+};

package/dist/components/date-picker/date-picker.types.d.ts

@@ -24,10 +24,10 @@ export type DatePickerProps = {
      */
     min?: string;
     name?: string;
-    onBlur?: (...args: any[]) => any;
-    onChange?: (...args: any[]) => any;
-    onClose?: (...args: any[]) => any;
-    onFocus?: (...args: any[]) => any;
-    onOpen?: (...args: any[]) => any;
+    onBlur?: (...args: any[]) => unknown;
+    onChange?: (...args: any[]) => unknown;
+    onClose?: (...args: any[]) => unknown;
+    onFocus?: (...args: any[]) => unknown;
+    onOpen?: (...args: any[]) => unknown;
     value?: string;
 } & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/{form/components/error-message → error-message}/error-message.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ErrorMessageProps } from './error-message.types.js';
-export declare function ErrorMessage({ className, tag: Tag, icon: Icon, message, ...props }: ErrorMessageProps): JSX.Element;
+export declare function ErrorMessage({ className, tag: Tag, icon: Icon, message, ...props }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{form/components/error-message → error-message}/error-message.component.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
-import { AlertIcon } from '../../../../components/icon/index.js';
+import { AlertIcon } from '../../components/icon/index.js';
 import { styles as errorMessageStyles } from './error-message.styles.js';
 export function ErrorMessage({ className , tag: Tag = 'div' , icon: Icon , message , ...props }) {
     const styles = errorMessageStyles({});
@@ -34,7 +34,7 @@ export function ErrorMessage({ className , tag: Tag = 'div' , icon: Icon , messa
             className: `${className} mb-2`
         })
     }, props), React.createElement(FinalIcon, {
-        copyrightYear: "2020",
+        copyrightYear: "2023",
         className: styles.icon({}),
         size: "xsmall",
         look: "outlined"

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

@@ -0,0 +1,2 @@
+import { type FieldProps } from './field.types.js';
+export declare function Field({ className, label, tag: Tag, children, hintMessage, errorMessage, labelElementType, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { Children, cloneElement, isValidElement, useCallback } from 'react';
+import { useField } from 'react-aria';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
+import { styles } from './field.styles.js';
+export function Field({ className , label , tag: Tag = 'div' , children , hintMessage , errorMessage , labelElementType , ...props }) {
+    const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({
+        ...props,
+        description: hintMessage,
+        errorMessage,
+        label,
+        labelElementType
+    });
+    const renderChildren = useCallback(()=>{
+        return Children.map(children, (child)=>{
+            if (isValidElement(child)) {
+                return cloneElement(child, fieldProps);
+            }
+        });
+    }, [
+        children
+    ]);
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className
+        })
+    }, props), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), renderChildren());
+}

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

@@ -0,0 +1,16 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Field } from './field.component.js';
+/**
+ * Field component provides label, hint message and error message to form components such as Select, Input etc.
+ */
+declare const meta: Meta<typeof Field>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Select usage example
+ */
+export declare const SelectStory: Story;

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

@@ -0,0 +1,37 @@
+import { Input, Select } from '../index.js';
+import { Field } from './field.component.js';
+const meta = {
+    title: 'Foundation/Field',
+    component: Field,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ]
+};
+export default meta;
+export const DefaultStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(Field, {
+            label: "Are you an existing customer?",
+            hintMessage: "Hint: choose from one of the following options",
+            errorMessage: "This is an inline error message"
+        }, React.createElement(Input, null));
+    }
+};
+export const SelectStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(Field, {
+            label: "Are you an existing customer?",
+            hintMessage: "Hint: choose from one of the following options",
+            errorMessage: "This is an inline error message"
+        }, React.createElement(Select, null, React.createElement("option", {
+            value: "1"
+        }, "Yes"), React.createElement("option", {
+            value: "2"
+        }, "No")));
+    }
+};

package/dist/components/field/field.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/field/field.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,19 @@
+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
+     */
+    errorMessage?: string | string[];
+    /**
+     * hint message
+     */
+    hintMessage?: FormHintProps['children'];
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & AriaFieldProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

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

@@ -0,0 +1,2 @@
+export { Field } from './field.component.js';
+export { type FieldProps } from './field.types.js';

package/dist/components/field/index.js

@@ -0,0 +1 @@
+export { Field } from './field.component.js';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 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) => JSX.Element;
+export declare const FlexiCellAdornment: ({ children, tag: Tag, align, className, ...props }: FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 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) => JSX.Element;
+export declare const FlexiCellBody: ({ children, tag: Tag, className, ...props }: FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { FlexiCellCircleProps } from './flexi-cell-circle.types.js';
 /** Flexi Cell Circle: Flexi Cell Circle */
-export declare const FlexiCellCircle: ({ className, ...props }: FlexiCellCircleProps) => JSX.Element;
+export declare const FlexiCellCircle: ({ className, ...props }: FlexiCellCircleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "h-5 w-5 text-muted hover:text-link md:h-6 md:w-6", {
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "h-5 w-5 text-muted hover:text-link xsl:h-6 xsl:w-6", {
     responsiveVariants: string[];
 }, {}, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'h-5 w-5 text-muted hover:text-link md:h-6 md:w-6',
+    base: 'h-5 w-5 text-muted hover:text-link xsl:h-6 xsl:w-6',
     variants: {}
 }, {
     responsiveVariants: [

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type FlexiCellFooterProps } from './flexi-cell-footer.types.js';
 /** Flexi Cell Footer: Flexi Cell Footer */
-export declare const FlexiCellFooter: ({ children, className, tag: Tag, ...props }: FlexiCellFooterProps) => JSX.Element;
+export declare const FlexiCellFooter: ({ children, className, tag: Tag, ...props }: FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { FlexiCellHintProps } from './flexi-cell-hint.types.js';
 /** Flexi Cell Hint: Flexi Cell Hint */
-export declare const FlexiCellHint: ({ children, tag: Tag, className, truncateText, ...props }: FlexiCellHintProps) => JSX.Element;
+export declare const FlexiCellHint: ({ children, tag: Tag, className, truncateText, ...props }: FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.styles.d.ts

@@ -3,7 +3,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "typography-body-10 m-0 font-normal text-muted md:typography-body-9", {
+}, undefined, "typography-body-10 m-0 font-normal text-muted xsl:typography-body-9", {
     responsiveVariants: string[];
 }, {
     truncateText: {

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-10 m-0 font-normal text-muted md:typography-body-9',
+    base: 'typography-body-10 m-0 font-normal text-muted xsl:typography-body-9',
     variants: {
         truncateText: {
             true: 'truncate',