@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/WithTooltip.mdx

@@ -0,0 +1,9 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as LabelStories from './Label.stories.js'
+
+<Meta title="Atoms / Label / WithTooltip" />
+
+# With Tooltip
+
+<Canvas sourceState="shown" of={LabelStories.WithTooltip} />

package/dist/stories/Wrap.mdx

@@ -0,0 +1,52 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as WrapStories from './Wrap.stories.js'
+
+<Meta title="Layout / Group / Wrap" />
+
+# Wrap
+
+Свойство `wrap` определяет, помещаются ли гибкие элементы в одну строку или могут переноситься на несколько строк.
+Если перенос разрешен, он задает направление наложения строк.
+
+```js
+<Group wrap="...">...</Group>
+```
+
+## Значения
+
+- `nowrap` — Элементы располагаются в одну строку, что может привести к переполнению гибкого контейнера.
+- `wrap` — Элементы разбиваются на несколько строк.
+- `wrapReverse` — Элементы разбиваются на несколько строк, но обратном порядке.
+
+# Примеры использования
+
+### nowrap
+
+Элементы располагаются в одну строку, что может привести к переполнению гибкого контейнера.
+
+```js
+<Group wrap="nowrap">...</Group>
+```
+
+<Canvas of={WrapStories.Nowrap} />
+
+### wrap
+
+Элементы разбиваются на несколько строк.
+
+```js
+<Group wrap="wrap">...</Group>
+```
+
+<Canvas of={WrapStories.Wrap} />
+
+### wrapReverse
+
+Элементы разбиваются на несколько строк, но обратном порядке.
+
+```js
+<Group wrap="wrapReverse">...</Group>
+```
+
+<Canvas of={WrapStories.WrapReverse} />

package/dist/stories/Wrap.stories.js

@@ -0,0 +1,74 @@
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { argTypes } from './args'
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Group,
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      height={args.height}
+      fill={args.fill}
+      padding={args.padding}
+      borderColor={args.borderColor}
+      direction={args.direction}
+      wrap={args.wrap}
+    >
+      <Group width="30%" height="60" fill="accentPrimary" padding="20">
+        <Text size="xl" textColor="accentTextPrimary">
+          1
+        </Text>
+      </Group>
+      <Group width="30%" height="60" fill="primaryPrimary" padding="20">
+        <Text size="xl" textColor="accentTextPrimary">
+          2
+        </Text>
+      </Group>
+      <Group width="30%" height="60" fill="secondaryPrimary" padding="20">
+        <Text size="xl" textColor="accentTextPrimary">
+          3
+        </Text>
+      </Group>
+      <Group width="30%" height="60" fill="infoPrimary" padding="20">
+        <Text size="xl" textColor="accentTextPrimary">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+  title: 'Layout / Group / Variants / Wrap',
+}
+
+const Default = {
+  args: {
+    width: '500',
+    padding: '20',
+    borderColor: 'surfaceBorderPrimary',
+    direction: 'horizontal',
+    fill: 'surfacePrimary',
+  },
+}
+
+export const Nowrap = {
+  args: {
+    ...Default.args,
+    wrap: 'nowrap',
+  },
+}
+
+export const Wrap = {
+  args: {
+    ...Default.args,
+    wrap: 'wrap',
+  },
+}
+
+export const WrapReverse = {
+  args: {
+    ...Default.args,
+    wrap: 'wrap-reverse',
+  },
+}

package/dist/types/components/Accordion/Accordion.interface.d.ts

@@ -39,6 +39,9 @@ interface iAccordionItemProps extends iStyleAttributes {
     contentTextColor?: tTextColorProps;
     contentTextSize?: tSizeProps;
     contentTextWeight?: tTextWeightProps;
+    dividerDirection?: tDirectionProps;
+    dividerFill?: tFillProps;
+    dividerSize?: tSizeProps;
     fill?: tFillProps;
     fillDesktop?: tFillProps;
     fillHover?: tFillHoverProps;
@@ -54,6 +57,7 @@ interface iAccordionItemProps extends iStyleAttributes {
     shapeDesktop?: tShapeProps;
     shapeMobile?: tShapeProps;
     shapeTablet?: tShapeProps;
+    showDivider?: boolean;
     size?: tSizeProps;
     style?: CSSProperties;
     title?: string;

package/dist/types/components/Choice/Choice.interface.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import type { borderTypePropsType, iconSizePropsType, sizeOptionPropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from '../../types';
+import type { borderTypePropsType, iconSizePropsType, sizeOptionPropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tTextColorProps, tTextSizeProps, tTextWeightProps, wrapPropsType } from '../../types';
 import type { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 interface iChoiceThemeColor {
     activeIconItemFill?: tItemColorProps;
@@ -22,6 +22,7 @@ interface iChoiceThemeColor {
     labelTextSize?: tTextSizeProps;
     labelTextWeight?: tTextWeightProps;
     shape?: tShapeProps;
+    wrap?: wrapPropsType;
 }
 type tChoiceAppearance = {
     [key in tAppearanceKeysDefault]?: iChoiceThemeColor;
@@ -40,7 +41,6 @@ interface iChoiceProps extends iChoiceThemeColor, iStyleAttributes {
     appearance?: tAppearanceKeysDefault;
     before?: ReactNode;
     className?: string;
-    gap?: string;
     icon?: ReactNode;
     name?: string;
     options: {

package/dist/types/components/InputPassword/InputPassword.interface.d.ts

@@ -1,5 +1,5 @@
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { tBorderColorProps, tBorderWidthProps, tFillProps, iconSizePropsType, tItemColorProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tWidthProps } from '../../types';
+import { iconSizePropsType, tBorderColorProps, tBorderWidthProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tWidthProps } from '../../types';
 import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 import { tStateKeysDefault } from '../../types/componentProps/stateKeys';
 export interface iInputThemeColor {
@@ -15,8 +15,8 @@ export interface iInputThemeColor {
     textWeight?: tTextWeightProps;
     width?: tWidthProps;
 }
-type appearanceKeysType = tAppearanceKeysDefault & {};
-type stateKeysType = tStateKeysDefault & {};
+type appearanceKeysType = {} & tAppearanceKeysDefault;
+type stateKeysType = {} & tStateKeysDefault;
 export type tInputState = {
     [key in stateKeysType]?: iInputThemeColor;
 };
@@ -24,25 +24,27 @@ export type tInputAppearance = {
     [key in appearanceKeysType]?: iInputThemeColor;
 };
 export interface IInputPasswordConfig {
-    state: tInputState | undefined;
-    setState: (newComponent: tInputState) => void;
     appearance: tInputAppearance | undefined;
+    state: tInputState | undefined;
     setAppearance: (newComponent: tInputAppearance) => void;
+    setState: (newComponent: tInputState) => void;
 }
 export interface IInputPasswordProps extends iInputThemeColor, iStyleAttributes {
+    id?: number | string;
     appearance?: appearanceKeysType;
     className?: string;
     disabled?: boolean;
     iconFill?: tItemColorProps;
     iconFillHover?: tItemColorProps;
+    iconRevealableHide?: string;
+    iconRevealableShow?: string;
     iconShape?: tShapeProps;
     iconSize?: iconSizePropsType;
-    id?: number | string;
+    imageRevealableHide?: string;
+    imageRevealableShow?: string;
     placeholder?: string;
     state?: stateKeysType;
     value?: string;
-    iconRevealableHide?: string;
-    iconRevealableShow?: string;
     isRevealable?: boolean;
     onBlur?: () => void;
     onChange?: () => void;

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

@@ -2,8 +2,8 @@ import { ITileProps } from './Tile.interface';
 declare function Tile(props: ITileProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Tile {
     var defaultProps: {
-        textTag: string;
         alignDirection: string;
+        textTag: string;
     };
 }
 export { Tile };

package/dist/types/components/Tile/Tile.interface.d.ts

@@ -1,11 +1,13 @@
 import { CSSProperties, ReactNode } from 'react';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { tAlignDirectionProps, tAlignProps, borderColorHoverPropsType, tBorderColorProps, borderTypePropsType, tBorderWidthProps, tDirectionProps, tFillProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tTextWrapProps, titleSizePropsType } from '../../types';
+import { borderColorHoverPropsType, borderTypePropsType, tAlignDirectionProps, tAlignProps, tBorderColorProps, tBorderWidthProps, tDirectionProps, tFillProps, titleSizePropsType, tShapeProps, tSizeProps, tTextAlignProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tTextWrapProps } from '../../types';
 export interface ITileProps extends iStyleAttributes {
     after?: ReactNode;
     align?: tAlignProps;
     alignDirection?: tAlignDirectionProps;
     badge?: string;
+    badgeAppearance?: tAppearanceKeysDefault;
     badgeSize?: tSizeProps;
     badgeTextColor?: tTextColorProps;
     badgeTextSize?: tTextSizeProps;

package/dist/types/config/forms/datepicker.d.ts

@@ -0,0 +1,18 @@
+declare const defaultDatepickerProps: {
+    size: string;
+    iconSize: number;
+    iconFillSize: number;
+    iconItemFill: string;
+    daySize: string;
+    dayTextColor: string;
+    dayTextSize: string;
+    dayTextShape: string;
+    monthTextColor: string;
+    monthTextSize: string;
+    monthTextWeight: number;
+    yearTextColor: string;
+    yearTextSize: string;
+    yearTextWeight: number;
+    placeholderTextColor: string;
+};
+export { defaultDatepickerProps };

package/dist/types/config/forms/index.d.ts

@@ -0,0 +1,4 @@
+import { defaultDatepickerProps } from './datepicker';
+import { defaultInputProps } from './input';
+import { defaultSelectProps } from './select';
+export { defaultDatepickerProps, defaultInputProps, defaultSelectProps };

package/dist/types/config/forms/input.d.ts

@@ -0,0 +1,14 @@
+declare const defaultInputProps: {
+    width: string;
+    borderColor: string;
+    caret: string;
+    errorBorderColor: string;
+    placeholderTextColor: string;
+    requiredBorderColor: string;
+    shape: string;
+    size: string;
+    textColor: string;
+    textColorDisabled: string;
+    textSize: string;
+};
+export { defaultInputProps };

package/dist/types/config/forms/select.d.ts

@@ -0,0 +1,50 @@
+declare const defaultSelectProps: {
+    elevation: number;
+    isClearable: boolean;
+    isSearchable: boolean;
+    badgeAppearance: string;
+    badgeSize: string;
+    badgeTextSize: string;
+    clearIconFill: string;
+    closeMenuOnSelect: boolean;
+    dividerDirection: string;
+    dividerFill: string;
+    dividerSize: string;
+    dropdownIconFill: string;
+    errorInputBorderColor: string;
+    headingFill: string;
+    headingTextColor: string;
+    headingTextSize: string;
+    headingTextWeight: string;
+    inputBorderColor: string;
+    inputBorderColorHover: string;
+    inputCaretColor: string;
+    inputFill: string;
+    inputShape: string;
+    inputTextColor: string;
+    inputTextSize: string;
+    loadingMessage: import("react/jsx-runtime").JSX.Element;
+    multipleItemFill: string;
+    multipleItemFillHover: string;
+    multipleItemIconFill: string;
+    multipleItemTextColor: string;
+    multipleItemTextSize: string;
+    noOptionsSearchText: string;
+    noOptionsText: string;
+    noOptionsTextColor: string;
+    noOptionsTextSize: string;
+    optionBorder: string;
+    optionFill: string;
+    optionFillHover: string;
+    optionShape: string;
+    optionTextColor: string;
+    optionTextSize: string;
+    placeholder: string;
+    placeholderTextColor: string;
+    placeholderTextSize: string;
+    requiredInputBorderColor: string;
+    showBadge: boolean;
+    showDivider: boolean;
+    size: string;
+};
+export { defaultSelectProps };

package/dist/types/hooks/useViewportFix.d.ts

@@ -0,0 +1,2 @@
+declare function useViewportFix(): void;
+export { useViewportFix };

package/dist/types/types/componentProps/flexWrap.d.ts

@@ -1 +1 @@
-export type flexWrapPropsType = 'wrap' | 'nowrap' | 'wrap-reverse';
+export type flexWrapPropsType = 'nowrap' | 'wrap' | 'wrap-reverse';

package/dist/types/types/componentProps/wrap.d.ts

@@ -1 +1 @@
-export type wrapPropsType = 'wrap' | 'no-wrap' | 'nowrap' | 'wrap-reverse';
+export type wrapPropsType = 'no-wrap' | 'nowrap' | 'wrap' | 'wrap-reverse';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.18",
+  "version": "1.2.20",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -42,9 +42,9 @@
       "types": "./dist/types/components/*/*.interface.d.ts"
     },
     "./components/*": {
+      "types": "./dist/types/components/*/index.d.ts",
       "import": "./dist/components/*.js",
-      "require": "./dist/cjs/components/*.js",
-      "types": "./dist/types/components/*/index.d.ts"
+      "require": "./dist/cjs/components/*.js"
     },
     "./constants": {
       "import": "./dist/constants.js",
@@ -55,27 +55,30 @@
       "require": "./dist/cjs/constants/*.js"
     },
     "./context/*": {
+      "types": "./dist/types/context/*.d.ts",
       "import": "./dist/context/*.js",
-      "require": "./dist/cjs/context/*.js",
-      "types": "./dist/types/context/*.d.ts"
+      "require": "./dist/cjs/context/*.js"
     },
     "./hooks/*": {
+      "types": "./dist/types/hooks/*.d.ts",
       "import": "./dist/hooks/*.js",
-      "require": "./dist/cjs/hooks/*.js",
-      "types": "./dist/types/hooks/*.d.ts"
+      "require": "./dist/cjs/hooks/*.js"
     },
     "./stories/*": "./dist/stories/*.js"
   },
   "scripts": {
     "build": "npm run build-js && npm run build-css",
     "build-js": "rm -rf dist && NODE_ENV=production rollup -c",
-    "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/mediaqueries.css' 'src/mixins/**/*.css' --base src --dir dist/css/ --env production",
+    "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/mediaqueries.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production",
     "dev-js": "rollup -c -w",
-    "dev-css": "postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/mediaqueries.css' 'src/mixins/**/*.css' --base src --dir dist/css/ --env production -w --verbose",
+    "dev-css": "postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/mediaqueries.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production -w --verbose",
     "prepare": "husky",
     "prepack": "npm run build",
     "semantic-release": "semantic-release",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook -c .storybook --watch"
   },
   "files": [
     "dist",
@@ -92,7 +95,6 @@
   "dependencies": {
     "@itcase/common": "^1.2.13",
     "clsx": "^2.1.1",
-    "html5-boilerplate": "^9.0.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
@@ -101,10 +103,10 @@
     "react": "^18.3.1",
     "react-dadata": "^2.23.3",
     "react-date-range": "^2.0.1",
-    "react-datepicker": "^7.4.0",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
-    "react-inlinesvg": "^4.1.3",
+    "react-inlinesvg": "^4.1.4",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.2.0",
@@ -121,23 +123,35 @@
     "@babel/eslint-plugin": "^7.25.7",
     "@babel/preset-env": "^7.25.8",
     "@babel/preset-react": "^7.25.7",
+    "@chromatic-com/storybook": "^2.0.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@itcase/lint": "^1.0.13",
+    "@itcase/lint": "^1.0.14",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.0",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.1",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-onboarding": "^8.3.6",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-themes": "^8.3.6",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-webpack5": "^8.3.6",
+    "@storybook/test": "^8.3.6",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.10",
+    "@types/lodash": "^4.17.12",
     "@types/react": "^18",
     "@types/react-datepicker": "^7.0.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/react-scroll": "^1.8.10",
     "@types/uuid": "^10.0.0",
     "babel-loader": "^9.2.1",
@@ -145,7 +159,8 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.12.0",
+    "eslint": "9.13.0",
+    "eslint-plugin-storybook": "^0.10.1",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "npm": "^10.9.0",
@@ -153,7 +168,6 @@
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-csso": "^6.0.1",
     "postcss-dark-theme-class": "^1.3.0",
     "postcss-discard-duplicates": "^7.0.1",
     "postcss-each": "^1.1.0",
@@ -162,6 +176,7 @@
     "postcss-hexrgba": "^2.1.0",
     "postcss-import": "^16.1.0",
     "postcss-import-ext-glob": "^2.1.1",
+    "postcss-loader": "^8.1.1",
     "postcss-mixins": "^11.0.3",
     "postcss-nested": "^6.2.0",
     "postcss-nested-ancestors": "^3.0.0",
@@ -177,8 +192,9 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.2",
-    "semantic-release": "^24.1.2",
-    "stylelint": "^16.9.0",
+    "semantic-release": "^24.1.3",
+    "storybook": "^8.3.6",
+    "stylelint": "^16.10.0",
     "typescript": "^5.6.3"
   }
 }

package/dist/Radio-BQo97TZL.js

@@ -1,89 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
-var Text = require('./Text-_YhyTsQ1.js');
-
-var radioConfig = {
-    state: undefined,
-    setState: function (newComponent) {
-        radioConfig.state = newComponent;
-    },
-    appearance: undefined,
-    setAppearance: function (newComponent) {
-        radioConfig.appearance = newComponent;
-    },
-};
-function Radio(props) {
-    var appearance = props.appearance, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, id = props.id, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'radio_shape_',
-        propsKey: 'shape',
-    });
-    var stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'radio__state_shape_',
-        propsKey: 'stateShape',
-    });
-    var stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: checked ? 'stateFillChecked' : 'stateFill',
-    });
-    var stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled',
-    });
-    var stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'radio_checkmark_fill_',
-        propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill',
-    });
-    var stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'stateBorderWidth',
-    });
-    var stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor',
-    });
-    var stateBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover',
-    });
-    var stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled',
-    });
-    var appearanceConfig = appearance && radioConfig.appearance && radioConfig.appearance[appearance];
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass, shapeClass), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass ||
-                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
-                        "radio_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)
-                            .replace(/([A-Z])/g, '-$1')
-                            .toLowerCase())), children: [jsxRuntime.jsx("input", { checked: checked, className: "radio__input", disabled: disabled, 
-                        // @ts-expect-error
-                        id: id, type: "radio", onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
-                            ? stateBorderColorDisabledClass
-                            : stateBorderColorClass ||
-                                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateBorderColor) &&
-                                    "border-color_".concat(appearanceConfig.stateBorderColor)
-                                        .replace(/([A-Z])/g, '-$1')
-                                        .toLowerCase()), stateBorderColorHoverClass, stateShapeClass ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateShape) &&
-                                "radio__state_shape_".concat(appearanceConfig.stateShape)
-                                    .replace(/([A-Z])/g, '-$1')
-                                    .toLowerCase()), stateBorderWidthClass ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateBorderWidth) &&
-                                "border-width_".concat(appearanceConfig.stateBorderWidth)
-                                    .replace(/([A-Z])/g, '-$1')
-                                    .toLowerCase())), children: "\u00A0" }), jsxRuntime.jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc }))] }));
-}
-Radio.defaultProps = {
-    shape: 'circular',
-    tag: 'label',
-};
-
-exports.Radio = Radio;
-exports.radioConfig = radioConfig;