@cleartrip/talos-button 1.1.0-beta-260727-v3-1.0 → 1.1.0

package/dist/Button.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import type { IWidgetProps } from "@cleartrip/talos-widget-types";
 import type { IButtonProps } from "./type";
-declare const ButtonWidget: (props: IWidgetProps<IButtonProps>) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonWidget: (props: IWidgetProps<IButtonProps>) => import("react").JSX.Element;
 export default ButtonWidget;
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../packages/components/button/src/Button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAGlE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C,QAAA,MAAM,YAAY,UAAW,aAAa,YAAY,CAAC,4CAiCtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../packages/components/button/src/Button.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAGlE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C,QAAA,MAAM,YAAY,UAAW,aAAa,YAAY,CAAC,gCAiCtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/talos-button.umd.js

@@ -695,7 +695,6 @@
       pinaColada300: '#FFE46E',
       black100: '#1B1B1B',
       gray97: '#f7f7f7',
-      gray98: '#FAFBFF',
       successGreen500: '#11A056',
       purple700: '#7226E0',
       neutralOpacity8: '#00000014',
@@ -732,16 +731,13 @@
       13: '52px',
       14: '56px',
       15: '60px',
-      20: '80px',
       50: '200px'
     };
     var spacing = {
       0: '0px',
-      0.5: '2px',
       1: '4px',
       2: '8px',
       3: '12px',
-      1.5: '6px',
       4: '16px',
       5: '20px',
       6: '24px',
@@ -5088,7 +5084,8 @@
           pinaColada500: colors.pinaColada500,
           green700: colors.green700,
           green100: colors.green100,
-          red100: colors.red100
+          red100: colors.red100,
+          red500: colors.red500
         },
         button: {
           outlinedPrimaryLabel: colors.neutral900,
@@ -5168,14 +5165,10 @@
           lightRed: colors.red200,
           black100: colors.black100,
           gray97: colors.gray97,
-          gray98: colors.gray98,
+          darkRed: colors.red500,
           orange500: colors.orange500,
           purple700: colors.purple700,
-          neutralOpacity8: colors.neutralOpacity8,
-          darkRed500: colors.red500,
-          successGreen500: colors.successGreen500,
-          blue100: colors.blue100,
-          alertYellow500: colors.alert500
+          neutralOpacity8: colors.neutralOpacity8
         },
         border: {
           primary: colors.neutral900,
@@ -5539,7 +5532,7 @@
           d = "date",
           l = "Invalid Date",
           $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,
-          y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,
+          y = /\[([^\]]+)]|YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,
           M = {
             name: "en",
             weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
@@ -5879,9 +5872,9 @@
               return this.$d.toUTCString();
             }, M;
           }(),
-          k = _.prototype;
-        return O.prototype = k, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", c], ["$y", h], ["$D", d]].forEach(function (t) {
-          k[t[1]] = function (e) {
+          Y = _.prototype;
+        return O.prototype = Y, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", c], ["$y", h], ["$D", d]].forEach(function (t) {
+          Y[t[1]] = function (e) {
             return this.$g(e, t[0], t[1]);
           };
         }), O.extend = function (t, e) {
@@ -6044,13 +6037,13 @@
       BorderStyle["SOLID"] = "SOLID";
       BorderStyle["DOTTED"] = "DOTTED";
     })(BorderStyle || (BorderStyle = {}));
-    var IconPosition$3;
+    var IconPosition$2;
     (function (IconPosition) {
       IconPosition["TOP"] = "top";
       IconPosition["BOTTOM"] = "bottom";
       IconPosition["LEFT"] = "left";
       IconPosition["RIGHT"] = "right";
-    })(IconPosition$3 || (IconPosition$3 = {}));
+    })(IconPosition$2 || (IconPosition$2 = {}));
     var WEEK_DAY_LABEL = {
       0: 'Sun',
       1: 'Mon',
@@ -6696,6 +6689,7 @@
       TypographyColor["GREEN700"] = "green700";
       TypographyColor["GREEN100"] = "green100";
       TypographyColor["RED100"] = "red100";
+      TypographyColor["RED500"] = "red500";
     })(TypographyColor || (TypographyColor = {}));
     var getTypographyVariant$1 = function (theme, variant) {
       switch (variant) {
@@ -7099,6 +7093,10 @@
           {
             return theme.color.text.red100;
           }
+        case TypographyColor.RED500:
+          {
+            return theme.color.text.red500;
+          }
         default:
           {
             return theme.color.text.primary;
@@ -7924,22 +7922,17 @@
       }));
     });
 
-    var dotAnimationKeyframe = function (_a) {
-      var color1 = _a.color1,
-        color2 = _a.color2;
-      return keyframes(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  0% { background-color: ", "; transform: scale(1); }\n  50% { background-color: ", "; transform: scale(1.2); }\n  100% { background-color: ", "; transform: scale(1); }\n"], ["\n  0% { background-color: ", "; transform: scale(1); }\n  50% { background-color: ", "; transform: scale(1.2); }\n  100% { background-color: ", "; transform: scale(1); }\n"])), color1, color2, color1);
-    };
+    var dotAnimationKeyframe = keyframes(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  0% { background-color: var(--dot-color-1); transform: scale(1); }\n  50% { background-color: var(--dot-color-2); transform: scale(1.2); }\n  100% { background-color: var(--dot-color-1); transform: scale(1); }\n"], ["\n  0% { background-color: var(--dot-color-1); transform: scale(1); }\n  50% { background-color: var(--dot-color-2); transform: scale(1.2); }\n  100% { background-color: var(--dot-color-1); transform: scale(1); }\n"])));
     var StyledLoaderDot = _default.div(function (_a) {
       var theme = _a.theme,
         dotId = _a.dotId,
         variant = _a.variant,
+        color1 = _a.color1,
+        color2 = _a.color2,
         _b = _a.css,
         styleCss = _b === void 0 ? {} : _b;
       var size = getLoaderDimension(variant, theme);
-      return css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      animation: ", "\n        ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "], ["\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      animation: ", "\n        ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "])), size, size, theme.border.radius['50P'], theme.color.background.defaultDark, dotAnimationKeyframe({
-        color1: theme.color.background.defaultDark,
-        color2: theme.color.background.defaultDarkest
-      }), 1 / 3 * dotId, styleCss);
+      return css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n      --dot-color-1: ", ";\n      --dot-color-2: ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: var(--dot-color-1);\n      animation: ", " ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "], ["\n      --dot-color-1: ", ";\n      --dot-color-2: ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: var(--dot-color-1);\n      animation: ", " ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "])), color1 !== null && color1 !== void 0 ? color1 : theme.color.background.defaultDark, color2 !== null && color2 !== void 0 ? color2 : theme.color.background.defaultDarkest, size, size, theme.border.radius['50P'], dotAnimationKeyframe, 1 / 3 * dotId, styleCss);
     });
     var StyledLoaderWrapper = _default.div(function (_a) {
       _a.theme;
@@ -7967,6 +7960,7 @@
       var css = _a.css,
         _b = _a.variant,
         variant = _b === void 0 ? 'medium' : _b,
+        dotColors = _a.dotColors,
         _c = _a.styleConfig,
         styleConfig = _c === void 0 ? {} : _c;
       var theme = useTheme();
@@ -7985,6 +7979,8 @@
             variant: variant,
             theme: theme,
             dotId: id,
+            color1: dotColors === null || dotColors === void 0 ? void 0 : dotColors.primary,
+            color2: dotColors === null || dotColors === void 0 ? void 0 : dotColors.secondary,
             className: loaderCont === null || loaderCont === void 0 ? void 0 : loaderCont.className,
             css: loaderCont === null || loaderCont === void 0 ? void 0 : loaderCont.css
           }, id);
@@ -8040,11 +8036,11 @@
       ButtonSize["MEDIUM"] = "medium";
       ButtonSize["LARGE"] = "large";
     })(ButtonSize$1 || (ButtonSize$1 = {}));
-    var IconPosition$2;
+    var IconPosition$1;
     (function (IconPosition) {
       IconPosition["LEFT"] = "left";
       IconPosition["RIGHT"] = "right";
-    })(IconPosition$2 || (IconPosition$2 = {}));
+    })(IconPosition$1 || (IconPosition$1 = {}));
     var ButtonVariant;
     (function (ButtonVariant) {
       ButtonVariant["OUTLINE"] = "outline";
@@ -15930,35 +15926,16 @@
       }, getCheckboxColor(theme, !!disabled, !!checked)), rest);
     };
     var StyledRoot = _default.div(function (_a) {
-      var css = _a.css;
-      _a.children;
-      _a.onClick;
-      _a.className;
-      _a.color;
-      var theme = _a.theme,
-        disabled = _a.disabled,
-        rest = __rest$2(_a, ["css", "children", "onClick", "className", "color", "theme", "disabled"]);
-      return getCheckboxRootStyles(__assign$4(__assign$4(__assign$4({}, rest), css), {
-        theme: theme,
-        disabled: disabled
-      }));
+      var css = _a.css,
+        rest = __rest$2(_a, ["css"]);
+      return getCheckboxRootStyles(__assign$4(__assign$4({}, rest), css));
     });
     var StyledCheckbox = _default.div(function (_a) {
       var theme = _a.theme,
         css = _a.css,
-        checked = _a.checked,
-        disabled = _a.disabled,
-        width = _a.width,
-        height = _a.height;
-      _a.className;
-      _a.children;
-      var rest = __rest$2(_a, ["theme", "css", "checked", "disabled", "width", "height", "className", "children"]);
+        rest = __rest$2(_a, ["theme", "css"]);
       return getCheckboxStyles(__assign$4(__assign$4(__assign$4({}, rest), css), {
-        theme: theme,
-        checked: checked,
-        disabled: disabled,
-        width: width,
-        height: height
+        theme: theme
       }));
     });
     var Input$1 = _default.input(function (_a) {
@@ -16031,18 +16008,18 @@
       }));
     });
 
-    var IconPosition$1;
+    var IconPosition;
     (function (IconPosition) {
       IconPosition["TOP"] = "top";
       IconPosition["LEFT"] = "left";
       IconPosition["RIGHT"] = "right";
       IconPosition["END"] = "end";
-    })(IconPosition$1 || (IconPosition$1 = {}));
-    var CounterOperation$1;
+    })(IconPosition || (IconPosition = {}));
+    var CounterOperation;
     (function (CounterOperation) {
       CounterOperation["INCREMENT"] = "INCREMENT";
       CounterOperation["DECREMENT"] = "DECREMENT";
-    })(CounterOperation$1 || (CounterOperation$1 = {}));
+    })(CounterOperation || (CounterOperation = {}));
 
     var getStyledChipStyles = function (_a) {
       var theme = _a.theme,
@@ -16304,7 +16281,7 @@
         _c = _a.showIcon,
         showIcon = _c === void 0 ? false : _c,
         _d = _a.iconPosition,
-        iconPosition = _d === void 0 ? IconPosition$1.LEFT : _d,
+        iconPosition = _d === void 0 ? IconPosition.LEFT : _d,
         _e = _a.Icon,
         Icon = _e === void 0 ? null : _e,
         _f = _a.showCounter,
@@ -16332,7 +16309,7 @@
         showShimmerAnimation = _r === void 0 ? false : _r,
         id = _a.id;
       var theme = useTheme();
-      var showTopIcon = showIcon && iconPosition === IconPosition$1.TOP;
+      var showTopIcon = showIcon && iconPosition === IconPosition.TOP;
       var chipStyles = getChipStyles({
         isSelected: isSelected,
         isDisabled: isDisabled,
@@ -16459,7 +16436,7 @@
         css: root === null || root === void 0 ? void 0 : root.css,
         id: id
       }, {
-        children: [showIcon && iconPosition === IconPosition$1.TOP && jsxRuntimeExports$2.jsx(Container, __assign$4({
+        children: [showIcon && iconPosition === IconPosition.TOP && jsxRuntimeExports$2.jsx(Container, __assign$4({
           display: 'flex',
           alignItems: 'center',
           marginBottom: theme.spacing[1],
@@ -16474,7 +16451,7 @@
           className: chipContainer === null || chipContainer === void 0 ? void 0 : chipContainer.className,
           css: chipContainer === null || chipContainer === void 0 ? void 0 : chipContainer.css
         }, {
-          children: [showIcon && iconPosition === IconPosition$1.LEFT && jsxRuntimeExports$2.jsx(Container, __assign$4({
+          children: [showIcon && iconPosition === IconPosition.LEFT && jsxRuntimeExports$2.jsx(Container, __assign$4({
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -16492,8 +16469,8 @@
             children: renderLabelComponent()
           })), showShimmerAnimation && jsxRuntimeExports$2.jsx(AnimatedContainer, {
             children: jsxRuntimeExports$2.jsx(ChipShimmer, {})
-          }), showIcon && iconPosition === IconPosition$1.RIGHT && jsxRuntimeExports$2.jsx(jsxRuntimeExports$2.Fragment, {
-            children: renderPositionedIconComponent(iconPosition, IconPosition$1.RIGHT)
+          }), showIcon && iconPosition === IconPosition.RIGHT && jsxRuntimeExports$2.jsx(jsxRuntimeExports$2.Fragment, {
+            children: renderPositionedIconComponent(iconPosition, IconPosition.RIGHT)
           }), showCounter && jsxRuntimeExports$2.jsx(Container, __assign$4({
             paddingLeft: theme.spacing[1],
             className: counterContainer === null || counterContainer === void 0 ? void 0 : counterContainer.className,
@@ -16511,8 +16488,8 @@
                 children: count
               }))
             }))
-          })), showIcon && iconPosition === IconPosition$1.END && jsxRuntimeExports$2.jsx(jsxRuntimeExports$2.Fragment, {
-            children: renderPositionedIconComponent(iconPosition, IconPosition$1.END)
+          })), showIcon && iconPosition === IconPosition.END && jsxRuntimeExports$2.jsx(jsxRuntimeExports$2.Fragment, {
+            children: renderPositionedIconComponent(iconPosition, IconPosition.END)
           }), isDismissible && jsxRuntimeExports$2.jsx(Container, __assign$4({
             paddingLeft: theme.spacing[1],
             display: 'flex',
@@ -17602,19 +17579,6 @@
       }, css));
     });
 
-    var IconPosition;
-    (function (IconPosition) {
-      IconPosition["TOP"] = "top";
-      IconPosition["LEFT"] = "left";
-      IconPosition["RIGHT"] = "right";
-      IconPosition["END"] = "end";
-    })(IconPosition || (IconPosition = {}));
-    var CounterOperation;
-    (function (CounterOperation) {
-      CounterOperation["INCREMENT"] = "INCREMENT";
-      CounterOperation["DECREMENT"] = "DECREMENT";
-    })(CounterOperation || (CounterOperation = {}));
-
     var getStyledIconStyles = function (_a) {
       _a.theme;
       var cursor = _a.cursor;
@@ -21360,9 +21324,8 @@
         crossColor: '#1A1A1A'
       });
     };
-    var ModalWithCloseOverlay = React__default$1.forwardRef(function (props, forwardedRef) {
-      var _a = props || {},
-        wrapperCss = _a.wrapperCss,
+    var ModalWithCloseOverlay = React__default$1.forwardRef(function (_a, forwardedRef) {
+      var wrapperCss = _a.wrapperCss,
         isBack = _a.isBack,
         children = _a.children,
         _b = _a.variant,
@@ -21375,14 +21338,14 @@
       var theme = useTheme();
       var closeButtonStyles = getCloseButtonStyle({
         theme: theme,
-        isLeft: isBack,
+        isLeft: isBack !== null && isBack !== void 0 ? isBack : false,
         variant: variant,
         isCenter: isCenter,
         isTop: isTop
       });
       var CloseIcon = getCloseIcon(isBack, variant);
       var onCloseClick = function (e) {
-        onClose(e);
+        onClose === null || onClose === void 0 ? void 0 : onClose(e);
       };
       return jsxRuntimeExports$2.jsx(Modal, __assign$4({
         ref: forwardedRef,
@@ -21408,6 +21371,7 @@
         }))
       }));
     });
+    ModalWithCloseOverlay.displayName = 'ModalWithCloseOverlay';
 
     React__default$1.forwardRef(function (_a, forwardedRef) {
       var children = _a.children,
@@ -28714,14 +28678,28 @@
         state = _a[0],
         setState = _a[1];
       var onDragStart = React__default$1.useCallback(function (event) {
-        var _a;
+        var _a, _b;
         var isTouch = 'touches' in event || 'changedTouches' in event;
         if (isTouch && ((_a = event.touches) !== null && _a !== void 0 ? _a : event.changedTouches).length > 1) return;
+        var _c = isTouch ? (_b = event.touches[0]) !== null && _b !== void 0 ? _b : event.changedTouches[0] : event,
+          clientX = _c.clientX,
+          clientY = _c.clientY;
         setState(function (previous) {
-          var _a;
-          var _b = isTouch ? (_a = event.touches[0]) !== null && _a !== void 0 ? _a : event.changedTouches[0] : event,
-            clientX = _b.clientX,
-            clientY = _b.clientY;
+          if (events.onDragStart) {
+            var eventData = {
+              absX: 0,
+              absY: 0,
+              deltaX: 0,
+              deltaY: 0,
+              clientY: clientY,
+              dir: RIGHT,
+              event: event,
+              initial: DRAGGER_INITIAL_STATE.initial,
+              velocity: 0,
+              initialDxDy: previous.initialDxDy
+            };
+            events.onDragStart(eventData);
+          }
           return __assign$4(__assign$4(__assign$4({}, previous), DRAGGER_INITIAL_STATE), {
             initialDxDy: previous.initialDxDy,
             lastDxDy: previous.initialDxDy,
@@ -28730,7 +28708,7 @@
             dragging: true
           });
         });
-      }, []);
+      }, [events]);
       var onDragging = React__default$1.useCallback(function (event) {
         setState(function (state) {
           var _a, _b;
@@ -28739,7 +28717,6 @@
             return state;
           }
           event.stopPropagation();
-          event.preventDefault();
           var _c = isTouch ? (_b = event.touches[0]) !== null && _b !== void 0 ? _b : event.changedTouches[0] : event,
             clientX = _c.clientX,
             clientY = _c.clientY;
@@ -29785,8 +29762,8 @@
       }
     });
     React__default$1.createContext(undefined);
-    var moveRight = keyframes(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
-    var moveRightAgain = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
+    var moveRight = /*#__PURE__*/keyframes(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
+    var moveRightAgain = /*#__PURE__*/keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
     var templateObject_1$1, templateObject_2;
     /*#__PURE__*/_default.div.withConfig({
       displayName: "BusinessDropdown__BDHoverContainer",
@@ -30434,94 +30411,94 @@
         onClick === null || onClick === void 0 ? void 0 : onClick();
       }, [disabled, onClick]);
       return jsxRuntimeExports$2.jsx(Container, __assign$4({
-        height: "24px",
-        width: "24px",
-        borderRadius: "50%",
+        height: '24px',
+        width: '24px',
+        borderRadius: '50%',
         onClick: handleClick,
         css: {
           backgroundColor: backgroundColor
         },
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: disabled ? "not-allowed" : "pointer"
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: disabled ? 'not-allowed' : 'pointer'
       }, {
         children: children
       }));
     };
     var Keyboard = function (props) {
       return jsxRuntimeExports$2.jsxs("svg", __assign$4({
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
       }, {
         children: [jsxRuntimeExports$2.jsx("path", {
-          d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
-          fill: "white",
+          d: 'M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z',
+          fill: 'white',
           fillOpacity: 0.4
         }), jsxRuntimeExports$2.jsx("mask", __assign$4({
-          id: "mask0_1511_44906",
+          id: 'mask0_1511_44906',
           style: {
             maskType: 'alpha'
           },
-          maskUnits: "userSpaceOnUse",
-          x: "3",
-          y: "3",
-          width: "18",
-          height: "18"
+          maskUnits: 'userSpaceOnUse',
+          x: '3',
+          y: '3',
+          width: '18',
+          height: '18'
         }, {
           children: jsxRuntimeExports$2.jsx("rect", {
-            x: "3",
-            y: "3",
-            width: "18",
-            height: "18",
-            fill: "#D9D9D9"
+            x: '3',
+            y: '3',
+            width: '18',
+            height: '18',
+            fill: '#D9D9D9'
           })
         })), jsxRuntimeExports$2.jsx("g", __assign$4({
-          mask: "url(#mask0_1511_44906)"
+          mask: 'url(#mask0_1511_44906)'
         }, {
           children: jsxRuntimeExports$2.jsx("path", {
-            d: "M5.24998 18C4.83748 18 4.48436 17.8531 4.19061 17.5594C3.89686 17.2656 3.74998 16.9125 3.74998 16.5V7.5C3.74998 7.0875 3.89686 6.73438 4.19061 6.44063C4.48436 6.14688 4.83748 6 5.24998 6H18.75C19.1625 6 19.5156 6.14688 19.8094 6.44063C20.1031 6.73438 20.25 7.0875 20.25 7.5V16.5C20.25 16.9125 20.1031 17.2656 19.8094 17.5594C19.5156 17.8531 19.1625 18 18.75 18H5.24998ZM5.24998 16.5H18.75V7.5H5.24998V16.5ZM8.99998 15.75H15V14.25H8.99998V15.75ZM6.74998 13.125H8.24998V11.625H6.74998V13.125ZM9.74998 13.125H11.25V11.625H9.74998V13.125ZM12.75 13.125H14.25V11.625H12.75V13.125ZM15.75 13.125H17.25V11.625H15.75V13.125ZM6.74998 10.5H8.24998V9H6.74998V10.5ZM9.74998 10.5H11.25V9H9.74998V10.5ZM12.75 10.5H14.25V9H12.75V10.5ZM15.75 10.5H17.25V9H15.75V10.5Z",
-            fill: "#1C1B1F"
+            d: 'M5.24998 18C4.83748 18 4.48436 17.8531 4.19061 17.5594C3.89686 17.2656 3.74998 16.9125 3.74998 16.5V7.5C3.74998 7.0875 3.89686 6.73438 4.19061 6.44063C4.48436 6.14688 4.83748 6 5.24998 6H18.75C19.1625 6 19.5156 6.14688 19.8094 6.44063C20.1031 6.73438 20.25 7.0875 20.25 7.5V16.5C20.25 16.9125 20.1031 17.2656 19.8094 17.5594C19.5156 17.8531 19.1625 18 18.75 18H5.24998ZM5.24998 16.5H18.75V7.5H5.24998V16.5ZM8.99998 15.75H15V14.25H8.99998V15.75ZM6.74998 13.125H8.24998V11.625H6.74998V13.125ZM9.74998 13.125H11.25V11.625H9.74998V13.125ZM12.75 13.125H14.25V11.625H12.75V13.125ZM15.75 13.125H17.25V11.625H15.75V13.125ZM6.74998 10.5H8.24998V9H6.74998V10.5ZM9.74998 10.5H11.25V9H9.74998V10.5ZM12.75 10.5H14.25V9H12.75V10.5ZM15.75 10.5H17.25V9H15.75V10.5Z',
+            fill: '#1C1B1F'
           })
         }))]
       }));
     };
     var Plus = function (props) {
       return jsxRuntimeExports$2.jsxs("svg", __assign$4({
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
       }, {
         children: [jsxRuntimeExports$2.jsx("path", {
-          d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
-          fill: "white",
+          d: 'M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z',
+          fill: 'white',
           fillOpacity: 0.4
         }), jsxRuntimeExports$2.jsx("path", {
-          d: "M12 5.5C12.2761 5.5 12.5 5.72386 12.5 6V11.5H18C18.2761 11.5 18.5 11.7239 18.5 12C18.5 12.2761 18.2761 12.5 18 12.5H12.5V18C12.5 18.2761 12.2761 18.5 12 18.5C11.7239 18.5 11.5 18.2761 11.5 18V12.5H6C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5H11.5V6C11.5 5.72386 11.7239 5.5 12 5.5Z",
-          fill: "#1A1A1A"
+          d: 'M12 5.5C12.2761 5.5 12.5 5.72386 12.5 6V11.5H18C18.2761 11.5 18.5 11.7239 18.5 12C18.5 12.2761 18.2761 12.5 18 12.5H12.5V18C12.5 18.2761 12.2761 18.5 12 18.5C11.7239 18.5 11.5 18.2761 11.5 18V12.5H6C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5H11.5V6C11.5 5.72386 11.7239 5.5 12 5.5Z',
+          fill: '#1A1A1A'
         })]
       }));
     };
     var UpArrow = function (props) {
       var _a = props.fill,
-        fill = _a === void 0 ? "white" : _a,
+        fill = _a === void 0 ? 'white' : _a,
         rest = __rest$2(props, ["fill"]);
       return jsxRuntimeExports$2.jsx("svg", __assign$4({
-        width: "14",
-        height: "14",
-        viewBox: "0 0 14 14",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        width: '14',
+        height: '14',
+        viewBox: '0 0 14 14',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
       }, rest, {
         children: jsxRuntimeExports$2.jsx("path", {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
-          d: "M12.5596 6.66895C12.7306 6.83963 12.7303 7.11804 12.5596 7.28906C12.3889 7.45968 12.1114 7.45962 11.9405 7.28906L7.43753 2.79395L7.43753 12.25C7.43753 12.4916 7.24166 12.6875 7.00003 12.6875C6.75843 12.6875 6.56253 12.4916 6.56253 12.25L6.56253 2.81445L2.0596 7.30957C1.88868 7.48013 1.61117 7.48028 1.44046 7.30957C1.26991 7.13866 1.26977 6.86114 1.44046 6.69043L6.64163 1.50098C6.7207 1.38774 6.85145 1.31251 7.00003 1.3125C7.00165 1.3125 7.0033 1.31338 7.00492 1.31348C7.11836 1.31213 7.23268 1.35406 7.31937 1.44043L12.5596 6.66895Z",
+          "fill-rule": 'evenodd',
+          "clip-rule": 'evenodd',
+          d: 'M12.5596 6.66895C12.7306 6.83963 12.7303 7.11804 12.5596 7.28906C12.3889 7.45968 12.1114 7.45962 11.9405 7.28906L7.43753 2.79395L7.43753 12.25C7.43753 12.4916 7.24166 12.6875 7.00003 12.6875C6.75843 12.6875 6.56253 12.4916 6.56253 12.25L6.56253 2.81445L2.0596 7.30957C1.88868 7.48013 1.61117 7.48028 1.44046 7.30957C1.26991 7.13866 1.26977 6.86114 1.44046 6.69043L6.64163 1.50098C6.7207 1.38774 6.85145 1.31251 7.00003 1.3125C7.00165 1.3125 7.0033 1.31338 7.00492 1.31348C7.11836 1.31213 7.23268 1.35406 7.31937 1.44043L12.5596 6.66895Z',
           fill: fill
         })
       }));