@cleartrip/talos-background-gradient 1.1.0-beta-260727-v2-7.0 → 1.1.0

package/dist/BackgroundGradient.d.ts

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 import { type IBackgroundGradientProps } from "./type";
-declare const BackgroundGradient: ({ styleConfig, variant, }: IBackgroundGradientProps) => import("react/jsx-runtime").JSX.Element;
+declare const BackgroundGradient: ({ styleConfig, variant, }: IBackgroundGradientProps) => import("react").JSX.Element;
 export default BackgroundGradient;
 //# sourceMappingURL=BackgroundGradient.d.ts.map

package/dist/BackgroundGradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BackgroundGradient.d.ts","sourceRoot":"","sources":["../packages/components/background-gradient/src/BackgroundGradient.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA6B,KAAK,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAKlF,QAAA,MAAM,kBAAkB,8BAGrB,wBAAwB,4CAyB1B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"BackgroundGradient.d.ts","sourceRoot":"","sources":["../packages/components/background-gradient/src/BackgroundGradient.tsx"],"names":[],"mappings":";AAMA,OAAO,EAA6B,KAAK,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAKlF,QAAA,MAAM,kBAAkB,8BAGrB,wBAAwB,gCAyB1B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/talos-background-gradient.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) {
@@ -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);
@@ -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) {
@@ -21334,9 +21311,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,
@@ -21349,14 +21325,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,
@@ -21382,6 +21358,7 @@
         }))
       }));
     });
+    ModalWithCloseOverlay.displayName = 'ModalWithCloseOverlay';
 
     React__default$1.forwardRef(function (_a, forwardedRef) {
       var children = _a.children,
@@ -28688,14 +28665,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,
@@ -28704,7 +28695,7 @@
             dragging: true
           });
         });
-      }, []);
+      }, [events]);
       var onDragging = React__default$1.useCallback(function (event) {
         setState(function (state) {
           var _a, _b;
@@ -28713,7 +28704,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;
@@ -29759,8 +29749,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",
@@ -30408,94 +30398,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
         })
       }));