@hyphen/hyphen-components 5.5.0 → 5.7.0

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

@@ -1,5 +1,5 @@
 import { Alert } from './Alert';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Alert>;
 export default meta;

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { Badge } from './Badge';
 import React from 'react';
 declare const meta: Meta<typeof Badge>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { Box } from './Box';
 declare const meta: Meta<typeof Box>;
 export default meta;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from './Button';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof Button>;
 export default meta;
 export declare const Default: () => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import { Card } from './Card';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Card>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { CheckboxInput } from './CheckboxInput';
 declare const meta: Meta<typeof CheckboxInput>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Collapsible } from './Collapsible';
 declare const meta: Meta<typeof Collapsible>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { DateInput } from './DateInput';
 declare const meta: Meta<typeof DateInput>;
 export default meta;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DatePicker } from './DatePicker';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof DatePicker>;
 export default meta;
 export declare const BasicExample: () => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import { Details } from './Details';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Details>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import { Drawer } from './Drawer';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Drawer>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { DropdownMenu } from './DropdownMenu';
 declare const meta: Meta<typeof DropdownMenu>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import { FormLabel } from './FormLabel';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof FormLabel>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import { Heading } from './Heading';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Heading>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import { Icon } from './Icon';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Icon>;
 export default meta;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal } from './Modal';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Modal>;
 export default meta;
 type Story = StoryObj<typeof Modal>;

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

@@ -1,5 +1,5 @@
 import { Pagination } from './Pagination';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Pagination>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import { Popover } from './Popover';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Popover>;
 export default meta;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RadioGroup } from './RadioGroup';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof RadioGroup>;
 export default meta;
 export declare const Default: () => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { RangeInput } from './RangeInput';
 declare const meta: Meta<typeof RangeInput>;
 export default meta;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ResponsiveProvider } from './ResponsiveProvider';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof ResponsiveProvider>;
 export default meta;
 export declare const BasicUsage: () => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SelectInput } from './SelectInput';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof SelectInput>;
 export default meta;
 export declare const Default: () => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SelectInputInset } from './SelectInputInset';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof SelectInputInset>;
 export default meta;
 export declare const Default: () => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SelectInputNative } from './SelectInputNative';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof SelectInputNative>;
 export default meta;
 export declare const Default: () => React.JSX.Element;

package/dist/components/Sidebar/Sidebar.d.ts

@@ -29,7 +29,7 @@ declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.Detail
 declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean | undefined;
     isActive?: boolean | undefined;
-    icon?: "code" | "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "command-line" | "computer" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
+    icon?: "code" | "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "command-line" | "computer" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "memory" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "ssd" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
     tooltip?: string | (Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) | undefined;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { Sidebar } from './Sidebar';
 declare const meta: Meta<typeof Sidebar>;
 export default meta;

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { Spinner } from './Spinner';
 declare const meta: Meta<typeof Spinner>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { Switch } from './Switch';
 declare const meta: Meta<typeof Switch>;
 export default meta;

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { Table } from './Table';
 declare const meta: Meta<typeof Table>;

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { TextInput } from './TextInput';
 declare const meta: Meta<typeof TextInput>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInputInset } from './TextInputInset';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof TextInputInset>;
 export default meta;
 export declare const Default: () => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { TextareaInput } from './TextareaInput';
 declare const meta: Meta<typeof TextareaInput>;

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { TextareaInputInset } from './TextareaInputInset';
 declare const meta: Meta<typeof TextareaInputInset>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ThemeProvider } from './ThemeProvider';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof ThemeProvider>;
 export default meta;
 export declare const BasicUsage: () => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { TimePicker } from './TimePicker';
 declare const meta: Meta<typeof TimePicker>;

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { TimePickerNative } from './TimePickerNative';
 declare const meta: Meta<typeof TimePickerNative>;

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { ToastContainer } from './';
 declare const meta: Meta<typeof ToastContainer>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { Toggle } from './Toggle';
 declare const meta: Meta<typeof Toggle>;
 export default meta;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { ToggleGroup } from './ToggleGroup';
 declare const meta: Meta<typeof ToggleGroup>;
 export default meta;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tooltip } from './Tooltip';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof Tooltip>;
 export default meta;
 export declare const BasicUsage: () => React.JSX.Element;

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Fri, 11 Jul 2025 16:56:04 GMT
+ * Generated on Thu, 17 Jul 2025 17:20:59 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Fri, 11 Jul 2025 16:56:04 GMT
+ * Generated on Thu, 17 Jul 2025 17:20:58 GMT
  */
 
 :root {
@@ -355,7 +355,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Fri, 11 Jul 2025 16:56:04 GMT
+ * Generated on Thu, 17 Jul 2025 17:20:58 GMT
  */
 
 :root.dark {

package/dist/hooks/useBreakpoint/useBreakpoint.stories.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { useBreakpoint } from './useBreakpoint';
 declare const meta: Meta<typeof useBreakpoint>;
 export default meta;

package/dist/hooks/useIsMobile/useIsMobile.stories.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { useIsMobile } from '../useIsMobile/useIsMobile';
 declare const meta: Meta<typeof useIsMobile>;
 export default meta;

package/dist/hooks/useOpenClose/useOpenClose.stories.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { UseOpenCloseProps, useOpenClose } from './useOpenClose';
 declare const meta: Meta<typeof useOpenClose>;
 export default meta;

package/dist/hooks/useTheme/useTheme.stories.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 declare const meta: Meta<typeof ThemeProvider>;
 export default meta;
 export declare const BasicUsage: () => React.JSX.Element;

package/dist/hooks/useWindowSize/useWindowSize.stories.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { useWindowSize } from './useWindowSize';
 declare const meta: Meta<typeof useWindowSize>;
 export default meta;

package/dist/lib/tokens.d.ts

@@ -1,5 +1,5 @@
 import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
-export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "computer" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
+export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "computer" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "memory" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "ssd" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
 export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
 export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
 export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -62,7 +62,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^4.36.0",
+    "@hyphen/hyphen-design-tokens": "^4.39.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -82,22 +82,18 @@
     "react-remove-scroll": "^2.6.3",
     "react-router-dom": "^6.26.1",
     "react-select": "^5.10.0",
-    "react-select-event": "^5.5.1"
+    "react-select-event": "^5.5.1",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^4.0.1",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.1.4",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.11",
-    "@storybook/addon-themes": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/manager-api": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
-    "@storybook/test": "^8.6.11",
-    "@storybook/theming": "^8.6.11",
+    "@storybook/addon-a11y": "^9.0.17",
+    "@storybook/addon-docs": "^9.0.17",
+    "@storybook/addon-themes": "^9.0.17",
+    "@storybook/react-vite": "^9.0.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -110,7 +106,7 @@
     "@types/react-modal": "^3.16.3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
-    "chromatic": "^11.25.2",
+    "chromatic": "^13.1.2",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.9.0",
@@ -132,7 +128,7 @@
     "sass-loader": "^13.3.3",
     "semantic-release": "^23.0.0",
     "size-limit": "^11.1.6",
-    "storybook": "^8.6.11",
+    "storybook": "^9.0.17",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",

package/src/components/Alert/Alert.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Alert } from './Alert';
 import * as Stories from './Alert.stories';
 

package/src/components/Alert/Alert.stories.tsx

@@ -2,7 +2,7 @@ import { Alert } from './Alert';
 import { AlertVariant } from './Alert.types';
 import { Button } from '../Button/Button';
 
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { useState } from 'react';
 

package/src/components/Badge/Badge.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Badge } from './Badge';
 import * as Stories from './Badge.stories';
 

package/src/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { Badge, BadgeVariant } from './Badge';
 import React from 'react';
 import { Box } from '../Box/Box';

package/src/components/Box/Box.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Box } from './Box';
 import * as Stories from './Box.stories';
 

package/src/components/Box/Box.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { Box } from './Box';
 
 const meta: Meta<typeof Box> = {

package/src/components/Button/Button.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgTypes } from '@storybook/addon-docs';
+import { Meta, Story, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Button } from './Button';
 import { Box } from '../Box/Box';
 

package/src/components/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box } from '../Box/Box';
 import { Button } from './Button';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { allModes } from '../../modes';
 
 const meta: Meta<typeof Button> = {

package/src/components/Card/Card.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Card } from './Card';
 import * as Stories from './Card.stories';
 

package/src/components/Card/Card.stories.tsx

@@ -1,5 +1,5 @@
 import { Card } from './Card';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import React from 'react';
 import { Box } from '../Box/Box';
 import { Button } from '../Button/Button';

package/src/components/CheckboxInput/CheckboxInput.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CheckboxInput } from './CheckboxInput';
 import * as Stories from './CheckboxInput.stories';
 

package/src/components/CheckboxInput/CheckboxInput.stories.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import { CheckboxInput } from './CheckboxInput';
 import { Box } from '../Box/Box';
 

package/src/components/Collapsible/Collapsible.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Collapsible, CollapsibleTrigger } from './Collapsible';
 import * as Stories from './Collapsible.stories';