esewa-ui-library 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +9 -8
  2. package/dist/components/AlertCard/eSewaAlertCard.d.ts +3 -3
  3. package/dist/components/AppBar/eSewaAppbar.d.ts +2 -2
  4. package/dist/components/Button/eSewaButton.d.ts +1 -1
  5. package/dist/components/Chip/eSewaChipGroup.d.ts +2 -1
  6. package/dist/components/Dialog/eSewaDialog.d.ts +2 -2
  7. package/dist/components/Icon/esIcon.d.ts +1 -0
  8. package/dist/components/Tag/eSewaTag.d.ts +1 -1
  9. package/dist/index.js +53 -30
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.modern.js +53 -30
  12. package/dist/index.modern.js.map +1 -1
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -92,10 +92,10 @@ export default App;
92
92
  | `variant` | `'primary' | 'warning' | 'danger' | 'info'` | `'primary'` | Determines the alert style |
93
93
  | `title` | `string` | `undefined` | Title of the alert |
94
94
  | `description` | `string` | `undefined` | Alert description text |
95
- | `descriptionIcon` | `string` | `undefined` | Icon class for the description |
95
+ | `descriptionIcon` | `string` | `React.ReactNode` | `undefined` | Icon class for the description |
96
96
  | `showDescriptionIcon` | `boolean` | `false` | Whether to show the description icon |
97
- | `titleIcon` | `string` | `undefined` | Icon class for the title |
98
- | `dismissIcon` | `string` | `undefined` | Icon class for the dismiss button |
97
+ | `titleIcon` | `string` | `React.ReactNode` | `undefined` | Icon class for the title |
98
+ | `dismissIcon` | `string` | `React.ReactNode` | `undefined` | Icon class for the dismiss button |
99
99
  | `showDismissIcon` | `boolean` | `false` | Whether to show the dismiss button |
100
100
  | `onDismiss` | `() => void` | `undefined` | Callback function when dismiss button is clicked |
101
101
  | `showCardFooter` | `boolean` | `false` | Whether to show the footer section |
@@ -145,7 +145,7 @@ export default App;
145
145
  | Prop Name | Type | Default | Description |
146
146
  |-----------------------|---------------------------|----------|-------------|
147
147
  | `title` | `string | any` | `undefined` | Title to display in the app bar |
148
- | `icon` | `string` | `'icon-back'` | Icon to display as the back button |
148
+ | `icon` | `string`| `React.ReactNode`| `'icon-back'` | Icon to display as the back button |
149
149
  | `imageUrl` | `string` | `undefined` | Image URL to display next to the title |
150
150
  | `onBackIconClick` | `() => void` | `() => {}` | Callback for the back icon click event |
151
151
  | `onTitleClick` | `() => void` | `() => {}` | Callback for the title click event |
@@ -153,7 +153,7 @@ export default App;
153
153
  | `onClick` | `() => void` | `() => {}` | Callback for the entire app bar click event |
154
154
  | `className` | `string` | `undefined` | Additional class for custom styling |
155
155
  | `titleposition` | `'left' | 'center' | 'right'` | `'center'` | Position of the title within the app bar |
156
- | `actionIcon` | `string` | `undefined` | Icon for the action button on the right side of the app bar |
156
+ | `actionIcon` | `string`| `React.ReactNode`| `undefined` | Icon for the action button on the right side of the app bar |
157
157
 
158
158
 
159
159
  # ESewaButton
@@ -199,7 +199,7 @@ export default App;
199
199
  | `outlined` | `boolean` | `false` | If `true`, the button will have an outline style. |
200
200
  | `className` | `string` | `''` | Additional CSS class(es) to apply to the button. |
201
201
  | `fullwidth` | `boolean` | `false` | If `true`, the button will span the full width of its container. |
202
- | `icon` | `string` | `
202
+ | `icon` | `string`| `React.ReactNode`| `
203
203
 
204
204
 
205
205
  ## Styling and Customization
@@ -478,6 +478,7 @@ The `ESewaChipGroup` component is a customizable chip group component built with
478
478
  | `required` | `boolean?` | `false` | If true, ensures that at least one chip is selected when the selection mode is `'multiple'`. |
479
479
  | `chips` | `ChipProps[]` | Required | An array of chips to display. Each chip includes a text label, an optional icon, and an ID. |
480
480
  | `className` | `string?` | `''` | Optional custom class name for styling the chip container. |
481
+ | `onChange` | `(selected: number[] | number) => void?` | `undefined` | Callback function to handle chip state change. |
481
482
 
482
483
  # ESewaDatePicker
483
484
 
@@ -619,7 +620,7 @@ export default App;
619
620
  |----------------------|------------------------------------------------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
620
621
  | `isOpen` | `boolean` | `false` | Controls the visibility of the dialog. |
621
622
  | `showLeftIcon` | `boolean` | `false` | Whether to show the left icon in the dialog header. |
622
- | `leftIcon` | `string` | `'icon-es-check'` | The icon class to be displayed in the left side of the dialog header. |
623
+ | `leftIcon` | `string` | `React.ReactNode` | `'icon-es-check'` | The icon class to be displayed in the left side of the dialog header. |
623
624
  | `showCloseIcon` | `boolean` | `false` | Whether to show the close icon in the dialog header. |
624
625
  | `closeIcon` | `string` | `'icon-es-close'` | The icon class for the close button. |
625
626
  | `okText` | `string` | `'OK'` | The text to be displayed on the OK button. |
@@ -1447,7 +1448,7 @@ const YourComponent = () => {
1447
1448
  | Name | Type | Default | Description |
1448
1449
  |----------------|----------------------|---------------|-----------------------------------------------------------------------------|
1449
1450
  | `text` | `string` | - | The text content to display inside the tag. |
1450
- | `icon` | `React.ReactNode` | `undefined` | An optional icon to display alongside the text. |
1451
+ | `icon` | `string` | `React.ReactNode` | `undefined` | An optional icon to display alongside the text. |
1451
1452
  | `variant` | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info'` | `'primary'` | Defines the tag's color scheme. Available variants: `primary`, `secondary`, `danger`, `success`, `warning`, `info`. |
1452
1453
  | `iconPosition` | `'start' | 'end'` | `'start'` | Defines the position of the icon. Choose between `start` (before text) or `end` (after text). |
1453
1454
  | `size` | `'normal' | 'small'` | `'normal'` | Defines the size of the tag. Available sizes: `normal`, `small`. |
package/dist/components/AlertCard/eSewaAlertCard.d.ts CHANGED
@@ -4,10 +4,10 @@ interface AlertCardProps {
4
4
  variant?: 'primary' | 'warning' | 'danger' | 'info';
5
5
  title?: string;
6
6
  description?: string;
7
- descriptionIcon?: string;
7
+ descriptionIcon?: string | React.ReactNode;
8
8
  showDescriptionIcon?: boolean;
9
- titleIcon?: string;
10
- dismissIcon?: string;
9
+ titleIcon?: string | React.ReactNode;
10
+ dismissIcon?: string | React.ReactNode;
11
11
  showDismissIcon?: boolean;
12
12
  onDismiss?: () => void;
13
13
  showCardFooter?: boolean;
package/dist/components/AppBar/eSewaAppbar.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  interface AppBarProps {
3
3
  title?: string | any;
4
- icon?: string;
4
+ icon?: string | React.ReactNode;
5
5
  imageUrl?: string;
6
6
  onBackIconClick?: () => void;
7
7
  onTitleClick?: () => void;
@@ -9,7 +9,7 @@ interface AppBarProps {
9
9
  onClick?: () => void;
10
10
  className?: string;
11
11
  titleposition?: 'left' | 'center' | 'right';
12
- actionIcon?: string;
12
+ actionIcon?: string | React.ReactNode;
13
13
  }
14
14
  export declare const ESewaAppBar: React.FC<AppBarProps>;
15
15
  export {};
package/dist/components/Button/eSewaButton.d.ts CHANGED
@@ -8,7 +8,7 @@ interface ButtonProps {
8
8
  outlined?: boolean;
9
9
  className?: string;
10
10
  fullwidth?: boolean;
11
- icon?: string;
11
+ icon?: string | React.ReactNode;
12
12
  label?: string;
13
13
  iconPlacement?: 'start' | 'end';
14
14
  iconClass?: string;
package/dist/components/Chip/eSewaChipGroup.d.ts CHANGED
@@ -4,10 +4,11 @@ interface ChipGroupProps {
4
4
  required?: boolean;
5
5
  chips: ChipProps[];
6
6
  className?: string;
7
+ onChange?: (selected: number[] | number) => void;
7
8
  }
8
9
  interface ChipProps {
9
10
  showIcon?: boolean;
10
- icon?: string;
11
+ icon?: string | React.ReactNode;
11
12
  text: string;
12
13
  id: number;
13
14
  }
package/dist/components/Dialog/eSewaDialog.d.ts CHANGED
@@ -2,9 +2,9 @@ import React from 'react';
2
2
  declare type DialogProps = {
3
3
  isOpen: boolean;
4
4
  showLeftIcon?: boolean;
5
- leftIcon?: string;
5
+ leftIcon?: string | React.ReactNode;
6
6
  showCloseIcon?: boolean;
7
- closeIcon?: string;
7
+ closeIcon?: string | React.ReactNode;
8
8
  okText?: string;
9
9
  cancelText?: string;
10
10
  title?: string;
package/dist/components/Icon/esIcon.d.ts CHANGED
@@ -5,6 +5,7 @@ interface IconProps {
5
5
  size?: number;
6
6
  iconPrimaryColor?: string;
7
7
  iconSecondaryColor?: string;
8
+ className?: string;
8
9
  }
9
10
  export declare const ESIcon: React.FC<IconProps>;
10
11
  export default ESIcon;
package/dist/components/Tag/eSewaTag.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  interface TagProps {
3
3
  text: string;
4
- icon?: React.ReactNode;
4
+ icon?: string | React.ReactNode;
5
5
  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info';
6
6
  iconPosition?: 'start' | 'end';
7
7
  size?: 'normal' | 'small';
package/dist/index.js CHANGED
@@ -63,9 +63,11 @@ var ESewaButton = function ESewaButton(_ref) {
63
63
  disabled: disabled
64
64
  }, React__default.createElement("div", {
65
65
  className: "flex " + (iconPlacement === 'start' ? 'flex-row' : 'flex-reverse')
66
- }, icon && React__default.createElement("i", {
66
+ }, icon && (typeof icon === 'string' ? React__default.createElement("i", {
67
67
  className: icon
68
- }, " "), iconClass && React__default.createElement("span", {
68
+ }, " ") : {
69
+ icon: icon
70
+ }), iconClass && React__default.createElement("span", {
69
71
  className: iconClass
70
72
  }), React__default.createElement("span", null, " ", children))));
71
73
  };
@@ -108,22 +110,22 @@ var ESewaAlertCard = function ESewaAlertCard(_ref) {
108
110
  className: 'alert-card--header'
109
111
  }, titleIcon && React__default.createElement("span", {
110
112
  className: 'alert-card--header--icon'
111
- }, React__default.createElement("i", {
113
+ }, typeof titleIcon === 'string' ? React__default.createElement("i", {
112
114
  className: titleIcon
113
- })), title && React__default.createElement("h3", {
115
+ }) : titleIcon), title && React__default.createElement("h3", {
114
116
  className: 'alert-card--header--title body1'
115
117
  }, title), showDismissIcon && React__default.createElement("span", {
116
118
  className: 'alert-card--header--dismiss-icon',
117
119
  onClick: onDismiss
118
- }, React__default.createElement("i", {
120
+ }, typeof dismissIcon === 'string' ? React__default.createElement("i", {
119
121
  className: dismissIcon
120
- }))), React__default.createElement("div", {
122
+ }) : dismissIcon)), React__default.createElement("div", {
121
123
  className: 'alert-card--description'
122
124
  }, showDescriptionIcon && React__default.createElement("span", {
123
125
  className: 'alert-card--description--icon'
124
- }, React__default.createElement("i", {
126
+ }, typeof descriptionIcon === 'string' ? React__default.createElement("i", {
125
127
  className: descriptionIcon
126
- })), description && React__default.createElement("p", {
128
+ }) : descriptionIcon), description && React__default.createElement("p", {
127
129
  className: 'card-text body2'
128
130
  }, description)), showCardFooter && React__default.createElement("div", {
129
131
  className: 'alert-card--footer'
@@ -186,7 +188,7 @@ var StyledAppBar = styled__default.header.attrs(function (_ref) {
186
188
  return {
187
189
  titleposition: titleposition
188
190
  };
189
- })(_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) {
191
+ })(_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) {
190
192
  return props.titleposition === 'left' ? 'flex-start' : props.titleposition === 'right' ? 'flex-end' : 'center';
191
193
  });
192
194
  var ESewaAppBar = function ESewaAppBar(_ref2) {
@@ -230,10 +232,10 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
230
232
  }, React__default.createElement("path", {
231
233
  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',
232
234
  fill: '#fff'
233
- })), icon && React__default.createElement("span", {
235
+ })), typeof icon === 'string' ? React__default.createElement("span", {
234
236
  className: icon
235
- })), React__default.createElement("div", {
236
- className: "e-app-bar--title-wrapper"
237
+ }) : icon), React__default.createElement("div", {
238
+ className: 'e-app-bar--title-wrapper'
237
239
  }, React__default.createElement("div", {
238
240
  className: 'e-app-bar--title',
239
241
  onClick: onTitleClick
@@ -247,9 +249,9 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
247
249
  }, titleText))), actionIcon && React__default.createElement("div", {
248
250
  className: 'e-app-bar--close-icon',
249
251
  onClick: onActionIconClick
250
- }, React__default.createElement("span", {
252
+ }, typeof actionIcon === 'string' ? React__default.createElement("span", {
251
253
  className: actionIcon
252
- }))));
254
+ }) : actionIcon)));
253
255
  };
254
256
 
255
257
  var _templateObject$4;
@@ -394,18 +396,18 @@ var ESewaDialog = function ESewaDialog(_ref) {
394
396
  className: 'dialog-header'
395
397
  }, showLeftIcon && React__default.createElement("div", {
396
398
  className: 'dialog-header-left-icon'
397
- }, React__default.createElement("span", {
399
+ }, typeof leftIcon === 'string' ? React__default.createElement("span", {
398
400
  className: leftIcon
399
- })), title && React__default.createElement("h4", {
401
+ }) : leftIcon), title && React__default.createElement("h4", {
400
402
  className: 'dialog-header-title'
401
403
  }, title), showCloseIcon && React__default.createElement("div", {
402
404
  className: 'dialog-header-close-icon',
403
405
  onClick: function onClick() {
404
406
  return closeDialog();
405
407
  }
406
- }, React__default.createElement("span", {
408
+ }, typeof closeIcon === 'string' ? React__default.createElement("span", {
407
409
  className: closeIcon
408
- }))), React__default.createElement("div", {
410
+ }) : closeIcon)), React__default.createElement("div", {
409
411
  className: 'dialog-body'
410
412
  }, React__default.createElement("div", {
411
413
  className: 'body2'
@@ -568,7 +570,7 @@ var ESewaImage = function ESewaImage(_ref2) {
568
570
 
569
571
  var _excluded$2 = ["type", "name", "label", "placeholder", "value", "checked", "min", "max", "step", "required", "readOnly", "disabled", "className", "onChange", "validationMessage", "autoFocus"];
570
572
  var _templateObject$a;
571
- var StyledInput = styled__default.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) {
573
+ var StyledInput = styled__default.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) {
572
574
  return props.theme['text-dark'];
573
575
  });
574
576
  var ESewaInputField = React.forwardRef(function (_ref, ref) {
@@ -6833,11 +6835,15 @@ var ESewaTag = function ESewaTag(_ref) {
6833
6835
  onClick: onClick
6834
6836
  }, icon && iconPosition === 'start' && React__default.createElement("span", {
6835
6837
  className: 'tag__icon'
6836
- }, icon), React__default.createElement("span", {
6838
+ }, typeof icon === 'string' ? React__default.createElement("span", {
6839
+ className: icon
6840
+ }) : icon), React__default.createElement("span", {
6837
6841
  className: 'tag__text'
6838
6842
  }, text), icon && iconPosition === 'end' && React__default.createElement("span", {
6839
6843
  className: 'tag__icon'
6840
- }, icon)));
6844
+ }, typeof icon === 'string' ? React__default.createElement("span", {
6845
+ className: icon
6846
+ }) : icon)));
6841
6847
  };
6842
6848
 
6843
6849
  var _templateObject$i;
@@ -6988,7 +6994,7 @@ var ESewaCarousel = function ESewaCarousel(_ref) {
6988
6994
 
6989
6995
  var _templateObject$k, _templateObject2;
6990
6996
  var ChipContainer = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 8px;\n"])));
6991
- var Chip = styled__default.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) {
6997
+ var Chip = styled__default.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) {
6992
6998
  var selected = _ref.selected;
6993
6999
  return selected ? 'var(--primary-500)' : 'var(--secondary-bg-light)';
6994
7000
  }, function (_ref2) {
@@ -6999,18 +7005,31 @@ var ESewaChipGroup = function ESewaChipGroup(_ref3) {
6999
7005
  var selection = _ref3.selection,
7000
7006
  required = _ref3.required,
7001
7007
  chips = _ref3.chips,
7002
- className = _ref3.className;
7008
+ className = _ref3.className,
7009
+ onChange = _ref3.onChange;
7003
7010
  var _useState = React.useState([]),
7004
7011
  selectedChips = _useState[0],
7005
7012
  setSelectedChips = _useState[1];
7006
7013
  var handleSelectChip = function handleSelectChip(id) {
7007
7014
  if (selection === 'single') {
7008
7015
  setSelectedChips([id]);
7016
+ onChange === null || onChange === void 0 ? void 0 : onChange(id);
7009
7017
  } else {
7010
7018
  setSelectedChips(function (prev) {
7011
- return prev.includes(id) ? required && prev.length === 1 ? prev : prev.filter(function (chipId) {
7012
- return chipId !== id;
7013
- }) : [].concat(prev, [id]);
7019
+ var updated;
7020
+ if (prev.includes(id)) {
7021
+ if (required && prev.length === 1) {
7022
+ updated = prev;
7023
+ } else {
7024
+ updated = prev.filter(function (chipId) {
7025
+ return chipId !== id;
7026
+ });
7027
+ }
7028
+ } else {
7029
+ updated = [].concat(prev, [id]);
7030
+ }
7031
+ onChange === null || onChange === void 0 ? void 0 : onChange(updated);
7032
+ return updated;
7014
7033
  });
7015
7034
  }
7016
7035
  };
@@ -7022,9 +7041,11 @@ var ESewaChipGroup = function ESewaChipGroup(_ref3) {
7022
7041
  onClick: function onClick() {
7023
7042
  return handleSelectChip(chip.id);
7024
7043
  }
7025
- }, chip.showIcon && chip.icon && React__default.createElement("i", {
7044
+ }, chip.showIcon && chip.icon && React__default.createElement("span", {
7045
+ className: "chip__icon"
7046
+ }, typeof chip.icon === 'string' ? React__default.createElement("i", {
7026
7047
  className: chip.icon
7027
- }), chip.text);
7048
+ }) : chip.icon), chip.text);
7028
7049
  }));
7029
7050
  };
7030
7051
 
@@ -7126,9 +7147,11 @@ var ESIcon = function ESIcon(_ref) {
7126
7147
  _ref$size = _ref.size,
7127
7148
  size = _ref$size === void 0 ? 28 : _ref$size,
7128
7149
  iconPrimaryColor = _ref.iconPrimaryColor,
7129
- iconSecondaryColor = _ref.iconSecondaryColor;
7150
+ iconSecondaryColor = _ref.iconSecondaryColor,
7151
+ _ref$className = _ref.className,
7152
+ className = _ref$className === void 0 ? '' : _ref$className;
7130
7153
  return React__default.createElement(StyledIcon, {
7131
- className: "es-" + icon,
7154
+ className: className + " " + icon,
7132
7155
  style: {
7133
7156
  fontSize: size,
7134
7157
  "--icon-primary-color": iconPrimaryColor,