@westpac/ui 0.6.0 → 0.7.1

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

@@ -6,24 +6,44 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
+/**
+ * > Default usage example
+ */
+export declare const LongLines: Story;
 /**
  * > CheckboxGroup with default value
  */
-export declare const CheckboxGroupWithDefaultValue: Story;
+export declare const DefaultValue: Story;
 /**
  * > CheckboxGroup with checkboxes aligned horizontally
  */
-export declare const CheckboxGroupHorizontal: Story;
+export declare const Inline: Story;
+/**
+ * > Horizontal long lines
+ */
+export declare const InlineLongLines: Story;
 /**
  * > CheckboxGroup that is disabled
  */
-export declare const CheckboxGroupDisabled: Story;
+export declare const Disabled: Story;
 /**
  * > CheckboxGroup with large checkboxes
  */
-export declare const CheckboxGroupLarge: Story;
+export declare const Large: Story;
 /**
  * > CheckboxGroup that has hidden checkboxes that will be revealed on clicking on button
  */
-export declare const CheckboxGroupWithHiddenItems: Story;
+export declare const HiddenItems: Story;
+/**
+ * > 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/checkbox-group/checkbox-group.stories.js

@@ -1,18 +1,15 @@
 import { CheckboxGroup } from './checkbox-group.component.js';
 const meta = {
-    title: 'Example/CheckboxGroup',
+    title: 'Components/CheckboxGroup',
     component: CheckboxGroup,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement("div", {
-                className: "flex p-3"
+                className: "flex"
             }, React.createElement(Story, null))
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     args: {
         label: React.createElement("h2", null, "Test")
     },
@@ -39,7 +36,7 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -54,7 +51,22 @@ export const DefaultStory = {
         ]
     }
 };
-export const CheckboxGroupWithDefaultValue = {
+export const LongLines = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                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(CheckboxGroup.Checkbox, {
@@ -72,7 +84,7 @@ export const CheckboxGroupWithDefaultValue = {
         ]
     }
 };
-export const CheckboxGroupHorizontal = {
+export const Inline = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -88,7 +100,23 @@ export const CheckboxGroupHorizontal = {
         orientation: 'horizontal'
     }
 };
-export const CheckboxGroupDisabled = {
+export const InlineLongLines = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                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(CheckboxGroup.Checkbox, {
@@ -107,7 +135,7 @@ export const CheckboxGroupDisabled = {
         ]
     }
 };
-export const CheckboxGroupLarge = {
+export const Large = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -123,7 +151,7 @@ export const CheckboxGroupLarge = {
         size: 'large'
     }
 };
-export const CheckboxGroupWithHiddenItems = {
+export const HiddenItems = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -139,3 +167,59 @@ export const CheckboxGroupWithHiddenItems = {
         showAmount: 1
     }
 };
+export const HintText = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1",
+                hint: "This is hint text"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2",
+                hint: "This is hint text"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3",
+                hint: "This is hint text"
+            }, "Option 3")
+        ]
+    }
+};
+export const OnChange = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1",
+                hint: "This is hint text"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2",
+                hint: "This is hint text"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3",
+                hint: "This is hint text"
+            }, "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(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
+import { FormHintProps } from '../index.js';
 export type CheckboxGroupProps = {
     /**
      * The `CheckboxItem` components to render
@@ -10,6 +11,14 @@ export type CheckboxGroupProps = {
      * String to override base style
      */
     className?: string;
+    /**
+     * error message
+     */
+    errorMessage?: string | string[];
+    /**
+     * hint message
+     */
+    hintMessage?: FormHintProps['children'];
     /**
      * Orientation of checkbox items
      */

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

@@ -17,11 +17,16 @@ import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 import { Icon } from '../../../icon/icon.component.js';
 import { CheckboxGroupContext } from '../../checkbox-group.component.js';
 import { styles as checkboxItemStyles } from './checkbox.styles.js';
-function CheckIcon({ copyrightYear ='2023' , ...props }) {
+function CheckIcon({ copyrightYear ='2023' , size , ...props }) {
+    const viewBoxSize = size === 'large' ? '0 0 30 30' : '0 0 24 24';
     return React.createElement(Icon, _extends({
-        copyrightYear: copyrightYear
-    }, props), React.createElement("path", {
-        d: "M16.285 6.0003L10.769 13.8053L6.936 11.0173L5 13.6463L11.526 18.5263L19 8.0053L16.285 6.0003Z",
+        copyrightYear: copyrightYear,
+        viewBox: viewBoxSize
+    }, props), size === 'large' ? React.createElement("path", {
+        d: "M12.9952 17.5891L20.2923 10.292L21.7023 11.712L12.9952 20.4191L8.28809 15.712L9.69809 14.302L12.9952 17.5891Z",
+        fill: "currentColor"
+    }) : React.createElement("path", {
+        d: "M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z",
         fill: "currentColor"
     }));
 }
@@ -52,6 +57,7 @@ function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
         className: styles.checkbox()
     }, isSelected && React.createElement(CheckIcon, {
         className: styles.checkIcon(),
+        size: size,
         color: isDisabled ? 'border' : 'hero'
     })), React.createElement("div", {
         className: styles.textWrapper()
@@ -62,3 +68,4 @@ function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
     }, hint)));
 }
 export const Checkbox = forwardRef(BaseCheckbox);
+Checkbox.displayName = 'CheckboxGroup.Checkbox';

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

@@ -6,12 +6,12 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Base Checkbox Item, unchecked as that is handled by Checkbox
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Checkbox Item with hint example
  */
-export declare const CheckboxItemWithHint: Story;
+export declare const HintText: Story;
 /**
  * > Disabled Checkbox Item example
  */
-export declare const CheckboxItemDisabled: Story;
+export declare const Disabled: Story;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -43,6 +44,7 @@ export function Collapsible({ className , children , open =false , text , size =
             className
         }),
         look: "link",
+        iconColor: "primary",
         iconAfter: ButtonIcon,
         onClick: handleClick,
         size: size,

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

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

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

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

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

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

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

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

package/dist/components/compacta/compacta.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -221,7 +222,7 @@ export function Compacta({ className , children , titleTag: Tag = 'h3' , addText
             setPrimaryTitle: (title)=>setTitle(item.id, 'primary', title),
             setSecondaryTitle: (title)=>setTitle(item.id, 'secondary', title),
             setTertiaryTitle: (title)=>setTitle(item.id, 'tertiary', title)
-        }), React.createElement(Button, {
+        }), items.length > 1 && React.createElement(Button, {
             className: styles.removeBtn(),
             "aria-label": `remove item ${index + 1}`,
             iconBefore: (props)=>React.createElement(RemoveCircleIcon, _extends({}, props, {

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

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

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

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

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

@@ -3,20 +3,20 @@ export const styles = tv({
     slots: {
         base: '',
         item: 'border-borderDark mb-2 overflow-hidden rounded-[0.1875rem] border',
-        header: 'text-text bg-white p-[0.8125rem_1.125rem]',
+        header: 'text-text bg-white px-3 py-[0.9375rem]',
         headerTitle: 'flex min-w-0 flex-1 items-center',
-        primaryHeading: 'my-[16px] flex',
-        secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-[2.25rem]',
-        itemIndex: 'mr-2 w-4 flex-none font-bold',
+        primaryHeading: 'flex w-full',
+        secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-4',
+        itemIndex: 'typography-body-9 mr-1 w-3 flex-none font-bold',
         removeBtn: 'mt-[0.875rem] h-auto p-0 no-underline hover:underline',
         addBtn: 'h-auto p-0 no-underline hover:underline',
-        toggleBtn: 'ml-auto p-0',
+        toggleBtn: 'p-0',
         collapsible: '',
         content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
-        footer: 'pt-[0.5rem]',
-        titlePrimary: 'font-bold',
-        titleSecondary: 'mt-[0.125rem]',
-        titleTertiary: 'mt-[0.125rem]'
+        footer: '',
+        titlePrimary: 'typography-body-9 font-bold',
+        titleSecondary: 'mt-1 items-center',
+        titleTertiary: 'mt-1 items-center'
     },
     variants: {},
     compoundSlots: [
@@ -27,7 +27,7 @@ export const styles = tv({
                 'titleTertiary'
             ],
             class: [
-                'mr-2',
+                'mr-1',
                 'truncate',
                 'flex-1'
             ]

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

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

package/dist/components/date-picker/date-picker.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/date-picker/date-picker.stories.d.ts

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