krl-alfred 2.24.8 → 2.24.10

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

@@ -13,16 +13,16 @@ var devices_1 = require("../../constants/devices");
 exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n\n"], ["\n    width: ", ";\n\n"])), function (props) { return props.$width; });
 exports.ActionInfoText = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: var(--primary-opacity-5);\n    font: var(--caption-semi-bold-10-12);\n    color: var(--primary);\n    padding: 1.5rem 0 0.5rem 1.5rem;\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n"], ["\n    background-color: var(--primary-opacity-5);\n    font: var(--caption-semi-bold-10-12);\n    color: var(--primary);\n    padding: 1.5rem 0 0.5rem 1.5rem;\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n"])));
 exports.DashedLine = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    background: #fbf7ff;\n    overflow: hidden;\n    height: 22px;\n\n    svg {\n        height: 22px;\n        position: absolute;\n        top: 0;\n        transform: translateX(-50%);\n        left: 50%;\n        width: calc(100% + 22px);\n    }\n"], ["\n    position: relative;\n    width: 100%;\n    background: #fbf7ff;\n    overflow: hidden;\n    height: 22px;\n\n    svg {\n        height: 22px;\n        position: absolute;\n        top: 0;\n        transform: translateX(-50%);\n        left: 50%;\n        width: calc(100% + 22px);\n    }\n"])));
-exports.ActionInner = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1.5rem;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--dark);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ", "\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n"], ["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1.5rem;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--dark);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ", "\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n"])), function (props) { return props.$hasInfo ? "\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n        padding-top: 0.5rem;\n    " : ""; }, devices_1.devices.mdUp, devices_1.devices.md);
+exports.ActionInner = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1.5rem;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--text);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ", "\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n"], ["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1.5rem;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--text);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ", "\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n"])), function (props) { return props.$hasInfo ? "\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n        padding-top: 0.5rem;\n    " : ""; }, devices_1.devices.mdUp, devices_1.devices.md);
 exports.Top = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"])), function (props) { return props.$alignButtonWithTitle ? "61px 1fr" : props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
 exports.TitleRow = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    min-width: 0;\n"])));
-exports.Description = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: block;\n    margin-top: 1rem;\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"], ["\n    display: block;\n    margin-top: 1rem;\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"])));
+exports.Description = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: block;\n    margin-top: 1rem;\n    font: var(--body-medium-14-17);\n    color: var(--text-muted);\n"], ["\n    display: block;\n    margin-top: 1rem;\n    font: var(--body-medium-14-17);\n    color: var(--text-muted);\n"])));
 exports.Bottom = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-top: 0.5rem;\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"], ["\n    margin-top: 0.5rem;\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"])), function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
 exports.IconWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-right: 1rem;\n\n    * {\n        display: block !important;\n    }\n"], ["\n    margin-right: 1rem;\n\n    * {\n        display: block !important;\n    }\n"])));
 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: 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.TimerBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 40px;\n    height: 48px;\n    background-color: var(--bg);\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(--bg);\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

@@ -116,9 +116,9 @@ exports.StoreSettings = {
             width: "100%",
             maxWidth: "900px",
             padding: "1.5rem",
-            border: "1px solid var(--dark-opacity-10)",
+            border: "1px solid var(--border)",
             borderRadius: "0.5rem",
-            background: "var(--theme-bg-color)",
+            background: "var(--bg)",
         } }, { 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: 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.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\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(--text);\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(--border);\n    background: var(--bg);\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(--text);\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/AddressCard/stories/AddressCard.stories.js

@@ -24,7 +24,7 @@ var shortDescription = "4517 Washington Ave. Manchester, Kentucky 39495";
 var contentExample = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: {
                 margin: "0 0 0.5rem",
                 font: "var(--body-regular-14-17)",
-                color: "var(--dark)",
+                color: "var(--text)",
             } }, { children: "Aboneli\u011Fin se\u00E7ti\u011Fin tarihte otomatik olarak yeniden ba\u015Flar." })), (0, jsx_runtime_1.jsx)(Input_1.default, { label: "Tarih", placeholder: "GG/AA/YYYY", type: "text" })] }));
 var baseArgs = {
     title: "Address title",

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

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

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

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

package/dist/components/AutocompleteInput/AutocompleteInput.js

@@ -129,7 +129,7 @@ var AutocompleteInput = function (_a) {
         if (e === void 0) { e = null; }
         onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: realInputValue }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ "$width": width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readOnly: readonly, disabled: disabled, "$hasError": hasError, "$isShowDropdown": showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete, type: type, "$hasAutoUppercase": hasAutoUppercase }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CloseMedium", color: "var(--dark)" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight, "$dropdownPosition": dropdownPosition }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownInnerStyled, __assign({ ref: function (el) {
+    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ "$width": width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readOnly: readonly, disabled: disabled, "$hasError": hasError, "$isShowDropdown": showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete, type: type, "$hasAutoUppercase": hasAutoUppercase }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CloseMedium", color: "var(--text)" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight, "$dropdownPosition": dropdownPosition }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownInnerStyled, __assign({ ref: function (el) {
                                 dropdownRef.current = el;
                                 scrollContainerRef.current = el;
                             }, "$dropdownMaxHeight": dropdownMaxHeight }, { children: (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length) > 0 ? (dropdownList.map(function (item, key) {

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

@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 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: 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; });
+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(--text-soft);\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(--text-soft);\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: var(--bg);\n  }\n  &:is([disabled]){\n    color: var(--text-disabled);\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(--bg);\n  }\n  &:is([disabled]){\n    color: var(--text-disabled);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--surface)' : (props.$hasError ? 'var(--bg)' : 'var(--surface-subtle)'); }, 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(--border)'; }, 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(--text)'; }, 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(--text-soft)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--text)'; });
+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(--border);\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(--bg);\n"], ["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--border);\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(--bg);\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(--border);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--grey-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(--bg);\n        position: relative;\n        color: var(--text);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--surface-subtle);\n        }\n        &:is(.isSelected){\n            background-color: var(--surface-subtle);\n        }\n        &.isFixedBottom{\n            color: var(--text-soft);\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(--border);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--grey-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(--bg);\n        position: relative;\n        color: var(--text);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--surface-subtle);\n        }\n        &:is(.isSelected){\n            background-color: var(--surface-subtle);\n        }\n        &.isFixedBottom{\n            color: var(--text-soft);\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/Badges/layouts/text/text.styled.js

@@ -18,9 +18,9 @@ exports.TextStyled = styled_components_1.default.div(templateObject_1 || (templa
         case 'danger':
             return "var(--red)";
         case 'disabled':
-            return "var(--dark-opacity-5)";
+            return "var(--surface)";
         case 'light':
-            return "var(--dark-opacity-5)";
+            return "var(--surface)";
         default:
             return "var(--primary)";
     }
@@ -33,9 +33,9 @@ exports.TextStyled = styled_components_1.default.div(templateObject_1 || (templa
         case 'danger':
             return "white";
         case 'disabled':
-            return "var(--dark)";
+            return "var(--text)";
         case 'light':
-            return "var(--dark)";
+            return "var(--text)";
         default:
             return "white";
     }

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

@@ -151,8 +151,8 @@ exports.OnProductCard = {
             width: 180,
             height: 220,
             borderRadius: 8,
-            background: "var(--dark-opacity-3)",
-            border: "1px solid var(--dark-opacity-10)",
+            background: "var(--surface-subtle)",
+            border: "1px solid var(--border)",
             overflow: "hidden",
         } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { position: "absolute", top: 0, left: 0, zIndex: 2 } }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "belt", variant: "primary", title: "\u0130ndirimli", size: "small" }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { position: "absolute", top: 8, right: 8, zIndex: 2 } }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "dark", size: "xsmall" }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { position: "absolute", bottom: 12, left: 12 } }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "danger", title: "Son 2" }) }))] }))); },
 };

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)" : "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);
+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(--inverse-surface)" : "var(--bg)"; }, function (props) { return props.$customStyle; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--text)" : "var(--on-inverse)"; }, function (props) { return !props.$hasDarkTheme ? "var(--text)" : "var(--on-inverse)"; }, 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/BannerCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/BannerCard/BannerCard.test.js

@@ -0,0 +1,109 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var BannerCard_1 = __importDefault(require("./BannerCard"));
+var renderBanner = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(BannerCard_1.default, __assign({ title: "D\u00F6ng\u00FCsel ekonomi", description: "Cihazlar\u0131n\u0131 kirala" }, props)));
+};
+describe('BannerCard', function () {
+    it('renders title and description', function () {
+        renderBanner();
+        expect(react_1.screen.getByText('Döngüsel ekonomi')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Cihazlarını kirala')).toBeInTheDocument();
+    });
+    it('paints the light theme with --bg', function () {
+        var container = renderBanner({ hasDarkTheme: false }).container;
+        expect(container.firstChild).toHaveStyle({
+            backgroundColor: 'var(--bg)',
+        });
+        expect(react_1.screen.getByText('Döngüsel ekonomi')).toHaveStyle({
+            color: 'var(--text)',
+        });
+    });
+    it('paints the dark theme with inverse-surface', function () {
+        var container = renderBanner({ hasDarkTheme: true }).container;
+        expect(container.firstChild).toHaveStyle({
+            backgroundColor: 'var(--inverse-surface)',
+        });
+        expect(react_1.screen.getByText('Döngüsel ekonomi')).toHaveStyle({
+            color: 'var(--on-inverse)',
+        });
+        expect(react_1.screen.getByText('Cihazlarını kirala')).toHaveStyle({
+            color: 'var(--on-inverse)',
+        });
+    });
+    it('calls onClick from the action button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    renderBanner({ buttonText: 'Hemen Kirala', onClick: onClick });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Hemen Kirala' }))];
+                case 1:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not execute script tags in title', function () {
+        renderBanner({
+            title: '<img src=x onerror="window.__bannerXss = true"><script>window.__bannerXss = true</script>Başlık',
+        });
+        expect(window.__bannerXss).toBeUndefined();
+    });
+});

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%, var(--theme-bg-color) 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(--bg) 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/BlogCard/BlogCard.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlogCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.BlogCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n    .author {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        margin-bottom: 1rem;\n\n        .img {\n            width: 40px;\n            height: 40px;\n            overflow: hidden;\n            border-radius: 50%;\n            position: relative;\n\n            * {\n                display: block !important;\n                height: 100% !important;\n                width: 100% !important;\n                object-fit: cover !important;\n            }\n        }\n\n        .title {\n            color: var(--dark-opacity-50);\n            font: var(--caption-semi-bold-12-15);\n            margin-left: 0.5rem;\n        }\n    }\n\n    .content {\n        ", "\n        .contentImg {\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            padding-bottom: ", ";\n            margin-bottom: ", ";\n\n            > * {\n                display: block !important;\n                width: 100% !important;\n                height: 100% !important;\n                position: absolute !important;\n                left: 50% !important;\n                top: 50% !important;\n                transform: translate(-50%, -50%) !important;\n                object-fit: cover;\n            }\n        }\n\n        .contentBottom {\n            ", "\n            .tagWrapper {\n                margin-bottom: ", ";\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                .tags {\n                    font: var(--caption-semi-bold-12-15);\n                    display: -webkit-box;\n                    -webkit-line-clamp: 1;\n                    -webkit-box-orient: vertical;\n                    overflow: hidden;\n                    padding-right: 2rem;\n                }\n\n                .date {\n                    font: var(--caption-medium-11-13);\n                    color: var(--grey-50);\n                }\n            }\n\n            .contentTitle {\n                font: ", ";\n                margin-bottom: ", ";\n                display: -webkit-box;\n                -webkit-line-clamp: ", ";\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n                min-height: ", ";\n            }\n\n            .contentDesc {\n                display: block;\n                font: ", ";\n                margin: 0;\n                display: -webkit-box;\n                -webkit-line-clamp: ", ";\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n                ", "\n                margin-bottom: ", ";\n            }\n        }\n    }\n\n    ", "\n"], ["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n    .author {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        margin-bottom: 1rem;\n\n        .img {\n            width: 40px;\n            height: 40px;\n            overflow: hidden;\n            border-radius: 50%;\n            position: relative;\n\n            * {\n                display: block !important;\n                height: 100% !important;\n                width: 100% !important;\n                object-fit: cover !important;\n            }\n        }\n\n        .title {\n            color: var(--dark-opacity-50);\n            font: var(--caption-semi-bold-12-15);\n            margin-left: 0.5rem;\n        }\n    }\n\n    .content {\n        ", "\n        .contentImg {\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            padding-bottom: ", ";\n            margin-bottom: ", ";\n\n            > * {\n                display: block !important;\n                width: 100% !important;\n                height: 100% !important;\n                position: absolute !important;\n                left: 50% !important;\n                top: 50% !important;\n                transform: translate(-50%, -50%) !important;\n                object-fit: cover;\n            }\n        }\n\n        .contentBottom {\n            ", "\n            .tagWrapper {\n                margin-bottom: ", ";\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                .tags {\n                    font: var(--caption-semi-bold-12-15);\n                    display: -webkit-box;\n                    -webkit-line-clamp: 1;\n                    -webkit-box-orient: vertical;\n                    overflow: hidden;\n                    padding-right: 2rem;\n                }\n\n                .date {\n                    font: var(--caption-medium-11-13);\n                    color: var(--grey-50);\n                }\n            }\n\n            .contentTitle {\n                font: ", ";\n                margin-bottom: ", ";\n                display: -webkit-box;\n                -webkit-line-clamp: ", ";\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n                min-height: ", ";\n            }\n\n            .contentDesc {\n                display: block;\n                font: ", ";\n                margin: 0;\n                display: -webkit-box;\n                -webkit-line-clamp: ", ";\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n                ", "\n                margin-bottom: ", ";\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.$direction === "horizontal" ? "\n           display: grid;\n           align-items: center;\n           justify-content: space-between;\n           grid-template-columns: 104px 1fr;\n           column-gap: 1.5rem;\n        " : ""; }, function (props) { return props.$direction === "horizontal" ? "100%" : props.$size === "lg" ? "71.75%" : "58.2%"; }, function (props) { return props.$direction === "horizontal" ? "0" : "1.5rem"; }, function (props) { return props.$direction === "horizontal" ? "\n                display: flex;\n                flex-direction: column-reverse;\n             " : ""; }, function (props) { return props.$direction === "horizontal" ? "0" : props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$size === "lg" ? "var(--headline-bold-18-22)" : "var(--title-bold-16-19)"; }, function (props) { return props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$direction === "horizontal" ? "3" : props.$size === "lg" ? "2" : "3"; }, function (props) { return props.$size === "lg" ? props.$direction === "horizontal" ? "65px" : "44px" : "57px"; }, function (props) { return props.$size === "lg" ? "var(--title-regular-16-19)" : "var(--body-regular-14-17)"; }, function (props) { return props.$size === "lg" ? "5" : "3"; }, function (props) { return props.$direction === "horizontal" ? "\n                   display: none;\n                " : ""; }, function (props) { return props.$size === "lg" ? "9px" : "0"; }, function (props) { return props.$size === "lg" ? "\n    @media only screen and ".concat(devices_1.devices.lg, " {\n        .content{\n            display:block;\n            .contentImg{\n                padding-bottom: 58.2%;\n                margin-bottom: 1.5rem;\n            }\n            .contentBottom{\n                 display:block;\n                .tagWrapper{\n                    margin-bottom: 1rem;\n                }\n                .contentTitle {\n                    font: var(--title-bold-16-19);\n                    margin-bottom: 1rem;\n                    display: -webkit-box;\n                    -webkit-line-clamp: 3;\n                    -webkit-box-orient: vertical;\n                    overflow: hidden;\n                    min-height: 57px !important;\n                }\n    \n                .contentDesc {\n                    display: block;\n                    font: var(--body-regular-14-17);\n                    margin: 0;\n                    display: -webkit-box;\n                    -webkit-line-clamp: 3;\n                    -webkit-box-orient: vertical;\n                    overflow: hidden;\n                    margin-bottom: 0;\n                }\n            }\n        }\n    }\n    ") : ""; });
+exports.BlogCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n    .author {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        margin-bottom: 1rem;\n\n        .img {\n            width: 40px;\n            height: 40px;\n            overflow: hidden;\n            border-radius: 50%;\n            position: relative;\n\n            * {\n                display: block !important;\n                height: 100% !important;\n                width: 100% !important;\n                object-fit: cover !important;\n            }\n        }\n\n        .title {\n            color: var(--text-soft);\n            font: var(--caption-semi-bold-12-15);\n            margin-left: 0.5rem;\n        }\n    }\n\n    .content {\n        ", "\n        .contentImg {\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            padding-bottom: ", ";\n            margin-bottom: ", ";\n\n            > * {\n                display: block !important;\n                width: 100% !important;\n                height: 100% !important;\n                position: absolute !important;\n                left: 50% !important;\n                top: 50% !important;\n                transform: translate(-50%, -50%) !important;\n                object-fit: cover;\n            }\n        }\n\n        .contentBottom {\n            ", "\n            .tagWrapper {\n                margin-bottom: ", ";\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                .tags {\n                    font: var(--caption-semi-bold-12-15);\n                    display: -webkit-box;\n                    -webkit-line-clamp: 1;\n                    -webkit-box-orient: vertical;\n                    overflow: hidden;\n                    padding-right: 2rem;\n                }\n\n                .date {\n                    font: var(--caption-medium-11-13);\n                    color: var(--text-soft);\n                }\n            }\n\n            .contentTitle {\n                font: ", ";\n                margin-bottom: ", ";\n                display: -webkit-box;\n                -webkit-line-clamp: ", ";\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n                min-height: ", ";\n            }\n\n            .contentDesc {\n                display: block;\n                font: ", ";\n                margin: 0;\n                display: -webkit-box;\n                -webkit-line-clamp: ", ";\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n                ", "\n                margin-bottom: ", ";\n            }\n        }\n    }\n\n    ", "\n"], ["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n    .author {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        margin-bottom: 1rem;\n\n        .img {\n            width: 40px;\n            height: 40px;\n            overflow: hidden;\n            border-radius: 50%;\n            position: relative;\n\n            * {\n                display: block !important;\n                height: 100% !important;\n                width: 100% !important;\n                object-fit: cover !important;\n            }\n        }\n\n        .title {\n            color: var(--text-soft);\n            font: var(--caption-semi-bold-12-15);\n            margin-left: 0.5rem;\n        }\n    }\n\n    .content {\n        ", "\n        .contentImg {\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            padding-bottom: ", ";\n            margin-bottom: ", ";\n\n            > * {\n                display: block !important;\n                width: 100% !important;\n                height: 100% !important;\n                position: absolute !important;\n                left: 50% !important;\n                top: 50% !important;\n                transform: translate(-50%, -50%) !important;\n                object-fit: cover;\n            }\n        }\n\n        .contentBottom {\n            ", "\n            .tagWrapper {\n                margin-bottom: ", ";\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                .tags {\n                    font: var(--caption-semi-bold-12-15);\n                    display: -webkit-box;\n                    -webkit-line-clamp: 1;\n                    -webkit-box-orient: vertical;\n                    overflow: hidden;\n                    padding-right: 2rem;\n                }\n\n                .date {\n                    font: var(--caption-medium-11-13);\n                    color: var(--text-soft);\n                }\n            }\n\n            .contentTitle {\n                font: ", ";\n                margin-bottom: ", ";\n                display: -webkit-box;\n                -webkit-line-clamp: ", ";\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n                min-height: ", ";\n            }\n\n            .contentDesc {\n                display: block;\n                font: ", ";\n                margin: 0;\n                display: -webkit-box;\n                -webkit-line-clamp: ", ";\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n                ", "\n                margin-bottom: ", ";\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.$direction === "horizontal" ? "\n           display: grid;\n           align-items: center;\n           justify-content: space-between;\n           grid-template-columns: 104px 1fr;\n           column-gap: 1.5rem;\n        " : ""; }, function (props) { return props.$direction === "horizontal" ? "100%" : props.$size === "lg" ? "71.75%" : "58.2%"; }, function (props) { return props.$direction === "horizontal" ? "0" : "1.5rem"; }, function (props) { return props.$direction === "horizontal" ? "\n                display: flex;\n                flex-direction: column-reverse;\n             " : ""; }, function (props) { return props.$direction === "horizontal" ? "0" : props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$size === "lg" ? "var(--headline-bold-18-22)" : "var(--title-bold-16-19)"; }, function (props) { return props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$direction === "horizontal" ? "3" : props.$size === "lg" ? "2" : "3"; }, function (props) { return props.$size === "lg" ? props.$direction === "horizontal" ? "65px" : "44px" : "57px"; }, function (props) { return props.$size === "lg" ? "var(--title-regular-16-19)" : "var(--body-regular-14-17)"; }, function (props) { return props.$size === "lg" ? "5" : "3"; }, function (props) { return props.$direction === "horizontal" ? "\n                   display: none;\n                " : ""; }, function (props) { return props.$size === "lg" ? "9px" : "0"; }, function (props) { return props.$size === "lg" ? "\n    @media only screen and ".concat(devices_1.devices.lg, " {\n        .content{\n            display:block;\n            .contentImg{\n                padding-bottom: 58.2%;\n                margin-bottom: 1.5rem;\n            }\n            .contentBottom{\n                 display:block;\n                .tagWrapper{\n                    margin-bottom: 1rem;\n                }\n                .contentTitle {\n                    font: var(--title-bold-16-19);\n                    margin-bottom: 1rem;\n                    display: -webkit-box;\n                    -webkit-line-clamp: 3;\n                    -webkit-box-orient: vertical;\n                    overflow: hidden;\n                    min-height: 57px !important;\n                }\n    \n                .contentDesc {\n                    display: block;\n                    font: var(--body-regular-14-17);\n                    margin: 0;\n                    display: -webkit-box;\n                    -webkit-line-clamp: 3;\n                    -webkit-box-orient: vertical;\n                    overflow: hidden;\n                    margin-bottom: 0;\n                }\n            }\n        }\n    }\n    ") : ""; });
 var templateObject_1;

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

@@ -13,14 +13,14 @@ var devices_1 = require("../../constants/devices");
 exports.BreadcrumbsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display:block;\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n"], ["\n  display:block;\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n"])));
 exports.BreadcrumbsList = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  padding: 0;\n  margin:0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  padding: 0;\n  margin:0;\n"])));
 exports.BreadcrumbsListItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  margin: 0 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @media only screen and ", " {\n      height: 32px;\n    &:not(:nth-child(2)) {\n      display: none;\n    }\n  }\n  > a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n  }\n  &:hover{\n    ul{\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    button {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"], ["\n  position: relative;\n  margin: 0 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @media only screen and ", " {\n      height: 32px;\n    &:not(:nth-child(2)) {\n      display: none;\n    }\n  }\n  > a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n  }\n  &:hover{\n    ul{\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    button {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"])), devices_1.devices.xl);
-exports.BreadcrumbsListItemInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  margin: 0;\n  display: inline-block;\n  color: var(--dark-opacity-50);\n  max-width: 150px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font:var(--caption-bold-12-15);\n  vertical-align: middle;\n"], ["\n  position: relative;\n  margin: 0;\n  display: inline-block;\n  color: var(--dark-opacity-50);\n  max-width: 150px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font:var(--caption-bold-12-15);\n  vertical-align: middle;\n"])));
+exports.BreadcrumbsListItemInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  margin: 0;\n  display: inline-block;\n  color: var(--text-soft);\n  max-width: 150px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font:var(--caption-bold-12-15);\n  vertical-align: middle;\n"], ["\n  position: relative;\n  margin: 0;\n  display: inline-block;\n  color: var(--text-soft);\n  max-width: 150px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font:var(--caption-bold-12-15);\n  vertical-align: middle;\n"])));
 exports.ButtonLinkComponentSm = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: none;\n    @media only screen and ", " {\n        display: inline-block;\n        span{\n            display: block;\n        }\n    }\n"], ["\n    display: none;\n    @media only screen and ", " {\n        display: inline-block;\n        span{\n            display: block;\n        }\n    }\n"])), devices_1.devices.xl);
 exports.ButtonLinkComponentLg = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    a{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n    @media only screen and ", " {\n        display: none;\n    }\n"], ["\n    display: inline-block;\n    a{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n    @media only screen and ", " {\n        display: none;\n    }\n"])), devices_1.devices.xl);
-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.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(--text-soft);\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(--text-soft);\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: 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.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(--bg);\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(--bg);\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: 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)"); });
+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(--bg);\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(--bg);\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(--border)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--text-muted)"); });
 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

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconStyled = exports.ButtonStyled = exports.ButtonTooltip = exports.LoadingContent = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--primary-initial);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: var(--primary-initial);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
+var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--primary-initial);\n  //color: var(--on-primary);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--surface);\n    color: var(--text-disabled);\n  }\n"], ["\n  background-color: var(--primary-initial);\n  //color: var(--on-primary);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--surface);\n    color: var(--text-disabled);\n  }\n"])), function (props) {
     switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
@@ -44,7 +44,7 @@ var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary-initial);\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n    }\n  }\n  \n  &:active {\n    color: var(--primary-press);\n    @media only screen and ", " {\n      color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary-initial);\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n    }\n  }\n  \n  &:active {\n    color: var(--primary-press);\n    @media only screen and ", " {\n      color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
+var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary-initial);\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n    }\n  }\n  \n  &:active {\n    color: var(--primary-press);\n    @media only screen and ", " {\n      color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--surface);\n    color: var(--text-disabled);\n  }\n"], ["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary-initial);\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n    }\n  }\n  \n  &:active {\n    color: var(--primary-press);\n    @media only screen and ", " {\n      color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--surface);\n    color: var(--text-disabled);\n  }\n"])), function (props) {
     switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
@@ -58,7 +58,7 @@ var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-var success = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: var(--sustainability);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: white;\n    }\n  }\n  \n  &:active {\n    color: white;\n    @media only screen and ", " {\n      color: white;\n    }\n  }\n\n  &:disabled {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: var(--sustainability);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: white;\n    }\n  }\n  \n  &:active {\n    color: white;\n    @media only screen and ", " {\n      color: white;\n    }\n  }\n\n  &:disabled {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
+var success = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: var(--sustainability);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: white;\n    }\n  }\n  \n  &:active {\n    color: white;\n    @media only screen and ", " {\n      color: white;\n    }\n  }\n\n  &:disabled {\n    background-color: var(--surface);\n    color: var(--text-disabled);\n  }\n"], ["\n  background-color: var(--sustainability);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: white;\n    }\n  }\n  \n  &:active {\n    color: white;\n    @media only screen and ", " {\n      color: white;\n    }\n  }\n\n  &:disabled {\n    background-color: var(--surface);\n    color: var(--text-disabled);\n  }\n"])), function (props) {
     switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
@@ -72,7 +72,7 @@ var success = (0, styled_components_1.css)(templateObject_3 || (templateObject_3
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-var inverted = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary-initial);\n  border: 1px solid;\n  border-color: var(--primary-initial);\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n\n    @media only screen and ", " {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    color: var(--dark-opacity-25);\n    border-color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary-initial);\n  border: 1px solid;\n  border-color: var(--primary-initial);\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n\n    @media only screen and ", " {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    color: var(--dark-opacity-25);\n    border-color: var(--dark-opacity-25);\n  }\n"])), function (props) {
+var inverted = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary-initial);\n  border: 1px solid;\n  border-color: var(--primary-initial);\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n\n    @media only screen and ", " {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    color: var(--text-disabled);\n    border-color: var(--text-disabled);\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary-initial);\n  border: 1px solid;\n  border-color: var(--primary-initial);\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n\n    @media only screen and ", " {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    color: var(--text-disabled);\n    border-color: var(--text-disabled);\n  }\n"])), function (props) {
     switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
@@ -86,7 +86,7 @@ var inverted = (0, styled_components_1.css)(templateObject_4 || (templateObject_
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-var ghost = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary-initial);\n  border: 0;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-initial);\n      background-color: var(--primary-opacity-5);\n    }\n  }\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n\n    @media only screen and ", " {\n      color: var(--primary-initial);\n    }\n  }\n\n  &:disabled {\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary-initial);\n  border: 0;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-initial);\n      background-color: var(--primary-opacity-5);\n    }\n  }\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n\n    @media only screen and ", " {\n      color: var(--primary-initial);\n    }\n  }\n\n  &:disabled {\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
+var ghost = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary-initial);\n  border: 0;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-initial);\n      background-color: var(--primary-opacity-5);\n    }\n  }\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n\n    @media only screen and ", " {\n      color: var(--primary-initial);\n    }\n  }\n\n  &:disabled {\n    color: var(--text-disabled);\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary-initial);\n  border: 0;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-initial);\n      background-color: var(--primary-opacity-5);\n    }\n  }\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n\n    @media only screen and ", " {\n      color: var(--primary-initial);\n    }\n  }\n\n  &:disabled {\n    color: var(--text-disabled);\n  }\n"])), function (props) {
     switch (props.$size) {
         case 'xsmall':
             return "var(--body-bold-13-16)";
@@ -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: 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.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(--bg);\n  color: var(--text);\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(--bg);\n  color: var(--text);\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/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};