@itcase/ui 1.1.6 → 1.1.8

package/dist/components/Checkbox.js

@@ -1,32 +1,18 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var index = require('./Text.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textWeight.js');
-require('../hooks/useStyles.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/castArray');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { T as Text } from '../Text-BcGbRc14.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import '../jsx-runtime-ClDdVO4Q.js';
+import '../hooks/useStyles.js';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/castArray';
 
 const checkboxConfig = {
   state: {},
@@ -62,52 +48,52 @@ function Checkbox(props) {
     onFocus,
     value
   } = props;
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'checkbox_shape_',
     propsKey: 'shape'
   });
-  const stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateShapeClass = useDeviceTargetClass(props, {
     prefix: 'checkbox__state_shape_',
     propsKey: 'stateShape'
   });
-  const stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateFillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: checked ? 'stateFillChecked' : 'stateFill'
   });
-  const stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateFillDisabledClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
   });
-  const stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateCheckmarkFillClass = useDeviceTargetClass(props, {
     prefix: 'checkbox_checkmark_fill_',
     propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
   });
-  const stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'stateBorderWidth'
   });
-  const stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
   });
-  const stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorDisabledClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
-  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'checkbox', fillClass, shapeClass, widthClass),
+  return /*#__PURE__*/React__default.createElement(Tag, {
+    className: clsx(className, 'checkbox', fillClass, shapeClass, widthClass),
     htmlFor: Tag === 'label' && id
-  }, before, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('checkbox__item', stateCheckmarkFillClass || checkboxConfig.appearance[appearance]?.stateCheckmarkFill && `checkbox_checkmark_fill_${checkboxConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
-  }, /*#__PURE__*/React__default.default.createElement("input", {
+  }, before, /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('checkbox__item', stateCheckmarkFillClass || checkboxConfig.appearance[appearance]?.stateCheckmarkFill && `checkbox_checkmark_fill_${checkboxConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, /*#__PURE__*/React__default.createElement("input", {
     checked: checked,
     className: "checkbox__input",
     disabled: disabled,
@@ -117,27 +103,27 @@ function Checkbox(props) {
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus
-  }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || checkboxConfig.appearance[appearance]?.stateBorderColor && `border-color_${checkboxConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateShapeClass || checkboxConfig.appearance[appearance]?.stateShape && `checkbox__state_shape_${checkboxConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || checkboxConfig.appearance[appearance]?.stateBorderWidth && `border-width_${checkboxConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
-  }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || checkboxConfig.appearance[appearance]?.stateBorderColor && `border-color_${checkboxConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateShapeClass || checkboxConfig.appearance[appearance]?.stateShape && `checkbox__state_shape_${checkboxConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || checkboxConfig.appearance[appearance]?.stateBorderWidth && `border-width_${checkboxConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, "\xA0"), /*#__PURE__*/React__default.createElement("div", {
     className: "checkbox__state-checkmark"
-  }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
+  }, "\xA0")), label && /*#__PURE__*/React__default.createElement(Text, {
     className: "checkbox__label",
     size: labelTextSize || checkboxConfig.appearance[appearance]?.labelTextSize,
     textColor: labelTextColor || checkboxConfig.appearance[appearance]?.labelTextColor,
     textWeight: labelTextWidth
-  }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
+  }, label), desc && /*#__PURE__*/React__default.createElement(Text, {
     className: "checkbox__desc",
-    size: descTextSize || checkboxConfig.appearance[appearance].descTextSize,
-    textColor: descTextColor || checkboxConfig.appearance[appearance].descTextColor,
+    size: descTextSize || checkboxConfig.appearance[appearance]?.descTextSize,
+    textColor: descTextColor || checkboxConfig.appearance[appearance]?.descTextColor,
     textWeight: descTextWidth
-  }, desc), after && /*#__PURE__*/React__default.default.createElement("div", {
+  }, desc), after && /*#__PURE__*/React__default.createElement("div", {
     className: "checkbox__after"
   }, after));
 }
 Checkbox.propTypes = {
-  className: PropTypes__default.default.string,
-  tag: PropTypes__default.default.string
+  className: PropTypes.string,
+  tag: PropTypes.string
 };
 Checkbox.defaultProps = {
   tag: 'label'
@@ -168,5 +154,4 @@ Checkbox.__docgenInfo = {
   }
 };
 
-exports.Checkbox = Checkbox;
-exports.checkboxConfig = checkboxConfig;
+export { Checkbox, checkboxConfig };

package/dist/components/Chips.js

@@ -1,35 +1,22 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var index = require('./Text.js');
-var borderType = require('../constants/componentProps/borderType.js');
-var size = require('../constants/componentProps/size.js');
-var fill = require('../constants/componentProps/fill.js');
-var shape = require('../constants/componentProps/shape.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var useStyles = require('../hooks/useStyles.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textWeight.js');
-require('lodash/castArray');
-require('lodash/camelCase');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import borderTypeProps from '../constants/componentProps/borderType.js';
+import fillProps from '../constants/componentProps/fill.js';
+import shapeProps from '../constants/componentProps/shape.js';
+import sizeProps from '../constants/componentProps/size.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { T as Text } from '../Text-BcGbRc14.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import '../jsx-runtime-ClDdVO4Q.js';
 
 const chipsConfig = {
   appearance: {},
@@ -49,90 +36,90 @@ function Chips(props) {
     type,
     onClick
   } = props;
-  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignDirectionClass = useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
   });
-  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignClass = useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'align'
   });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass(props, {
     prefix: 'chips_size_',
     propsKey: 'size'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'chips_shape_',
     propsKey: 'shape'
   });
-  const borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
   });
-  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
-  const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const cursorClass = useDeviceTargetClass(props, {
     prefix: 'cursor_',
     propsKey: 'cursor'
   });
   const {
     styles: chipsStyles
-  } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'chips', fillClass || chipsConfig.appearance[appearance] && `fill_${chipsConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance] && `fill_hover_${chipsConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass || chipsConfig.appearance[appearance]?.border && `border-color_${chipsConfig.appearance[appearance].border}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`, cursorClass),
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'chips', fillClass || chipsConfig.appearance[appearance]?.fill && `fill_${chipsConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance]?.fillHover && `fill_hover_${chipsConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass || chipsConfig.appearance[appearance]?.border && `border-color_${chipsConfig.appearance[appearance].border}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`, cursorClass),
     style: chipsStyles,
     onClick: onClick
-  }, /*#__PURE__*/React__default.default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "chips__inner"
-  }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
+  }, typeof label === 'string' ? /*#__PURE__*/React__default.createElement(Text, {
     className: "chips__label",
     textColor: labelTextColor || chipsConfig.appearance[appearance]?.labelTextColor && chipsConfig.appearance[appearance].labelTextColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textWeight: labelTextWeight,
     size: labelSize
-  }, label) : /*#__PURE__*/React__default.default.createElement("div", {
+  }, label) : /*#__PURE__*/React__default.createElement("div", {
     className: "chips__label"
   }, label), children));
 }
 Chips.propTypes = {
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  border: PropTypes__default.default.string,
-  borderDesktop: PropTypes__default.default.string,
-  borderMobile: PropTypes__default.default.string,
-  borderTablet: PropTypes__default.default.string,
-  borderType: PropTypes__default.default.oneOf(borderType.default),
-  borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
-  borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
-  borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
-  fill: PropTypes__default.default.oneOf(fill.default),
-  fillDesktop: PropTypes__default.default.oneOf(fill.default),
-  fillMobile: PropTypes__default.default.oneOf(fill.default),
-  fillTablet: PropTypes__default.default.oneOf(fill.default),
-  fillHover: PropTypes__default.default.oneOf(fill.default),
-  shape: PropTypes__default.default.oneOf(shape.default),
-  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
-  shapeMobile: PropTypes__default.default.oneOf(shape.default),
-  shapeTablet: PropTypes__default.default.oneOf(shape.default),
-  label: PropTypes__default.default.any,
-  labelSize: PropTypes__default.default.oneOf(size.default),
-  labelSizeDesktop: PropTypes__default.default.oneOf(size.default),
-  labelSizeMobile: PropTypes__default.default.oneOf(size.default),
-  labelSizeTablet: PropTypes__default.default.oneOf(size.default),
-  size: PropTypes__default.default.oneOf(size.default),
-  sizeDesktop: PropTypes__default.default.oneOf(size.default),
-  sizeMobile: PropTypes__default.default.oneOf(size.default),
-  sizeTablet: PropTypes__default.default.oneOf(size.default),
-  type: PropTypes__default.default.string
+  children: PropTypes.any,
+  className: PropTypes.string,
+  border: PropTypes.string,
+  borderDesktop: PropTypes.string,
+  borderMobile: PropTypes.string,
+  borderTablet: PropTypes.string,
+  borderType: PropTypes.oneOf(borderTypeProps),
+  borderTypeDesktop: PropTypes.oneOf(borderTypeProps),
+  borderTypeMobile: PropTypes.oneOf(borderTypeProps),
+  borderTypeTablet: PropTypes.oneOf(borderTypeProps),
+  fill: PropTypes.oneOf(fillProps),
+  fillDesktop: PropTypes.oneOf(fillProps),
+  fillMobile: PropTypes.oneOf(fillProps),
+  fillTablet: PropTypes.oneOf(fillProps),
+  fillHover: PropTypes.oneOf(fillProps),
+  shape: PropTypes.oneOf(shapeProps),
+  shapeDesktop: PropTypes.oneOf(shapeProps),
+  shapeMobile: PropTypes.oneOf(shapeProps),
+  shapeTablet: PropTypes.oneOf(shapeProps),
+  label: PropTypes.any,
+  labelSize: PropTypes.oneOf(sizeProps),
+  labelSizeDesktop: PropTypes.oneOf(sizeProps),
+  labelSizeMobile: PropTypes.oneOf(sizeProps),
+  labelSizeTablet: PropTypes.oneOf(sizeProps),
+  size: PropTypes.oneOf(sizeProps),
+  sizeDesktop: PropTypes.oneOf(sizeProps),
+  sizeMobile: PropTypes.oneOf(sizeProps),
+  sizeTablet: PropTypes.oneOf(sizeProps),
+  type: PropTypes.string
 };
 Chips.defaultProps = {
   label: 'Chips'
@@ -394,5 +381,4 @@ Chips.__docgenInfo = {
   }
 };
 
-exports.Chips = Chips;
-exports.chipsConfig = chipsConfig;
+export { Chips, chipsConfig };

package/dist/components/Choice.js

@@ -1,49 +1,35 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var index = require('./Text.js');
-var index$1 = require('./Icon.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textWeight.js');
-require('../hooks/useStyles.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('react-inlinesvg');
-require('./Link.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('../constants/componentProps/borderColor.js');
-require('../constants/componentProps/borderType.js');
-require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/shape.js');
-require('../constants/componentProps/strokeColor.js');
-require('./Tooltip.js');
-require('./Title.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/wrap.js');
-require('../constants/componentProps/textSize.js');
-require('lodash/castArray');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+import React__default, { useRef, useMemo, createRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { T as Text } from '../Text-BcGbRc14.js';
+import { I as Icon } from '../Icon-Dn2eEZvb.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import '../jsx-runtime-ClDdVO4Q.js';
+import '../hooks/useStyles.js';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import '../Link-ByBzBRDH.js';
+import 'react-inlinesvg';
+import './Tooltip.js';
+import './Title.js';
+import '../constants/componentProps/fill.js';
+import '../constants/componentProps/textAlign.js';
+import '../constants/componentProps/textColor.js';
+import '../constants/componentProps/textGradient.js';
+import '../constants/componentProps/textStyle.js';
+import '../constants/componentProps/textWeight.js';
+import '../constants/componentProps/titleSize.js';
+import '../constants/componentProps/type.js';
+import '../constants/componentProps/wrap.js';
+import '../constants/componentProps/size.js';
+import '../constants/componentProps/textSize.js';
+import '../constants/componentProps/shape.js';
+import 'lodash/castArray';
 
 const choiceConfig = {
   appearance: {},
@@ -51,7 +37,7 @@ const choiceConfig = {
     choiceConfig.appearance = newComponent;
   }
 };
-const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(props, ref) {
+const Choice = /*#__PURE__*/React__default.forwardRef(function Choice(props, ref) {
   const {
     appearance,
     name,
@@ -80,58 +66,58 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     iconStroke,
     isMultiple
   } = props;
-  const controlRef = React.useRef(null);
-  const optionsRefs = React.useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/React.createRef()])), [options]);
-  const onChange = React.useCallback((event, item) => {
+  const controlRef = useRef(null);
+  const optionsRefs = useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/createRef()])), [options]);
+  const onChange = useCallback((event, item) => {
     const isChecked = isMultiple ? event.target.checked : true;
     setActiveSegment && setActiveSegment(item, isChecked);
   }, [isMultiple, setActiveSegment]);
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'choice_shape_',
     propsKey: 'shape'
   });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillDisabledClass = useDeviceTargetClass(props, {
     prefix: 'fill_disabled_',
     propsKey: 'fillDisabled'
   });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  const fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillActiveClass = useDeviceTargetClass(props, {
     prefix: 'fill_active_',
     propsKey: 'fillActive'
   });
-  const fillActiveDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillActiveDisabledClass = useDeviceTargetClass(props, {
     prefix: 'fill_active_disabled_',
     propsKey: 'fillActiveDisabled'
   });
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'choice', shapeClass || choiceConfig.appearance[appearance]?.shape && `choice_shape_${choiceConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? fillClass || choiceConfig.appearance[appearance]?.fill && `fill_${choiceConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillDisabledClass, borderColorClass || choiceConfig.appearance[appearance]?.borderColor && `border-color_${choiceConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'choice', shapeClass || choiceConfig.appearance[appearance]?.shape && `choice_shape_${choiceConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? fillClass || choiceConfig.appearance[appearance]?.fill && `fill_${choiceConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillDisabledClass, borderColorClass || choiceConfig.appearance[appearance]?.borderColor && `border-color_${choiceConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
     ref: controlRef
-  }, /*#__PURE__*/React__default.default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "choice__wrapper"
-  }, options?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('choice__item', !isDisabled && (fillHoverClass || choiceConfig.appearance[appearance]?.fillHover && `fill_active_${choiceConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value ? !isDisabled ? fillActiveClass || choiceConfig.appearance[appearance]?.fillActive && `fill_active_${choiceConfig.appearance[appearance].fillActive}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillActiveDisabledClass : !isDisabled ? fillClass : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'),
+  }, options?.map((item, i) => /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('choice__item', !isDisabled && (fillHoverClass || choiceConfig.appearance[appearance]?.fillHover && `fill_active_${choiceConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value ? !isDisabled ? fillActiveClass || choiceConfig.appearance[appearance]?.fillActive && `fill_active_${choiceConfig.appearance[appearance].fillActive}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillActiveDisabledClass : !isDisabled ? fillClass : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'),
     key: item.value,
     ref: optionsRefs.get(item.value)
-  }, /*#__PURE__*/React__default.default.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement("input", {
     checked: item.value === active.value,
     className: "choice__item-radio",
     id: `${name}-${item.value}`,
@@ -140,13 +126,13 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     type: isMultiple ? 'checkbox' : 'radio',
     value: item.value,
     onChange: event => onChange(event, item)
-  }), /*#__PURE__*/React__default.default.createElement("label", {
-    className: clsx__default.default('choice__item-label', isDisabled && 'choice__item-label_state_disabled'),
+  }), /*#__PURE__*/React__default.createElement("label", {
+    className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'),
     htmlFor: `${name}-${item.value}`
-  }, before, item.label && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    size: labelTextSize || choiceConfig.appearance[appearance].labelTextSize,
-    textColor: item.value === active.value ? !isDisabled ? labelTextActiveColor || choiceConfig.appearance[appearance].labelTextActiveColor : labelTextActiveColorDisabled : !isDisabled ? labelTextColor || choiceConfig.appearance[appearance].labelTextColor : labelTextColorDisabled
-  }, item.label), (icon || activeIcon) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+  }, before, item.label && /*#__PURE__*/React__default.createElement(Text, {
+    size: labelTextSize || choiceConfig.appearance[appearance]?.labelTextSize,
+    textColor: item.value === active.value ? !isDisabled ? labelTextActiveColor || choiceConfig.appearance[appearance]?.labelTextActiveColor : labelTextActiveColorDisabled : !isDisabled ? labelTextColor || choiceConfig.appearance[appearance]?.labelTextColor : labelTextColorDisabled
+  }, item.label), (icon || activeIcon) && /*#__PURE__*/React__default.createElement(Icon, {
     className: "choice__item-icon",
     iconFill: item.value === active.value ? activeIconItemFill : iconItemFill,
     iconFillDisabled: isDisabled && iconFillDisabled,
@@ -157,26 +143,26 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
   }), after)))));
 });
 Choice.propTypes = {
-  active: PropTypes__default.default.shape({
-    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
-    label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element])
+  active: PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
   }),
-  after: PropTypes__default.default.any,
-  before: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  isMultiple: PropTypes__default.default.bool,
-  labelTextActiveColor: PropTypes__default.default.string,
-  labelTextColor: PropTypes__default.default.string,
-  labelTextSize: PropTypes__default.default.string,
-  name: PropTypes__default.default.string,
-  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
-    label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element])
+  after: PropTypes.any,
+  before: PropTypes.any,
+  className: PropTypes.string,
+  isMultiple: PropTypes.bool,
+  labelTextActiveColor: PropTypes.string,
+  labelTextColor: PropTypes.string,
+  labelTextSize: PropTypes.string,
+  name: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
   })),
-  set: PropTypes__default.default.string,
-  setActiveSegment: PropTypes__default.default.func,
-  size: PropTypes__default.default.string,
-  type: PropTypes__default.default.string
+  set: PropTypes.string,
+  setActiveSegment: PropTypes.func,
+  size: PropTypes.string,
+  type: PropTypes.string
 };
 Choice.defaultProps = {
   active: {},
@@ -348,5 +334,4 @@ Choice.__docgenInfo = {
   }
 };
 
-exports.Choice = Choice;
-exports.choiceConfig = choiceConfig;
+export { Choice, choiceConfig };