@zohodesk/components 1.6.13 → 1.6.15

package/es/Tab/Tabs.js

@@ -107,8 +107,7 @@ class Tabs extends React.Component {
     }
   }
 
-  setMaxDim() {
-    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  setMaxDim(totalDimension = 0) {
     let {
       selectedTab
     } = this.props; // let actual = Object.keys(tabDimensions).reduce(
@@ -409,10 +408,9 @@ class Tabs extends React.Component {
     togglePopup(e, boxPosition);
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -432,10 +430,9 @@ class Tabs extends React.Component {
     });
   }
 
-  getMoreList(_ref2) {
-    let {
-      moreTabs
-    } = _ref2;
+  getMoreList({
+    moreTabs
+  }) {
     const validElements = [];
     React.Children.map(moreTabs, child => {
       const isValidElement = /*#__PURE__*/React.isValidElement(child);
@@ -447,10 +444,9 @@ class Tabs extends React.Component {
     return validElements;
   }
 
-  handleFilterSuggestions(_ref3) {
-    let {
-      moreTabs
-    } = _ref3;
+  handleFilterSuggestions({
+    moreTabs
+  }) {
     const {
       showTitleInMoreOptions
     } = this.props;
@@ -582,82 +578,79 @@ class Tabs extends React.Component {
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref4 => {
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      isActive: isPopupReady,
+      isAnimate: true,
+      size: "medium",
+      customClass: {
+        customDropBoxWrap: `${moreContainerClass} ${popupClass}`
+      },
+      boxPosition: position,
+      getRef: getContainerRef,
+      isBoxPaddingNeed: false,
+      isArrow: false,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      isRestrictScroll: isRestrictScroll,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, DropBoxProps, {
+      isResponsivePadding: true,
+      needFocusScope: true,
+      dataId: `${dataId}_dropbox`,
+      onClick: removeClose,
+      onClose: this.togglePopup
+    }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
+      className: tabsStyle.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+      placeHolder: placeHolderText,
+      onChange: this.handleChange,
+      value: searchValue,
+      onClear: this.handleSearchValueClear,
+      size: searchBoxSize,
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
+      dataId: `${dataId}_search`,
+      autoComplete: false,
+      name: "search"
+    }, TextBoxIconProps))) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      scroll: "vertical",
+      className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
+      onScroll: this.onScroll,
+      dataId: `${dataId}_Tabs`
+    }, moreTabsListItems.length ? moreTabsListItems.map(data => {
       let {
-        tabletMode
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
-        isActive: isPopupReady,
-        isAnimate: true,
-        size: "medium",
+        text,
+        id,
+        title,
+        isLink,
+        href,
+        children,
+        dataId
+      } = data;
+      const value = text ? text : showTitleInMoreOptions ? title : null;
+      return /*#__PURE__*/React.createElement(ListItem, _extends({
+        key: id,
+        value: value,
+        onClick: this.moreTabSelect,
+        id: id,
+        title: title || text,
+        isLink: isLink,
+        href: href,
+        autoHover: true,
         customClass: {
-          customDropBoxWrap: `${moreContainerClass} ${popupClass}`
-        },
-        boxPosition: position,
-        getRef: getContainerRef,
-        isBoxPaddingNeed: false,
-        isArrow: false,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        isRestrictScroll: isRestrictScroll,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset
-      }, DropBoxProps, {
-        isResponsivePadding: true,
-        needFocusScope: true,
-        dataId: `${dataId}_dropbox`,
-        onClick: removeClose,
-        onClose: this.togglePopup
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
-        className: tabsStyle.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-        placeHolder: placeHolderText,
-        onChange: this.handleChange,
-        value: searchValue,
-        onClear: this.handleSearchValueClear,
-        size: searchBoxSize,
-        customProps: {
-          TextBoxProps: {
-            'data-a11y-autofocus': true
-          }
+          customListItem: menuItemClass
         },
-        dataId: `${dataId}_search`,
-        autoComplete: false,
-        name: "search"
-      }, TextBoxIconProps))) : null, /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        shrink: true,
-        scroll: "vertical",
-        className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: this.onScroll,
-        dataId: `${dataId}_Tabs`
-      }, moreTabsListItems.length ? moreTabsListItems.map(data => {
-        let {
-          text,
-          id,
-          title,
-          isLink,
-          href,
-          children,
-          dataId
-        } = data;
-        const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.createElement(ListItem, _extends({
-          key: id,
-          value: value,
-          onClick: this.moreTabSelect,
-          id: id,
-          title: title || text,
-          isLink: isLink,
-          href: href,
-          autoHover: true,
-          customClass: {
-            customListItem: menuItemClass
-          },
-          target: "self",
-          dataId: `${dataId}_Tab`
-        }, ListItemProps), !showTitleInMoreOptions ? children : null);
-      }) : this.renderEmptyState()));
-    })) : null);
+        target: "self",
+        dataId: `${dataId}_Tab`
+      }, ListItemProps), !showTitleInMoreOptions ? children : null);
+    }) : this.renderEmptyState())))) : null);
   }
 
   render() {

package/es/Typography/css/cssJSLogic.js

@@ -1,10 +1,9 @@
 import { compileClassNames } from '@zohodesk/utils';
 import { letterspacingMapping, lineheightMapping } from "../utils";
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   let {
     $flag_reset,
     shouldReset,

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -34,8 +34,7 @@ export default class VelocityAnimationGroup extends React.Component {
 
     if (postEnterStyles && typeof postEnterStyles === 'object') {
       elements.forEach(rootElement => {
-        Object.entries(postEnterStyles).forEach(_ref => {
-          let [cssProperty, cssValue] = _ref;
+        Object.entries(postEnterStyles).forEach(([cssProperty, cssValue]) => {
           rootElement.style[cssProperty] = cssValue;
         });
       });

package/es/utils/Common.js

@@ -49,14 +49,11 @@ export function encodeForHtml(str) {
 
   return str;
 }
-export function getListOfDetails() {
-  let Obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let fn = arguments.length > 1 ? arguments[1] : undefined;
+export function getListOfDetails(Obj = {}, fn) {
   const ids = Object.keys(Obj) || [];
   return ids.map(id => fn(Obj[id]));
 }
-export function capitalize() {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+export function capitalize(value = '') {
   let newValue = '';
 
   for (let i = 0; i < value.length; i++) {
@@ -69,18 +66,12 @@ export function capitalize() {
 
   return newValue;
 }
-export function bind() {
-  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
-    handlers[_key] = arguments[_key];
-  }
-
+export function bind(...handlers) {
   handlers.forEach(handler => {
     this[handler] = this[handler].bind(this);
   });
 }
-export function getFullName() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getFullName(firstName = '', lastName = '') {
   let fullName = '';
 
   if (firstName !== null && firstName !== '') {
@@ -93,8 +84,7 @@ export function getFullName() {
 
   return fullName;
 }
-export function getStringifiedOutputForJson() {
-  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export function getStringifiedOutputForJson(input = {}) {
   const keys = Object.keys(input);
   const modifiedInput = keys.reduce((curr, next) => {
     const values = input[next] || [];
@@ -130,19 +120,14 @@ export function filterValue(obj, val) {
   });
   return result;
 }
-export function merge() {
-  let oldObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let newObj = arguments.length > 1 ? arguments[1] : undefined;
+export function merge(oldObj = {}, newObj) {
   const copyOfOld = Object.assign({}, oldObj);
   return Object.keys(newObj).reduce((res, key) => {
     res[key] = Object.assign({}, res[key] || {}, newObj[key]);
     return res;
   }, copyOfOld);
 }
-export function formatValue() {
-  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
-  let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
+export function formatValue(values = [], valueField = 'id', textField = 'name') {
   return values && values.map(value => {
     let formattedValue = value;
 
@@ -166,8 +151,7 @@ export function bytesToSize(bytes) {
   const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
   return `${Math.round(bytes / Math.pow(1024, i), 2)} ${sizes[i]}`;
 }
-export function getMemSize(bytes) {
-  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+export function getMemSize(bytes, size = !0) {
   const thresh = size ? 1000 : 1024;
 
   if (Math.abs(bytes) < thresh) {
@@ -300,11 +284,7 @@ export const debounce = function (func, wait) {
   };
 };
 let timerId;
-export const throttle = function (func, wait) {
-  for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-    args[_key2 - 2] = arguments[_key2];
-  }
-
+export const throttle = (func, wait, ...args) => {
   if (timerId) {
     return;
   }
@@ -374,8 +354,7 @@ export function getElementSpace(elementRef) {
     availableInsideSpace: availableInsideSpace
   };
 }
-export function getSearchString() {
-  let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+export function getSearchString(charachers = '') {
   return (charachers || '').toString().toLowerCase().trim(); //.replace(/\s+/g, '');
 }
 export function findScrollEnd(element) {

package/es/utils/datetime/common.js

@@ -4,9 +4,7 @@ let dateFormat = {
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   timeNames: ['a', 'p', 'am', 'pm', 'A', 'P', 'AM', 'PM']
 };
-export function pad(n) {
-  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  let z = arguments.length > 2 ? arguments[2] : undefined;
+export function pad(n, width = 1, z) {
   z = z || '0';
   n = `${n}`;
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
@@ -90,9 +88,7 @@ export function replaceI18NValuesWithRegex(i18nStr, values) {
 export function unescapeUnicode(str) {
   return str.replace(/\\u([a-fA-F0-9]{4})/g, (g, m1) => String.fromCharCode(parseInt(m1, 16)));
 }
-export function getValues() {
-  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let diff = arguments.length > 1 ? arguments[1] : undefined;
+export function getValues(params = [], diff) {
   return params.map(param => diff[param]);
 }
 export function getI18NValue(i18n) {

package/es/utils/dropDownUtils.js

@@ -58,10 +58,7 @@ const getSearchFields = props => {
 // }
 
 
-export const isObjectContainsSearchString = function () {
-  let searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let obj = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+export const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj = {}) => {
   return searchFields.some(field => {
     const val = obj[field];
     if (val === null || val === undefined) return false;
@@ -444,13 +441,12 @@ export const makeGetOptionIdChange = () => createSelector([getOptions, getValueF
     return changedOptions;
   }, newOptions);
 });
-export const filterSelectedOptions = function () {
-  let {
-    selectedOptions = dummyArray,
-    propSelectedOptions = dummyArray,
-    disabledOptions = dummyArray,
-    limit
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export const filterSelectedOptions = ({
+  selectedOptions = dummyArray,
+  propSelectedOptions = dummyArray,
+  disabledOptions = dummyArray,
+  limit
+} = {}) => {
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
 

package/es/utils/getInitial.js

@@ -1,6 +1,4 @@
-export function getInitial() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getInitial(firstName = '', lastName = '') {
   let initial = '';
 
   if (firstName) {

package/es/v1/Button/Button.js

@@ -11,8 +11,8 @@ import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
-import Loader from "./_shared/Loader/Loader";
-import SuccessTick from "./_shared/SuccessTick/SuccessTick";
+import Loader from "../shared/Loader/Loader";
+import SuccessTick from "../shared/SuccessTick/SuccessTick";
 import cssJSLogic from "./css/cssJSLogic";
 
 const getTypographySize = size => TYPOGRAPHY_SIZE_MAP[size] || '13';
@@ -70,7 +70,8 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     successOverlayClass,
     contentWrapperClass,
     textClassName,
-    buttonClassName
+    buttonClassName,
+    iconClassName
   } = classes;
   const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
 
@@ -134,6 +135,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     }
 
     return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+      iconClass: iconClassName,
       name: iconName,
       size: iconSize,
       tagAttributes: iconTagAttributes,

package/es/v1/Button/__tests__/Button.spec.js

@@ -218,13 +218,16 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should apply customClass to wrapper and text', () => {
+  test('Should apply customClass to wrapper, text and icon', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "iconWithText",
+      iconName: "ZD-plus",
       customClass: {
         wrapper: 'customButtonClass',
-        text: 'customTextClass'
+        text: 'customTextClass',
+        icon: 'customIconClass'
       }
     }, "Button"));
     expect(asFragment()).toMatchSnapshot();

package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -27,7 +27,7 @@ exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should apply customClass to wrapper and text 1`] = `
+exports[`Button - Component Should apply customClass to wrapper, text and icon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
@@ -42,6 +42,13 @@ exports[`Button - Component Should apply customClass to wrapper and text 1`] = `
       data-id="flex"
       data-test-id="flex"
     >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-plus  customIconClass  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size16);"
+      />
       <div
         class="dotted size13 customTextClass"
       >

package/es/v1/Button/css/cssJSLogic.js

@@ -5,15 +5,11 @@ import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS } from "../constants";
 
-const capitalize = function () {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return value.charAt(0).toUpperCase() + value.slice(1);
-};
+const capitalize = (value = '') => value.charAt(0).toUpperCase() + value.slice(1);
 
-export default function cssJSLogic(_ref) {
-  let {
-    props
-  } = _ref;
+export default function cssJSLogic({
+  props
+}) {
   const {
     palette,
     bgAppearance,
@@ -31,7 +27,8 @@ export default function cssJSLogic(_ref) {
   } = props;
   const {
     wrapper: wrapperClass = '',
-    text: textClassCustom = ''
+    text: textClassCustom = '',
+    icon: iconClassCustom = ''
   } = customClass;
   const isLoading = status === STATUS.LOADING;
   const isSuccess = status === STATUS.SUCCESS;
@@ -86,11 +83,15 @@ export default function cssJSLogic(_ref) {
   const textClassName = compileClassNames({
     [textClassCustom]: !!textClassCustom
   });
+  const iconClassName = compileClassNames({
+    [iconClassCustom]: !!iconClassCustom
+  });
   return {
     buttonClassName,
     textClassName,
     contentWrapperClass: overlayActive ? style.overlayHidden : style.contentWrapper,
     loaderOverlayClass: style.loaderOverlay,
-    successOverlayClass: style.successOverlay
+    successOverlayClass: style.successOverlay,
+    iconClassName
   };
 }

package/es/v1/Label/css/cssJSLogic.js

@@ -1,10 +1,9 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
 import commonStyle from "../../../common/common.module.css";
-export default function cssJSLogic(_ref) {
-  let {
-    style,
-    props
-  } = _ref;
+export default function cssJSLogic({
+  style,
+  props
+}) {
   const {
     shouldHighlightRequired,
     isRequired,

package/es/v1/Switch/css/cssJSLogic.js

@@ -1,9 +1,8 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   const {
     size,
     isChecked,

package/es/v1/helpers/colorHelpers/colorHelper.js

@@ -48,37 +48,27 @@ const toBorderIntensity = (tone, hasState, isLighter) => {
   return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
 };
 
-export const getBgClass = _ref => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref;
-  return paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
-};
-export const getTextClass = _ref2 => {
-  let {
-    state,
-    textTone
-  } = _ref2;
-  return paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
-};
-export const getBorderClass = _ref3 => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref3;
-  return paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
-};
-
-const buildPaletteClasses = (config, _ref4) => {
-  let {
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref4;
+export const getBgClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
+export const getTextClass = ({
+  state,
+  textTone
+}) => paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
+export const getBorderClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
+
+const buildPaletteClasses = (config, {
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const {
     tone,
     textTone,
@@ -117,7 +107,7 @@ const buildPaletteClasses = (config, _ref4) => {
     }) : '',
     text: isSelected ? getTextClass({
       state: 'selected',
-      textTone: baseTextTone
+      textTone: hasBgState ? stateTextTone : baseTextTone
     }) : getTextClass({
       textTone: baseTextTone
     }),
@@ -133,11 +123,14 @@ const buildPaletteClasses = (config, _ref4) => {
       state: 'active',
       textTone: stateTextTone
     }),
-    border: isSelected ? getBorderClass({
+    border: isSelected ? !hasBorderState ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       state: 'selected',
-      tone,
-      isLighter
-    }) : hasTransparentBorder ? paletteBorderStyle['border-transparent'] : getBorderClass({
+      tone
+    }) : hasTransparentBorder ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       tone,
       isLighter
     }),
@@ -156,14 +149,13 @@ const buildPaletteClasses = (config, _ref4) => {
   };
 };
 
-const getPaletteClasses = _ref5 => {
-  let {
-    palette,
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref5;
+const getPaletteClasses = ({
+  palette,
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const config = PALETTE_CONFIG[palette];
   return config ? buildPaletteClasses(config, {
     bgAppearance,