@zohodesk/components 1.6.7 → 1.6.11-exp-6

package/lib/Typography/css/Typography.module.css

@@ -177,6 +177,10 @@
   white-space: pre-wrap
 }
 
+.whiteSpace_breakSpaces {
+  white-space: break-spaces;
+}
+
 
 
 /*...............Font Size Start.........*/

package/lib/Typography/css/cssJSLogic.js

@@ -17,31 +17,63 @@ function cssJSLogic(_ref) {
   var props = _ref.props,
       style = _ref.style;
   var $flag_reset = props.$flag_reset,
+      shouldReset = props.shouldReset,
       $flag_dotted = props.$flag_dotted,
+      isDotted = props.isDotted,
       $ui_size = props.$ui_size,
+      size = props.size,
       $ui_lineClamp = props.$ui_lineClamp,
+      lineClamp = props.lineClamp,
       $ui_lineHeight = props.$ui_lineHeight,
+      lineHeight = props.lineHeight,
       $ui_display = props.$ui_display,
+      display = props.display,
       $ui_weight = props.$ui_weight,
+      weight = props.weight,
       $ui_typeFace = props.$ui_typeFace,
+      typeFace = props.typeFace,
       $ui_textAlign = props.$ui_textAlign,
+      textAlign = props.textAlign,
       $ui_letterSpacing = props.$ui_letterSpacing,
+      letterSpacing = props.letterSpacing,
       $ui_transform = props.$ui_transform,
+      transform = props.transform,
       $ui_decoration = props.$ui_decoration,
+      decoration = props.decoration,
       $ui_className = props.$ui_className,
+      customClass = props.customClass,
       $ui_wordBreak = props.$ui_wordBreak,
+      wordBreak = props.wordBreak,
       $ui_wordWrap = props.$ui_wordWrap,
-      $ui_whiteSpace = props.$ui_whiteSpace;
+      wordWrap = props.wordWrap,
+      $ui_whiteSpace = props.$ui_whiteSpace,
+      whiteSpace = props.whiteSpace;
+  var finalReset = shouldReset !== undefined ? shouldReset : $flag_reset;
+  var finalDotted = isDotted !== undefined ? isDotted : $flag_dotted;
+  var finalSize = size !== undefined ? size : $ui_size;
+  var finalLineClamp = lineClamp !== undefined ? lineClamp : $ui_lineClamp;
+  var finalDisplay = display !== undefined ? display : $ui_display;
+  var finalWeight = weight !== undefined ? weight : $ui_weight;
+  var finalTypeFace = typeFace !== undefined ? typeFace : $ui_typeFace;
+  var finalTextAlign = textAlign !== undefined ? textAlign : $ui_textAlign;
+  var finalTransform = transform !== undefined ? transform : $ui_transform;
+  var finalDecoration = decoration !== undefined ? decoration : $ui_decoration;
+  var finalClassName = customClass !== undefined ? customClass : $ui_className;
+  var finalWordBreak = wordBreak !== undefined ? wordBreak : $ui_wordBreak;
+  var finalWordWrap = wordWrap !== undefined ? wordWrap : $ui_wordWrap;
+  var finalWhiteSpace = whiteSpace !== undefined ? whiteSpace : $ui_whiteSpace;
+  var finalLineHeight = lineHeight !== undefined ? lineHeight : $ui_lineHeight;
+  var finalLetterSpacing = letterSpacing !== undefined ? letterSpacing : $ui_letterSpacing;
 
-  if ($ui_letterSpacing) {
-    $ui_letterSpacing = _utils2.letterspacingMapping[$ui_letterSpacing];
+  if (finalLetterSpacing) {
+    finalLetterSpacing = _utils2.letterspacingMapping[finalLetterSpacing];
   }
 
-  if ($ui_lineHeight) {
-    $ui_lineHeight = _utils2.lineheightMapping[$ui_lineHeight];
+  if (finalLineHeight) {
+    finalLineHeight = _utils2.lineheightMapping[finalLineHeight];
   }
 
-  var typographyClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.reset, $flag_reset), _defineProperty(_compileClassNames, style.dotted, $flag_dotted), _defineProperty(_compileClassNames, style["size".concat($ui_size)], !!$ui_size), _defineProperty(_compileClassNames, style["lineclamp_".concat($ui_lineClamp)], !!$ui_lineClamp), _defineProperty(_compileClassNames, style["lineheight_".concat($ui_lineHeight)], !!$ui_lineHeight), _defineProperty(_compileClassNames, style["display_".concat($ui_display)], !!$ui_display), _defineProperty(_compileClassNames, style["font_".concat($ui_weight)], !!$ui_weight), _defineProperty(_compileClassNames, style["fontStyles_".concat($ui_typeFace)], !!$ui_typeFace), _defineProperty(_compileClassNames, style["textalign_".concat($ui_textAlign)], !!$ui_textAlign), _defineProperty(_compileClassNames, style["letterspacing_".concat($ui_letterSpacing)], !!$ui_letterSpacing), _defineProperty(_compileClassNames, style["transform_".concat($ui_transform)], !!$ui_transform), _defineProperty(_compileClassNames, style["decoration_".concat($ui_decoration)], !!$ui_decoration), _defineProperty(_compileClassNames, $ui_className, !!$ui_className), _defineProperty(_compileClassNames, style["wordBreak_".concat($ui_wordBreak)], !!$ui_wordBreak), _defineProperty(_compileClassNames, style["wordWrap_".concat($ui_wordWrap)], !!$ui_wordWrap), _defineProperty(_compileClassNames, style["whiteSpace_".concat($ui_whiteSpace)], !!$ui_whiteSpace), _compileClassNames));
+  var typographyClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.reset, finalReset), _defineProperty(_compileClassNames, style.dotted, finalDotted), _defineProperty(_compileClassNames, style["size".concat(finalSize)], !!finalSize), _defineProperty(_compileClassNames, style["lineclamp_".concat(finalLineClamp)], !!finalLineClamp), _defineProperty(_compileClassNames, style["lineheight_".concat(finalLineHeight)], !!finalLineHeight), _defineProperty(_compileClassNames, style["display_".concat(finalDisplay)], !!finalDisplay), _defineProperty(_compileClassNames, style["font_".concat(finalWeight)], !!finalWeight), _defineProperty(_compileClassNames, style["fontStyles_".concat(finalTypeFace)], !!finalTypeFace), _defineProperty(_compileClassNames, style["textalign_".concat(finalTextAlign)], !!finalTextAlign), _defineProperty(_compileClassNames, style["letterspacing_".concat(finalLetterSpacing)], !!finalLetterSpacing), _defineProperty(_compileClassNames, style["transform_".concat(finalTransform)], !!finalTransform), _defineProperty(_compileClassNames, style["decoration_".concat(finalDecoration)], !!finalDecoration), _defineProperty(_compileClassNames, finalClassName, !!finalClassName), _defineProperty(_compileClassNames, style["wordBreak_".concat(finalWordBreak)], !!finalWordBreak), _defineProperty(_compileClassNames, style["wordWrap_".concat(finalWordWrap)], !!finalWordWrap), _defineProperty(_compileClassNames, style["whiteSpace_".concat(finalWhiteSpace)], !!finalWhiteSpace), _compileClassNames));
   return {
     typographyClass: typographyClass
   };

package/lib/Typography/props/defaultProps.js

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 var defaultProps = {
   $ui_className: '',
   $ui_tagName: 'div',
   $flag_reset: false,
   $flag_dotted: false,
-  $tagAttributes_text: {},
-  $a11yAttributes_text: {},
-  $ui_highlightConfig: {}
+  $tagAttributes_text: _constants.DUMMY_OBJECT,
+  $a11yAttributes_text: _constants.DUMMY_OBJECT,
+  $ui_highlightConfig: _constants.DUMMY_OBJECT
 };
 exports.defaultProps = defaultProps;

package/lib/Typography/props/propTypes.js

@@ -15,49 +15,93 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+// Define prop types once to avoid duplication
+var propTypeDefinitions = {
+  shouldReset: _propTypes["default"].bool,
+  display: _propTypes["default"].oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  weight: _propTypes["default"].oneOf(['regular', 'light', 'semibold', 'bold']),
+  isDotted: _propTypes["default"].bool,
+  textAlign: _propTypes["default"].oneOf(['left', 'right', 'center', 'justify']),
+  transform: _propTypes["default"].oneOf(['default', 'upper', 'lower', 'capital']),
+  lineClamp: _propTypes["default"].oneOf(['1', '2', '3', '4', '5']),
+  typeFace: _propTypes["default"].oneOf(['normal', 'italic']),
+  decoration: _propTypes["default"].oneOf(['default', 'underline', 'strike', 'overline']),
+  size: _propTypes["default"].oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
+  lineHeight: _propTypes["default"].oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
+  letterSpacing: _propTypes["default"].oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
+  wordBreak: _propTypes["default"].oneOf(['breakAll', 'keepAll', 'breakWord']),
+  wordWrap: _propTypes["default"].oneOf(['normal', 'break']),
+  whiteSpace: _propTypes["default"].oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap', 'breakSpaces']),
+  customClass: _propTypes["default"].string
+};
 var typoStyleProps = {
-  $flag_reset: _propTypes["default"].bool,
-  $flag_dotted: _propTypes["default"].bool,
-  $ui_display: _propTypes["default"].oneOf(['block', 'inlineBlock', 'inline', 'initial']),
-  $ui_weight: _propTypes["default"].oneOf(['regular', 'light', 'semibold', 'bold']),
-  $ui_textAlign: _propTypes["default"].oneOf(['left', 'right', 'center', 'justify']),
-  $ui_transform: _propTypes["default"].oneOf(['default', 'upper', 'lower', 'capital']),
-  $ui_lineClamp: _propTypes["default"].oneOf(['1', '2', '3', '4', '5']),
-  $ui_typeFace: _propTypes["default"].oneOf(['normal', 'italic']),
-  $ui_decoration: _propTypes["default"].oneOf(['default', 'underline', 'strike', 'overline']),
-  $ui_size: _propTypes["default"].oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
-  $ui_lineHeight: _propTypes["default"].oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
-  $ui_letterSpacing: _propTypes["default"].oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
-  $ui_wordBreak: _propTypes["default"].oneOf(['breakAll', 'keepAll', 'breakWord']),
-  $ui_wordWrap: _propTypes["default"].oneOf(['normal', 'break']),
-  $ui_whiteSpace: _propTypes["default"].oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
-  $ui_className: _propTypes["default"].string
+  $flag_reset: propTypeDefinitions.shouldReset,
+  shouldReset: propTypeDefinitions.shouldReset,
+  $flag_dotted: propTypeDefinitions.isDotted,
+  isDotted: propTypeDefinitions.isDotted,
+  $ui_display: propTypeDefinitions.display,
+  display: propTypeDefinitions.display,
+  $ui_weight: propTypeDefinitions.weight,
+  weight: propTypeDefinitions.weight,
+  $ui_textAlign: propTypeDefinitions.textAlign,
+  textAlign: propTypeDefinitions.textAlign,
+  $ui_transform: propTypeDefinitions.transform,
+  transform: propTypeDefinitions.transform,
+  $ui_lineClamp: propTypeDefinitions.lineClamp,
+  lineClamp: propTypeDefinitions.lineClamp,
+  $ui_typeFace: propTypeDefinitions.typeFace,
+  typeFace: propTypeDefinitions.typeFace,
+  $ui_decoration: propTypeDefinitions.decoration,
+  decoration: propTypeDefinitions.decoration,
+  $ui_size: propTypeDefinitions.size,
+  size: propTypeDefinitions.size,
+  $ui_lineHeight: propTypeDefinitions.lineHeight,
+  lineHeight: propTypeDefinitions.lineHeight,
+  $ui_letterSpacing: propTypeDefinitions.letterSpacing,
+  letterSpacing: propTypeDefinitions.letterSpacing,
+  $ui_wordBreak: propTypeDefinitions.wordBreak,
+  wordBreak: propTypeDefinitions.wordBreak,
+  $ui_wordWrap: propTypeDefinitions.wordWrap,
+  wordWrap: propTypeDefinitions.wordWrap,
+  $ui_whiteSpace: propTypeDefinitions.whiteSpace,
+  whiteSpace: propTypeDefinitions.whiteSpace,
+  $ui_className: propTypeDefinitions.customClass,
+  customClass: propTypeDefinitions.customClass
 };
 var highlightProps = {
   customStyle: _propTypes["default"].object,
   shouldExcludeIndices: _propTypes["default"].bool,
   isCaseSensitive: _propTypes["default"].bool,
   isWholeWord: _propTypes["default"].bool,
-  tagName: _propTypes["default"].string,
+  as: _propTypes["default"].string,
   renderHighlight: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   styleConfiguration: _propTypes["default"].shape(typoStyleProps)
 };
 
+var highlightDataItemShape = _propTypes["default"].shape(_objectSpread({
+  text: _propTypes["default"].string,
+  index: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].number), _propTypes["default"].number])
+}, highlightProps));
+
+var highlightConfigShape = _propTypes["default"].shape(_objectSpread({
+  data: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, highlightDataItemShape]))
+}, highlightProps));
+
 var propTypes = _objectSpread(_objectSpread({}, typoStyleProps), {}, {
   children: _propTypes["default"].node,
   $ui_tagName: _propTypes["default"].string,
+  as: _propTypes["default"].string,
   $i18n_dataTitle: _propTypes["default"].string,
+  dataTitle: _propTypes["default"].string,
   testId: _propTypes["default"].string,
   customId: _propTypes["default"].string,
   customStyle: _propTypes["default"].object,
   $a11yAttributes_text: _propTypes["default"].object,
+  a11yAttributes: _propTypes["default"].object,
   $tagAttributes_text: _propTypes["default"].object,
-  $ui_highlightConfig: _propTypes["default"].shape(_objectSpread({
-    data: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape(_objectSpread({
-      text: _propTypes["default"].string,
-      index: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].number), _propTypes["default"].number])
-    }, highlightProps))]))
-  }, highlightProps))
+  tagAttributes: _propTypes["default"].object,
+  $ui_highlightConfig: highlightConfigShape,
+  highlightConfig: highlightConfigShape
 });
 
 exports.propTypes = propTypes;

package/lib/Typography/utils/textHighlighter.js

@@ -24,6 +24,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function highlightText(config) {
+  var _ref;
+
   var sourceText = config.text,
       highlightData = config.data,
       _config$styleConfigur = config.styleConfiguration,
@@ -34,9 +36,10 @@ function highlightText(config) {
       enableCaseSensitiveMatch = _config$isCaseSensiti === void 0 ? false : _config$isCaseSensiti,
       _config$isWholeWord = config.isWholeWord,
       matchWholeWordOnly = _config$isWholeWord === void 0 ? false : _config$isWholeWord,
-      _config$tagName = config.tagName,
-      wrapperTagName = _config$tagName === void 0 ? 'span' : _config$tagName,
+      asTag = config.as,
+      tagNameLegacy = config.tagName,
       customRenderer = config.renderHighlight;
+  var wrapperTagName = (_ref = asTag !== null && asTag !== void 0 ? asTag : tagNameLegacy) !== null && _ref !== void 0 ? _ref : 'span';
 
   if (!sourceText || !(highlightData !== null && highlightData !== void 0 && highlightData.length)) {
     return sourceText;
@@ -78,7 +81,7 @@ function highlightText(config) {
       shouldExcludeIndices: itemConfiguration.shouldExcludeIndices !== undefined ? itemConfiguration.shouldExcludeIndices : shouldExcludeIndices,
       isCaseSensitive: itemConfiguration.isCaseSensitive !== undefined ? itemConfiguration.isCaseSensitive : enableCaseSensitiveMatch,
       matchWholeWordOnly: itemConfiguration.isWholeWord !== undefined ? itemConfiguration.isWholeWord : matchWholeWordOnly,
-      wrapperTagName: itemConfiguration.tagName !== undefined ? itemConfiguration.tagName : wrapperTagName,
+      wrapperTagName: itemConfiguration.as !== undefined ? itemConfiguration.as : itemConfiguration.tagName !== undefined ? itemConfiguration.tagName : wrapperTagName,
       customStyle: customStyle,
       customRenderer: itemConfiguration.renderHighlight !== undefined ? itemConfiguration.renderHighlight : customRenderer,
       highlightClasses: typographyClass,

package/lib/shared/ArrowIcon/ArrowIcon.module.css

@@ -4,9 +4,10 @@
 
 .arrowIcon {
   composes: varClass;
+  margin-block:0 ;
+  margin-inline: var(--zd_size5) ;
   color: var(--local-arrowIcon-color);
   transition: transform var(--zd_transition3);
-  margin: 0 var(--zd_size5) ;
 }
 .transparentContainer .arrowIcon {
   opacity: 0;
@@ -39,4 +40,4 @@
 
 .readonly {
   composes: curdefault from '../../common/common.module.css';
-}
+}

package/lib/v1/Button/Button.js

@@ -0,0 +1,239 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
+
+var _renderNode = _interopRequireWildcard(require("@zohodesk/utils/es/renderNode"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
+var _constants2 = require("./constants");
+
+var _Loader = _interopRequireDefault(require("./_shared/Loader/Loader"));
+
+var _SuccessTick = _interopRequireDefault(require("./_shared/SuccessTick/SuccessTick"));
+
+var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 getTypographySize = function getTypographySize(size) {
+  return _constants2.TYPOGRAPHY_SIZE_MAP[size] || '13';
+};
+
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
+  var palette = props.palette,
+      bgAppearance = props.bgAppearance,
+      borderAppearance = props.borderAppearance,
+      variant = props.variant,
+      status = props.status,
+      loaderPlacement = props.loaderPlacement,
+      size = props.size,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      iconPlacement = props.iconPlacement,
+      renderIcon = props.renderIcon,
+      renderBefore = props.renderBefore,
+      renderAfter = props.renderAfter,
+      renderLoader = props.renderLoader,
+      renderSuccess = props.renderSuccess,
+      children = props.children,
+      type = props.type,
+      onClick = props.onClick,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
+      isSelected = props.isSelected,
+      shape = props.shape,
+      paletteShade = props.paletteShade,
+      disabledAppearance = props.disabledAppearance,
+      title = props.title,
+      customProps = props.customProps,
+      customAttributes = props.customAttributes,
+      a11yAttributes = props.a11yAttributes,
+      customId = props.customId,
+      testId = props.testId;
+  var isLoading = status === _constants2.STATUS.LOADING;
+  var isSuccess = status === _constants2.STATUS.SUCCESS;
+  var isDisabledState = isDisabled || isLoading;
+  var isInteractionDisabled = isDisabledState || isReadOnly;
+  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+  var _customProps$text = customProps.text,
+      contentProps = _customProps$text === void 0 ? _constants.DUMMY_OBJECT : _customProps$text,
+      _customProps$icon = customProps.icon,
+      iconProps = _customProps$icon === void 0 ? _constants.DUMMY_OBJECT : _customProps$icon;
+  var iconTagAttributes = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, iconProps.tagAttributes || _constants.DUMMY_OBJECT), {}, {
+      'data-test-id': testId ? "".concat(testId, "_icon") : undefined
+    });
+  }, [iconProps.tagAttributes, testId]);
+  var classes = (0, _react.useMemo)(function () {
+    return (0, _cssJSLogic["default"])({
+      props: props
+    });
+  }, [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
+  var loaderOverlayClass = classes.loaderOverlayClass,
+      successOverlayClass = classes.successOverlayClass,
+      contentWrapperClass = classes.contentWrapperClass,
+      textClassName = classes.textClassName,
+      buttonClassName = classes.buttonClassName;
+  var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
+
+  var _handleClick = function _handleClick(event) {
+    if (isInteractionDisabled) {
+      return;
+    }
+
+    onClick(event);
+  };
+
+  var _renderLoader = function _renderLoader() {
+    if (!isLoading) {
+      return null;
+    }
+
+    if ((0, _renderNode.isRenderable)(renderLoader)) {
+      return (0, _renderNode["default"])(renderLoader, {
+        status: status
+      });
+    }
+
+    var loaderClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: loaderClassName,
+      testId: testId ? "".concat(testId, "_loader") : undefined
+    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
+  };
+
+  var _renderSuccess = function _renderSuccess() {
+    if (!isSuccess) {
+      return null;
+    }
+
+    if ((0, _renderNode.isRenderable)(renderSuccess)) {
+      return (0, _renderNode["default"])(renderSuccess, {
+        status: status
+      });
+    }
+
+    var successClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: successClassName,
+      testId: testId ? "".concat(testId, "_success") : undefined
+    }, /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], null));
+  };
+
+  var _renderIconNode = function _renderIconNode() {
+    if (!showIcon) {
+      return null;
+    }
+
+    if ((0, _renderNode.isRenderable)(renderIcon)) {
+      return (0, _renderNode["default"])(renderIcon);
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
+      name: iconName,
+      size: iconSize,
+      tagAttributes: iconTagAttributes,
+      dataId: testId ? "".concat(testId, "_icon") : undefined
+    }));
+  };
+
+  var _renderBeforeNode = function _renderBeforeNode() {
+    if (!(0, _renderNode.isRenderable)(renderBefore)) {
+      return null;
+    }
+
+    return (0, _renderNode["default"])(renderBefore, props);
+  };
+
+  var _renderAfterNode = function _renderAfterNode() {
+    if (!(0, _renderNode.isRenderable)(renderAfter)) {
+      return null;
+    }
+
+    return (0, _renderNode["default"])(renderAfter, props);
+  };
+
+  var _renderContent = function _renderContent() {
+    var shouldShowText = variant !== _constants2.VARIANT.ICON && children !== undefined && children !== null;
+    var showLoaderStart = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
+    var showLoaderAfter = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
+    var showSuccessStart = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
+    var showSuccessAfter = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+      $ui_displayMode: "flex",
+      $ui_direction: "row",
+      $flag_shrink: true,
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: contentWrapperClass
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, contentProps, {
+      $ui_className: textClassName,
+      $ui_size: getTypographySize(size),
+      $flag_dotted: variant !== _constants2.VARIANT.ICON
+    }), children) : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+  };
+
+  var containerAttributes = _objectSpread(_objectSpread({}, customAttributes), {}, {
+    'data-id': customId,
+    'data-test-id': testId,
+    'data-title': title
+  });
+
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
+    ref: ref,
+    type: type,
+    className: buttonClassName,
+    "aria-busy": isLoading,
+    "aria-disabled": isDisabledState,
+    "aria-readonly": isReadOnly,
+    "aria-pressed": isSelected,
+    onClick: _handleClick
+  }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
+});
+Button.propTypes = _propTypes["default"];
+Button.defaultProps = _defaultProps["default"];
+Button.displayName = 'Button';
+
+var _default = (0, _ComponentRegistry.withComponentRegistrar)( /*#__PURE__*/(0, _react.memo)(Button), {
+  name: 'ZDC_V1_Button'
+});
+
+exports["default"] = _default;

package/lib/v1/Button/README.md

@@ -0,0 +1,110 @@
+# Button
+
+A composable button component with palette-based theming, loading/success status states, and flexible icon/content slots.
+
+## Import
+
+```jsx
+import Button from '@zohodesk/components/es/v1/Button/Button';
+```
+
+## Usage
+
+### Default
+
+```jsx
+<Button customId="saveBtn" testId="saveBtn">
+  Save changes
+</Button>
+```
+
+### With Palette Variants
+
+```jsx
+<Button palette="primary">Save</Button>
+<Button palette="danger">Delete</Button>
+<Button palette="success">Confirm</Button>
+```
+
+### With Icon
+
+```jsx
+<Button variant="icon" iconName="ZD-plus" iconSize={20} />
+
+<Button variant="iconWithText" iconName="ZD-plus" iconPlacement="left">
+  Add Item
+</Button>
+```
+
+### Loading State
+
+```jsx
+<Button status="loading" loaderPlacement="overlay">
+  Saving...
+</Button>
+
+<Button status="loading" loaderPlacement="start">
+  Loading
+</Button>
+```
+
+### Disabled / Read Only
+
+```jsx
+<Button isDisabled>Disabled</Button>
+<Button isReadOnly>Read Only</Button>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `customId` | `string` | — | `data-id` attribute for automation |
+| `testId` | `string` | — | `data-test-id` attribute for testing |
+| `palette` | `oneOf: default, primary, secondary, danger, success` | `default` | Color palette |
+| `bgAppearance` | `oneOf: filled, onHover, none` | `filled` | Background behavior |
+| `borderAppearance` | `oneOf: default, onHover, none` | `default` | Border behavior |
+| `variant` | `oneOf: text, icon, iconWithText` | `text` | Display variant |
+| `size` | `oneOf: small, medium, large, full` | `medium` | Size variant |
+| `status` | `oneOf: default, loading, success` | `default` | Status state |
+| `loaderPlacement` | `oneOf: start, end, overlay` | `overlay` | Where loader appears |
+| `iconName` | `string` | — | Icon name from `@zohodesk/icons` |
+| `iconSize` | `number` | `16` | Icon size in pixels |
+| `iconPlacement` | `oneOf: left, right` | `left` | Icon position relative to text |
+| `paletteShade` | `oneOf: default, lighter` | `default` | Shade variant |
+| `disabledAppearance` | `oneOf: none, dull, strike` | `dull` | Disabled visual style |
+| `renderIcon` | `node \| func` | — | Custom icon render slot |
+| `renderBefore` | `node \| func` | — | Slot before main content |
+| `renderAfter` | `node \| func` | — | Slot after main content |
+| `renderLoader` | `node \| func` | — | Custom loader render slot |
+| `renderSuccess` | `node \| func` | — | Custom success render slot |
+| `children` | `node` | — | Button text content |
+| `type` | `oneOf: button, submit, reset` | `button` | HTML button type |
+| `onClick` | `func` | — | Click event handler |
+| `isDisabled` | `bool` | `false` | Disables the button |
+| `isReadOnly` | `bool` | `false` | Read-only state |
+| `isSelected` | `bool` | `false` | Selected/pressed state |
+| `isRounded` | `bool` | `false` | Rounded border radius |
+| `title` | `string` | — | Title/tooltip text |
+
+## Customization
+
+### Parts
+
+| Part | Element | Description |
+|---|---|---|
+| `wrapper` | `<button>` root | The outermost button element |
+| `text` | Typography | The text label |
+
+### CSS Custom Properties
+
+The `.varClass` block in `Button.module.css` defines local custom properties that size variants override:
+
+| Property | Default | Description |
+|---|---|---|
+| `--local-Button-radius` | `4px` | Border radius |
+| `--local-Button-gap` | `8px` | Content gap |
+| `--local-Button-padding-block` | `6px` | Block padding |
+| `--local-Button-padding-inline` | `15px` | Inline padding |
+| `--local-Button-min-width` | `90px` | Minimum width |
+| `--local-Button-spinner-size` | `16px` | Spinner/tick size |