krl-alfred 1.74.7 → 1.75.0

package/dist/components/AddressCard/AddressCard.js

@@ -0,0 +1,25 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var AddressCard_styled_1 = require("./AddressCard.styled");
+var RadioButton_1 = __importDefault(require("../RadioButton"));
+var TextLink_1 = __importDefault(require("../TextLink"));
+var AddressCard = function (props) {
+    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: props.id, checked: props.checked }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", label: props.title }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.handleUpdate }, { children: "D\u00FCzenle" })) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props.description }))] })));
+};
+AddressCard.defaultProps = {};
+exports.default = AddressCard;

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

@@ -0,0 +1,13 @@
+"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.AddressCardStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font-size: 14px;\n            font-weight: 700;\n            margin-left: 1rem;\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: normal;\n        color: var(--dark);\n        min-height: 68px;\n        cursor: inherit;\n    }\n"], ["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font-size: 14px;\n            font-weight: 700;\n            margin-left: 1rem;\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: normal;\n        color: var(--dark);\n        min-height: 68px;\n        cursor: inherit;\n    }\n"])), function (props) { return props.checked ? 'var(--primary)' : 'var(--dark-opacity-10)'; });
+var templateObject_1;

package/dist/components/AddressCard/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 AddressCard_1 = require("./AddressCard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AddressCard_1).default; } });

package/dist/components/AddressCard/props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/AddressCard/stories/AddressCard.stories.js

@@ -0,0 +1,35 @@
+"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 AddressCard_1 = __importDefault(require("../AddressCard"));
+exports.default = {
+    title: 'Components/AddressCard',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '305px' } }, { children: (0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, props)) })); },
+    tags: ['autodocs'],
+    argTypes: {
+        checked: { control: 'boolean' },
+    }
+};
+exports.Default = {
+    args: {
+        title: "Address title",
+        description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
+        handleUpdate: function () { return console.log('handleUpdate'); },
+        id: "addressCard_1",
+    },
+};

package/dist/components/Checkbox/Checkbox.styled.js

@@ -12,14 +12,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", ";\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", ";\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) {
+exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", ";\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", ";\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) {
     switch (props.size) {
         case 'small':
             return "0 8px 0 0";
         case 'medium':
-            return "0 16px 0 0";
+            return "0 8px 0 0";
         case 'large':
-            return "0 24px 0 0";
+            return "0 16px 0 0";
         default:
             return "0 16px 0 0";
     }

package/dist/components/InstallmentBox/InstallmentBox.js

@@ -0,0 +1,24 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var InstallmentBox_styled_1 = require("./InstallmentBox.styled");
+var RadioButton_1 = __importDefault(require("../RadioButton"));
+var InstallmentBox = function (props) {
+    return ((0, jsx_runtime_1.jsx)(InstallmentBox_styled_1.InstallmentBoxStyled, __assign({ checked: props.checked }, { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftContent" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onClick: props.onClick, onChange: props.onChange, layout: "basic", label: props.label, checked: props.checked, name: props.name }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "titlesWrapper" }, { children: props.isEqualPrice && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "advance " }, { children: "Pe\u015Fin fiyat\u0131na" })) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightContent" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "price" }, { children: [(props.installmentCount !== 1 ? "".concat(props.installmentCount, " x") : null), " ", props.installmentPrice] })), (0, jsx_runtime_1.jsxs)("strong", __assign({ className: "totalPrice" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "total" }, { children: "Toplam:" })), " ", props.totalPrice] }))] }))] })) }) })));
+};
+InstallmentBox.defaultProps = {};
+exports.default = InstallmentBox;

package/dist/components/InstallmentBox/InstallmentBox.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.InstallmentBoxStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
+exports.InstallmentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    > label {\n        display: flex;\n        width: 100%;\n        align-items: center;\n        justify-content: center;\n        border: ", ";\n        border-radius: 8px;\n        height: 67px;\n        cursor: pointer;\n        .inner {\n            width: 100%;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            @media only screen and ", " {\n                padding: 0 1rem;\n            }\n            .leftContent {\n                display: flex;\n                align-items: center;\n                justify-content: flex-start;\n                flex: 0 0 auto;\n                width: auto;\n                .titlesWrapper {\n                    display: flex;\n                    align-items: center;\n                    justify-content: flex-start;\n                    @media only screen and ", " {\n                        display: grid;\n                        row-gap: 0.5rem;\n                    }\n                    .advance {\n                        margin-left: 1rem;\n                        background: #f5effe;\n                        border-radius: 3px;\n                        width: 76px;\n                        height: 17px;\n                        display: inline-block;\n                        text-align: center;\n                        line-height: 17px;\n                        font-size: 10px;\n                        font-weight: 600;\n                    }\n                }\n            }\n            .rightContent {\n                flex: 0 0 auto;\n                width: auto;\n                text-align: end;\n                row-gap: 0.25rem;\n                display: grid;\n                .price {\n                    display: block;\n                    color: var(--dark);\n                    font-size: 16px;\n                    font-weight: 700;\n                }\n                .totalPrice {\n                    display: block;\n                    color: var(--dark-opacity-50);\n                    font-size: 12px;\n                    font-weight: 600;\n                    .total {\n                        @media only screen and ", " {\n                            display: none;\n                        }\n                    }\n                }\n            }\n        }\n    }\n"], ["\n    display: block;\n    > label {\n        display: flex;\n        width: 100%;\n        align-items: center;\n        justify-content: center;\n        border: ", ";\n        border-radius: 8px;\n        height: 67px;\n        cursor: pointer;\n        .inner {\n            width: 100%;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            @media only screen and ", " {\n                padding: 0 1rem;\n            }\n            .leftContent {\n                display: flex;\n                align-items: center;\n                justify-content: flex-start;\n                flex: 0 0 auto;\n                width: auto;\n                .titlesWrapper {\n                    display: flex;\n                    align-items: center;\n                    justify-content: flex-start;\n                    @media only screen and ", " {\n                        display: grid;\n                        row-gap: 0.5rem;\n                    }\n                    .advance {\n                        margin-left: 1rem;\n                        background: #f5effe;\n                        border-radius: 3px;\n                        width: 76px;\n                        height: 17px;\n                        display: inline-block;\n                        text-align: center;\n                        line-height: 17px;\n                        font-size: 10px;\n                        font-weight: 600;\n                    }\n                }\n            }\n            .rightContent {\n                flex: 0 0 auto;\n                width: auto;\n                text-align: end;\n                row-gap: 0.25rem;\n                display: grid;\n                .price {\n                    display: block;\n                    color: var(--dark);\n                    font-size: 16px;\n                    font-weight: 700;\n                }\n                .totalPrice {\n                    display: block;\n                    color: var(--dark-opacity-50);\n                    font-size: 12px;\n                    font-weight: 600;\n                    .total {\n                        @media only screen and ", " {\n                            display: none;\n                        }\n                    }\n                }\n            }\n        }\n    }\n"])), function (props) { return props.checked ? '2px solid var(--primary)' : '1px solid var(--dark-opacity-10)'; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
+var templateObject_1;

package/dist/components/InstallmentBox/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 InstallmentBox_1 = require("./InstallmentBox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(InstallmentBox_1).default; } });

package/dist/components/InstallmentBox/props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/InstallmentBox/stories/InstallmentBox.stories.js

@@ -0,0 +1,22 @@
+"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 InstallmentBox_1 = __importDefault(require("../InstallmentBox"));
+exports.default = {
+    title: 'Components/InstallmentBox',
+    component: InstallmentBox_1.default,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        installmentCount: 2,
+        installmentPrice: "999,99 TL",
+        totalPrice: "1999,98 TL",
+        isEqualPrice: false,
+        label: "Tek çekim"
+    },
+};

package/dist/components/RadioButton/layouts/basic/Basic.js

@@ -20,8 +20,8 @@ var classnames_1 = __importDefault(require("classnames"));
 var Basic_styled_1 = require("./Basic.styled");
 var Basic = function (props) {
     var _a, _b, _c, _d;
-    var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout;
-    return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, layout: layout }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id }, { children: description })))] })))] })));
+    var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset;
+    return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, layout: layout, labelOffset: labelOffset }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id }, { children: description })))] })))] })));
 };
 exports.default = Basic;
 Basic.propTypes = {
@@ -29,6 +29,7 @@ Basic.propTypes = {
     size: prop_types_1.default.string,
     label: prop_types_1.default.string,
     description: prop_types_1.default.string,
+    labelOffset: prop_types_1.default.string,
     valid: prop_types_1.default.bool,
     disabled: prop_types_1.default.bool,
     checked: prop_types_1.default.bool,
@@ -37,4 +38,5 @@ Basic.defaultProps = {
     id: "styledChecbox_".concat(Math.floor(Math.random() * (99999999999 - 11111111111) + 11111111111)),
     size: "small",
     valid: true,
+    labelOffset: "0.5rem",
 };

package/dist/components/RadioButton/layouts/basic/Basic.styled.js

@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
-exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\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\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    label.label {\n      display: block;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\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\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    label.label {\n      display: block;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
+exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\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\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\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\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementInvalid" }))); }, function (props) { return props.labelOffset; }, function (props) {
     switch (props.size) {
         case 'small':
             return "16px";
@@ -30,5 +30,5 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
         default:
             return "16px";
     }
-}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return props.valid ? '#000000' : 'var(--red)'; });
+}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return props.valid ? '#000000' : 'var(--red)'; }, function (props) { return !props.isWrapText && "\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n    "; });
 var templateObject_1;

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

@@ -19,8 +19,8 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var Boxed_styled_1 = require("./Boxed.styled");
 var classnames_1 = __importDefault(require("classnames"));
 var Boxed = function (props) {
-    var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, image = props.image;
-    return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, layout: layout }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description || image) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", "title-bold-16-19"), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", "body-regular-14-17"), htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: image })))] })))] })));
+    var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, image = props.image, labelOffset = props.labelOffset;
+    return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, layout: layout, labelOffset: labelOffset }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description || image) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", "title-bold-16-19"), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", "body-regular-14-17"), htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: image })))] })))] })));
 };
 exports.default = Boxed;
 Boxed.propTypes = {
@@ -36,4 +36,5 @@ Boxed.defaultProps = {
     id: "styledChecbox_".concat(Math.floor(Math.random() * (99999999999 - 11111111111) + 11111111111)),
     size: "small",
     valid: true,
+    labelOffset: "0.5rem",
 };

package/dist/components/RadioButton/props.js

@@ -7,5 +7,7 @@ var RadioButtonDefault = {
     size: "small",
     layout: "basic",
     checked: false,
-    valid: true
+    valid: true,
+    isWrapText: true,
+    labelOffset: '0.5rem',
 };

package/dist/components/RadioButton/stories/RadioButton.stories.js

@@ -28,6 +28,7 @@ exports.default = {
         layout: { control: "select", options: props_1.layouts },
         label: { control: "text" },
         description: { control: "text" },
+        labelOffset: { control: "text" },
     },
 };
 exports.Default = {

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

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

package/dist/components/Stepper/Stepper.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 };
 };
@@ -19,18 +30,19 @@ var Stepper_styled_1 = require("./Stepper.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var classnames_1 = __importDefault(require("classnames"));
 var Stepper = function (props) {
-    return (0, jsx_runtime_1.jsx)(Stepper_styled_1.StepperStyled, __assign({}, props, { children: props.steps && props.steps.map(function (step) {
-            var _a, _b, _c, _d;
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)("circle headline-extra-bold-24-29", (_a = {}, _a["active"] = props.activeStep >= step.index || props.allStepsCompleted, _a), (_b = {}, _b["onlyIcon"] = props.onlyIcons, _b)) }, { children: props.activeStep > step.index || props.allStepsCompleted ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckMark" }) : step.index })), (props.size === "small" ? (props.activeStep === step.index) : true) && !props.onlyIcons && (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)("text headline-semi-bold-24-29", (_c = {}, _c["active"] = props.activeStep >= step.index || props.allStepsCompleted, _c)) }, { children: step.text })), props.steps.length > step.index && !props.onlyIcons &&
-                        (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("divider", (_d = {}, _d["active"] = props.activeStep > step.index || props.allStepsCompleted, _d)) })] });
+    var steps = props.steps, etc = __rest(props, ["steps"]);
+    return (0, jsx_runtime_1.jsx)(Stepper_styled_1.StepperStyled, __assign({}, etc, { children: props.steps && props.steps.map(function (step) {
+            var _a;
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Stepper_styled_1.StepStyled, __assign({ activeStep: props.activeStep, index: step.index, onClick: function () { return props.hasClickAction && props.activeStep > step.index && props.setStep(props.activeStep - 1); }, hasClickAction: props.hasClickAction && step.index < props.activeStep, className: (0, classnames_1.default)((_a = {},
+                            _a["done"] = props.activeStep > step.index,
+                            _a["active"] = props.activeStep === step.index,
+                            _a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "circle" }, { children: (props.activeStep > step.index || props.activeStep === props.steps.length) ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckMark" }) : step.index })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: step.text }))] })), step.index !== steps.length && (0, jsx_runtime_1.jsx)(Stepper_styled_1.DividerStyled, { activeStep: props.activeStep, index: step.index })] });
         }) }));
 };
 Stepper.defaultProps = {
     steps: [],
     textOnlyActiveStep: false,
     size: "normal",
-    onlyIcons: false,
-    activeStep: 1,
-    allStepsCompleted: false
+    activeStep: 1
 };
 exports.default = Stepper;

package/dist/components/Stepper/Stepper.styled.js

@@ -7,7 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StepperStyled = void 0;
+exports.StepStyled = exports.DividerStyled = exports.StepperStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.StepperStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-family: var(--font-family-sans-serif);\n\n  div.circle {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--grey-10);\n    color: var(--grey-40);\n\n    &.active {\n      background: var(--primary);\n      color: white;\n    }\n    \n    &.onlyIcon:not(:last-child) {\n      margin-right: ", ";\n    }\n\n  }\n\n  div.text {\n    color: var(--grey-30);\n    margin-left: ", ";\n\n    &.active {\n      color: var(--dark);\n    }\n  }\n\n  div.divider {\n    width: ", ";\n    height: 1px;\n    background: var(--grey-10);\n    margin: ", ";\n\n    &.active {\n      background: var(--primary);\n    }\n  }\n\n"], ["\n  display: flex;\n  align-items: center;\n  font-family: var(--font-family-sans-serif);\n\n  div.circle {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--grey-10);\n    color: var(--grey-40);\n\n    &.active {\n      background: var(--primary);\n      color: white;\n    }\n    \n    &.onlyIcon:not(:last-child) {\n      margin-right: ", ";\n    }\n\n  }\n\n  div.text {\n    color: var(--grey-30);\n    margin-left: ", ";\n\n    &.active {\n      color: var(--dark);\n    }\n  }\n\n  div.divider {\n    width: ", ";\n    height: 1px;\n    background: var(--grey-10);\n    margin: ", ";\n\n    &.active {\n      background: var(--primary);\n    }\n  }\n\n"])), function (props) { return props.size === 'normal' ? '48px' : '40px'; }, function (props) { return props.size === 'normal' ? '48px' : '40px'; }, function (props) { return props.size === 'normal' ? '17px' : '25px'; }, function (props) { return props.size === 'normal' ? '16px' : '8px'; }, function (props) { return props.size === 'normal' ? '112px' : '16px'; }, function (props) { return props.size === 'normal' ? '0 24px' : '0 22px'; });
-var templateObject_1;
+var devices_1 = require("../../constants/devices");
+exports.StepperStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
+exports.DividerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 112px;\n    height: 1px;\n    background: ", ";\n    margin: 0 24px;\n    @media only screen and ", " {\n        width: 25px;\n    }\n"], ["\n    width: 112px;\n    height: 1px;\n    background: ", ";\n    margin: 0 24px;\n    @media only screen and ", " {\n        width: 25px;\n    }\n"])), function (props) { return props.activeStep > props.index ? 'var(--primary)' : 'var(--grey-10)'; }, devices_1.devices.xl);
+exports.StepStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    cursor: ", ";\n    div.circle {\n        border-radius: 50%;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: ", ";\n        color: ", ";\n        font-size: 24px;\n        font-weight: 800;\n        line-height: normal;\n        @media only screen and ", " {\n            width: 40px;\n            height: 40px;\n        }\n\n        svg {\n            path {\n                fill: white;\n            }\n        }\n\n    }\n\n    div.text {\n        color: ", ";\n        margin-left: 16px;\n        font-size: 24px;\n        font-weight: 600;\n        line-height: normal;\n        @media only screen and ", " {\n            display: ", ";\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    cursor: ", ";\n    div.circle {\n        border-radius: 50%;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: ", ";\n        color: ", ";\n        font-size: 24px;\n        font-weight: 800;\n        line-height: normal;\n        @media only screen and ", " {\n            width: 40px;\n            height: 40px;\n        }\n\n        svg {\n            path {\n                fill: white;\n            }\n        }\n\n    }\n\n    div.text {\n        color: ", ";\n        margin-left: 16px;\n        font-size: 24px;\n        font-weight: 600;\n        line-height: normal;\n        @media only screen and ", " {\n            display: ", ";\n        }\n    }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; }, function (props) { return props.activeStep >= props.index ? 'var(--primary)' : 'var(--grey-10)'; }, function (props) { return props.activeStep >= props.index ? 'white' : 'var(--grey-40)'; }, devices_1.devices.xl, function (props) { return props.activeStep >= props.index ? 'var(--dark)' : 'var(--grey-30)'; }, devices_1.devices.xl, function (props) { return props.activeStep === props.index ? 'block' : 'none'; });
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Stepper/props.js

@@ -1,4 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sizes = void 0;
-exports.sizes = ['normal', 'small'];

package/dist/components/Stepper/stories/Stepper.stories.js

@@ -5,19 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 var Stepper_1 = __importDefault(require("../Stepper"));
-var props_1 = require("../props");
 exports.default = {
     title: 'Components/Stepper',
     component: Stepper_1.default,
     tags: ['autodocs'],
-    argTypes: {
-        size: { control: 'select', options: props_1.sizes },
-        allStepsCompleted: { control: 'boolean' }
-    }
+    argTypes: {}
 };
 exports.Default = {
     args: {
         steps: [{ index: 1, text: "Step 1" }, { index: 2, text: "Step 2" }, { index: 3, text: "Step 3" }],
-        activeStep: 1
+        activeStep: 1,
     },
 };

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

@@ -9,7 +9,7 @@ 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  padding: ", ";\n  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\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  padding: ", ";\n  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) {
+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  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\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  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) {
     switch (props.size) {
         case 'small':
             return "0";

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.Slider = 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.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"));
@@ -90,5 +90,9 @@ var turkish_json_1 = __importDefault(require("./i18n/locales/turkish.json"));
 exports.trLocale = turkish_json_1.default;
 var ReviewCard_1 = __importDefault(require("./components/ReviewCard"));
 exports.ReviewCard = ReviewCard_1.default;
+var AddressCard_1 = __importDefault(require("./components/AddressCard"));
+exports.AddressCard = AddressCard_1.default;
+var InstallmentBox_1 = __importDefault(require("./components/InstallmentBox"));
+exports.InstallmentBox = InstallmentBox_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.74.7",
+  "version": "1.75.0",
   "files": [
     "dist"
   ],