@westpac/ui 0.6.0 → 0.7.0

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { ButtonGroup } from './button-group.component.js';
 declare const meta: Meta<typeof ButtonGroup>;
@@ -7,24 +6,28 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * Button group looks
  */
-export declare const ButtonGroupColors: () => JSX.Element;
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
 /**
  * Button group sizes
  */
-export declare const ButtonGroupSizes: () => JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * Button group responsive sizing
  */
-export declare const ButtonGroupResponsiveSize: Story;
+export declare const ResponsiveSize: Story;
 /**
  * Button group block
  */
-export declare const ButtonGroupBlock: () => JSX.Element;
+export declare const Block: () => import("react/jsx-runtime").JSX.Element;
 /**
  * Disabled button group
  */
-export declare const DisabledButtonGroup: Story;
+export declare const Disabled: Story;
+/**
+ * Error message and label
+ */
+export declare const ErrorMessageAndLabel: Story;

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

@@ -1,18 +1,13 @@
 import { ButtonGroup } from './button-group.component.js';
 const meta = {
-    title: 'Example/ButtonGroup',
+    title: 'Components/ButtonGroup',
     component: ButtonGroup,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-3"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     argTypes: {
         isDisabled: {
             description: 'Controls whether all radio options are disabled or not',
@@ -43,7 +38,7 @@ const SIZES = [
     'large',
     'xlarge'
 ];
-export const DefaultStory = {
+export const Default = {
     args: {
         children: [
             React.createElement(ButtonGroup.Button, {
@@ -58,7 +53,7 @@ export const DefaultStory = {
         ]
     }
 };
-export const ButtonGroupColors = ()=>React.createElement("div", {
+export const Colors = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, LOOKS.map((look)=>React.createElement(ButtonGroup, {
             label: React.createElement("h3", {
@@ -72,7 +67,7 @@ export const ButtonGroupColors = ()=>React.createElement("div", {
         }, "Option 2"), React.createElement(ButtonGroup.Button, {
             value: "Option 3"
         }, "Option 3"))));
-export const ButtonGroupSizes = ()=>React.createElement("div", {
+export const Sizes = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, SIZES.map((size)=>React.createElement(ButtonGroup, {
             label: React.createElement("h3", {
@@ -86,7 +81,7 @@ export const ButtonGroupSizes = ()=>React.createElement("div", {
         }, "Option 2"), React.createElement(ButtonGroup.Button, {
             value: "Option 3"
         }, "Option 3"))));
-export const ButtonGroupResponsiveSize = {
+export const ResponsiveSize = {
     args: {
         children: [
             React.createElement(ButtonGroup.Button, {
@@ -106,7 +101,7 @@ export const ButtonGroupResponsiveSize = {
         }
     }
 };
-export const ButtonGroupBlock = ()=>React.createElement("div", {
+export const Block = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, SIZES.map((size)=>React.createElement(ButtonGroup, {
             block: true,
@@ -121,7 +116,7 @@ export const ButtonGroupBlock = ()=>React.createElement("div", {
         }, "Option 2"), React.createElement(ButtonGroup.Button, {
             value: "Option 3"
         }, "Option 3"))));
-export const DisabledButtonGroup = {
+export const Disabled = {
     args: {
         children: [
             React.createElement(ButtonGroup.Button, {
@@ -137,3 +132,22 @@ export const DisabledButtonGroup = {
         isDisabled: true
     }
 };
+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(ButtonGroup.Button, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(ButtonGroup.Button, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(ButtonGroup.Button, {
+                value: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};

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

@@ -15,6 +15,14 @@ export type ButtonGroupProps = {
      * String to override base style
      */
     className?: string;
+    /**
+     * error message
+     */
+    errorMessage?: string;
+    /**
+     * hint message
+     */
+    hintMessage?: string;
     /**
      * Controls look of `Button` components, can't be applied directly to `Button`
      */

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

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

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        button: 'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0'
+        button: 'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden'
     },
     variants: {
         isDisabled: {

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

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

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

@@ -17,6 +17,7 @@ import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 import { styles as checkboxStyles } from './checkbox-group.styles.js';
 import { Checkbox } from './components/checkbox/checkbox.component.js';
 export const CheckboxGroupContext = createContext({
@@ -32,12 +33,12 @@ export const CheckboxGroupContext = createContext({
     toggleValue: ()=>null,
     validationState: 'valid'
 });
-export function CheckboxGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , ...props }) {
+export function CheckboxGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useCheckboxGroupState({
         ...props,
         label
     });
-    const { groupProps , labelProps  } = useCheckboxGroup({
+    const { groupProps , labelProps , errorMessageProps , descriptionProps  } = useCheckboxGroup({
         ...props,
         label
     }, state);
@@ -75,7 +76,9 @@ export function CheckboxGroup({ className , children , label , orientation ='ver
         className: styles.base({
             className
         })
-    }, groupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement("div", {
+    }, groupProps), 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.itemWrapper()
     }, React.createElement(CheckboxGroupContext.Provider, {
         value: {

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.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/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

@@ -43,6 +43,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/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;