krl-alfred 1.76.35 → 1.76.37

package/dist/components/Button/Button.js

@@ -27,7 +27,7 @@ var Children = function (props) {
 };
 var Button = (0, react_1.forwardRef)(function (props, ref) {
     var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children, iconStrokeWidth = props.iconStrokeWidth;
-    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type, ref: ref }, { children: (0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })) })));
+    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref }, { children: (0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })) })));
 });
 Button.propTypes = {
     iconStrokeWidth: prop_types_1.default.string,

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

@@ -31,7 +31,7 @@ exports.IconStyled = exports.ButtonStyled = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--primary);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: var(--primary);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
         case 'small':
@@ -45,7 +45,7 @@ var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
 var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary);\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n    }\n  }\n\n \n\n  &:active {\n    color: var(--primary-press);\n    @media only screen and ", " {\n      color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary);\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n    }\n  }\n\n \n\n  &:active {\n    color: var(--primary-press);\n    @media only screen and ", " {\n      color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
         case 'small':
@@ -59,7 +59,7 @@ var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
 var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary);\n  border: 1px solid;\n  border-color: var(--primary);\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n\n    @media only screen and ", " {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n    border-color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary);\n  border: 1px solid;\n  border-color: var(--primary);\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n\n    @media only screen and ", " {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n    border-color: var(--dark-opacity-25);\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
         case 'small':
@@ -73,7 +73,7 @@ var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
 var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary);\n  border: 0;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary);\n      background-color: var(--primary-opacity-5);\n    }\n  }\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n\n    @media only screen and ", " {\n      color: var(--primary);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary);\n  border: 0;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary);\n      background-color: var(--primary-opacity-5);\n    }\n  }\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n\n    @media only screen and ", " {\n      color: var(--primary);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "var(--body-bold-13-16)";
         case 'small':
@@ -86,8 +86,8 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
-    switch (props.variant) {
+exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"])), function (props) { return props.$size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
+    switch (props.$variant) {
         case 'primary':
             return primary;
         case 'secondary':
@@ -100,7 +100,7 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (t
             return primary;
     }
 }, function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'big':
             return "56px;";
         case 'medium':
@@ -112,6 +112,6 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (t
         default:
             return "48px";
     }
-}, function (props) { return props.icon ? "10px" : "0"; });
+}, function (props) { return props.$icon ? "10px" : "0"; });
 exports.IconStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/CouponCode/CouponCode.js

@@ -29,7 +29,7 @@ var CouponCode = function (props) {
         setExpanded(props.expanded);
     }, [props.expanded]);
     var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
-    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "1.5px", name: "ArrowSmallDown", width: "24px", height: "24px" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant }, { children: props.buttonText }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant }, { children: props.buttonText }))] }))] })));
 };
 CouponCode.defaultProps = {
     title: "Title",

package/dist/components/Icon/ArrowSmallDown.js

@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var SvgArrowSmallDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10.668 6.66797L8.0013 9.33464L5.33464 6.66797", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+var SvgArrowSmallDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M16 10L12 14L8 10", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
 exports.default = SvgArrowSmallDown;

package/dist/components/Icon/ArrowSmallRight.js

@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var SvgArrowSmallRight = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10 8L14 12L10 16", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+var SvgArrowSmallRight = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 8L14 12L10 16", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8L14 12L10 16", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8L14 12L10 16", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
 exports.default = SvgArrowSmallRight;

package/dist/components/Icon/ArrowSmallUp.js

@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var SvgArrowSmallUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.33398 9.33594L8.00065 6.66927L10.6673 9.33594", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+var SvgArrowSmallUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8 14L12 10L16 14", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
 exports.default = SvgArrowSmallUp;

package/dist/components/Icon/Icon.js

@@ -16,7 +16,7 @@ var index_1 = require("./index");
 var Icon_styled_1 = require("./Icon.styled");
 var Icon = function (props) {
     var width = props.width, height = props.height, hasWrapper = props.hasWrapper, strokeWidth = props.strokeWidth, color = props.color;
-    return hasWrapper ? ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconWrapper, __assign({ width: width, height: height, strokeWidth: strokeWidth, color: color }, { children: index_1.iconList[props.name]({}) || (0, jsx_runtime_1.jsx)("div", {}) }))) : (index_1.iconList[props.name]({ width: width, height: height, color: color }) || (0, jsx_runtime_1.jsx)("div", {}));
+    return hasWrapper ? ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconWrapper, __assign({ "$width": width, "$height": height, "$strokeWidth": strokeWidth, "$color": color }, { children: index_1.iconList[props.name]({}) || (0, jsx_runtime_1.jsx)("div", {}) }))) : (index_1.iconList[props.name]({ width: width, height: height, color: color }) || (0, jsx_runtime_1.jsx)("div", {}));
 };
 Icon.defaultProps = {
     hasWrapper: true

package/dist/components/Icon/Icon.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconWrapper = exports.IconStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.IconStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;\n  gap: 50px 20px;\n  .item{\n    text-align: center;\n    .title{\n      display: block;\n      margin-top: 10px;\n      font:var(--body-regular-14-17);\n    }\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;\n  gap: 50px 20px;\n  .item{\n    text-align: center;\n    .title{\n      display: block;\n      margin-top: 10px;\n      font:var(--body-regular-14-17);\n    }\n  }\n"])));
-exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n    vertical-align: middle;\n    svg{\n        display: block;\n        width: ", ";\n        height: ", ";\n        path,circle,rect{\n            color: ", ";\n            &[stroke-width]{\n                stroke-width: ", ";\n            }\n        }\n    }\n"], ["\n    display: inline-block;\n    vertical-align: middle;\n    svg{\n        display: block;\n        width: ", ";\n        height: ", ";\n        path,circle,rect{\n            color: ", ";\n            &[stroke-width]{\n                stroke-width: ", ";\n            }\n        }\n    }\n"])), function (props) { return props.width; }, function (props) { return props.height; }, function (props) { return props.color; }, function (props) { return props.strokeWidth; });
+exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n    vertical-align: middle;\n    svg{\n        display: block;\n        width: ", ";\n        height: ", ";\n        path,circle,rect{\n            color: ", ";\n            &[stroke-width]{\n                stroke-width: ", ";\n            }\n        }\n    }\n"], ["\n    display: inline-block;\n    vertical-align: middle;\n    svg{\n        display: block;\n        width: ", ";\n        height: ", ";\n        path,circle,rect{\n            color: ", ";\n            &[stroke-width]{\n                stroke-width: ", ";\n            }\n        }\n    }\n"])), function (props) { return props.$width; }, function (props) { return props.$height; }, function (props) { return props.$color; }, function (props) { return props.$strokeWidth; });
 var templateObject_1, templateObject_2;

package/dist/components/Icon/InstagramNegativeFilled.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgInstagramNegativeFilled = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.7422 21.0001H7.25778C4.90569 21.0001 3 18.5554 3 15.5395V8.46061C3 5.44476 4.90569 3 7.25778 3H16.7422C19.0943 3 21 5.44476 21 8.46061V15.5395C21 18.5554 19.0943 21.0001 16.7422 21.0001Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.5391 6.80998L16.5391 6.80998L16.54 6.80809C16.571 6.73753 16.5999 6.69019 16.6574 6.63231C16.7068 6.59037 16.7521 6.56032 16.8148 6.53179C17.0023 6.46148 17.2237 6.51197 17.3509 6.63904L17.3508 6.63905L17.3534 6.64159C17.3735 6.66141 17.3933 6.68464 17.4103 6.70808C17.4226 6.72525 17.4311 6.73924 17.4363 6.74866L17.451 6.78639L17.4553 6.79735L17.46 6.80809C17.486 6.86646 17.5 6.9321 17.5 7.00049C17.5 7.1214 17.4561 7.24191 17.3489 7.3579C17.2703 7.43497 17.1689 7.48336 17.06 7.49642L17.0002 7.49938L16.9431 7.4965C16.9057 7.49171 16.8609 7.48087 16.7988 7.45647C16.7373 7.42836 16.6906 7.39706 16.6427 7.34923C16.5483 7.24686 16.5 7.12056 16.5 7.00049C16.5 6.93155 16.5142 6.86598 16.5391 6.80998ZM16.0823 6.60681C16.1368 6.48285 16.2014 6.37829 16.3182 6.26456L16.0823 6.60681Z", stroke: "#FAF7FF" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.0001 12.182C8.9991 13.935 10.4301 15.369 12.1801 15.368C13.9271 15.366 15.3541 13.938 15.3571 12.189C15.3601 10.433 13.9341 9.002 12.1821 9C10.4201 8.998 8.9861 10.453 9.0001 12.182Z", fill: "#FAF7FF", stroke: "#FAF7FF", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+exports.default = SvgInstagramNegativeFilled;

package/dist/components/Icon/RadioButtonElementInvalid.js

@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var SvgRadioButtonElementInvalid = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5ZM8 14.5C11.3137 14.5 14 11.8137 14 8.5C14 5.18629 11.3137 2.5 8 2.5C4.68629 2.5 2 5.18629 2 8.5C2 11.8137 4.68629 14.5 8 14.5Z", fill: "currentColor" }) }))); };
+var SvgRadioButtonElementInvalid = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5ZM8 14.5C11.3137 14.5 14 11.8137 14 8.5C14 5.18629 11.3137 2.5 8 2.5C4.68629 2.5 2 5.18629 2 8.5C2 11.8137 4.68629 14.5 8 14.5Z", fill: "currentColor" }) }))); };
 exports.default = SvgRadioButtonElementInvalid;

package/dist/components/Icon/index.js

@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.BoxLeft = exports.BoxDown = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
 exports.House = exports.Home = exports.Hide = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Closemini = exports.CloseSquare = exports.CloseMiniHover = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.CargoBack = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = exports.Calendar = void 0;
-exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = exports.PoweredByQnbLogo = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NoHiddenCost = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading2 = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = void 0;
-exports.HeartArrow = exports.Grid = exports.FacebookStroke = exports.Confetti = exports.Youtube = exports.Work = exports.Whatsapp = exports.WaveLoading = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = void 0;
-exports.iconList = exports.Visa = exports.TwitterStroke = exports.Pointinghand = exports.PointFinger = exports.Plant = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Lgbt = void 0;
+exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = exports.PoweredByQnbLogo = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NoHiddenCost = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading2 = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegativeFilled = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = void 0;
+exports.Grid = exports.FacebookStroke = exports.Confetti = exports.Youtube = exports.Work = exports.Whatsapp = exports.WaveLoading = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = void 0;
+exports.iconList = exports.Visa = exports.TwitterStroke = exports.Pointinghand = exports.PointFinger = exports.Plant = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Lgbt = exports.HeartArrow = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Activity_1 = __importDefault(require("./Activity"));
 Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -239,6 +239,8 @@ var InfoSquare_1 = __importDefault(require("./InfoSquare"));
 Object.defineProperty(exports, "InfoSquare", { enumerable: true, get: function () { return InfoSquare_1.default; } });
 var InstagramNegative_1 = __importDefault(require("./InstagramNegative"));
 Object.defineProperty(exports, "InstagramNegative", { enumerable: true, get: function () { return InstagramNegative_1.default; } });
+var InstagramNegativeFilled_1 = __importDefault(require("./InstagramNegativeFilled"));
+Object.defineProperty(exports, "InstagramNegativeFilled", { enumerable: true, get: function () { return InstagramNegativeFilled_1.default; } });
 var Keyboard_1 = __importDefault(require("./Keyboard"));
 Object.defineProperty(exports, "Keyboard", { enumerable: true, get: function () { return Keyboard_1.default; } });
 var KeyboardClose_1 = __importDefault(require("./KeyboardClose"));
@@ -868,6 +870,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(InstagramNegative_1.default, __assign({}, props));
     },
+    InstagramNegativeFilled: function (_a) {
+        var props = __rest(_a, []);
+        return ((0, jsx_runtime_1.jsx)(InstagramNegativeFilled_1.default, __assign({}, props)));
+    },
     Keyboard: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Keyboard_1.default, __assign({}, props));

package/dist/components/Icon/stories/Icons.stories.js

@@ -20,8 +20,9 @@ var index_1 = require("../index");
 var Icon_styled_1 = require("../Icon.styled");
 var Icon_1 = __importDefault(require("../Icon"));
 var IconStoryList = function (props) {
+    var color = props.color, strokeWidth = props.strokeWidth, width = props.width, height = props.height;
     return ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconStyled, { children: Object.entries(index_1.iconList).map(function (value, key) {
-            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'item' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, props, { name: value[0] })) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: value[0] }))] })));
+            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'item' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: value[0], color: color, strokeWidth: strokeWidth, width: width, height: height }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: value[0] }))] })));
         }) }));
 };
 exports.default = {

package/dist/components/Input/Input.js

@@ -35,7 +35,7 @@ var react_number_format_1 = require("react-number-format");
 var react_i18next_1 = require("react-i18next");
 var Input = function (props) {
     var _a;
-    var type = props.type, other = __rest(props, ["type"]);
+    var type = props.type, hasError = props.hasError, other = __rest(props, ["type", "hasError"]);
     var _b = (0, react_1.useState)(type), inputType = _b[0], setInputType = _b[1];
     var _c = (0, react_1.useState)(false), alert = _c[0], setAlert = _c[1];
     var inputRef = (0, react_1.useRef)(null);
@@ -61,7 +61,7 @@ var Input = function (props) {
         inputRef.current.blur();
     };
     return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ width: props.width }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick }, { children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(props.mask && props.format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({}, props, { format: props.format, mask: props.mask, customInput: Input_styled_1.InputStyled })))
-                        : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) })), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ visible: alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.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: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
+                        : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) })), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ visible: alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.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: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
 };
 Input.defaultValues = {
     hasError: false,

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

@@ -11,5 +11,5 @@ exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.visible ? '1' : '0'; });
 exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
+exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Modal/Modal.js

@@ -35,6 +35,7 @@ var Divider_1 = __importDefault(require("../Divider"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var react_i18next_1 = require("react-i18next");
 var Modal = function (props) {
+    var size = props.size, showCloseIcon = props.showCloseIcon, showBackIcon = props.showBackIcon, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, onBack = props.onBack, show = props.show, showDivider = props.showDivider, title = props.title, children = props.children, modalFooter = props.modalFooter, showPrimaryButton = props.showPrimaryButton, showSecondaryButton = props.showSecondaryButton, onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, buttonsAlignment = props.buttonsAlignment, buttonsAlignmentOnMobile = props.buttonsAlignmentOnMobile, primaryButtonText = props.primaryButtonText, secondaryButtonText = props.secondaryButtonText, showHeaderBorder = props.showHeaderBorder, showFooterBorder = props.showFooterBorder, autoHeight = props.autoHeight, titleAlignment = props.titleAlignment, titleDescription = props.titleDescription, isPrimaryButtonLoading = props.isPrimaryButtonLoading, primaryButtonIcon = props.primaryButtonIcon, secondaryButtonIcon = props.secondaryButtonIcon, isSecondaryButtonLoading = props.isSecondaryButtonLoading, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isSecondaryButtonDisabled = props.isSecondaryButtonDisabled, primaryButtonWidth = props.primaryButtonWidth, primaryButtonIconStrokeWidth = props.primaryButtonIconStrokeWidth, secondaryButtonWidth = props.secondaryButtonWidth, secondaryButtonIconStrokeWidth = props.secondaryButtonIconStrokeWidth, customContent = props.customContent, other = __rest(props, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "primaryButtonIconStrokeWidth", "secondaryButtonWidth", "secondaryButtonIconStrokeWidth", "customContent"]);
     var uniqueId = (0, react_1.useId)();
     var t = (0, react_i18next_1.useTranslation)().t;
     var _a = (0, react_1.useState)(props.show), showModal = _a[0], setShowModal = _a[1];
@@ -54,11 +55,10 @@ var Modal = function (props) {
         setShowModal(false);
         (props === null || props === void 0 ? void 0 : props.onClose) && props.onClose();
     };
-    var onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, onBack = props.onBack, other = __rest(props, ["onPrimaryAction", "onSecondaryAction", "onBack"]);
     var modalRef = (0, react_1.useRef)();
     (0, useOnClickOutside_1.default)(modalRef, props.onClose, props.hasCloseOnOutsideClick);
     return (showModal &&
-        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) }))) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { children: props.title })), props.titleDescription && (0, jsx_runtime_1.jsx)("p", { children: props.titleDescription })] })), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: props.children })) })), props.modalFooter ? props.modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, icon: props.primaryButtonIcon, iconStrokeWidth: props.primaryButtonIconStrokeWidth }, { children: props.primaryButtonText }))), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && props.showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, icon: props.secondaryButtonIcon, iconStrokeWidth: props.secondaryButtonIconStrokeWidth }, { children: props.secondaryButtonText }))] }))] })) })] })) }), document.body));
+        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": props.size, "$autoHeight": props.autoHeight, "$showHeaderBorder": props.showHeaderBorder, "$titleAlignment": props.titleAlignment, "$customContent": props.customContent, "$showFooterBorder": props.showFooterBorder, "$buttonsAlignment": props.buttonsAlignment, "$showSecondaryButton": props.showSecondaryButton, "$showDivider": props.showDivider, "$buttonsAlignmentOnMobile": props.buttonsAlignmentOnMobile }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) }))) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { children: props.title })), props.titleDescription && (0, jsx_runtime_1.jsx)("p", { children: props.titleDescription })] })), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: props.children })) })), props.modalFooter ? props.modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, icon: props.primaryButtonIcon, iconStrokeWidth: props.primaryButtonIconStrokeWidth }, { children: props.primaryButtonText }))), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && props.showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, icon: props.secondaryButtonIcon, iconStrokeWidth: props.secondaryButtonIconStrokeWidth }, { children: props.secondaryButtonText }))] }))] })) })] })) }), document.body));
 };
 exports.default = Modal;
 Modal.defaultProps = {

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

@@ -11,7 +11,7 @@ exports.OverlayStyled = exports.ModalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    scrollbar-color: var(--dark-opacity-10) white;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\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    [data-simplebar] {\n      .simplebar-track.simplebar-vertical {\n        width: 9px !important;\n      }\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    scrollbar-color: var(--dark-opacity-10) white;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\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    [data-simplebar] {\n      .simplebar-track.simplebar-vertical {\n        width: 9px !important;\n      }\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xxsmall':
             return "311px";
         case 'xsmall':
@@ -25,15 +25,15 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
         default:
             return "462px";
     }
-}, function (props) { return !props.autoHeight && "\n      @media only screen and ".concat(devices_1.devices.sm, " {\n        display: grid;\n        height: 100dvh;\n        align-content: space-between;\n        border-radius: 0;\n        width: 100%;\n        max-width: 100%;\n        max-height: initial;\n      }\n  "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.customContent ? '0' : '0 24px'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
-    switch (props.buttonsAlignment) {
+}, function (props) { return !props.$autoHeight && "\n      @media only screen and ".concat(devices_1.devices.sm, " {\n        display: grid;\n        height: 100dvh;\n        align-content: space-between;\n        border-radius: 0;\n        width: 100%;\n        max-width: 100%;\n        max-height: initial;\n      }\n  "); }, function (props) { return props.$showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.$customContent ? '0' : '0 24px'; }, function (props) { return props.$showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
+    switch (props.$buttonsAlignment) {
         case 'horizontal':
-            return "\n            justify-content: flex-start;\n            flex-direction: row-reverse;\n            gap: 0;\n            button {\n              + button{\n                margin-right: ".concat((props.size === 'small' ? '16px' : '24px'), ";\n                @media only screen and ").concat(devices_1.devices.sm, " {\n                  margin-right: 16px;\n                }\n              }\n            }\n            @media only screen and ").concat(devices_1.devices.sm, " {\n              button {\n                flex: 1 1 0;\n                &:is(:nth-child(1)) {\n                  min-width: ").concat((props.showSecondaryButton ? 'initial' : 'calc(100% - 3rem)'), ";\n                  white-space: nowrap;\n                  box-sizing: content-box;\n                }\n                + button {\n                  margin-right: 1rem;\n                }\n              }\n            }\n          ");
+            return "\n            justify-content: flex-start;\n            flex-direction: row-reverse;\n            gap: 0;\n            button {\n              + button{\n                margin-right: ".concat((props.$size === 'small' ? '16px' : '24px'), ";\n                @media only screen and ").concat(devices_1.devices.sm, " {\n                  margin-right: 16px;\n                }\n              }\n            }\n            @media only screen and ").concat(devices_1.devices.sm, " {\n              button {\n                flex: 1 1 0;\n                &:is(:nth-child(1)) {\n                  min-width: ").concat((props.$showSecondaryButton ? 'initial' : 'calc(100% - 3rem)'), ";\n                  white-space: nowrap;\n                  box-sizing: content-box;\n                }\n                + button {\n                  margin-right: 1rem;\n                }\n              }\n            }\n          ");
         case 'vertical':
-            return "\n            justify-content: space-between;\n            flex-direction: column;\n            gap: ".concat(props.showDivider ? '0.5rem' : '1rem', ";\n          ");
+            return "\n            justify-content: space-between;\n            flex-direction: column;\n            gap: ".concat(props.$showDivider ? '0.5rem' : '1rem', ";\n          ");
         default:
             return "";
     }
-}, devices_1.devices.md, function (props) { return props.buttonsAlignmentOnMobile === 'vertical' ? "\n        flex-direction : column;\n        button {\n          margin : 0 !important;\n          + button {\n            margin-top:1rem !important;\n          }\n        }\n    " : " "; });
+}, devices_1.devices.md, function (props) { return props.$buttonsAlignmentOnMobile === 'vertical' ? "\n        flex-direction : column;\n        button {\n          margin : 0 !important;\n          + button {\n            margin-top:1rem !important;\n          }\n        }\n    " : " "; });
 exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"], ["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"])));
 var templateObject_1, templateObject_2;

package/dist/components/ProductCardVertical/ProductCardVertical.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ProductCardVertical_styled_1 = require("./ProductCardVertical.styled");
+var react_i18next_1 = require("react-i18next");
+var Badges_1 = __importDefault(require("../Badges"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var ProductCardVertical = function (props) {
+    var title = props.title, description = props.description, hasDiscount = props.hasDiscount, price = props.price, oldPrice = props.oldPrice, oldPricePeriod = props.oldPricePeriod, slug = props.slug, period = props.period, discountRate = props.discountRate, isResponsive = props.isResponsive, image = props.image, component = props.component, other = __rest(props, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "component"]);
+    var t = (0, react_i18next_1.useTranslation)().t;
+    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)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": props.isResponsive, "$discountRate": props.discountRate }, other, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [hasDiscount && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: t("discount") }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", oldPricePeriod] }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", period] }))] }))] })] }))] }))] })) })));
+};
+ProductCardVertical.propTypes = {
+    isResponsive: prop_types_1.default.bool,
+};
+ProductCardVertical.defaultProps = {
+    isResponsive: false,
+};
+exports.default = ProductCardVertical;

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

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductCardVerticalStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
+exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  border-radius: 0.5rem;\n  min-width: 240px;\n  padding: 1rem;\n  transition: all .2s ease;\n  position: relative;\n  box-sizing: border-box;\n  .cartBadge{\n    position: absolute;\n    left: 8px;\n    top: 8px;\n    z-index: 2;\n  }\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n\n  .img {\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    background: #FFF;\n    position: relative;\n    overflow: hidden;\n    height: 150px;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    > * {\n      width: 100%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    *{    \n      height: calc(100% - 0.5rem) !important;\n      aspect-ratio: 1 / 1 !important;\n    }\n  }\n  .productCardContent{ \n    padding: 1rem 0 0.5rem 0;\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 38px;\n      word-break: break-word;\n      font: var(--title-bold-16-19);\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 0.5rem;\n      color: var(--grey-40);\n      margin-bottom: 1.5rem;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 34px;\n      word-break: break-word;\n      font: var(--body-medium-14-17);\n    }\n\n    .productCardPriceContent {\n      display: grid;\n      align-items: ", ";\n      justify-content: flex-start;\n      height: 36px;\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: 2px;\n        }\n      }\n\n      .oldPrice {\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price, .period {\n          text-decoration: line-through;\n        }\n        .price{\n          font: var(--caption-semi-bold-12-15);\n        }\n        .period{\n          font:var(--caption-regular-12-15);\n        }\n      }\n\n      .newPrice {\n        .price{\n          font: var(--body-extra-bold-14-17);\n        }\n        .period{\n          font: var(--body-regular-13-16);\n        }\n      }\n    }\n  }\n\n  ", "\n"], ["\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  border-radius: 0.5rem;\n  min-width: 240px;\n  padding: 1rem;\n  transition: all .2s ease;\n  position: relative;\n  box-sizing: border-box;\n  .cartBadge{\n    position: absolute;\n    left: 8px;\n    top: 8px;\n    z-index: 2;\n  }\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n\n  .img {\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    background: #FFF;\n    position: relative;\n    overflow: hidden;\n    height: 150px;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    > * {\n      width: 100%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    *{    \n      height: calc(100% - 0.5rem) !important;\n      aspect-ratio: 1 / 1 !important;\n    }\n  }\n  .productCardContent{ \n    padding: 1rem 0 0.5rem 0;\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 38px;\n      word-break: break-word;\n      font: var(--title-bold-16-19);\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 0.5rem;\n      color: var(--grey-40);\n      margin-bottom: 1.5rem;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 34px;\n      word-break: break-word;\n      font: var(--body-medium-14-17);\n    }\n\n    .productCardPriceContent {\n      display: grid;\n      align-items: ", ";\n      justify-content: flex-start;\n      height: 36px;\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: 2px;\n        }\n      }\n\n      .oldPrice {\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price, .period {\n          text-decoration: line-through;\n        }\n        .price{\n          font: var(--caption-semi-bold-12-15);\n        }\n        .period{\n          font:var(--caption-regular-12-15);\n        }\n      }\n\n      .newPrice {\n        .price{\n          font: var(--body-extra-bold-14-17);\n        }\n        .period{\n          font: var(--body-regular-13-16);\n        }\n      }\n    }\n  }\n\n  ", "\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$isResponsive && "\n    @media only screen and ".concat(devices_1.devices.sm, " {\n      padding: 1.5rem;\n        .cartBadge{\n          left: 16px;\n          top: 16px;\n        }\n        .img {\n          height: 215px;\n        }\n        .productCardContent{\n          padding: 1.5rem 0 0.5rem 0;\n          .productCardTitle{\n            height: 44px;\n            font: var(--headline-bold-18-22);\n          }\n          .productCardDescription{\n            margin-bottom: 1.5rem;\n            height: 37px;\n            font: var(--title-medium-16-19);\n          }\n          .productCardPriceContent{\n            height: 48px;\n            .discountRate{\n              width: 65px;\n              height: 48px;\n              font: var(--title-extra-bold-16-19);\n            }\n            \n            .oldPrice {\n              .price{\n                font: var(--body-semi-bold-13-16);\n              }\n            }\n            .newPrice {\n              .price{\n                font: var(--title-extra-bold-16-19);\n              }\n              .period{\n                font: var(--body-regular-14-17);\n              }\n            }\n          }\n        }\n    }\n  "); });
+var templateObject_1;

package/dist/components/ProductCardVertical/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ProductCardVertical_1 = require("./ProductCardVertical");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ProductCardVertical_1).default; } });

package/dist/components/ProductCardVertical/props.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ProductCardDefault = {
+    isResponsive: false
+};

package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ProductCardVertical_1 = __importDefault(require("../ProductCardVertical"));
+exports.default = {
+    title: 'Components/ProductCard/ProductCard Vertical',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "240px" } }, { children: (0, jsx_runtime_1.jsx)(ProductCardVertical_1.default, __assign({}, props)) })); },
+    tags: ['autodocs'],
+    argTypes: {
+        disabled: { control: 'boolean' },
+        hasDiscount: { control: 'boolean' },
+    }
+};
+exports.Default = {
+    args: {
+        disabled: { control: 'boolean' },
+        hasDiscount: { control: 'boolean' },
+        title: "Apple İpad Air WİFİ 64GB (2020)",
+        description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
+        price: "12.545,24 TL",
+        oldPrice: "12.545,24 TL",
+        component: function (_a) {
+            var children = _a.children;
+            return (0, jsx_runtime_1.jsx)("a", __assign({ href: "test" }, { children: children }));
+        },
+        discountRate: 32,
+        oldPricePeriod: "hafta",
+        period: "hafta",
+        content: "Content",
+        isMobile: false,
+        image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
+    },
+};

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('", "');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          border: 2px solid var(--primary);\n          user-select: none;\n          pointer-events: none;\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      @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"], ["\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('", "');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          border: 2px solid var(--primary);\n          user-select: none;\n          pointer-events: none;\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      @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"])), devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementChecked" })), 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          border: 2px solid var(--primary);\n          user-select: none;\n          pointer-events: none;\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      @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"], ["\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          border: 2px solid var(--primary);\n          user-select: none;\n          pointer-events: none;\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      @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"])), 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/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({}, props, { 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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 }, { 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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: [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    }\n    .text{\n      padding-right: 0.5rem;\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        &:hover{\n          color: var(--primary-hover);\n        }\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: 2px;\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-12-15);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-12-15);\n          }\n        }\n\n        .newPrice {\n            .price {\n                font:var(--body-extra-bold-14-17);\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\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    &: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        .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    }\n    .text{\n      padding-right: 0.5rem;\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        &:hover{\n          color: var(--primary-hover);\n        }\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: 2px;\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-12-15);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-12-15);\n          }\n        }\n\n        .newPrice {\n            .price {\n                font:var(--body-extra-bold-14-17);\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\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    &: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        .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)'; });
+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    }\n    .text{\n      padding-right: 0.5rem;\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        &:hover{\n          color: var(--primary-hover);\n        }\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: 2px;\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-12-15);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-12-15);\n          }\n        }\n\n        .newPrice {\n            .price {\n                font:var(--body-extra-bold-14-17);\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\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    &: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        .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    }\n    .text{\n      padding-right: 0.5rem;\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        &:hover{\n          color: var(--primary-hover);\n        }\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: 2px;\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-12-15);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-12-15);\n          }\n        }\n\n        .newPrice {\n            .price {\n                font:var(--body-extra-bold-14-17);\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\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    &: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        .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)'; });
 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/TextLink/TextLink.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -18,8 +29,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var TextLink_styled_1 = require("./TextLink.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var TextLink = function (props) {
-    var onClick = props.onClick, children = props.children, href = props.href, target = props.target, icon = props.icon, iconWidth = props.iconWidth, iconHeight = props.iconHeight, size = props.size, iconDirection = props.iconDirection, iconStrokeWidth = props.iconStrokeWidth;
-    return ((0, jsx_runtime_1.jsx)(TextLink_styled_1.TextLinkStyled, __assign({ size: size, href: href, target: target, onClick: onClick }, props, { children: (0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, __assign({ iconDirection: iconDirection }, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, __assign({ iconDirection: iconDirection }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, width: iconWidth, height: iconHeight }) }))), children] })) })));
+    var onClick = props.onClick, children = props.children, href = props.href, target = props.target, iconWidth = props.iconWidth, iconHeight = props.iconHeight, icon = props.icon, variant = props.variant, size = props.size, iconDirection = props.iconDirection, iconStrokeWidth = props.iconStrokeWidth, other = __rest(props, ["onClick", "children", "href", "target", "iconWidth", "iconHeight", "icon", "variant", "size", "iconDirection", "iconStrokeWidth"]);
+    return ((0, jsx_runtime_1.jsx)(TextLink_styled_1.TextLinkStyled, __assign({ "$size": size, "$variant": variant, href: href, target: target, onClick: onClick }, other, { children: (0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, __assign({ "$iconDirection": iconDirection }, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, __assign({ "$iconDirection": iconDirection }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, width: iconWidth, height: iconHeight }) }))), children] })) })));
 };
 TextLink.defaultProps = {
     iconWidth: "24px",

package/dist/components/TextLink/TextLink.styled.js

@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Inner = exports.IconStyled = exports.TextLinkStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  vertical-align: middle;\n  padding: ", ";\n  &:hover , :focus , :active {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  vertical-align: middle;\n  padding: ", ";\n  &:hover , :focus , :active {\n    color: ", ";\n  }\n"])), function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) {
-    switch (props.size) {
+exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  vertical-align: middle;\n  padding: ", ";\n  &:hover , :focus , :active {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  vertical-align: middle;\n  padding: ", ";\n  &:hover , :focus , :active {\n    color: ", ";\n  }\n"])), function (props) { return props.$variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) {
+    switch (props.$size) {
         case 'small':
             return "0";
         case 'medium':
@@ -18,7 +18,7 @@ exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (temp
         default:
             return "0";
     }
-}, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
-exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n"], ["\n    ", ";\n"])), function (props) { return props.iconDirection === 'right' ? "margin-left: 0.5rem;" : 'margin-right: 0.5rem;'; });
-exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction:", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction:", ";\n"])), function (props) { return props.iconDirection === 'right' ? "row-reverse" : 'row'; });
+}, function (props) { return props.$variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
+exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n"], ["\n    ", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "margin-left: 0.5rem;" : 'margin-right: 0.5rem;'; });
+exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction:", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction:", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "row-reverse" : 'row'; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Tooltip/Tooltip.js

@@ -20,14 +20,14 @@ var Tooltip_styled_1 = require("./Tooltip.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var Tooltip = function (props) {
-    var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth, position = props.position, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, popupSize = props.popupSize, popupLeft = props.popupLeft, popupRight = props.popupRight, popupTop = props.popupTop, popupBottom = props.popupBottom, iconStrokeWidth = props.iconStrokeWidth;
+    var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth, position = props.position, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, popupSize = props.popupSize, popupLeft = props.popupLeft, popupRight = props.popupRight, iconStrokeWidth = props.iconStrokeWidth;
     var _a = (0, react_1.useState)(isOpen), isOpenTooltip = _a[0], setIsOpenTooltip = _a[1];
     (0, react_1.useEffect)(function () {
         setIsOpenTooltip(isOpen);
     }, [isOpen]);
     var tooltipRef = (0, react_1.useRef)();
     (0, useOnClickOutside_1.default)(tooltipRef, function () { return setIsOpenTooltip(false); }, hasCloseOnOutsideClick);
-    return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, __assign({ ref: tooltipRef, hasClickAction: hasClickAction }, { children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, __assign({ isOpen: isOpenTooltip, position: position, hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: "InfoSquare", width: iconWidth, height: iconHeight }) })), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, __assign({ popupSize: popupSize, iconWidth: iconWidth, position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, popupLeft: popupLeft, popupRight: popupRight, popupTop: popupTop, popupBottom: popupBottom }, { children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { children: title }), children] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, __assign({ ref: tooltipRef, "$hasClickAction": hasClickAction }, { children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, __assign({ "$isOpen": isOpenTooltip, "$position": position, "$hasClickAction": hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: "InfoSquare", width: iconWidth, height: iconHeight }) })), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, __assign({ "$popupSize": popupSize, "$position": position, "$popupWidth": popupWidth, "$isOpen": isOpenTooltip, "$hasClickAction": hasClickAction, "$popupLeft": popupLeft, "$popupRight": popupRight }, { children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { children: title }), children] }))] })));
 };
 Tooltip.defaultProps = {
     iconWidth: "16px",

package/dist/components/Tooltip/Tooltip.styled.js

@@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popup = exports.Title = exports.Selector = exports.TooltipStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  vertical-align: middle;\n  color: var(--dark);\n  ", "\n"], ["\n  display: block;\n  position: relative;\n  vertical-align: middle;\n  color: var(--dark);\n  ", "\n"])), function (props) { return !props.hasClickAction && "\n      &:hover {\n        > div {\n          opacity: 1;\n          :before{\n            opacity:1;\n          }\n        }\n      }\n  "; });
-exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  cursor: ", ";\n  position: relative;\n  div {\n    display: block;\n    color: var(--primary);\n  }\n\n  ", "\n  &:before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n    right: auto;\n    transition: all 0.15s ease;\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    opacity: ", ";\n    ", ";\n  }\n"], ["\n  display: block;\n  cursor: ", ";\n  position: relative;\n  div {\n    display: block;\n    color: var(--primary);\n  }\n\n  ", "\n  &:before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n    right: auto;\n    transition: all 0.15s ease;\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    opacity: ", ";\n    ", ";\n  }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; }, function (props) { return (!props.hasClickAction) ? "\n    &:hover{\n      &:before{\n        opacity: 1;\n      }\n    }\n  " : null; }, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, function (props) {
-    switch (props.position) {
+exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  vertical-align: middle;\n  color: var(--dark);\n  ", "\n"], ["\n  display: block;\n  position: relative;\n  vertical-align: middle;\n  color: var(--dark);\n  ", "\n"])), function (props) { return !props.$hasClickAction && "\n      &:hover {\n        > div {\n          opacity: 1;\n          :before{\n            opacity:1;\n          }\n        }\n      }\n  "; });
+exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  cursor: ", ";\n  position: relative;\n  div {\n    display: block;\n    color: var(--primary);\n  }\n\n  ", "\n  &:before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n    right: auto;\n    transition: all 0.15s ease;\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    opacity: ", ";\n    ", ";\n  }\n"], ["\n  display: block;\n  cursor: ", ";\n  position: relative;\n  div {\n    display: block;\n    color: var(--primary);\n  }\n\n  ", "\n  &:before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n    right: auto;\n    transition: all 0.15s ease;\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    opacity: ", ";\n    ", ";\n  }\n"])), function (props) { return props.$hasClickAction ? 'pointer' : 'initial'; }, function (props) { return (!props.$hasClickAction) ? "\n    &:hover{\n      &:before{\n        opacity: 1;\n      }\n    }\n  " : null; }, function (props) { return (props.$hasClickAction && props.$isOpen) ? '1' : "0"; }, function (props) {
+    switch (props.$position) {
         case 'bottomRight':
             return "\n            top: calc(100% + 4px);\n        ";
         case 'bottomCenter':
@@ -30,8 +30,8 @@ exports.Selector = styled_components_1.default.div(templateObject_2 || (template
     }
 });
 exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 0.5rem;\n  font:var(--body-extra-bold-13-16);\n"], ["\n  display: block;\n  margin-bottom: 0.5rem;\n  font:var(--body-extra-bold-13-16);\n"])));
-exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  max-width: ", ";\n  width: calc(100vw - 4.5rem);\n  padding: ", ";\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-10);\n  z-index: 99999;\n  box-sizing: border-box;\n  user-select: none;\n  pointer-events: none;\n  transition: all 0.15s ease;\n  opacity: ", ";\n  font:var(--caption-medium-11-13);\n  ", ";\n\n  @media only screen and ", " {\n    left: auto;\n    transform: none;\n    right: ", " !important;\n  }\n"], ["\n  position: absolute;\n  max-width: ", ";\n  width: calc(100vw - 4.5rem);\n  padding: ", ";\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-10);\n  z-index: 99999;\n  box-sizing: border-box;\n  user-select: none;\n  pointer-events: none;\n  transition: all 0.15s ease;\n  opacity: ", ";\n  font:var(--caption-medium-11-13);\n  ", ";\n\n  @media only screen and ", " {\n    left: auto;\n    transform: none;\n    right: ", " !important;\n  }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
-    switch (props.popupSize) {
+exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  max-width: ", ";\n  width: calc(100vw - 4.5rem);\n  padding: ", ";\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-10);\n  z-index: 99999;\n  box-sizing: border-box;\n  user-select: none;\n  pointer-events: none;\n  transition: all 0.15s ease;\n  opacity: ", ";\n  font:var(--caption-medium-11-13);\n  ", ";\n\n  @media only screen and ", " {\n    left: auto;\n    transform: none;\n    right: ", " !important;\n  }\n"], ["\n  position: absolute;\n  max-width: ", ";\n  width: calc(100vw - 4.5rem);\n  padding: ", ";\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-10);\n  z-index: 99999;\n  box-sizing: border-box;\n  user-select: none;\n  pointer-events: none;\n  transition: all 0.15s ease;\n  opacity: ", ";\n  font:var(--caption-medium-11-13);\n  ", ";\n\n  @media only screen and ", " {\n    left: auto;\n    transform: none;\n    right: ", " !important;\n  }\n"])), function (props) { return props.$popupWidth ? props.$popupWidth : "151px"; }, function (props) {
+    switch (props.$popupSize) {
         case 'small':
             return "10px";
         case 'medium':
@@ -39,22 +39,22 @@ exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObj
         default:
             return "10px";
     }
-}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, function (props) {
-    switch (props.position) {
+}, function (props) { return (props.$hasClickAction && props.$isOpen) ? '1' : "0"; }, function (props) {
+    switch (props.$position) {
         case 'bottomRight':
-            return "\n          right: ".concat(props.popupRight || '-22px', ";\n          top: calc(100% + 10px);\n        ");
+            return "\n          right: ".concat(props.$popupRight || '-22px', ";\n          top: calc(100% + 10px);\n        ");
         case 'bottomCenter':
             return "\n          left: 50%;\n          top: calc(100% + 10px);\n          transform: translateX(-50%);\n        ";
         case 'bottomLeft':
-            return "\n          left: ".concat(props.popupLeft || '-22px', ";\n          top: calc(100% + 10px);\n        ");
+            return "\n          left: ".concat(props.$popupLeft || '-22px', ";\n          top: calc(100% + 10px);\n        ");
         case 'topRight':
-            return "\n          right: ".concat(props.popupRight || '-22px', ";\n          bottom: calc(100% + 10px);\n        ");
+            return "\n          right: ".concat(props.$popupRight || '-22px', ";\n          bottom: calc(100% + 10px);\n        ");
         case 'topCenter':
             return "\n          left: 50%;\n          bottom: calc(100% + 10px);\n          transform: translateX(-50%);\n        ";
         case 'topLeft':
-            return "\n          left: ".concat(props.popupLeft || '-22px', ";\n          bottom: calc(100% + 10px);\n        ");
+            return "\n          left: ".concat(props.$popupLeft || '-22px', ";\n          bottom: calc(100% + 10px);\n        ");
         default:
             return "\n          left: 50%;\n          bottom: calc(100% + 10px);\n          transform: translateX(-50%);\n        ";
     }
-}, devices_1.devices.xl, function (props) { return props.popupRight || "-1.5rem"; });
+}, devices_1.devices.xl, function (props) { return props.$popupRight || "-1.5rem"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerCard = exports.AutocompleteInput = exports.Slider = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
+exports.ProductCardVertical = exports.BannerCard = exports.AutocompleteInput = exports.Slider = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
 var Button_1 = __importDefault(require("./components/Button"));
 exports.Button = Button_1.default;
 var Breadcrumbs_1 = __importDefault(require("./components/Breadcrumbs"));
@@ -98,5 +98,7 @@ var AutocompleteInput_1 = __importDefault(require("./components/AutocompleteInpu
 exports.AutocompleteInput = AutocompleteInput_1.default;
 var BannerCard_1 = __importDefault(require("./components/BannerCard"));
 exports.BannerCard = BannerCard_1.default;
+var ProductCardVertical_1 = __importDefault(require("./components/ProductCardVertical"));
+exports.ProductCardVertical = ProductCardVertical_1.default;
 var react_slick_1 = __importDefault(require("react-slick"));
 exports.Slider = react_slick_1.default;

package/package.json

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