@westpac/ui 0.7.0 → 0.7.1

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

@@ -3,34 +3,7 @@ import { type InputProps } from './input.types.js';
 export declare function BaseInput({ className, size, invalid, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
 export declare const Input: React.ForwardRefExoticComponent<{
     invalid?: boolean | undefined;
-} & Omit<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 flex-1 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: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-    isFocused: {
-        true: string;
-    };
-}, undefined>>, "invalid"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+    size?: "small" | "medium" | "large" | "xlarge" | {
+        [x: string]: "small" | "medium" | "large" | "xlarge" | undefined;
+    } | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -12,7 +12,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     isFocused: {
         true: string;
     };
-}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 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", {
+}, undefined, "form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled 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,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 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',
+    base: 'form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled 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 group-[.input-field-inset-after]:pr-6 group-[.input-field-inset-before]:pl-6',

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

@@ -1,6 +1,15 @@
 import { InputHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './input.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type InputProps = {
+    /**
+     * Whether the input is invalid
+     */
     invalid?: boolean;
-} & Omit<VariantProps<typeof styles>, 'invalid'> & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+    /**
+     * Size of input
+     */
+    size?: Variants['size'];
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export {};

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

@@ -1,2 +1,5 @@
 import { InputAddOnProps } from './add-ons.types.js';
+/**
+ * @private
+ */
 export declare const InputAddOn: ({ position, icon: Icon, iconProps, inset, children, size, id, ...props }: InputAddOnProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,5 @@
 import { type DefaultAddOnProps } from './default-add-on.types.js';
+/**
+ * @private
+ */
 export declare const DefaultAddOn: ({ position, className, children, ...props }: DefaultAddOnProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,3 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 import { AddOnProps } from '../../add-ons.types.js';
-import { styles } from './default-add-on.styles.js';
-export type DefaultAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;
+export type DefaultAddOnProps = AddOnProps & HTMLAttributes<Element>;

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

@@ -1,2 +1,5 @@
 import { type IconAddOnProps } from './icon-add-on.types.js';
+/**
+ * @private
+ */
 export declare const IconAddOn: ({ position, children, size, className, ...props }: IconAddOnProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,3 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 import { type AddOnProps } from '../../add-ons.types.js';
-import { styles } from './icon-add-on.styles.js';
-export type IconAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;
+export type IconAddOnProps = AddOnProps & HTMLAttributes<Element>;

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

@@ -1,2 +1,5 @@
 import { type TextAddOnProps } from './text-add-on.types.js';
+/**
+ * @private
+ */
 export declare const TextAddOn: ({ position, className, size, id, children, ...props }: TextAddOnProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,3 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 import { AddOnProps } from '../../add-ons.types.js';
-import { styles } from './text-add-on.styles.js';
-export type TextAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;
+export type TextAddOnProps = AddOnProps & HTMLAttributes<Element>;

package/dist/components/input-field/components/supporting-text/supporting-text.component.d.ts

@@ -1,2 +1,5 @@
 import { type SupportingTextProps } from './supporting-text.types.js';
+/**
+ * @private
+ */
 export declare function SupportingText({ className, tag: Tag, children, ...props }: SupportingTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/input-field/components/supporting-text/supporting-text.types.d.ts

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

package/dist/components/input-field/input-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/input-field/input-field.scenarios.stories.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { CloseIcon, RefreshIcon, SearchIcon, VisibilityIcon, VisibilityOffIcon } from '../icon/index.js';
+import { ClearIcon, RefreshIcon, SearchIcon, VisibilityIcon, VisibilityOffIcon } from '../icon/index.js';
 import { Button, Input, Select, Textarea } from '../index.js';
 import { InputField } from './input-field.component.js';
 const meta = {
@@ -68,7 +68,7 @@ export const SearchWithLeftIconAndClearButton = {
                 element: React.createElement(Button, {
                     onClick: clearInput,
                     look: "link",
-                    iconAfter: CloseIcon,
+                    iconAfter: ClearIcon,
                     iconColor: "muted"
                 })
             }

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

@@ -1,7 +1,5 @@
 import { type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 import { type IconProps } from '../icon/index.js';
-import { styles } from './input-field.styles.js';
 export type Composition = Record<'before' | 'after', string | null>;
 export type Sizes = 'small' | 'medium' | 'large' | 'xlarge';
 export type InputFieldContextType = {
@@ -62,4 +60,4 @@ export type InputFieldProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & Omit<VariantProps<typeof styles>, 'before' | 'after'>;
+};

package/dist/components/link/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/list/list.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/modal/components/backdrop/backdrop.types.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" resolution-mode="require"/>
 import { type AriaModalOverlayProps } from 'react-aria';
 import { type OverlayTriggerState } from 'react-stately';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './backdrop.styles.js';
 export type BackdropProps = {
     /**
      * Inner part of backdrop
@@ -24,4 +22,4 @@ export type BackdropProps = {
      * zIndex of content inside
      */
     zIndex?: number;
-} & VariantProps<typeof styles> & AriaModalOverlayProps;
+} & AriaModalOverlayProps;

package/dist/components/modal/components/dialog/components/dialog-body/dialog-body.types.d.ts

@@ -1,4 +1,2 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './dialog-body.styles.js';
-export type DialogBodyProps = VariantProps<typeof styles> & HTMLAttributes<HTMLElement>;
+export type DialogBodyProps = HTMLAttributes<HTMLElement>;

package/dist/components/modal/components/dialog/components/dialog-footer/dialog-footer.types.d.ts

@@ -1,4 +1,2 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './dialog-footer.styles.js';
-export type DialogFooterProps = VariantProps<typeof styles> & HTMLAttributes<HTMLElement>;
+export type DialogFooterProps = HTMLAttributes<HTMLElement>;

package/dist/components/modal/components/dialog/dialog.types.d.ts

@@ -2,6 +2,7 @@
 import { type AriaDialogProps } from 'react-aria';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './dialog.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type DialogProps = {
     /**
      * Boolean to wrap all children into a Modal.Body
@@ -19,8 +20,13 @@ export type DialogProps = {
      * onClose callback
      */
     onClose?: () => unknown;
+    /**
+     * Size of dialog
+     */
+    size?: Variants['size'];
     /**
      * Title for Modal
      */
     title?: string;
-} & VariantProps<typeof styles> & AriaDialogProps;
+} & AriaDialogProps;
+export {};

package/dist/components/modal/modal.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/pagination/components/pagination-item/pagination-item.component.d.ts

@@ -1,2 +1,2 @@
 import { type PaginationItemProps } from './pagination-item.types.js';
-export declare function PaginationItem({ className, firstItem, tag: Tag, children, active, disabled, ...props }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationItem({ className, firstItem, lastItem, tag: Tag, children, active, disabled, ...props }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,11 +14,12 @@ function _extends() {
 }
 import React from 'react';
 import { styles } from './pagination-item.styles.js';
-export function PaginationItem({ className , firstItem =false , tag: Tag = 'a' , children , active , disabled =false , ...props }) {
+export function PaginationItem({ className , firstItem =false , lastItem =false , tag: Tag = 'a' , children , active , disabled =false , ...props }) {
     return React.createElement(Tag, _extends({
         className: styles({
             className,
             firstItem,
+            lastItem,
             active,
             disabled
         })

package/dist/components/pagination/components/pagination-item/pagination-item.styles.d.ts

@@ -3,6 +3,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    lastItem: {
+        true: string;
+        false: string;
+    };
     active: {
         true: string;
         false: string;
@@ -11,13 +15,17 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "typography-body-10 block border-l border-border px-2 py-[0.5625rem] text-center text-text transition-colors", {
+}, undefined, "typography-body-10 relative block border border-border px-2 py-[0.5625rem] text-center text-text transition-colors", {
     responsiveVariants: string[];
 }, {
     firstItem: {
         true: string;
         false: string;
     };
+    lastItem: {
+        true: string;
+        false: string;
+    };
     active: {
         true: string;
         false: string;

package/dist/components/pagination/components/pagination-item/pagination-item.styles.js

@@ -1,13 +1,17 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-10 block border-l border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
+    base: 'typography-body-10 relative block border border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
     variants: {
         firstItem: {
-            true: 'border-l-0',
+            true: 'rounded-l',
+            false: 'ml-[-1px]'
+        },
+        lastItem: {
+            true: 'rounded-r',
             false: ''
         },
         active: {
-            true: 'bg-hero text-white',
+            true: 'z-10 border-hero bg-hero text-white',
             false: 'hover:bg-light'
         },
         disabled: {

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

@@ -1,9 +1,27 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react';
-import { type VariantProps } from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
 import { styles } from './pagination-item.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type PaginationItemProps = {
+    /**
+     * Whether item is active
+     */
+    active?: Variants['active'];
+    /**
+     * Whether item is disabled
+     */
+    disabled?: Variants['disabled'];
+    /**
+     * Whether it is the first item
+     */
+    firstItem?: Variants['firstItem'];
+    /**
+     * Whether it is the last item
+     */
+    lastItem?: Variants['lastItem'];
     /**
      * Link component to render
      */
     tag?: 'a' | 'button' | ((...args: any[]) => ReactElement | null);
-} & VariantProps<typeof styles> & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
+} & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
+export {};

package/dist/components/pagination/pagination.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -73,7 +74,8 @@ export function Pagination({ className , pages , tag: Tag = 'nav' , role ='navig
         const backwardsOnly = (current || 1) >= pages.length;
         const defaultNextProps = {
             disabled: !infinite && backwardsOnly,
-            tag: linkComponent
+            tag: linkComponent,
+            lastItem: true
         };
         if (defaultNextProps.disabled) {
             return {

package/dist/components/pagination/pagination.stories.js

@@ -186,7 +186,7 @@ export const UsePaginationDifferentComponents = ()=>{
         infinite: true
     });
     return React.createElement("div", {
-        className: "flex items-center"
+        className: "flex w-[15.625rem] items-center justify-between"
     }, React.createElement(Button, {
         look: "link",
         iconAfter: ArrowLeftIcon,

package/dist/components/pagination/pagination.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'flex flex-col items-center',
-        ul: 'flex overflow-hidden rounded border border-border'
+        ul: 'flex overflow-hidden'
     },
     variants: {}
 }, {

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

@@ -1,7 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 import { type PaginationItemProps } from './components/index.js';
-import { styles } from './pagination.styles.js';
 export type PageProps = {
     href: string;
     text: ReactNode;
@@ -58,4 +56,4 @@ export type PaginationProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & (PaginationAsLinkProps | PaginationAsButtonProps) & VariantProps<typeof styles> & Omit<HTMLAttributes<Element>, 'onChange'>;
+} & (PaginationAsLinkProps | PaginationAsButtonProps) & Omit<HTMLAttributes<Element>, 'onChange'>;

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

@@ -1,6 +1,4 @@
 import { type SVGAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './pictogram.styles.js';
 export type PictogramProps = SVGAttributes<SVGElement> & {
     /**
      * SVG copyright year
@@ -22,4 +20,4 @@ export type PictogramProps = SVGAttributes<SVGElement> & {
      * SVG viewBox width
      */
     viewBoxWidth?: number;
-} & VariantProps<typeof styles>;
+};

package/dist/components/popover/popover.component.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { useCallback, useEffect, useId } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 import { Button } from '../button/index.js';

package/dist/components/progress-bar/progress-bar.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/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.d.ts

@@ -1,7 +1,5 @@
 import { ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 import { ProgressRopeStepItem } from '../../progress-rope.types.js';
-import { styles } from './progress-rope-group-step.styles.js';
 export type ProgressRopeGroupStepProps = {
     /**
      * Children
@@ -33,4 +31,4 @@ export type ProgressRopeGroupStepProps = {
     steps: (ProgressRopeStepItem & {
         index: number;
     })[];
-} & VariantProps<typeof styles>;
+};

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.types.d.ts

@@ -2,11 +2,20 @@ import { HTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { ProgressRopeStepItem } from '../../progress-rope.types.js';
 import { styles } from './progress-rope-step.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type ProgressRopeStepProps = {
     /**
      * Says it is current
      */
     current?: boolean;
+    /**
+     * Whether step is first item
+     */
+    firstItem?: Variants['firstItem'];
+    /**
+     * Size of step
+     */
+    size?: Variants['size'];
     /**
      * Tag to render
      */
@@ -15,4 +24,5 @@ export type ProgressRopeStepProps = {
      * Says it is visited
      */
     visited?: boolean;
-} & Omit<ProgressRopeStepItem, 'text'> & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & Omit<ProgressRopeStepItem, 'text'> & HTMLAttributes<Element>;
+export {};

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

@@ -1,6 +1,4 @@
 import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './progress-rope.styles.js';
 export type ProgressRopeStepItem = {
     onClick?: MouseEventHandler<Element>;
     text: ReactNode;
@@ -32,4 +30,4 @@ export type ProgressRopeProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/dist/components/radio-group/components/radio/radio.component.js

@@ -50,3 +50,4 @@ function BaseRadio({ className , hint , children , ...props }, ref) {
     }, hint)));
 }
 export const Radio = forwardRef(BaseRadio);
+Radio.displayName = 'RadioGroup.Radio';

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

@@ -4,8 +4,8 @@ export const styles = tv({
         base: 'flex',
         textWrapper: 'flex flex-col justify-center',
         labelText: 'typography-body-10 py-[2px] pl-1',
-        hintText: 'typography-body-10 text-muted pl-1',
-        selector: 'border-hero flex shrink-0 h-4 w-4 items-center justify-center rounded-full border'
+        hintText: 'typography-body-10 pl-1 text-muted',
+        selector: 'flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-hero'
     },
     variants: {
         isDisabled: {

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

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -103,7 +104,7 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
             transition: {
                 duration: 0.15
             },
-            key: index
+            key: item.id
         }, React.createElement("div", _extends({
             ref: (el)=>{
                 refArr.current[index] = el;
@@ -119,6 +120,7 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
             "aria-label": `remove item ${index + 1}`,
             iconBefore: (props)=>React.createElement(RemoveCircleIcon, _extends({}, props, {
                     "aria-hidden": true,
+                    look: "outlined",
                     size: "xsmall"
                 })),
             look: "link",

package/dist/components/repeater/repeater.styles.js

@@ -13,10 +13,10 @@ export const styles = tv({
     variants: {
         separator: {
             true: {
-                item: 'border-neutral border-t-2 pt-[0.625rem]',
+                item: 'border-t-2 border-neutral pt-[0.625rem]',
                 content: 'p-[0_1.125rem_2.625rem]',
                 removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
-                footer: 'border-neutral border-t-2 pt-[0.875rem]'
+                footer: 'border-t-2 border-neutral pt-[0.875rem]'
             }
         },
         isFocused: {

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

@@ -1,36 +1,9 @@
 import React from 'react';
-export declare const Select: 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: {
-            base: string;
-        };
-    };
-}, undefined, "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", {
-    responsiveVariants: string[];
-}, {
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-    isFocused: {
-        true: {
-            base: string;
-        };
-    };
-}, undefined>> & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const Select: React.ForwardRefExoticComponent<{
+    invalid?: boolean | {
+        [x: string]: boolean | undefined;
+    } | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | {
+        [x: string]: "small" | "medium" | "large" | "xlarge" | undefined;
+    } | undefined;
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & React.RefAttributes<HTMLSelectElement>>;

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

@@ -14,7 +14,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-}, undefined, "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", {
+}, undefined, "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", {
     responsiveVariants: string[];
 }, {
     size: {