@zohodesk/components 1.0.0-temp-44 → 1.0.0-temp-47

package/es/ListItem/ListItemWithRadio.js

@@ -3,17 +3,15 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import Radio from '../Radio/Radio';
-import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
 import style from './ListItem.module.css';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -45,16 +43,6 @@ export default class ListItemWithRadio extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -70,48 +58,35 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled,
       disableTitle,
       a11y,
-      customClass
+      customClass,
+      customProps
     } = this.props;
+    let {
+      ListItemProps = {},
+      ContainerProps = {}
+    } = customProps;
     let {
       customListItem = '',
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
-    let {
-      role,
-      ariaSelected
-    } = a11y;
-    let options = {};
-
-    if (active) {
-      options['data-selected'] = active;
-    }
-
-    if (!isDisabled && active) {
-      options.tabindex = '0';
-    }
-
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
-        ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+      a11y: a11y,
+      size: size,
+      palette: palette,
+      highlight: highlight,
+      isDisabled: isDisabled,
+      active: active,
+      autoHover: autoHover,
+      customClass: customListItem,
       dataId: dataId,
-      onClick: !isDisabled && this.onClick,
+      onClick: this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,
-      tagName: "li",
-      "data-title": isDisabled ? disableTitle : null
-    }, options), /*#__PURE__*/React.createElement(Box, {
+      disableTitle: disableTitle,
+      title: null,
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.iconBox
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
@@ -128,7 +103,7 @@ export default class ListItemWithRadio extends React.Component {
       shrink: true,
       "data-title": disableTitle ? null : title,
       className: style.value
-    }, value)));
+    }, value));
   }
 
 }
@@ -142,7 +117,8 @@ ListItemWithRadio.defaultProps = {
   value: 'List',
   dataId: 'listItemWithRadioComp',
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithRadio.propTypes = {
   active: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -847,7 +847,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       i18nKeys,
       a11y,
       isSearchClearOnSelect,
-      palette
+      palette,
+      needEffect
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -876,7 +877,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1052,7 +1053,8 @@ AdvancedGroupMultiSelect.defaultProps = {
   isPadding: false,
   i18nKeys: {},
   a11y: {},
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: PropTypes.bool
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: PropTypes.string,
@@ -1102,7 +1104,8 @@ AdvancedGroupMultiSelect.propTypes = {
   variant: PropTypes.string,
   htmlId: PropTypes.string,
   isSearchClearOnSelect: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark'])
+  palette: PropTypes.oneOf(['default', 'dark']),
+  needEffect: true
 };
 
 if (false) {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -347,7 +347,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       borderColor,
       isBoxPaddingNeed,
       getFooter,
-      customProps
+      customProps,
+      needEffect
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -380,7 +381,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -523,6 +524,7 @@ AdvancedMultiSelectComponent.propTypes = {
   //For grouping multiSelect
   getPublicMethods: PropTypes.func,
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
+  needEffect: PropTypes.bool,
   animationStyle: PropTypes.string,
   defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
@@ -597,7 +599,8 @@ AdvancedMultiSelectComponent.defaultProps = {
   borderColor: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
-  customProps: {}
+  customProps: {},
+  needEffect: true
 };
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,64 +1,79 @@
 .wrapper {
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_advancedmultiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-.container.medium {
+[dir=ltr] .container.medium {
   padding: 0 var(--zd_size34) var(--zd_size7) 0;
 }
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
 .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
   min-height: var(--zd_size30);
 }
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
 
 .delete {
   position: absolute;
   bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
   color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
 .delete:hover {
   color: var(--zdt_advancedmultiselect_delete_hover_text);
 }
@@ -104,9 +119,9 @@
 .more {
   font-size: var(--zd_font_size14);
   color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5);
-  font-family: inherit;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/MultiSelect/MultiSelect.js

@@ -292,7 +292,7 @@ export class MultiSelectComponent extends React.Component {
     } = this.props;
     const highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27)) {
+    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
       suggestions = this.handleFilterSuggestions();
     }
 
@@ -420,6 +420,13 @@ export class MultiSelectComponent extends React.Component {
         });
       }
     } else if (keyCode === 27) {// this.handlePopupClose(e);
+    } else if (keyCode === 9) {
+      const selectedOption = suggestions[hoverOption] || {};
+      const {
+        id
+      } = selectedOption;
+      isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, e);
+      this.handlePopupClose(e);
     }
   }
 
@@ -855,7 +862,8 @@ export class MultiSelectComponent extends React.Component {
       a11y,
       children,
       customChildrenClass,
-      getFooter
+      getFooter,
+      needEffect
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -883,7 +891,7 @@ export class MultiSelectComponent extends React.Component {
     const ariaErrorId = this.getNextAriaId();
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1087,7 +1095,8 @@ MultiSelectComponent.propTypes = {
   children: PropTypes.node,
   customChildrenClass: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func
+  getFooter: PropTypes.func,
+  needEffect: PropTypes.bool
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1117,7 +1126,8 @@ MultiSelectComponent.defaultProps = {
   a11y: {},
   textBoxClass: '',
   palette: 'default',
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 
 if (false) {

package/es/MultiSelect/MultiSelect.module.css

@@ -2,48 +2,43 @@
   position: relative;
 }
 
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
-
-.readOnly {
-  composes: readonly from '../common/common.module.css';
-}
-
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 
@@ -52,16 +47,16 @@
 }
 
 .container.xmedium {
-  padding-bottom: var(--zd_size3);
   min-height: var(--zd_size30);
+  padding-bottom: var(--zd_size3);
 }
 
 .delete {
+  font: inherit;
   padding: var(--zd_size2) var(--zd_size6);
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
-  font: inherit;
 }
 .delete,
 .defaultDelete {
@@ -91,14 +86,22 @@
   max-width: 100%;
 }
 
-.container.xmedium .tag {
+[dir=ltr] .container.xmedium .tag {
   margin: var(--zd_size2) var(--zd_size10) 0 0;
 }
 
-.container.medium .tag {
+[dir=rtl] .container.xmedium .tag {
+  margin: var(--zd_size2) 0 0 var(--zd_size10);
+}
+
+[dir=ltr] .container.medium .tag {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
 
+[dir=rtl] .container.medium .tag {
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
+}
+
 .box {
   background: var(--zdt_multiselect_box_bg);
 }
@@ -134,9 +137,11 @@
 }
 .dark,
 .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
   color: var(--zdt_multiselect_darkmsg_text);
 }
+.dark, .darkBox {
+  background: var(--zdt_multiselect_darkmsg_bg);
+}
 
 .hide {
   composes: vishidden from '../common/common.module.css';
@@ -160,9 +165,14 @@
 .custmInputWrapper {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
 }
+[dir=ltr] .custmInputWrapper {
+  left: 0;
+}
+[dir=rtl] .custmInputWrapper {
+  right: 0;
+}
 .title {
   margin-bottom: var(--zd_size6);
 }
@@ -175,6 +185,9 @@
 .iconContainer {
   padding-top: var(--zd_size3)
 }
-.clearIconSpace {
+[dir=ltr] .clearIconSpace {
   padding-right: var(--zd_size37)
 }
+[dir=rtl] .clearIconSpace {
+  padding-left: var(--zd_size37)
+}

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -87,7 +87,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       a11y,
       children,
       customChildrenClass,
-      isBoxPaddingNeed
+      isBoxPaddingNeed,
+      needEffect
     } = this.props;
     const {
       clearText = 'Clear all'
@@ -115,7 +116,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -288,6 +289,7 @@ MultiSelectWithAvatarComponent.propTypes = {
   palette: PropTypes.oneOf(['default', 'dark']),
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
+  needEffect: PropTypes.bool,
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
@@ -337,7 +339,8 @@ MultiSelectWithAvatarComponent.defaultProps = {
   a11y: {},
   palette: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);

package/es/MultiSelect/SelectedOptions.js

@@ -37,13 +37,14 @@ export default class SelectedOptions extends React.PureComponent {
       } = option;
       const commonProps = {
         disabled: isDisabled,
-        onRemove: isDisabled ? null : onRemove,
+        onRemove: isDisabled || isReadOnly ? null : onRemove,
         text: value,
         palette: isDarkPalette,
         onSelectTag: isReadOnly ? null : onSelect,
         getRef: getRef,
         initial: value,
-        id: id
+        id: id,
+        isReadOnly: isReadOnly
       };
 
       if (optionType === 'avatar') {

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,9 +1,15 @@
 .tag {
   max-width: 100%;
 }
-.xmedium {
+[dir=ltr] .xmedium {
   margin: 0 var(--zd_size10) var(--zd_size2) 0;
 }
-.medium {
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10);
+}
+[dir=ltr] .medium {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
+}

package/es/PopOver/PopOver.module.css

@@ -1,8 +1,8 @@
 .popup {
   position: relative;
-  background-color: var(--dot_bg_white);
+  background-color: var(--dot_white);
 }
 .target {
-  cursor: pointer;
   composes: offSelection from '../common/common.module.css';
+  cursor: pointer;
 }

package/es/Provider.js

@@ -4,30 +4,30 @@ import { Container } from './Layout';
 import Switch from './Switch/Switch';
 /* default mode & theme css */
 
-import './Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import './Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import './Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import './Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import './Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import './Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import './Appearance/default/mode/defaultMode.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/mode/defaultMode.module.css';
 /* dark mode & theme css */
 
-import './Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import './Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import './Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import './Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import './Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import './Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import './Appearance/dark/mode/darkMode.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/mode/darkMode.module.css';
 import LibraryContext from './Provider/LibraryContextInit';
 import { setGlobalIdPrefix } from './Provider/IdProvider';
 export default class Provider extends React.Component {

package/es/Radio/Radio.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from '../Label/Label';
 import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
 import style from './Radio.module.css';
 export default class Radio extends React.Component {
   constructor(props) {
@@ -45,7 +44,7 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
     let {
       ariaHidden,