@itcase/ui 1.1.6 → 1.1.8

package/dist/components/Pagination.js

@@ -1,24 +1,40 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var ceil = require('lodash/ceil');
-var ReactPaginate = require('react-paginate');
-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);
-var ceil__default = /*#__PURE__*/_interopDefault(ceil);
-var ReactPaginate__default = /*#__PURE__*/_interopDefault(ReactPaginate);
+import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import ceil from 'lodash/ceil';
+import ReactPaginate from 'react-paginate';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-Dgf0LRhx.js';
+import { I as Icon } from '../Icon-Dn2eEZvb.js';
+import { T as Text } from '../Text-BcGbRc14.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import '../hooks/useStyles.js';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import '../Divider-BlBwMHgl.js';
+import '../jsx-runtime-ClDdVO4Q.js';
+import '../Link-ByBzBRDH.js';
+import '../constants/componentProps/fill.js';
+import '../constants/componentProps/shape.js';
+import '../constants/componentProps/type.js';
+import '../constants/componentProps/underline.js';
+import '../constants/componentProps/size.js';
+import 'react-inlinesvg';
+import './Tooltip.js';
+import './Title.js';
+import '../constants/componentProps/textAlign.js';
+import '../constants/componentProps/textColor.js';
+import '../constants/componentProps/textGradient.js';
+import '../constants/componentProps/textStyle.js';
+import '../constants/componentProps/textWeight.js';
+import '../constants/componentProps/titleSize.js';
+import '../constants/componentProps/wrap.js';
+import '../constants/componentProps/textSize.js';
 
 function Pagination(props) {
   const {
@@ -32,24 +48,73 @@ function Pagination(props) {
     pageRangeDisplayed,
     previousLabel,
     nextLabel,
+    isPageCount,
+    pageCountArray,
+    pageCountDesc,
+    pageCountDescTextColor,
+    pageCountDescTextSize,
+    pageCountInput,
+    pageCountInputTextColor,
+    pageCountInputTextSize,
+    pageCountInputIcon,
+    pageCountInputIconFill,
+    pageCountInputIconFillSize,
+    pageCountInputIconColor,
+    pageCountDropdownAlignment,
+    pageCountDropdownElevation,
+    pageCountDropdownFill,
+    pageCountDropdownSet,
+    pageCountDropdownShape,
+    pageCountDropdownItemDividerDirection,
+    pageCountDropdownItemDividerFill,
+    pageCountDropdownItemDividerSize,
+    pageCountDropdownItemShowDivider,
+    onPerPageCountChange,
+    pageCountDropdownItemFill,
+    pageCountDropdownItemFillActive,
+    pageCountDropdownItemFillActiveHover,
+    pageCountDropdownItemFillHover,
+    pageCountDropdownItemLabel,
+    pageCountDropdownItemLabelColor,
+    pageCountDropdownItemLabelColorActive,
+    pageCountDropdownItemLabelSize,
+    pageCountDropdownItemLabelWrap,
+    pageCountDropdownItemSet,
+    isPageCountDropdownReversed,
     onPageChange
   } = props;
-  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+  const [showPagination, setShowPagination] = useState(true);
+  const [activeDropdownItem, setActiveDropdownItem] = useState(10);
+  // Toggle command menu
+  const onClickCommandMenuButton = useCallback(event => {
+    setIsOpenDropdown(state => !state);
+  }, []);
+  const handleDropdownItemClick = useCallback(item => {
+    onPerPageCountChange(item);
+    setActiveDropdownItem(item);
+    setIsOpenDropdown(false);
+  }, [onPerPageCountChange]);
+  const justifyContentClass = useDeviceTargetClass(props, {
     prefix: 'pagination_justify-content_',
     propsKey: 'justifyContent'
   });
+  const gapClass = useDeviceTargetClass(props, {
+    prefix: 'gap_',
+    propsKey: 'gap'
+  });
 
   // Calculate count of pages for all items
-  const paginationPagesCount = React.useMemo(() => {
+  const paginationPagesCount = useMemo(() => {
     if (allItemsCount && allItemsCount > 0) {
       // Round up. "perPageCount" may be is a query params "limit"
-      return ceil__default.default(allItemsCount / perPageCount);
+      return ceil(allItemsCount / perPageCount);
     }
     return 0;
   }, [allItemsCount, perPageCount]);
 
   // Index for pagination state
-  const paginationPageIndex = React.useMemo(() => {
+  const paginationPageIndex = useMemo(() => {
     const intPageNumber = parseInt(pageNumber);
     // For pagination need index of page, not number
     if (!isNaN(intPageNumber) && intPageNumber > 1) {
@@ -57,73 +122,143 @@ function Pagination(props) {
     }
     return 0;
   }, [pageNumber]);
-  if (paginationPagesCount <= 1) {
-    return null;
-  }
-  return /*#__PURE__*/React__default.default.createElement(ReactPaginate__default.default, {
-    containerClassName: clsx__default.default(className, 'pagination', justifyContentClass)
-    // page item
-    ,
-    pageClassName: "pagination__item",
-    pageLinkClassName: "pagination__item-link",
+  useEffect(() => {
+    if (paginationPagesCount <= 1) {
+      setShowPagination(false);
+      return;
+    }
+    setShowPagination(true);
+  }, [paginationPagesCount]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "pagination"
+  }, showPagination && /*#__PURE__*/React__default.createElement(ReactPaginate, {
+    activeClassName: "pagination__item_state_active cursor_type_default",
+    breakClassName: "pagination__item pagination__item_break",
     disabledClassName: "pagination__item_state_disabled cursor_type_default",
     disabledLinkClassName: "pagination__item_state_disabled",
-    activeClassName: "pagination__item_state_active cursor_type_default",
+    marginPagesDisplayed: marginPagesDisplayed,
+    nextClassName: "pagination__item pagination__item_next",
+    pageCount: paginationPagesCount,
+    pageLinkClassName: "pagination__item-link",
+    pageRangeDisplayed: pageRangeDisplayed,
+    previousClassName: "pagination__item pagination__item_previous",
+    onPageChange: onPageChange,
     activeLinkClassName: "pagination__item-link_state_active"
     // previous button
     ,
     previousLabel: previousLabel,
-    previousClassName: "pagination__item pagination__item_previous",
-    previousLinkClassName: "pagination__item-link"
-    // next button
+    breakLinkClassName: "pagination__item-link"
+    // pages settings
     ,
-    nextLabel: nextLabel,
-    nextClassName: "pagination__item pagination__item_next",
+    forcePage: paginationPageIndex,
+    containerClassName: clsx(className, 'pagination__container', justifyContentClass)
+    // page item
+    ,
+    pageClassName: "pagination__item",
     nextLinkClassName: "pagination__item-link"
     // break element
     ,
     breakLabel: "...",
-    breakClassName: "pagination__item pagination__item_break",
-    breakLinkClassName: "pagination__item-link"
-    // pages settings
+    previousLinkClassName: "pagination__item-link"
+    // next button
     ,
-    forcePage: paginationPageIndex,
-    pageCount: paginationPagesCount,
-    marginPagesDisplayed: marginPagesDisplayed,
-    pageRangeDisplayed: pageRangeDisplayed,
-    onPageChange: onPageChange
-  });
+    nextLabel: nextLabel
+  }), isPageCount && /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'pagination__count', gapClass)
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    size: pageCountDescTextSize,
+    textColor: pageCountDescTextColor
+  }, pageCountDesc), /*#__PURE__*/React__default.createElement("div", {
+    className: "pagination__input",
+    onClick: onClickCommandMenuButton
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    size: pageCountInputTextSize,
+    textColor: pageCountInputTextColor
+  }, activeDropdownItem), /*#__PURE__*/React__default.createElement(Icon, {
+    fill: pageCountInputIconFill,
+    fillSize: pageCountInputIconFillSize,
+    iconFill: pageCountInputIconColor,
+    SvgImage: pageCountInputIcon
+  }), /*#__PURE__*/React__default.createElement(Dropdown, {
+    alignment: pageCountDropdownAlignment,
+    elevation: pageCountDropdownElevation,
+    fill: pageCountDropdownFill,
+    isOpen: isOpenDropdown,
+    set: pageCountDropdownSet,
+    setIsOpen: setIsOpenDropdown,
+    shape: pageCountDropdownShape
+  }, (isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray).map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.createElement(DropdownItem, {
+    dividerDirection: pageCountDropdownItemDividerDirection,
+    dividerFill: pageCountDropdownItemDividerFill,
+    dividerSize: pageCountDropdownItemDividerSize,
+    fill: pageCountDropdownItemFill,
+    fillActive: pageCountDropdownItemFillActive,
+    fillActiveHover: pageCountDropdownItemFillActiveHover,
+    fillHover: pageCountDropdownItemFillHover,
+    isActive: true,
+    key: item,
+    label: item,
+    labelTextColor: pageCountDropdownItemLabelColor,
+    labelTextColorActive: pageCountDropdownItemLabelColorActive,
+    labelTextSize: pageCountDropdownItemLabelSize,
+    labelTextWrap: pageCountDropdownItemLabelWrap,
+    set: pageCountDropdownItemSet,
+    showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
+    onClick: () => handleDropdownItemClick(item)
+  }) : /*#__PURE__*/React__default.createElement(DropdownItem, {
+    dividerDirection: pageCountDropdownItemDividerDirection,
+    dividerFill: pageCountDropdownItemDividerFill,
+    dividerSize: pageCountDropdownItemDividerSize,
+    fill: pageCountDropdownItemFill,
+    fillHover: pageCountDropdownItemFillHover,
+    isActive: false,
+    key: item,
+    label: item,
+    labelTextColor: pageCountDropdownItemLabelColor,
+    labelTextColorActive: pageCountDropdownItemLabelColorActive,
+    labelTextSize: pageCountDropdownItemLabelSize,
+    labelTextWrap: pageCountDropdownItemLabelWrap,
+    set: pageCountDropdownItemSet,
+    showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
+    onClick: () => handleDropdownItemClick(item)
+  }))))));
 }
 Pagination.propTypes = {
   /**
    *Количество всех элементов
    */
-  allItemsCount: PropTypes__default.default.number,
+  allItemsCount: PropTypes.number,
+  isPageCountDropdownReversed: PropTypes.bool,
   /**
    * Количество страниц, отображаемых после троеточия
    */
-  marginPagesDisplayed: PropTypes__default.default.number,
+  marginPagesDisplayed: PropTypes.number,
   /**
    *Кнопка навигации вперед
    */
-  nextLabel: PropTypes__default.default.element,
+  nextLabel: PropTypes.element,
+  pageCountArray: PropTypes.array,
+  pageCountDropdownItemLabelColorActive: PropTypes.string,
   /**
    * Количество страниц, отображаемых до троеточия
    */
-  pageRangeDisplayed: PropTypes__default.default.number,
+  pageRangeDisplayed: PropTypes.number,
   /**
    * Количество элементов, отображаемых на станице
    */
-  perPageCount: PropTypes__default.default.number,
+  perPageCount: PropTypes.number,
   /**
    * Кнопка навигации назад
    */
-  previousLabel: PropTypes__default.default.element
+  previousLabel: PropTypes.element
 };
 Pagination.defaultProps = {
   pageNumber: 0,
   perPageCount: 0,
-  allItemsCount: 0
+  allItemsCount: 0,
+  pageCountArray: [10, 20, 50, 100],
+  isPageCountDropdownReversed: false,
+  pageCountDropdownItemLabelColorActive: ''
 };
 Pagination.__docgenInfo = {
   "description": "",
@@ -159,6 +294,39 @@ Pagination.__docgenInfo = {
       },
       "required": false
     },
+    "pageCountArray": {
+      "defaultValue": {
+        "value": "[10, 20, 50, 100]",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    },
+    "isPageCountDropdownReversed": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "pageCountDropdownItemLabelColorActive": {
+      "defaultValue": {
+        "value": "''",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "marginPagesDisplayed": {
       "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u043F\u043E\u0441\u043B\u0435 \u0442\u0440\u043E\u0435\u0442\u043E\u0447\u0438\u044F",
       "type": {
@@ -190,4 +358,4 @@ Pagination.__docgenInfo = {
   }
 };
 
-exports.Pagination = Pagination;
+export { Pagination };

package/dist/components/Radio.js

@@ -1,32 +1,18 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var index = require('./Text.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textWeight.js');
-require('../hooks/useStyles.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/castArray');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { T as Text } from '../Text-BcGbRc14.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import '../jsx-runtime-ClDdVO4Q.js';
+import '../hooks/useStyles.js';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/castArray';
 
 const radioConfig = {
   state: {},
@@ -56,90 +42,90 @@ function Radio(props) {
     tag: Tag,
     onChange
   } = props;
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'radio_shape_',
     propsKey: 'shape'
   });
-  const stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateShapeClass = useDeviceTargetClass(props, {
     prefix: 'radio__state_shape_',
     propsKey: 'stateShape'
   });
-  const stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateFillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: checked ? 'stateFillChecked' : 'stateFill'
   });
-  const stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateFillDisabledClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
   });
-  const stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateCheckmarkFillClass = useDeviceTargetClass(props, {
     prefix: 'radio_checkmark_fill_',
     propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
   });
-  const stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'stateBorderWidth'
   });
-  const stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
   });
-  const stateBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorHoverClass = useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover'
   });
-  const stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorDisabledClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
-  return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'radio', fillClass, shapeClass),
+  return /*#__PURE__*/React__default.createElement(Tag, {
+    className: clsx(className, 'radio', fillClass, shapeClass),
     htmlFor: id
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio__item', stateCheckmarkFillClass || radioConfig.appearance[appearance] && `radio_checkmark_fill_${radioConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
-  }, /*#__PURE__*/React__default.default.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('radio__item', stateCheckmarkFillClass || radioConfig.appearance[appearance]?.stateCheckmarkFill && `radio_checkmark_fill_${radioConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, /*#__PURE__*/React__default.createElement("input", {
     checked: checked,
     className: "radio__input",
     disabled: disabled,
     id: id,
     type: "radio",
     onChange: onChange
-  }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioConfig.appearance[appearance] && `border-color_${radioConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioConfig.appearance[appearance] && `radio__state_shape_${radioConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioConfig.appearance[appearance] && `border-width_${radioConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
-  }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioConfig.appearance[appearance]?.stateBorderColor && `border-color_${radioConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioConfig.appearance[appearance]?.stateShape && `radio__state_shape_${radioConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioConfig.appearance[appearance]?.stateBorderWidth && `border-width_${radioConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, "\xA0"), /*#__PURE__*/React__default.createElement("div", {
     className: "radio__state-checkmark"
-  }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
+  }, "\xA0")), label && /*#__PURE__*/React__default.createElement(Text, {
     className: "radio__label",
-    size: labelTextSize || radioConfig.appearance[appearance].labelTextSize,
-    textColor: labelTextColor || radioConfig.appearance[appearance].labelTextColor,
+    size: labelTextSize || radioConfig.appearance[appearance]?.labelTextSize,
+    textColor: labelTextColor || radioConfig.appearance[appearance]?.labelTextColor,
     textWeight: labelTextWidth
-  }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
+  }, label), desc && /*#__PURE__*/React__default.createElement(Text, {
     className: "radio__desc",
-    size: descTextSize || radioConfig.appearance[appearance].descTextSize,
-    textColor: descTextColor || radioConfig.appearance[appearance].descTextColor,
+    size: descTextSize || radioConfig.appearance[appearance]?.descTextSize,
+    textColor: descTextColor || radioConfig.appearance[appearance]?.descTextColor,
     textWeight: descTextWidth
   }, desc));
 }
 Radio.propTypes = {
-  appearance: PropTypes__default.default.string,
-  checked: PropTypes__default.default.bool,
-  className: PropTypes__default.default.string,
-  desc: PropTypes__default.default.string,
-  descTextColor: PropTypes__default.default.string,
-  descTextSize: PropTypes__default.default.string,
-  descTextWidth: PropTypes__default.default.string,
-  disabled: PropTypes__default.default.bool,
-  id: PropTypes__default.default.string,
-  label: PropTypes__default.default.string,
-  labelTextColor: PropTypes__default.default.string,
-  labelTextSize: PropTypes__default.default.string,
-  labelTextWidth: PropTypes__default.default.string,
-  tag: PropTypes__default.default.string,
-  onChange: PropTypes__default.default.func
+  appearance: PropTypes.string,
+  checked: PropTypes.bool,
+  className: PropTypes.string,
+  desc: PropTypes.string,
+  descTextColor: PropTypes.string,
+  descTextSize: PropTypes.string,
+  descTextWidth: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  labelTextColor: PropTypes.string,
+  labelTextSize: PropTypes.string,
+  labelTextWidth: PropTypes.string,
+  tag: PropTypes.string,
+  onChange: PropTypes.func
 };
 Radio.defaultProps = {
   shape: 'circular',
@@ -269,5 +255,4 @@ Radio.__docgenInfo = {
   }
 };
 
-exports.Radio = Radio;
-exports.radioConfig = radioConfig;
+export { Radio, radioConfig };