@westpac/ui 0.6.0 → 0.7.1

package/dist/components/pictogram/components/informative/star-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function StarPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function StarPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/stopwatch-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function StopwatchPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function StopwatchPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/tax-document-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function TaxDocumentPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function TaxDocumentPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/telephone-call-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function TelephoneCallPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function TelephoneCallPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/thumbs-up-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function ThumbsUpPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function ThumbsUpPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/tick-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function TickPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function TickPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/tools-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function ToolsPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function ToolsPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/tractor-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function TractorPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function TractorPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/truck-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function TruckPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function TruckPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/umbrella-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function UmbrellaPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function UmbrellaPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/unsecure-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function UnsecurePictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function UnsecurePictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/wallet-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function WalletPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function WalletPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/informative/wearables-pictogram.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from '../../pictogram.types.js';
-export declare function WearablesPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;
+export declare function WearablesPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PictogramProps } from './pictogram.types.js';
-export declare function Pictogram({ copyrightYear, xmlns, role, focusable, className, viewBoxWidth, viewBoxHeight, children, ...props }: PictogramProps): JSX.Element;
+export declare function Pictogram({ copyrightYear, xmlns, role, focusable, className, viewBoxWidth, viewBoxHeight, children, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/pictogram/pictogram.stories.js

@@ -22,7 +22,7 @@ const AllPictogramsExample = (props)=>{
             [key]: symbol
         } : curr, {});
     return React.createElement("div", {
-        className: clsx('grid grid-cols-5 gap-5 p-5', mode === 'light' && 'bg-hero text-white')
+        className: clsx('grid grid-cols-5 gap-5', mode === 'light' && 'bg-hero text-white')
     }, Object.entries(informativePictograms).map(([key, Pictogram])=>React.createElement("div", {
             key: key,
             className: "flex flex-col items-center justify-end"
@@ -31,7 +31,7 @@ const AllPictogramsExample = (props)=>{
         }, key))));
 };
 const meta = {
-    title: 'Example/Pictogram',
+    title: 'Foundation/Pictograms',
     component: AllPictogramsExample,
     tags: [
         'autodocs'
@@ -39,9 +39,6 @@ const meta = {
     decorators: [
         (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'centered'
-    },
     argTypes: {
         mode: {
             description: 'mode',
@@ -57,7 +54,7 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {}
 };
-export const DecorativeStory = ()=>React.createElement(WBCBankCardPictogram, null);
+export const Decorative = ()=>React.createElement(WBCBankCardPictogram, null);

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/components/panel/panel.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PanelProps } from './panel.types.js';
-export declare function Panel({ state, heading, headingTag: Tag, content, placement, id }: PanelProps): JSX.Element;
+export declare function Panel({ state, heading, headingTag: Tag, content, placement, id }: PanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/components/panel/panel.styles.js

@@ -2,8 +2,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
-        arrow: 'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+        popover: 'absolute z-[999] rounded-[3px] border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+        arrow: 'absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
         closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
         content: 'w-[17.625rem] py-4 pl-3 pr-5',
         heading: 'typography-body-9 mb-2 font-bold',

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PopoverProps } from './popover.types.js';
-export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, open, icon, }: PopoverProps): JSX.Element;
+export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, open, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Popover } from './popover.component.js';
 declare const meta: Meta<typeof Popover>;
@@ -7,20 +6,20 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Using icon as trigger
  */
-export declare const PopoverIconTrigger: Story;
+export declare const IconTrigger: Story;
 /**
  * > Default open
  */
-export declare const DefaultOpenPopover: Story;
+export declare const DefaultOpen: Story;
 /**
  * > No heading
  */
-export declare const PopoverNoHeading: Story;
+export declare const NoHeading: Story;
 /**
  * > Top and bottom popover
  */
-export declare const PopoverPlacement: () => JSX.Element;
+export declare const PopoverPlacement: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover.stories.js

@@ -2,44 +2,41 @@ import { HelpIcon } from '../icon/index.js';
 import { Popover } from './popover.component.js';
 const popoverContent = 'Small overlays of content for housing secondary information. These are often used to provide explanatory information for complex ideas.';
 const meta = {
-    title: 'Example/Popover',
+    title: 'Components/Popover',
     component: Popover,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement("div", {
-                className: "p-[200px]"
+                className: "p-29"
             }, React.createElement(Story, null))
     ],
-    parameters: {
-        layout: 'center'
-    },
     args: {
         content: popoverContent,
         heading: 'Test Heading'
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'Click Me'
     }
 };
-export const PopoverIconTrigger = {
+export const IconTrigger = {
     args: {
         icon: ()=>React.createElement(HelpIcon, {
                 color: "hero"
             })
     }
 };
-export const DefaultOpenPopover = {
+export const DefaultOpen = {
     args: {
         children: 'Click Me',
         open: true
     }
 };
-export const PopoverNoHeading = {
+export const NoHeading = {
     args: {
         children: 'Click Me',
         open: true,

package/dist/components/progress-bar/progress-bar.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ProgressBarProps } from './progress-bar.types.js';
-export declare function ProgressBar({ className, look, value, noLabel, ...props }: ProgressBarProps): JSX.Element;
+export declare function ProgressBar({ className, look, value, noLabel, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { ProgressBar } from './progress-bar.component.js';
 declare const meta: Meta<typeof ProgressBar>;
@@ -7,16 +6,16 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Skinny example
  */
-export declare const ProgressBarSkinny: Story;
+export declare const Skinny: Story;
 /**
  * > No label example
  */
-export declare const ProgressBarNoLabel: Story;
+export declare const NoLabel: Story;
 /**
  * Example of Progress Bar controlled by buttons
  */
-export declare const ProgressBarControlled: () => JSX.Element;
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-bar/progress-bar.stories.js

@@ -2,41 +2,36 @@ import { useCallback, useState } from 'react';
 import { Button } from '../button/index.js';
 import { ProgressBar } from './progress-bar.component.js';
 const meta = {
-    title: 'Example/ProgressBar',
+    title: 'Components/ProgressBar',
     component: ProgressBar,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         value: 50,
         look: 'default'
     }
 };
-export const ProgressBarSkinny = {
+export const Skinny = {
     args: {
         value: 50,
         look: 'skinny'
     }
 };
-export const ProgressBarNoLabel = {
+export const NoLabel = {
     args: {
         value: 50,
         look: 'default',
         noLabel: true
     }
 };
-export const ProgressBarControlled = ()=>{
+export const Controlled = ()=>{
     const [barValue, setBarValue] = useState(0);
     const handleProgress = useCallback((calc)=>{
         const progress = barValue + calc;

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ProgressRopeGroupStepProps } from './progress-rope-group-step.types.js';
-export declare function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, }: ProgressRopeGroupStepProps): JSX.Element;
+export declare function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, }: ProgressRopeGroupStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.js

@@ -43,7 +43,6 @@ export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep
         current,
         visited
     ]);
-    console.log('state', state);
     const styles = progressRopeGroupStyles({
         firstItem,
         state

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
@@ -22,7 +20,7 @@ export type ProgressRopeGroupStepProps = {
     /**
      * Trigger when the user try to open/close the group
      */
-    onToggle?: () => any;
+    onToggle?: () => unknown;
     /**
      * Boolean to tell if group is expanded
      */
@@ -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.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ProgressRopeStepProps } from './progress-rope-step.types.js';
-export declare function ProgressRopeStep({ className, current, visited, tag: Tag, type, size, children, firstItem, ...props }: ProgressRopeStepProps): JSX.Element;
+export declare function ProgressRopeStep({ className, current, visited, tag: Tag, type, size, children, firstItem, ...props }: ProgressRopeStepProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ProgressRopeProps } from './progress-rope.types.js';
-export declare function ProgressRope({ 'aria-label': ariaLabel, role, className, tag: Tag, current, data, ...props }: ProgressRopeProps): JSX.Element;
+export declare function ProgressRope({ 'aria-label': ariaLabel, role, className, tag: Tag, current, data, ...props }: ProgressRopeProps): import("react/jsx-runtime").JSX.Element;

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.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;
 /**
  * > Grouping steps story usage example
  */
-export declare const GroupingStepsStory: Story;
+export declare const GroupingSteps: Story;

package/dist/components/progress-rope/progress-rope.stories.js

@@ -2,20 +2,17 @@ import { useCallback, useState } from 'react';
 import { Button } from '../index.js';
 import { ProgressRope } from './progress-rope.component.js';
 const meta = {
-    title: 'Example/ProgressRope',
+    title: 'Components/ProgressRope',
     component: ProgressRope,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'centered'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {},
     render: ()=>{
         const [activeIndex, setActiveIndex] = useState(0);
@@ -58,7 +55,7 @@ export const DefaultStory = {
         }, "next")));
     }
 };
-export const GroupingStepsStory = {
+export const GroupingSteps = {
     args: {},
     render: ()=>{
         const [activeIndex, setActiveIndex] = useState(0);

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

@@ -6,12 +6,12 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Base radio, unchecked as that is handled by RadioGroup
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Radio with hint example
  */
-export declare const RadioWithHint: Story;
+export declare const Hint: Story;
 /**
  * > Disabled Radio example
  */
-export declare const RadioDisabled: Story;
+export declare const Disabled: Story;

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

@@ -1,18 +1,13 @@
 import { Radio } from './radio.component.js';
 const meta = {
-    title: 'Example/RadioGroup/Radio',
+    title: 'Components/RadioGroup/Radio',
     component: Radio,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex justify-center p-3"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     argTypes: {
         isDisabled: {
             description: 'Controls whether individual radio options are disabled or not',
@@ -23,20 +18,20 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'Option 1',
         value: 'Option 1'
     }
 };
-export const RadioWithHint = {
+export const Hint = {
     args: {
         children: 'Option 1',
         value: 'Option 1',
         hint: 'Test hint'
     }
 };
-export const RadioDisabled = {
+export const Disabled = {
     args: {
         children: 'Option 1',
         value: 'Option 1',

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 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: {
@@ -19,7 +19,7 @@ export const styles = tv({
         },
         isSelected: {
             true: {
-                selector: 'before:bg-hero before:block before:h-2 before:w-2 before:rounded-full'
+                selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero'
             }
         },
         isFocused: {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
 export declare const RadioGroupContext: React.Context<RadioGroupContextState>;
-export declare function RadioGroup({ className, children, label, orientation, showAmount, size, ...props }: RadioGroupProps): JSX.Element;
+export declare function RadioGroup({ className, children, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace RadioGroup {
     var Radio: React.ForwardRefExoticComponent<{
         className?: string | undefined;