krl-alfred 1.76.52 → 1.77.0

package/dist/components/ActionButton/ActionButton.js

@@ -23,9 +23,10 @@ var date_fns_1 = require("date-fns");
 var react_i18next_1 = require("react-i18next");
 var ActionButton = function (props) {
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _a = (0, react_1.useState)(0), days = _a[0], setDays = _a[1];
-    var _b = (0, react_1.useState)(0), minutes = _b[0], setMinutes = _b[1];
-    var _c = (0, react_1.useState)(0), hours = _c[0], setHours = _c[1];
+    var _a = (0, react_1.useState)(0), months = _a[0], setMonths = _a[1];
+    var _b = (0, react_1.useState)(0), days = _b[0], setDays = _b[1];
+    var _c = (0, react_1.useState)(0), minutes = _c[0], setMinutes = _c[1];
+    var _d = (0, react_1.useState)(0), hours = _d[0], setHours = _d[1];
     //const [secounds,setSecounds] = useState(0);
     var deadline = new Date(props.date).getTime();
     var count = function () {
@@ -34,7 +35,8 @@ var ActionButton = function (props) {
             start: deadline,
             end: now
         });
-        setDays(deadline - now > 0 ? (0, date_fns_1.differenceInDays)(deadline, now) : 0);
+        setMonths(deadline - now > 0 ? (0, date_fns_1.differenceInMonths)(deadline, now) : 0);
+        setDays(deadline - now > 0 ? props.isMonthVisible ? duration === null || duration === void 0 ? void 0 : duration.days : (0, date_fns_1.differenceInDays)(deadline, now) : 0);
         setMinutes(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.minutes : 0);
         setHours(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.hours : 0);
         //setSecounds(deadline - now > 0 ? duration?.seconds : 0)
@@ -45,7 +47,7 @@ var ActionButton = function (props) {
     (0, react_1.useEffect)(function () {
         count();
     }, [props.date]);
-    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { iconStrokeWidth: "3px", size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [props.isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !props.isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { iconStrokeWidth: "3px", size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] }))] })));
 };
 ActionButton.defaultProps = {
     title: "Title",

package/dist/components/ActionButton/ActionButton.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionButtonStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 4px;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 #EAE9F0;\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"], ["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 4px;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 #EAE9F0;\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"])), function (props) { return props.width; });
+exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 4px;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"], ["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 4px;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"])), function (props) { return props.width; });
 var templateObject_1;

package/dist/components/ActionButton/stories/ActionButton.stories.js

@@ -25,5 +25,6 @@ exports.Default = {
         //date:"2024-09-25T14:51:41.115Z",
         icon: 'TimeCircle',
         onClick: function (e) { return console.log(e); },
+        isMonthVisible: false,
     },
 };

package/dist/components/Alert/Alert.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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  border-radius: 8px;\n  border-left: 8px solid ", ";\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  width: ", ";\n  display: flex;\n  padding: 1rem;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  .left {\n    padding-right: 1rem;\n    > div {\n      display: block;\n      svg {\n        display: block;\n      } \n    }\n  }\n\n  .right {\n    display: flex;\n    flex-direction: column;\n    color: var(--dark);\n\n    h1 {\n      margin: 0;\n      padding-top: 3px;\n      font:var(--title-semi-bold-16-19);\n    }\n\n    p {\n      margin: 0.5rem 0 0 0;\n      font:var(--body-medium-14-17);\n    }\n    .description{\n      font:var(--body-medium-14-17);\n      ul{\n          padding-left: 1.5rem;\n      } \n    }\n  }\n"], ["\n  border-radius: 8px;\n  border-left: 8px solid ", ";\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  width: ", ";\n  display: flex;\n  padding: 1rem;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  .left {\n    padding-right: 1rem;\n    > div {\n      display: block;\n      svg {\n        display: block;\n      } \n    }\n  }\n\n  .right {\n    display: flex;\n    flex-direction: column;\n    color: var(--dark);\n\n    h1 {\n      margin: 0;\n      padding-top: 3px;\n      font:var(--title-semi-bold-16-19);\n    }\n\n    p {\n      margin: 0.5rem 0 0 0;\n      font:var(--body-medium-14-17);\n    }\n    .description{\n      font:var(--body-medium-14-17);\n      ul{\n          padding-left: 1.5rem;\n      } \n    }\n  }\n"])), function (props) {
+exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 8px;\n  border-left: 8px solid ", ";\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  width: ", ";\n  display: flex;\n  padding: 1rem;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  .left {\n    padding-right: 1rem;\n    > div {\n      display: block;\n      svg {\n        display: block;\n      } \n    }\n  }\n\n  .right {\n    display: flex;\n    flex-direction: column;\n    color: var(--dark);\n\n    h1 {\n      margin: 0;\n      padding-top: 3px;\n      font:var(--title-semi-bold-16-19);\n    }\n\n    p {\n      margin: 0.5rem 0 0 0;\n      font:var(--body-medium-14-17);\n    }\n    .description{\n      font:var(--body-medium-14-17);\n      ul{\n          padding-left: 1.5rem;\n      } \n    }\n  }\n"], ["\n  border-radius: 8px;\n  border-left: 8px solid ", ";\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  width: ", ";\n  display: flex;\n  padding: 1rem;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  .left {\n    padding-right: 1rem;\n    > div {\n      display: block;\n      svg {\n        display: block;\n      } \n    }\n  }\n\n  .right {\n    display: flex;\n    flex-direction: column;\n    color: var(--dark);\n\n    h1 {\n      margin: 0;\n      padding-top: 3px;\n      font:var(--title-semi-bold-16-19);\n    }\n\n    p {\n      margin: 0.5rem 0 0 0;\n      font:var(--body-medium-14-17);\n    }\n    .description{\n      font:var(--body-medium-14-17);\n      ul{\n          padding-left: 1.5rem;\n      } \n    }\n  }\n"])), function (props) {
     switch (props.variant) {
         case 'warning':
             return "var(--yellow)";

package/dist/components/Badges/Badges.js

@@ -17,12 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var belt_1 = __importDefault(require("./layouts/belt"));
 var dark_1 = __importDefault(require("./layouts/dark"));
+var text_1 = __importDefault(require("./layouts/text"));
 var Badges = function (props) {
     switch (props.layout) {
         case 'belt':
             return (0, jsx_runtime_1.jsx)(belt_1.default, __assign({}, props));
         case 'dark':
             return (0, jsx_runtime_1.jsx)(dark_1.default, __assign({}, props));
+        case 'text':
+            return (0, jsx_runtime_1.jsx)(text_1.default, __assign({}, props));
         default:
             return (0, jsx_runtime_1.jsx)(belt_1.default, __assign({}, props));
     }

package/dist/components/Badges/layouts/belt/belt.styled.js

@@ -9,12 +9,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgesStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n  position: relative;\n  svg{\n    display: block;\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n  }\n"], ["\n  filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n  position: relative;\n  svg{\n    display: block;\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n  }\n"])), function (props) { return props.size === "small" ? "60px" : "90px"; }, function (props) { return props.size === "small" ? "15px" : "27px"; }, function (props) { return props.size === "small" ? "-5px" : "-7px"; }, function (props) {
-    switch (props.size) {
+var devices_1 = require("../../../../constants/devices");
+exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n  position: relative;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"], ["\n  filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n  position: relative;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"])), function (props) { return props.$hasResponsive && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n          width: 60px;\n          height: 60px;\n        }\n      "); }, function (props) { return props.$size === "small" ? "60px" : "90px"; }, function (props) { return props.$size === "small" ? "15px" : "27px"; }, function (props) { return props.$size === "small" ? "-5px" : "-7px"; }, function (props) {
+    switch (props.$size) {
         case 'small':
             return "var(--caption-bold-10-12)";
         default:
             return "var(--body-extra-bold-13-16)";
     }
-});
+}, function (props) { return props.$hasResponsive && "\n      @media only screen and ".concat(devices_1.devices.lg, " {\n         width: 60px;\n         top: 15px;\n         left: -5px;\n         font: var(--caption-bold-10-12);\n         line-height: 15px;\n      }\n    "); });
 var templateObject_1;

package/dist/components/Badges/layouts/belt/index.js

@@ -19,7 +19,7 @@ var belt_styled_1 = require("./belt.styled");
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var Belt = function (props) {
     var title = props.title, size = props.size;
-    return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: size === "small" ? "56px" : "90px", height: size === "small" ? "56px" : "90px" }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: title }))] })));
+    return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({ "$hasResponsive": props.hasResponsive, "$size": props.size }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: size === "small" ? "56px" : "90px", height: size === "small" ? "56px" : "90px" }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: title }))] })));
 };
 Belt.defaultProps = {};
 exports.default = Belt;

package/dist/components/Badges/layouts/dark/dark.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DarkStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.DarkStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  left: ", ";\n  top: ", ";\n  z-index: 2;\n  svg{\n    display: block;\n  }\n"], ["\n  position: relative;\n  left: ", ";\n  top: ", ";\n  z-index: 2;\n  svg{\n    display: block;\n  }\n"])), function (props) { return props.left ? props.left : "0"; }, function (props) { return props.top ? props.top : "0"; });
+exports.DarkStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  left: ", ";\n  top: ", ";\n  z-index: 2;\n  svg{\n    display: block;\n  }\n"], ["\n  position: relative;\n  left: ", ";\n  top: ", ";\n  z-index: 2;\n  svg{\n    display: block;\n  }\n"])), function (props) { return props.$left ? props.$left : "0"; }, function (props) { return props.$top ? props.$top : "0"; });
 var templateObject_1;

package/dist/components/Badges/layouts/dark/index.js

@@ -40,7 +40,7 @@ var Belt = function (props) {
             setHeight("80px");
         }
     }, [size]);
-    return ((0, jsx_runtime_1.jsx)(dark_styled_1.DarkStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DarkBadge", width: width, height: height }) })));
+    return ((0, jsx_runtime_1.jsx)(dark_styled_1.DarkStyled, __assign({ "$left": props.left, "$top": props.top }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DarkBadge", width: width, height: height }) })));
 };
 Belt.defaultProps = {};
 exports.default = Belt;

package/dist/components/Badges/layouts/text/index.js

@@ -0,0 +1,20 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var text_styled_1 = require("./text.styled");
+var Belt = function (props) {
+    return ((0, jsx_runtime_1.jsx)(text_styled_1.TextStyled, __assign({ "$variant": props.variant }, { children: props.title })));
+};
+Belt.defaultProps = {};
+exports.default = Belt;

package/dist/components/Badges/layouts/text/text.styled.js

@@ -0,0 +1,39 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.TextStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--caption-semi-bold-10-12);\n    border-radius: 3px;\n    padding: 0 8px 0 8px;\n    height: 17px;\n    line-height: 17px;\n    background-color: ", ";\n    color: ", ";\n"], ["\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--caption-semi-bold-10-12);\n    border-radius: 3px;\n    padding: 0 8px 0 8px;\n    height: 17px;\n    line-height: 17px;\n    background-color: ", ";\n    color: ", ";\n"])), function (props) {
+    switch (props.$variant) {
+        case 'primary':
+            return "var(--primary)";
+        case 'secondary':
+            return "var(--primary-opacity-10)";
+        case 'danger':
+            return "var(--red)";
+        case 'disabled':
+            return "var(--dark-opacity-5)";
+        default:
+            return "var(--primary)";
+    }
+}, function (props) {
+    switch (props.$variant) {
+        case 'primary':
+            return "white";
+        case 'secondary':
+            return "var(--primary)";
+        case 'danger':
+            return "white";
+        case 'disabled':
+            return "var(--dark-opacity-50)";
+        default:
+            return "white";
+    }
+});
+var templateObject_1;

package/dist/components/Badges/props.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sizes = exports.layouts = void 0;
-exports.layouts = ['belt', 'dark'];
+exports.variants = exports.sizes = exports.layouts = void 0;
+exports.layouts = ['belt', 'dark', 'text'];
 exports.sizes = ['large', 'medium', 'small', 'xsmall'];
+exports.variants = ['primary', 'secondary', 'danger', 'disabled'];

package/dist/components/Badges/stories/Badges.stories.js

@@ -12,6 +12,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         layout: { control: 'select', options: props_1.layouts },
+        variant: { control: 'select', options: props_1.variants },
         size: { control: 'select', options: props_1.sizes },
     }
 };

package/dist/components/Banner/layouts/layout1/layout1.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerItem = exports.ThumbnailItem = exports.BannerStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
-exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .swiper-wrapper {\n    align-items: center;\n  }\n\n  .slick-list {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    position: relative;\n    overflow: hidden;\n\n    @media only screen and ", " {\n      background: #f1f1f1;\n    }\n  }\n  .slick-arrow{\n    display: none !important;\n  }\n\n  @media only screen and ", " {\n    .slick-active{\n      box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n      position: relative;\n      z-index: 5;\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .navigation {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all .2s;\n      width: 48px;\n      height: 48px;\n      box-shadow: 0 0 16px 0 white;\n      border: 0;\n      background-color: white;\n      color: var(--primary);\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n      }\n    }\n  }\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .swiper-wrapper {\n    align-items: center;\n  }\n\n  .slick-list {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    position: relative;\n    overflow: hidden;\n\n    @media only screen and ", " {\n      background: #f1f1f1;\n    }\n  }\n  .slick-arrow{\n    display: none !important;\n  }\n\n  @media only screen and ", " {\n    .slick-active{\n      box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n      position: relative;\n      z-index: 5;\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .navigation {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all .2s;\n      width: 48px;\n      height: 48px;\n      box-shadow: 0 0 16px 0 white;\n      border: 0;\n      background-color: white;\n      color: var(--primary);\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n      }\n    }\n  }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
+exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .swiper-wrapper {\n    align-items: center;\n  }\n\n  .slick-list {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    position: relative;\n    overflow: hidden;\n\n    @media only screen and ", " {\n      background: #f1f1f1;\n    }\n  }\n  .slick-arrow{\n    display: none !important;\n  }\n\n  @media only screen and ", " {\n    .slick-active{\n      box-shadow: 0 0.375rem 1.875rem 0 var(--box-shadow-color);\n      position: relative;\n      z-index: 5;\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .navigation {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all .2s;\n      width: 48px;\n      height: 48px;\n      box-shadow: 0 0 16px 0 white;\n      border: 0;\n      background-color: white;\n      color: var(--primary);\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n      }\n    }\n  }\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .swiper-wrapper {\n    align-items: center;\n  }\n\n  .slick-list {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    position: relative;\n    overflow: hidden;\n\n    @media only screen and ", " {\n      background: #f1f1f1;\n    }\n  }\n  .slick-arrow{\n    display: none !important;\n  }\n\n  @media only screen and ", " {\n    .slick-active{\n      box-shadow: 0 0.375rem 1.875rem 0 var(--box-shadow-color);\n      position: relative;\n      z-index: 5;\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .navigation {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all .2s;\n      width: 48px;\n      height: 48px;\n      box-shadow: 0 0 16px 0 white;\n      border: 0;\n      background-color: white;\n      color: var(--primary);\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n      }\n    }\n  }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
 exports.ThumbnailItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  height: 50px;\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: hidden;\n  margin: 0 4px;\n  box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n  width: 70px;\n  padding: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: all .1s ease;\n  background-color: ", ";\n\n  &:is(.active) {\n    border-color: var(--primary);\n  }\n\n  > * {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    object-position: center center;\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  height: 50px;\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: hidden;\n  margin: 0 4px;\n  box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n  width: 70px;\n  padding: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: all .1s ease;\n  background-color: ", ";\n\n  &:is(.active) {\n    border-color: var(--primary);\n  }\n\n  > * {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    object-position: center center;\n  }\n"])), function (props) { return props.hasDarkTheme ? "var(--dark)" : "#fff"; });
 exports.BannerItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        span {\n          height: 174px !important;\n        }\n      }\n    }\n"], ["\n\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        span {\n          height: 174px !important;\n        }\n      }\n    }\n"])), function (props) { return props.hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.hasDarkTheme ? "var(--dark)" : "#fff"; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/BannerCard/BannerCard.js

@@ -19,7 +19,7 @@ var BannerCard_styled_1 = require("./BannerCard.styled");
 var Button_1 = __importDefault(require("../Button"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var BannerCard = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(BannerCard_styled_1.BannerCardStyled, __assign({ "$hasDarkTheme": props.hasDarkTheme, "$hasShadow": props.hasShadow }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(props === null || props === void 0 ? void 0 : props.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props === null || props === void 0 ? void 0 : props.title })), (props === null || props === void 0 ? void 0 : props.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: props === null || props === void 0 ? void 0 : props.description })), (props === null || props === void 0 ? void 0 : props.buttonText) &&
+    return ((0, jsx_runtime_1.jsxs)(BannerCard_styled_1.BannerCardStyled, __assign({ "$hasDarkTheme": props.hasDarkTheme, "$hasShadow": props.hasShadow }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(props === null || props === void 0 ? void 0 : props.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.title } }), (props === null || props === void 0 ? void 0 : props.description) && (0, jsx_runtime_1.jsx)("p", { className: "description", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.description } }), (props === null || props === void 0 ? void 0 : props.buttonText) &&
                         (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: props === null || props === void 0 ? void 0 : props.onClick }, { children: props === null || props === void 0 ? void 0 : props.buttonText }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props === null || props === void 0 ? void 0 : props.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "textMobile", onClick: props === null || props === void 0 ? void 0 : props.onClick }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.shortDesc } }), props.hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] }))] })));
 };
 BannerCard.defaultProps = {};

package/dist/components/BannerCard/BannerCard.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
+exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "\"box-shadow: 0 6px 30px 0 var(--box-shadow-color);\"" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
 var templateObject_1;

package/dist/components/Breadcrumbs/Breadcrumbs.styled.js

@@ -24,5 +24,5 @@ exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 |
 exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  padding: 0;\n  font:var(--caption-medium-12-15);\n  > a {\n    text-decoration: none;\n    color: var(--dark);\n    padding: 8px;\n    border-radius: 5px;\n    display: block;\n    ", "\n      background-color : var(--primary-opacity-10);\n      color: var(--primary);\n      font-weight: 700;\n    ", "\n    ", "\n  }\n"], ["\n  display: block;\n  padding: 0;\n  font:var(--caption-medium-12-15);\n  > a {\n    text-decoration: none;\n    color: var(--dark);\n    padding: 8px;\n    border-radius: 5px;\n    display: block;\n    ", "\n      background-color : var(--primary-opacity-10);\n      color: var(--primary);\n      font-weight: 700;\n    ", "\n    ", "\n  }\n"])), function (props) { return (props.$isActive ? "" : "&:hover{"); }, function (props) { return (props.$isActive ? "" : "}"); }, function (props) { return (props.$isSeeAll ? "font-weight: 700;" : ""); });
 exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
 exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.xl);
-exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px #eae9f0;\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px #eae9f0;\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
+exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports.SubCategoryInner = exports.SubCategoryItem = exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n        text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n        text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])));
-var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 #EAE9F0;\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 #EAE9F0;\n    }\n"])));
+var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])));
 exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        > a {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        > a {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        > a > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; });
 exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid white;\n        color: var(--dark-opacity-75);\n        background-color: white;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid white;\n        color: var(--dark-opacity-75);\n        background-color: white;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
 exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    height: 24px;\n    display:block;\n"], ["\n    height: 24px;\n    display:block;\n"])));

package/dist/components/Dropdown/Dropdown.js

@@ -29,15 +29,24 @@ var Dropdown = function (props) {
     }, [props.show]);
     var ButtonLinkComponent = function (_a) {
         var item = _a.item, children = _a.children;
-        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
+        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, __assign({ onClick: function (e) {
+                item.onClick(e);
+                setShowDropdown(false);
+            } }, { children: children }))) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug, onClick: function (e) {
+                item.onClick(e);
+                setShowDropdown(false);
+            } }, { children: children })));
     };
     var ToggleButton = function (_a) {
         var children = _a.children;
-        return props.toggle ? ((0, jsx_runtime_1.jsx)(props.toggle, { children: children })) : ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: function () { return setShowDropdown(!showDropdown); } }, { children: "Toggle" })));
+        return props.toggle ? ((0, jsx_runtime_1.jsx)("span", __assign({ onClick: function () { return setShowDropdown(!showDropdown); } }, { children: (0, jsx_runtime_1.jsx)(props.toggle, { children: children }) }))) : ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: function () { return setShowDropdown(!showDropdown); } }, { children: "Toggle" })));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
+    return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown, "$size": props.size, "$isShowTopChevron": props.isShowTopChevron }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
                         return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: item.title })) }, key));
                     }) }) }))] })));
 };
-Dropdown.defaultProps = {};
+Dropdown.defaultProps = {
+    size: "medium",
+    isShowTopChevron: true
+};
 exports.default = Dropdown;

package/dist/components/Dropdown/Dropdown.styled.js

@@ -10,5 +10,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = exports.DropdownStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.DropdownStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
-exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  padding: 1rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  min-width: 184px;\n  right: 0;\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: 12px;\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        font:var(--body-bold-13-16);\n        position: relative;\n        &:hover{\n          color: var(--primary);\n          background-color: var(--primary-opacity-5);\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  padding: 1rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  min-width: 184px;\n  right: 0;\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: 12px;\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        font:var(--body-bold-13-16);\n        position: relative;\n        &:hover{\n          color: var(--primary);\n          background-color: var(--primary-opacity-5);\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"])), function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; });
+exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: 0;\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        &:hover{\n          color: var(--primary);\n          background-color: var(--primary-opacity-5);\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: 0;\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        &:hover{\n          color: var(--primary);\n          background-color: var(--primary-opacity-5);\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"])), function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; }, function (props) {
+    switch (props.$size) {
+        case 'small':
+            return "0.5rem";
+        case 'medium':
+            return "1rem";
+        default:
+            return "1rem";
+    }
+}, function (props) {
+    switch (props.$size) {
+        case 'small':
+            return "169px";
+        case 'medium':
+            return "184px";
+        default:
+            return "184px";
+    }
+}, function (props) { return props.$isShowTopChevron ? "block" : "none"; }, function (props) {
+    switch (props.$size) {
+        case 'small':
+            return "8px 12px";
+        case 'medium':
+            return "12px";
+        default:
+            return "12px";
+    }
+}, function (props) {
+    switch (props.$size) {
+        case 'small':
+            return "var(--caption-medium-12-15)";
+        case 'medium':
+            return "var(--body-bold-13-16)";
+        default:
+            return "var(--body-bold-13-16)";
+    }
+});
 var templateObject_1, templateObject_2;

package/dist/components/Dropdown/props.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.sizes = void 0;
+exports.sizes = ['small', 'medium'];
 var DropdownDefault = {
     show: false,
 };

package/dist/components/InfoBox/InfoBox.js

@@ -20,7 +20,7 @@ var InfoBox_styled_1 = require("./InfoBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var react_i18next_1 = require("react-i18next");
 var InfoBox = function (props) {
-    var title = props.title, description = props.description, radius = props.radius, size = props.size;
+    var title = props.title, description = props.description, radius = props.radius, size = props.size, variant = props.variant, onClick = props.onClick;
     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];
@@ -55,7 +55,7 @@ var InfoBox = function (props) {
             }
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ radius: radius }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "2px", 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, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: props.onClick, "$radius": radius, "$variant": variant, "$hasLink": !!props.onClick, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "2px", name: variant === "danger" ? "Danger" : "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, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!props.onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "2px", name: "ArrowSmallRight", width: "24px", height: "24px" }) }))] })));
 };
 InfoBox.defaultProps = {
     size: "small"

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

@@ -7,14 +7,64 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.AlertStyled = exports.Description = exports.Title = exports.TextWrapper = exports.IconWrapper = exports.InfoBoxStyled = void 0;
+exports.Input = exports.AlertStyled = exports.Description = exports.LinkIconWrapper = exports.Title = exports.TextWrapper = exports.IconWrapper = exports.InfoBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-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  }\n"], ["\n  display: block;\n  margin-right: 1rem;\n  svg{\n    display: block;\n  }\n"])));
-exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
+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  cursor: ", ";\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ", ";\n  cursor: ", ";\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n"])), function (props) { return props.$radius ? props.$radius : "8px"; }, function (props) { return props.$hasLink ? "pointer" : "initial"; }, function (props) {
+    switch (props.$variant) {
+        case 'primary':
+            return "var(--primary-opacity-10)";
+        case 'danger':
+            return "var(--red)";
+        default:
+            return "var(--primary-opacity-10)";
+    }
+}, function (props) {
+    switch (props.$variant) {
+        case 'primary':
+            return "var(--dark)";
+        case 'danger':
+            return "white";
+        default:
+            return "var(--dark)";
+    }
+}, function (props) {
+    switch (props.$size) {
+        case 'small':
+            return "0.5rem 1rem 0.5rem 1rem";
+        case 'medium':
+            return "1rem";
+        case 'large':
+            return "1rem";
+        default:
+            return "1rem";
+    }
+});
+exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-right: 1rem;\n  color: ", ";\n  svg{\n    display: block;\n  }\n"], ["\n  display: block;\n  margin-right: 1rem;\n  color: ", ";\n  svg{\n    display: block;\n  }\n"])), function (props) {
+    switch (props.$variant) {
+        case 'primary':
+            return "var(--dark)";
+        case 'danger':
+            return "white";
+        default:
+            return "var(--dark)";
+    }
+});
+exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  flex: 1 0;\n"], ["\n  position: relative;\n  flex: 1 0;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"], ["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"])));
-exports.Description = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font:", ";\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  font:", ";\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"])), function (props) { return props.$size === "small" ? "var(--caption-medium-12-15)" : "var(--body-medium-14-17)"; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
-exports.AlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\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: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\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: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.$alertLeft; }, function (props) { return props.$alertTop - 5; }, function (props) { return props.$visible ? '1' : '0'; });
-exports.Input = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+exports.LinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-left: 1rem;\n"], ["\n  display: block;\n  margin-left: 1rem;\n"])));
+exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font: ", ";\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  font: ", ";\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"])), function (props) {
+    switch (props.$size) {
+        case 'small':
+            return "var(--caption-medium-12-15)";
+        case 'medium':
+            return "var(--caption-medium-12-15)";
+        case 'large':
+            return "var(--body-medium-14-17)";
+        default:
+            return "var(--body-medium-14-17)";
+    }
+}, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
+exports.AlertStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\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: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\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: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.$alertLeft; }, function (props) { return props.$alertTop - 5; }, function (props) { return props.$visible ? '1' : '0'; });
+exports.Input = styled_components_1.default.input(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/InfoBox/props.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sizes = void 0;
-exports.sizes = ['small', 'medium'];
+exports.variants = exports.sizes = void 0;
+exports.sizes = ['small', 'medium', 'large'];
+exports.variants = ['primary', 'danger'];