krl-alfred 1.76.3 → 1.76.5

package/dist/components/Accordion/Accordion.js

@@ -34,7 +34,7 @@ var Accordion = function (props) {
             }, 800);
         }
     }, [hasScrollOnFocus, activeIndex]);
-    return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.AccordionStyled, { children: [title && (0, jsx_runtime_1.jsx)(Accordion_styled_1.AccordionTitle, __assign({ size: size }, { children: title })), (0, jsx_runtime_1.jsx)(Accordion_styled_1.Wrapper, __assign({ ref: wrapperRef }, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { active: active, setActive: setActive, size: size, collapseAll: collapseAll, index: key, title: item.question, content: item.answer }, key)); }) })), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, __assign({ className: "body-bold-14-17" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: linkOnClick }, { children: linkText })) })))] }));
+    return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.AccordionStyled, { children: [title && (0, jsx_runtime_1.jsx)(Accordion_styled_1.AccordionTitle, __assign({ size: size }, { children: title })), (0, jsx_runtime_1.jsx)(Accordion_styled_1.Wrapper, __assign({ ref: wrapperRef }, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { active: active, setActive: setActive, size: size, collapseAll: collapseAll, index: key, title: item.question, content: item.answer }, key)); }) })), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: linkOnClick }, { children: linkText })) }))] }));
 };
 Accordion.defaultProps = {};
 exports.default = Accordion;

package/dist/components/Accordion/Accordion.styled.js

@@ -11,10 +11,10 @@ exports.Footer = exports.ItemContent = exports.ItemTitle = exports.Item = export
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.AccordionStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-exports.AccordionTitle = styled_components_1.default.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 1.5rem;\n  margin-top: 0;\n  ", "\n\n  @media only screen and ", " {\n    font-weight: bold;\n    font-size: 16px;\n    line-height: 19px;\n  }\n"], ["\n  margin-bottom: 1.5rem;\n  margin-top: 0;\n  ", "\n\n  @media only screen and ", " {\n    font-weight: bold;\n    font-size: 16px;\n    line-height: 19px;\n  }\n"])), function (props) { return props.size === "large" ? "\n    font-weight: bold;\n    font-size: 18px;\n    line-height: 22px;\n  " : "\n    font-weight: bold;\n    font-size: 16px;\n    line-height: 19px;\n  "; }, devices_1.devices.lg);
+exports.AccordionTitle = styled_components_1.default.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 1.5rem;\n  margin-top: 0;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--title-bold-16-19);\n  }\n"], ["\n  margin-bottom: 1.5rem;\n  margin-top: 0;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--title-bold-16-19);\n  }\n"])), function (props) { return props.size === "large" ? "var(--headline-bold-18-22)" : "var(--title-bold-16-19)"; }, devices_1.devices.lg);
 exports.Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n"], ["\n\n"])));
 exports.Item = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  &:not(:nth-child(1)) {\n    margin-top: 1.5rem;\n  }\n"], ["\n  &:not(:nth-child(1)) {\n    margin-top: 1.5rem;\n  }\n"])));
-exports.ItemTitle = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  ", "\n\n  @media only screen and ", " {\n    font-weight: bold;\n    font-size: 14px;\n    line-height: 17px;\n  }\n  svg{\n    path[stroke-width]{\n      stroke-width : 1.5px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  ", "\n\n  @media only screen and ", " {\n    font-weight: bold;\n    font-size: 14px;\n    line-height: 17px;\n  }\n  svg{\n    path[stroke-width]{\n      stroke-width : 1.5px;\n    }\n  }\n"])), function (props) { return props.size === "large" ? "\n    font-weight: bold;\n    font-size: 16px;\n    line-height: 19px;\n  " : "\n    font-weight: bold;\n    font-size: 14px;\n    line-height: 17px;\n  "; }, devices_1.devices.lg);
-exports.ItemContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  transition: all .3s ease;\n  overflow: hidden;\n  position: relative;\n\n  ", "\n  @media only screen and ", " {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 17px;\n  }\n  > div{\n    padding: 1rem 2rem 0 0;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    a{\n      color : var(--primary);\n      &:hover , :focus , :active {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"], ["\n  transition: all .3s ease;\n  overflow: hidden;\n  position: relative;\n\n  ", "\n  @media only screen and ", " {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 17px;\n  }\n  > div{\n    padding: 1rem 2rem 0 0;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    a{\n      color : var(--primary);\n      &:hover , :focus , :active {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"])), function (props) { return props.size === "large" ? "\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 19px;\n  " : "\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 17px;\n  "; }, devices_1.devices.lg);
-exports.Footer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  margin-top: 1.5rem!important;\n"], ["\n  box-sizing: border-box;\n  display: block;\n  margin-top: 1.5rem!important;\n"])));
+exports.ItemTitle = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--body-bold-14-17);\n  }\n  svg{\n    path[stroke-width]{\n      stroke-width : 1.5px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--body-bold-14-17);\n  }\n  svg{\n    path[stroke-width]{\n      stroke-width : 1.5px;\n    }\n  }\n"])), function (props) { return props.size === "large" ? "var(--title-bold-16-19)" : "var(--body-bold-14-17)"; }, devices_1.devices.lg);
+exports.ItemContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  transition: all .3s ease;\n  overflow: hidden;\n  position: relative;\n  font : ", ";\n  @media only screen and ", " {\n    font : var(--body-regular-14-17);\n  }\n  > div{\n    padding: 1rem 2rem 0 0;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    a{\n      color : var(--primary);\n      &:hover , :focus , :active {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"], ["\n  transition: all .3s ease;\n  overflow: hidden;\n  position: relative;\n  font : ", ";\n  @media only screen and ", " {\n    font : var(--body-regular-14-17);\n  }\n  > div{\n    padding: 1rem 2rem 0 0;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    a{\n      color : var(--primary);\n      &:hover , :focus , :active {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"])), function (props) { return props.size === "large" ? "var(--title-regular-16-19)" : "var(--body-regular-14-17)"; }, devices_1.devices.lg);
+exports.Footer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  margin-top: 1.5rem!important;\n    font : var(--body-bold-14-17);\n"], ["\n  box-sizing: border-box;\n  display: block;\n  margin-top: 1.5rem!important;\n    font : var(--body-bold-14-17);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/ActionButton/ActionButton.js

@@ -45,7 +45,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, { name: props.icon, width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title body-bold-14-17" }, { 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: "title-extra-bold-16-19" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "caption-regular-10-12" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots caption-bold-12-15" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "title-extra-bold-16-19" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "caption-regular-10-12" }, { children: t('hour') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots caption-bold-12-15" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "title-extra-bold-16-19" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "caption-regular-10-12" }, { children: t('minute') }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { 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: [(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 caption-bold-12-15" }, { 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        path {\n          &:is([stroke]){\n            stroke : var(--primary);\n            stroke-width: 2;\n          }\n          &:is([fill]){\n            fill : var(--primary);\n          }\n        }\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\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        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\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        path {\n          &:is([stroke]){\n            stroke : var(--primary);\n            stroke-width: 2;\n          }\n          &:is([fill]){\n            fill : var(--primary);\n          }\n        }\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\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        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\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 #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; });
 var templateObject_1;

package/dist/components/AddressCard/AddressCard.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font-size: 14px;\n            font-weight: 700;\n            line-height: 17px;\n            margin-left: 1rem;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: normal;\n        color: var(--dark);\n        height: 68px;\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"], ["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font-size: 14px;\n            font-weight: 700;\n            line-height: 17px;\n            margin-left: 1rem;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: normal;\n        color: var(--dark);\n        height: 68px;\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"])), function (props) { return props.checked ? 'var(--primary)' : 'var(--dark-opacity-10)'; });
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: 68px;\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"], ["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: 68px;\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"])), function (props) { return props.checked ? 'var(--primary)' : 'var(--dark-opacity-10)'; });
 var templateObject_1;

package/dist/components/Agreement/Agreement.js

@@ -34,9 +34,7 @@ var Agreement = function (props) {
         props.onChange(event);
     };
     var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
-    return (0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "agreement" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: props.title, name: props.name, valid: !props.hasError, size: "medium", checked: props.checked, disabled: props.disabled, onChange: onCheckBoxChange, value: props.value }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon", onClick: toggleExpand }, { children: expanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowUp" }) :
-                                    (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowDown" }) }))] })), expanded && (0, jsx_runtime_1.jsx)("div", __assign({ className: "content body-regular-14-17" }, { children: props.content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: props.content } }) :
-                            (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) }))] })), props.hasError && props.errorMessage && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), " ", (0, jsx_runtime_1.jsx)("p", __assign({ className: "caption-semi-bold-11-13" }, { children: props === null || props === void 0 ? void 0 : props.errorMessage }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "agreement" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: props.title, name: props.name, valid: !props.hasError, size: "medium", checked: props.checked, disabled: props.disabled, onChange: onCheckBoxChange, value: props.value }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon", onClick: toggleExpand }, { children: expanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowUp" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowDown" }) }))] })), expanded && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: props.content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: props.content } }) : (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) })))] })), props.hasError && props.errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] })))] })));
 };
 Agreement.defaultProps = {
     title: "Title",

package/dist/components/Agreement/Agreement.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgreementStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n\n    p {\n      margin: 0 !important;\n      color: var(--red);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n\n    p {\n      margin: 0 !important;\n      color: var(--red);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"])), function (props) { return props.hasError ? "15px" : "16px"; }, function (props) { return props.hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.hasError ? ' var(--red)' : ' var(--dark)'; });
+exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n\n    p {\n      margin: 0 !important;\n      color: var(--red);\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n\n    p {\n      margin: 0 !important;\n      color: var(--red);\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"])), function (props) { return props.hasError ? "15px" : "16px"; }, function (props) { return props.hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.hasError ? ' var(--red)' : ' var(--dark)'; });
 var templateObject_1;

package/dist/components/Alert/Alert.js

@@ -15,11 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var props_1 = require("./props");
 var Alert_styled_1 = require("./Alert.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Alert = function (props) {
     var _a, _b;
-    return (props === null || props === void 0 ? void 0 : props.show) && ((0, jsx_runtime_1.jsxs)(Alert_styled_1.AlertStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "left" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: props === null || props === void 0 ? void 0 : props.icon }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [(0, jsx_runtime_1.jsx)("h1", __assign({ className: "title-semi-bold-16-19" }, { children: props === null || props === void 0 ? void 0 : props.title })), ((_a = props === null || props === void 0 ? void 0 : props.messages) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = props === null || props === void 0 ? void 0 : props.messages) === null || _b === void 0 ? void 0 : _b.map(function (message, index) { return (0, jsx_runtime_1.jsx)("p", __assign({ className: "body-medium-14-17" }, { children: message }), index); })), (props === null || props === void 0 ? void 0 : props.children) && (0, jsx_runtime_1.jsx)("div", __assign({ className: "body-medium-14-17 description" }, { children: props === null || props === void 0 ? void 0 : props.children }))] }))] })));
+    return (props === null || props === void 0 ? void 0 : props.show) && ((0, jsx_runtime_1.jsxs)(Alert_styled_1.AlertStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "left" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: props === null || props === void 0 ? void 0 : props.icon, color: props_1.variants[props.variant] }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: props === null || props === void 0 ? void 0 : props.title }), ((_a = props === null || props === void 0 ? void 0 : props.messages) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = props === null || props === void 0 ? void 0 : props.messages) === null || _b === void 0 ? void 0 : _b.map(function (message, index) { return (0, jsx_runtime_1.jsx)("p", { children: message }, index); })), (props === null || props === void 0 ? void 0 : props.children) && (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props === null || props === void 0 ? void 0 : props.children }))] }))] })));
 };
 Alert.defaultProps = {
     title: (0, jsx_runtime_1.jsx)("span", { children: "Bir hata olu\u015Ftu" }),

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\n    svg {\n      display: block;\n      *[fill]:not([fill=\"white\"]) {\n        fill: ", ";\n      }\n\n      *[stroke] {\n        stroke: ", ";\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: 2px;\n    }\n\n    p {\n      margin: 0.5rem 0 0 0;\n    }\n    .description{\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\n    svg {\n      display: block;\n      *[fill]:not([fill=\"white\"]) {\n        fill: ", ";\n      }\n\n      *[stroke] {\n        stroke: ", ";\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: 2px;\n    }\n\n    p {\n      margin: 0.5rem 0 0 0;\n    }\n    .description{\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 #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\n    svg {\n      display: block;\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: 2px;\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\n    svg {\n      display: block;\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: 2px;\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)";
@@ -20,27 +20,5 @@ exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templ
         default:
             return "var(--yellow)";
     }
-}, function (props) { return props.width || "100%"; }, function (props) { return props.top || "unset"; }, function (props) { return props.bottom || "unset"; }, function (props) {
-    switch (props.variant) {
-        case 'warning':
-            return "var(--yellow)";
-        case 'danger':
-            return "var(--red)";
-        case 'success':
-            return "var(--green)";
-        default:
-            return "var(--yellow)";
-    }
-}, function (props) {
-    switch (props.variant) {
-        case 'warning':
-            return "var(--yellow)";
-        case 'danger':
-            return "var(--red)";
-        case 'success':
-            return "var(--green)";
-        default:
-            return "var(--yellow)";
-    }
-});
+}, function (props) { return props.width || "100%"; }, function (props) { return props.top || "unset"; }, function (props) { return props.bottom || "unset"; });
 var templateObject_1;

package/dist/components/Alert/props.js

@@ -2,5 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconNames = exports.variants = void 0;
 var Icon_1 = require("../Icon");
-exports.variants = ['warning', 'danger', 'success'];
+exports.variants = {
+    warning: "var(--yellow)",
+    danger: "var(--red)",
+    success: "var(--green)",
+};
 exports.iconNames = Object.keys(Icon_1.iconList);

package/dist/components/AutocompleteInput/AutocompleteInput.js

@@ -67,9 +67,9 @@ var AutocompleteInput = function (props) {
         }
         onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: value }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ width: width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top caption-bold-12-15", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readonly: readonly, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput" }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
+    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ width: width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readonly: readonly, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput" }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
                             return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
-                        })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", __assign({ className: "caption-semi-bold-11-13" }, { children: errorMessage }))] })))] })));
+                        })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 };
 AutocompleteInput.defaultValues = {
     hasError: false,

package/dist/components/AutocompleteInput/AutocompleteInput.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownStyled = exports.InputStyled = exports.Container = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-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\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    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 16px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      svg{\n        display: block;\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    }\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    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 16px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      svg{\n        display: block;\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    }\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_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\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  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px !important;\n    border: 2px solid ", " !important;\n    color: ", " !important;\n    background: white !important;\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: ", ";\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  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px !important;\n    border: 2px solid ", " !important;\n    color: ", " !important;\n    background: white !important;\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.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, 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.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, 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.DropdownStyled = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: auto;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    > li {\n        height: 51px;\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        box-sizing: border-box;\n        font-weight: 700;\n        font-size: 16px;\n        line-height: 19px;\n        cursor: pointer;\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: auto;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    > li {\n        height: 51px;\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        box-sizing: border-box;\n        font-weight: 700;\n        font-size: 16px;\n        line-height: 19px;\n        cursor: pointer;\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
+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    font:var(--caption-bold-12-15);\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    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 16px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\n        display: block;\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    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\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    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 16px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\n        display: block;\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    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
+exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px !important;\n    border: 2px solid ", " !important;\n    color: ", " !important;\n    background: white !important;\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: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px !important;\n    border: 2px solid ", " !important;\n    color: ", " !important;\n    background: white !important;\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.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, 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.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, 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.DropdownStyled = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: auto;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    > li {\n        height: 51px;\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        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: auto;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    > li {\n        height: 51px;\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        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -9,5 +9,12 @@ 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  }\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  }\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"; });
+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) {
+        case 'small':
+            return "var(--caption-bold-10-12)";
+        default:
+            return "var(--body-extra-bold-13-16)";
+    }
+});
 var templateObject_1;

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

@@ -17,10 +17,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var belt_styled_1 = require("./belt.styled");
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
-var classnames_1 = __importDefault(require("classnames"));
 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: (0, classnames_1.default)("text", (size === "small" ? "caption-bold-10-12" : "body-extra-bold-13-16")) }, { children: title }))] })));
+    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 }))] })));
 };
 Belt.defaultProps = {};
 exports.default = Belt;

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

@@ -31,7 +31,7 @@ var Index = function (props) {
     return ((0, jsx_runtime_1.jsxs)(layout1_styled_1.BannerStyled, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "inner" }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_slick_1.default, __assign({}, settings, { ref: function (slider) {
                             sliderRef = slider;
                         } }, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
-                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(layout1_styled_1.BannerItem, __assign({ hasDarkTheme: item === null || item === void 0 ? void 0 : item.hasDarkTheme, className: "item" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title headline-extra-bold-32-39" }, { children: item === null || item === void 0 ? void 0 : item.title })), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: "description title-regular-16-19" }, { children: item === null || item === void 0 ? void 0 : item.description })), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick }, { children: item === null || item === void 0 ? void 0 : item.buttonText }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: item === null || item === void 0 ? void 0 : item.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "textMobile title-medium-16-19", onClick: item === null || item === void 0 ? void 0 : item.onClick }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), item.hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] }))] })) }, key));
+                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(layout1_styled_1.BannerItem, __assign({ hasDarkTheme: item === null || item === void 0 ? void 0 : item.hasDarkTheme, className: "item" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: item === null || item === void 0 ? void 0 : item.title })), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: item === null || item === void 0 ? void 0 : item.description })), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick }, { children: item === null || item === void 0 ? void 0 : item.buttonText }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: item === null || item === void 0 ? void 0 : item.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "textMobile", onClick: item === null || item === void 0 ? void 0 : item.onClick }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), item.hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] }))] })) }, key));
                         }) })) }) })), props.showThumbnails && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "thumbnailSlider" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ className: "navigation prev", onClick: previous }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowLeft" }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "thumbnailInner" }, { children: data.map(function (item, key) {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(layout1_styled_1.ThumbnailItem, __assign({ hasDarkTheme: item === null || item === void 0 ? void 0 : item.hasDarkTheme, onClick: function () { return sliderRef.slickGoTo(key); }, className: (0, classnames_1.default)("thumbnailItem", (_a = {}, _a["active"] = key === activeSlide, _a)) }, { children: item === null || item === void 0 ? void 0 : item.thumbnail }), key));

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(--dark-opacity-5);\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      font-family: var(--font-family-sans-serif);\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\n      svg {\n        path {\n          stroke: var(--primary);\n        }\n      }\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--dark-opacity-10);\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(--dark-opacity-5);\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      font-family: var(--font-family-sans-serif);\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\n      svg {\n        path {\n          stroke: var(--primary);\n        }\n      }\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--dark-opacity-10);\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 #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(--dark-opacity-5);\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(--dark-opacity-10);\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(--dark-opacity-5);\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(--dark-opacity-10);\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(--dark-opacity-5);\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(--dark-opacity-5);\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      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\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      svg {\n          margin-left: 1rem;\n        path {\n          stroke: white;\n        }\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      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\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      svg {\n          margin-left: 1rem;\n        path {\n          stroke: white;\n        }\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"; });
+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/Banner/layouts/layout2/index.js

@@ -10,15 +10,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var layout2_styled_1 = require("./layout2.styled");
-var classnames_1 = __importDefault(require("classnames"));
 var Index = function (props) {
-    var data = props.data, isMobile = props.isMobile;
-    return ((0, jsx_runtime_1.jsx)(layout2_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "item" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: data === null || data === void 0 ? void 0 : data.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: (0, classnames_1.default)('title', (isMobile ? 'headline-extra-bold-20-24' : 'headline-extra-bold-24-29')) }, { children: data === null || data === void 0 ? void 0 : data.title })), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: "description body-regular-14-17" }, { children: data === null || data === void 0 ? void 0 : data.description }))] }))] })) }));
+    var data = props.data;
+    return ((0, jsx_runtime_1.jsx)(layout2_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "item" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: data === null || data === void 0 ? void 0 : data.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: data === null || data === void 0 ? void 0 : data.title })), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: data === null || data === void 0 ? void 0 : data.description }))] }))] })) }));
 };
 exports.default = Index;

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

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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  .item {\n    background-color: var(--primary-opacity-10);\n    border-radius: 0.5rem;\n    padding: 0 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      padding: 1.5rem 1rem;\n      margin-top: calc(3rem + 55px);\n      display: flex;\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 349px;\n      @media only screen and ", " {\n        max-width: initial;\n      }\n\n      .title {\n        margin-bottom: 1rem;\n        display: block;\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n      }\n    }\n\n\n    .img {\n      margin-top: -21px;\n\n      > * {\n        display: block !important;\n      }\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n        margin-top: -55px;\n      }\n\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: var(--primary-opacity-10);\n    border-radius: 0.5rem;\n    padding: 0 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      padding: 1.5rem 1rem;\n      margin-top: calc(3rem + 55px);\n      display: flex;\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 349px;\n      @media only screen and ", " {\n        max-width: initial;\n      }\n\n      .title {\n        margin-bottom: 1rem;\n        display: block;\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n      }\n    }\n\n\n    .img {\n      margin-top: -21px;\n\n      > * {\n        display: block !important;\n      }\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n        margin-top: -55px;\n      }\n\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"])), devices_1.devices.lg, 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  .item {\n    background-color: var(--primary-opacity-10);\n    border-radius: 0.5rem;\n    padding: 0 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      padding: 1.5rem 1rem;\n      margin-top: calc(3rem + 55px);\n      display: flex;\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 349px;\n      @media only screen and ", " {\n        max-width: initial;\n      }\n\n      .title {\n        margin-bottom: 1rem;\n        display: block;\n        font:var(--headline-extra-bold-24-29);\n        @media only screen and ", " {\n          font:var(--headline-extra-bold-20-24)\n        }\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        font:var(--body-regular-14-17);\n      }\n    }\n\n\n    .img {\n      margin-top: -21px;\n\n      > * {\n        display: block !important;\n      }\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n        margin-top: -55px;\n      }\n\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: var(--primary-opacity-10);\n    border-radius: 0.5rem;\n    padding: 0 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      padding: 1.5rem 1rem;\n      margin-top: calc(3rem + 55px);\n      display: flex;\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 349px;\n      @media only screen and ", " {\n        max-width: initial;\n      }\n\n      .title {\n        margin-bottom: 1rem;\n        display: block;\n        font:var(--headline-extra-bold-24-29);\n        @media only screen and ", " {\n          font:var(--headline-extra-bold-20-24)\n        }\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        font:var(--body-regular-14-17);\n      }\n    }\n\n\n    .img {\n      margin-top: -21px;\n\n      > * {\n        display: block !important;\n      }\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n        margin-top: -55px;\n      }\n\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
 var templateObject_1;

package/dist/components/Banner/layouts/layout3/index.js

@@ -10,15 +10,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var layout3_styled_1 = require("./layout3.styled");
-var classnames_1 = __importDefault(require("classnames"));
 var Index = function (props) {
-    var data = props.data, isMobile = props.isMobile;
-    return ((0, jsx_runtime_1.jsx)(layout3_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "item" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: data === null || data === void 0 ? void 0 : data.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: (0, classnames_1.default)('title', (isMobile ? 'headline-extra-bold-20-24' : 'headline-extra-bold-32-39')) }, { children: data === null || data === void 0 ? void 0 : data.title })), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: (0, classnames_1.default)('description', (isMobile ? 'body-regular-14-17' : 'title-regular-16-19')) }, { children: data === null || data === void 0 ? void 0 : data.description }))] }))] })) }));
+    var data = props.data;
+    return ((0, jsx_runtime_1.jsx)(layout3_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "item" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: data === null || data === void 0 ? void 0 : data.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: data === null || data === void 0 ? void 0 : data.title })), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: data === null || data === void 0 ? void 0 : data.description }))] }))] })) }));
 };
 exports.default = Index;

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

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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  .item {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 446px;\n      @media only screen and ", " {\n        max-width: initial;\n        margin-top: 1rem;\n      }\n\n      .title {\n        margin-bottom: 2rem;\n        display: block;\n        @media only screen and ", " {\n          margin-bottom: 1rem;\n        }\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: var(--dark-opacity-75);\n      }\n    }\n\n\n    .img {\n      @media only screen and ", " {\n        width: 100%; \n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 446px;\n      @media only screen and ", " {\n        max-width: initial;\n        margin-top: 1rem;\n      }\n\n      .title {\n        margin-bottom: 2rem;\n        display: block;\n        @media only screen and ", " {\n          margin-bottom: 1rem;\n        }\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: var(--dark-opacity-75);\n      }\n    }\n\n\n    .img {\n      @media only screen and ", " {\n        width: 100%; \n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, 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  .item {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 446px;\n      @media only screen and ", " {\n        max-width: initial;\n        margin-top: 1rem;\n      }\n\n      .title {\n        margin-bottom: 2rem;\n        display: block;\n        font: var(--headline-extra-bold-32-39);\n        @media only screen and ", " {\n          margin-bottom: 1rem;\n          font:var(--headline-extra-bold-20-24);\n        }\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: var(--dark-opacity-75);\n        font:var(--title-regular-16-19);\n        @media only screen and ", " {\n          font:var(--body-regular-14-17);\n        }\n      }\n    }\n\n\n    .img {\n      @media only screen and ", " {\n        width: 100%; \n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 446px;\n      @media only screen and ", " {\n        max-width: initial;\n        margin-top: 1rem;\n      }\n\n      .title {\n        margin-bottom: 2rem;\n        display: block;\n        font: var(--headline-extra-bold-32-39);\n        @media only screen and ", " {\n          margin-bottom: 1rem;\n          font:var(--headline-extra-bold-20-24);\n        }\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: var(--dark-opacity-75);\n        font:var(--title-regular-16-19);\n        @media only screen and ", " {\n          font:var(--body-regular-14-17);\n        }\n      }\n    }\n\n\n    .img {\n      @media only screen and ", " {\n        width: 100%; \n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
 var templateObject_1;

package/dist/components/Banner/layouts/layout4/index.js

@@ -16,10 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var layout4_styled_1 = require("./layout4.styled");
-var classnames_1 = __importDefault(require("classnames"));
 var Button_1 = __importDefault(require("../../../Button"));
 var Index = function (props) {
-    var data = props.data, isMobile = props.isMobile;
-    return ((0, jsx_runtime_1.jsx)(layout4_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "item" }, { children: [(data === null || data === void 0 ? void 0 : data.img) && (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: data === null || data === void 0 ? void 0 : data.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: (0, classnames_1.default)('title', 'headline-extra-bold-32-39') }, { children: data === null || data === void 0 ? void 0 : data.title })), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: (0, classnames_1.default)('description', isMobile ? 'body-regular-14-17' : 'title-regular-16-19') }, { children: data === null || data === void 0 ? void 0 : data.description })), (data === null || data === void 0 ? void 0 : data.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: data === null || data === void 0 ? void 0 : data.onClick }, { children: data === null || data === void 0 ? void 0 : data.buttonText }))] }))] })) }));
+    var data = props.data;
+    return ((0, jsx_runtime_1.jsx)(layout4_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "item" }, { children: [(data === null || data === void 0 ? void 0 : data.img) && (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: data === null || data === void 0 ? void 0 : data.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: data === null || data === void 0 ? void 0 : data.title })), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: data === null || data === void 0 ? void 0 : data.description })), (data === null || data === void 0 ? void 0 : data.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: data === null || data === void 0 ? void 0 : data.onClick }, { children: data === null || data === void 0 ? void 0 : data.buttonText }))] }))] })) }));
 };
 exports.default = Index;

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

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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  .item {\n    background-color: var(--primary-opacity-5);\n    display: block;\n    padding: 3rem;\n    border-radius: 0.5rem;\n\n    @media only screen and ", " {\n      padding: 3rem 1.5rem;\n    }\n  }\n\n  .text {\n    margin-top: 2rem;\n\n    .title {\n      margin-bottom: 1rem;\n      display: block;\n    }\n\n    .description {\n      margin: 0 0 2rem 0;\n      display: block;\n      color: var(--dark-opacity-75);\n    }\n  }\n  \n  .img {\n    @media only screen and ", " {\n      width: 100%;\n    }\n\n    img {\n      max-height: 100%;\n      max-width: 100%;\n      @media only screen and ", " {\n        height: auto;\n      }\n    }\n  }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: var(--primary-opacity-5);\n    display: block;\n    padding: 3rem;\n    border-radius: 0.5rem;\n\n    @media only screen and ", " {\n      padding: 3rem 1.5rem;\n    }\n  }\n\n  .text {\n    margin-top: 2rem;\n\n    .title {\n      margin-bottom: 1rem;\n      display: block;\n    }\n\n    .description {\n      margin: 0 0 2rem 0;\n      display: block;\n      color: var(--dark-opacity-75);\n    }\n  }\n  \n  .img {\n    @media only screen and ", " {\n      width: 100%;\n    }\n\n    img {\n      max-height: 100%;\n      max-width: 100%;\n      @media only screen and ", " {\n        height: auto;\n      }\n    }\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  .item {\n    background-color: var(--primary-opacity-5);\n    display: block;\n    padding: 3rem;\n    border-radius: 0.5rem;\n\n    @media only screen and ", " {\n      padding: 3rem 1.5rem;\n    }\n  }\n\n  .text {\n    margin-top: 2rem;\n\n    .title {\n      margin-bottom: 1rem;\n      display: block;\n      font:var(--headline-extra-bold-32-39);\n    }\n\n    .description {\n      margin: 0 0 2rem 0;\n      display: block;\n      color: var(--dark-opacity-75);\n      font:var(--title-regular-16-19);\n      @media only screen and ", " {\n        font:var(--body-regular-14-17);\n      }\n    }\n  }\n  \n  .img {\n    @media only screen and ", " {\n      width: 100%;\n    }\n\n    img {\n      max-height: 100%;\n      max-width: 100%;\n      @media only screen and ", " {\n        height: auto;\n      }\n    }\n  }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: var(--primary-opacity-5);\n    display: block;\n    padding: 3rem;\n    border-radius: 0.5rem;\n\n    @media only screen and ", " {\n      padding: 3rem 1.5rem;\n    }\n  }\n\n  .text {\n    margin-top: 2rem;\n\n    .title {\n      margin-bottom: 1rem;\n      display: block;\n      font:var(--headline-extra-bold-32-39);\n    }\n\n    .description {\n      margin: 0 0 2rem 0;\n      display: block;\n      color: var(--dark-opacity-75);\n      font:var(--title-regular-16-19);\n      @media only screen and ", " {\n        font:var(--body-regular-14-17);\n      }\n    }\n  }\n  \n  .img {\n    @media only screen and ", " {\n      width: 100%;\n    }\n\n    img {\n      max-height: 100%;\n      max-width: 100%;\n      @media only screen and ", " {\n        height: auto;\n      }\n    }\n  }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
 var templateObject_1;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -53,21 +53,21 @@ var Breadcrumbs = function (props) {
         var dataWithColumn = (0, refactorColumn_1.default)(data, rowLength || 0);
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList, __assign({ gridTemplateColumns: grid }, { children: dataWithColumn === null || dataWithColumn === void 0 ? void 0 : dataWithColumn.map(function (childColumn, key) {
                     return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemList, { children: childColumn === null || childColumn === void 0 ? void 0 : childColumn.map(function (child) {
-                                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, __assign({ isActive: child.isActive, isSeeAll: child.isSeeAll, className: "caption-medium-12-15" }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: child }, { children: child.name })) }), child.id));
+                                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, __assign({ isActive: child.isActive, isSeeAll: child.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: child }, { children: child.name })) }), child.id));
                             }) }) }, key));
                 }) })) }));
     };
     var SubMenuMobile = function () {
         var _a;
         return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, __assign({ className: "breadcrumbSm" }, { children: (_a = getSubData()) === null || _a === void 0 ? void 0 : _a.map(function (item) {
-                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, __assign({ isActive: item.isActive, className: (0, classnames_1.default)("caption-bold-12-15", {
+                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, __assign({ isActive: item.isActive, className: (0, classnames_1.default)({
                         "active": item.isActive,
                     }) }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: item.name })) }), item.id));
             }) })));
     };
     return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
                     var _a;
-                    return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft", width: "16px", height: "16px" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, __assign({ className: "caption-bold-12-15" }, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: "ArrowSmallDown" })] })), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, __assign({ item: breadCrumbItem }, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, __assign({ className: "caption-bold-12-15" }, { children: breadCrumbItem.name }))] })))] }, key));
+                    return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft", width: "16px", height: "16px" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, __assign({ item: breadCrumbItem }, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { children: breadCrumbItem.name })] })))] }, key));
                 }) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
 };
 exports.default = Breadcrumbs;