krl-alfred 2.24.1 → 2.24.2

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

@@ -22,7 +22,7 @@ exports.IconWrapper = styled_components_1.default.div(templateObject_9 || (templ
 exports.Title = styled_components_1.default.strong(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    font: var(--body-bold-14-17);\n"], ["\n    display: block;\n    font: var(--body-bold-14-17);\n"])));
 exports.BottomContent = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"])));
 exports.Timer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"], ["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"])));
-exports.TimerBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
+exports.TimerBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 40px;\n    height: 48px;\n    background-color: var(--theme-bg-color);\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n    width: 40px;\n    height: 48px;\n    background-color: var(--theme-bg-color);\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
 exports.TimerTitle = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: var(--title-extra-bold-16-19);\n"], ["\n    font: var(--title-extra-bold-16-19);\n"])));
 exports.TimerDescription = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    font: var(--caption-regular-10-12);\n"], ["\n    font: var(--caption-regular-10-12);\n"])));
 exports.TimerDots = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"])));

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

@@ -118,7 +118,7 @@ exports.StoreSettings = {
             padding: "1.5rem",
             border: "1px solid var(--dark-opacity-10)",
             borderRadius: "0.5rem",
-            background: "white",
+            background: "var(--theme-bg-color)",
         } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ style: {
                     display: "block",
                     marginBottom: "1.5rem",

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

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
 exports.Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: 1rem;\n    cursor: default;\n"], ["\n    margin-top: 1rem;\n    cursor: default;\n"])));
 var templateObject_1, templateObject_2;

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownInnerStyled = 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    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: 28px;\n      right: 24px;\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      color: var(--red);\n      svg {\n          margin-right: 8px;\n      }\n\n      p {\n          margin: 0;\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: 28px;\n      right: 24px;\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      color: var(--red);\n      svg {\n          margin-right: 8px;\n      }\n\n      p {\n          margin: 0;\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    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\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    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$isShowDropdown ? '0.5rem 0.5rem 0 0' : '0.5rem'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 53px 18.5px 23px' : '19.5px 54px 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.$hasAutoUppercase && "text-transform: uppercase;"; }, 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.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n"], ["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; }, function (props) { return props.$dropdownPosition && props.$dropdownPosition; });
-exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: ", ";\n    position: relative;\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 9px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--dark-opacity-10);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--dark-opacity-20);\n    }\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        &:is(.isSelected){\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    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: ", ";\n    position: relative;\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 9px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--dark-opacity-10);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--dark-opacity-20);\n    }\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        &:is(.isSelected){\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.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    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: var(--theme-bg-color);\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    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: var(--theme-bg-color);\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'var(--theme-bg-color)' : 'var(--dark-opacity-3)'); }, function (props) { return props.$isShowDropdown ? '0.5rem 0.5rem 0 0' : '0.5rem'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 53px 18.5px 23px' : '19.5px 54px 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.$hasAutoUppercase && "text-transform: uppercase;"; }, 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.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: var(--theme-bg-color);\n"], ["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: var(--theme-bg-color);\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; }, function (props) { return props.$dropdownPosition && props.$dropdownPosition; });
+exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: ", ";\n    position: relative;\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 9px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--dark-opacity-10);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--dark-opacity-20);\n    }\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: var(--theme-bg-color);\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        &:is(.isSelected){\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    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: ", ";\n    position: relative;\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 9px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--dark-opacity-10);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--dark-opacity-20);\n    }\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: var(--theme-bg-color);\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        &:is(.isSelected){\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, templateObject_4;

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

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    ", "\n    border-radius: 0.5rem;\n    position: relative;\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    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\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 0.5rem 0.5rem;\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      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\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        border-radius: 0.5rem;\n        overflow: hidden;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    ", "\n    border-radius: 0.5rem;\n    position: relative;\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    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\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 0.5rem 0.5rem;\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      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\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        border-radius: 0.5rem;\n        overflow: hidden;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return props.$customStyle; }, 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.lgUp, devices_1.devices.lg, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg);
+exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    ", "\n    border-radius: 0.5rem;\n    position: relative;\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    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\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 0.5rem 0.5rem;\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      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\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        border-radius: 0.5rem;\n        overflow: hidden;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    ", "\n    border-radius: 0.5rem;\n    position: relative;\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    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\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 0.5rem 0.5rem;\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      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\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        border-radius: 0.5rem;\n        overflow: hidden;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "var(--theme-bg-color)"; }, function (props) { return props.$customStyle; }, 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.lgUp, devices_1.devices.lg, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg);
 var templateObject_1;

package/dist/components/BannerCard/stories/BannerCard.stories.js

@@ -101,7 +101,7 @@ exports.ButtonSuccess = {
     args: __assign(__assign({}, baseArgs), { buttonVariant: "success", buttonText: "Başla" }),
 };
 exports.CustomStyle = {
-    args: __assign(__assign({}, baseArgs), { customStyle: "background: linear-gradient(135deg, #f5f0ff 0%, #ffffff 60%);", title: "Özel arka plan", description: "customStyle ile banner arka planı özelleştirildi." }),
+    args: __assign(__assign({}, baseArgs), { customStyle: "background: linear-gradient(135deg, #f5f0ff 0%, var(--theme-bg-color) 60%);", title: "Özel arka plan", description: "customStyle ile banner arka planı özelleştirildi." }),
 };
 exports.LongContent = {
     args: __assign(__assign({}, baseArgs), { title: "Çok uzun bir banner başlığı: döngüsel ekonomi ve sürdürülebilir tüketim birlikte", description: "Bu açıklama bilerek uzun tutuldu. Birkaç kez kullanacağın cihazları kiralayarak hem bütçeni koruyabilir hem de elektronik atıkları azaltarak gezegene katkı sağlayabilirsin. Kampanya koşulları dönemsel olarak değişiklik gösterebilir.", shortDesc: "Uzun mobil kısa açıklama: cihazlarını kiralayarak döngüsel ekonomiye katkı sağla ve fırsatları kaçırma!", hasRightArrow: true }),

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

@@ -19,8 +19,8 @@ exports.ButtonLinkComponentLg = styled_components_1.default.span(templateObject_
 exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n  > *{\n    display: block;    \n  }\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n  > *{\n    display: block;    \n  }\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-left: 0;\n  padding-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  div {\n    display: block;\n  }\n"], ["\n  margin-left: 0;\n  padding-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  div {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"])));
-exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 26px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 26px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"])));
+exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: var(--theme-bg-color);\n  height: 26px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: var(--theme-bg-color);\n  height: 26px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"])));
 exports.DropdownList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  z-index:15;\n  padding: 0;\n  position: absolute;\n  left: 48px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"], ["\n  z-index:15;\n  padding: 0;\n  position: absolute;\n  left: 48px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"])));
 exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 1.5rem 15px 1.5rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 1.5rem 15px 0 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 1.5rem 15px 1.5rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 1.5rem 15px 0 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.xl);
-exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
+exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: var(--theme-bg-color);\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: var(--theme-bg-color);\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

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

@@ -101,7 +101,7 @@ var ghost = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
 exports.LoadingContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  background-color: inherit;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 5;\n  border-radius: inherit;\n\n  svg {\n    color: inherit;\n  }\n"], ["\n  position: absolute;\n  background-color: inherit;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 5;\n  border-radius: inherit;\n\n  svg {\n    color: inherit;\n  }\n"])));
-exports.ButtonTooltip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: white;\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"], ["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: white;\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"])));
+exports.ButtonTooltip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: var(--theme-bg-color);\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"], ["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: var(--theme-bg-color);\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"])));
 exports.ButtonStyled = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  &:hover {\n    ", " {\n      opacity: 1;\n      transition-delay: 0.5s;\n    }\n  }\n  &:is(.loading) {\n    user-select: none;\n    pointer-events: none;\n    .children{\n      > span{\n        opacity: 0;\n      } \n    }\n    > *:not(.children){\n      opacity: 0;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  &:hover {\n    ", " {\n      opacity: 1;\n      transition-delay: 0.5s;\n    }\n  }\n  &:is(.loading) {\n    user-select: none;\n    pointer-events: none;\n    .children{\n      > span{\n        opacity: 0;\n      } \n    }\n    > *:not(.children){\n      opacity: 0;\n    }\n  }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
     switch (props.$variant) {
         case 'primary':

package/dist/components/ColorCard/ColorCard.styled.js

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Thumb = exports.HueSlider = exports.Saturation = exports.PickerBody = exports.ColorPickerPopover = exports.ColorCardField = exports.ColorSwatch = exports.SwatchWrap = exports.ColorCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ColorCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\n"])));
+exports.ColorCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\n"])));
 exports.SwatchWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    flex-shrink: 0;\n    width: 56px;\n    height: 56px;\n    border: 1px solid var(--dark-opacity-10);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n"], ["\n    position: relative;\n    flex-shrink: 0;\n    width: 56px;\n    height: 56px;\n    border: 1px solid var(--dark-opacity-10);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n"])));
 exports.ColorSwatch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    border-radius: 0.25rem;\n    border: none;\n    background-color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    appearance: none;\n\n    &:focus-visible {\n        outline: 2px solid var(--primary);\n        outline-offset: 2px;\n    }\n"], ["\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    border-radius: 0.25rem;\n    border: none;\n    background-color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    appearance: none;\n\n    &:focus-visible {\n        outline: 2px solid var(--primary);\n        outline-offset: 2px;\n    }\n"])), function (props) { return props.$color || 'transparent'; }, function (props) { return props.$disabled ? 0.4 : 1; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; });
 exports.ColorCardField = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex: 1;\n    min-width: 0;\n"], ["\n    flex: 1;\n    min-width: 0;\n"])));
-exports.ColorPickerPopover = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"], ["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"])));
+exports.ColorPickerPopover = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"], ["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"])));
 exports.PickerBody = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"])));
 exports.Saturation = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: relative;\n    width: 192px;\n    height: 140px;\n    border-radius: 0.5rem;\n    cursor: crosshair;\n    touch-action: none;\n    background:\n        linear-gradient(to top, #000, transparent),\n        linear-gradient(to right, #fff, hsl(", ", 100%, 50%));\n"], ["\n    position: relative;\n    width: 192px;\n    height: 140px;\n    border-radius: 0.5rem;\n    cursor: crosshair;\n    touch-action: none;\n    background:\n        linear-gradient(to top, #000, transparent),\n        linear-gradient(to right, #fff, hsl(", ", 100%, 50%));\n"])), function (props) { return props.$hue; });
 exports.HueSlider = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    position: relative;\n    width: 192px;\n    height: 12px;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);\n"], ["\n    position: relative;\n    width: 192px;\n    height: 12px;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);\n"])));

package/dist/components/DescriptionCard/DescriptionCard.styled.js

@@ -46,7 +46,7 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
 }, function (props) { return props.$headerAlignItems || 'center'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; });
 exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"])));
 exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"])));
-exports.DragHandleStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 1rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: white;\n    cursor: ", ";\n    color: ", ";\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 1rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: white;\n    cursor: ", ";\n    color: ", ";\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    ", "\n"])), function (props) { return props.$disabled ? 'no-drop' : 'grab'; }, function (props) { return props.$disabled ? 'var(--grey-50)' : 'var(--primary)'; }, function (props) { return !props.$disabled && "\n        &:active {\n            cursor: grabbing;\n            background-color: var(--primary);\n            color: white;\n        }\n        &:hover {\n            background-color: var(--primary);\n            color: white;\n        }\n    "; });
+exports.DragHandleStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 1rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: var(--theme-bg-color);\n    cursor: ", ";\n    color: ", ";\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 1rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: var(--theme-bg-color);\n    cursor: ", ";\n    color: ", ";\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    ", "\n"])), function (props) { return props.$disabled ? 'no-drop' : 'grab'; }, function (props) { return props.$disabled ? 'var(--grey-50)' : 'var(--primary)'; }, function (props) { return !props.$disabled && "\n        &:active {\n            cursor: grabbing;\n            background-color: var(--primary);\n            color: white;\n        }\n        &:hover {\n            background-color: var(--primary);\n            color: white;\n        }\n    "; });
 exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"], ["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"])), function (props) { return props.$hasHeaderRight ? 'flex' : 'none'; }, function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; }, function (props) { return props.$hasCategoryLayout ? '100%' : 'auto'; });
 exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 exports.HeaderRightContentStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    min-width: 0;\n"], ["\n    display: block;\n    min-width: 0;\n"])));
@@ -56,7 +56,7 @@ exports.HeaderTitleDescriptionStyled = styled_components_1.default.p(templateObj
 exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: ", ";\n    display: inline-block;\n    cursor: ", ";\n"], ["\n    font: ", ";\n    display: inline-block;\n    cursor: ", ";\n"])), function (props) { return props.$titleSize === 'lg'
     ? 'var(--headline-semi-bold-20-24)'
     : 'var(--headline-semi-bold-18-22)'; }, function (props) { return props.$isClickable ? 'pointer' : 'inherit'; });
-exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: block;\n    flex-shrink: 0;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    flex-shrink: 0;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
+exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: block;\n    flex-shrink: 0;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: var(--theme-bg-color);\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    flex-shrink: 0;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: var(--theme-bg-color);\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
 exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    margin-left: ", ";\n    flex-shrink: 0;\n"], ["\n    display: block;\n    margin-left: ", ";\n    flex-shrink: 0;\n"])), function (props) { return props.$hasTitleBadgeBetween ? '0' : '1.5rem'; });
 exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    padding: ", ";\n"], ["\n    display: block;\n    padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '0' : '0 1.5rem'; });
 exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"])), function (props) { return props.$boxSize; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; });

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

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

package/dist/components/Dropdown/stories/Dropdown.stories.js

@@ -91,7 +91,7 @@ var IconToggle = function (_a) {
     return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", "aria-expanded": show, style: {
             border: "1px solid var(--dark-opacity-10)",
             borderRadius: 8,
-            background: "white",
+            background: "var(--theme-bg-color)",
             padding: 8,
             cursor: "pointer",
             display: "inline-flex",

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

@@ -53,6 +53,6 @@ exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templ
 exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"], ["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"])));
 exports.LinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-left: 1rem;\n  *{\n    display: block;\n  }\n"], ["\n  display: block;\n  margin-left: 1rem;\n  *{\n    display: block;\n  }\n"])));
 exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font: var(--caption-medium-12-15);\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  font: var(--caption-medium-12-15);\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
-exports.AlertStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.$alertLeft; }, function (props) { return props.$alertTop - 5; }, function (props) { return props.$visible ? '1' : '0'; });
+exports.AlertStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.$alertLeft; }, function (props) { return props.$alertTop - 5; }, function (props) { return props.$visible ? '1' : '0'; });
 exports.Input = styled_components_1.default.input(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerWrapperStyled = exports.InputStyled = exports.FieldDescription = exports.CharCount = exports.FieldLabel = exports.FieldTopActions = exports.FieldTop = exports.Container = exports.PopupText = exports.FocusTooltip = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"], ["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
+exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: var(--theme-bg-color);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"], ["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: var(--theme-bg-color);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
 exports.FocusTooltip = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: absolute;\n    left: 41px;\n    bottom: calc(100% + 10px);\n    max-width: ", ";\n    width: max-content;\n    padding: 10px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    z-index: 99999;\n    box-sizing: border-box;\n    user-select: none;\n    pointer-events: none;\n    transition: all 0.15s ease;\n    opacity: ", ";\n    font: var(--caption-medium-11-13);\n\n    &:before {\n        content: '';\n        position: absolute;\n        left: 12px;\n        bottom: -6px;\n        transform: rotate(45deg);\n        width: 12px;\n        height: 12px;\n        border-radius: 3px;\n        background-color: var(--primary-opacity-10);\n    }\n"], ["\n    position: absolute;\n    left: 41px;\n    bottom: calc(100% + 10px);\n    max-width: ", ";\n    width: max-content;\n    padding: 10px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    z-index: 99999;\n    box-sizing: border-box;\n    user-select: none;\n    pointer-events: none;\n    transition: all 0.15s ease;\n    opacity: ", ";\n    font: var(--caption-medium-11-13);\n\n    &:before {\n        content: '';\n        position: absolute;\n        left: 12px;\n        bottom: -6px;\n        transform: rotate(45deg);\n        width: 12px;\n        height: 12px;\n        border-radius: 3px;\n        background-color: var(--primary-opacity-10);\n    }\n"])), function (props) { return props.$maxWidth || '140px'; }, function (props) { return props.$isOpen ? '1' : '0'; });
 exports.PopupText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--caption-semi-bold-11-13);\n    text-align: center;\n    white-space: pre-wrap;\n"], ["\n    font: var(--caption-semi-bold-11-13);\n    text-align: center;\n    white-space: pre-wrap;\n"])));
 exports.Container = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\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\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"])), function (props) { return props.$width || '370px'; });
@@ -18,11 +18,11 @@ exports.FieldTopActions = styled_components_1.default.div(templateObject_6 || (t
 exports.FieldLabel = styled_components_1.default.label(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
 exports.CharCount = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"])));
 exports.FieldDescription = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
-exports.InputStyled = styled_components_1.default.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"])), function (props) {
+exports.InputStyled = styled_components_1.default.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: var(--theme-bg-color);\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: var(--theme-bg-color);\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"])), function (props) {
     if (props.disabled)
         return 'var(--dark-opacity-5)';
     if (props.$isCalendarOpen || props.$hasError)
-        return 'white';
+        return 'var(--theme-bg-color)';
     return 'var(--dark-opacity-3)';
 }, function (props) {
     if (props.$isCalendarOpen || props.$hasError) {
@@ -40,5 +40,5 @@ exports.InputStyled = styled_components_1.default.input(templateObject_10 || (te
         return 'var(--red)';
     return 'var(--dark-opacity-50)';
 }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
-exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: white;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: white;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
+exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: var(--theme-bg-color);\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: var(--theme-bg-color);\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: var(--theme-bg-color) !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: var(--theme-bg-color);\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: var(--theme-bg-color);\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: var(--theme-bg-color) !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/InsuranceBox/InsuranceBox.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipDescription = exports.Description = exports.Logo = exports.DescriptionWrapper = exports.CheckboxWrapper = exports.InnerWrapper = exports.InsuranceBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.InsuranceBoxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 1.5rem;\n    height: ", ";\n    background: ", ";\n    border: ", ";\n    border-radius: 0.5rem;\n    width: ", ";\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    box-sizing: border-box;\n    cursor: pointer;\n    ", ";\n    @media only screen and ", " {\n        padding: 1rem;\n        height: auto;\n        align-items: flex-start;\n    }\n"], ["\n    padding: 0 1.5rem;\n    height: ", ";\n    background: ", ";\n    border: ", ";\n    border-radius: 0.5rem;\n    width: ", ";\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    box-sizing: border-box;\n    cursor: pointer;\n    ", ";\n    @media only screen and ", " {\n        padding: 1rem;\n        height: auto;\n        align-items: flex-start;\n    }\n"])), function (props) { return props.$height; }, function (props) { return props.$hasBgColor ? 'var(--primary-opacity-5)' : '#fff'; }, function (props) { return props.$hasBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$width ? props.$width : "466px"; }, function (props) {
+exports.InsuranceBoxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 1.5rem;\n    height: ", ";\n    background: ", ";\n    border: ", ";\n    border-radius: 0.5rem;\n    width: ", ";\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    box-sizing: border-box;\n    cursor: pointer;\n    ", ";\n    @media only screen and ", " {\n        padding: 1rem;\n        height: auto;\n        align-items: flex-start;\n    }\n"], ["\n    padding: 0 1.5rem;\n    height: ", ";\n    background: ", ";\n    border: ", ";\n    border-radius: 0.5rem;\n    width: ", ";\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    box-sizing: border-box;\n    cursor: pointer;\n    ", ";\n    @media only screen and ", " {\n        padding: 1rem;\n        height: auto;\n        align-items: flex-start;\n    }\n"])), function (props) { return props.$height; }, function (props) { return props.$hasBgColor ? 'var(--primary-opacity-5)' : 'var(--theme-bg-color)'; }, function (props) { return props.$hasBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$width ? props.$width : "466px"; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "\n            padding: 1rem;\n            height: auto;\n            align-items: flex-start;";
@@ -44,7 +44,7 @@ exports.DescriptionWrapper = styled_components_1.default.div(templateObject_4 ||
             return null;
     }
 }, devices_1.devices.md);
-exports.Logo = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: white;\n    width: 96px;\n    height: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    box-sizing: border-box;\n    cursor: inherit;\n\n    svg {\n        display: block;\n        width: 80px;\n        ", ";\n        @media only screen and ", " {\n            width: 116px;\n        }\n    }\n    ", ";\n\n    @media only screen and ", " {\n        background-color: transparent;\n        width: auto;\n        height: auto;\n        border: 0;\n        border-radius: 0;\n        margin-top: 6px;\n        justify-content: flex-start;\n    }\n"], ["\n    background-color: white;\n    width: 96px;\n    height: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    box-sizing: border-box;\n    cursor: inherit;\n\n    svg {\n        display: block;\n        width: 80px;\n        ", ";\n        @media only screen and ", " {\n            width: 116px;\n        }\n    }\n    ", ";\n\n    @media only screen and ", " {\n        background-color: transparent;\n        width: auto;\n        height: auto;\n        border: 0;\n        border-radius: 0;\n        margin-top: 6px;\n        justify-content: flex-start;\n    }\n"])), function (props) {
+exports.Logo = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: var(--theme-bg-color);\n    width: 96px;\n    height: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    box-sizing: border-box;\n    cursor: inherit;\n\n    svg {\n        display: block;\n        width: 80px;\n        ", ";\n        @media only screen and ", " {\n            width: 116px;\n        }\n    }\n    ", ";\n\n    @media only screen and ", " {\n        background-color: transparent;\n        width: auto;\n        height: auto;\n        border: 0;\n        border-radius: 0;\n        margin-top: 6px;\n        justify-content: flex-start;\n    }\n"], ["\n    background-color: var(--theme-bg-color);\n    width: 96px;\n    height: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    box-sizing: border-box;\n    cursor: inherit;\n\n    svg {\n        display: block;\n        width: 80px;\n        ", ";\n        @media only screen and ", " {\n            width: 116px;\n        }\n    }\n    ", ";\n\n    @media only screen and ", " {\n        background-color: transparent;\n        width: auto;\n        height: auto;\n        border: 0;\n        border-radius: 0;\n        margin-top: 6px;\n        justify-content: flex-start;\n    }\n"])), function (props) {
     switch (props.$size) {
         case 'small':
             return "width: 116px;";

package/dist/components/ListGroup/ListGroup.styled.js

@@ -13,5 +13,5 @@ exports.ListGroupStyled = styled_components_1.default.ul(templateObject_1 || (te
 exports.ListGroupItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0; \n  display: block;\n  + li {\n    margin-top: 1rem;\n  }\n"], ["\n  padding: 0;\n  margin: 0; \n  display: block;\n  + li {\n    margin-top: 1rem;\n  }\n"])));
 exports.ItemIcon = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 1.5rem;\n  min-width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.75rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 1.5rem;\n  min-width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.75rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 exports.ItemTitle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-exports.ListGroupItemButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  transition: all .2s ease;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", ";\n  }\n  ", "\n  ", "\n"], ["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  transition: all .2s ease;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", ";\n  }\n  ", "\n  ", "\n"])), function (props) { return props.$isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.$isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return !props.$isActive && "\n    &:hover{\n      background-color:  var(--primary-opacity-5);\n      color: var(--primary);\n    }\n  "; }, function (props) { return props.$hasNotification && "\n  \n  &:after{\n    content: \"\";\n    position: absolute;\n    right : 1.5rem;\n    top:50%;\n    transform:translateY(-50%);\n    width:16px;\n    height:16px;\n    background-color:var(--primary);\n    border-radius:50%;\n  }\n  "; });
+exports.ListGroupItemButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  transition: all .2s ease;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", ";\n  }\n  ", "\n  ", "\n"], ["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  transition: all .2s ease;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", ";\n  }\n  ", "\n  ", "\n"])), function (props) { return props.$isActive ? "var(--theme-bg-color)" : "var(--dark-opacity-3)"; }, function (props) { return props.$isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return !props.$isActive && "\n    &:hover{\n      background-color:  var(--primary-opacity-5);\n      color: var(--primary);\n    }\n  "; }, function (props) { return props.$hasNotification && "\n  \n  &:after{\n    content: \"\";\n    position: absolute;\n    right : 1.5rem;\n    top:50%;\n    transform:translateY(-50%);\n    width:16px;\n    height:16px;\n    background-color:var(--primary);\n    border-radius:50%;\n  }\n  "; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/Modal/Modal.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayStyled = exports.ModalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-height: min(calc(100dvh - 50px), 720px);\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: ", ";\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: ", ";\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n    min-height: ", ";\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.modalTextLinkWrapper{\n      font:var(--body-bold-14-17);\n      &:is(.skipButton){\n        * {\n          color: var(--grey-50) !important;\n        }\n      }\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 0.5rem;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    .contentInner{\n      height: 100%;\n      [data-simplebar] {\n        .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n        }\n      }\n    }\n  }\n\n  div.buttons {\n    padding: 1.5rem 1.5rem ", " 1.5rem;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"], ["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-height: min(calc(100dvh - 50px), 720px);\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: ", ";\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: ", ";\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n    min-height: ", ";\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.modalTextLinkWrapper{\n      font:var(--body-bold-14-17);\n      &:is(.skipButton){\n        * {\n          color: var(--grey-50) !important;\n        }\n      }\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 0.5rem;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    .contentInner{\n      height: 100%;\n      [data-simplebar] {\n        .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n        }\n      }\n    }\n  }\n\n  div.buttons {\n    padding: 1.5rem 1.5rem ", " 1.5rem;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"])), function (props) { return props.$showHeader === false ? '1fr auto' : 'auto 1fr auto'; }, function (props) {
+exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: var(--theme-bg-color);\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-height: min(calc(100dvh - 50px), 720px);\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: ", ";\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: ", ";\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n    min-height: ", ";\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.modalTextLinkWrapper{\n      font:var(--body-bold-14-17);\n      &:is(.skipButton){\n        * {\n          color: var(--grey-50) !important;\n        }\n      }\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 0.5rem;\n      cursor: pointer;\n      background: var(--theme-bg-color);\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    .contentInner{\n      height: 100%;\n      [data-simplebar] {\n        .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n        }\n      }\n    }\n  }\n\n  div.buttons {\n    padding: 1.5rem 1.5rem ", " 1.5rem;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"], ["\n  background: var(--theme-bg-color);\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-height: min(calc(100dvh - 50px), 720px);\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: ", ";\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: ", ";\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n    min-height: ", ";\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.modalTextLinkWrapper{\n      font:var(--body-bold-14-17);\n      &:is(.skipButton){\n        * {\n          color: var(--grey-50) !important;\n        }\n      }\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 0.5rem;\n      cursor: pointer;\n      background: var(--theme-bg-color);\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    .contentInner{\n      height: 100%;\n      [data-simplebar] {\n        .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n        }\n      }\n    }\n  }\n\n  div.buttons {\n    padding: 1.5rem 1.5rem ", " 1.5rem;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"])), function (props) { return props.$showHeader === false ? '1fr auto' : 'auto 1fr auto'; }, function (props) {
     switch (props.$size) {
         case 'xxsmall':
             return "311px";

package/dist/components/OptionMenu/OptionMenu.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports.SubCategoryInner = exports.SubCategoryItem = exports.OptionMenuStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.OptionMenuStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin: 0;\n    padding: 8px;\n    border: 1px solid var(--grey-10);\n    background-color: white;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease-in-out;\n    display: grid;\n    gap: 0 16px;\n    grid-template-columns: repeat(", ", ", ");\n    transition-delay: 0s;\n"], ["\n    margin: 0;\n    padding: 8px;\n    border: 1px solid var(--grey-10);\n    background-color: white;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease-in-out;\n    display: grid;\n    gap: 0 16px;\n    grid-template-columns: repeat(", ", ", ");\n    transition-delay: 0s;\n"])), function (props) { return props.$gridTemplateColumns || '3'; }, function (props) { return props.$gridItemWidth && props.$gridItemWidth; });
+exports.OptionMenuStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin: 0;\n    padding: 8px;\n    border: 1px solid var(--grey-10);\n    background-color: var(--theme-bg-color);\n    border-radius: 0.5rem;\n    transition: all 0.2s ease-in-out;\n    display: grid;\n    gap: 0 16px;\n    grid-template-columns: repeat(", ", ", ");\n    transition-delay: 0s;\n"], ["\n    margin: 0;\n    padding: 8px;\n    border: 1px solid var(--grey-10);\n    background-color: var(--theme-bg-color);\n    border-radius: 0.5rem;\n    transition: all 0.2s ease-in-out;\n    display: grid;\n    gap: 0 16px;\n    grid-template-columns: repeat(", ", ", ");\n    transition-delay: 0s;\n"])), function (props) { return props.$gridTemplateColumns || '3'; }, function (props) { return props.$gridItemWidth && props.$gridItemWidth; });
 exports.SubCategoryItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    padding: 0;\n    margin: 0;\n"], ["\n    display: block;\n    padding: 0;\n    margin: 0;\n"])));
 exports.SubCategoryInner = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0;\n    display: grid;\n    gap:4px 0;\n    margin: 0;\n"], ["\n    padding: 0;\n    display: grid;\n    gap:4px 0;\n    margin: 0;\n"])));
 exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    display: block;\n    a {\n        color: var(--dark);\n        text-decoration: none;\n        position: relative;\n        span {\n            font-weight: ", ";\n        }\n        .badgesWrapper{\n            position: absolute;\n            right: 0.5rem;\n            top: 50%;\n            transform: translateY(-50%);\n            user-select: none;\n            pointer-events: none;\n        }\n    }\n"], ["\n    padding: 0;\n    display: block;\n    a {\n        color: var(--dark);\n        text-decoration: none;\n        position: relative;\n        span {\n            font-weight: ", ";\n        }\n        .badgesWrapper{\n            position: absolute;\n            right: 0.5rem;\n            top: 50%;\n            transform: translateY(-50%);\n            user-select: none;\n            pointer-events: none;\n        }\n    }\n"])), function (props) { return props.$isSeeAll ? '700' : '500'; });