@itcase/ui 1.0.42 → 1.0.44

package/dist/components/MenuItem.js

@@ -15,7 +15,7 @@ var textStyle = require('../constants/componentProps/textStyle.js');
 var textWeight = require('../constants/componentProps/textWeight.js');
 var type = require('../constants/componentProps/type.js');
 var underline = require('../constants/componentProps/underline.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var size = require('../constants/componentProps/size.js');
 require('lodash/camelCase');
@@ -33,104 +33,107 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var menuItemConfig = {
+const menuItemConfig = {
   appearance: {},
-  setAppearance: function setAppearance(newComponent) {
+  setAppearance: newComponent => {
     menuItemConfig.appearance = newComponent;
   }
 };
 function MenuItem(props) {
-  var isActive = props.isActive,
-    isHover = props.isHover,
-    appearance = props.appearance,
-    after = props.after,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    href = props.href,
-    link = props.link,
-    set = props.set,
-    rel = props.rel,
-    desc = props.desc,
-    descTextGradient = props.descTextGradient,
-    descTextSize = props.descTextSize,
-    descTextWeight = props.descTextWeight,
-    descTextColor = props.descTextColor,
-    descTextWrap = props.descTextWrap,
-    descTextColorHover = props.descTextColorHover,
-    descTextStyle = props.descTextStyle,
-    label = props.label,
-    target = props.target,
-    textColor = props.textColor,
-    textColorHover = props.textColorHover,
-    textColorActive = props.textColorActive,
-    textGradient = props.textGradient,
-    textSize = props.textSize,
-    textWrap = props.textWrap,
-    textStyle = props.textStyle,
-    textWeight = props.textWeight,
-    underline = props.underline,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter;
-  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    isActive,
+    isHover,
+    appearance,
+    after,
+    before,
+    children,
+    className,
+    href,
+    link,
+    set,
+    rel,
+    desc,
+    descTextGradient,
+    descTextSize,
+    descTextWeight,
+    descTextColor,
+    descTextWrap,
+    descTextColorHover,
+    descTextStyle,
+    label,
+    target,
+    textColor,
+    textColorHover,
+    textColorActive,
+    textGradient,
+    textSize,
+    textWrap,
+    textStyle,
+    textWeight,
+    underline,
+    onClick,
+    onMouseEnter
+  } = props;
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
   });
-  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'align'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'menu-item_direction_',
     propsKey: 'direction'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_active_',
     propsKey: 'fillActive'
   });
-  var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_active_hover_',
     propsKey: 'fillActiveHover'
   });
-  var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_disabled_',
     propsKey: 'fillDisabled'
   });
-  var linkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const linkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'linkFill'
   });
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'menu-item_size_',
     propsKey: 'size'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'menu-item_shape_',
     propsKey: 'shape'
   });
-  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'menu-item_justify-content_',
     propsKey: 'justifyContent'
   });
-  var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'menu-item_type_',
     propsKey: 'type'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var _useStyles = useStyles.useStyles(props),
-    menuItem = _useStyles.styles;
+  const {
+    styles: menuItem
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass || appearance && ("fill_" + menuItemConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_" + set, justifyContentClass),
+    className: clsx__default.default('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass || appearance && `fill_${menuItemConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && `menu-item_set_${set}`, justifyContentClass),
     style: menuItem,
     onClick: onClick,
     onMouseEnter: onMouseEnter

package/dist/components/Modal.js

@@ -5,7 +5,7 @@ var PropTypes = require('prop-types');
 var ReactDOM = require('react-dom');
 var clsx = require('clsx');
 var index = require('./Fader.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$1 = require('./Loader.js');
 require('../constants/componentProps/fill.js');
@@ -33,21 +33,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var getOrCreateModalElement = function getOrCreateModalElement(modalQuerySelector, className) {
-  if (className === void 0) {
-    className = '';
-  }
+const getOrCreateModalElement = (modalQuerySelector, className = '') => {
   // prettier-ignore
-  var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
-  var modalElement = document.querySelector(modalQuerySelector);
+  const classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
+  let modalElement = document.querySelector(modalQuerySelector);
   if (!modalElement) {
     // Add modal element into the DOM on mount.
     modalElement = document.createElement('div');
     modalElement.setAttribute('id', 'modal-global');
     modalElement.classList.add('modal');
     if (classList.length) {
-      var _modalElement$classLi;
-      (_modalElement$classLi = modalElement.classList).add.apply(_modalElement$classLi, classList);
+      modalElement.classList.add(...classList);
     }
     document.body.prepend(modalElement);
   }
@@ -55,41 +51,39 @@ var getOrCreateModalElement = function getOrCreateModalElement(modalQuerySelecto
 };
 
 // Modal component that is an abstraction around the portal API.
-var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
-  var children = props.children,
-    className = props.className,
-    closeButton = props.closeButton,
-    contentClassName = props.contentClassName,
-    id = props.id,
-    isFader = props.isFader,
-    faderFill = props.faderFill,
-    faderFillGradient = props.faderFillGradient,
-    faderOpacity = props.faderOpacity,
-    initialIsOpen = props.isOpen,
-    isScrollOnOpen = props.isScrollOnOpen,
-    isSetFocusOnOpen = props.isSetFocusOnOpen,
-    modalQuerySelector = props.modalQuerySelector,
-    isOutsideClose = props.isOutsideClose,
-    onCloseModal = props.onCloseModal,
-    onOpenModal = props.onOpenModal;
+const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
+  const {
+    children,
+    className,
+    closeButton,
+    contentClassName,
+    id,
+    isFader,
+    faderFill,
+    faderFillGradient,
+    faderOpacity,
+    isOpen: initialIsOpen,
+    isScrollOnOpen,
+    isSetFocusOnOpen,
+    modalQuerySelector,
+    isOutsideClose,
+    onCloseModal,
+    onOpenModal
+  } = props;
 
   // Query DOM element
-  var _useState = React.useState(null),
-    modalElement = _useState[0],
-    setModalElement = _useState[1];
-  React.useLayoutEffect(function () {
-    var element = getOrCreateModalElement(modalQuerySelector, className);
+  const [modalElement, setModalElement] = React.useState(null);
+  React.useLayoutEffect(() => {
+    const element = getOrCreateModalElement(modalQuerySelector, className);
     setModalElement(element);
     if (element) {
       addModalProps(element);
     }
   }, []);
-  var modalContentRef = React.useRef(null);
-  var modalFaderRef = React.useRef(null);
-  var _useState2 = React.useState(initialIsOpen),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var addModalProps = React.useCallback(function (element) {
+  const modalContentRef = React.useRef(null);
+  const modalFaderRef = React.useRef(null);
+  const [isOpen, setIsOpen] = React.useState(initialIsOpen);
+  const addModalProps = React.useCallback(element => {
     // Change class need in "useEffect"
     if (isOpen) {
       // Show modal
@@ -106,16 +100,14 @@ var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props,
       // "setTimeout" in this implementation is needs for set focus on modal
       // after "onMouseDown" event on button
       if (isSetFocusOnOpen) {
-        setTimeout(function () {
-          return modalContentRef.current.focus();
-        }, 0);
+        setTimeout(() => modalContentRef.current.focus(), 0);
       }
     } else if (!element.children.length) {
       // Hide modal if has no children
       element.classList.remove('modal_state_visible');
     }
   }, [isOpen, isSetFocusOnOpen]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!modalElement) {
       return;
     }
@@ -123,7 +115,7 @@ var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props,
   }, [isOpen]); // eslint-disable-line
 
   // Show modal with children content
-  var openModal = React.useCallback(function () {
+  const openModal = React.useCallback(() => {
     setIsOpen(true);
 
     // Callback
@@ -147,11 +139,8 @@ var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props,
   }, [onOpenModal]);
 
   // Hide modal and unmount children content
-  var closeModal = React.useCallback(function (event) {
-    if (event === void 0) {
-      event = {};
-    }
-    var hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
+  const closeModal = React.useCallback((event = {}) => {
+    const hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
     if (hasRelatedTarget) {
       return event;
     }
@@ -164,40 +153,39 @@ var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props,
   }, [modalElement, onCloseModal]);
 
   // Save ref things
-  React.useImperativeHandle(ref, function () {
-    return {
-      isOpen: isOpen,
-      openModal: openModal,
-      closeModal: closeModal,
-      modalElement: modalElement
-    };
-  });
-  var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  React.useImperativeHandle(ref, () => ({
+    isOpen,
+    openModal,
+    closeModal,
+    modalElement
+  }));
+  const contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'contentFill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'modal-shape_',
     propsKey: 'shape'
   });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-type_',
     propsKey: 'borderType'
   });
-  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'elevation_',
     propsKey: 'elevation'
   });
-  var _useStyles = useStyles.useStyles(props),
-    modalStyles = _useStyles.styles;
+  const {
+    styles: modalStyles
+  } = useStyles.useStyles(props);
 
   // Use a portal to render the children into the element
   return modalElement && /*#__PURE__*/ReactDOM__default.default.createPortal(

package/dist/components/Notification.js

@@ -13,7 +13,7 @@ require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../useStyles-e4accb53.js');
+require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -36,34 +36,35 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var notificationItemConfig = {
+const notificationItemConfig = {
   appearance: {},
-  setAppearance: function setAppearance(newComponent) {
+  setAppearance: newComponent => {
     notificationItemConfig.appearance = newComponent;
   }
 };
 function NotificationItem(props) {
-  var appearance = props.appearance,
-    after = props.after,
-    before = props.before,
-    set = props.set,
-    status = props.status,
-    size = props.size,
-    dataTour = props.dataTour,
-    text = props.text,
-    textSize = props.textSize,
-    textColor = props.textColor,
-    title = props.title,
-    titleTextSize = props.titleTextSize,
-    titleTextColor = props.titleTextColor,
-    className = props.className;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    appearance,
+    after,
+    before,
+    set,
+    status,
+    size,
+    dataTour,
+    text,
+    textSize,
+    textColor,
+    title,
+    titleTextSize,
+    titleTextColor,
+    className
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  console.log(notificationItemConfig.appearance[appearance].titleTextColor);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('notification__item', status && "notification__item_status_" + status, set && "notification__item_set_" + set, size && "notification__item_set_" + size, fillClass || notificationItemConfig.appearance[appearance] && ("fill_" + notificationItemConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default('notification__item', status && `notification__item_status_${status}`, set && `notification__item_set_${set}`, size && `notification__item_set_${size}`, fillClass || notificationItemConfig.appearance[appearance] && `fill_${notificationItemConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     "data-tour": dataTour
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'notification__item-wrapper')
@@ -93,29 +94,30 @@ NotificationItem.defaultProps = {
 };
 
 function NotificationList(props) {
-  var notifications = Notifications.useNotifications();
-  var _useNotificationsAPI = Notifications.useNotificationsAPI(),
-    hideNotifications = _useNotificationsAPI.hideNotifications;
-  var className = props.className,
-    size = props.size,
-    type = props.type,
-    set = props.set;
+  const notifications = Notifications.useNotifications();
+  const {
+    hideNotifications
+  } = Notifications.useNotificationsAPI();
+  const {
+    className,
+    size,
+    type,
+    set
+  } = props;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('notification', className)
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "notification__wrapper"
-  }, notifications.map(function (notification, i) {
-    return /*#__PURE__*/React__default.default.createElement(NotificationItem, {
-      key: i,
-      type: notification.type || type,
-      set: notification.set || set,
-      size: notification.size || size,
-      title: notification.title,
-      text: notification.text,
-      status: notification.status,
-      onClick: hideNotifications
-    });
-  })));
+  }, notifications.map((notification, i) => /*#__PURE__*/React__default.default.createElement(NotificationItem, {
+    key: i,
+    type: notification.type || type,
+    set: notification.set || set,
+    size: notification.size || size,
+    title: notification.title,
+    text: notification.text,
+    status: notification.status,
+    onClick: hideNotifications
+  }))));
 }
 NotificationList.propTypes = {
   className: PropTypes__default.default.string,

package/dist/components/Pagination.js

@@ -20,24 +20,26 @@ var ceil__default = /*#__PURE__*/_interopDefault(ceil);
 var ReactPaginate__default = /*#__PURE__*/_interopDefault(ReactPaginate);
 
 function Pagination(props) {
-  var pageNumber = props.pageNumber,
-    perPageCount = props.perPageCount,
-    allItemsCount = props.allItemsCount,
-    className = props.className;
-    props.forcePage;
-    props.pageCount;
-    var marginPagesDisplayed = props.marginPagesDisplayed,
-    pageRangeDisplayed = props.pageRangeDisplayed,
-    previousLabel = props.previousLabel,
-    nextLabel = props.nextLabel,
-    onPageChange = props.onPageChange;
-  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    pageNumber,
+    perPageCount,
+    allItemsCount,
+    className,
+    forcePage,
+    pageCount,
+    marginPagesDisplayed,
+    pageRangeDisplayed,
+    previousLabel,
+    nextLabel,
+    onPageChange
+  } = props;
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'pagination_justify-content_',
     propsKey: 'justifyContent'
   });
 
   // Calculate count of pages for all items
-  var paginationPagesCount = React.useMemo(function () {
+  const paginationPagesCount = React.useMemo(() => {
     if (allItemsCount && allItemsCount > 0) {
       // Round up. "perPageCount" may be is a query params "limit"
       return ceil__default.default(allItemsCount / perPageCount);
@@ -46,8 +48,8 @@ function Pagination(props) {
   }, [allItemsCount, perPageCount]);
 
   // Index for pagination state
-  var paginationPageIndex = React.useMemo(function () {
-    var intPageNumber = parseInt(pageNumber);
+  const paginationPageIndex = React.useMemo(() => {
+    const intPageNumber = parseInt(pageNumber);
     // For pagination need index of page, not number
     if (!isNaN(intPageNumber) && intPageNumber > 1) {
       return intPageNumber - 1;

package/dist/components/RadioButton.js

@@ -11,7 +11,7 @@ require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../useStyles-e4accb53.js');
+require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -27,71 +27,73 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var radioButtonConfig = {
+const radioButtonConfig = {
   state: {},
-  setState: function setState(newComponent) {
+  setState: newComponent => {
     radioButtonConfig.state = newComponent;
   }
 };
 function RadioButton(props) {
-  props.state;
-    var id = props.id,
-    className = props.className,
-    checked = props.checked,
-    onChange = props.onChange,
-    disabled = props.disabled,
-    descTextSize = props.descTextSize,
-    descTextWidth = props.descTextWidth,
-    descTextColor = props.descTextColor,
-    desc = props.desc,
-    label = props.label,
-    labelTextSize = props.labelTextSize,
-    labelTextWidth = props.labelTextWidth,
-    labelTextColor = props.labelTextColor,
-    Tag = props.tag;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    state,
+    id,
+    className,
+    checked,
+    onChange,
+    disabled,
+    descTextSize,
+    descTextWidth,
+    descTextColor,
+    desc,
+    label,
+    labelTextSize,
+    labelTextWidth,
+    labelTextColor,
+    tag: Tag
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'radio-button_shape_',
     propsKey: 'shape'
   });
-  var stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'radio-button__state_shape_',
     propsKey: 'stateShape'
   });
-  var stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: checked ? 'stateFillChecked' : 'stateFill'
   });
-  var stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
   });
-  var stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'radio-button_checkmark_fill_',
     propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
   });
-  var stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'stateBorderWidth'
   });
-  var stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
   });
-  var stateBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover'
   });
-  var stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     htmlFor: id,
-    "class": clsx__default.default(className, 'radio-button', fillClass, shapeClass)
+    class: clsx__default.default(className, 'radio-button', fillClass, shapeClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('radio-button__item', stateCheckmarkFillClass)
   }, /*#__PURE__*/React__default.default.createElement("input", {