@itcase/ui 1.0.96 → 1.0.99

package/dist/components/FormField.js

@@ -15,7 +15,7 @@ require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 var index$4 = require('./Switch.js');
-var SelectContainer = require('../SelectContainer-umrbJtB5.js');
+var index$5 = require('./Select.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/width.js');
 require('lodash/maxBy');
@@ -44,8 +44,8 @@ require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
 require('react-select');
-require('../defineProperty-ujK-k7aM.js');
 require('react-dom');
+require('../floating-ui.dom-D_Zct5p2.js');
 require('./Badge.js');
 require('./Group.js');
 require('../constants/componentProps/stacking.js');
@@ -529,7 +529,7 @@ function SelectField(props) {
     selectInputTextSize,
     selectInputTextColor
   } = props;
-  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(SelectContainer.SelectInput, {
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$5.SelectInput, {
     className: clsx__default.default(selectInputClass, className),
     fill: selectFill,
     shape: selectShape,

package/dist/components/Grid.js

@@ -36,6 +36,7 @@ function Grid(props) {
     children,
     className,
     horizontalResizing,
+    scroll,
     onClick,
     type,
     useGridSystem,
@@ -101,7 +102,7 @@ function Grid(props) {
     gridWrapperInner: gridWrapperInnerStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
+    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, scroll && `grid_scroll_${scroll}`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
     "data-tour": dataTour,
     id: id,
     style: gridStyles,

package/dist/components/Group.js

@@ -26,8 +26,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const groupConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    groupConfig.appearance = newComponent;
+  }
+};
 function Group(props) {
   const {
+    appearance,
     id,
     children,
     className,
@@ -116,7 +123,7 @@ function Group(props) {
     wrapper: groupWrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass || groupConfig.appearance[appearance] && `group_direction_${groupConfig.appearance[appearance].direction}`.replace(/([A-Z])/g, '-$1').toLowerCase(), alignClass, fillClass || groupConfig.appearance[appearance] && `fill_${groupConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || groupConfig.appearance[appearance] && `fill_hover_${groupConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass || groupConfig.appearance[appearance] && `border-color_${groupConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass || groupConfig.appearance[appearance] && `border-width_${groupConfig.appearance[appearance].borderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass, elevationClass, justifyContentClass),
     "data-tour": dataTour,
     htmlFor: htmlFor,
     id: id,
@@ -305,3 +312,4 @@ Group.__docgenInfo = {
 };
 
 exports.Group = Group;
+exports.groupConfig = groupConfig;

package/dist/components/Input.js

@@ -20,10 +20,15 @@ const inputConfig = {
   state: {},
   setState: newComponent => {
     inputConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputConfig.appearance = newComponent;
   }
 };
 const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
   const {
+    appearance,
     state,
     id,
     index,
@@ -109,7 +114,7 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
   // }
 
   return /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass, textSizeClass, weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass, !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputConfig.appearance[appearance] && `input_shape_${inputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputConfig.appearance[appearance] && `text_size_${inputConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputConfig.appearance[appearance] && `input_size_${inputConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputConfig.appearance[appearance]?.borderColor && `border-color_${inputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.appearance[appearance]?.textColor && `text-color_${inputConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     type: type,
     id: id,
     index: index,

package/dist/components/InputPassword.js

@@ -48,10 +48,15 @@ const inputPasswordConfig = {
   state: {},
   setState: newComponent => {
     inputPasswordConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputPasswordConfig.appearance = newComponent;
   }
 };
 function InputPassword(props) {
   const {
+    appearance,
     state,
     id,
     iconFill,
@@ -125,7 +130,7 @@ function InputPassword(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: "input-password"
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input-password__input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderTextColorClass, shapeClass, textSizeClass, weightClass, widthClass, borderWidthClass, sizeClass, borderColorClass || inputPasswordConfig.state[state]?.borderColor && `border-color_${inputPasswordConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputPasswordConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputPasswordConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputPasswordConfig.state[state]?.textColor && `text-color_${inputPasswordConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default(className, 'input-password__input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderTextColorClass, shapeClass || inputPasswordConfig.appearance[appearance] && `input-password__input_shape_${inputPasswordConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputPasswordConfig.appearance[appearance] && `text_size_${inputPasswordConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, borderWidthClass, sizeClass || inputPasswordConfig.appearance[appearance] && `input-password__input_size_${inputPasswordConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputPasswordConfig.state[state]?.borderColor && `border-color_${inputPasswordConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.borderColor && `border-color_${inputPasswordConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputPasswordConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputPasswordConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputPasswordConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputPasswordConfig.state[state]?.textColor && `text-color_${inputPasswordConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.textColor && `text-color_${inputPasswordConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     type: inputType,
     id: id,
     disabled: disabled,

package/dist/components/Label.js

@@ -4,6 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index = require('./Text.js');
+var index$1 = require('./Tooltip.js');
 var borderType = require('../constants/componentProps/borderType.js');
 var size = require('../constants/componentProps/size.js');
 var fill = require('../constants/componentProps/fill.js');
@@ -17,11 +18,15 @@ 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('./Title.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('lodash/castArray');
+require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -48,6 +53,7 @@ function Label(props) {
     labelTextWrap,
     labelTextColor,
     labelTextColorHover,
+    labelTextWeight,
     mode,
     set,
     before,
@@ -55,8 +61,24 @@ function Label(props) {
     dataTour,
     type,
     cursor,
+    showTooltip,
+    tooltipAlignment,
+    tooltipText,
+    tooltipTextSize,
+    tooltipTitle,
+    tooltipTitleSize,
+    tooltipAppearance,
+    tooltipContent,
+    tooltipArrowPosition,
     onClick
   } = props;
+  const tooltipRef = React.useRef(null);
+  const onMouseEnterLabel = React.useCallback(() => {
+    tooltipRef.current?.openTooltip();
+  }, []);
+  const onMouseLeaveLabel = React.useCallback(() => {
+    tooltipRef.current?.closeTooltip();
+  }, []);
   const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
@@ -104,26 +126,48 @@ function Label(props) {
   const {
     styles: labelStyles
   } = useStyles.useStyles(props);
+  const labelAppearanceItem = labelConfig.appearance[appearance] || {};
+  // const {
+  //   fill: labelAppearanceFill,
+  //   fillHover: labelAppearanceFillHover,
+  //   labelTextColor: labelAppearanceLabelTextColor,
+  //   labelTextColorHover: labelAppearanceLabelTextColorHover,
+  // } = labelAppearanceItem
+
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     style: labelStyles,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnterLabel,
+    onMouseLeave: onMouseLeaveLabel
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "label__label",
     size: labelTextSize,
-    textColor: labelTextColor || labelConfig.appearance[appearance]?.labelTextColor,
-    textColorHover: labelTextColorHover || labelConfig.appearance[appearance]?.labelTextColorHover,
+    textColor: labelTextColor || labelAppearanceItem.labelTextColor,
+    textColorHover: labelTextColorHover || labelAppearanceItem.labelTextColorHover,
+    textWeight: labelTextWeight || labelAppearanceItem.labelTextWeight,
     textWrap: labelTextWrap
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__label"
-  }, label), children), after);
+  }, label), children, showTooltip && /*#__PURE__*/React__default.default.createElement(index$1.Tooltip, {
+    alignment: tooltipAlignment,
+    appearance: tooltipAppearance,
+    arrowPosition: tooltipArrowPosition,
+    className: "label__tooltip",
+    ref: tooltipRef,
+    text: tooltipText,
+    textSize: tooltipTextSize,
+    title: tooltipTitle,
+    titleSize: tooltipTitleSize
+  }, tooltipContent)), after);
 }
 Label.propTypes = {
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
+  after: PropTypes__default.default.any,
+  appearance: PropTypes__default.default.string,
+  before: PropTypes__default.default.any,
   border: PropTypes__default.default.string,
   borderDesktop: PropTypes__default.default.string,
   borderMobile: PropTypes__default.default.string,
@@ -132,26 +176,47 @@ Label.propTypes = {
   borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
   borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
   borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  cursor: PropTypes__default.default.string,
+  dataTour: PropTypes__default.default.string,
   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),
-  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,
+  labelTextColor: PropTypes__default.default.string,
+  labelTextColorHover: PropTypes__default.default.string,
   labelTextSize: PropTypes__default.default.oneOf(size.default),
   labelTextSizeDesktop: PropTypes__default.default.oneOf(size.default),
   labelTextSizeMobile: PropTypes__default.default.oneOf(size.default),
   labelTextSizeTablet: PropTypes__default.default.oneOf(size.default),
-  labelTextColor: PropTypes__default.default.string,
+  labelTextWeight: PropTypes__default.default.string,
+  labelTextWrap: PropTypes__default.default.string,
+  mode: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  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),
+  showTooltip: PropTypes__default.default.bool,
   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),
   textAlign: PropTypes__default.default.oneOf(textAlign.default),
-  type: PropTypes__default.default.string
+  tooltipAlignment: PropTypes__default.default.string,
+  tooltipAppearance: PropTypes__default.default.string,
+  tooltipArrowPosition: PropTypes__default.default.string,
+  tooltipContent: PropTypes__default.default.any,
+  tooltipText: PropTypes__default.default.string,
+  tooltipTextSize: PropTypes__default.default.string,
+  tooltipTitle: PropTypes__default.default.string,
+  tooltipTitleSize: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func,
+  onMouseLeave: PropTypes__default.default.func
 };
 Label.defaultProps = {
   label: 'Label'
@@ -172,20 +237,27 @@ Label.__docgenInfo = {
       },
       "required": false
     },
-    "children": {
+    "after": {
       "description": "",
       "type": {
         "name": "any"
       },
       "required": false
     },
-    "className": {
+    "appearance": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
     "border": {
       "description": "",
       "type": {
@@ -250,6 +322,34 @@ Label.__docgenInfo = {
       },
       "required": false
     },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "cursor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "dataTour": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "fill": {
       "description": "",
       "type": {
@@ -286,82 +386,124 @@ Label.__docgenInfo = {
       },
       "required": false
     },
-    "shape": {
+    "labelTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextColorHover": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextSize": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "shapeProps"
+        "value": "sizeProps"
       },
       "required": false
     },
-    "shapeDesktop": {
+    "labelTextSizeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "shapeProps"
+        "value": "sizeProps"
       },
       "required": false
     },
-    "shapeMobile": {
+    "labelTextSizeMobile": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "shapeProps"
+        "value": "sizeProps"
       },
       "required": false
     },
-    "shapeTablet": {
+    "labelTextSizeTablet": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "shapeProps"
+        "value": "sizeProps"
       },
       "required": false
     },
-    "labelTextSize": {
+    "labelTextWeight": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextWrap": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "mode": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "shape": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "shapeProps"
       },
       "required": false
     },
-    "labelTextSizeDesktop": {
+    "shapeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "shapeProps"
       },
       "required": false
     },
-    "labelTextSizeMobile": {
+    "shapeMobile": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "shapeProps"
       },
       "required": false
     },
-    "labelTextSizeTablet": {
+    "shapeTablet": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "shapeProps"
       },
       "required": false
     },
-    "labelTextColor": {
+    "showTooltip": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false
     },
@@ -410,12 +552,89 @@ Label.__docgenInfo = {
       },
       "required": false
     },
+    "tooltipAlignment": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipAppearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipArrowPosition": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipContent": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "tooltipText": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTitle": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTitleSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "type": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseEnter": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseLeave": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
     }
   }
 };

package/dist/components/RadioButton.js

@@ -32,10 +32,15 @@ const radioButtonConfig = {
   state: {},
   setState: newComponent => {
     radioButtonConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    radioButtonConfig.appearance = newComponent;
   }
 };
 function RadioButton(props) {
   const {
+    appearance,
     state,
     id,
     className,
@@ -96,7 +101,7 @@ function RadioButton(props) {
     htmlFor: id,
     className: clsx__default.default(className, 'radio-button', fillClass, shapeClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__item', stateCheckmarkFillClass)
+    className: clsx__default.default('radio-button__item', stateCheckmarkFillClass || radioButtonConfig.appearance[appearance] && `radio-button_checkmark_fill_${radioButtonConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, /*#__PURE__*/React__default.default.createElement("input", {
     checked: checked,
     className: "radio-button__input",
@@ -105,18 +110,18 @@ function RadioButton(props) {
     type: "radio",
     onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateBorderColorHoverClass, stateShapeClass, stateBorderWidthClass)
+    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioButtonConfig.appearance[appearance] && `border-color_${radioButtonConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioButtonConfig.appearance[appearance] && `radio-button__state_shape_${radioButtonConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioButtonConfig.appearance[appearance] && `border-width_${radioButtonConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
     className: "radio-button__state-checkmark"
   }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "radio-button__label",
-    size: labelTextSize,
-    textWeight: labelTextWidth,
-    textColor: labelTextColor
+    size: labelTextSize || radioButtonConfig.appearance[appearance].labelTextSize,
+    textColor: labelTextColor || radioButtonConfig.appearance[appearance].labelTextColor,
+    textWeight: labelTextWidth
   }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "radio-button__desc",
-    size: descTextSize,
-    textColor: descTextColor,
+    size: descTextSize || radioButtonConfig.appearance[appearance].descTextSize,
+    textColor: descTextColor || radioButtonConfig.appearance[appearance].descTextColor,
     textWeight: descTextWidth
   }, desc));
 }