krl-alfred 1.77.9 → 1.77.11

package/dist/components/Dropdown/Dropdown.js

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

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

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

package/dist/components/Dropdown/props.js

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

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

@@ -40,7 +40,7 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
             return "1rem";
     }
 });
-exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-right: 1rem;\n  color: ", ";\n  svg{\n    display: block;\n  }\n"], ["\n  display: block;\n  margin-right: 1rem;\n  color: ", ";\n  svg{\n    display: block;\n  }\n"])), function (props) {
+exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-right: 1rem;\n  color: ", ";\n  *{\n    display: block;\n  }\n"], ["\n  display: block;\n  margin-right: 1rem;\n  color: ", ";\n  *{\n    display: block;\n  }\n"])), function (props) {
     switch (props.$variant) {
         case 'primary':
             return "var(--dark)";
@@ -52,7 +52,7 @@ exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templ
 });
 exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  flex: 1 0;\n"], ["\n  position: relative;\n  flex: 1 0;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"], ["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"])));
-exports.LinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-left: 1rem;\n"], ["\n  display: block;\n  margin-left: 1rem;\n"])));
+exports.LinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-left: 1rem;\n  *{\n    display: block;\n  }\n"], ["\n  display: block;\n  margin-left: 1rem;\n  *{\n    display: block;\n  }\n"])));
 exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font: ", ";\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  font: ", ";\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"])), function (props) {
     switch (props.$size) {
         case 'small':

package/dist/components/PaymentCart/PaymentCart.js

@@ -49,7 +49,7 @@ var PaymentCart = function (props) {
         }
         setPaymentDropdownList(list);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.PaymentCartStyled, __assign({ "$checked": props.checked, htmlFor: props.id }, { children: [(0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.LeftFrame, { children: [props.isShowRadio && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.RadioButtonWrapper, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", name: props.name, value: props.value }) })), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.ImageWrapper, { children: props.cartIcon }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.Title, { children: [props.titlePrefix && (0, jsx_runtime_1.jsx)("span", { children: props.titlePrefix }), (0, jsx_runtime_1.jsx)("span", { children: props.title })] })] }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.RightFrame, { children: [props.badgeText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: props.badgeText, layout: "text", variant: props.badgeVariant }) })), props.infoText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipWrapper, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "bottomRight", popupWidth: "147px", iconWidth: "24px", iconHeight: "24px", popupRight: "-8px" }, { children: (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipDescription, { children: props.infoText }) })) })), props.isShowTextLink && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.onClickTextLink }, { children: props.textLinkText })) })), props.isShowDropdown && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: paymentDropdownList, isShowTopChevron: false, toggle: function () { return (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); } }) }))] })] })));
+    return ((0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.PaymentCartStyled, __assign({ "$checked": props.checked, htmlFor: props.id }, { children: [(0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.LeftFrame, { children: [props.isShowRadio && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.RadioButtonWrapper, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", name: props.name, value: props.value }) })), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.ImageWrapper, { children: props.cartIcon }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.Title, { children: [props.titlePrefix && (0, jsx_runtime_1.jsx)("span", { children: props.titlePrefix }), (0, jsx_runtime_1.jsx)("span", { children: props.title })] })] }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.RightFrame, { children: [props.badgeText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.BadgeWrapper, __assign({ "$isHideMobileBadge": props.isHideMobileBadge }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: props.badgeText, layout: "text", variant: props.badgeVariant }) }))), props.infoText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipWrapper, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "147px", iconWidth: "24px", iconHeight: "24px", popupRight: "-8px" }, { children: (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipDescription, { children: props.infoText }) })) })), props.isShowTextLink && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.onClickTextLink }, { children: props.textLinkText })) })), props.isShowDropdown && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: paymentDropdownList, isShowTopChevron: false, toggle: function () { return (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary" }) }))] })] })));
 };
 PaymentCart.defaultProps = {
     badgeText: "Badge text",
@@ -59,5 +59,6 @@ PaymentCart.defaultProps = {
     isShowDropdown: true,
     isShowRadio: false,
     checked: false,
+    isHideMobileBadge: true,
 };
 exports.default = PaymentCart;

package/dist/components/PaymentCart/PaymentCart.styled.js

@@ -9,11 +9,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButtonWrapper = exports.TextLinkWrapper = exports.TooltipDescription = exports.Title = exports.DropdownToggleButton = exports.DropdownWrapper = exports.TooltipWrapper = exports.BadgeWrapper = exports.RightFrame = exports.LeftFrame = exports.ImageWrapper = exports.PaymentCartStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
 exports.PaymentCartStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border : 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    padding: 1rem 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    ", ";\n"], ["\n    border : 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    padding: 1rem 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    ", ";\n"])), function (props) { return props.$checked && "\n        &:before{\n            content : \"\";\n            position: absolute;\n            user-select: none;\n            pointer-events: none;\n            border-radius: inherit;\n            border: 2px solid var(--primary);\n            inset:-1px;\n        }\n    "; });
 exports.ImageWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n    vertical-align: middle;\n    height: 22px;\n    margin-right: 0.5rem;\n"], ["\n    display: inline-block;\n    vertical-align: middle;\n    height: 22px;\n    margin-right: 0.5rem;\n"])));
 exports.LeftFrame = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"])));
 exports.RightFrame = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n"])));
-exports.BadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    \n"], ["\n    \n"])));
+exports.BadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", ";\n"], ["\n    ", ";\n"])), function (props) { return props.$isHideMobileBadge && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n            display: none;\n        }\n    "); });
 exports.TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-left: 1rem;\n"], ["\n    margin-left: 1rem;\n"])));
 exports.DropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-left: 1rem;\n"], ["\n    margin-left: 1rem;\n"])));
 exports.DropdownToggleButton = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0;\n    background: none;\n    color: var(--primary);\n"], ["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0;\n    background: none;\n    color: var(--primary);\n"])));

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js

@@ -14,12 +14,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardHorizontalSm_styled_1 = require("./ProductCardHorizontalSm.styled");
 var ProductCardHorizontalSm = function (props) {
-    var image = props.image, title = props.title, price = props.price, period = props.period;
+    var image = props.image, title = props.title, price = props.price, period = props.period, priceSm = props.priceSm;
     var LinkComponent = function (_a) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
     };
-    return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": props.period, "$hasImageBorder": props.hasImageBorder, "$imageWidth": props.imageWidth, "$imageHeight": props.imageHeight }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalSmWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: period })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price }))] })) })] })) })) })));
+    return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": props.period, "$hasImageBorder": props.hasImageBorder, "$imageWidth": props.imageWidth, "$imageHeight": props.imageHeight }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalSmWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: period })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }))] })) })] })) })) })));
 };
 ProductCardHorizontalSm.defaultProps = {};
 exports.default = ProductCardHorizontalSm;

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

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductCardHorizontalSmStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: var(--dark);\n    padding: 0 0.5rem;\n    transition: all .2s ease;\n    border-radius: 8px;\n    border: 1px solid var(--grey-10);\n\n    a {\n        text-decoration: none;\n        color: inherit;\n        &:hover{\n            .text {\n                .title {\n                    color: var(--primary-hover);\n                }\n            }\n        }\n    }\n\n    .horizontalSmWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        align-items: center;\n        height: 66px;\n        padding-right: 1rem;\n\n        .img {\n            border: ", ";\n            border-radius: 8px;\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\n            > * {\n                vertical-align: middle !important;\n            }\n        }\n\n        .text {\n            padding-right: ", ";\n            .title {\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-semi-bold-14-17);\n                transition: all .2s ease;\n            }\n        }\n\n        .priceContent {\n            text-align: end;\n\n            .period {\n                display: block;\n                margin-bottom: 4px;\n                font:var(--body-regular-14-17);\n            }\n\n            .price {\n                display: block;\n                font:var(--title-extra-bold-16-19);\n            }\n        }\n    }\n"], ["\n    color: var(--dark);\n    padding: 0 0.5rem;\n    transition: all .2s ease;\n    border-radius: 8px;\n    border: 1px solid var(--grey-10);\n\n    a {\n        text-decoration: none;\n        color: inherit;\n        &:hover{\n            .text {\n                .title {\n                    color: var(--primary-hover);\n                }\n            }\n        }\n    }\n\n    .horizontalSmWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        align-items: center;\n        height: 66px;\n        padding-right: 1rem;\n\n        .img {\n            border: ", ";\n            border-radius: 8px;\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\n            > * {\n                vertical-align: middle !important;\n            }\n        }\n\n        .text {\n            padding-right: ", ";\n            .title {\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-semi-bold-14-17);\n                transition: all .2s ease;\n            }\n        }\n\n        .priceContent {\n            text-align: end;\n\n            .period {\n                display: block;\n                margin-bottom: 4px;\n                font:var(--body-regular-14-17);\n            }\n\n            .price {\n                display: block;\n                font:var(--title-extra-bold-16-19);\n            }\n        }\n    }\n"])), function (props) { return props.$hasImageBorder ? '1px solid var(--dark-opacity-5)' : 'none'; }, function (props) { return props.$imageWidth ? props.$imageWidth : '71px'; }, function (props) { return props.$imageHeight ? props.$imageHeight : '50px'; }, function (props) { return props.$period ? "2rem" : "0"; });
+exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: var(--dark);\n    padding: 0 0.5rem;\n    transition: all .2s ease;\n    border-radius: 8px;\n    border: 1px solid var(--grey-10);\n\n    a {\n        text-decoration: none;\n        color: inherit;\n        &:hover{\n            .text {\n                .title {\n                    color: var(--primary-hover);\n                }\n            }\n        }\n    }\n\n    .horizontalSmWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        align-items: center;\n        height: 66px;\n        padding-right: 1rem;\n\n        .img {\n            border: ", ";\n            border-radius: 8px;\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\n            > * {\n                vertical-align: middle !important;\n            }\n        }\n\n        .text {\n            padding-right: ", ";\n            .title {\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-semi-bold-14-17);\n                transition: all .2s ease;\n            }\n        }\n\n        .priceContent {\n            text-align: end;\n\n            .period {\n                display: block;\n                margin-bottom: 4px;\n                font:var(--body-regular-14-17);\n            }\n\n            .price {\n                display: block;\n                font:var(--title-extra-bold-16-19);\n                small {\n                    font: var(--body-bold-14-17);\n                }\n            }\n        }\n    }\n"], ["\n    color: var(--dark);\n    padding: 0 0.5rem;\n    transition: all .2s ease;\n    border-radius: 8px;\n    border: 1px solid var(--grey-10);\n\n    a {\n        text-decoration: none;\n        color: inherit;\n        &:hover{\n            .text {\n                .title {\n                    color: var(--primary-hover);\n                }\n            }\n        }\n    }\n\n    .horizontalSmWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        align-items: center;\n        height: 66px;\n        padding-right: 1rem;\n\n        .img {\n            border: ", ";\n            border-radius: 8px;\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\n            > * {\n                vertical-align: middle !important;\n            }\n        }\n\n        .text {\n            padding-right: ", ";\n            .title {\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-semi-bold-14-17);\n                transition: all .2s ease;\n            }\n        }\n\n        .priceContent {\n            text-align: end;\n\n            .period {\n                display: block;\n                margin-bottom: 4px;\n                font:var(--body-regular-14-17);\n            }\n\n            .price {\n                display: block;\n                font:var(--title-extra-bold-16-19);\n                small {\n                    font: var(--body-bold-14-17);\n                }\n            }\n        }\n    }\n"])), function (props) { return props.$hasImageBorder ? '1px solid var(--dark-opacity-5)' : 'none'; }, function (props) { return props.$imageWidth ? props.$imageWidth : '71px'; }, function (props) { return props.$imageHeight ? props.$imageHeight : '50px'; }, function (props) { return props.$period ? "2rem" : "0"; });
 var templateObject_1;

package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js

@@ -27,7 +27,8 @@ exports.Default = {
     args: {
         title: "Apple İpad Air WİFİ 64GB (2020)",
         description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
-        price: "12.545,24 TL",
+        price: "12.545",
+        priceSm: ",24 TL",
         component: function (_a) {
             var children = _a.children;
             return (0, jsx_runtime_1.jsx)("a", __assign({ href: "test" }, { children: children }));

package/dist/components/RadioButton/layouts/boxed/Boxed.styled.js

@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
 var devices_1 = require("../../../../constants/devices");
-exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: pointer;\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n      \n    &:checked {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n    &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 1px solid var(--primary-hover);\n        }\n      }\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0;\n    display: block;\n    text-align: center;\n\n    @media only screen and ", " {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      .labelSm{\n        font:var(--title-regular-16-19);\n          margin-left: 0.25rem;\n      }\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        &:before{\n          content: \" / \";\n          display: inline;\n        }\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\n      }\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: pointer;\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n      \n    &:checked {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n    &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 1px solid var(--primary-hover);\n        }\n      }\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0;\n    display: block;\n    text-align: center;\n\n    @media only screen and ", " {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      .labelSm{\n        font:var(--title-regular-16-19);\n          margin-left: 0.25rem;\n      }\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        &:before{\n          content: \" / \";\n          display: inline;\n        }\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\n      }\n  }\n"])), devices_1.devices.lg, function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
+exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: pointer;\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n      \n    &:checked {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n    &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 1px solid var(--primary-hover);\n        }\n      }\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 4px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0;\n    display: grid;\n    text-align: center;\n\n    @media only screen and ", " {\n       //display: flex;\n       //align-items: center;\n       //justify-content: center;\n        row-gap: 4px;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      .labelSm{\n        font:var(--body-regular-14-17);\n        margin-left: 0.25rem;\n      }\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\n      }\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: pointer;\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n      \n    &:checked {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n    &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 1px solid var(--primary-hover);\n        }\n      }\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 4px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0;\n    display: grid;\n    text-align: center;\n\n    @media only screen and ", " {\n       //display: flex;\n       //align-items: center;\n       //justify-content: center;\n        row-gap: 4px;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      .labelSm{\n        font:var(--body-regular-14-17);\n        margin-left: 0.25rem;\n      }\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\n      }\n  }\n"])), devices_1.devices.lg, function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
     switch (props.size) {
         case 'small':
             return "16px";

package/dist/components/SelectBox/SelectBox.js

@@ -58,7 +58,7 @@ var async_1 = __importDefault(require("react-select/async"));
 var simplebar_react_1 = __importDefault(require("simplebar-react"));
 var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b, _c, _d;
-    var hasShowDropdownIcon = props.hasShowDropdownIcon, isAsync = props.isAsync, maxOptionListHeight = props.maxOptionListHeight, options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, hasShowSearchIcon = props.hasShowSearchIcon, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg, hasError = props.hasError, errorMessage = props.errorMessage, autoComplete = props.autoComplete, width = props.width, other = __rest(props, ["hasShowDropdownIcon", "isAsync", "maxOptionListHeight", "options", "name", "placeholder", "onChange", "isSearchable", "hasShowSearchIcon", "menuIsOpen", "filterOption", "instanceId", "lightBg", "hasError", "errorMessage", "autoComplete", "width"]);
+    var hasShowDropdownIcon = props.hasShowDropdownIcon, isAsync = props.isAsync, maxOptionListHeight = props.maxOptionListHeight, options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, hasShowSearchIcon = props.hasShowSearchIcon, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg, hasError = props.hasError, errorMessage = props.errorMessage, autoComplete = props.autoComplete, width = props.width, menuPlacement = props.menuPlacement, other = __rest(props, ["hasShowDropdownIcon", "isAsync", "maxOptionListHeight", "options", "name", "placeholder", "onChange", "isSearchable", "hasShowSearchIcon", "menuIsOpen", "filterOption", "instanceId", "lightBg", "hasError", "errorMessage", "autoComplete", "width", "menuPlacement"]);
     var simplebarRef = (0, react_1.useRef)(null);
     var formatOptionLabel = function (_a) {
         var _b, _c, _d;
@@ -74,13 +74,13 @@ var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
                 });
             }, 50);
         }
-        return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, __assign({ innerRef: innerRef, innerProps: innerProps, label: label, type: type, data: data, isDisabled: isDisabled, isFocused: isFocused, isSelected: isSelected, clearValue: clearValue, cx: cx, getStyles: getStyles, getClassNames: getClassNames, getValue: getValue, hasValue: hasValue, isMulti: isMulti, isRtl: isRtl, options: options, selectOption: selectOption, selectProps: selectProps, setValue: setValue, theme: theme, className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b), (_c = {}, _c["fixedBottom"] = data.isFixedBottom, _c), (_d = {}, _d["secondary"] = data.isSecondary, _d)) }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "left" }, { children: [((data === null || data === void 0 ? void 0 : data.optionLabel) || data.label) && (0, jsx_runtime_1.jsx)("strong", { children: (data === null || data === void 0 ? void 0 : data.optionLabel) || (data === null || data === void 0 ? void 0 : data.label) }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [data.price && (0, jsx_runtime_1.jsx)("strong", { children: data.price }), data.period && (0, jsx_runtime_1.jsx)("span", { children: data.period })] }))] }) })));
+        return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, __assign({ innerRef: innerRef, innerProps: innerProps, label: label, type: type, data: data, isDisabled: isDisabled, isFocused: isFocused, isSelected: isSelected, clearValue: clearValue, cx: cx, getStyles: getStyles, getClassNames: getClassNames, getValue: getValue, hasValue: hasValue, isMulti: isMulti, isRtl: isRtl, options: options, selectOption: selectOption, selectProps: selectProps, setValue: setValue, theme: theme, className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b), (_c = {}, _c["fixedBottom"] = data.isFixedBottom, _c), (_d = {}, _d["secondary"] = data.isSecondary, _d)) }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "left" }, { children: [((data === null || data === void 0 ? void 0 : data.optionLabel) || data.label) && (0, jsx_runtime_1.jsx)("strong", { children: (data === null || data === void 0 ? void 0 : data.optionLabel) || (data === null || data === void 0 ? void 0 : data.label) }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [data.price && (0, jsx_runtime_1.jsxs)("strong", { children: [data.price, data.priceSm && (0, jsx_runtime_1.jsx)("small", { children: data.priceSm })] }), data.period && (0, jsx_runtime_1.jsx)("span", { children: data.period })] }))] }) })));
     };
     var Input = function (props) { return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, __assign({}, props, { autoComplete: autoComplete })); };
     var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "3px", name: "ArrowDown", width: "16px", height: "16px" }) })); };
     var MenuList = function (props) {
         return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: props.children })) })));
     };
-    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": props.width, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable && hasShowSearchIcon, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_c = {}, _c['isSearchable'] = isSearchable && hasShowSearchIcon, _c), (_d = {}, _d['lightBg'] = lightBg, _d)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref }))) })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": props.width, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon, "$MenuPlacement": menuPlacement }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable && hasShowSearchIcon, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_c = {}, _c['isSearchable'] = isSearchable && hasShowSearchIcon, _c), (_d = {}, _d['lightBg'] = lightBg, _d)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref }))) })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 });
 exports.default = SelectBox;

package/dist/components/SelectBox/SelectBox.styled.js

@@ -12,5 +12,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        /*&:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }*/\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-14-17);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\n\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        /*&:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }*/\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-14-17);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\n\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.$maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
+var devices_1 = require("../../constants/devices");
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        /*&:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }*/\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n\n                @media only screen and ", " {\n                    background-color: transparent !important;\n                }\n            }\n              \n            &:active {\n              background-color: var(--dark-opacity-3);\n              \n              @media only screen and ", " {\n                background-color: transparent !important;\n              }\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                          small{\n                              font:var(--body-extra-bold-14-17);\n                          }\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-13-16);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\n\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        /*&:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }*/\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n\n                @media only screen and ", " {\n                    background-color: transparent !important;\n                }\n            }\n              \n            &:active {\n              background-color: var(--dark-opacity-3);\n              \n              @media only screen and ", " {\n                background-color: transparent !important;\n              }\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                          small{\n                              font:var(--body-extra-bold-14-17);\n                          }\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-13-16);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\n\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n  ", "\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.$maxOptionListHeight; }, devices_1.devices.lg, devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.$MenuPlacement === "top" ? "\n      .customSelect__menu {\n        border-radius: 8px 8px 0 0 !important;\n        top: auto !important;\n        bottom: 100% !important;\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-radius: 0 0 8px 8px !important;\n        }\n      }\n  " : ""; });
 var templateObject_1;

package/dist/components/SelectBox/stories/SelectBox.stories.js

@@ -23,11 +23,12 @@ exports.Default = {
         lightBg: true,
         label: "Label",
         name: "name",
-        //menuIsOpen: true,
+        menuIsOpen: true,
         options: SelectValues_json_1.default,
         width: "400px",
         hasError: false,
         errorMessage: "Error message.",
         maxOptionListHeight: "200px",
+        MenuPlacement: "top",
     },
 };

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -24,7 +24,7 @@ var ShoppingCartProduct = function (props) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
     };
-    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": props.discountRate, "$hasDisableActions": props.hasDisableActions, "$hasInsurance": !props.hasLoading && props.toggleInsurance }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: props.image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(props.oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.price })), props.period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(props.period) }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText &&
+    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": props.discountRate, "$hasDisableActions": props.hasDisableActions, "$hasInsurance": !props.hasLoading && props.toggleInsurance }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: props.image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [props.oldPrice, props.oldPriceSm && (0, jsx_runtime_1.jsx)("small", { children: props.oldPriceSm })] })), props.oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(props.oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [props.price, props.priceSm && (0, jsx_runtime_1.jsx)("small", { children: props.priceSm })] })), props.period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(props.period) }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText &&
                                             (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price" }, { children: [(0, jsx_runtime_1.jsx)("b", { dangerouslySetInnerHTML: { __html: props.insurancePrice } }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
 };
 ShoppingCartProduct.defaultProps = {

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js

@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      &:hover{\n        ~ .text{\n          .productCardTitle{\n            color: var(--primary-hover);\n          }\n        }\n      }\n    }\n    .text{\n      padding-right: 0.5rem;\n        a{\n          &:hover{\n            .productCardTitle{\n              color: var(--primary-hover);\n            }\n          }\n        }\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        font:var(--title-semi-bold-16-19);\n        transition: all .2s ease;\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: var(--grey-40);\n        display: block;\n        overflow: hidden;\n        font:var(--body-medium-13-16);\n        .productCardDeliveryDanger{\n          display: block;\n          color: var(--red);\n        }\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font:var(--body-extra-bold-13-16);\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 4px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price {\n            text-decoration: line-through;\n            font:var(--caption-semi-bold-11-13);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-11-13);\n          }\n        }\n\n        .newPrice {\n          .price {\n            font:var(--body-extra-bold-14-17);\n          }\n          .period {\n            font:var(--caption-regular-12-15);\n          }\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: ", ";\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        color: ", ";\n        font:var(--body-extra-bold-13-16);\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      font:var(--caption-semi-bold-12-15);\n      .price{\n        display: block;\n        margin: 0;\n        font:var(--caption-extra-bold-12-15);\n        b{\n          span{\n            font-weight: 400;\n          }\n        }\n        .quantity{\n          display: inline-block;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n    .actions{\n      width: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"], ["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      &:hover{\n        ~ .text{\n          .productCardTitle{\n            color: var(--primary-hover);\n          }\n        }\n      }\n    }\n    .text{\n      padding-right: 0.5rem;\n        a{\n          &:hover{\n            .productCardTitle{\n              color: var(--primary-hover);\n            }\n          }\n        }\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        font:var(--title-semi-bold-16-19);\n        transition: all .2s ease;\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: var(--grey-40);\n        display: block;\n        overflow: hidden;\n        font:var(--body-medium-13-16);\n        .productCardDeliveryDanger{\n          display: block;\n          color: var(--red);\n        }\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font:var(--body-extra-bold-13-16);\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 4px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price {\n            text-decoration: line-through;\n            font:var(--caption-semi-bold-11-13);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-11-13);\n          }\n        }\n\n        .newPrice {\n          .price {\n            font:var(--body-extra-bold-14-17);\n          }\n          .period {\n            font:var(--caption-regular-12-15);\n          }\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: ", ";\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        color: ", ";\n        font:var(--body-extra-bold-13-16);\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      font:var(--caption-semi-bold-12-15);\n      .price{\n        display: block;\n        margin: 0;\n        font:var(--caption-extra-bold-12-15);\n        b{\n          span{\n            font-weight: 400;\n          }\n        }\n        .quantity{\n          display: inline-block;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n    .actions{\n      width: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
+exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      &:hover{\n        ~ .text{\n          .productCardTitle{\n            color: var(--primary-hover);\n          }\n        }\n      }\n    }\n    .text{\n      padding-right: 0.5rem;\n        a{\n          &:hover{\n            .productCardTitle{\n              color: var(--primary-hover);\n            }\n          }\n        }\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        font:var(--title-semi-bold-16-19);\n        transition: all .2s ease;\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: var(--grey-40);\n        display: block;\n        overflow: hidden;\n        font:var(--body-medium-13-16);\n        .productCardDeliveryDanger{\n          display: block;\n          color: var(--red);\n        }\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font:var(--body-extra-bold-13-16);\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 4px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price {\n            text-decoration: line-through;\n            font:var(--caption-semi-bold-11-13);\n            small {\n              font: var(--caption-semi-bold-10-12);\n            }\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-11-13);\n          }\n        }\n\n        .newPrice {\n          .price {\n            font:var(--body-extra-bold-14-17);\n            small {\n              font: var(--caption-bold-12-15);\n            }\n          }\n          .period {\n            font:var(--caption-regular-12-15);\n          }\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: ", ";\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        color: ", ";\n        font:var(--body-extra-bold-13-16);\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      font:var(--caption-semi-bold-12-15);\n      .price{\n        display: block;\n        margin: 0;\n        font:var(--caption-extra-bold-12-15);\n        b{\n          span{\n            font-weight: 400;\n          }\n        }\n        .quantity{\n          display: inline-block;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n    .actions{\n      width: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"], ["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      &:hover{\n        ~ .text{\n          .productCardTitle{\n            color: var(--primary-hover);\n          }\n        }\n      }\n    }\n    .text{\n      padding-right: 0.5rem;\n        a{\n          &:hover{\n            .productCardTitle{\n              color: var(--primary-hover);\n            }\n          }\n        }\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        font:var(--title-semi-bold-16-19);\n        transition: all .2s ease;\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: var(--grey-40);\n        display: block;\n        overflow: hidden;\n        font:var(--body-medium-13-16);\n        .productCardDeliveryDanger{\n          display: block;\n          color: var(--red);\n        }\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font:var(--body-extra-bold-13-16);\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 4px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price {\n            text-decoration: line-through;\n            font:var(--caption-semi-bold-11-13);\n            small {\n              font: var(--caption-semi-bold-10-12);\n            }\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-11-13);\n          }\n        }\n\n        .newPrice {\n          .price {\n            font:var(--body-extra-bold-14-17);\n            small {\n              font: var(--caption-bold-12-15);\n            }\n          }\n          .period {\n            font:var(--caption-regular-12-15);\n          }\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: ", ";\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        color: ", ";\n        font:var(--body-extra-bold-13-16);\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      font:var(--caption-semi-bold-12-15);\n      .price{\n        display: block;\n        margin: 0;\n        font:var(--caption-extra-bold-12-15);\n        b{\n          span{\n            font-weight: 400;\n          }\n        }\n        .quantity{\n          display: inline-block;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n    .actions{\n      width: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
 exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __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  /*&:hover{\n    .popup{\n      opacity: 1;\n    }\n  }*/\n  &:disabled{\n    cursor: no-drop;\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: 0;\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    &: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  &:hover{\n    background-color : var(--primary);\n    color : white;\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  /*&:hover{\n    .popup{\n      opacity: 1;\n    }\n  }*/\n  &:disabled{\n    cursor: no-drop;\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: 0;\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    &: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  &:hover{\n    background-color : var(--primary);\n    color : white;\n  }\n"])));
 var templateObject_1, templateObject_2;

package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js

@@ -27,8 +27,10 @@ exports.Default = {
     args: {
         title: "Apple İpad Air WİFİ 64GB (2020)",
         deliveryText: "Tahmini teslim: 1 Ocak Pazar",
-        price: "12.545,24 TL",
-        oldPrice: "12.545,24 TL",
+        price: "12.545",
+        priceSm: ",24 TL",
+        oldPrice: "12.545",
+        oldPriceSm: ",24 TL",
         component: function (_a) {
             var children = _a.children;
             return (0, jsx_runtime_1.jsx)("a", __assign({ href: "/test" }, { children: children }));

package/dist/components/Tabs/TabItem.js

@@ -31,6 +31,6 @@ var TabItem = function (props) {
         if (props.isActive)
             setActiveContent(props.children);
     }, [props.isActive]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": props.isActive, onClick: onClickTab }, { children: props.title })) }, props.key));
+    return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$isDisabled": props.isDisabled }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": props.isActive, onClick: onClickTab }, { children: props.title })) }), props.key));
 };
 exports.default = TabItem;

package/dist/components/Tabs/Tabs.js

@@ -45,9 +45,7 @@ var TabItem_1 = __importDefault(require("./TabItem"));
 var Tabs = function (props) {
     var _a = (0, react_1.useState)(props.activeIndex || 0), activeIndex = _a[0], setActiveIndex = _a[1];
     var _b = (0, react_1.useState)(null), activeContent = _b[0], setActiveContent = _b[1];
-    var onActive = function (e) {
-        props.onActive(e);
-    };
+    var onActive = function (e) { return props.onActive(e); };
     var getTabsContext = (0, react_1.useCallback)(function (index) {
         var activateTab = function (nextIndex) {
             setActiveIndex(nextIndex);

package/dist/components/Tabs/Tabs.styled.js

@@ -11,7 +11,7 @@ exports.TabItemContentStyled = exports.TabItemTitleStyled = exports.TabItemStyle
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n"], ["\n    flex:1;\n"])));
 exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    column-gap: 1rem;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    column-gap: 1rem;\n"])));
-exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 1 0;\n"], ["\n    flex: 1 0;\n"])));
+exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 1 0;\n    ", "\n"], ["\n    flex: 1 0;\n    ", "\n"])), function (props) { return props.$isDisabled ? "\n        cursor: no-drop;\n        pointer-events: none;\n        user-select: none;\n    " : ""; });
 exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: transparent;\n    color:", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: 0;\n    height: 40px;\n    cursor:pointer;\n    font: var(--body-semi-bold-14-17);\n    &:hover{\n        color:var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    background: transparent;\n    color:", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: 0;\n    height: 40px;\n    cursor:pointer;\n    font: var(--body-semi-bold-14-17);\n    &:hover{\n        color:var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; });
 exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding-top: 1rem;\n"], ["\n    padding-top: 1rem;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/Tabs/stories/Tabs.stories.js

@@ -20,7 +20,7 @@ var Tabs_1 = __importDefault(require("../Tabs"));
 exports.default = {
     title: 'Components/Tabs',
     component: function (props) {
-        return ((0, jsx_runtime_1.jsxs)(Tabs_1.default, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 1" }, { children: "Tab 1" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 2" }, { children: "Tab 2" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 3" }, { children: "Tab 3" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 4" }, { children: "Tab 4" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 5" }, { children: "Tab 5" }))] })));
+        return ((0, jsx_runtime_1.jsxs)(Tabs_1.default, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 1" }, { children: "Tab 1" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 2" }, { children: "Tab 2" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 3" }, { children: "Tab 3" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 4" }, { children: "Tab 4" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ isDisabled: true, title: "Tab 5" }, { children: "Tab 5 (disabled)" }))] })));
     },
     tags: ['autodocs'],
     argTypes: {}

package/dist/jsons/SelectValues.json

@@ -2,7 +2,8 @@
     {
         "value": "chocolate",
         "label": "Chocolate",
-        "price": "1.250,00",
+        "price": "1.250",
+        "priceSm": ",00",
         "period": "/ay"
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.77.9",
+  "version": "1.77.11",
   "files": [
     "dist"
   ],