@itcase/ui 1.0.92 → 1.0.94

package/dist/{SelectContainer-meg_EXPO.js → SelectContainer-umrbJtB5.js}

@@ -7,10 +7,11 @@ var Select$1 = require('react-select');
 var defineProperty = require('./defineProperty-ujK-k7aM.js');
 var ReactDOM = require('react-dom');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var index$2 = require('./components/Badge.js');
 var index$1 = require('./components/Icon.js');
-var index$2 = require('./components/Text.js');
-var index$3 = require('./components/Group.js');
-var index$4 = require('./components/Divider.js');
+var index$3 = require('./components/Text.js');
+var index$4 = require('./components/Group.js');
+var index$5 = require('./components/Divider.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -7658,6 +7659,28 @@ SelectControl.__docgenInfo = {
   }
 };
 
+const SelectIndicatorsContainer = props => {
+  const {
+    badgeAppearance,
+    badgeSize,
+    badgeTextSize,
+    showBadge,
+    value
+  } = props.selectProps;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React__namespace.default.createElement(index$2.Badge, {
+    appearance: badgeAppearance,
+    size: badgeSize,
+    textSize: badgeTextSize,
+    value: value.length
+  }) : null, props.children);
+};
+SelectIndicatorsContainer.propTypes = {};
+SelectIndicatorsContainer.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SelectIndicatorsContainer"
+};
+
 const SelectDropdownIndicator = props => {
   const {
     dropdownIcon,
@@ -7722,7 +7745,7 @@ const SelectGroupHeading = props => {
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.GroupHeading, Object.assign({}, props, {
     className: clsx__default.default('select__menu-group-heading', headingFill, headingFillHover)
-  }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  }), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: headingTextSize,
     textWeight: headingTextWeight,
     textColor: headingTextColor
@@ -7857,7 +7880,7 @@ const SelectMultiValueContainer = props => {
     multipleItemFill,
     multipleItemFillHover
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueContainer, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Group, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueContainer, props, /*#__PURE__*/React__namespace.default.createElement(index$4.Group, {
     className: "select__multi-value-wrapper",
     direction: "horizontal",
     alignItems: "center",
@@ -7877,7 +7900,7 @@ const SelectMultiValueLabel = props => {
     multipleItemTextSize,
     multipleItemTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueLabel, props, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueLabel, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: multipleItemTextSize,
     textColor: multipleItemTextColor
   }, props.data.label));
@@ -7917,7 +7940,7 @@ const SelectNoOptions = props => {
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.NoOptionsMessage, Object.assign({}, props, {
     className: clsx__default.default(optionFill, optionBorder, optionBorderType)
-  }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  }), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: noOptionsTextSize,
     textColor: noOptionsTextColor
   }, noOptionsText));
@@ -7991,13 +8014,13 @@ const SelectOption = props => {
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Option, Object.assign({}, props, {
     className: clsx__default.default('select__menu-list-item', isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionFill, optionBorder, optionBorderType, optionFillHover, optionShape)
-  }), optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  }), optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     className: "select__menu-list-item_option",
     size: optionTextSize,
     textColor: optionTextColor
   }, label), isSelected && /*#__PURE__*/React__namespace.default.createElement("div", {
     className: "select__menu-list-item_selected"
-  }, optionSelected), optionAfter, showDivider && /*#__PURE__*/React__namespace.default.createElement(index$4.Divider, {
+  }, optionSelected), optionAfter, showDivider && /*#__PURE__*/React__namespace.default.createElement(index$5.Divider, {
     direction: dividerDirection,
     fill: dividerFill,
     size: dividerSize,
@@ -8076,7 +8099,7 @@ const SelectPlaceholder = props => {
     placeholderTextSize,
     placeholderTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Placeholder, props, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Placeholder, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: placeholderTextSize,
     textColor: placeholderTextColor
   }, props.children));
@@ -8128,7 +8151,7 @@ const SelectSingleValue = props => {
     inputTextSize,
     inputTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.SingleValue, props, data.optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.SingleValue, props, data.optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: inputTextSize,
     textColor: inputTextColor
   }, props.children), data.optionAfter);
@@ -8234,6 +8257,9 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     className,
     after,
     before,
+    badgeAppearance,
+    badgeSize,
+    badgeTextSize,
     hideSelectedOptions,
     menuAfter,
     menuBefore,
@@ -8273,6 +8299,7 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     placeholderTextSize,
     placeholderTextColor,
     set,
+    showBadge,
     value,
     onChange
   } = props;
@@ -8397,75 +8424,77 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     className: clsx__default.default(className, 'select', fillClass, fillHoverClass, shapeClass, borderColorClass, sizeClass, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`),
     classNamePrefix: "select",
     styles: clearStyle,
-    value: value,
     after: after,
+    badgeAppearance: badgeAppearance,
+    badgeSize: badgeSize,
+    badgeTextSize: badgeTextSize,
     before: before,
-    menuAfter: menuAfter,
-    menuBefore: menuBefore,
-    elevation: elevation,
-    isClearable: isClearable,
-    openMenuOnClick: openMenuOnClick,
     clearIcon: clearIcon,
     clearIconFill: clearIconFill,
     clearIconStroke: clearIconStroke,
     closeMenuOnSelect: closeMenuOnSelect ?? false,
     defaultValue: initialValue,
-    showDivider: showDivider,
     dividerDirection: dividerDirection,
     dividerFill: dividerFill,
     dividerSize: dividerSize,
     dropdownIcon: dropdownIcon,
     dropdownIconFill: dropdownIconFill,
     dropdownIconStroke: dropdownIconStroke,
+    elevation: elevation,
     filterOption: filterOption,
-    hideSelectedOptions: hideSelectedOptions,
-    isMulti: isMulti,
-    isSearchable: isSearchable,
-    set: set,
-    optionFill: optionFillClass,
-    menuItemSize: menuItemSize,
-    optionFillHover: optionFillHoverClass,
-    optionTextSize: optionTextSizeClass,
-    optionTextColor: optionTextColorClass,
-    optionShape: optionShapeClass,
-    optionBorder: optionBorderClass,
-    optionBorderType: optionBorderTypeClass,
-    optionSelected: optionSelected,
-    optionBefore: optionBefore,
-    optionAfter: optionAfter,
-    inputBefore: inputBefore,
-    inputAfter: inputAfter,
-    inputFill: inputFillClass,
-    inputTextSize: inputTextSizeClass,
-    inputTextColor: inputTextColorClass,
-    inputCaretColor: inputCaretColorClass,
-    inputShape: inputShapeClass,
-    inputBorderColor: inputBorderColorClass,
-    inputBorderColorHover: inputBorderColorHoverClass,
-    placeholder: placeholder,
-    placeholderTextSize: placeholderTextSize,
-    placeholderTextColor: placeholderTextColor,
-    noOptionsTextSize: noOptionsTextSizeClass,
-    noOptionsTextColor: noOptionsTextColorClass,
-    noOptionsText: noOptionsText,
-    noOptionsFill: optionFillClass,
-    noOptionBorder: optionBorderClass,
-    noOptionBorderType: optionBorderTypeClass,
     headingFill: headingFillClass,
     headingFillHover: headingFillHoverClass,
-    headingTextSize: headingTextSizeClass,
     headingTextColor: headingTextColorClass,
+    headingTextSize: headingTextSizeClass,
     headingTextWeight: headingTextWeightClass,
+    hideSelectedOptions: hideSelectedOptions,
+    inputAfter: inputAfter,
+    inputBefore: inputBefore,
+    inputBorderColor: inputBorderColorClass,
+    inputBorderColorHover: inputBorderColorHoverClass,
+    inputCaretColor: inputCaretColorClass,
+    inputFill: inputFillClass,
+    inputShape: inputShapeClass,
+    inputTextColor: inputTextColorClass,
+    inputTextSize: inputTextSizeClass,
+    menuAfter: menuAfter,
+    menuBefore: menuBefore,
+    menuItemSize: menuItemSize,
     multipleItemFill: multipleItemFill,
     multipleItemFillHover: multipleItemFillHover,
-    multipleItemTextSize: multipleItemTextSizeClass,
-    multipleItemTextColor: multipleItemTextColorClass,
     multipleItemIcon: multipleItemIcon,
     multipleItemIconFill: multipleItemIconFill,
+    multipleItemTextColor: multipleItemTextColorClass,
+    multipleItemTextSize: multipleItemTextSizeClass,
+    noOptionBorder: optionBorderClass,
+    noOptionBorderType: optionBorderTypeClass,
+    noOptionsFill: optionFillClass,
+    noOptionsText: noOptionsText,
+    noOptionsTextColor: noOptionsTextColorClass,
+    noOptionsTextSize: noOptionsTextSizeClass,
+    openMenuOnClick: openMenuOnClick,
+    optionAfter: optionAfter,
+    optionBefore: optionBefore,
+    optionBorder: optionBorderClass,
+    optionBorderType: optionBorderTypeClass,
+    optionFill: optionFillClass,
+    optionFillHover: optionFillHoverClass,
     options: options,
+    optionSelected: optionSelected,
+    optionShape: optionShapeClass,
+    optionTextColor: optionTextColorClass,
+    optionTextSize: optionTextSizeClass,
+    placeholder: placeholder,
+    placeholderTextColor: placeholderTextColor,
+    placeholderTextSize: placeholderTextSize,
     ref: selectRef,
+    set: set,
+    showDivider: showDivider,
+    showBadge: showBadge,
+    value: value,
     components: {
       Control: SelectControl,
+      IndicatorsContainer: SelectIndicatorsContainer,
       ClearIndicator: SelectClearIndicator,
       DropdownIndicator: SelectDropdownIndicator,
       IndicatorSeparator: () => null,
@@ -8481,6 +8510,9 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
       NoOptionsMessage: SelectNoOptions,
       GroupHeading: SelectGroupHeading
     },
+    isClearable: isClearable,
+    isMulti: isMulti,
+    isSearchable: isSearchable,
     onChange: onChange
   });
 });
@@ -8684,6 +8716,7 @@ exports.SelectContainer = SelectContainer;
 exports.SelectControl = SelectControl;
 exports.SelectDropdownIndicator = SelectDropdownIndicator;
 exports.SelectGroupHeading = SelectGroupHeading;
+exports.SelectIndicatorsContainer = SelectIndicatorsContainer;
 exports.SelectInput = SelectInput;
 exports.SelectMenu = SelectMenu;
 exports.SelectMultiValueContainer = SelectMultiValueContainer;

package/dist/components/Accordion.js

@@ -31,6 +31,11 @@ require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.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/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 
@@ -500,6 +505,10 @@ function Accordion(props) {
     prefix: 'accordion_shape_',
     propsKey: 'shape'
   });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
 
   /*
    * paddingHorizontalWrapper="16px"
@@ -511,7 +520,7 @@ function Accordion(props) {
     wrapper: accordionWrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass),
+    className: clsx__default.default(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass),
     style: accordionStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "accordion__wrapper",

package/dist/components/Avatar.js

@@ -35,6 +35,11 @@ require('../constants/componentProps/underline.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.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('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -52,6 +57,7 @@ function Avatar(props) {
     before,
     src,
     type,
+    mode,
     onClick,
     textSize,
     textColor,
@@ -85,7 +91,7 @@ function Avatar(props) {
     return `${firstChar}${secondChar}`;
   }, [firstName, secondName]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'avatar', shapeClass, size && `avatar_size_${size}`, type && `avatar_type_${type}`, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'avatar', shapeClass, mode && `avatar_mode_${mode}`, size && `avatar_size_${size}`, type && `avatar_type_${type}`, onClick && 'cursor_type_pointer'),
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('avatar__wrapper', fillClass, fillHoverClass)

package/dist/components/Badge.js

@@ -40,6 +40,7 @@ function Badge(props) {
     appearance,
     className,
     children,
+    mode,
     textColor,
     textSize,
     value
@@ -80,7 +81,7 @@ function Badge(props) {
     styles: badgeStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fillClass}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
+    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', mode && `badge_mode_${mode}`, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
     style: badgeStyles
   }, children || value && /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: textSize,

package/dist/components/Breadcrumbs.js

@@ -19,22 +19,27 @@ require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
-require('../constants/componentProps/size.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('lodash/castArray');
+require('../constants/componentProps/wrap.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('lodash/castArray');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../constants/componentProps/size.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/underline.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Button.js

@@ -19,18 +19,23 @@ require('react-inlinesvg');
 require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.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/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/underline.js');
-require('lodash/castArray');
-require('lodash/camelCase');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/underline.js');
+require('lodash/castArray');
+require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -132,7 +137,7 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
     label: labelStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass, borderColorClass, borderTypeClass, fillClass || buttonConfig.appearance[appearance] && `fill_${buttonConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || buttonConfig.appearance[appearance] && `fill_hover_${buttonConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) && 'button_type_icon', label && (after || before || icon || iconAfter || iconAfterSrc || iconBefore || iconBeforeSrc || iconSrc) && `button_type_with-icon button_type_with-icon_${size}`),
+    className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass, borderColorClass, borderTypeClass, fillClass || buttonConfig.appearance[appearance] && `fill_${buttonConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || buttonConfig.appearance[appearance] && `fill_hover_${buttonConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) && 'button_type_icon', label && (after || before || icon || iconAfter || iconAfterSrc || iconBefore || iconBeforeSrc || iconSrc) && `button_type_with-icon button_type_with-icon_${size}`),
     "data-tour": dataTour,
     DefaultComponent: "button",
     disabled: isDisabled,

package/dist/components/Cell.js

@@ -30,9 +30,13 @@ 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/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/textAlign.js');
 require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -67,6 +71,7 @@ function Cell(props) {
     valueTag,
     after,
     before,
+    mode,
     size,
     value,
     valueTextSize,
@@ -145,7 +150,7 @@ function Cell(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
+    className: clsx__default.default(className, 'cell', mode && `cell_mode_${mode}`, size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Checkbox.js

@@ -40,6 +40,7 @@ function Checkbox(props) {
     after,
     state,
     id,
+    tag: Tag,
     className,
     checked,
     disabled,
@@ -53,7 +54,8 @@ function Checkbox(props) {
     labelTextColor,
     onBlur,
     onChange,
-    onFocus
+    onFocus,
+    value
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
@@ -91,9 +93,13 @@ function Checkbox(props) {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
-  return /*#__PURE__*/React__default.default.createElement("label", {
-    htmlFor: id,
-    className: clsx__default.default(className, 'checkbox', fillClass, shapeClass)
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'checkbox', fillClass, shapeClass, widthClass),
+    htmlFor: Tag === 'label' && id
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('checkbox__item', stateCheckmarkFillClass)
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -102,6 +108,7 @@ function Checkbox(props) {
     disabled: disabled,
     id: id,
     type: "checkbox",
+    value: value,
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus
@@ -117,18 +124,35 @@ function Checkbox(props) {
   }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "checkbox__desc",
     size: descTextSize,
-    textWeight: descTextWidth,
-    textColor: descTextColor
-  }, desc), after);
+    textColor: descTextColor,
+    textWeight: descTextWidth
+  }, desc), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "checkbox__after"
+  }, after));
 }
 Checkbox.propTypes = {
-  className: PropTypes__default.default.string
+  className: PropTypes__default.default.string,
+  tag: PropTypes__default.default.string
+};
+Checkbox.defaultProps = {
+  tag: 'label'
 };
 Checkbox.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Checkbox",
   "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'label'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "className": {
       "description": "",
       "type": {

package/dist/components/Chips.js

@@ -85,7 +85,7 @@ function Chips(props) {
     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].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance] && `fill_hover_${chipsConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
+    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, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
     style: chipsStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Choice.js

@@ -31,6 +31,11 @@ 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('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/ContextMenu.js

@@ -33,6 +33,11 @@ require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.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/direction.js');
 require('../constants/componentProps/width.js');
 

package/dist/components/CookiesWarning.js

@@ -32,11 +32,15 @@ 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('./Loader.js');
 require('../constants/componentProps/width.js');
 require('../constants/componentProps/direction.js');
 require('../constants/componentProps/stacking.js');
-require('../constants/componentProps/wrap.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');

package/dist/components/DatePicker.js

@@ -41,6 +41,10 @@ require('react-inlinesvg');
 require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Dropdown.js

@@ -105,11 +105,15 @@ function Dropdown(props) {
     prefix: 'elevation_',
     propsKey: 'elevation'
   });
+  const alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'alignment_',
+    propsKey: 'alignment'
+  });
   const {
     styles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'dropdown', set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
+    className: clsx__default.default(className, 'dropdown', alignmentClass, set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
     ref: dropdownRef,
     style: styles
   }, children && /*#__PURE__*/React__default.default.createElement("div", {
@@ -125,7 +129,8 @@ Dropdown.propTypes = {
 };
 Dropdown.defaultProps = {
   animationOpen: 'dropdown_animation_open',
-  animationClose: 'dropdown_animation_close'
+  animationClose: 'dropdown_animation_close',
+  set: 'normal'
 };
 Dropdown.__docgenInfo = {
   "description": "",
@@ -146,6 +151,13 @@ Dropdown.__docgenInfo = {
       },
       "required": false
     },
+    "set": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "required": false
+    },
     "className": {
       "description": "",
       "type": {

package/dist/components/Empty.js

@@ -32,6 +32,11 @@ require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.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('./Loader.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');