krl-alfred 2.24.0 → 2.24.2

package/dist/components/Input/stories/Input.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
+exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.PriceFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var Input_1 = __importDefault(require("../Input"));
@@ -331,6 +331,25 @@ exports.NumericFormat = {
         }
     },
 };
+exports.PriceFormat = {
+    args: {
+        placeholder: "0,00",
+        label: "Fiyat",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        hasNumericFormat: true,
+        decimalSeparator: ",",
+        thousandSeparator: ".",
+        type: "text",
+        infoText: null,
+        id: "input_price",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
 exports.PatternFormat = {
     args: {
         placeholder: "Enter phone number",

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

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

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

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

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

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

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

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

package/dist/components/Pagination/Pagination.styled.js

@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var svgToBase64_1 = __importDefault(require("../../utils/svgToBase64"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
-exports.PaginationStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .rc-pagination {\n        align-items: flex-start;\n        justify-content: flex-end;\n\n        .rc-pagination-item {\n            width: 1.5rem;\n            height: 1.5rem;\n            min-width: 1.5rem;\n            padding: 0;\n            border: 0;\n            margin: 8.5px 2px 0 2px;\n            border-radius: 0.25rem;\n            transition: all 0.2s ease !important;\n\n            a {\n                padding: 0;\n                font: var(--caption-semi-bold-12-15);\n                line-height: 1.5rem;\n                color: inherit;\n            }\n\n            &:is(.rc-pagination-item-active), &:hover {\n                background-color: var(--primary-opacity-10);\n\n                a {\n                    color: var(--primary);\n                }\n            }\n        }\n\n        .rc-pagination-prev, .rc-pagination-next {\n            width: 2.5rem;\n            height: 2.5rem;\n            border: 0;\n            position: relative;\n            overflow: hidden;\n            border-radius: 0.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--primary);\n            transition: all 0.2s ease;\n            &:hover{\n                box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n            }\n            div {\n                display: block;\n            }\n        }\n\n        .rc-pagination-prev {\n            margin-right: 1rem;\n        }\n\n        .rc-pagination-next {\n            margin-left: 1rem;\n        }\n\n        .rc-pagination-jump-prev, .rc-pagination-jump-next {\n            width: 27px;\n            margin: 5px 0 0 0;\n\n            button {\n                &:after {\n                    content: \"...\";\n                }\n            }\n        }\n\n        .rc-pagination-options {\n            display: flex;\n            align-items: flex-start;\n            margin-left: 1rem;\n\n            .rc-pagination-options-quick-jumper {\n                display: flex;\n                align-items: center;\n                height: auto !important;\n                line-height: initial !important;\n                input {\n                    margin: 0 1rem;\n                    box-sizing: border-box;\n                    width: 88px;\n                    height: 40px;\n                    border-radius: 0.5rem;\n                    border: 1px solid var(--dark-opacity-10);\n                    padding: 19.5px 24px;\n                    color: var(--dark);\n                    font: var(--body-semi-bold-14-17);\n                    outline: none;\n                    background: var(--dark-opacity-3);\n\n                    &::placeholder {\n                        color: var(--dark-opacity-50);\n                    }\n\n                    &:focus {\n                        padding: 18.5px 23px;\n                        border: 2px solid var(--primary);\n                        color: var(--dark);\n                        background: white;\n                    }\n\n                    &:is([disabled]) {\n                        color: var(--dark-opacity-25);\n                        background: var(--dark-opacity-5);\n                    }\n                }\n            }\n        }\n\n        .rc-select {\n\n            // --------------- Single ----------------\n            margin: 0;\n            &-single {\n                .rc-select-selector {\n                    display: flex;\n                    position: relative;\n\n                    .rc-select-selection-wrap {\n                        width: 100%;\n                        position: relative;\n                    }\n\n                    .rc-select-selection-search {\n                        width: 100%;\n                        position: relative;\n                        display: none;\n                        &-input {\n                            width: 100%;\n                        }\n                    }\n\n                    .rc-select-selection-item,\n                    .rc-select-selection-placeholder {\n                        font: inherit;\n                        height: 100%;\n                        display: flex;\n                        align-items: center;\n                        position: relative;\n                        width: 100%;\n                        top: 0;\n                        left: 0;\n                        justify-content: space-between;\n                        padding: 0 1.5rem;\n                    }\n\n                    .rc-select-selection-item {\n                        &:after{\n                            content: \"\";\n                            display: block;\n                            width: 1rem;\n                            height: 1rem;\n                            transition: all .2s ease;\n                            background-image:url('", "');\n                        }\n                    }\n                }\n\n                // Not customize\n\n                &:not(.rc-select-customize-input) {\n                    .rc-select-selector {\n                        box-sizing: border-box;\n                        width: 141px;\n                        height: 40px;\n                        background: white;\n                        border-radius: 0.5rem;\n                        border: none;\n                        padding: 0;\n                        color: var(--dark-opacity-50);\n                        font: var(--body-semi-bold-14-17);\n                        outline: none;\n                        text-align: center;\n                        &:before{\n                            content: \"\";\n                            position: absolute;\n                            inset: 0;\n                            border: 1px solid var(--dark-opacity-10);\n                            border-radius: inherit;\n                        }\n                    }\n                }\n            }\n            &-open {\n                .rc-select-selector {\n                    border-radius: 0.5rem 0.5rem 0 0 !important;\n                    &:before{\n                        border: 2px solid var(--primary) !important;\n                    }\n                    .rc-select-selection-item {\n                        &:after{\n                            transform: rotate(180deg);\n                        }\n                    }\n                }\n            }\n\n            // =============== Focused ===============\n\n            &-focused {\n                .rc-select-selector {\n                    border: 1px solid var(--dark-opacity-10) !important;\n                }\n            }\n\n            // ============== Dropdown ===============\n\n            &-dropdown {\n                margin: 0 !important;\n                border-radius: 0 0 0.5rem 0.5rem !important;\n                box-shadow: none !important;\n                border: 1px solid var(--dark-opacity-10) !important;\n                overflow: hidden !important;\n                inset: 40px auto auto 0 !important;\n                position: static !important;\n            }\n\n            // =============== Option ================\n\n            &-item {\n                font: var(--title-bold-16-19);\n                padding: 1rem 1.5rem;\n\n                // >>> Group\n\n                &-group {\n                    color: #999;\n                    font-weight: bold;\n                    font-size: 80%;\n                }\n\n                // >>> Option\n\n                &-option {\n                    position: relative;\n                    display: block;\n                    font: var(--title-bold-16-19);\n\n                    &-grouped {\n                        padding-left: 24px;\n                    }\n\n                    .rc-select-item-option-state {\n                        display: none;\n                    }\n\n                    // ------- Active -------\n\n                    &-active {\n                        background: var(--dark-opacity-3);\n                    }\n\n                    // ------ Disabled ------\n\n                    &-disabled {\n                        color: #999;\n                    }\n                }\n\n                // >>> Empty\n\n                &-empty {\n                    text-align: center;\n                    color: #999;\n                }\n            }\n            .rc-virtual-list-scrollbar-thumb{\n                background-color: var(--dark-opacity-10) !important;\n                width: 5px !important;\n            }\n        }\n    }\n"], ["\n    .rc-pagination {\n        align-items: flex-start;\n        justify-content: flex-end;\n\n        .rc-pagination-item {\n            width: 1.5rem;\n            height: 1.5rem;\n            min-width: 1.5rem;\n            padding: 0;\n            border: 0;\n            margin: 8.5px 2px 0 2px;\n            border-radius: 0.25rem;\n            transition: all 0.2s ease !important;\n\n            a {\n                padding: 0;\n                font: var(--caption-semi-bold-12-15);\n                line-height: 1.5rem;\n                color: inherit;\n            }\n\n            &:is(.rc-pagination-item-active), &:hover {\n                background-color: var(--primary-opacity-10);\n\n                a {\n                    color: var(--primary);\n                }\n            }\n        }\n\n        .rc-pagination-prev, .rc-pagination-next {\n            width: 2.5rem;\n            height: 2.5rem;\n            border: 0;\n            position: relative;\n            overflow: hidden;\n            border-radius: 0.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--primary);\n            transition: all 0.2s ease;\n            &:hover{\n                box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n            }\n            div {\n                display: block;\n            }\n        }\n\n        .rc-pagination-prev {\n            margin-right: 1rem;\n        }\n\n        .rc-pagination-next {\n            margin-left: 1rem;\n        }\n\n        .rc-pagination-jump-prev, .rc-pagination-jump-next {\n            width: 27px;\n            margin: 5px 0 0 0;\n\n            button {\n                &:after {\n                    content: \"...\";\n                }\n            }\n        }\n\n        .rc-pagination-options {\n            display: flex;\n            align-items: flex-start;\n            margin-left: 1rem;\n\n            .rc-pagination-options-quick-jumper {\n                display: flex;\n                align-items: center;\n                height: auto !important;\n                line-height: initial !important;\n                input {\n                    margin: 0 1rem;\n                    box-sizing: border-box;\n                    width: 88px;\n                    height: 40px;\n                    border-radius: 0.5rem;\n                    border: 1px solid var(--dark-opacity-10);\n                    padding: 19.5px 24px;\n                    color: var(--dark);\n                    font: var(--body-semi-bold-14-17);\n                    outline: none;\n                    background: var(--dark-opacity-3);\n\n                    &::placeholder {\n                        color: var(--dark-opacity-50);\n                    }\n\n                    &:focus {\n                        padding: 18.5px 23px;\n                        border: 2px solid var(--primary);\n                        color: var(--dark);\n                        background: white;\n                    }\n\n                    &:is([disabled]) {\n                        color: var(--dark-opacity-25);\n                        background: var(--dark-opacity-5);\n                    }\n                }\n            }\n        }\n\n        .rc-select {\n\n            // --------------- Single ----------------\n            margin: 0;\n            &-single {\n                .rc-select-selector {\n                    display: flex;\n                    position: relative;\n\n                    .rc-select-selection-wrap {\n                        width: 100%;\n                        position: relative;\n                    }\n\n                    .rc-select-selection-search {\n                        width: 100%;\n                        position: relative;\n                        display: none;\n                        &-input {\n                            width: 100%;\n                        }\n                    }\n\n                    .rc-select-selection-item,\n                    .rc-select-selection-placeholder {\n                        font: inherit;\n                        height: 100%;\n                        display: flex;\n                        align-items: center;\n                        position: relative;\n                        width: 100%;\n                        top: 0;\n                        left: 0;\n                        justify-content: space-between;\n                        padding: 0 1.5rem;\n                    }\n\n                    .rc-select-selection-item {\n                        &:after{\n                            content: \"\";\n                            display: block;\n                            width: 1rem;\n                            height: 1rem;\n                            transition: all .2s ease;\n                            background-image:url('", "');\n                        }\n                    }\n                }\n\n                // Not customize\n\n                &:not(.rc-select-customize-input) {\n                    .rc-select-selector {\n                        box-sizing: border-box;\n                        width: 141px;\n                        height: 40px;\n                        background: white;\n                        border-radius: 0.5rem;\n                        border: none;\n                        padding: 0;\n                        color: var(--dark-opacity-50);\n                        font: var(--body-semi-bold-14-17);\n                        outline: none;\n                        text-align: center;\n                        &:before{\n                            content: \"\";\n                            position: absolute;\n                            inset: 0;\n                            border: 1px solid var(--dark-opacity-10);\n                            border-radius: inherit;\n                        }\n                    }\n                }\n            }\n            &-open {\n                .rc-select-selector {\n                    border-radius: 0.5rem 0.5rem 0 0 !important;\n                    &:before{\n                        border: 2px solid var(--primary) !important;\n                    }\n                    .rc-select-selection-item {\n                        &:after{\n                            transform: rotate(180deg);\n                        }\n                    }\n                }\n            }\n\n            // =============== Focused ===============\n\n            &-focused {\n                .rc-select-selector {\n                    border: 1px solid var(--dark-opacity-10) !important;\n                }\n            }\n\n            // ============== Dropdown ===============\n\n            &-dropdown {\n                margin: 0 !important;\n                border-radius: 0 0 0.5rem 0.5rem !important;\n                box-shadow: none !important;\n                border: 1px solid var(--dark-opacity-10) !important;\n                overflow: hidden !important;\n                inset: 40px auto auto 0 !important;\n                position: static !important;\n            }\n\n            // =============== Option ================\n\n            &-item {\n                font: var(--title-bold-16-19);\n                padding: 1rem 1.5rem;\n\n                // >>> Group\n\n                &-group {\n                    color: #999;\n                    font-weight: bold;\n                    font-size: 80%;\n                }\n\n                // >>> Option\n\n                &-option {\n                    position: relative;\n                    display: block;\n                    font: var(--title-bold-16-19);\n\n                    &-grouped {\n                        padding-left: 24px;\n                    }\n\n                    .rc-select-item-option-state {\n                        display: none;\n                    }\n\n                    // ------- Active -------\n\n                    &-active {\n                        background: var(--dark-opacity-3);\n                    }\n\n                    // ------ Disabled ------\n\n                    &-disabled {\n                        color: #999;\n                    }\n                }\n\n                // >>> Empty\n\n                &-empty {\n                    text-align: center;\n                    color: #999;\n                }\n            }\n            .rc-virtual-list-scrollbar-thumb{\n                background-color: var(--dark-opacity-10) !important;\n                width: 5px !important;\n            }\n        }\n    }\n"])), function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--dark)", name: "ArrowSmallDown" })); });
+exports.PaginationStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .rc-pagination {\n        align-items: flex-start;\n        justify-content: flex-end;\n\n        .rc-pagination-item {\n            width: 1.5rem;\n            height: 1.5rem;\n            min-width: 1.5rem;\n            padding: 0;\n            border: 0;\n            margin: 8.5px 2px 0 2px;\n            border-radius: 0.25rem;\n            transition: all 0.2s ease !important;\n\n            a {\n                padding: 0;\n                font: var(--caption-semi-bold-12-15);\n                line-height: 1.5rem;\n                color: inherit;\n            }\n\n            &:is(.rc-pagination-item-active), &:hover {\n                background-color: var(--primary-opacity-10);\n\n                a {\n                    color: var(--primary);\n                }\n            }\n        }\n\n        .rc-pagination-prev, .rc-pagination-next {\n            width: 2.5rem;\n            height: 2.5rem;\n            border: 0;\n            position: relative;\n            overflow: hidden;\n            border-radius: 0.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--primary);\n            transition: all 0.2s ease;\n            &:hover{\n                box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n            }\n            div {\n                display: block;\n            }\n        }\n\n        .rc-pagination-prev {\n            margin-right: 1rem;\n        }\n\n        .rc-pagination-next {\n            margin-left: 1rem;\n        }\n\n        .rc-pagination-jump-prev, .rc-pagination-jump-next {\n            width: 27px;\n            margin: 5px 0 0 0;\n\n            button {\n                &:after {\n                    content: \"...\";\n                }\n            }\n        }\n\n        .rc-pagination-options {\n            display: flex;\n            align-items: flex-start;\n            margin-left: 1rem;\n\n            .rc-pagination-options-quick-jumper {\n                display: flex;\n                align-items: center;\n                height: auto !important;\n                line-height: initial !important;\n                input {\n                    margin: 0 1rem;\n                    box-sizing: border-box;\n                    width: 88px;\n                    height: 40px;\n                    border-radius: 0.5rem;\n                    border: 1px solid var(--dark-opacity-10);\n                    padding: 19.5px 24px;\n                    color: var(--dark);\n                    font: var(--body-semi-bold-14-17);\n                    outline: none;\n                    background: var(--dark-opacity-3);\n\n                    &::placeholder {\n                        color: var(--dark-opacity-50);\n                    }\n\n                    &:focus {\n                        padding: 18.5px 23px;\n                        border: 2px solid var(--primary);\n                        color: var(--dark);\n                        background: var(--theme-bg-color);\n                    }\n\n                    &:is([disabled]) {\n                        color: var(--dark-opacity-25);\n                        background: var(--dark-opacity-5);\n                    }\n                }\n            }\n        }\n\n        .rc-select {\n\n            // --------------- Single ----------------\n            margin: 0;\n            &-single {\n                .rc-select-selector {\n                    display: flex;\n                    position: relative;\n\n                    .rc-select-selection-wrap {\n                        width: 100%;\n                        position: relative;\n                    }\n\n                    .rc-select-selection-search {\n                        width: 100%;\n                        position: relative;\n                        display: none;\n                        &-input {\n                            width: 100%;\n                        }\n                    }\n\n                    .rc-select-selection-item,\n                    .rc-select-selection-placeholder {\n                        font: inherit;\n                        height: 100%;\n                        display: flex;\n                        align-items: center;\n                        position: relative;\n                        width: 100%;\n                        top: 0;\n                        left: 0;\n                        justify-content: space-between;\n                        padding: 0 1.5rem;\n                    }\n\n                    .rc-select-selection-item {\n                        &:after{\n                            content: \"\";\n                            display: block;\n                            width: 1rem;\n                            height: 1rem;\n                            transition: all .2s ease;\n                            background-image:url('", "');\n                        }\n                    }\n                }\n\n                // Not customize\n\n                &:not(.rc-select-customize-input) {\n                    .rc-select-selector {\n                        box-sizing: border-box;\n                        width: 141px;\n                        height: 40px;\n                        background: var(--theme-bg-color);\n                        border-radius: 0.5rem;\n                        border: none;\n                        padding: 0;\n                        color: var(--dark-opacity-50);\n                        font: var(--body-semi-bold-14-17);\n                        outline: none;\n                        text-align: center;\n                        &:before{\n                            content: \"\";\n                            position: absolute;\n                            inset: 0;\n                            border: 1px solid var(--dark-opacity-10);\n                            border-radius: inherit;\n                        }\n                    }\n                }\n            }\n            &-open {\n                .rc-select-selector {\n                    border-radius: 0.5rem 0.5rem 0 0 !important;\n                    &:before{\n                        border: 2px solid var(--primary) !important;\n                    }\n                    .rc-select-selection-item {\n                        &:after{\n                            transform: rotate(180deg);\n                        }\n                    }\n                }\n            }\n\n            // =============== Focused ===============\n\n            &-focused {\n                .rc-select-selector {\n                    border: 1px solid var(--dark-opacity-10) !important;\n                }\n            }\n\n            // ============== Dropdown ===============\n\n            &-dropdown {\n                margin: 0 !important;\n                border-radius: 0 0 0.5rem 0.5rem !important;\n                box-shadow: none !important;\n                border: 1px solid var(--dark-opacity-10) !important;\n                overflow: hidden !important;\n                inset: 40px auto auto 0 !important;\n                position: static !important;\n            }\n\n            // =============== Option ================\n\n            &-item {\n                font: var(--title-bold-16-19);\n                padding: 1rem 1.5rem;\n\n                // >>> Group\n\n                &-group {\n                    color: #999;\n                    font-weight: bold;\n                    font-size: 80%;\n                }\n\n                // >>> Option\n\n                &-option {\n                    position: relative;\n                    display: block;\n                    font: var(--title-bold-16-19);\n\n                    &-grouped {\n                        padding-left: 24px;\n                    }\n\n                    .rc-select-item-option-state {\n                        display: none;\n                    }\n\n                    // ------- Active -------\n\n                    &-active {\n                        background: var(--dark-opacity-3);\n                    }\n\n                    // ------ Disabled ------\n\n                    &-disabled {\n                        color: #999;\n                    }\n                }\n\n                // >>> Empty\n\n                &-empty {\n                    text-align: center;\n                    color: #999;\n                }\n            }\n            .rc-virtual-list-scrollbar-thumb{\n                background-color: var(--dark-opacity-10) !important;\n                width: 5px !important;\n            }\n        }\n    }\n"], ["\n    .rc-pagination {\n        align-items: flex-start;\n        justify-content: flex-end;\n\n        .rc-pagination-item {\n            width: 1.5rem;\n            height: 1.5rem;\n            min-width: 1.5rem;\n            padding: 0;\n            border: 0;\n            margin: 8.5px 2px 0 2px;\n            border-radius: 0.25rem;\n            transition: all 0.2s ease !important;\n\n            a {\n                padding: 0;\n                font: var(--caption-semi-bold-12-15);\n                line-height: 1.5rem;\n                color: inherit;\n            }\n\n            &:is(.rc-pagination-item-active), &:hover {\n                background-color: var(--primary-opacity-10);\n\n                a {\n                    color: var(--primary);\n                }\n            }\n        }\n\n        .rc-pagination-prev, .rc-pagination-next {\n            width: 2.5rem;\n            height: 2.5rem;\n            border: 0;\n            position: relative;\n            overflow: hidden;\n            border-radius: 0.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--primary);\n            transition: all 0.2s ease;\n            &:hover{\n                box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n            }\n            div {\n                display: block;\n            }\n        }\n\n        .rc-pagination-prev {\n            margin-right: 1rem;\n        }\n\n        .rc-pagination-next {\n            margin-left: 1rem;\n        }\n\n        .rc-pagination-jump-prev, .rc-pagination-jump-next {\n            width: 27px;\n            margin: 5px 0 0 0;\n\n            button {\n                &:after {\n                    content: \"...\";\n                }\n            }\n        }\n\n        .rc-pagination-options {\n            display: flex;\n            align-items: flex-start;\n            margin-left: 1rem;\n\n            .rc-pagination-options-quick-jumper {\n                display: flex;\n                align-items: center;\n                height: auto !important;\n                line-height: initial !important;\n                input {\n                    margin: 0 1rem;\n                    box-sizing: border-box;\n                    width: 88px;\n                    height: 40px;\n                    border-radius: 0.5rem;\n                    border: 1px solid var(--dark-opacity-10);\n                    padding: 19.5px 24px;\n                    color: var(--dark);\n                    font: var(--body-semi-bold-14-17);\n                    outline: none;\n                    background: var(--dark-opacity-3);\n\n                    &::placeholder {\n                        color: var(--dark-opacity-50);\n                    }\n\n                    &:focus {\n                        padding: 18.5px 23px;\n                        border: 2px solid var(--primary);\n                        color: var(--dark);\n                        background: var(--theme-bg-color);\n                    }\n\n                    &:is([disabled]) {\n                        color: var(--dark-opacity-25);\n                        background: var(--dark-opacity-5);\n                    }\n                }\n            }\n        }\n\n        .rc-select {\n\n            // --------------- Single ----------------\n            margin: 0;\n            &-single {\n                .rc-select-selector {\n                    display: flex;\n                    position: relative;\n\n                    .rc-select-selection-wrap {\n                        width: 100%;\n                        position: relative;\n                    }\n\n                    .rc-select-selection-search {\n                        width: 100%;\n                        position: relative;\n                        display: none;\n                        &-input {\n                            width: 100%;\n                        }\n                    }\n\n                    .rc-select-selection-item,\n                    .rc-select-selection-placeholder {\n                        font: inherit;\n                        height: 100%;\n                        display: flex;\n                        align-items: center;\n                        position: relative;\n                        width: 100%;\n                        top: 0;\n                        left: 0;\n                        justify-content: space-between;\n                        padding: 0 1.5rem;\n                    }\n\n                    .rc-select-selection-item {\n                        &:after{\n                            content: \"\";\n                            display: block;\n                            width: 1rem;\n                            height: 1rem;\n                            transition: all .2s ease;\n                            background-image:url('", "');\n                        }\n                    }\n                }\n\n                // Not customize\n\n                &:not(.rc-select-customize-input) {\n                    .rc-select-selector {\n                        box-sizing: border-box;\n                        width: 141px;\n                        height: 40px;\n                        background: var(--theme-bg-color);\n                        border-radius: 0.5rem;\n                        border: none;\n                        padding: 0;\n                        color: var(--dark-opacity-50);\n                        font: var(--body-semi-bold-14-17);\n                        outline: none;\n                        text-align: center;\n                        &:before{\n                            content: \"\";\n                            position: absolute;\n                            inset: 0;\n                            border: 1px solid var(--dark-opacity-10);\n                            border-radius: inherit;\n                        }\n                    }\n                }\n            }\n            &-open {\n                .rc-select-selector {\n                    border-radius: 0.5rem 0.5rem 0 0 !important;\n                    &:before{\n                        border: 2px solid var(--primary) !important;\n                    }\n                    .rc-select-selection-item {\n                        &:after{\n                            transform: rotate(180deg);\n                        }\n                    }\n                }\n            }\n\n            // =============== Focused ===============\n\n            &-focused {\n                .rc-select-selector {\n                    border: 1px solid var(--dark-opacity-10) !important;\n                }\n            }\n\n            // ============== Dropdown ===============\n\n            &-dropdown {\n                margin: 0 !important;\n                border-radius: 0 0 0.5rem 0.5rem !important;\n                box-shadow: none !important;\n                border: 1px solid var(--dark-opacity-10) !important;\n                overflow: hidden !important;\n                inset: 40px auto auto 0 !important;\n                position: static !important;\n            }\n\n            // =============== Option ================\n\n            &-item {\n                font: var(--title-bold-16-19);\n                padding: 1rem 1.5rem;\n\n                // >>> Group\n\n                &-group {\n                    color: #999;\n                    font-weight: bold;\n                    font-size: 80%;\n                }\n\n                // >>> Option\n\n                &-option {\n                    position: relative;\n                    display: block;\n                    font: var(--title-bold-16-19);\n\n                    &-grouped {\n                        padding-left: 24px;\n                    }\n\n                    .rc-select-item-option-state {\n                        display: none;\n                    }\n\n                    // ------- Active -------\n\n                    &-active {\n                        background: var(--dark-opacity-3);\n                    }\n\n                    // ------ Disabled ------\n\n                    &-disabled {\n                        color: #999;\n                    }\n                }\n\n                // >>> Empty\n\n                &-empty {\n                    text-align: center;\n                    color: #999;\n                }\n            }\n            .rc-virtual-list-scrollbar-thumb{\n                background-color: var(--dark-opacity-10) !important;\n                width: 5px !important;\n            }\n        }\n    }\n"])), function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--dark)", name: "ArrowSmallDown" })); });
 var templateObject_1;

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js

@@ -26,6 +26,6 @@ exports.InputIcon = styled_components_1.default.div(templateObject_13 || (templa
 exports.PopupText = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: var(--caption-medium-12-15);\n\n    a {\n        color: var(--primary);\n    }\n"], ["\n    font: var(--caption-medium-12-15);\n\n    a {\n        color: var(--primary);\n    }\n"])));
 exports.ProductCardContent = styled_components_1.default.label(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    margin: 1.5rem auto 0 ", ";\n    display: block;\n    width: ", ";\n    cursor: initial;\n\n    @media only screen and ", " {\n        margin: 1rem auto 0 0 !important;\n        width: 100% !important;\n    }\n"], ["\n    margin: 1.5rem auto 0 ", ";\n    display: block;\n    width: ", ";\n    cursor: initial;\n\n    @media only screen and ", " {\n        margin: 1rem auto 0 0 !important;\n        width: 100% !important;\n    }\n"])), function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
 exports.HiddenInput = styled_components_1.default.input(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
-exports.ProductCardInner = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: white;\n    display: block;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"], ["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: white;\n    display: block;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"])), devices_1.devices.md, function (props) { return props.$size === "small" && "\n        padding: 1rem;\n\n        ".concat(exports.ProductCardCheckboxContent, " > label > div {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n\n        ").concat(exports.ProductCardTitle, " {\n            font: var(--body-semi-bold-14-17);\n        }\n\n        ").concat(exports.ProductCardContent, " {\n            margin: 1rem auto 0 0;\n        }\n    "); });
+exports.ProductCardInner = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: var(--theme-bg-color);\n    display: block;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"], ["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: var(--theme-bg-color);\n    display: block;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"])), devices_1.devices.md, function (props) { return props.$size === "small" && "\n        padding: 1rem;\n\n        ".concat(exports.ProductCardCheckboxContent, " > label > div {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n\n        ").concat(exports.ProductCardTitle, " {\n            font: var(--body-semi-bold-14-17);\n        }\n\n        ").concat(exports.ProductCardContent, " {\n            margin: 1rem auto 0 0;\n        }\n    "); });
 exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: block;\n    max-width: 634px;\n\n    ", "\n"], ["\n    display: block;\n    max-width: 634px;\n\n    ", "\n"])), function (props) { return props.disabled ? "\n        user-select:none;\n        pointer-events:none;\n      " : "\n        cursor: pointer;\n    "; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js

@@ -11,5 +11,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductCardHorizontalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 0.5rem;\n\n    ", "\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: ", ";\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: ", " !important;\n                height: ", " !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n                border-radius: 0.5rem;\n                max-height: ", ";\n            }\n        }\n\n        .title {\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            position: relative;\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n                ", ";\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n            position: relative;\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n            position: relative;\n\n            .price {\n                margin-right: 4px;\n                font: var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font: var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n\n    ", "\n"], ["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 0.5rem;\n\n    ", "\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: ", ";\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: ", " !important;\n                height: ", " !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n                border-radius: 0.5rem;\n                max-height: ", ";\n            }\n        }\n\n        .title {\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            position: relative;\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n                ", ";\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n            position: relative;\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n            position: relative;\n\n            .price {\n                margin-right: 4px;\n                font: var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font: var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return !props.$hasLoading && "\n        &:hover {\n            background: var(--dark-opacity-3);\n        }\n    "; }, function (props) { return props.$hasLoading ? "none" : "1px solid var(--dark-opacity-5)"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "100%" : "initial"; }, function (props) { return props.$hasLoading ? "100%" : "initial"; }, function (props) { return props.$hasLoading ? '100%' : 'calc(100% - 1rem)'; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "margin-bottom: 0.25rem" : null; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.$size === "small" ? "\n        .horizontalWrapper {\n            .img {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n            .title{\n                font: var(--caption-semi-bold-12-15);\n            }\n            .description {\n                display: none;\n            }\n            .priceContent {\n                .price {\n                   font: var(--caption-extra-bold-12-15);\n                }\n                .period {\n                   font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    " : ""; });
+exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 0.5rem;\n\n    ", "\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: ", ";\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: var(--theme-bg-color);\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: ", " !important;\n                height: ", " !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n                border-radius: 0.5rem;\n                max-height: ", ";\n            }\n        }\n\n        .title {\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            position: relative;\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n                ", ";\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n            position: relative;\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n            position: relative;\n\n            .price {\n                margin-right: 4px;\n                font: var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font: var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n\n    ", "\n"], ["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 0.5rem;\n\n    ", "\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: ", ";\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: var(--theme-bg-color);\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: ", " !important;\n                height: ", " !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n                border-radius: 0.5rem;\n                max-height: ", ";\n            }\n        }\n\n        .title {\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            position: relative;\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n                ", ";\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n            position: relative;\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n            position: relative;\n\n            .price {\n                margin-right: 4px;\n                font: var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font: var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return !props.$hasLoading && "\n        &:hover {\n            background: var(--dark-opacity-3);\n        }\n    "; }, function (props) { return props.$hasLoading ? "none" : "1px solid var(--dark-opacity-5)"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "100%" : "initial"; }, function (props) { return props.$hasLoading ? "100%" : "initial"; }, function (props) { return props.$hasLoading ? '100%' : 'calc(100% - 1rem)'; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "margin-bottom: 0.25rem" : null; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.$size === "small" ? "\n        .horizontalWrapper {\n            .img {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n            .title{\n                font: var(--caption-semi-bold-12-15);\n            }\n            .description {\n                display: none;\n            }\n            .priceContent {\n                .price {\n                   font: var(--caption-extra-bold-12-15);\n                }\n                .period {\n                   font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    " : ""; });
 var templateObject_1;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.js

@@ -17,7 +17,7 @@ exports.DiscountBadge = styled_components_1.default.div(templateObject_5 || (tem
 exports.PriceStack = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    width: 100%;\n"])));
 exports.OldPrice = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    color: var(--dark-opacity-25);\n    font: var(--body-semi-bold-14-17);\n    text-decoration: line-through;\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"], ["\n    color: var(--dark-opacity-25);\n    font: var(--body-semi-bold-14-17);\n    text-decoration: line-through;\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"])), function (props) { return props.$hasLoading ? '50%' : 'auto'; }, function (props) { return props.$hasLoading ? '15px' : 'auto'; });
 exports.NewPrice = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    color: var(--dark);\n    font: var(--headline-extra-bold-18-22);\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"], ["\n    color: var(--dark);\n    font: var(--headline-extra-bold-18-22);\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"])), function (props) { return props.$hasLoading ? '50%' : 'auto'; }, function (props) { return props.$hasLoading ? '17px' : 'auto'; });
-exports.ImageWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: white;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: white;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"])), function (props) { return props.$hasLoading || props.$hasBgColor ? "none" : "1px solid var(--grey-10)"; });
+exports.ImageWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"])), function (props) { return props.$hasLoading || props.$hasBgColor ? "none" : "1px solid var(--grey-10)"; });
 exports.TextSection = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"], ["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"])), function (props) { return props.$variant === 'discount' || props.$textSize === 'md'
     ? 'var(--title-extra-bold-16-19)'
@@ -32,5 +32,5 @@ exports.PriceSection = styled_components_1.default.div(templateObject_15 || (tem
 exports.UnitPrice = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"])));
 exports.TotalPrice = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"])));
 exports.PriceLoading = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    min-height: ", ";\n\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    min-height: ", ";\n\n    ", "\n"])), function (props) { return props.$isDiscount ? 'flex-start' : 'flex-end'; }, function (props) { return props.$isDiscount ? '47px' : '44px'; }, function (props) { return props.$fullRow && "\n        grid-column: 1 / -1;\n    "; });
-exports.ProductCardHorizontalMdStyled = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"], ["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"])), function (props) { return props.$hasBgColor ? 'none' : '1px solid var(--grey-10)'; }, function (props) { return props.$hasBgColor ? 'var(--dark-opacity-3)' : 'white'; });
+exports.ProductCardHorizontalMdStyled = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"], ["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"])), function (props) { return props.$hasBgColor ? 'none' : '1px solid var(--grey-10)'; }, function (props) { return props.$hasBgColor ? 'var(--dark-opacity-3)' : 'var(--theme-bg-color)'; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js

@@ -24,7 +24,7 @@ exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(template
         "\n      @media ((hover: hover) and (pointer: fine)) {\n        cursor: pointer;\n        &:hover {\n          ".concat(exports.Border, " {\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n      }\n  ");
 }, exports.Title, exports.Title);
 exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr 1fr;\n  align-items: center;\n  min-height: 66px;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-right: 0.5rem;\n\n  @media only screen and ", " {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n"], ["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr 1fr;\n  align-items: center;\n  min-height: 66px;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-right: 0.5rem;\n\n  @media only screen and ", " {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n"])), devices_1.devices.sm);
-exports.ImgWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"])), function (props) { return (props.$hasImageBorder ? "1px solid var(--dark-opacity-5)" : "none"); }, function (props) { return (props.$hasImageRounded ? "0.5rem" : "0"); }, function (props) { return (props.$imageWidth ? props.$imageWidth : "71px"); }, function (props) { return (props.$imageHeight ? props.$imageHeight : "50px"); }, function (props) { return (props.$hasImageRounded ? "0.5rem" : "0"); });
+exports.ImgWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: var(--theme-bg-color);\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: var(--theme-bg-color);\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"])), function (props) { return (props.$hasImageBorder ? "1px solid var(--dark-opacity-5)" : "none"); }, function (props) { return (props.$hasImageRounded ? "0.5rem" : "0"); }, function (props) { return (props.$imageWidth ? props.$imageWidth : "71px"); }, function (props) { return (props.$imageHeight ? props.$imageHeight : "50px"); }, function (props) { return (props.$hasImageRounded ? "0.5rem" : "0"); });
 exports.TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-right: 0.5rem;\n"], ["\n  padding-right: 0.5rem;\n"])));
 exports.PriceContent = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return (props === null || props === void 0 ? void 0 : props.$infoPosition) === "left"

package/dist/components/ProductCardRadio/ProductCardRadio.styled.js

@@ -22,6 +22,6 @@ exports.InputIcon = styled_components_1.default.div(templateObject_9 || (templat
 exports.PopupText = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    font: var(--caption-medium-12-15);\n\n    a {\n        color: var(--primary);\n    }\n"], ["\n    font: var(--caption-medium-12-15);\n\n    a {\n        color: var(--primary);\n    }\n"])));
 exports.ProductCardContent = styled_components_1.default.label(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    margin: 1.5rem auto 0 ", ";\n    grid-column-start: 1;\n    grid-column-end: 4;\n    width: ", ";\n    cursor: initial;\n\n    @media only screen and ", " {\n        margin: 1rem auto 0 0 !important;\n        width: 100% !important;\n    }\n"], ["\n    margin: 1.5rem auto 0 ", ";\n    grid-column-start: 1;\n    grid-column-end: 4;\n    width: ", ";\n    cursor: initial;\n\n    @media only screen and ", " {\n        margin: 1rem auto 0 0 !important;\n        width: 100% !important;\n    }\n"])), function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
 exports.HiddenInput = styled_components_1.default.input(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
-exports.ProductCardInner = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    border: ", ";\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"], ["\n    border: ", ";\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"])), function (props) { return props.$checked ? "2px solid var(--primary)" : "1px solid var(--dark-opacity-10)"; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n        padding: 1rem;\n\n        ".concat(exports.ProductCardRadioContent, " > label > div {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n\n        ").concat(exports.ProductCardTitle, " {\n            font: var(--body-semi-bold-14-17);\n        }\n\n        ").concat(exports.ProductCardContent, " {\n            margin: 1rem auto 0 0;\n        }\n    "); });
+exports.ProductCardInner = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    border: ", ";\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: var(--theme-bg-color);\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"], ["\n    border: ", ";\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: var(--theme-bg-color);\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"])), function (props) { return props.$checked ? "2px solid var(--primary)" : "1px solid var(--dark-opacity-10)"; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n        padding: 1rem;\n\n        ".concat(exports.ProductCardRadioContent, " > label > div {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n\n        ").concat(exports.ProductCardTitle, " {\n            font: var(--body-semi-bold-14-17);\n        }\n\n        ").concat(exports.ProductCardContent, " {\n            margin: 1rem auto 0 0;\n        }\n    "); });
 exports.ProductCardRadioStyled = styled_components_1.default.label(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: block;\n    max-width: 634px;\n\n    ", "\n"], ["\n    display: block;\n    max-width: 634px;\n\n    ", "\n"])), function (props) { return props.disabled ? "\n        user-select:none;\n        pointer-events:none;\n      " : "\n        cursor: pointer;\n    "; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/components/ProductCardVertical/ProductCardVertical.styled.js

@@ -11,7 +11,7 @@ exports.ProductCardVerticalStyled = exports.CardButton = exports.NewPricePeriod
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 var responsiveSm = function (cssBlock) { return "\n  @media only screen and ".concat(devices_1.devices.sm, " {\n    ").concat(cssBlock, "\n  }\n"); };
-exports.ProductCardRoot = 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  min-width: 240px;\n  padding: 1rem;\n  transition: all 0.2s ease;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n\n  a {\n    display: block;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n\n  ", "\n"], ["\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  border-radius: 0.5rem;\n  min-width: 240px;\n  padding: 1rem;\n  transition: all 0.2s ease;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n\n  a {\n    display: block;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n\n  ", "\n"])), function (props) {
+exports.ProductCardRoot = 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  min-width: 240px;\n  padding: 1rem;\n  transition: all 0.2s ease;\n  position: relative;\n  box-sizing: border-box;\n  background-color: var(--theme-bg-color);\n\n  a {\n    display: block;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n\n  ", "\n"], ["\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  border-radius: 0.5rem;\n  min-width: 240px;\n  padding: 1rem;\n  transition: all 0.2s ease;\n  position: relative;\n  box-sizing: border-box;\n  background-color: var(--theme-bg-color);\n\n  a {\n    display: block;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n\n  ", "\n"])), function (props) {
     return props.$isResponsive &&
         responsiveSm("padding: 1.5rem;");
 });
@@ -24,7 +24,7 @@ exports.CartBadge = styled_components_1.default.div(templateObject_4 || (templat
     return p.$isResponsive &&
         responsiveSm("\n    ".concat(p.$isInset ? "left: 15px; top: 8px;" : "", "\n  "));
 });
-exports.ImageSection = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-5);\n  background: #fff;\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  aspect-ratio: ", ";\n  box-sizing: border-box;\n  z-index: 1;\n  text-align: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-5);\n  background: #fff;\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  aspect-ratio: ", ";\n  box-sizing: border-box;\n  z-index: 1;\n  text-align: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) { return (props.$hasSquareFillImage ? "auto" : "150px"); }, function (props) { return (props.$hasSquareFillImage ? "1 / 1" : "auto"); }, function (props) {
+exports.ImageSection = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-5);\n  background: var(--theme-bg-color);\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  aspect-ratio: ", ";\n  box-sizing: border-box;\n  z-index: 1;\n  text-align: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-5);\n  background: var(--theme-bg-color);\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  aspect-ratio: ", ";\n  box-sizing: border-box;\n  z-index: 1;\n  text-align: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) { return (props.$hasSquareFillImage ? "auto" : "150px"); }, function (props) { return (props.$hasSquareFillImage ? "1 / 1" : "auto"); }, function (props) {
     return props.$hasSquareFillImage
         ? "\n    padding: 0;\n      img {\n      width: calc(100% - 2rem) !important;\n      height: calc(100% - 2rem) !important;\n      aspect-ratio: 1 / 1 !important;\n      object-fit: cover !important;\n      max-width: 100% !important;\n      border-radius: 0.5rem;\n      display: block;\n      margin: 1rem;\n    }\n  "
         : props.$hasImageOffset

package/dist/components/QuantitySelector/QuantitySelector.styled.js

@@ -16,5 +16,5 @@ exports.Controls = styled_components_1.default.div(templateObject_3 || (template
 exports.QuantityValue = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font: ", ";\n\n    > div {\n        margin: 0 auto;\n    }\n"], ["\n    color: ", ";\n    font: ", ";\n\n    > div {\n        margin: 0 auto;\n    }\n"])), function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$orientation === 'horizontal'
     ? 'var(--body-extra-bold-14-17)'
     : 'var(--body-extra-bold-13-16)'; });
-exports.SelectorButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border: 0;\n    padding: 0;\n    outline: none;\n    box-shadow: none;\n    width: 24px;\n    height: 24px;\n    background: white;\n    border-radius: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all .1s ease;\n    cursor: pointer;\n    position: relative;\n    color: var(--primary);\n    flex-shrink: 0;\n\n    ", "\n\n    &:disabled {\n        cursor: no-drop;\n        background-color: white !important;\n        color: var(--grey-50) !important;\n    }\n\n    .popup {\n        position: absolute;\n        width: 139px;\n        padding: 10px;\n        border-radius: 0.5rem;\n        background-color: var(--red);\n        z-index: 99999;\n        box-sizing: border-box;\n        right: calc(100% + 11px);\n        top: -8px;\n        color: white;\n        opacity: 1;\n        user-select: none;\n        pointer-events: none;\n        transition: all .1s ease;\n        text-align: center;\n        font: var(--caption-semi-bold-12-15);\n\n        &:before {\n            content: '';\n            position: absolute;\n            top: 14px;\n            left: calc(100% - 7px);\n            transform: rotate(45deg);\n            background-color: var(--red);\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n        }\n    }\n\n    @media only screen and ", " {\n        &:hover:not(:disabled) {\n            background-color: var(--primary);\n            color: white;\n        }\n    }\n\n    &:active:not(:disabled) {\n        color: white;\n        background-color: var(--primary);\n    }\n"], ["\n    border: 0;\n    padding: 0;\n    outline: none;\n    box-shadow: none;\n    width: 24px;\n    height: 24px;\n    background: white;\n    border-radius: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all .1s ease;\n    cursor: pointer;\n    position: relative;\n    color: var(--primary);\n    flex-shrink: 0;\n\n    ", "\n\n    &:disabled {\n        cursor: no-drop;\n        background-color: white !important;\n        color: var(--grey-50) !important;\n    }\n\n    .popup {\n        position: absolute;\n        width: 139px;\n        padding: 10px;\n        border-radius: 0.5rem;\n        background-color: var(--red);\n        z-index: 99999;\n        box-sizing: border-box;\n        right: calc(100% + 11px);\n        top: -8px;\n        color: white;\n        opacity: 1;\n        user-select: none;\n        pointer-events: none;\n        transition: all .1s ease;\n        text-align: center;\n        font: var(--caption-semi-bold-12-15);\n\n        &:before {\n            content: '';\n            position: absolute;\n            top: 14px;\n            left: calc(100% - 7px);\n            transform: rotate(45deg);\n            background-color: var(--red);\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n        }\n    }\n\n    @media only screen and ", " {\n        &:hover:not(:disabled) {\n            background-color: var(--primary);\n            color: white;\n        }\n    }\n\n    &:active:not(:disabled) {\n        color: white;\n        background-color: var(--primary);\n    }\n"])), function (props) { return props.$hasShadow ? "\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    " : ""; }, devices_1.devices.mdUp);
+exports.SelectorButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border: 0;\n    padding: 0;\n    outline: none;\n    box-shadow: none;\n    width: 24px;\n    height: 24px;\n    background: var(--theme-bg-color);\n    border-radius: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all .1s ease;\n    cursor: pointer;\n    position: relative;\n    color: var(--primary);\n    flex-shrink: 0;\n\n    ", "\n\n    &:disabled {\n        cursor: no-drop;\n        background-color: var(--theme-bg-color) !important;\n        color: var(--grey-50) !important;\n    }\n\n    .popup {\n        position: absolute;\n        width: 139px;\n        padding: 10px;\n        border-radius: 0.5rem;\n        background-color: var(--red);\n        z-index: 99999;\n        box-sizing: border-box;\n        right: calc(100% + 11px);\n        top: -8px;\n        color: white;\n        opacity: 1;\n        user-select: none;\n        pointer-events: none;\n        transition: all .1s ease;\n        text-align: center;\n        font: var(--caption-semi-bold-12-15);\n\n        &:before {\n            content: '';\n            position: absolute;\n            top: 14px;\n            left: calc(100% - 7px);\n            transform: rotate(45deg);\n            background-color: var(--red);\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n        }\n    }\n\n    @media only screen and ", " {\n        &:hover:not(:disabled) {\n            background-color: var(--primary);\n            color: white;\n        }\n    }\n\n    &:active:not(:disabled) {\n        color: white;\n        background-color: var(--primary);\n    }\n"], ["\n    border: 0;\n    padding: 0;\n    outline: none;\n    box-shadow: none;\n    width: 24px;\n    height: 24px;\n    background: var(--theme-bg-color);\n    border-radius: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all .1s ease;\n    cursor: pointer;\n    position: relative;\n    color: var(--primary);\n    flex-shrink: 0;\n\n    ", "\n\n    &:disabled {\n        cursor: no-drop;\n        background-color: var(--theme-bg-color) !important;\n        color: var(--grey-50) !important;\n    }\n\n    .popup {\n        position: absolute;\n        width: 139px;\n        padding: 10px;\n        border-radius: 0.5rem;\n        background-color: var(--red);\n        z-index: 99999;\n        box-sizing: border-box;\n        right: calc(100% + 11px);\n        top: -8px;\n        color: white;\n        opacity: 1;\n        user-select: none;\n        pointer-events: none;\n        transition: all .1s ease;\n        text-align: center;\n        font: var(--caption-semi-bold-12-15);\n\n        &:before {\n            content: '';\n            position: absolute;\n            top: 14px;\n            left: calc(100% - 7px);\n            transform: rotate(45deg);\n            background-color: var(--red);\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n        }\n    }\n\n    @media only screen and ", " {\n        &:hover:not(:disabled) {\n            background-color: var(--primary);\n            color: white;\n        }\n    }\n\n    &:active:not(:disabled) {\n        color: white;\n        background-color: var(--primary);\n    }\n"])), function (props) { return props.$hasShadow ? "\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    " : ""; }, devices_1.devices.mdUp);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/RadioButton/layouts/boxedWithIcon/BoxedWithIcon.styled.js

@@ -20,5 +20,5 @@ exports.Label = styled_components_1.default.span(templateObject_4 || (templateOb
 exports.Indicator = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-shrink: 0;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  width: 20px;\n  height: 20px;\n  display: block;\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n"], ["\n  flex-shrink: 0;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  width: 20px;\n  height: 20px;\n  display: block;\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n"])), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); });
 exports.Separator = styled_components_1.default.hr(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 1px;\n  background-color: var(--grey-10);\n  margin: 0;\n  border: none;\n  opacity: 1;\n"], ["\n  height: 1px;\n  background-color: var(--grey-10);\n  margin: 0;\n  border: none;\n  opacity: 1;\n"])));
 exports.Content = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: var(--dark-opacity-50);\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  li {\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-70);\n    line-height: 1.4;\n  }\n"], ["\n  color: var(--dark-opacity-50);\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  li {\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-70);\n    line-height: 1.4;\n  }\n"])));
-exports.BoxedWithIconStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: white;\n  cursor: ", ";\n  ", "\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"], ["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: white;\n  cursor: ", ";\n  ", "\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"])), function (props) { return props.$checked ? "transparent" : "var(--dark-opacity-10)"; }, function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, function (props) { return props.$checked && "\n    &:before{\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      user-select: none;\n      pointer-events: none;\n      border: 2px solid var(--primary);\n    }\n  "; }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, exports.ContentWrapper, exports.Header, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })); });
+exports.BoxedWithIconStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: var(--theme-bg-color);\n  cursor: ", ";\n  ", "\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"], ["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: var(--theme-bg-color);\n  cursor: ", ";\n  ", "\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"])), function (props) { return props.$checked ? "transparent" : "var(--dark-opacity-10)"; }, function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, function (props) { return props.$checked && "\n    &:before{\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      user-select: none;\n      pointer-events: none;\n      border: 2px solid var(--primary);\n    }\n  "; }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, exports.ContentWrapper, exports.Header, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.js

@@ -53,7 +53,7 @@ exports.Price = styled_components_1.default.strong(templateObject_14 || (templat
 exports.TotalPrice = styled_components_1.default.strong(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"], ["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"])));
 exports.TotalLabel = styled_components_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.sm);
 exports.ContentArea = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"])), devices_1.devices.sm);
-exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"])), function (props) {
+exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"])), function (props) {
     if (props.$disabled)
         return '1px solid var(--grey-10)';
     if (props.$hasError)

package/dist/components/ReviewBlock/ReviewBlock.styled.js

@@ -10,14 +10,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownToggleButton = exports.DropdownWrapper = exports.StarsWrapper = exports.BadgeWrapper = exports.TextLinkWrapper = exports.Tags = exports.ProductAnswer = exports.ProductQuestion = exports.ProductStars = exports.ProductName = exports.ProductReviewContent = exports.ProductImage = exports.ProductWrapper = exports.ProductReviewBlock = exports.PlatformReview = exports.Date = exports.CustomerName = exports.Header = exports.ReviewCard = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: white;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    ", "\n"], ["\n    background: white;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    ", "\n"])), function (props) { return props.$hasShadow ? "\n        box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n    " : "\n        border: 1px solid var(--grey-10);\n    "; });
+exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: var(--theme-bg-color);\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    ", "\n"], ["\n    background: var(--theme-bg-color);\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    ", "\n"])), function (props) { return props.$hasShadow ? "\n        box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n    " : "\n        border: 1px solid var(--grey-10);\n    "; });
 exports.Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: ", ";\n    border-bottom: 1px solid var(--dark-opacity-10);\n    padding-bottom: 1.5rem;\n    margin-bottom: 1.5rem;\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: ", ";\n    border-bottom: 1px solid var(--dark-opacity-10);\n    padding-bottom: 1.5rem;\n    margin-bottom: 1.5rem;\n"])), function (props) { return props.$hasDropdown || props.$hasApproveButton ? "center" : "flex-end"; });
 exports.CustomerName = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n"])));
 exports.Date = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font: var(--caption-semi-bold-12-15);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n    text-align: end;\n"], ["\n    font: var(--caption-semi-bold-12-15);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n    text-align: end;\n"])));
 exports.PlatformReview = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font: var(--body-regular-14-20);\n    color: var(--grey-90);\n    margin: 16px 0;\n"], ["\n    font: var(--body-regular-14-20);\n    color: var(--grey-90);\n    margin: 16px 0;\n"])));
 exports.ProductReviewBlock = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    + div{\n        margin-top: 1.5rem;\n    }\n"], ["\n    + div{\n        margin-top: 1.5rem;\n    }\n"])));
 exports.ProductWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    margin-bottom: 1rem;\n"], ["\n    margin-top: 0;\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    margin-bottom: 1rem;\n"])));
-exports.ProductImage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    object-fit: cover;\n    border-radius: 8px;\n    border: 1px solid var(--dark-opacity-5);\n    background: #FFF;\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"], ["\n    width: 64px;\n    height: 64px;\n    object-fit: cover;\n    border-radius: 8px;\n    border: 1px solid var(--dark-opacity-5);\n    background: #FFF;\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));
+exports.ProductImage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    object-fit: cover;\n    border-radius: 8px;\n    border: 1px solid var(--dark-opacity-5);\n    background: var(--theme-bg-color);\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"], ["\n    width: 64px;\n    height: 64px;\n    object-fit: cover;\n    border-radius: 8px;\n    border: 1px solid var(--dark-opacity-5);\n    background: var(--theme-bg-color);\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));
 exports.ProductReviewContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    flex: 1;\n"], ["\n    flex: 1;\n"])));
 exports.ProductName = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    font: var(--body-bold-14-17);\n    color: var(--dark-opacity-75);\n"], ["\n    font: var(--body-bold-14-17);\n    color: var(--dark-opacity-75);\n"])));
 exports.ProductStars = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    margin-top: 0.5rem;\n"], ["\n    margin-top: 0.5rem;\n"])));

package/dist/components/RichTextEditor/RichTextEditor.styled.js

@@ -15,7 +15,7 @@ exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templ
     if (props.$disabled)
         return 'var(--dark-opacity-5)';
     if (props.$focused)
-        return 'white';
+        return 'var(--theme-bg-color)';
     return 'var(--dark-opacity-3)';
 }, function (props) { return (props.$hasError ? 'var(--red)' : 'var(--grey-10)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); }, function (props) { return (props.$focused ? 'var(--primary)' : 'transparent'); });
 exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"])));

package/dist/components/SearchBox/SearchBox.styled.js

@@ -31,6 +31,6 @@ exports.LoadingStyled = exports.SearchBoxStyled = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 var disabledStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    opacity: 0.6;\n    pointer-events: none;\n    cursor: not-allowed;\n"], ["\n    opacity: 0.6;\n    pointer-events: none;\n    cursor: not-allowed;\n"])));
-exports.SearchBoxStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n\n    .shadowBox {\n        height: 48px;\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 0.5rem;\n        box-shadow: ", ";\n        display: ", ";\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n        }\n    }\n\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 0.5rem;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 0.5rem;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 54px 8px 24px;\n            color: var(--dark);\n            font: var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            transition: all 0.2s ease;\n\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n\n            &:disabled {\n                ", ";\n                background-color: var(--dark-opacity-5);\n            }\n        }\n\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        padding: 0;\n        border-radius: 0.5rem;\n        background: white;\n        box-sizing: border-box;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n        &:before{\n            content: \"\";\n            height: calc(100% + 48px);\n            position: absolute;\n            width: calc(100% - 10px);\n            left: 50%;\n            bottom: 0;\n            transform: translateX(-50%);\n            border-radius: inherit;\n            box-shadow: ", ";\n            user-select: none;\n            pointer-events: none;\n            @media only screen and ", " {\n                box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n            }\n        }\n\n        .resultListInner {\n            position: relative;\n            overflow-y: auto;\n            overflow-x: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\n            max-height: 408px;\n            padding: 1.5rem;\n            background-color: white;\n            z-index: 1;\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\n            .productCard {\n                border-radius: 0.5rem;\n                transition: all 0.2s ease;\n                outline: none;\n\n                &:is(.selected) {\n                    background: var(--dark-opacity-3);\n                }\n\n                &:focus-visible {\n                    box-shadow: 0 0 0 2px var(--primary-opacity-20);\n                }\n            }\n\n            ", "\n\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 256px;\n            }\n        }\n    }\n\n    ", "\n"], ["\n    position: relative;\n    width: 100%;\n\n    .shadowBox {\n        height: 48px;\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 0.5rem;\n        box-shadow: ", ";\n        display: ", ";\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n        }\n    }\n\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 0.5rem;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 0.5rem;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 54px 8px 24px;\n            color: var(--dark);\n            font: var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            transition: all 0.2s ease;\n\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n\n            &:disabled {\n                ", ";\n                background-color: var(--dark-opacity-5);\n            }\n        }\n\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        padding: 0;\n        border-radius: 0.5rem;\n        background: white;\n        box-sizing: border-box;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n        &:before{\n            content: \"\";\n            height: calc(100% + 48px);\n            position: absolute;\n            width: calc(100% - 10px);\n            left: 50%;\n            bottom: 0;\n            transform: translateX(-50%);\n            border-radius: inherit;\n            box-shadow: ", ";\n            user-select: none;\n            pointer-events: none;\n            @media only screen and ", " {\n                box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n            }\n        }\n\n        .resultListInner {\n            position: relative;\n            overflow-y: auto;\n            overflow-x: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\n            max-height: 408px;\n            padding: 1.5rem;\n            background-color: white;\n            z-index: 1;\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\n            .productCard {\n                border-radius: 0.5rem;\n                transition: all 0.2s ease;\n                outline: none;\n\n                &:is(.selected) {\n                    background: var(--dark-opacity-3);\n                }\n\n                &:focus-visible {\n                    box-shadow: 0 0 0 2px var(--primary-opacity-20);\n                }\n            }\n\n            ", "\n\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 256px;\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, function (props) { return props.$showResultList ? "none" : "block"; }, devices_1.devices.xl, disabledStyles, function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, devices_1.devices.xl, function (props) { return props.$size === "small" && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                row-gap: 0.5rem;\n                max-height: 256px;\n            "], ["\n                row-gap: 0.5rem;\n                max-height: 256px;\n            "]))); }, devices_1.devices.xl, function (props) { return props.$disabled && disabledStyles; });
+exports.SearchBoxStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n\n    .shadowBox {\n        height: 48px;\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 0.5rem;\n        box-shadow: ", ";\n        display: ", ";\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n        }\n    }\n\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 0.5rem;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: var(--theme-bg-color);\n            border-radius: 0.5rem;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 54px 8px 24px;\n            color: var(--dark);\n            font: var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            transition: all 0.2s ease;\n\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n\n            &:disabled {\n                ", ";\n                background-color: var(--dark-opacity-5);\n            }\n        }\n\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        padding: 0;\n        border-radius: 0.5rem;\n        background: var(--theme-bg-color);\n        box-sizing: border-box;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n        &:before{\n            content: \"\";\n            height: calc(100% + 48px);\n            position: absolute;\n            width: calc(100% - 10px);\n            left: 50%;\n            bottom: 0;\n            transform: translateX(-50%);\n            border-radius: inherit;\n            box-shadow: ", ";\n            user-select: none;\n            pointer-events: none;\n            @media only screen and ", " {\n                box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n            }\n        }\n\n        .resultListInner {\n            position: relative;\n            overflow-y: auto;\n            overflow-x: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\n            max-height: 408px;\n            padding: 1.5rem;\n            background-color: var(--theme-bg-color);\n            z-index: 1;\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\n            .productCard {\n                border-radius: 0.5rem;\n                transition: all 0.2s ease;\n                outline: none;\n\n                &:is(.selected) {\n                    background: var(--dark-opacity-3);\n                }\n\n                &:focus-visible {\n                    box-shadow: 0 0 0 2px var(--primary-opacity-20);\n                }\n            }\n\n            ", "\n\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 256px;\n            }\n        }\n    }\n\n    ", "\n"], ["\n    position: relative;\n    width: 100%;\n\n    .shadowBox {\n        height: 48px;\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 0.5rem;\n        box-shadow: ", ";\n        display: ", ";\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n        }\n    }\n\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 0.5rem;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: var(--theme-bg-color);\n            border-radius: 0.5rem;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 54px 8px 24px;\n            color: var(--dark);\n            font: var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            transition: all 0.2s ease;\n\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n\n            &:disabled {\n                ", ";\n                background-color: var(--dark-opacity-5);\n            }\n        }\n\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        padding: 0;\n        border-radius: 0.5rem;\n        background: var(--theme-bg-color);\n        box-sizing: border-box;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n        &:before{\n            content: \"\";\n            height: calc(100% + 48px);\n            position: absolute;\n            width: calc(100% - 10px);\n            left: 50%;\n            bottom: 0;\n            transform: translateX(-50%);\n            border-radius: inherit;\n            box-shadow: ", ";\n            user-select: none;\n            pointer-events: none;\n            @media only screen and ", " {\n                box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n            }\n        }\n\n        .resultListInner {\n            position: relative;\n            overflow-y: auto;\n            overflow-x: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\n            max-height: 408px;\n            padding: 1.5rem;\n            background-color: var(--theme-bg-color);\n            z-index: 1;\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\n            .productCard {\n                border-radius: 0.5rem;\n                transition: all 0.2s ease;\n                outline: none;\n\n                &:is(.selected) {\n                    background: var(--dark-opacity-3);\n                }\n\n                &:focus-visible {\n                    box-shadow: 0 0 0 2px var(--primary-opacity-20);\n                }\n            }\n\n            ", "\n\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 256px;\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, function (props) { return props.$showResultList ? "none" : "block"; }, devices_1.devices.xl, disabledStyles, function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, devices_1.devices.xl, function (props) { return props.$size === "small" && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                row-gap: 0.5rem;\n                max-height: 256px;\n            "], ["\n                row-gap: 0.5rem;\n                max-height: 256px;\n            "]))); }, devices_1.devices.xl, function (props) { return props.$disabled && disabledStyles; });
 exports.LoadingStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"], ["\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;