@purple/phoenix-components 5.26.0 → 5.28.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import React$1, { HTMLAttributes, PropsWithChildren, ReactElement, InputHTMLAttributes, FocusEventHandler, JSXElementConstructor, MouseEventHandler, TextareaHTMLAttributes } from 'react';
+import React$1, { HTMLAttributes, JSX, PropsWithChildren, ReactElement, InputHTMLAttributes, FocusEventHandler, JSXElementConstructor, MouseEventHandler, TextareaHTMLAttributes } from 'react';
 import * as styled_components from 'styled-components';
 import { DefaultTheme, IntrinsicElementsKeys } from 'styled-components';
 import { LayoutProps, FlexboxProps, GridProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps, BorderProps, DisplayProps } from 'styled-system';
@@ -12,16 +12,16 @@ import { PipsMode, PipsType } from 'nouislider';
 import { TabsProps as TabsProps$1 } from 'react-tabs';
 export { TabPanel } from 'react-tabs';
 
-declare type GenericComponentProps = {
+type GenericComponentProps = {
     testId?: string;
     className?: string;
 };
 
-declare type CSSValue = (string & {}) | number;
-declare type CSSColor = string & {};
+type CSSValue = (string & {}) | number;
+type CSSColor = string & {};
 
 declare const Spacing: readonly ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
-declare type Spacing = typeof Spacing[number];
+type Spacing = typeof Spacing[number];
 declare const isSpacing: (size?: Spacing | CSSValue) => size is "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 declare const getSpacingCssValue: (theme: DefaultTheme, value?: Spacing | CSSValue, defaultValue?: string) => string;
 
@@ -46,25 +46,25 @@ interface PaddingProps {
 }
 
 declare const ColorTheme: readonly ["brand", "success", "warning", "error", "info", "neutral"];
-declare type ColorTheme = typeof ColorTheme[number];
+type ColorTheme = typeof ColorTheme[number];
 declare const isColorTheme: (color?: Color) => color is "brand" | "success" | "warning" | "error" | "info" | "neutral";
 declare const TextColor: readonly ["primary", "secondary", "tertiary", "quaternary"];
-declare type TextColor = typeof TextColor[number];
+type TextColor = typeof TextColor[number];
 declare const isTextColor: (color?: Color) => color is "primary" | "secondary" | "tertiary" | "quaternary";
-declare type Color = TextColor | ColorTheme | CSSColor;
+type Color = TextColor | ColorTheme | CSSColor;
 
 declare const Sizing: readonly ["xs", "sm", "md", "lg"];
-declare type Sizing = typeof Sizing[number];
+type Sizing = typeof Sizing[number];
 declare const isSizing: (size?: Sizing | CSSValue) => size is "xs" | "sm" | "md" | "lg";
 declare const SizingSmMd: readonly ["sm", "md"];
-declare type SizingSmMd = typeof SizingSmMd[number];
+type SizingSmMd = typeof SizingSmMd[number];
 declare const SizingMdLg: readonly ["md", "lg"];
-declare type SizingMdLg = typeof SizingMdLg[number];
+type SizingMdLg = typeof SizingMdLg[number];
 declare const SizingSmMdLg: readonly ["sm", "md", "lg"];
-declare type SizingSmMdLg = typeof SizingSmMdLg[number];
+type SizingSmMdLg = typeof SizingSmMdLg[number];
 
 declare const TextAlignment: readonly ["left", "center", "right", "justify"];
-declare type TextAlignment = typeof TextAlignment[number];
+type TextAlignment = typeof TextAlignment[number];
 
 interface CommonTextProps<T> extends HTMLAttributes<T>, GenericComponentProps, TextAlignProp {
     color?: Color;
@@ -88,7 +88,7 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, Layout
 declare const Box: React$1.FC<BoxProps>;
 
 declare const IconAlignment: readonly ["left", "right"];
-declare type IconAlignment = typeof IconAlignment[number];
+type IconAlignment = typeof IconAlignment[number];
 
 declare const PhoenixIconsOutlinedSrc: {
     readonly actions: string;
@@ -330,14 +330,14 @@ declare const PhoenixIconsSrc: {
     readonly withdrawal: string;
     readonly wrench: string;
 };
-declare const PhoenixIconsOutlined: ("filter" | "revert" | "key" | "document" | "list" | "search" | "email" | "download" | "actions" | "add" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-right-up" | "arrow-switch" | "arrow-up" | "asterisk" | "bell" | "bitcoin-circle" | "block" | "browser" | "bullet-point" | "burger" | "calculator" | "calendar" | "camera" | "chart-bar-increase" | "chat" | "check" | "check-circle" | "clock" | "clock-idle" | "cog" | "contrast" | "copy" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "eye-hidden" | "forward-arrow" | "globe" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lightning" | "lock" | "paper" | "passport" | "pencil" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "search-plus" | "share-social" | "sliders" | "smartphone" | "speedometer" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
-declare type PhoenixIconsOutlined = keyof typeof PhoenixIconsOutlinedSrc;
+declare const PhoenixIconsOutlined: ("search" | "filter" | "revert" | "actions" | "add" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-right-up" | "arrow-switch" | "arrow-up" | "asterisk" | "bell" | "bitcoin-circle" | "block" | "browser" | "bullet-point" | "burger" | "calculator" | "calendar" | "camera" | "chart-bar-increase" | "chat" | "check" | "check-circle" | "clock" | "clock-idle" | "cog" | "contrast" | "copy" | "cross" | "deposit" | "document" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "download" | "driving-licence" | "edit" | "ellipsis" | "email" | "exclamation" | "exit" | "external" | "eye" | "eye-hidden" | "forward-arrow" | "globe" | "gift" | "history" | "house" | "id-card" | "info-circle" | "key" | "language" | "later" | "lightning" | "list" | "lock" | "paper" | "passport" | "pencil" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "search-plus" | "share-social" | "sliders" | "smartphone" | "speedometer" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
+type PhoenixIconsOutlined = keyof typeof PhoenixIconsOutlinedSrc;
 declare const PhoenixIconsColored: ("bell-brand" | "browser-brand" | "calendar-brand" | "camera-brand" | "contrast-brand" | "driving-licence-brand" | "email-brand" | "exclamation-error" | "exclamation-warning" | "house-brand" | "id-card-brand" | "key-brand" | "language-brand" | "lock-brand" | "lock-success" | "paper-brand" | "passport-brand" | "photo-user-brand" | "pin-brand" | "question-circle-brand" | "smartphone-brand" | "star-brand" | "star-warning" | "trash-error")[];
-declare type PhoenixIconsColored = keyof typeof PhoenixIconsColoredSrc;
-declare const PhoenixIcons: ("filter" | "revert" | "key" | "document" | "list" | "search" | "email" | "download" | "actions" | "add" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-right-up" | "arrow-switch" | "arrow-up" | "asterisk" | "bell" | "bitcoin-circle" | "block" | "browser" | "bullet-point" | "burger" | "calculator" | "calendar" | "camera" | "chart-bar-increase" | "chat" | "check" | "check-circle" | "clock" | "clock-idle" | "cog" | "contrast" | "copy" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "eye-hidden" | "forward-arrow" | "globe" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lightning" | "lock" | "paper" | "passport" | "pencil" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "search-plus" | "share-social" | "sliders" | "smartphone" | "speedometer" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "bell-brand" | "browser-brand" | "calendar-brand" | "camera-brand" | "contrast-brand" | "driving-licence-brand" | "email-brand" | "exclamation-error" | "exclamation-warning" | "house-brand" | "id-card-brand" | "key-brand" | "language-brand" | "lock-brand" | "lock-success" | "paper-brand" | "passport-brand" | "photo-user-brand" | "pin-brand" | "question-circle-brand" | "smartphone-brand" | "star-brand" | "star-warning" | "trash-error")[];
-declare type PhoenixIcons = keyof typeof PhoenixIconsSrc;
+type PhoenixIconsColored = keyof typeof PhoenixIconsColoredSrc;
+declare const PhoenixIcons: ("search" | "filter" | "revert" | "actions" | "add" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-right-up" | "arrow-switch" | "arrow-up" | "asterisk" | "bell" | "bitcoin-circle" | "block" | "browser" | "bullet-point" | "burger" | "calculator" | "calendar" | "camera" | "chart-bar-increase" | "chat" | "check" | "check-circle" | "clock" | "clock-idle" | "cog" | "contrast" | "copy" | "cross" | "deposit" | "document" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "download" | "driving-licence" | "edit" | "ellipsis" | "email" | "exclamation" | "exit" | "external" | "eye" | "eye-hidden" | "forward-arrow" | "globe" | "gift" | "history" | "house" | "id-card" | "info-circle" | "key" | "language" | "later" | "lightning" | "list" | "lock" | "paper" | "passport" | "pencil" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "search-plus" | "share-social" | "sliders" | "smartphone" | "speedometer" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "bell-brand" | "browser-brand" | "calendar-brand" | "camera-brand" | "contrast-brand" | "driving-licence-brand" | "email-brand" | "exclamation-error" | "exclamation-warning" | "house-brand" | "id-card-brand" | "key-brand" | "language-brand" | "lock-brand" | "lock-success" | "paper-brand" | "passport-brand" | "photo-user-brand" | "pin-brand" | "question-circle-brand" | "smartphone-brand" | "star-brand" | "star-warning" | "trash-error")[];
+type PhoenixIcons = keyof typeof PhoenixIconsSrc;
 
-declare type IconType = PhoenixIconsOutlined | React.ReactElement | string;
+type IconType = PhoenixIconsOutlined | React.ReactElement | string;
 
 interface CommonButtonProps extends MarginProps {
     colorTheme?: ColorTheme;
@@ -368,8 +368,8 @@ interface CardProps extends PaddingProps, MarginProps, GenericComponentProps {
 }
 declare const Card: React$1.FC<PropsWithChildren<CardProps>>;
 
-declare type FormControlWarningType = ReactElement | string;
-declare type FormControlErrorType = ReactElement | string | boolean;
+type FormControlWarningType = ReactElement | string;
+type FormControlErrorType = ReactElement | string | boolean;
 
 interface CheckboxRadioCommonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, GenericComponentProps {
     colorTheme?: ColorTheme;
@@ -379,7 +379,7 @@ interface CheckboxRadioCommonProps extends Omit<InputHTMLAttributes<HTMLInputEle
     error?: FormControlErrorType;
 }
 
-declare type CheckboxProps = CheckboxRadioCommonProps & {
+type CheckboxProps = CheckboxRadioCommonProps & {
     indeterminate?: boolean;
 };
 declare const Checkbox: React$1.FC<CheckboxProps>;
@@ -554,7 +554,7 @@ declare const Flex: React$1.FC<BoxProps>;
 
 declare const Grid: React$1.FC<BoxProps>;
 
-declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4';
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4';
 interface HeadingProps extends CommonTextProps<HTMLHeadingElement>, PaddingProps, MarginProps {
     element?: HeadingElement;
 }
@@ -581,7 +581,7 @@ interface ImageProps extends Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, '
 }
 declare const Image: React$1.FC<ImageProps>;
 
-declare type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps & PaddingProps & MarginProps;
+type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps & PaddingProps & MarginProps;
 declare const Label: React$1.FC<LabelProps>;
 
 interface LinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement>, GenericComponentProps, MarginProps, PaddingProps {
@@ -661,9 +661,9 @@ interface ComponentSliderProps extends GenericComponentProps {
     px?: CSSValue;
     disabled?: boolean;
 }
-declare type Pips = PositionsPips | ValuesPips | CountPips | StepsPips | RangePips;
-declare type SubRange = number | [number] | [number, number];
-declare type PipsFilter = (value: number, type: PipsType) => PipsType;
+type Pips = PositionsPips | ValuesPips | CountPips | StepsPips | RangePips;
+type SubRange = number | [number] | [number, number];
+type PipsFilter = (value: number, type: PipsType) => PipsType;
 interface PartialFormatter {
     to: (value: number) => string | number;
     from?: (value: string) => number | false;
@@ -696,7 +696,7 @@ interface RangePips extends BasePips {
     mode: PipsMode.Range;
 }
 
-declare type MultiSliderValue = (number | string)[];
+type MultiSliderValue = (number | string)[];
 interface MultiSliderProps extends CommonSliderProps, ComponentSliderProps {
     value: MultiSliderValue;
     onChange(value: MultiSliderValue): void;
@@ -739,7 +739,7 @@ interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
 }
 declare const TextInput: React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<TextInputProps> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare type PasswordInputProps = Omit<TextInputProps, 'type' | 'contentRight'>;
+type PasswordInputProps = Omit<TextInputProps, 'type' | 'contentRight'>;
 declare const PasswordInput: React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<PasswordInputProps> & React$1.RefAttributes<HTMLInputElement>>;
 
 declare enum PasswordStrengthEnum {
@@ -769,8 +769,8 @@ interface ProgressBarProps extends MarginProps, GenericComponentProps {
 }
 declare const ProgressBar: React$1.FC<ProgressBarProps>;
 
-declare type RadioProps = CheckboxRadioCommonProps;
-declare const Radio: React$1.VoidFunctionComponent<RadioProps>;
+type RadioProps = CheckboxRadioCommonProps;
+declare const Radio: React$1.FunctionComponent<RadioProps>;
 
 interface SelectNativeProps<Option extends SelectOption = SelectOption> extends FormControlProps {
     onChange: (option: Option | null) => void;
@@ -805,7 +805,7 @@ interface SelectPickerOption {
 }
 declare const SelectPicker: React$1.FC<SelectPickerProps>;
 
-declare type SliderValue = number | string;
+type SliderValue = number | string;
 interface SliderProps extends CommonSliderProps, ComponentSliderProps {
     value: SliderValue;
     onChange(value: SliderValue): void;
@@ -821,7 +821,7 @@ interface SpinnerProps extends MarginProps, GenericComponentProps {
 }
 declare const Spinner: React$1.FC<SpinnerProps>;
 
-declare type TabsProps = TabsProps$1 & GenericComponentProps;
+type TabsProps = TabsProps$1 & GenericComponentProps;
 declare const Tabs: React$1.FC<TabsProps>;
 
 interface TabListCommonProps {
@@ -838,13 +838,14 @@ interface TabProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>,
     selectedClassName?: string;
     tabIndex?: string;
     id?: string;
+    ref?: React$1.Ref<HTMLAnchorElement>;
 }
-declare type TabFunctionProps = React$1.ForwardRefExoticComponent<TabProps> & {
+type TabFunctionProps = React$1.FC<TabProps> & {
     tabsRole?: 'Tab';
-} & React$1.RefAttributes<HTMLAnchorElement>;
+};
 declare const Tab: TabFunctionProps;
 
-declare type TabListProps = GenericComponentProps & TabListCommonProps;
+type TabListProps = GenericComponentProps & TabListCommonProps;
 declare const TabList: React$1.FC<PropsWithChildren<TabListProps>> & {
     tabsRole: 'TabList';
 };
@@ -868,7 +869,7 @@ interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, For
 }
 declare const TextArea: React$1.FC<TextAreaProps>;
 
-declare type TimezonePickerProps = Omit<SelectProps, 'options'> & GenericComponentProps;
+type TimezonePickerProps = Omit<SelectProps, 'options'> & GenericComponentProps;
 declare const TimezonePicker: React$1.FC<TimezonePickerProps>;
 
 declare const getOptions: () => SelectOption[];
@@ -881,7 +882,7 @@ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
 }
 declare const Toggle: React$1.FC<ToggleProps>;
 
-declare type TooltipProps = Omit<TippyProps, 'theme'> & GenericComponentProps;
+type TooltipProps = Omit<TippyProps, 'theme'> & GenericComponentProps;
 declare const Tooltip: React$1.FC<TooltipProps>;
 
 declare const prefixedTheme: {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@purple/phoenix-components",
-  "version": "5.26.0",
+  "version": "5.28.0",
   "description": "",
   "main": "dist/bundle.umd.js",
   "module": "dist/bundle.esm.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "engines": {
-    "node": ">=18"
+    "node": "22.x"
   },
   "files": [
     "dist"
@@ -22,7 +22,6 @@
     "styled-components"
   ],
   "contributors": [
-    "Ales Chromec <achromec@purple-technology.com>",
     "Adam Stepanek <astepanek@purple-technology.com>"
   ],
   "license": "MIT",
@@ -36,23 +35,23 @@
     "@react-hook/previous": "~1.0.1",
     "@tippyjs/react": "~4.2.6",
     "countries-and-timezones": "^3.3.0",
-    "formik": "~2.2.9",
+    "formik": "~2.4.6",
     "is-mobile": "~3.1.1",
     "lodash": "~4.17.21",
     "nanoid": "~3.3.4",
     "nouislider": "~15.7.2",
     "react-day-picker": "~8.7.1",
-    "react-dropzone": "~14.2.2",
+    "react-dropzone": "~14.3.8",
     "react-inlinesvg": "~3.0.1",
     "react-pdf": "~8.0.2",
-    "react-select": "^5.7.0",
+    "react-select": "^5.10.2",
     "react-tabs": "^6.1.0",
     "styled-system": "~5.1.5",
     "zxcvbn": "~4.4.2"
   },
   "peerDependencies": {
-    "react": ">=16.3",
-    "react-dom": ">=16.3",
+    "react": ">=18",
+    "react-dom": ">=18",
     "styled-components": ">=5.3"
   },
   "devDependencies": {
@@ -69,22 +68,20 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
+    "@eslint/js": "^9.29.0",
     "@ironkinoko/rollup-plugin-styles": "^4.0.3",
-    "@pxblue/storybook-rtl-addon": "^1.0.1",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.1",
     "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-a11y": "^7.0.21",
-    "@storybook/addon-docs": "^7.0.21",
-    "@storybook/addon-essentials": "^7.0.21",
-    "@storybook/addon-links": "^7.0.21",
-    "@storybook/addon-mdx-gfm": "^7.0.21",
-    "@storybook/addon-viewport": "^7.0.21",
-    "@storybook/blocks": "^7.0.21",
-    "@storybook/react": "^7.0.21",
-    "@storybook/react-webpack5": "^7.0.21",
+    "@storybook/addon-a11y": "^9.0.12",
+    "@storybook/addon-docs": "^9.0.12",
+    "@storybook/addon-links": "^9.0.12",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/react": "^9.0.12",
+    "@storybook/react-vite": "^9.0.12",
+    "@storybook/react-webpack5": "^9.0.12",
     "@storybook/storybook-deployer": "^2.8.16",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^6.1.3",
@@ -93,53 +90,57 @@
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.178",
     "@types/node": "^20.4.7",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-tabs": "^5.0.5",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@types/zxcvbn": "^4.4.2",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
-    "@typescript-eslint/parser": "^4.8.2",
+    "@typescript-eslint/eslint-plugin": "^8.34.1",
+    "@typescript-eslint/parser": "^8.34.1",
     "babel-loader": "^8.2.5",
     "core-js": "^3.25.2",
     "csstype": "^3.1.2",
     "date-fns": "^2.30.0",
-    "eslint": "^7.32.0",
+    "eslint": "^9.29.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-json": "^4.0.1",
+    "eslint-plugin-prettier": "^5.5.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-storybook": "^9.0.12",
+    "globals": "^16.2.0",
     "husky": "^7.0.1",
     "jest": "^27.2.4",
     "lint-staged": "^12.0.0",
     "postcss": "^8.4.21",
     "prettier": "2.3.2",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-docgen-typescript-loader": "^3.1.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.1.0",
     "react-is": "^18.2.0",
     "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.0",
     "rollup": "^3.22.0",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
+    "sb-design-token": "^4.0.1",
     "standard-version": "^9.3.0",
-    "storybook": "^7.0.21",
-    "storybook-design-token": "^3.0.0-beta.3",
-    "style-dictionary": "^3.7.2",
+    "storybook": "^9.0.12",
+    "style-dictionary": "^5.0.0",
+    "style-dictionary-utils": "^4.1.0",
     "styled-components": "^5.3.5",
     "tippy.js": "^6.3.7",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2",
-    "typescript": "^4.8.3"
+    "tsx": "^4.20.3",
+    "typescript": "^4.8.4"
   },
   "scripts": {
     "lint": "eslint 'src' '.storybook' --ext .ts,.tsx,.js,.jsx,.json,.d.ts",
     "lint:fix": "eslint 'src' '.storybook' --ext .ts,.tsx,.js,.jsx,.json,.d.ts --fix",
-    "build:tokens": "ts-node --project ./ts-node.tsconfig.json --files src/tokens/build.ts && eslint 'src/tokens/' --ext .json --fix",
+    "build:tokens": "tsx src/tokens/build.ts && eslint 'src/tokens/' --ext .json --fix",
     "tokens": "(git -C my-axiory-tokens pull || git clone https://github.com/purple-technology/my-axiory-tokens.git) && pnpm build:tokens",
     "build": "rollup -c && rm -r ./dist/types",
     "build-watch": "rollup -c -w",