@westpac/ui 0.6.0 → 0.7.1

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++){
@@ -17,6 +18,7 @@ import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 import { Radio } from './components/radio/radio.component.js';
 import { styles as radioGroupStyles } from './radio-group.styles.js';
 export const RadioGroupContext = createContext({
@@ -32,13 +34,13 @@ export const RadioGroupContext = createContext({
     orientation: 'vertical',
     size: 'medium'
 });
-export function RadioGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , ...props }) {
+export function RadioGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
         ...props,
         label,
         orientation
     });
-    const { radioGroupProps , labelProps  } = useRadioGroup({
+    const { radioGroupProps , labelProps , errorMessageProps , descriptionProps  } = useRadioGroup({
         ...props,
         label,
         orientation
@@ -77,7 +79,9 @@ export function RadioGroup({ className , children , label , orientation ='vertic
         className: styles.base({
             className
         })
-    }, radioGroupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement("div", {
+    }, radioGroupProps), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", {
         className: styles.radioWrapper()
     }, React.createElement(RadioGroupContext.Provider, {
         value: {

package/dist/components/radio-group/radio-group.stories.d.ts

@@ -6,24 +6,44 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultRadio: Story;
+export declare const Default: Story;
+/**
+ * > Default with long content
+ */
+export declare const LongLines: Story;
 /**
  * > RadioGroup with default value
  */
-export declare const RadioWithDefaultValue: Story;
+export declare const DefaultValue: Story;
 /**
  * > RadioGroup with radios aligned horizontally
  */
-export declare const RadioHorizontal: Story;
+export declare const Inline: Story;
+/**
+ * > RadioGroup with radios aligned horizontally with long content
+ */
+export declare const InlineLongLines: Story;
 /**
  * > RadioGroup that is disabled
  */
-export declare const RadioDisabled: Story;
+export declare const Disabled: Story;
 /**
  * > RadioGroup with large radios
  */
-export declare const RadioLarge: Story;
+export declare const Large: Story;
 /**
  * > RadioGroup that has hidden radios that will be revealed on clicking on button
  */
-export declare const RadioWithHiddenOptions: Story;
+export declare const HiddenOptions: Story;
+/**
+ * > Example with hint text
+ */
+export declare const HintText: Story;
+/**
+ * > On change (check console log)
+ */
+export declare const OnChange: Story;
+/**
+ * Error message and label
+ */
+export declare const ErrorMessageAndLabel: Story;

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

@@ -1,18 +1,13 @@
 import { RadioGroup } from './radio-group.component.js';
 const meta = {
-    title: 'Example/RadioGroup',
+    title: 'Components/RadioGroup',
     component: RadioGroup,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex p-3"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     args: {
         label: React.createElement("h2", null, "Test")
     },
@@ -39,7 +34,7 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultRadio = {
+export const Default = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -54,7 +49,22 @@ export const DefaultRadio = {
         ]
     }
 };
-export const RadioWithDefaultValue = {
+export const LongLines = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.")
+        ]
+    }
+};
+export const DefaultValue = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -70,7 +80,7 @@ export const RadioWithDefaultValue = {
         defaultValue: 'Option 1'
     }
 };
-export const RadioHorizontal = {
+export const Inline = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -86,7 +96,23 @@ export const RadioHorizontal = {
         orientation: 'horizontal'
     }
 };
-export const RadioDisabled = {
+export const InlineLongLines = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.")
+        ],
+        orientation: 'horizontal'
+    }
+};
+export const Disabled = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -102,7 +128,7 @@ export const RadioDisabled = {
         isDisabled: true
     }
 };
-export const RadioLarge = {
+export const Large = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -118,7 +144,7 @@ export const RadioLarge = {
         size: 'large'
     }
 };
-export const RadioWithHiddenOptions = {
+export const HiddenOptions = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -134,3 +160,56 @@ export const RadioWithHiddenOptions = {
         showAmount: 1
     }
 };
+export const HintText = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1",
+                hint: "This is a hint"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2",
+                hint: "This is a hint"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3",
+                hint: "This is a hint"
+            }, "Option 3")
+        ]
+    }
+};
+export const OnChange = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        onChange: (e)=>console.log(e)
+    }
+};
+export const ErrorMessageAndLabel = {
+    args: {
+        label: 'Are you an existing customer?',
+        errorMessage: 'This is an inline error message',
+        validationState: 'invalid',
+        hintMessage: 'Hint: choose from one of the following options',
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
+import { FormHintProps } from '../index.js';
 export type RadioGroupProps = {
     /**
      * The `Radio` components to render
@@ -10,6 +11,14 @@ export type RadioGroupProps = {
      * String to override base style
      */
     className?: string;
+    /**
+     * error message
+     */
+    errorMessage?: string | string[];
+    /**
+     * hint message
+     */
+    hintMessage?: FormHintProps['children'];
     /**
      * Amount of Radios to display, remainder will be hidden behind reveal button
      */

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type RepeaterProps } from './repeater.types.js';
-export declare function Repeater({ addText, indexTag: ItemIndex, children, separator, className, }: RepeaterProps): JSX.Element;
+export declare function Repeater({ addText, indexTag: ItemIndex, children, separator, className, }: RepeaterProps): import("react/jsx-runtime").JSX.Element;

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.stories.d.ts

@@ -6,8 +6,8 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Example using the separator prop
  */
-export declare const SeparatedRepeater: Story;
+export declare const Separator: Story;

package/dist/components/repeater/repeater.stories.js

@@ -1,33 +1,28 @@
 import { Form, Input } from '../index.js';
 import { Repeater } from './repeater.component.js';
 const meta = {
-    title: 'Example/Repeater',
+    title: 'Components/Repeater',
     component: Repeater,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-5"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     args: {
         children: React.createElement(Form, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
             htmlFor: `test`
         }, "Primary"), React.createElement(Form.Hint, null, "Primary title text"), React.createElement(Input, {
-            name: `test`,
+            name: "test",
             onChange: (e)=>console.log(e)
         })))
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {}
 };
-export const SeparatedRepeater = {
+export const Separator = {
     args: {
         separator: true
     }

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.stories.d.ts

@@ -6,12 +6,16 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Invalid usage example
  */
-export declare const InvalidStory: Story;
+export declare const Invalid: Story;
 /**
  * > Disabled usage example
  */
-export declare const DisabledStory: Story;
+export declare const Disabled: Story;
+/**
+ * > Form field example
+ */
+export declare const FormField: Story;

package/dist/components/select/select.stories.js

@@ -1,21 +1,17 @@
+import { Field } from '../field/index.js';
 import { Select } from './select.component.js';
 const meta = {
-    title: 'Example/Select',
+    title: 'Components/Select',
     component: Select,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex items-center justify-center p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: React.createElement(React.Fragment, null, React.createElement("option", {
             value: "option-1"
@@ -28,7 +24,7 @@ export const DefaultStory = {
         }, "option 4"))
     }
 };
-export const InvalidStory = {
+export const Invalid = {
     args: {
         invalid: true,
         children: React.createElement(React.Fragment, null, React.createElement("option", {
@@ -42,7 +38,7 @@ export const InvalidStory = {
         }, "option 4"))
     }
 };
-export const DisabledStory = {
+export const Disabled = {
     args: {
         disabled: true,
         children: React.createElement(React.Fragment, null, React.createElement("option", {
@@ -56,3 +52,23 @@ export const DisabledStory = {
         }, "option 4"))
     }
 };
+export const FormField = {
+    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, {
+            invalid: true
+        }, React.createElement("option", {
+            value: "option-1"
+        }, "option 1"), React.createElement("option", {
+            value: "option-2"
+        }, "option 2"), React.createElement("option", {
+            value: "option-3"
+        }, "option 3"), React.createElement("option", {
+            value: "option-4"
+        }, "option 4")));
+    }
+};

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: {

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

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

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

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

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

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

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

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

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.js

@@ -15,6 +15,7 @@ function _extends() {
 import React, { createContext } from 'react';
 import { useCheckboxGroup } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
+import { ErrorMessage, FormHint, FormLabel } from '../../../index.js';
 import { SelectorCheckboxGroupOption } from './components/index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 export const SelectorCheckboxGroupContext = createContext({
@@ -36,14 +37,10 @@ export function SelectorCheckboxGroup(props) {
         className: styles({
             className: groupProps.className
         })
-    }), React.createElement("span", _extends({}, labelProps), label), React.createElement(SelectorCheckboxGroupContext.Provider, {
+    }), React.createElement(FormLabel, _extends({}, labelProps), label), description && React.createElement(FormHint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement(SelectorCheckboxGroupContext.Provider, {
         value: state
-    }, children), description && React.createElement("div", _extends({}, descriptionProps, {
-        style: {
-            fontSize: 12
-        }
-    }), description), errorMessage && state.validationState === 'invalid' && React.createElement("div", _extends({}, errorMessageProps, {
-        className: "typography-body-10 text-danger"
-    }), errorMessage));
+    }, children));
 }
 SelectorCheckboxGroup.Option = SelectorCheckboxGroupOption;

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

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

package/dist/components/selector/components/selector-label/index.d.ts

@@ -0,0 +1 @@
+export { SelectorLabel } from './selector-label.component.js';

package/dist/components/selector/components/selector-label/index.js

@@ -0,0 +1 @@
+export { SelectorLabel } from './selector-label.component.js';

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

@@ -0,0 +1,2 @@
+import { FlexiCellLabelProps } from '../../../../components/flexi-cell/index.js';
+export declare function SelectorLabel({ className, ...props }: FlexiCellLabelProps): import("react/jsx-runtime").JSX.Element;