esewa-ui-library 1.0.6 → 1.0.8

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 +10 -9
  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 +1 -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 +37 -25
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.modern.js +37 -25
  12. package/dist/index.modern.js.map +1 -1
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -36,6 +36,7 @@ export default App;
36
36
  - **Card**: `ESewaCard`
37
37
  - **Carousel**: `ESewaCarousel`
38
38
  - **Checkbox**: `ESewaCheckbox`
39
+ - **Chipgroup**: `ESewaChipGroup`
39
40
  - **Datepicker**: `ESewaDatepicker`
40
41
  - **Dialog**: `ESewaDialog`
41
42
  - **Divider**: `ESewaDivider`
@@ -91,10 +92,10 @@ export default App;
91
92
  | `variant` | `'primary' | 'warning' | 'danger' | 'info'` | `'primary'` | Determines the alert style |
92
93
  | `title` | `string` | `undefined` | Title of the alert |
93
94
  | `description` | `string` | `undefined` | Alert description text |
94
- | `descriptionIcon` | `string` | `undefined` | Icon class for the description |
95
+ | `descriptionIcon` | `string` | `React.ReactNode` | `undefined` | Icon class for the description |
95
96
  | `showDescriptionIcon` | `boolean` | `false` | Whether to show the description icon |
96
- | `titleIcon` | `string` | `undefined` | Icon class for the title |
97
- | `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 |
98
99
  | `showDismissIcon` | `boolean` | `false` | Whether to show the dismiss button |
99
100
  | `onDismiss` | `() => void` | `undefined` | Callback function when dismiss button is clicked |
100
101
  | `showCardFooter` | `boolean` | `false` | Whether to show the footer section |
@@ -144,7 +145,7 @@ export default App;
144
145
  | Prop Name | Type | Default | Description |
145
146
  |-----------------------|---------------------------|----------|-------------|
146
147
  | `title` | `string | any` | `undefined` | Title to display in the app bar |
147
- | `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 |
148
149
  | `imageUrl` | `string` | `undefined` | Image URL to display next to the title |
149
150
  | `onBackIconClick` | `() => void` | `() => {}` | Callback for the back icon click event |
150
151
  | `onTitleClick` | `() => void` | `() => {}` | Callback for the title click event |
@@ -152,7 +153,7 @@ export default App;
152
153
  | `onClick` | `() => void` | `() => {}` | Callback for the entire app bar click event |
153
154
  | `className` | `string` | `undefined` | Additional class for custom styling |
154
155
  | `titleposition` | `'left' | 'center' | 'right'` | `'center'` | Position of the title within the app bar |
155
- | `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 |
156
157
 
157
158
 
158
159
  # ESewaButton
@@ -198,7 +199,7 @@ export default App;
198
199
  | `outlined` | `boolean` | `false` | If `true`, the button will have an outline style. |
199
200
  | `className` | `string` | `''` | Additional CSS class(es) to apply to the button. |
200
201
  | `fullwidth` | `boolean` | `false` | If `true`, the button will span the full width of its container. |
201
- | `icon` | `string` | `
202
+ | `icon` | `string`| `React.ReactNode`| `
202
203
 
203
204
 
204
205
  ## Styling and Customization
@@ -618,7 +619,7 @@ export default App;
618
619
  |----------------------|------------------------------------------------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
619
620
  | `isOpen` | `boolean` | `false` | Controls the visibility of the dialog. |
620
621
  | `showLeftIcon` | `boolean` | `false` | Whether to show the left icon in the dialog header. |
621
- | `leftIcon` | `string` | `'icon-es-check'` | The icon class to be displayed in the left side of the dialog header. |
622
+ | `leftIcon` | `string` | `React.ReactNode` | `'icon-es-check'` | The icon class to be displayed in the left side of the dialog header. |
622
623
  | `showCloseIcon` | `boolean` | `false` | Whether to show the close icon in the dialog header. |
623
624
  | `closeIcon` | `string` | `'icon-es-close'` | The icon class for the close button. |
624
625
  | `okText` | `string` | `'OK'` | The text to be displayed on the OK button. |
@@ -1446,7 +1447,7 @@ const YourComponent = () => {
1446
1447
  | Name | Type | Default | Description |
1447
1448
  |----------------|----------------------|---------------|-----------------------------------------------------------------------------|
1448
1449
  | `text` | `string` | - | The text content to display inside the tag. |
1449
- | `icon` | `React.ReactNode` | `undefined` | An optional icon to display alongside the text. |
1450
+ | `icon` | `string` | `React.ReactNode` | `undefined` | An optional icon to display alongside the text. |
1450
1451
  | `variant` | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info'` | `'primary'` | Defines the tag's color scheme. Available variants: `primary`, `secondary`, `danger`, `success`, `warning`, `info`. |
1451
1452
  | `iconPosition` | `'start' | 'end'` | `'start'` | Defines the position of the icon. Choose between `start` (before text) or `end` (after text). |
1452
1453
  | `size` | `'normal' | 'small'` | `'normal'` | Defines the size of the tag. Available sizes: `normal`, `small`. |
@@ -1832,7 +1833,7 @@ const onRequestPaymentClick = () => {
1832
1833
  merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=',
1833
1834
  token: sessionStorage.getItem('miniAppAuthToken'),
1834
1835
  data: productPayload,
1835
- callbackKey: "REQUEST_PAYMENT_CALLBACK"
1836
+ callbackKey: CALLBACK_TYPE_ENUM.REQUEST_PAYMENT_CALLBACK
1836
1837
  };
1837
1838
 
1838
1839
  const requestPaymentCallBack: any = (data:any) => {
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
@@ -7,7 +7,7 @@ interface ChipGroupProps {
7
7
  }
8
8
  interface ChipProps {
9
9
  showIcon?: boolean;
10
- icon?: string;
10
+ icon?: string | React.ReactNode;
11
11
  text: string;
12
12
  id: number;
13
13
  }
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: 6px;\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"])), 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) {
@@ -7022,7 +7028,11 @@ var ESewaChipGroup = function ESewaChipGroup(_ref3) {
7022
7028
  onClick: function onClick() {
7023
7029
  return handleSelectChip(chip.id);
7024
7030
  }
7025
- }, chip.showIcon && chip.icon && React__default.createElement("span", null, chip.icon), chip.text);
7031
+ }, chip.showIcon && chip.icon && React__default.createElement("span", {
7032
+ className: "chip__icon"
7033
+ }, typeof chip.icon === 'string' ? React__default.createElement("i", {
7034
+ className: chip.icon
7035
+ }) : chip.icon), chip.text);
7026
7036
  }));
7027
7037
  };
7028
7038
 
@@ -7124,9 +7134,11 @@ var ESIcon = function ESIcon(_ref) {
7124
7134
  _ref$size = _ref.size,
7125
7135
  size = _ref$size === void 0 ? 28 : _ref$size,
7126
7136
  iconPrimaryColor = _ref.iconPrimaryColor,
7127
- iconSecondaryColor = _ref.iconSecondaryColor;
7137
+ iconSecondaryColor = _ref.iconSecondaryColor,
7138
+ _ref$className = _ref.className,
7139
+ className = _ref$className === void 0 ? '' : _ref$className;
7128
7140
  return React__default.createElement(StyledIcon, {
7129
- className: "es-" + icon,
7141
+ className: className + " " + icon,
7130
7142
  style: {
7131
7143
  fontSize: size,
7132
7144
  "--icon-primary-color": iconPrimaryColor,