@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/lib/deprecated/Switch/Switch.js

@@ -15,6 +15,8 @@ var _Layout = require("../../v1/Layout");
 
 var _Label = _interopRequireDefault(require("../../v1/Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SwitchModule = _interopRequireDefault(require("../../Switch/Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,7 +64,7 @@ var Switch = function Switch(props) {
     isCover: false,
     alignBox: "row",
     isInline: true,
-    className: "".concat(_SwitchModule["default"].container, " ").concat(customSwitchWrap, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect),
+    className: "".concat(_SwitchModule["default"].container, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect, " ").concat(customSwitchWrap, " "),
     "data-title": disabled ? disableTitle : title,
     "aria-checked": checked,
     role: "switch",
@@ -72,7 +74,7 @@ var Switch = function Switch(props) {
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "checkbox",
     id: id,
-    className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
+    className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : '')),
     name: name,
     value: value,
     checked: checked,
@@ -83,7 +85,7 @@ var Switch = function Switch(props) {
     htmlFor: id,
     "data-id": dataId,
     "data-test-id": dataId,
-    className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+    className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)),
     tabIndex: isReadOnly || disabled ? '-1' : '0'
   })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
     text: text,

package/lib/semantic/Button/Button.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _semanticButtonModule = _interopRequireDefault(require("./semanticButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -71,7 +73,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           ariaControls = a11y.ariaControls,
           ariaLabelledby = a11y.ariaLabelledby;
       return /*#__PURE__*/_react["default"].createElement("button", {
-        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_semanticButtonModule["default"].buttonReset, " ").concat(customClass)),
         "aria-label": ariaLabel,
         "aria-haspopup": ariaHaspopup,
         "aria-expanded": ariaExpanded,

package/lib/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="buttonReset "
+    class="buttonReset"
     data-id="semanticButton"
     data-test-id="semanticButton"
     type="button"

package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -1,17 +1,17 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon  active    inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon active"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -25,14 +25,14 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   disabled   inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon disabled"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -46,14 +46,14 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon    readonly  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon readonly"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -67,14 +67,14 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon rotated     inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -96,7 +96,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -110,14 +110,14 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon arrowIcon_containerClass"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down  arrowIcon_iconClass  "
+      class="zd_font_icons basic icon-down arrowIcon_iconClass"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -131,14 +131,14 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -152,14 +152,14 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -189,7 +189,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -203,14 +203,14 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_all effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_all effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     flex rowdir"
+    class="flex row varClass customContainer effect"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_dark hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_error hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />

package/lib/utils/datetime/common.js

@@ -46,6 +46,10 @@ function getTimeOffset() {
 }
 
 function formatDate(dateMill, mask) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      i18nShortMonths = _ref.i18nShortMonths,
+      i18nMonths = _ref.i18nMonths;
+
   var date = new Date(dateMill);
   var O = getTimeOffset()[0];
   var Z = getTimeOffset()[1];
@@ -57,6 +61,10 @@ function formatDate(dateMill, mask) {
   var M = date.getMinutes();
   var s = date.getSeconds();
   var L = date.getMilliseconds();
+  var defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  var defaultMonths = dateFormat.monthNames.slice(12);
+  var resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  var resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   var flags = {
     d: d,
     O: O,
@@ -69,8 +77,8 @@ function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,

package/lib/v1/Button/Button.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
@@ -222,7 +224,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
   return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
     ref: ref,
     type: type,
-    className: buttonClassName,
+    className: (0, _cssUtility.cn)(buttonClassName),
     "aria-busy": isLoading,
     "aria-disabled": isDisabledState,
     "aria-readonly": isReadOnly,

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 <DocumentFragment>
@@ -44,7 +44,7 @@ exports[`Button - Component Should apply customClass to wrapper, text and icon 1
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus  customIconClass  "
+        class="zd_font_icons basic icon-plus customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"
@@ -220,7 +220,7 @@ exports[`Button - Component Should render Status of buttons - loading 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -264,7 +264,7 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="tick "
+        class="tick"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -470,7 +470,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - end 1`] =
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -515,7 +515,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - overlay 1
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -559,7 +559,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - start 1`]
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -949,7 +949,7 @@ exports[`Button - Component Should render with iconName and iconSize  1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size20);"
@@ -981,7 +981,7 @@ exports[`Button - Component Should render with iconPlacement  1`] = `
       </div>
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"

package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/lib/v1/Switch/Switch.js

@@ -23,6 +23,8 @@ var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
 var _Label = _interopRequireDefault(require("../../Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _Switch_v1Module = _interopRequireDefault(require("./css/Switch_v1.module.css"));
 
 var _excluded = ["ariaDisabled", "ariaLabel"];
@@ -127,20 +129,20 @@ var Switch = function Switch(props) {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    className: trackClass,
+    className: (0, _cssUtility.cn)(trackClass),
     "data-title": title,
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
   })), /*#__PURE__*/_react["default"].createElement("svg", {
-    className: thumbClass,
+    className: (0, _cssUtility.cn)(thumbClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
     cx: "50%",
     cy: "50%",
     r: _contants.THUMB_RADIUS[size]
   })), hasStateIndication ? /*#__PURE__*/_react["default"].createElement("svg", {
-    className: labelIndicationClass,
+    className: (0, _cssUtility.cn)(labelIndicationClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, isChecked ? /*#__PURE__*/_react["default"].createElement("rect", {
     width: "100%",

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/lib/v1/shared/Loader/Loader.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,17 +22,17 @@ var Loader = function Loader(props) {
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper),
+    className: (0, _cssUtility.cn)("".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
-    className: _Loader_v1Module["default"].spinnerTrack,
+    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/_react["default"].createElement("circle", {
-    className: _Loader_v1Module["default"].spinnerHead,
+    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"

package/lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Loader renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="spinner "
+    class="spinner"
     role="img"
     viewBox="0 0 24 24"
   >

package/lib/v1/shared/SuccessTick/SuccessTick.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SuccessTick_v1Module = _interopRequireDefault(require("./SuccessTick_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,7 +22,7 @@ var SuccessTick = function SuccessTick(props) {
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper),
+    className: (0, _cssUtility.cn)("".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"