@itcase/ui 1.1.5 → 1.1.7

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 { T as Text } from '../Text-DffpwlYq.js';
+import borderTypeProps from '../constants/componentProps/borderType.js';
+import sizeProps from '../constants/componentProps/size.js';
+import fillProps from '../constants/componentProps/fill.js';
+import shapeProps from '../constants/componentProps/shape.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import '../jsx-runtime-ClDdVO4Q.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';
 
 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'
   });
-  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,40 @@
-'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-DffpwlYq.js';
+import { Icon } from './Icon.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 'react-inlinesvg';
+import './Link.js';
+import '../constants/componentProps/fill.js';
+import '../constants/componentProps/size.js';
+import '../constants/componentProps/textColor.js';
+import '../constants/componentProps/textGradient.js';
+import '../constants/componentProps/textStyle.js';
+import '../constants/componentProps/textWeight.js';
+import '../constants/componentProps/type.js';
+import '../constants/componentProps/underline.js';
+import '../constants/componentProps/borderColor.js';
+import '../constants/componentProps/borderType.js';
+import '../constants/componentProps/iconSize.js';
+import '../constants/componentProps/shape.js';
+import '../constants/componentProps/strokeColor.js';
+import './Tooltip.js';
+import './Title.js';
+import '../constants/componentProps/textAlign.js';
+import '../constants/componentProps/titleSize.js';
+import '../constants/componentProps/wrap.js';
+import '../constants/componentProps/textSize.js';
+import 'lodash/castArray';
 
 const choiceConfig = {
   appearance: {},
@@ -51,7 +42,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 +71,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 +131,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 +148,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 +339,4 @@ Choice.__docgenInfo = {
   }
 };
 
-exports.Choice = Choice;
-exports.choiceConfig = choiceConfig;
+export { Choice, choiceConfig };

package/dist/components/Code.js

@@ -1,32 +1,24 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
-require('lodash/camelCase');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-
-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, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
 
 var isStyleObject = function (obj) { return typeof obj === 'object' && obj !== null; };
 var OTPInput = function (_a) {
     var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.numInputs, numInputs = _c === void 0 ? 4 : _c, onChange = _a.onChange, onPaste = _a.onPaste, renderInput = _a.renderInput, _d = _a.shouldAutoFocus, shouldAutoFocus = _d === void 0 ? false : _d, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, renderSeparator = _a.renderSeparator, placeholder = _a.placeholder, containerStyle = _a.containerStyle, inputStyle = _a.inputStyle, _f = _a.skipDefaultStyles, skipDefaultStyles = _f === void 0 ? false : _f;
-    var _g = React__default.default.useState(0), activeInput = _g[0], setActiveInput = _g[1];
-    var inputRefs = React__default.default.useRef([]);
+    var _g = React__default.useState(0), activeInput = _g[0], setActiveInput = _g[1];
+    var inputRefs = React__default.useRef([]);
     var getOTPValue = function () { return (value ? value.toString().split('') : []); };
     var isInputNum = inputType === 'number' || inputType === 'tel';
-    React__default.default.useEffect(function () {
+    React__default.useEffect(function () {
         inputRefs.current = inputRefs.current.slice(0, numInputs);
     }, [numInputs]);
-    React__default.default.useEffect(function () {
+    React__default.useEffect(function () {
         var _a;
         if (shouldAutoFocus) {
             (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -162,9 +154,9 @@ var OTPInput = function (_a) {
         focusInput(nextActiveInput);
         handleOTPChange(otp);
     };
-    return (React__default.default.createElement("div", { style: Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === 'string' ? containerStyle : undefined, onPaste: onPaste }, Array.from({ length: numInputs }, function (_, index) { return index; }).map(function (index) {
+    return (React__default.createElement("div", { style: Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === 'string' ? containerStyle : undefined, onPaste: onPaste }, Array.from({ length: numInputs }, function (_, index) { return index; }).map(function (index) {
         var _a, _b, _c;
-        return (React__default.default.createElement(React__default.default.Fragment, { key: index },
+        return (React__default.createElement(React__default.Fragment, { key: index },
             renderInput({
                 value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
                 placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
@@ -200,73 +192,73 @@ function Code(props) {
     onChange,
     onFocus
   } = props;
-  const [otp, setOtp] = React.useState('');
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const [otp, setOtp] = useState('');
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'inputFill'
   });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'inputFillHover'
   });
-  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass(props, {
     prefix: 'code__input_size_',
     propsKey: 'inputSize'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'code__input_shape_',
     propsKey: 'inputShape'
   });
-  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textSizeClass = useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'inputTextSize'
   });
-  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorClass = useDeviceTargetClass(props, {
     prefix: 'text-color_',
     propsKey: 'inputTextColor'
   });
-  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const caretClass = useDeviceTargetClass(props, {
     prefix: 'caret-color_',
     propsKey: 'inputCaretColor'
   });
-  const placeholderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderClass = useDeviceTargetClass(props, {
     prefix: 'placeholder-text-color_',
     propsKey: 'inputPlaceholderTextColor'
   });
-  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const weightClass = useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'inputTextWeight'
   });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'inputBorderWidth'
   });
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'inputBorderColor'
   });
-  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorHoverClass = useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'inputBorderColorHover'
   });
-  const borderColorFocusClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorFocusClass = useDeviceTargetClass(props, {
     prefix: 'border-color_focus_',
     propsKey: 'inputBorderFocusColor'
   });
-  const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const gapClass = useDeviceTargetClass(props, {
     prefix: 'gap_',
     propsKey: 'gap'
   });
-  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
 
   // NOTE: too many dependencies for "useCallback" and possible too many checks
   const renderInput = otpInputProps => {
-    return /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, otpInputProps, {
+    return /*#__PURE__*/React__default.createElement("input", Object.assign({}, otpInputProps, {
       autocomplete: "one-time-code",
-      className: clsx__default.default('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass),
+      className: clsx('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass),
       onBlur: event => {
         onBlur && onBlur(event);
         otpInputProps.onBlur(event);
@@ -277,13 +269,13 @@ function Code(props) {
       }
     }));
   };
-  React.useEffect(() => {
+  useEffect(() => {
     onChange && onChange(otp);
   }, [otp]);
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'code', widthClass)
-  }, before, /*#__PURE__*/React__default.default.createElement(OTPInput, {
-    containerStyle: clsx__default.default(className, 'code__wrapper', gapClass),
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'code', widthClass)
+  }, before, /*#__PURE__*/React__default.createElement(OTPInput, {
+    containerStyle: clsx(className, 'code__wrapper', gapClass),
     inputType: inputType,
     numInputs: inputCount,
     placeholder: inputPlaceholder,
@@ -295,7 +287,7 @@ function Code(props) {
   }), after);
 }
 Code.propTypes = {
-  value: PropTypes__default.default.number
+  value: PropTypes.number
 };
 Code.defaultProps = {
   inputCount: 6,
@@ -434,4 +426,4 @@ Code.__docgenInfo = {
   }
 };
 
-exports.Code = Code;
+export { Code };