esewa-ui-library 1.0.7 → 1.0.9

package/dist/index.modern.js

@@ -60,9 +60,11 @@ var ESewaButton = function ESewaButton(_ref) {
     disabled: disabled
   }, React__default.createElement("div", {
     className: "flex " + (iconPlacement === 'start' ? 'flex-row' : 'flex-reverse')
-  }, icon && React__default.createElement("i", {
+  }, icon && (typeof icon === 'string' ? React__default.createElement("i", {
     className: icon
-  }, " "), iconClass && React__default.createElement("span", {
+  }, " ") : {
+    icon: icon
+  }), iconClass && React__default.createElement("span", {
     className: iconClass
   }), React__default.createElement("span", null, " ", children))));
 };
@@ -105,22 +107,22 @@ var ESewaAlertCard = function ESewaAlertCard(_ref) {
     className: 'alert-card--header'
   }, titleIcon && React__default.createElement("span", {
     className: 'alert-card--header--icon'
-  }, React__default.createElement("i", {
+  }, typeof titleIcon === 'string' ? React__default.createElement("i", {
     className: titleIcon
-  })), title && React__default.createElement("h3", {
+  }) : titleIcon), title && React__default.createElement("h3", {
     className: 'alert-card--header--title body1'
   }, title), showDismissIcon && React__default.createElement("span", {
     className: 'alert-card--header--dismiss-icon',
     onClick: onDismiss
-  }, React__default.createElement("i", {
+  }, typeof dismissIcon === 'string' ? React__default.createElement("i", {
     className: dismissIcon
-  }))), React__default.createElement("div", {
+  }) : dismissIcon)), React__default.createElement("div", {
     className: 'alert-card--description'
   }, showDescriptionIcon && React__default.createElement("span", {
     className: 'alert-card--description--icon'
-  }, React__default.createElement("i", {
+  }, typeof descriptionIcon === 'string' ? React__default.createElement("i", {
     className: descriptionIcon
-  })), description && React__default.createElement("p", {
+  }) : descriptionIcon), description && React__default.createElement("p", {
     className: 'card-text body2'
   }, description)), showCardFooter && React__default.createElement("div", {
     className: 'alert-card--footer'
@@ -183,7 +185,7 @@ var StyledAppBar = styled.header.attrs(function (_ref) {
   return {
     titleposition: titleposition
   };
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  .e-app-bar {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    background-color: var(--appbar-bg-top);\n    padding: 7px 12px;\n    position: relative;\n    height: 42px;\n    // left: 0;\n    // right: 0;\n    gap: var(--values-value-8);\n\n    &--nav-icon, &--close-icon {\n      padding: 7px;\n      color: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Title section */\n    &--title-wrapper {\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      width: 100%;  // Ensures the title section takes full width to apply the alignment\n    }\n\n    &--title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      overflow: hidden;\n      // display: -webkit-box;\n      // -webkit-line-clamp: 1;\n      // line-clamp: 1;\n      // -webkit-box-orient: vertical;\n    }\n\n    &--title-image img {\n      width: 32px;\n      object-fit: cover;\n      // margin-left: -32px;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: var(--grid-borderradius-border-radius-xs);\n    }\n\n    &--title-label {\n      color: var(--white);\n      letter-spacing: 0.4px;\n      font-size: var(--values-value-16);\n      font-weight: 500;\n    }\n  }\n"])), function (props) {
+})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  .e-app-bar {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    background-color: var(--appbar-bg-top);\n    padding: 7px 12px;\n    position: relative;\n    height: 42px;\n    gap: var(--values-value-8);\n\n    &--nav-icon,\n    &--close-icon {\n      padding: 7px;\n      color: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Title section */\n    &--title-wrapper {\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      width: 100%; // Ensures the title section takes full width to apply the alignment\n    }\n\n    &--title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      overflow: hidden;\n    }\n\n    &--title-image img {\n      width: 32px;\n      object-fit: cover;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: var(--grid-borderradius-border-radius-xs);\n    }\n\n    &--title-label {\n      color: var(--white);\n      letter-spacing: 0.4px;\n      font-size: var(--values-value-16);\n      font-weight: 500;\n    }\n  }\n"])), function (props) {
   return props.titleposition === 'left' ? 'flex-start' : props.titleposition === 'right' ? 'flex-end' : 'center';
 });
 var ESewaAppBar = function ESewaAppBar(_ref2) {
@@ -227,10 +229,10 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
   }, React__default.createElement("path", {
     d: 'M15.4218 4.31438C15.8357 4.73135 15.8332 5.4049 15.4162 5.81879L7.64512 13.5324H22.9362C23.5237 13.5324 24 13.9801 24 14.5324C24 15.0847 23.5237 15.5324 22.9362 15.5324H7.76404L15.3644 22.1335C15.8079 22.5187 15.8552 23.1906 15.47 23.6342C15.0847 24.0777 14.4128 24.125 13.9693 23.7398L4.36625 15.3993C4.17619 15.2343 4.05889 15.0166 4.01719 14.7868C3.95669 14.4536 4.0559 14.0973 4.31438 13.8407L13.9174 4.30879C14.3344 3.8949 15.0079 3.8974 15.4218 4.31438Z',
     fill: '#fff'
-  })), icon && React__default.createElement("span", {
+  })), typeof icon === 'string' ? React__default.createElement("span", {
     className: icon
-  })), React__default.createElement("div", {
-    className: "e-app-bar--title-wrapper"
+  }) : icon), React__default.createElement("div", {
+    className: 'e-app-bar--title-wrapper'
   }, React__default.createElement("div", {
     className: 'e-app-bar--title',
     onClick: onTitleClick
@@ -244,9 +246,9 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
   }, titleText))), actionIcon && React__default.createElement("div", {
     className: 'e-app-bar--close-icon',
     onClick: onActionIconClick
-  }, React__default.createElement("span", {
+  }, typeof actionIcon === 'string' ? React__default.createElement("span", {
     className: actionIcon
-  }))));
+  }) : actionIcon)));
 };
 
 var _templateObject$4;
@@ -391,18 +393,18 @@ var ESewaDialog = function ESewaDialog(_ref) {
     className: 'dialog-header'
   }, showLeftIcon && React__default.createElement("div", {
     className: 'dialog-header-left-icon'
-  }, React__default.createElement("span", {
+  }, typeof leftIcon === 'string' ? React__default.createElement("span", {
     className: leftIcon
-  })), title && React__default.createElement("h4", {
+  }) : leftIcon), title && React__default.createElement("h4", {
     className: 'dialog-header-title'
   }, title), showCloseIcon && React__default.createElement("div", {
     className: 'dialog-header-close-icon',
     onClick: function onClick() {
       return closeDialog();
     }
-  }, React__default.createElement("span", {
+  }, typeof closeIcon === 'string' ? React__default.createElement("span", {
     className: closeIcon
-  }))), React__default.createElement("div", {
+  }) : closeIcon)), React__default.createElement("div", {
     className: 'dialog-body'
   }, React__default.createElement("div", {
     className: 'body2'
@@ -565,7 +567,7 @@ var ESewaImage = function ESewaImage(_ref2) {
 
 var _excluded$2 = ["type", "name", "label", "placeholder", "value", "checked", "min", "max", "step", "required", "readOnly", "disabled", "className", "onChange", "validationMessage", "autoFocus"];
 var _templateObject$a;
-var StyledInput = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  .flex-auto {\n    flex: 1 1 auto !important;\n  }\n  .full-width {\n    display: flex;\n    width: 100%;\n  }\n\n  label {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 17px;\n    letter-spacing: 0.15px;\n    color: ", ";\n  }\n\n  input {\n    flex-grow: 1;\n    border-radius: var(--values-value-8);      \n    padding: var(--values-value-10) var(--values-value-12);\n    color: var(--text-dark);\n    background: var(--input-bg);\n    transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n      box-shadow 0.2s;\n    appearance: none;\n    outline-color: transparent;\n    height: 48px;\n    border: 1px solid var(--default-input-border);\n    box-sizing: border-box;\n\n    &::placeholder {\n      color: var(--input-placeholder);\n      letter-spacing: 0.5px;\n      font-weight: 400;\n      opacity: 1;\n    }\n\n    &:focus-visible {\n      border: 1px solid var(--default-input-border);\n      outline: 1px solid var(--primary);\n    }\n    &.error {\n      border-color: var(--danger-border);\n      outline: none;\n    }\n\n    ::-ms-input-placeholder {\n      color: var(--input-placeholder);\n      font-weight: 400;\n      letter-spacing: 0.5px;\n      font-size: 16px;\n      line-height: 20px;\n    }\n  }\n\n  .validationMessage {\n    color: var(--danger-text);\n  }\n"])), function (props) {
+var StyledInput = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  .flex-auto {\n    flex: 1 1 auto !important;\n  }\n  .full-width {\n    display: flex;\n    width: 100%;\n  }\n\n  label {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 17px;\n    letter-spacing: 0.15px;\n    color: ", ";\n  }\n\n  input {\n    width: 100%;\n    border-radius: var(--values-value-8);      \n    padding: var(--values-value-10) var(--values-value-12);\n    color: var(--text-dark);\n    background: var(--input-bg);\n    transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n      box-shadow 0.2s;\n    appearance: none;\n    outline-color: transparent;\n    height: 48px;\n    border: 1px solid var(--default-input-border);\n    box-sizing: border-box;\n\n    &::placeholder {\n      color: var(--input-placeholder);\n      letter-spacing: 0.5px;\n      font-weight: 400;\n      opacity: 1;\n    }\n\n    &:focus-visible {\n      border: 1px solid var(--default-input-border);\n      outline: 1px solid var(--primary);\n    }\n    &.error {\n      border-color: var(--danger-border);\n      outline: none;\n    }\n\n    ::-ms-input-placeholder {\n      color: var(--input-placeholder);\n      font-weight: 400;\n      letter-spacing: 0.5px;\n      font-size: 16px;\n      line-height: 20px;\n    }\n  }\n\n  .validationMessage {\n    color: var(--danger-text);\n  }\n"])), function (props) {
   return props.theme['text-dark'];
 });
 var ESewaInputField = forwardRef(function (_ref, ref) {
@@ -6844,11 +6846,15 @@ var ESewaTag = function ESewaTag(_ref) {
     onClick: onClick
   }, icon && iconPosition === 'start' && React__default.createElement("span", {
     className: 'tag__icon'
-  }, icon), React__default.createElement("span", {
+  }, typeof icon === 'string' ? React__default.createElement("span", {
+    className: icon
+  }) : icon), React__default.createElement("span", {
     className: 'tag__text'
   }, text), icon && iconPosition === 'end' && React__default.createElement("span", {
     className: 'tag__icon'
-  }, icon)));
+  }, typeof icon === 'string' ? React__default.createElement("span", {
+    className: icon
+  }) : icon)));
 };
 
 var _templateObject$i;
@@ -6999,7 +7005,7 @@ var ESewaCarousel = function ESewaCarousel(_ref) {
 
 var _templateObject$k, _templateObject2;
 var ChipContainer = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px;\n"])));
-var Chip = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px;\n  border-radius: 16px;\n  cursor: pointer;\n  font-size: 14px;\n  background-color: ", ";\n  color: ", ";\n  &.border-radius-0 {\n    border-radius: var(--values-value-0);\n  }\n  &.border-radius-2 {\n    border-radius: var(--values-value-2);\n  }\n  &.border-radius-4 {\n    border-radius: var(--values-value-4);\n  }\n  &.border-radius-8 {\n    border-radius: var(--values-value-8);\n  }\n  &.border-radius-16 {\n    border-radius: var(--values-value-16);\n  }\n  i{\n    font-size: var(--values-value-12);\n  }\n"])), function (_ref) {
+var Chip = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px;\n  border-radius: 16px;\n  cursor: pointer;\n  font-size: 14px;\n  background-color: ", ";\n  color: ", ";\n  &.border-radius-0 {\n    border-radius: var(--values-value-0);\n  }\n  &.border-radius-2 {\n    border-radius: var(--values-value-2);\n  }\n  &.border-radius-4 {\n    border-radius: var(--values-value-4);\n  }\n  &.border-radius-8 {\n    border-radius: var(--values-value-8);\n  }\n  &.border-radius-16 {\n    border-radius: var(--values-value-16);\n  }\n  i{\n    font-size: var(--values-value-12);\n  }\n  .chip__icon {\n    display: flex;\n    align-items: center;\n    font-size: var(--values-value-12);\n  }\n"])), function (_ref) {
   var selected = _ref.selected;
   return selected ? 'var(--primary-500)' : 'var(--secondary-bg-light)';
 }, function (_ref2) {
@@ -7010,18 +7016,31 @@ var ESewaChipGroup = function ESewaChipGroup(_ref3) {
   var selection = _ref3.selection,
     required = _ref3.required,
     chips = _ref3.chips,
-    className = _ref3.className;
+    className = _ref3.className,
+    onChange = _ref3.onChange;
   var _useState = useState([]),
     selectedChips = _useState[0],
     setSelectedChips = _useState[1];
   var handleSelectChip = function handleSelectChip(id) {
     if (selection === 'single') {
       setSelectedChips([id]);
+      onChange === null || onChange === void 0 ? void 0 : onChange(id);
     } else {
       setSelectedChips(function (prev) {
-        return prev.includes(id) ? required && prev.length === 1 ? prev : prev.filter(function (chipId) {
-          return chipId !== id;
-        }) : [].concat(prev, [id]);
+        var updated;
+        if (prev.includes(id)) {
+          if (required && prev.length === 1) {
+            updated = prev;
+          } else {
+            updated = prev.filter(function (chipId) {
+              return chipId !== id;
+            });
+          }
+        } else {
+          updated = [].concat(prev, [id]);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+        return updated;
       });
     }
   };
@@ -7033,9 +7052,11 @@ var ESewaChipGroup = function ESewaChipGroup(_ref3) {
       onClick: function onClick() {
         return handleSelectChip(chip.id);
       }
-    }, chip.showIcon && chip.icon && React__default.createElement("i", {
+    }, chip.showIcon && chip.icon && React__default.createElement("span", {
+      className: "chip__icon"
+    }, typeof chip.icon === 'string' ? React__default.createElement("i", {
       className: chip.icon
-    }), chip.text);
+    }) : chip.icon), chip.text);
   }));
 };
 
@@ -7137,9 +7158,11 @@ var ESIcon = function ESIcon(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 28 : _ref$size,
     iconPrimaryColor = _ref.iconPrimaryColor,
-    iconSecondaryColor = _ref.iconSecondaryColor;
+    iconSecondaryColor = _ref.iconSecondaryColor,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
   return React__default.createElement(StyledIcon, {
-    className: "es-" + icon,
+    className: className + " " + icon,
     style: {
       fontSize: size,
       "--icon-primary-color": iconPrimaryColor,