krl-alfred 1.72.1 → 1.72.2

package/dist/components/Button/Button.styled.js

@@ -34,7 +34,7 @@ var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
 var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary);\n  border: none;\n  svg{\n    path, rect{\n      stroke : var(--primary);\n    }\n    circle{\n      fill : var(--primary);\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      svg{\n        path, rect{\n          stroke : var(--primary-hover);\n        }\n        circle{\n          fill : var(--primary-hover);\n          ~ path{\n            stroke : white;\n          }\n        }\n      }\n    }\n  }\n\n \n\n  &:active {\n    color: var(--primary-press);\n    svg{\n      path, rect{\n        stroke : var(--primary-press);\n      }\n      circle{\n        fill : var(--primary-press);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n    svg{\n      path, rect{\n        stroke : var(--dark-opacity-25);\n      }\n      circle{\n        fill : var(--dark-opacity-25);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"], ["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary);\n  border: none;\n  svg{\n    path, rect{\n      stroke : var(--primary);\n    }\n    circle{\n      fill : var(--primary);\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      svg{\n        path, rect{\n          stroke : var(--primary-hover);\n        }\n        circle{\n          fill : var(--primary-hover);\n          ~ path{\n            stroke : white;\n          }\n        }\n      }\n    }\n  }\n\n \n\n  &:active {\n    color: var(--primary-press);\n    svg{\n      path, rect{\n        stroke : var(--primary-press);\n      }\n      circle{\n        fill : var(--primary-press);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n    svg{\n      path, rect{\n        stroke : var(--dark-opacity-25);\n      }\n      circle{\n        fill : var(--dark-opacity-25);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])), devices_1.devices.mdUp);
 var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary);\n  border: 1px solid;\n  border-color: var(--primary);\n  svg{\n    path, rect{\n      stroke : var(--primary);\n    }\n    circle{\n      fill : var(--primary);\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n      svg{\n        path, rect{\n          stroke : var(--primary-hover);\n        }\n        circle{\n          fill : var(--primary-hover);\n          ~ path{\n            stroke : white;\n          }\n        }\n      }\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n    svg{\n      path, rect{\n        stroke : var(--primary-press);\n      }\n      circle{\n        fill : var(--primary-press);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n    border-color: var(--dark-opacity-25);\n    svg{\n      path, rect{\n        stroke : var(--dark-opacity-25);\n      }\n      circle{\n        fill : var(--dark-opacity-25);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary);\n  border: 1px solid;\n  border-color: var(--primary);\n  svg{\n    path, rect{\n      stroke : var(--primary);\n    }\n    circle{\n      fill : var(--primary);\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n      svg{\n        path, rect{\n          stroke : var(--primary-hover);\n        }\n        circle{\n          fill : var(--primary-hover);\n          ~ path{\n            stroke : white;\n          }\n        }\n      }\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n    svg{\n      path, rect{\n        stroke : var(--primary-press);\n      }\n      circle{\n        fill : var(--primary-press);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n    border-color: var(--dark-opacity-25);\n    svg{\n      path, rect{\n        stroke : var(--dark-opacity-25);\n      }\n      circle{\n        fill : var(--dark-opacity-25);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])), devices_1.devices.mdUp);
 var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary);\n  border: 0;\n  svg{\n    path, rect{\n      stroke : var(--primary);\n    }\n    circle{\n      fill : var(--primary);\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary);\n      background-color: var(--primary-opacity-5);\n      svg{\n        path, rect{\n          stroke : var(--primary);\n        }\n        circle{\n          fill : var(--primary);\n          ~ path{\n            stroke : white;\n          }\n        }\n      }\n    }\n\n  }\n\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n    svg{\n      path, rect{\n        stroke : var(--primary-hover);\n      }\n      circle{\n        fill : var(--primary-hover);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n    svg{\n      path, rect{\n        stroke : var(--dark-opacity-25);\n      }\n      circle{\n        fill : var(--dark-opacity-25);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary);\n  border: 0;\n  svg{\n    path, rect{\n      stroke : var(--primary);\n    }\n    circle{\n      fill : var(--primary);\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary);\n      background-color: var(--primary-opacity-5);\n      svg{\n        path, rect{\n          stroke : var(--primary);\n        }\n        circle{\n          fill : var(--primary);\n          ~ path{\n            stroke : white;\n          }\n        }\n      }\n    }\n\n  }\n\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n    svg{\n      path, rect{\n        stroke : var(--primary-hover);\n      }\n      circle{\n        fill : var(--primary-hover);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n    svg{\n      path, rect{\n        stroke : var(--dark-opacity-25);\n      }\n      circle{\n        fill : var(--dark-opacity-25);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])), devices_1.devices.mdUp);
-exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  font-family: var(--font-family-sans-serif);\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    &:empty{\n      margin-right: 0;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  font-family: var(--font-family-sans-serif);\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    &:empty{\n      margin-right: 0;\n    }\n  }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
+exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  font-family: var(--font-family-sans-serif);\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  svg{\n    path[stroke-width], rect[stroke-width]{ \n      stroke-width: 3px;\n    }\n    circle[stroke-width]{ \n      stroke-width: 3px;\n      ~ path[stroke-width]{ \n        stroke-width: 3px;\n      }\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  font-family: var(--font-family-sans-serif);\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  svg{\n    path[stroke-width], rect[stroke-width]{ \n      stroke-width: 3px;\n    }\n    circle[stroke-width]{ \n      stroke-width: 3px;\n      ~ path[stroke-width]{ \n        stroke-width: 3px;\n      }\n    }\n  }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
     switch (props.variant) {
         case 'primary':
             return primary;

package/dist/components/Icon/BoxDown.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgBoxDown = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M3.99805 8V19C3.99805 20 4.79805 21.5 5.99805 21.5H17.998C19.198 21.5 19.998 20 19.998 19V8M3.99805 8L5.99805 4C6.49805 3 6.79805 2.5 7.99805 2.5H11.998M3.99805 8H11.998M19.998 8L17.998 4C17.498 3 17.198 2.5 15.998 2.5H11.998M19.998 8H11.998M11.998 2.5V8", stroke: "#0FDF7B", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 18V11M12 18L9 15M12 18L15 15", stroke: "#0FDF7B", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+exports.default = SvgBoxDown;

package/dist/components/Icon/BoxLeft.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgBoxLeft = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsxs)("g", { id: "iaden al\u00C4\u00B1nd\u00C4\u00B1", children: [(0, jsx_runtime_1.jsx)("path", { id: "Vector", d: "M13.0054 14C12.4531 13.9992 12.0047 14.4462 12.0039 14.9985C12.0031 15.5508 12.4501 15.9992 13.0024 16L13.0054 14ZM20.0024 16.0104C20.5547 16.0112 21.0031 15.5642 21.0039 15.0119C21.0047 14.4596 20.5577 14.0112 20.0054 14.0104L20.0024 16.0104ZM16.7158 12.7121C17.1069 12.3221 17.1079 11.689 16.7179 11.2978C16.328 10.9067 15.6948 10.9058 15.3037 11.2958L16.7158 12.7121ZM15.2918 18.708C15.6818 19.0991 16.315 19.1001 16.7061 18.7101C17.0972 18.3202 17.0981 17.687 16.7082 17.2959L15.2918 18.708ZM13.7126 14.2914C13.3227 13.9003 12.6895 13.8994 12.2984 14.2894C11.9073 14.6793 11.9064 15.3125 12.2963 15.7036L13.7126 14.2914ZM13.0024 16L20.0024 16.0104L20.0054 14.0104L13.0054 14L13.0024 16ZM15.3037 11.2958L12.2993 14.2913L13.7114 15.7076L16.7158 12.7121L15.3037 11.2958ZM16.7082 17.2959L13.7126 14.2914L12.2963 15.7036L15.2918 18.708L16.7082 17.2959Z", fill: "#FFCE1F" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 77", d: "M4 8V19.5C4 20.6046 4.89543 21.5 6 21.5H18C19.1046 21.5 20 20.6046 20 19.5V18M4 8H20M4 8L6.43148 3.5423C6.78194 2.89977 7.45538 2.5 8.18727 2.5H15.8127C16.5446 2.5 17.2181 2.89977 17.5685 3.5423L20 8M20 8V12", stroke: "#FFCE1F", strokeWidth: 2, strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 78", d: "M12 2V7.5", stroke: "#FFCE1F", strokeWidth: 2 })] }) }))); };
+exports.default = SvgBoxLeft;

package/dist/components/Icon/CargoBack.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgCargoBack = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 23, height: 17, viewBox: "0 0 23 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "Cargo", children: (0, jsx_runtime_1.jsx)("path", { id: "Stroke 1", d: "M19 14C19 12.8954 18.1044 12 17 12C15.8956 12 15 12.8954 15 14M19 14C19 15.1044 18.1044 16 17 16C15.8956 16 15 15.1044 15 14M19 14H20C20.6667 13.8333 22 13.2 22 12L22 2C22 1.66667 21.8 1 21 1L10.5 1C9.7 1 9.5 1.66667 9.5 2V3M15 14H9.5M7 14C7 12.8954 6.10443 12 5 12C3.89557 12 3 12.8954 3 14M7 14C7 15.1044 6.10443 16 5 16C3.89557 16 3 15.1044 3 14M7 14H9.5M3 14H1L1 8L3 7M9.5 14V7M9.5 3L5.5 3C5 3 4 3.5 4 4L3 7M9.5 3L9.5 7M3 7L9.5 7", stroke: "#FFCE1F", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }))); };
+exports.default = SvgCargoBack;

package/dist/components/Icon/Confetti.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgConfetti = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.8602 18.1468L2.30013 23.2641C1.95669 23.2656 1.62676 23.1306 1.38294 22.889C1.13911 22.6474 1.00136 22.319 1 21.9759L6.15948 10.5142L13.8602 18.1468ZM11.6677 12.6852C13.8064 14.8078 14.8757 17.1888 14.0551 18.0034C13.2345 18.818 10.8317 17.7577 8.69049 15.6354C6.54926 13.5131 5.48249 11.1321 6.30308 10.3175C7.12367 9.50291 9.52647 10.5624 11.6677 12.6847V12.6852Z", fill: "url(#paint0_linear_19146_183541)", style: {
+                mixBlendMode: "darken",
+            } }), (0, jsx_runtime_1.jsx)("path", { opacity: 0.4, fillRule: "evenodd", clipRule: "evenodd", d: "M4.09285 22.4696C4.54161 22.2882 6.32803 21.4999 6.4306 21.4374C4.3304 19.8958 3.59956 18.1529 3.13285 17.2363C3.04053 17.4484 2.28932 19.1453 1.88672 19.9947C2.14315 20.5888 3.20046 21.998 4.09285 22.4696Z", fill: "#CFC8FF" }), (0, jsx_runtime_1.jsx)("path", { opacity: 0.4, fillRule: "evenodd", clipRule: "evenodd", d: "M8.5952 20.478C9.04396 20.2969 10.8996 19.4773 11.0047 19.4153C8.11726 17.1485 6.17721 14.2301 6.08746 10.6641C5.99514 10.8757 4.64284 13.9306 4.24023 14.7803C4.91209 16.7847 7.23353 19.5991 8.5952 20.478Z", fill: "#CFC8FF" }), (0, jsx_runtime_1.jsx)("path", { opacity: 0.05, fillRule: "evenodd", clipRule: "evenodd", d: "M13.6521 18.2528L2.27276 23.2892C1.94608 23.29 1.63108 23.1678 1.39062 22.9469C3.5216 20.8165 11.6991 12.8627 11.7709 12.8047C11.9262 12.9304 15.1954 16.2784 14.1316 17.9411L13.8329 18.1718L13.6521 18.2528Z", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6686 12.6832C13.8072 14.8057 14.8766 17.1867 14.056 18.0013C13.2354 18.8159 10.8326 17.7557 8.69134 15.6334C6.55011 13.5111 5.48334 11.1301 6.30393 10.3155C7.12452 9.50089 9.52732 10.5609 11.6686 12.6832Z", fill: "url(#paint1_linear_19146_183541)", style: {
+                mixBlendMode: "darken",
+            } }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.0393 6.99234C13.1678 4.18046 9.8521 3.85232 9.71875 0.948985C9.71875 0.948985 9.93382 0.925781 10.4073 0.925781C10.6007 3.49614 14.0093 4.32361 10.4992 7.4982", fill: "#9085DE" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.7587 13.8451C18.385 10.5826 17.6347 13.5798 14.7514 13.2982C14.7514 13.2982 14.7562 13.0975 14.817 12.663C17.3794 12.8432 18.6345 9.83032 21.3172 13.4934", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.6914 9.63322C18.2004 11.005 16.4477 6.30981 21.0735 3.46047C21.0735 3.46047 21.198 3.63791 21.4276 4.05329C16.9671 6.72227 18.943 11.8224 14.4733 10.282", fill: "#FF7BA2" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.4888 6.83562C8.84074 6.83562 9.12604 6.55062 9.12604 6.19906C9.12604 5.8475 8.84074 5.5625 8.4888 5.5625C8.13687 5.5625 7.85156 5.8475 7.85156 6.19906C7.85156 6.55062 8.13687 6.83562 8.4888 6.83562Z", fill: "#FF4F83" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.7193 3.64812C13.0712 3.64812 13.3565 3.36312 13.3565 3.01156C13.3565 2.66 13.0712 2.375 12.7193 2.375C12.3673 2.375 12.082 2.66 12.082 3.01156C12.082 3.36312 12.3673 3.64812 12.7193 3.64812Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.6432 8.09161C13.993 8.09161 14.2766 7.80833 14.2766 7.45889C14.2766 7.10945 13.993 6.82617 13.6432 6.82617C13.2933 6.82617 13.0098 7.10945 13.0098 7.45889C13.0098 7.80833 13.2933 8.09161 13.6432 8.09161Z", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.093 3.10399L16.5724 4.1394L17.3725 4.97653C17.4021 5.00637 17.4093 5.05172 17.3905 5.08924C17.3694 5.1266 17.3279 5.14762 17.2853 5.14252L16.1314 4.97807L15.5698 5.99144C15.5494 6.02825 15.5081 6.04824 15.4666 6.04133C15.4251 6.03442 15.3924 6.00211 15.3851 5.9607L15.1902 4.82386L14.044 4.61201C14.0025 4.60478 13.9704 4.57168 13.9645 4.53004C13.9567 4.48828 13.9777 4.44645 14.0158 4.42758L15.0492 3.88964L14.903 2.74562C14.8968 2.7034 14.9185 2.66198 14.9569 2.64316C14.9953 2.62448 15.0413 2.63152 15.0723 2.66083L15.9057 3.46544L16.9596 2.96925C16.9982 2.95068 17.0444 2.95864 17.0745 2.98907C17.1046 3.01949 17.112 3.06567 17.093 3.10399Z", fill: "#FF4F83" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.4108 15.1157L17.6442 15.8916C17.6534 15.9197 17.643 15.9505 17.6185 15.9672C17.5938 15.9842 17.5612 15.9842 17.5365 15.9672L16.8672 15.501L16.1902 15.9587C16.1665 15.9759 16.1344 15.9759 16.1107 15.9587C16.085 15.9424 16.0743 15.9103 16.085 15.8819L16.3261 15.1085L15.6773 14.6149C15.653 14.5975 15.6426 14.5665 15.6517 14.5381C15.6615 14.5096 15.6882 14.4905 15.7183 14.4904L16.5389 14.4791L16.8107 13.716C16.8215 13.6885 16.8479 13.6703 16.8774 13.6699C16.9074 13.67 16.934 13.6889 16.9441 13.7171L17.2082 14.4835L18.0288 14.505C18.0581 14.5057 18.0838 14.5248 18.0929 14.5527C18.1037 14.5814 18.093 14.6138 18.0673 14.6305L17.4108 15.1157Z", fill: "#FF4F83" }), (0, jsx_runtime_1.jsx)("path", { d: "M19.8248 10.6912C20.1746 10.6912 20.4582 10.4079 20.4582 10.0585C20.4582 9.70906 20.1746 9.42578 19.8248 9.42578C19.475 9.42578 19.1914 9.70906 19.1914 10.0585C19.1914 10.4079 19.475 10.6912 19.8248 10.6912Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.1665 17.7399C20.5185 17.7399 20.8038 17.4549 20.8038 17.1034C20.8038 16.7518 20.5185 16.4668 20.1665 16.4668C19.8146 16.4668 19.5293 16.7518 19.5293 17.1034C19.5293 17.4549 19.8146 17.7399 20.1665 17.7399Z", fill: "#CFC8FF" }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_19146_183541", x1: 11.0681, y1: 13.5855, x2: 5.70253, y2: 14.8812, gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#FF3370" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "#6B57EC" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint1_linear_19146_183541", x1: 12.2993, y1: 12.2474, x2: 8.95689, y2: 13.0547, gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#FF3370" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "#6B57EC" })] })] })] }))); };
+exports.default = SvgConfetti;

package/dist/components/Icon/Search.js

@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var SvgSearch = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsxs)("g", { id: "Search", children: [(0, jsx_runtime_1.jsx)("circle", { id: "Ellipse_739", cx: 7.33203, cy: 7.33398, r: 6, stroke: "#9763F6", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Line_181", d: "M12 12L14.6667 14.6667", stroke: "#9763F6", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))); };
+var SvgSearch = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsxs)("g", { id: "Search", children: [(0, jsx_runtime_1.jsx)("circle", { id: "Ellipse_739", cx: 7.33203, cy: 7.33398, r: 6, stroke: "#84879E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Line_181", d: "M12 12L14.6667 14.6667", stroke: "#84879E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))); };
 exports.default = SvgSearch;

package/dist/components/Icon/index.js

@@ -25,10 +25,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Call = exports.Calendar = exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
-exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Graph = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Closemini = exports.CloseSquare = exports.CloseMiniHover = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = void 0;
-exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = exports.PoweredByQnbLogo = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = void 0;
-exports.iconList = exports.Visa = exports.TwitterStroke = exports.Pointinghand = exports.PointFinger = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Grid = exports.FacebookStroke = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = void 0;
+exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.BoxLeft = exports.BoxDown = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
+exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Graph = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Closemini = exports.CloseSquare = exports.CloseMiniHover = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.CargoBack = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = exports.Calendar = void 0;
+exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = exports.PoweredByQnbLogo = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = void 0;
+exports.Pointinghand = exports.PointFinger = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Grid = exports.FacebookStroke = exports.Confetti = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = void 0;
+exports.iconList = exports.Visa = exports.TwitterStroke = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Activity_1 = __importDefault(require("./Activity"));
 Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -120,6 +121,10 @@ var Bookmark_1 = __importDefault(require("./Bookmark"));
 Object.defineProperty(exports, "Bookmark", { enumerable: true, get: function () { return Bookmark_1.default; } });
 var Box_1 = __importDefault(require("./Box"));
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.default; } });
+var BoxDown_1 = __importDefault(require("./BoxDown"));
+Object.defineProperty(exports, "BoxDown", { enumerable: true, get: function () { return BoxDown_1.default; } });
+var BoxLeft_1 = __importDefault(require("./BoxLeft"));
+Object.defineProperty(exports, "BoxLeft", { enumerable: true, get: function () { return BoxLeft_1.default; } });
 var ButtonIcon_1 = __importDefault(require("./ButtonIcon"));
 Object.defineProperty(exports, "ButtonIcon", { enumerable: true, get: function () { return ButtonIcon_1.default; } });
 var Buy_1 = __importDefault(require("./Buy"));
@@ -146,6 +151,8 @@ var Cargo_1 = __importDefault(require("./Cargo"));
 Object.defineProperty(exports, "Cargo", { enumerable: true, get: function () { return Cargo_1.default; } });
 var Cargo2_1 = __importDefault(require("./Cargo2"));
 Object.defineProperty(exports, "Cargo2", { enumerable: true, get: function () { return Cargo2_1.default; } });
+var CargoBack_1 = __importDefault(require("./CargoBack"));
+Object.defineProperty(exports, "CargoBack", { enumerable: true, get: function () { return CargoBack_1.default; } });
 var Category_1 = __importDefault(require("./Category"));
 Object.defineProperty(exports, "Category", { enumerable: true, get: function () { return Category_1.default; } });
 var Chart_1 = __importDefault(require("./Chart"));
@@ -406,6 +413,8 @@ var Work_1 = __importDefault(require("./Work"));
 Object.defineProperty(exports, "Work", { enumerable: true, get: function () { return Work_1.default; } });
 var Youtube_1 = __importDefault(require("./Youtube"));
 Object.defineProperty(exports, "Youtube", { enumerable: true, get: function () { return Youtube_1.default; } });
+var Confetti_1 = __importDefault(require("./Confetti"));
+Object.defineProperty(exports, "Confetti", { enumerable: true, get: function () { return Confetti_1.default; } });
 var FacebookStroke_1 = __importDefault(require("./FacebookStroke"));
 Object.defineProperty(exports, "FacebookStroke", { enumerable: true, get: function () { return FacebookStroke_1.default; } });
 var Grid_1 = __importDefault(require("./Grid"));
@@ -607,6 +616,14 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({}, props));
     },
+    BoxDown: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(BoxDown_1.default, __assign({}, props));
+    },
+    BoxLeft: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(BoxLeft_1.default, __assign({}, props));
+    },
     ButtonIcon: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(ButtonIcon_1.default, __assign({}, props));
@@ -659,6 +676,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Cargo2_1.default, __assign({}, props));
     },
+    CargoBack: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(CargoBack_1.default, __assign({}, props));
+    },
     Category: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Category_1.default, __assign({}, props));
@@ -1179,6 +1200,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Youtube_1.default, __assign({}, props));
     },
+    Confetti: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(Confetti_1.default, __assign({}, props));
+    },
     FacebookStroke: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(FacebookStroke_1.default, __assign({}, props));

package/dist/components/InfoBox/InfoBox.js

@@ -15,11 +15,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var InfoBox_styled_1 = require("./InfoBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var InfoBox = function (props) {
     var title = props.title, description = props.description, radius = props.radius;
-    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { className: "caption-bold-12-15", children: title }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { className: "caption-medium-12-15", children: description })] })] })));
+    var descriptionRef = (0, react_1.useRef)(null);
+    var inputRef = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(false), alert = _a[0], setAlert = _a[1];
+    var _b = (0, react_1.useState)(0), alertLeft = _b[0], setAlertLeft = _b[1];
+    var _c = (0, react_1.useState)(0), alertTop = _c[0], setAlertTop = _c[1];
+    (0, react_1.useEffect)(function () {
+        if (alert) {
+            setTimeout(function () {
+                setAlert(false);
+            }, 2000);
+        }
+    }, [alert]);
+    var copyToClipboard = function (text) {
+        inputRef.current.value = text;
+        inputRef.current.select();
+        document.execCommand('copy');
+        setAlert(true);
+    };
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var copiedElem = (_a = descriptionRef === null || descriptionRef === void 0 ? void 0 : descriptionRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('span');
+        if (copiedElem) {
+            copiedElem.addEventListener("click", function (e) {
+                setAlertLeft(e.pageX);
+                setAlertTop(e.pageY);
+                copyToClipboard(copiedElem.innerHTML.replace(/[^\d]/g, ""));
+            }, false);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { className: "caption-bold-12-15", children: title }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { ref: descriptionRef, className: "caption-medium-12-15", dangerouslySetInnerHTML: { __html: description } }), alert && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, { alertLeft: alertLeft, alertTop: alertTop, className: "caption-medium-10-12", children: "Kopyaland\u0131" }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
 };
 InfoBox.defaultProps = {};
 exports.default = InfoBox;

package/dist/components/InfoBox/InfoBox.styled.js

@@ -7,10 +7,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Description = exports.Title = exports.IconWrapper = exports.InfoBoxStyled = void 0;
+exports.Input = exports.AlertStyled = exports.Description = exports.Title = exports.TextWrapper = exports.IconWrapper = exports.InfoBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ", ";\n  background: var(--primary-opacity-10);\n  padding: 1rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ", ";\n  background: var(--primary-opacity-10);\n  padding: 1rem;\n"])), function (props) { return props.radius ? props.radius : "8px"; });
 exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-right: 1rem;\n  svg{\n    display: block;\n    path[stroke]{\n      stroke-width: 1.5;\n    }\n  }\n"], ["\n  display: block;\n  margin-right: 1rem;\n  svg{\n    display: block;\n    path[stroke]{\n      stroke-width: 1.5;\n    }\n  }\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n"], ["\n  display: block;\n  margin: 0;\n"])));
-exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n"], ["\n  display: block;\n  margin: 0;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n"], ["\n  display: block;\n  margin: 0;\n"])));
+exports.Description = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  b{\n    font-weight: 700;\n  }\n  span{\n    font-weight: 700;\n    color: var(--primary);\n    cursor: pointer;\n    display: block;\n  }\n"], ["\n  display: block;\n  margin: 0;\n  b{\n    font-weight: 700;\n  }\n  span{\n    font-weight: 700;\n    color: var(--primary);\n    cursor: pointer;\n    display: block;\n  }\n"])));
+exports.AlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: fixed;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateY(-100%) translateX(-100%);\n"], ["\n  position: fixed;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateY(-100%) translateX(-100%);\n"])), function (props) { return props.alertLeft + 20; }, function (props) { return props.alertTop; });
+exports.Input = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n"], ["\n  position: absolute;\n  opacity: 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/InfoBox/stories/InfoBox.stories.js

@@ -19,13 +19,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var InfoBox_1 = __importDefault(require("../InfoBox"));
 exports.default = {
     title: 'Components/InfoBox',
-    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { width: "180px" }, children: (0, jsx_runtime_1.jsx)(InfoBox_1.default, __assign({}, props)) }); },
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { width: "674px" }, children: (0, jsx_runtime_1.jsx)(InfoBox_1.default, __assign({}, props)) }); },
     tags: ['autodocs'],
     argTypes: {}
 };
 exports.Default = {
     args: {
         title: "Info text",
-        description: "Body text",
+        //description:"Body text",
+        description: "İade günün kiralama bitiş günündür, daha erken bir tarihte kargolaman gerekmez. Eğer planlarında bir değişiklik olursa, kiralamanı bitiş tarihinden önce sonlandırmak için <b>info@kiralarsin.com</b>’a e-mail atabilirsin.  <span>Yurtiçi Kargo iade kodun: 567890678</span>",
     },
 };

package/dist/components/Input/Input.styled.js

@@ -11,5 +11,5 @@ exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n"])));
 exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n      path{\n        stroke:var(--dark-opacity-50);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n      path{\n        stroke:var(--dark-opacity-50);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
+exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/SelectBox/SelectBox.js

@@ -18,15 +18,16 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var SelectBox_styled_1 = require("./SelectBox.styled");
 var classnames_1 = __importDefault(require("classnames"));
 var react_select_1 = __importDefault(require("react-select"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
 var SelectBox = function (props) {
     var _a, _b;
-    var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg;
+    var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg, hasError = props.hasError, errorMessage = props.errorMessage;
     var formatOptionLabel = function (_a) {
         var _b;
         var innerProps = _a.innerProps, isDisabled = _a.isDisabled, data = _a.data;
         return ((0, jsx_runtime_1.jsx)("div", __assign({}, innerProps, { className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b)), children: (0, jsx_runtime_1.jsxs)("div", { children: [data.label && (0, jsx_runtime_1.jsx)("strong", { className: "title-bold-16-19", children: data.label }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { className: "body-medium-13-16", children: data.labelBottom })] }) })));
     };
-    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props)) })] }));
+    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, hasError: hasError, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props)) }), hasError && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: errorMessage })] })] }));
 };
 SelectBox.defaultValues = {
     hasError: false,

package/dist/components/SelectBox/SelectBox.styled.js

@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: 1px;\n          border-style: solid;\n          border-radius: 8px;\n          border-color: var(--dark-opacity-10);\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark-opacity-50);\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark);\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 24px;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: 200px;\n          scroll-margin: 0 10px 30px 0;\n          scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: 51px;\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: 1px;\n          border-style: solid;\n          border-radius: 8px;\n          border-color: var(--dark-opacity-10);\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark-opacity-50);\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark);\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 24px;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: 200px;\n          scroll-margin: 0 10px 30px 0;\n          scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: 51px;\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n"])), function (props) { return props.width || '370px'; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 24px;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: 200px;\n          scroll-margin: 0 10px 30px 0;\n          scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: 51px;\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 24px;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: 200px;\n          scroll-margin: 0 10px 30px 0;\n          scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: 51px;\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
 var templateObject_1;

package/dist/components/SelectBox/stories/SelectBox.stories.js

@@ -10,7 +10,9 @@ exports.default = {
     title: 'Components/SelectBox',
     component: SelectBox_1.default,
     tags: ['autodocs'],
-    argTypes: {}
+    argTypes: {
+        hasError: { control: 'boolean' },
+    }
 };
 exports.Default = {
     args: {
@@ -22,5 +24,7 @@ exports.Default = {
         //menuIsOpen: true,
         options: SelectValues_json_1.default,
         width: "400px",
+        hasError: false,
+        errorMessage: "Error message.",
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.72.1",
+  "version": "1.72.2",
   "files": [
     "dist"
   ],