@westpac/ui 0.3.0 → 0.5.0

package/dist/components/form/components/form-section/form-section.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FormSectionProps } from './form-section.types.js';
+export declare function FormSection({ className, noPadding, tag: Tag, children, ...props }: FormSectionProps): JSX.Element;

package/dist/components/form/components/form-section/form-section.component.js

@@ -0,0 +1,24 @@
+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 from 'react';
+import { styles } from './form-section.styles.js';
+export function FormSection({ className , noPadding =false , tag: Tag = 'div' , children , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className,
+            noPadding
+        })
+    }, props), children);
+}

package/dist/components/form/components/form-section/form-section.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    noPadding: {
+        true: string;
+        false: string;
+    };
+}, undefined, "relative border-t border-t-border first:border-t-0 [&:not(:first-of-type)]:pt-5 md:[&:not(:first-of-type)]:pt-6 [&:not(:last-child)]:pb-1", {
+    responsiveVariants: string[];
+}, {
+    noPadding: {
+        true: string;
+        false: string;
+    };
+}, undefined>;

package/dist/components/form/components/form-section/form-section.styles.js

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'relative border-t border-t-border first:border-t-0 [&:not(:first-of-type)]:pt-5 md:[&:not(:first-of-type)]:pt-6 [&:not(:last-child)]:pb-1',
+    variants: {
+        noPadding: {
+            true: '',
+            false: 'px-0 sm:px-9 md:px-[2.875rem] lg:px-[3.125rem]'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/form/components/form-section/form-section.types.d.ts

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

package/dist/components/form/components/form-section/form-section.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/form/components/form-section/index.d.ts

@@ -0,0 +1,2 @@
+export { FormSection } from './form-section.component.js';
+export { type FormSectionProps } from './form-section.types.js';

package/dist/components/form/components/form-section/index.js

@@ -0,0 +1 @@
+export { FormSection } from './form-section.component.js';

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

@@ -0,0 +1,6 @@
+export * from './error-message/index.js';
+export * from './form-label/index.js';
+export * from './form-hint/index.js';
+export * from './form-chit-chat/index.js';
+export * from './form-group/index.js';
+export * from './form-section/index.js';

package/dist/components/form/components/index.js

@@ -0,0 +1,6 @@
+export * from './error-message/index.js';
+export * from './form-label/index.js';
+export * from './form-hint/index.js';
+export * from './form-chit-chat/index.js';
+export * from './form-group/index.js';
+export * from './form-section/index.js';

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

@@ -0,0 +1,13 @@
+/// <reference types="react" resolution-mode="require"/>
+import { FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
+import { FormContextValue, type FormProps } from './form.types.js';
+export declare const useFormContext: () => FormContextValue;
+export declare function Form({ children, size, spacing, inline, ...props }: FormProps): JSX.Element;
+export declare namespace Form {
+    var Label: typeof FormLabel;
+    var ErrorMessage: typeof import("./components/index.js").ErrorMessage;
+    var Hint: typeof FormHint;
+    var Section: typeof FormSection;
+    var ChitChat: typeof FormChitChat;
+    var Group: typeof FormGroup;
+}

package/dist/components/form/form.component.js

@@ -0,0 +1,33 @@
+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, { createContext, useContext } from 'react';
+import { ErrorMessage, FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
+const FormContext = createContext(null);
+export const useFormContext = ()=>useContext(FormContext) || {};
+export function Form({ children , size ='medium' , spacing ='medium' , inline =false , ...props }) {
+    return React.createElement(FormContext.Provider, {
+        value: {
+            inline,
+            size,
+            spacing
+        }
+    }, React.createElement("form", _extends({}, props), children));
+}
+Form.Label = FormLabel;
+Form.ErrorMessage = ErrorMessage;
+Form.Hint = FormHint;
+Form.Section = FormSection;
+Form.ChitChat = FormChitChat;
+Form.Group = FormGroup;

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

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Form } from './form.component.js';
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default size and spacing
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Multiple errors
+ */
+export declare const MultipleErrorsStory: Story;
+/**
+ * > All sizes Story
+ */
+export declare const AllSizesStory: Story;
+/**
+ * > All spacings Story
+ */
+export declare const AllSpacingsStory: Story;

package/dist/components/form/form.stories.js

@@ -0,0 +1,106 @@
+import { Input } from '../index.js';
+import { Form } from './form.component.js';
+const meta = {
+    title: 'Example/Form',
+    component: Form,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, React.createElement("h2", {
+            className: "typography-body-7 my-4 font-bold"
+        }, "Default size and spacing"), React.createElement(Form, null, React.createElement(Form.Section, null, React.createElement(Form.ChitChat, null, "Hello, I’m the friendly conversational text component. I live at the top of the form pod if required.")), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-default-1"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-default-1"
+        })), React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-default-2"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-default-2"
+        }))), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-default-3"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-default-3"
+        })))), React.createElement("hr", null), React.createElement("h2", {
+            className: "typography-body-7 my-4 font-bold"
+        }, "Large size with large spacing"), React.createElement(Form, {
+            size: "large",
+            spacing: "large"
+        }, React.createElement(Form.Section, null, React.createElement(Form.ChitChat, null, "Hello, I’m the friendly conversational text component. I live at the top of the form pod if required.")), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-large-1"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-large-1"
+        })), React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-large-2"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-large-2"
+        }))), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-large-3"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-large-3"
+        })))));
+    }
+};
+export const MultipleErrorsStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(Form, null, React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: [
+                'This is an error message',
+                'another error message'
+            ]
+        }), React.createElement(Input, null));
+    }
+};
+export const AllSizesStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-3"
+        }, [
+            'small',
+            'medium'
+        ].map((size)=>React.createElement(Form, {
+                size: size
+            }, React.createElement("h3", null, "Form with size: ", size), React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+                message: "This is an error message"
+            }), React.createElement(Input, null))));
+    }
+};
+export const AllSpacingsStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-3"
+        }, [
+            'medium',
+            'large'
+        ].map((size)=>React.createElement(Form, {
+                spacing: size
+            }, React.createElement("h3", null, "Form with Spacing:", size), React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+                message: "This is an error message"
+            }), React.createElement(Input, null))));
+    }
+};

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

@@ -0,0 +1,7 @@
+import { FormHTMLAttributes } from 'react';
+export type FormContextValue = {
+    inline?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    spacing?: 'medium' | 'large';
+};
+export type FormProps = FormContextValue & FormHTMLAttributes<HTMLFormElement>;

package/dist/components/form/form.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,2 @@
+export { Form } from './form.component.js';
+export { type FormProps } from './form.types.js';

package/dist/components/form/index.js

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

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

@@ -232,4 +232,5 @@ export { RAMSLogoIcon } from './components/rams-logo-icon.js';
 export { STGLogoIcon } from './components/stg-logo-icon.js';
 export { WBCLogoIcon } from './components/wbc-logo-icon.js';
 export { WBGLogoIcon } from './components/wbg-logo-icon.js';
+export { Icon } from './icon.component.js';
 export { type IconProps } from './icon.types.js';

package/dist/components/icon/index.js

@@ -232,3 +232,4 @@ export { RAMSLogoIcon } from './components/rams-logo-icon.js';
 export { STGLogoIcon } from './components/stg-logo-icon.js';
 export { WBCLogoIcon } from './components/wbc-logo-icon.js';
 export { WBGLogoIcon } from './components/wbg-logo-icon.js';
+export { Icon } from './icon.component.js';

package/dist/components/index.d.ts

@@ -16,5 +16,22 @@ export * from './button-group/index.js';
 export * from './switch/index.js';
 export * from './progress-bar/index.js';
 export * from './link/index.js';
+export * from './date-picker/index.js';
 export * from './grid/index.js';
 export * from './table/index.js';
+export * from './panel/index.js';
+export * from './collapsible/index.js';
+export * from './list/index.js';
+export * from './circle/index.js';
+export { FlexiCell, type FlexiCellProps } from './flexi-cell/index.js';
+export * from './autocomplete/index.js';
+export * from './button-dropdown/index.js';
+export * from './form/index.js';
+export * from './input-field/index.js';
+export * from './modal/index.js';
+export * from './pagination/index.js';
+export * from './popover/index.js';
+export * from './progress-rope/index.js';
+export * from './selector/index.js';
+export * from './compacta/index.js';
+export * from './repeater/index.js';

package/dist/components/index.js

@@ -16,5 +16,22 @@ export * from './button-group/index.js';
 export * from './switch/index.js';
 export * from './progress-bar/index.js';
 export * from './link/index.js';
+export * from './date-picker/index.js';
 export * from './grid/index.js';
 export * from './table/index.js';
+export * from './panel/index.js';
+export * from './collapsible/index.js';
+export * from './list/index.js';
+export * from './circle/index.js';
+export { FlexiCell } from './flexi-cell/index.js';
+export * from './autocomplete/index.js';
+export * from './button-dropdown/index.js';
+export * from './form/index.js';
+export * from './input-field/index.js';
+export * from './modal/index.js';
+export * from './pagination/index.js';
+export * from './popover/index.js';
+export * from './progress-rope/index.js';
+export * from './selector/index.js';
+export * from './compacta/index.js';
+export * from './repeater/index.js';

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

@@ -1,7 +1,9 @@
 import React, { ForwardedRef } from 'react';
 import { type InputProps } from './input.types.js';
 export declare function BaseInput({ className, size, invalid, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): JSX.Element;
-export declare const Input: React.ForwardRefExoticComponent<import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+export declare const Input: React.ForwardRefExoticComponent<{
+    invalid?: boolean | undefined;
+} & Omit<import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         small: string;
         medium: string;
@@ -12,7 +14,7 @@ export declare const Input: React.ForwardRefExoticComponent<import("tailwind-var
         true: string;
         false: string;
     };
-}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline", {
+}, undefined, "form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -25,4 +27,4 @@ export declare const Input: React.ForwardRefExoticComponent<import("tailwind-var
         true: string;
         false: string;
     };
-}, undefined>> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+}, undefined>>, "invalid"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/input.component.js

@@ -21,7 +21,8 @@ export function BaseInput({ className , size ='medium' , invalid =false , ...pro
             className,
             size,
             invalid
-        })
+        }),
+        "aria-invalid": invalid
     }, props));
 }
 export const Input = forwardRef(BaseInput);

package/dist/components/input/input.stories.js

@@ -11,7 +11,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     }
 };
 export default meta;

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

@@ -9,7 +9,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline", {
+}, undefined, "form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
     responsiveVariants: string[];
 }, {
     size: {

package/dist/components/input/input.styles.js

@@ -1,12 +1,12 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
+    base: 'form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0',
     variants: {
         size: {
-            small: 'form-control-small',
-            medium: 'form-control-medium',
-            large: 'form-control-large',
-            xlarge: 'form-control-xlarge'
+            small: 'form-control-small group-[.input-field-inset-after]:pr-6 group-[.input-field-inset-before]:pl-6',
+            medium: 'form-control-medium group-[.input-field-inset-after]:pr-7 group-[.input-field-inset-before]:pl-7',
+            large: 'form-control-large group-[.input-field-inset-after]:pr-8 group-[.input-field-inset-before]:pl-8',
+            xlarge: 'form-control-xlarge group-[.input-field-inset-after]:pr-9 group-[.input-field-inset-before]:pl-9'
         },
         invalid: {
             true: 'border-danger',

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

@@ -1,4 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './input.styles.js';
-export type InputProps = VariantProps<typeof styles> & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export type InputProps = {
+    invalid?: boolean;
+} & Omit<VariantProps<typeof styles>, 'invalid'> & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;

package/dist/components/input-field/components/add-ons/add-ons.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { InputAddOnProps } from './add-ons.types.js';
+export declare const InputAddOn: ({ position, icon: Icon, iconProps, inset, children, size, id, ...props }: InputAddOnProps) => JSX.Element;

package/dist/components/input-field/components/add-ons/add-ons.component.js

@@ -0,0 +1,39 @@
+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 from 'react';
+import { styles } from './add-ons.styles.js';
+import { DefaultAddOn, IconAddOn, TextAddOn } from './components/index.js';
+export const InputAddOn = ({ position , icon: Icon , iconProps ={} , inset =false , children , size , id , ...props })=>{
+    const isInset = Icon ? true : inset;
+    let Wrapper = DefaultAddOn;
+    const childrenIsString = typeof children === 'string';
+    if (Icon) {
+        Wrapper = IconAddOn;
+    } else if (typeof children === 'string') {
+        Wrapper = TextAddOn;
+    }
+    return React.createElement(Wrapper, _extends({
+        position: position,
+        size: size,
+        className: styles({
+            position,
+            isInset
+        }),
+        id: childrenIsString ? id : undefined
+    }, props), Icon ? React.createElement(Icon, _extends({
+        size: "small",
+        "aria-hidden": true
+    }, iconProps)) : children);
+};

package/dist/components/input-field/components/add-ons/add-ons.styles.d.ts

@@ -0,0 +1,21 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isInset: {
+        true: string;
+        false: string;
+    };
+    position: {
+        before: string;
+        after: string;
+    };
+}, undefined, "inset-y-0", {
+    responsiveVariants: string[];
+}, {
+    isInset: {
+        true: string;
+        false: string;
+    };
+    position: {
+        before: string;
+        after: string;
+    };
+}, undefined>;

package/dist/components/input-field/components/add-ons/add-ons.styles.js

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'inset-y-0',
+    variants: {
+        isInset: {
+            true: 'absolute',
+            false: ''
+        },
+        position: {
+            before: 'add-on-before group',
+            after: 'add-on-after group'
+        }
+    },
+    compoundVariants: [
+        {
+            isInset: true,
+            position: 'before',
+            className: 'left-0'
+        },
+        {
+            isInset: true,
+            position: 'after',
+            className: 'right-0'
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/input-field/components/add-ons/add-ons.types.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../../components/icon/index.js';
+export type AddOnProps = {
+    /**
+     * Children
+     */
+    children: ReactNode;
+    /**
+     * Position of add on i.e. before or after input
+     */
+    position: 'before' | 'after';
+    /**
+     * Sizes of add ons
+     */
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+};
+export type InputAddOnProps = {
+    /**
+     * Children
+     */
+    children?: ReactNode;
+    /**
+     * Icon to display
+     */
+    icon?: (props: Omit<IconProps, 'icon'>) => JSX.Element;
+    /**
+     * Icon component props
+     */
+    iconProps?: Omit<IconProps, 'icon'>;
+    /**
+     * ID for aria props
+     */
+    id?: string;
+    /**
+     * Render compononent within input borders
+     */
+    inset?: boolean;
+    /**
+     * Position of add on i.e. before or after input
+     */
+    position: 'before' | 'after';
+    /**
+     * Sizes of add ons
+     */
+    size: AddOnProps['size'];
+};
+export declare enum AddOnType {
+    Default = "default",
+    Inset = "inset"
+}

package/dist/components/input-field/components/add-ons/add-ons.types.js

@@ -0,0 +1,5 @@
+export var AddOnType;
+(function(AddOnType) {
+    AddOnType["Default"] = 'default';
+    AddOnType["Inset"] = 'inset';
+})(AddOnType || (AddOnType = {}));

package/dist/components/input-field/components/add-ons/components/default-add-on/default-add-on.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type DefaultAddOnProps } from './default-add-on.types.js';
+export declare const DefaultAddOn: ({ position, className, children, ...props }: DefaultAddOnProps) => JSX.Element;

package/dist/components/input-field/components/add-ons/components/default-add-on/default-add-on.component.js

@@ -0,0 +1,23 @@
+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 from 'react';
+import { styles } from './default-add-on.styles.js';
+export const DefaultAddOn = ({ position , className , children , ...props })=>{
+    return React.createElement("div", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+};

package/dist/components/input-field/components/add-ons/components/default-add-on/default-add-on.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "flex shrink-0"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "flex shrink-0">;
+    } | undefined;
+} | {}, undefined, "flex shrink-0", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "flex shrink-0"> | {}, undefined>;