@zohodesk/components 1.6.8 → 1.6.11

package/lib/v1/Button/_shared/Loader/Loader.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _LoaderModule = _interopRequireDefault(require("./Loader.module.css"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Loader = function Loader(props) {
+  var customClass = props.customClass;
+  var _customClass$customWr = customClass.customWrapperClass,
+      customWrapperClass = _customClass$customWr === void 0 ? '' : _customClass$customWr;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    className: "".concat(_LoaderModule["default"].spinner, " ").concat(customWrapperClass),
+    viewBox: "0 0 24 24",
+    role: "img",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react["default"].createElement("circle", {
+    className: _LoaderModule["default"].spinnerTrack,
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    className: _LoaderModule["default"].spinnerHead,
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }));
+};
+
+Loader.propTypes = _propTypes["default"];
+Loader.defaultProps = _defaultProps["default"];
+var _default = Loader;
+exports["default"] = _default;

package/lib/v1/Button/_shared/Loader/Loader.module.css

@@ -0,0 +1,42 @@
+.spinner {
+    width: var(--local-loader-size, var(--zd_size16));
+    height: var(--local-loader-size, var(--zd_size16));
+    display: block;
+}
+
+.spinnerTrack {
+    fill: none;
+    stroke: currentColor;
+    opacity: 0.2;
+    stroke-width: 3px;
+}
+
+.spinnerHead {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 3px;
+    stroke-linecap: round;
+    stroke-dasharray: 60;
+    stroke-dashoffset: 45;
+    transform-origin: 50% 50%;
+}
+
+[dir=ltr] .spinnerHead {
+    animation:  spin-ltr 0.9s linear infinite;
+}
+
+[dir=rtl] .spinnerHead {
+    animation:  spin-rtl 0.9s linear infinite;
+}
+
+@keyframes spin-ltr {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin-rtl {
+    to {
+        transform: rotate(-360deg);
+    }
+}

package/lib/v1/Button/_shared/Loader/__tests__/Loader.spec.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Loader = _interopRequireDefault(require("../Loader"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Loader', function () {
+  test('renders default snapshot', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customClass', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+      customClass: {
+        customWrapperClass: 'my-custom-class'
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader renders default snapshot 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="spinner "
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="spinnerTrack"
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <circle
+      class="spinnerHead"
+      cx="12"
+      cy="12"
+      r="10"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`Loader renders with customClass 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="spinner my-custom-class"
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="spinnerTrack"
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <circle
+      class="spinnerHead"
+      cx="12"
+      cy="12"
+      r="10"
+    />
+  </svg>
+</DocumentFragment>
+`;

package/lib/v1/Button/_shared/Loader/props/defaultProps.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var defaultProps = {
+  customClass: {}
+};
+var _default = defaultProps;
+exports["default"] = _default;

package/lib/v1/Button/_shared/Loader/props/propTypes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  customClass: _propTypes["default"].shape({
+    customWrapperClass: _propTypes["default"].string
+  })
+};
+var _default = propTypes;
+exports["default"] = _default;

package/lib/v1/Button/_shared/SuccessTick/SuccessTick.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SuccessTickModule = _interopRequireDefault(require("./SuccessTick.module.css"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var SuccessTick = function SuccessTick(props) {
+  var customClass = props.customClass;
+  var _customClass$customWr = customClass.customWrapperClass,
+      customWrapperClass = _customClass$customWr === void 0 ? '' : _customClass$customWr;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    className: "".concat(_SuccessTickModule["default"].tick, " ").concat(customWrapperClass),
+    viewBox: "0 0 24 24",
+    role: "img",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M4 12l5 5L20 6"
+  }));
+};
+
+SuccessTick.propTypes = _propTypes["default"];
+SuccessTick.defaultProps = _defaultProps["default"];
+var _default = SuccessTick;
+exports["default"] = _default;

package/lib/v1/Button/_shared/SuccessTick/SuccessTick.module.css

@@ -0,0 +1,21 @@
+.tick {
+    width: var(--local-tick-size, var(--zd_size16));
+    height: var(--local-tick-size, var(--zd_size16));
+    stroke: currentColor;
+    stroke-width: 2.5px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+    stroke-dasharray: 24;
+    stroke-dashoffset: 24;
+}[dir=ltr] .tick {
+    animation: drawTick 0.3s ease-out forwards;
+}[dir=rtl] .tick {
+    animation: drawTick 0.3s ease-out forwards;
+}
+
+@keyframes drawTick {
+    to {
+        stroke-dashoffset: 0;
+    }
+}

package/lib/v1/Button/_shared/SuccessTick/__tests__/SuccessTick.spec.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _SuccessTick = _interopRequireDefault(require("../SuccessTick"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('SuccessTick', function () {
+  test('renders default snapshot', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customClass', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], {
+      customClass: {
+        customWrapperClass: 'my-custom-class'
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SuccessTick renders default snapshot 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="tick "
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M4 12l5 5L20 6"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SuccessTick renders with customClass 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="tick my-custom-class"
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M4 12l5 5L20 6"
+    />
+  </svg>
+</DocumentFragment>
+`;

package/lib/v1/Button/_shared/SuccessTick/props/defaultProps.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var defaultProps = {
+  customClass: {}
+};
+var _default = defaultProps;
+exports["default"] = _default;

package/lib/v1/Button/_shared/SuccessTick/props/propTypes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  customClass: _propTypes["default"].shape({
+    customWrapperClass: _propTypes["default"].string
+  })
+};
+var _default = propTypes;
+exports["default"] = _default;

package/lib/v1/Button/constants/index.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANT = exports.TYPOGRAPHY_SIZE_MAP = exports.STATUS = exports.SIZE = exports.SHAPE = exports.PALETTE_SHADE = exports.PALETTE = exports.LOADER_PLACEMENT = exports.ICON_PLACEMENT = exports.DISABLED_APPEARANCE = exports.DEFAULT_VARIANT = exports.DEFAULT_STATUS = exports.DEFAULT_SIZE = exports.DEFAULT_SHAPE = exports.DEFAULT_PALETTE_SHADE = exports.DEFAULT_PALETTE = exports.DEFAULT_LOADER_PLACEMENT = exports.DEFAULT_ICON_SIZE = exports.DEFAULT_ICON_PLACEMENT = exports.DEFAULT_DISABLED_APPEARANCE = exports.DEFAULT_BUTTON_TYPE = exports.DEFAULT_BORDER_APPEARANCE = exports.DEFAULT_BG_APPEARANCE = exports.BUTTON_TYPE = exports.BORDER_APPEARANCE = exports.BG_APPEARANCE = void 0;
+
+var _TYPOGRAPHY_SIZE_MAP;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var PALETTE = {
+  DEFAULT: 'default',
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DANGER: 'danger',
+  SUCCESS: 'success'
+};
+exports.PALETTE = PALETTE;
+var BG_APPEARANCE = {
+  DEFAULT: 'default',
+  ON_HOVER: 'onHover',
+  NONE: 'none'
+};
+exports.BG_APPEARANCE = BG_APPEARANCE;
+var BORDER_APPEARANCE = {
+  DEFAULT: 'default',
+  ON_HOVER: 'onHover',
+  NONE: 'none'
+};
+exports.BORDER_APPEARANCE = BORDER_APPEARANCE;
+var VARIANT = {
+  TEXT: 'text',
+  ICON: 'icon',
+  ICON_WITH_TEXT: 'iconWithText'
+};
+exports.VARIANT = VARIANT;
+var SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  FULL: 'full'
+};
+exports.SIZE = SIZE;
+var STATUS = {
+  DEFAULT: 'default',
+  LOADING: 'loading',
+  SUCCESS: 'success'
+};
+exports.STATUS = STATUS;
+var LOADER_PLACEMENT = {
+  START: 'start',
+  END: 'end',
+  OVERLAY: 'overlay'
+};
+exports.LOADER_PLACEMENT = LOADER_PLACEMENT;
+var ICON_PLACEMENT = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+exports.ICON_PLACEMENT = ICON_PLACEMENT;
+var PALETTE_SHADE = {
+  DEFAULT: 'default',
+  LIGHTER: 'lighter'
+};
+exports.PALETTE_SHADE = PALETTE_SHADE;
+var SHAPE = {
+  PILL: 'pill',
+  RECTANGLE: 'rectangle',
+  ROUNDED_RECTANGLE: 'roundedRectangle'
+};
+exports.SHAPE = SHAPE;
+var DISABLED_APPEARANCE = {
+  NONE: 'none',
+  DULL: 'dull',
+  STRIKE: 'strike'
+};
+exports.DISABLED_APPEARANCE = DISABLED_APPEARANCE;
+var BUTTON_TYPE = {
+  BUTTON: 'button',
+  SUBMIT: 'submit',
+  RESET: 'reset'
+};
+exports.BUTTON_TYPE = BUTTON_TYPE;
+var TYPOGRAPHY_SIZE_MAP = (_TYPOGRAPHY_SIZE_MAP = {}, _defineProperty(_TYPOGRAPHY_SIZE_MAP, SIZE.SMALL, '10'), _defineProperty(_TYPOGRAPHY_SIZE_MAP, SIZE.MEDIUM, '13'), _defineProperty(_TYPOGRAPHY_SIZE_MAP, SIZE.LARGE, '14'), _defineProperty(_TYPOGRAPHY_SIZE_MAP, SIZE.FULL, '14'), _TYPOGRAPHY_SIZE_MAP);
+/** Default values referenced by both defaultProps and cssJSLogic */
+
+exports.TYPOGRAPHY_SIZE_MAP = TYPOGRAPHY_SIZE_MAP;
+var DEFAULT_PALETTE = PALETTE.DEFAULT;
+exports.DEFAULT_PALETTE = DEFAULT_PALETTE;
+var DEFAULT_BG_APPEARANCE = BG_APPEARANCE.DEFAULT;
+exports.DEFAULT_BG_APPEARANCE = DEFAULT_BG_APPEARANCE;
+var DEFAULT_BORDER_APPEARANCE = BORDER_APPEARANCE.DEFAULT;
+exports.DEFAULT_BORDER_APPEARANCE = DEFAULT_BORDER_APPEARANCE;
+var DEFAULT_VARIANT = VARIANT.TEXT;
+exports.DEFAULT_VARIANT = DEFAULT_VARIANT;
+var DEFAULT_SIZE = SIZE.MEDIUM;
+exports.DEFAULT_SIZE = DEFAULT_SIZE;
+var DEFAULT_STATUS = STATUS.DEFAULT;
+exports.DEFAULT_STATUS = DEFAULT_STATUS;
+var DEFAULT_LOADER_PLACEMENT = LOADER_PLACEMENT.OVERLAY;
+exports.DEFAULT_LOADER_PLACEMENT = DEFAULT_LOADER_PLACEMENT;
+var DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.LEFT;
+exports.DEFAULT_ICON_PLACEMENT = DEFAULT_ICON_PLACEMENT;
+var DEFAULT_ICON_SIZE = 16;
+exports.DEFAULT_ICON_SIZE = DEFAULT_ICON_SIZE;
+var DEFAULT_PALETTE_SHADE = PALETTE_SHADE.DEFAULT;
+exports.DEFAULT_PALETTE_SHADE = DEFAULT_PALETTE_SHADE;
+var DEFAULT_SHAPE = SHAPE.ROUNDED_RECTANGLE;
+exports.DEFAULT_SHAPE = DEFAULT_SHAPE;
+var DEFAULT_DISABLED_APPEARANCE = DISABLED_APPEARANCE.DULL;
+exports.DEFAULT_DISABLED_APPEARANCE = DEFAULT_DISABLED_APPEARANCE;
+var DEFAULT_BUTTON_TYPE = BUTTON_TYPE.BUTTON;
+exports.DEFAULT_BUTTON_TYPE = DEFAULT_BUTTON_TYPE;

package/lib/v1/Button/css/Button_v1.module.css

@@ -0,0 +1,119 @@
+.varClass {
+    --local-button-border-style: solid;
+    --local-button-border-width: 1px;
+    --local-button-radius: 4px;
+    --local-button-gap: var(--zd_size8);
+    --local-button-padding-block: var(--zd_size6);
+    --local-button-padding-inline: var(--zd_size15);
+    --local-button-font-size: var(--zd_font_size13);
+    --local-loader-size: 16px;
+    --local-tick-size: 16px;
+    --local-button-height: auto;
+    --local-button-width: auto;
+    --local-button-overlay-opacity: 0.48;
+    --local-button-transition-duration: var(--zd_transition3);
+}
+
+.button {
+    composes: varClass;
+    composes: posrel pointer from '../../../common/common.module.css';
+    padding-block: var(--local-button-padding-block);
+    padding-inline: var(--local-button-padding-inline);
+    font-size: var(--local-button-font-size);
+    height: var(--local-button-height);
+    width: var(--local-button-width);
+    border-radius: var(--local-button-radius);
+    border-style: var(--local-button-border-style);
+    border-width: var(--local-button-border-width);
+    transition-duration: var(--local-button-transition-duration);
+    transition-timing-function: ease;
+    background-image: none;
+}
+
+.disabledPointer {
+    cursor: not-allowed;
+}
+
+.disabledOpac {
+    opacity: var(--local-button-overlay-opacity);
+}
+
+.loading {
+    cursor: progress;
+}
+
+.sizeSmall {
+    --local-button-padding-block: var(--zd_size4);
+    --local-button-padding-inline: var(--zd_size7);
+    --local-loader-size: 14px;
+    --local-tick-size: 14px;
+}
+
+.sizeMedium {
+    --local-button-padding-block: var(--zd_size6);
+    --local-button-padding-inline: var(--zd_size15);
+    --local-loader-size: 16px;
+    --local-tick-size: 16px;
+}
+
+.sizeLarge {
+    --local-button-padding-block: var(--zd_size9);
+    --local-button-padding-inline: var(--zd_size14);
+    --local-loader-size: 18px;
+    --local-tick-size: 18px;
+}
+
+.sizeFull {
+    --local-button-height: 100%;
+    --local-button-width: 100%;
+}
+
+.shapeRoundedRectangle {
+    --local-button-radius: 4px;
+}
+
+.shapePill {
+    --local-button-radius: 50px;
+}
+
+.shapeRectangle {
+    --local-button-radius: 0;
+}
+
+.loaderOverlay {
+    inset: 0 ;
+    composes: posab from '../../../common/common.module.css';
+}
+
+.contentWrapper {
+    gap: var(--local-button-gap);
+}
+
+
+.overlayHidden {
+    composes: contentWrapper;
+    visibility: hidden;
+    opacity: 0;
+}
+
+.strike::after {
+    content: '';
+    position: absolute;
+    inset: 0 ;
+    pointer-events: none;
+    border-radius: var(--local-button-radius);
+}
+
+[dir=ltr] .strike::after {
+    background-image: repeating-linear-gradient(120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
+}
+
+[dir=rtl] .strike::after {
+    background-image: repeating-linear-gradient(-120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
+}
+
+.successOverlay {
+    inset: 0 ;
+    composes: posab from '../../../common/common.module.css';
+}
+

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

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _Button_v1Module = _interopRequireDefault(require("./Button_v1.module.css"));
+
+var _compileClassNames3 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+
+var _semanticButtonModule = _interopRequireDefault(require("../../../semantic/Button/semanticButton.module.css"));
+
+var _colorHelper = _interopRequireDefault(require("../../helpers/colorHelpers/colorHelper"));
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
+var _constants2 = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var capitalize = function capitalize() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return value.charAt(0).toUpperCase() + value.slice(1);
+};
+
+function cssJSLogic(_ref) {
+  var _compileClassNames;
+
+  var props = _ref.props;
+  var palette = props.palette,
+      bgAppearance = props.bgAppearance,
+      borderAppearance = props.borderAppearance,
+      paletteShade = props.paletteShade,
+      size = props.size,
+      status = props.status,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
+      isSelected = props.isSelected,
+      shape = props.shape,
+      loaderPlacement = props.loaderPlacement,
+      disabledAppearance = props.disabledAppearance,
+      _props$customClass = props.customClass,
+      customClass = _props$customClass === void 0 ? _constants.DUMMY_OBJECT : _props$customClass;
+  var _customClass$wrapper = customClass.wrapper,
+      wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper,
+      _customClass$text = customClass.text,
+      textClassCustom = _customClass$text === void 0 ? '' : _customClass$text;
+  var isLoading = status === _constants2.STATUS.LOADING;
+  var isSuccess = status === _constants2.STATUS.SUCCESS;
+  var isInteractive = !isDisabled && !isReadOnly;
+  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+
+  var _getPaletteClasses = (0, _colorHelper["default"])({
+    palette: palette,
+    bgAppearance: bgAppearance,
+    borderAppearance: borderAppearance,
+    paletteShade: paletteShade,
+    isSelected: isSelected
+  }),
+      bg = _getPaletteClasses.bg,
+      hoverBg = _getPaletteClasses.hoverBg,
+      focusBg = _getPaletteClasses.focusBg,
+      activeBg = _getPaletteClasses.activeBg,
+      text = _getPaletteClasses.text,
+      hoverText = _getPaletteClasses.hoverText,
+      focusText = _getPaletteClasses.focusText,
+      activeText = _getPaletteClasses.activeText,
+      border = _getPaletteClasses.border,
+      hoverBorder = _getPaletteClasses.hoverBorder,
+      focusBorder = _getPaletteClasses.focusBorder,
+      activeBorder = _getPaletteClasses.activeBorder;
+
+  var sizeClass = size ? _Button_v1Module["default"]["size".concat(capitalize(size))] : '';
+  var shapeClass = shape ? _Button_v1Module["default"]["shape".concat(capitalize(shape))] : '';
+  var shouldStrike = disabledAppearance === _constants2.DISABLED_APPEARANCE.STRIKE && isDisabled;
+  var buttonClassName = (0, _compileClassNames3["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive), _defineProperty(_compileClassNames, text, !!text), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive), _defineProperty(_compileClassNames, border, !!border), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isReadOnly || isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isReadOnly || isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
+  var textClassName = (0, _compileClassNames3["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
+  return {
+    buttonClassName: buttonClassName,
+    textClassName: textClassName,
+    contentWrapperClass: overlayActive ? _Button_v1Module["default"].overlayHidden : _Button_v1Module["default"].contentWrapper,
+    loaderOverlayClass: _Button_v1Module["default"].loaderOverlay,
+    successOverlayClass: _Button_v1Module["default"].successOverlay
+  };
+}