@cube-dev/ui-kit 0.6.60 → 0.7.1

package/dist/mjs/providers/BreakpointsProvider.d.ts

@@ -1,6 +1,8 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export declare const BreakpointsContext: import("react").Context<number[]>;
-export declare function BreakpointsProvider({ value, children }: {
-    value: any;
-    children: any;
-}): JSX.Element;
+interface BreakpointsProviderProps {
+    value: number[];
+    children: ReactNode;
+}
+export declare function BreakpointsProvider({ value, children, }: BreakpointsProviderProps): JSX.Element;
+export {};

package/dist/mjs/providers/StylesProvider.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { Styles } from '../styles/types';
 export declare const StyleContext: import("react").Context<any>;
-export declare function StyleProvider({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): JSX.Element;
-export declare function useContextStyles(name: any, props?: any): Styles;
+interface StyleProviderProps {
+    children?: ReactNode;
+    [key: string]: any;
+}
+export declare function StyleProvider({ children, ...props }: StyleProviderProps): JSX.Element;
+export declare function useContextStyles(name: string, props?: Record<string, any>): Styles | null;
+export {};

package/dist/mjs/shared/form.d.ts

@@ -44,11 +44,18 @@ export interface FormBaseProps {
     validateTrigger?: ValidateTrigger;
 }
 export interface FormFieldProps extends FormBaseProps {
+    /** Whether the field is inside the form. Private field. */
     insideForm?: boolean;
+    /** A text label of the field */
     label?: ReactNode;
+    /** Custom label props */
     labelProps?: Props;
+    /** Message for the field. Some additional information or error notice. */
     message?: ReactNode;
+    /** A tooltip that is shown inside the label */
     tooltip?: ReactNode;
+    /** Whether the element should receive focus on render. */
+    autoFocus?: boolean;
 }
 export declare type ValidationRuleBase = {
     [key: string]: any;

package/dist/mjs/stories/components/StyledButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledButton: import("react").ComponentType<import("../../components/actions/Button/Button").CubeButtonProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+export declare const GlobalStyledHeading: any;
+export declare function Block(): JSX.Element;

package/dist/mjs/styled.d.ts

@@ -1,30 +1,11 @@
-/// <reference types="react" />
-import { AllBaseProps, BaseStyleProps, Props } from './components/types';
+import { ComponentType } from 'react';
+import { AllBaseProps, BaseStyleProps, StyledProps } from './components/types';
 import { Styles, StylesInterface } from './styles/types';
 import { ResponsiveStyleValue } from './utils/styles';
-export interface StyledProps<T extends string, K extends PossibleStyleNames> {
-    /** The name of the element. It can be used to override styles in context. */
-    name?: string;
-    /** The tag name of the element. */
-    tag?: string;
-    /** Default styles of the element. */
-    styles?: Styles;
-    /** Default css of the element. */
-    css?: string | ((props: Props) => string);
-    /** Default attributes */
-    attrs?: Record<string, any>;
-    /** The list of styles that can be provided by props */
-    styleProps?: K;
-    /** The list of available modifiers. Providing it will show a warning each time you set an incorrect modifier on the element */
-    availableMods?: T[];
-}
-export declare type PossibleStyleNames = readonly (keyof StylesInterface)[];
-export declare type AllPossibleStyleNames = readonly (keyof StylesInterface)[];
-export declare type AllBasePropsWithMods<T extends string, K extends PossibleStyleNames> = Omit<AllBaseProps, 'mods'> & {
-    mods?: Record<T, boolean | null | undefined>;
-} & {
+export declare type AllBasePropsWithMods<K extends (keyof StylesInterface)[]> = AllBaseProps & {
     [key in K[number]]?: ResponsiveStyleValue<StylesInterface[key]>;
 } & BaseStyleProps;
-export declare function styled<T extends string, K extends PossibleStyleNames>(options: StyledProps<T, K>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Omit<AllBaseProps<"div">, "mods"> & {
-    mods?: Record<T, boolean | null | undefined> | undefined;
-} & { [key in K[number]]?: ResponsiveStyleValue<StylesInterface[key]>; } & BaseStyleProps> & import("react").RefAttributes<unknown>>;
+declare function styled<K extends (keyof StylesInterface)[]>(options: StyledProps<K>, secondArg?: never): any;
+declare function styled(selector: string, styles?: Styles): any;
+declare function styled<K extends (keyof StylesInterface)[], C = {}>(Component: ComponentType<C>, options?: Pick<StyledProps<K>, 'styles' | 'props' | 'name' | 'tag'>): ComponentType<C>;
+export { styled };

package/dist/mjs/styles/align.d.ts

@@ -0,0 +1,9 @@
+export declare function alignStyle({ align }: {
+    align: any;
+}): {
+    'align-items': string;
+    'align-content': string;
+} | undefined;
+export declare namespace alignStyle {
+    var __lookupStyles: string[];
+}

package/dist/mjs/styles/justify.d.ts

@@ -0,0 +1,9 @@
+export declare function justifyStyle({ justify }: {
+    justify: any;
+}): {
+    'justify-items': string;
+    'justify-content': string;
+} | undefined;
+export declare namespace justifyStyle {
+    var __lookupStyles: string[];
+}

package/dist/mjs/styles/list.d.ts

@@ -4,6 +4,6 @@ export declare const BLOCK_STYLES: readonly ["reset", "padding", "paddingInline"
 export declare const COLOR_STYLES: readonly ["color", "fill"];
 export declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
 export declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
-export declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "opacity", "whiteSpace", "color", "fill", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "reset", "padding", "paddingInline", "paddingBlock", "shadow", "border", "radius", "opacity", "overflow", "styledScrollbar", "hide", "outline", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "opacity", "whiteSpace", "color", "fill", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "reset", "padding", "paddingInline", "paddingBlock", "shadow", "border", "radius", "opacity", "overflow", "styledScrollbar", "hide", "outline", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
 export declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];

package/dist/mjs/styles/margin.d.ts

@@ -1,5 +1,11 @@
-export declare function marginStyle({ margin }: {
+export declare function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft, }: {
     margin: any;
+    marginBlock: any;
+    marginInline: any;
+    marginTop: any;
+    marginRight: any;
+    marginBottom: any;
+    marginLeft: any;
 }): any;
 export declare namespace marginStyle {
     var __lookupStyles: string[];

package/dist/mjs/styles/marginBlock.d.ts

@@ -0,0 +1,8 @@
+export declare function marginBlockStyle({ marginBlock: margin, marginTop, marginBottom, }: {
+    marginBlock: any;
+    marginTop: any;
+    marginBottom: any;
+}): {};
+export declare namespace marginBlockStyle {
+    var __lookupStyles: string[];
+}

package/dist/mjs/styles/marginInline.d.ts

@@ -0,0 +1,8 @@
+export declare function marginInlineStyle({ marginInline: margin, marginLeft, marginRight, }: {
+    marginInline: any;
+    marginLeft: any;
+    marginRight: any;
+}): {};
+export declare namespace marginInlineStyle {
+    var __lookupStyles: string[];
+}

package/dist/mjs/styles/types.d.ts

@@ -4,7 +4,7 @@ declare type NamedColor = 'purple' | 'purple-text' | 'purple-01' | 'purple-02' |
 declare type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 declare type OpaquePercentage = '' | `.${Digit}` | `.${Digit}${Digit}` | '.100';
 export declare type NoType = false | null | undefined;
-export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font' | 'outline'> {
+export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font' | 'outline' | 'type'> {
     /** Set the background color of the element.
      * ```
      * fill="#{name_of_the_color}"
@@ -48,7 +48,7 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * Syntax: `[[<value> | [ <verticalValue> <horizontalValue>] ]? [ [ leaf | backleaf ] | [ 'top' | 'right' | 'bottom' | 'top' ]{1,2} ] ] | [ 'round' | 'ellipse' ] | true`
      * Examples: `"1x"`, `"2x 4x"`, `"top"`, `"round"`, `"3x leaf"`, `"ellipse"`.
      */
-    radius?: 'round' | 'ellipse' | 'leaf' | 'backleaf' | string;
+    radius?: 'round' | 'ellipse' | 'leaf' | 'backleaf' | string | true;
     /**
      * The group radius style rounds the corners of a container's outer border edge by applying radius style to to its children.
      * Syntax: `<value> [ 'round' | 'ellipse' ]? | true`
@@ -90,9 +90,18 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * The preset style sets the base text settings according to the names preset. Affected styles: `font-size`, `line-height`, `letter-spacing`, `font-weight` and `text-transform`.
      */
     preset?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h5s' | 'h5m' | 'h6' | 't1' | 't2' | 't3' | 't4' | 't4m' | 'p1' | 'p2' | 'p3' | 'p4' | 'tag' | 'default' | string;
+    /**
+     * Shorthand for align-items and align-content.
+     */
+    align?: CSSProperties['alignItems'] | CSSProperties['alignContent'];
+    /**
+     * Shorthand for justify-items and justify-content.
+     */
+    justify?: CSSProperties['justifyItems'] | CSSProperties['justifyContent'];
 }
-export declare type SuffixSelector = `&${string}`;
-export declare type NotSuffixSelector = Exclude<string, SuffixSelector | keyof StylesInterface>;
+export declare type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+export declare type Selector = `${SuffixForSelector}${string}`;
+export declare type NotSelector = Exclude<string, Selector | keyof StylesInterface>;
 export declare type StylesWithoutSelectors = {
     [key in keyof StylesInterface]?: ResponsiveStyleValue<StylesInterface[key]>;
 };

package/dist/mjs/{css-properties.d.ts → tokens.d.ts}

@@ -1,4 +1,4 @@
-declare const PROPS: {
+declare const TOKENS: {
     'font-size': string;
     'line-height': string;
     'input-font-size': string;
@@ -9,6 +9,7 @@ declare const PROPS: {
     'outline-width': string;
     'border-width': string;
     radius: string;
+    'leaf-sharp-radius': string;
     transition: string;
     'clear-color': string;
     'border-color': string;
@@ -117,6 +118,16 @@ declare const PROPS: {
     'p4-line-height': string;
     'p4-letter-spacing': string;
     'p4-font-weight': string;
+    'c1-font-size': string;
+    'c1-line-height': string;
+    'c1-letter-spacing': string;
+    'c1-font-weight': string;
+    'c1-text-transform': string;
+    'c2-font-size': string;
+    'c2-line-height': string;
+    'c2-letter-spacing': string;
+    'c2-font-weight': string;
+    'c2-text-transform': string;
     'tag-font-size': string;
     'tag-line-height': string;
     'tag-letter-spacing': string;
@@ -138,4 +149,4 @@ declare const PROPS: {
     'default-letter-spacing': string;
     'default-font-weight': string;
 };
-export default PROPS;
+export { TOKENS };

package/dist/mjs/utils/mergeStyles.d.ts

@@ -0,0 +1,2 @@
+import { Styles } from '../styles/types';
+export declare function mergeStyles(...objects: (Styles | undefined | null)[]): Styles;

package/dist/mjs/utils/renderStyles.d.ts

@@ -1,4 +1,5 @@
 import { Styles } from '../styles/types';
+export declare function isSelector(key: any): any;
 /**
  * Render style props to complete Styled Components CSS.
  * @param styles - Complete style props.

package/dist/mjs/utils/responsive.d.ts

@@ -6,4 +6,4 @@ export interface ResponsiveZone {
     mediaQuery?: string;
 }
 export declare function pointsToZones(points: number[]): any;
-export declare function normalizeStyleZones(value: ResponsiveStyleValue, zoneNumber: number): any[] | null | undefined;
+export declare function normalizeStyleZones(value: ResponsiveStyleValue, zoneNumber: number): any[] | null;

package/dist/mjs/utils/styles.d.ts

@@ -1,5 +1,5 @@
 import { Styles } from '../styles/types';
-export declare type StyleValue<T = string> = number | null | boolean | undefined | T;
+export declare type StyleValue<T = string> = T | boolean | number | null;
 export declare type StyleValueStateMap<T = string> = {
     [key: string]: StyleValue<T>;
 };
@@ -57,7 +57,7 @@ export declare const CUSTOM_UNITS: {
     lh: string;
     rp: string;
     gp: string;
-    wh: string;
+    wh: (num: any) => string;
     sp: (num: any) => string;
 };
 export declare const DIRECTIONS: string[];
@@ -176,7 +176,7 @@ export declare function styleStateMapToStyleStateDataList(styleStateMap: StyleSt
     states: {
         model: null;
         mods: never[];
-        value: string | number | boolean | null | undefined;
+        value: string | number | boolean | null;
     }[];
     mods: never[];
 } | {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.6.60",
+  "version": "0.7.1",
   "description": "UIKit for Cube Projects",
   "main": "dist/cjs/index.js",
   "module": "dist/mjs/index.js",
@@ -37,111 +37,111 @@
   ],
   "author": "Cube Dev Team",
   "devDependencies": {
-    "@ant-design/icons": "^4.4.0",
-    "@open-wc/testing": "^2.5.32",
-    "@react-aria/button": "^3.3.2",
-    "@react-aria/checkbox": "^3.2.2",
-    "@react-aria/combobox": "^3.0.1",
-    "@react-aria/dialog": "^3.1.3",
-    "@react-aria/focus": "^3.4.0",
-    "@react-aria/i18n": "^3.3.1",
-    "@react-aria/interactions": "^3.5.0",
-    "@react-aria/listbox": "^3.3.0",
-    "@react-aria/numberfield": "^3.0.0",
-    "@react-aria/overlays": "^3.7.2",
-    "@react-aria/radio": "^3.1.4",
-    "@react-aria/searchfield": "^3.1.3",
-    "@react-aria/select": "^3.3.2",
-    "@react-aria/ssr": "^3.0.2",
-    "@react-aria/switch": "^3.1.2",
-    "@react-aria/textfield": "^3.3.0",
+    "@ant-design/icons": "^4.7.0",
+    "@open-wc/testing": "^3.0.3",
+    "@react-aria/button": "^3.3.4",
+    "@react-aria/checkbox": "^3.2.3",
+    "@react-aria/combobox": "^3.2.1",
+    "@react-aria/dialog": "^3.1.4",
+    "@react-aria/focus": "^3.5.0",
+    "@react-aria/i18n": "^3.3.4",
+    "@react-aria/interactions": "^3.7.0",
+    "@react-aria/listbox": "^3.4.0",
+    "@react-aria/numberfield": "^3.1.1",
+    "@react-aria/overlays": "^3.7.3",
+    "@react-aria/radio": "^3.1.6",
+    "@react-aria/searchfield": "^3.2.2",
+    "@react-aria/select": "^3.6.0",
+    "@react-aria/ssr": "^3.1.0",
+    "@react-aria/switch": "^3.1.3",
+    "@react-aria/textfield": "^3.5.0",
     "@react-aria/tooltip": "^3.1.3",
-    "@react-aria/utils": "^3.8.1",
-    "@react-spectrum/utils": "^3.6.2",
-    "@react-stately/checkbox": "^3.0.2",
-    "@react-stately/collections": "^3.3.3",
+    "@react-aria/utils": "^3.11.0",
+    "@react-spectrum/utils": "^3.6.3",
+    "@react-stately/checkbox": "^3.0.3",
+    "@react-stately/collections": "^3.3.4",
     "@react-stately/combobox": "^3.0.1",
-    "@react-stately/numberfield": "^3.0.1",
-    "@react-stately/overlays": "^3.1.2",
-    "@react-stately/radio": "^3.3.1",
-    "@react-stately/searchfield": "^3.1.2",
-    "@react-stately/select": "^3.1.2",
-    "@react-stately/toggle": "^3.2.2",
+    "@react-stately/numberfield": "^3.0.2",
+    "@react-stately/overlays": "^3.1.3",
+    "@react-stately/radio": "^3.3.2",
+    "@react-stately/searchfield": "^3.1.3",
+    "@react-stately/select": "^3.1.3",
+    "@react-stately/toggle": "^3.2.3",
     "@react-stately/tooltip": "^3.0.5",
-    "@react-stately/utils": "^3.2.1",
-    "@react-types/button": "^3.4.0",
-    "@react-types/checkbox": "^3.2.2",
-    "@react-types/combobox": "^3.0.1",
-    "@react-types/dialog": "^3.3.0",
-    "@react-types/numberfield": "^3.0.1",
+    "@react-stately/utils": "^3.3.0",
+    "@react-types/button": "^3.4.1",
+    "@react-types/checkbox": "^3.2.3",
+    "@react-types/combobox": "^3.2.1",
+    "@react-types/dialog": "^3.3.1",
+    "@react-types/numberfield": "^3.1.0",
     "@react-types/overlays": "^3.5.1",
     "@react-types/radio": "^3.1.2",
-    "@react-types/select": "^3.3.0",
-    "@react-types/shared": "^3.8.0",
+    "@react-types/select": "^3.5.1",
+    "@react-types/shared": "^3.10.1",
     "@react-types/switch": "^3.1.2",
-    "@react-types/textfield": "^3.2.3",
+    "@react-types/textfield": "^3.3.0",
     "@react-types/tooltip": "^3.1.2",
-    "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-typescript": "^8.2.3",
-    "@rollup/plugin-url": "^5.0.1",
-    "@size-limit/preset-big-lib": "^4.11.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@rollup/plugin-url": "^6.1.0",
+    "@size-limit/preset-big-lib": "^7.0.5",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-essentials": "^6.4.9",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.4.9",
     "@storybook/preset-create-react-app": "^4.0.0",
     "@storybook/react": "^6.4.9",
-    "@svgr/rollup": "^5.4.0",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.0.0",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
-    "@web/test-runner": "^0.9.7",
+    "@svgr/rollup": "^6.1.2",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.8.1",
+    "@typescript-eslint/parser": "^5.8.1",
+    "@web/test-runner": "^0.13.23",
     "babel-eslint": "^10.1.0",
-    "chai": "^4.2.0",
-    "chromatic": "^5.9.2",
+    "chai": "^4.3.4",
+    "chromatic": "^6.3.3",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
-    "css-loader": "^5.0.1",
+    "css-loader": "^6.5.1",
     "dotize": "^0.3.0",
     "email-validator": "^2.0.4",
-    "eslint": "^7.14.0",
+    "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.5.5",
-    "jest": "^26.6.3",
-    "less-loader": "^7.1.0",
-    "netlify-cli": "^6.9.6",
+    "jest": "^27.4.5",
+    "less-loader": "^10.2.0",
+    "netlify-cli": "^8.6.0",
     "parcel-bundler": "^1.12.4",
-    "prettier": "^2.0.5",
-    "prismjs": "^1.23.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router": "^5.2.0",
-    "react-test-renderer": "^17.0.1",
-    "react-transition-group": "^4.4.1",
-    "rollup": "^2.55.0",
-    "rollup-plugin-less": "^1.1.2",
+    "prettier": "^2.5.1",
+    "prismjs": "^1.25.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2",
+    "react-router": "^6.2.1",
+    "react-test-renderer": "^17.0.2",
+    "react-transition-group": "^4.4.2",
+    "rollup": "^2.62.0",
+    "rollup-plugin-less": "^1.1.3",
     "rollup-plugin-local-resolve": "^1.0.7",
-    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^4.2.2",
-    "size-limit": "^4.11.0",
+    "rollup-plugin-visualizer": "^5.5.2",
+    "size-limit": "^7.0.5",
     "storybook-addon-styled-component-theme": "^2.0.0",
-    "style-loader": "^2.0.0",
-    "styled-components": "^5.3.0",
-    "typescript": "^4.4.4",
+    "style-loader": "^3.3.1",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.5.4",
     "valid-url": "^1.0.9"
   },
   "size-limit": [
@@ -163,7 +163,8 @@
     "react-dom": ">= 17.0.0"
   },
   "dependencies": {
-    "dom-helpers": "^5.2.1"
+    "dom-helpers": "^5.2.1",
+    "react-is": "^17.0.2"
   },
   "license": "MIT"
 }