krl-alfred 2.17.18 → 2.17.20

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -31,7 +31,7 @@ exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonBa
 var styled_components_1 = __importStar(require("styled-components"));
 exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])));
 var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"])));
-exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; }, function (props) { return props.$hasCustomItem ? "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n          &:before{\n            content: '';\n            background-color:var(--grey-10);\n            height: 39px;\n            width: 2px;\n            display: block;\n            vertical-align: middle;\n            border-radius: 8px;\n            margin-right: 15px;\n          }\n    " : ""; });
+exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; }, function (props) { return props.$hasCustomItem ? "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n          &:before{\n            content: '';\n            background-color:var(--grey-10);\n            height: 39px;\n            width: 2px;\n            display: block;\n            vertical-align: middle;\n            border-radius: 8px;\n            margin-right: 15px;\n            margin-left: 15px;\n          }\n    " : ""; });
 exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
 exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    @keyframes tada_category {\n        0% {\n            transform: scaleX(1)\n        }\n\n        10%,20% {\n            transform: rotate(-2deg)\n        }\n\n        30%,50%,70%,90% {\n            transform: rotate(2deg)\n        }\n\n        40%,60%,80% {\n            transform: rotate(-2deg)\n        }\n\n        to {\n            transform: scaleX(1)\n        }\n    }\n\n    ", "\n    height: 24px;\n    display:flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n"], ["\n    @keyframes tada_category {\n        0% {\n            transform: scaleX(1)\n        }\n\n        10%,20% {\n            transform: rotate(-2deg)\n        }\n\n        30%,50%,70%,90% {\n            transform: rotate(2deg)\n        }\n\n        40%,60%,80% {\n            transform: rotate(-2deg)\n        }\n\n        to {\n            transform: scaleX(1)\n        }\n    }\n\n    ", "\n    height: 24px;\n    display:flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n"])), function (props) { return props.$hasAnimation ? "\n        animation: tada_category 1.5s infinite;\n        animation-iteration-count: 10;\n    " : ""; });
 exports.CategoryItemButtonBadge = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font: var(--caption-bold-10-12);\n    line-height: 17px;\n    border-radius: 3px;\n    background-color: var(--primary);\n    color: white;\n    padding: 0 0.5rem;\n    display: inline-block;\n    margin-top: 2px;\n"], ["\n    font: var(--caption-bold-10-12);\n    line-height: 17px;\n    border-radius: 3px;\n    background-color: var(--primary);\n    color: white;\n    padding: 0 0.5rem;\n    display: inline-block;\n    margin-top: 2px;\n"])));

package/dist/components/CategoryMenu/stories/CategoryMenu.stories.d.ts

@@ -24,22 +24,6 @@ export declare const Default: {
     args: {
         subMenuRowLength: number;
         data: ({
-            id: number;
-            parentId: number;
-            name: string;
-            filterName: any;
-            isShowHeader: boolean;
-            slug: string;
-            productCount: number;
-            headerMediaUrl: any;
-            medias: any[];
-            icon: string;
-            children: any[];
-            isActive: boolean;
-            component?: undefined;
-            badgeText?: undefined;
-            hasCustomItem?: undefined;
-        } | {
             id: number;
             parentId: number;
             name: string;
@@ -50,7 +34,7 @@ export declare const Default: {
             headerMediaUrl: string;
             medias: any[];
             icon: string;
-            children: ({
+            children: {
                 id: number;
                 parentId: number;
                 name: string;
@@ -58,37 +42,13 @@ export declare const Default: {
                 isShowHeader: boolean;
                 slug: string;
                 productCount: number;
-                headerMediaUrl: any;
+                headerMediaUrl: string;
                 medias: any[];
-                children: {
-                    id: number;
-                    parentId: number;
-                    name: string;
-                    filterName: any;
-                    isShowHeader: boolean;
-                    slug: string;
-                    productCount: number;
-                    headerMediaUrl: any;
-                    medias: any[];
-                    children: any[];
-                }[];
-                isSeeAll?: undefined;
-            } | {
-                id: number;
-                name: string;
-                isSeeAll: boolean;
-                slug: string;
-                parentId?: undefined;
-                filterName?: undefined;
-                isShowHeader?: undefined;
-                productCount?: undefined;
-                headerMediaUrl?: undefined;
-                medias?: undefined;
-                children?: undefined;
-            })[];
-            isActive?: undefined;
+                children: any[];
+                parent: any[];
+            }[];
+            parent: any[];
             component?: undefined;
-            badgeText?: undefined;
             hasCustomItem?: undefined;
         } | {
             id: number;
@@ -116,24 +76,7 @@ export declare const Default: {
                 medias: any[];
                 children: any[];
             }[];
-            isActive?: undefined;
-            badgeText?: undefined;
-            hasCustomItem?: undefined;
-        } | {
-            id: number;
-            parentId: number;
-            name: string;
-            filterName: any;
-            isShowHeader: boolean;
-            slug: string;
-            productCount: number;
-            headerMediaUrl: any;
-            medias: any[];
-            icon: string;
-            children: any[];
-            badgeText: string;
-            isActive?: undefined;
-            component?: undefined;
+            parent?: undefined;
             hasCustomItem?: undefined;
         } | {
             id: number;
@@ -148,9 +91,8 @@ export declare const Default: {
             icon: string;
             children: any[];
             hasCustomItem: boolean;
-            isActive?: undefined;
+            parent?: undefined;
             component?: undefined;
-            badgeText?: undefined;
         })[];
     };
 };

package/dist/components/Icon/iconList/ArrowDown.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 SvgArrowDown = 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: "M12.0002 19.4999V4.49988", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.0246 13.4501L12.0006 19.5001L5.97559 13.4501", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+var SvgArrowDown = 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: "M12.0001 19.5V4.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.0245 13.4512L12.0005 19.5012L5.9755 13.4512", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
 exports.default = SvgArrowDown;

package/dist/components/OptionMenu/stories/OptionMenu.stories.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
 export default _default;
 export declare const Default: {
     args: {
-        data: any[] | ({
+        data: any[] | {
             id: number;
             parentId: number;
             name: string;
@@ -15,34 +15,11 @@ export declare const Default: {
             isShowHeader: boolean;
             slug: string;
             productCount: number;
-            headerMediaUrl: any;
+            headerMediaUrl: string;
             medias: any[];
-            children: {
-                id: number;
-                parentId: number;
-                name: string;
-                filterName: any;
-                isShowHeader: boolean;
-                slug: string;
-                productCount: number;
-                headerMediaUrl: any;
-                medias: any[];
-                children: any[];
-            }[];
-            isSeeAll?: undefined;
-        } | {
-            id: number;
-            name: string;
-            isSeeAll: boolean;
-            slug: string;
-            parentId?: undefined;
-            filterName?: undefined;
-            isShowHeader?: undefined;
-            productCount?: undefined;
-            headerMediaUrl?: undefined;
-            medias?: undefined;
-            children?: undefined;
-        })[] | {
+            children: any[];
+            parent: any[];
+        }[] | {
             id: number;
             parentId: number;
             name: string;

package/dist/components/ProductCardHorizontal/ProductCardHorizontal.js

@@ -24,6 +24,6 @@ var ProductCardHorizontal = 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 (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: size === "small" ? "71px" : "142px", height: size === "small" ? "50px" : "77px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "title" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "400px", height: size === "small" ? "15px" : "19px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "description" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "300px", height: "17px", hasInset: true })] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "priceContent" }, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "150px", height: size === "small" ? "15px" : "17px" }) }))] }))] })) }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), price && period && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] })))] }))] })) })) }))));
+    return (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: size === "small" ? "71px" : "142px", height: size === "small" ? "50px" : "77px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "title" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "400px", height: size === "small" ? "15px" : "19px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "description" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "300px", height: "17px", hasInset: true })] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "priceContent", style: { marginTop: 4 } }, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "150px", height: size === "small" ? "13px" : "17px" }) }))] }))] })) }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), price && period && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] })))] }))] })) })) }))));
 };
 exports.default = ProductCardHorizontal;

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

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

package/dist/components/StepSlider/StepSlider.js

@@ -19,7 +19,7 @@ var StepSlider = function (_a) {
     var _b = (0, react_1.useState)(selectedValue), internalValue = _b[0], setInternalValue = _b[1];
     var _c = (0, react_1.useState)({}), indicatorStyle = _c[0], setIndicatorStyle = _c[1];
     var sliderRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
+    var handleSetPosition = function () {
         if (sliderRef.current) {
             var selectedIndex = options.findIndex(function (option) { return option.value === internalValue; });
             var selectedOptionElement = sliderRef.current.children[selectedIndex + 1];
@@ -29,7 +29,15 @@ var StepSlider = function (_a) {
                 });
             }
         }
+    };
+    (0, react_1.useEffect)(function () {
+        handleSetPosition();
     }, [internalValue, options]);
+    (0, react_1.useEffect)(function () {
+        setTimeout(function () {
+            handleSetPosition();
+        }, 50);
+    }, []);
     var handleClick = function (value) {
         setInternalValue(value);
         if (onChange) {

package/dist/components/StepSlider/StepSlider.styled.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .top {\n        display: flex;\n        margin-bottom: 1rem;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n"], ["\n    .top {\n        display: flex;\n        margin-bottom: 1rem;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n"])));
 exports.StepSliderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    background-color: white;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    height: 48px;\n    padding: 0 1.5rem;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    margin-bottom: 0.5rem;\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    background-color: white;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    height: 48px;\n    padding: 0 1.5rem;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    margin-bottom: 0.5rem;\n"])));
 exports.IndicatorStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) translateX(-16px);\n    background-color: white;\n    border-radius: 6px;\n    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n    z-index: 0;\n    width: 64px !important;\n    height: 64px;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) translateX(-16px);\n    background-color: white;\n    border-radius: 6px;\n    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n    z-index: 0;\n    width: 64px !important;\n    height: 64px;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
-exports.StepOptionStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-align: center;\n    padding: 8px 0;\n    border-radius: 6px;\n    cursor: pointer;\n    color: var(--grey-50);\n    background-color: transparent;\n    transition: color 0.3s ease;\n    z-index: 1;\n    font: var(--caption-semi-bold-11-13);\n    min-width: 34px;\n    span {\n        display: block;\n        text-align: center;\n        font: var(--body-semi-bold-14-17);\n        color: var(--grey-50);\n        b {\n            display: block;\n            font: var(--headline-extra-bold-18-22);\n            color: var(--dark);\n        }\n    }\n"], ["\n    text-align: center;\n    padding: 8px 0;\n    border-radius: 6px;\n    cursor: pointer;\n    color: var(--grey-50);\n    background-color: transparent;\n    transition: color 0.3s ease;\n    z-index: 1;\n    font: var(--caption-semi-bold-11-13);\n    min-width: 34px;\n    span {\n        display: block;\n        text-align: center;\n        font: var(--body-semi-bold-14-17);\n        color: var(--grey-50);\n        b {\n            display: block;\n            font: var(--headline-extra-bold-18-22);\n            color: var(--dark);\n        }\n    }\n"])));
+exports.StepOptionStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-align: center;\n    padding: 8px 0;\n    border-radius: 6px;\n    cursor: pointer;\n    color: var(--grey-50);\n    background-color: transparent;\n    transition: color 0.3s ease;\n    z-index: 1;\n    font: var(--body-semi-bold-14-17);\n    min-width: 34px;\n    span {\n        display: block;\n        text-align: center;\n        font: var(--body-semi-bold-14-17);\n        color: var(--grey-50);\n        b {\n            display: block;\n            font: var(--headline-extra-bold-18-22);\n            color: var(--dark);\n        }\n    }\n"], ["\n    text-align: center;\n    padding: 8px 0;\n    border-radius: 6px;\n    cursor: pointer;\n    color: var(--grey-50);\n    background-color: transparent;\n    transition: color 0.3s ease;\n    z-index: 1;\n    font: var(--body-semi-bold-14-17);\n    min-width: 34px;\n    span {\n        display: block;\n        text-align: center;\n        font: var(--body-semi-bold-14-17);\n        color: var(--grey-50);\n        b {\n            display: block;\n            font: var(--headline-extra-bold-18-22);\n            color: var(--dark);\n        }\n    }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,3 @@
 import { TooltipProps } from "./props";
-declare const Tooltip: ({ iconWidth, iconHeight, children, title, popupWidth, hasClickAction, hasCloseOnOutsideClick, isOpen, position, popupSize, popupLeft, popupRight, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ iconWidth, iconHeight, children, title, popupWidth, hasClickAction, hasCloseOnOutsideClick, isOpen, position, popupSize, popupLeft, popupRight, id, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -21,13 +21,13 @@ var Tooltip_styled_1 = require("./Tooltip.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var Tooltip = function (_a) {
-    var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TooltipDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TooltipDefault.iconHeight : _c, _d = _a.children, children = _d === void 0 ? props_1.TooltipDefault.children : _d, _e = _a.title, title = _e === void 0 ? props_1.TooltipDefault.title : _e, _f = _a.popupWidth, popupWidth = _f === void 0 ? props_1.TooltipDefault.popupWidth : _f, _g = _a.hasClickAction, hasClickAction = _g === void 0 ? props_1.TooltipDefault.hasClickAction : _g, _h = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _h === void 0 ? props_1.TooltipDefault.hasCloseOnOutsideClick : _h, _j = _a.isOpen, isOpen = _j === void 0 ? props_1.TooltipDefault.isOpen : _j, _k = _a.position, position = _k === void 0 ? props_1.TooltipDefault.position : _k, _l = _a.popupSize, popupSize = _l === void 0 ? props_1.TooltipDefault.popupSize : _l, _m = _a.popupLeft, popupLeft = _m === void 0 ? props_1.TooltipDefault.popupLeft : _m, _o = _a.popupRight, popupRight = _o === void 0 ? props_1.TooltipDefault.popupRight : _o;
-    var _p = (0, react_1.useState)(isOpen), isOpenTooltip = _p[0], setIsOpenTooltip = _p[1];
+    var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TooltipDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TooltipDefault.iconHeight : _c, _d = _a.children, children = _d === void 0 ? props_1.TooltipDefault.children : _d, _e = _a.title, title = _e === void 0 ? props_1.TooltipDefault.title : _e, _f = _a.popupWidth, popupWidth = _f === void 0 ? props_1.TooltipDefault.popupWidth : _f, _g = _a.hasClickAction, hasClickAction = _g === void 0 ? props_1.TooltipDefault.hasClickAction : _g, _h = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _h === void 0 ? props_1.TooltipDefault.hasCloseOnOutsideClick : _h, _j = _a.isOpen, isOpen = _j === void 0 ? props_1.TooltipDefault.isOpen : _j, _k = _a.position, position = _k === void 0 ? props_1.TooltipDefault.position : _k, _l = _a.popupSize, popupSize = _l === void 0 ? props_1.TooltipDefault.popupSize : _l, _m = _a.popupLeft, popupLeft = _m === void 0 ? props_1.TooltipDefault.popupLeft : _m, _o = _a.popupRight, popupRight = _o === void 0 ? props_1.TooltipDefault.popupRight : _o, _p = _a.id, id = _p === void 0 ? props_1.TooltipDefault.id : _p;
+    var _q = (0, react_1.useState)(isOpen), isOpenTooltip = _q[0], setIsOpenTooltip = _q[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, { name: iconWidth === "16px" ? "InfoSquareSmall" : "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] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, __assign({ id: id, 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, { name: iconWidth === "16px" ? "InfoSquareSmall" : "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, className: "customPopup" }, { children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { children: title }), children] }))] })));
 };
 exports.default = Tooltip;

package/dist/components/Tooltip/props.d.ts

@@ -16,6 +16,7 @@ export interface Tooltip {
     popupSize?: SIZE;
     popupLeft?: string;
     popupRight?: string;
+    id?: string;
 }
 export interface TooltipStyledProps {
     $popupRight?: string;

package/dist/components/Tooltip/props.js

@@ -16,4 +16,5 @@ exports.TooltipDefault = {
     popupSize: "",
     popupLeft: "",
     popupRight: "",
+    id: "",
 };

package/dist/jsons/categories.d.ts

@@ -1,20 +1,4 @@
 declare const _default: ({
-    id: number;
-    parentId: number;
-    name: string;
-    filterName: any;
-    isShowHeader: boolean;
-    slug: string;
-    productCount: number;
-    headerMediaUrl: any;
-    medias: any[];
-    icon: string;
-    children: any[];
-    isActive: boolean;
-    component?: undefined;
-    badgeText?: undefined;
-    hasCustomItem?: undefined;
-} | {
     id: number;
     parentId: number;
     name: string;
@@ -25,7 +9,7 @@ declare const _default: ({
     headerMediaUrl: string;
     medias: any[];
     icon: string;
-    children: ({
+    children: {
         id: number;
         parentId: number;
         name: string;
@@ -33,37 +17,13 @@ declare const _default: ({
         isShowHeader: boolean;
         slug: string;
         productCount: number;
-        headerMediaUrl: any;
+        headerMediaUrl: string;
         medias: any[];
-        children: {
-            id: number;
-            parentId: number;
-            name: string;
-            filterName: any;
-            isShowHeader: boolean;
-            slug: string;
-            productCount: number;
-            headerMediaUrl: any;
-            medias: any[];
-            children: any[];
-        }[];
-        isSeeAll?: undefined;
-    } | {
-        id: number;
-        name: string;
-        isSeeAll: boolean;
-        slug: string;
-        parentId?: undefined;
-        filterName?: undefined;
-        isShowHeader?: undefined;
-        productCount?: undefined;
-        headerMediaUrl?: undefined;
-        medias?: undefined;
-        children?: undefined;
-    })[];
-    isActive?: undefined;
+        children: any[];
+        parent: any[];
+    }[];
+    parent: any[];
     component?: undefined;
-    badgeText?: undefined;
     hasCustomItem?: undefined;
 } | {
     id: number;
@@ -91,24 +51,7 @@ declare const _default: ({
         medias: any[];
         children: any[];
     }[];
-    isActive?: undefined;
-    badgeText?: undefined;
-    hasCustomItem?: undefined;
-} | {
-    id: number;
-    parentId: number;
-    name: string;
-    filterName: any;
-    isShowHeader: boolean;
-    slug: string;
-    productCount: number;
-    headerMediaUrl: any;
-    medias: any[];
-    icon: string;
-    children: any[];
-    badgeText: string;
-    isActive?: undefined;
-    component?: undefined;
+    parent?: undefined;
     hasCustomItem?: undefined;
 } | {
     id: number;
@@ -123,8 +66,7 @@ declare const _default: ({
     icon: string;
     children: any[];
     hasCustomItem: boolean;
-    isActive?: undefined;
+    parent?: undefined;
     component?: undefined;
-    badgeText?: undefined;
 })[];
 export default _default;

package/dist/jsons/categories.js

@@ -3,503 +3,473 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 exports.default = [
     {
-        "id": 19,
+        "id": 1,
         "parentId": 0,
         "name": "Tüm Ürünler",
         "filterName": null,
         "isShowHeader": true,
-        "slug": "https://www.kiralarsin.com/tum-urunler",
+        "slug": "tum-urunler",
         "productCount": 0,
-        "headerMediaUrl": null,
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/tumurunler.jpg",
         "medias": [],
-        "icon": "NewYear",
         "children": [],
-        "isActive": true
+        "parent": [],
+        "icon": "Discovery",
     },
     {
-        "id": 31,
+        "id": 22,
         "parentId": 0,
         "name": "Kişisel Bakım",
         "filterName": null,
         "isShowHeader": true,
-        "slug": "https://www.kiralarsin.com/kisisel-bakim",
+        "slug": "kisisel-bakim",
         "productCount": 0,
-        "headerMediaUrl": "https://kiralarsin-test.s3.eu-central-1.amazonaws.com/products/categories/kisisel-bakim.jpg",
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/kisiselbakim.jpg",
         "medias": [],
         "icon": "Heart",
         "children": [
             {
-                "id": 50,
-                "parentId": 31,
-                "name": "Akıllı Tartı",
-                "filterName": null,
-                "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/akilli-tarti",
-                "productCount": 0,
-                "headerMediaUrl": null,
-                "medias": [],
-                "children": [
-                    {
-                        "id": 79,
-                        "parentId": 50,
-                        "name": "deneme kategori",
-                        "filterName": null,
-                        "isShowHeader": true,
-                        "slug": "https://www.kiralarsin.com/deneme",
-                        "productCount": 0,
-                        "headerMediaUrl": null,
-                        "medias": [],
-                        "children": []
-                    }
-                ]
-            },
-            {
-                "id": 56,
-                "parentId": 31,
+                "id": 46,
+                "parentId": 22,
                 "name": "Epilasyon",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/epilasyon",
+                "slug": "epilasyon",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 65,
-                "parentId": 31,
+                "id": 55,
+                "parentId": 22,
                 "name": "Masaj Aleti",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/masaj-aleti",
+                "slug": "masaj-aleti",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 72,
-                "parentId": 31,
+                "id": 62,
+                "parentId": 22,
                 "name": "Saç ve Cilt",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/sac-ve-cilt",
+                "slug": "sac-ve-cilt",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 73,
-                "parentId": 31,
+                "id": 63,
+                "parentId": 22,
                 "name": "Sağlık",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/saglik",
+                "slug": "saglik",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 77,
-                "parentId": 31,
+                "id": 67,
+                "parentId": 22,
                 "name": "Spor",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/spor",
+                "slug": "spor",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
-            },
-            {
-                "id": 99999901,
-                "name": "Tümünü gör",
-                "isSeeAll": true,
-                "slug": "https://www.kiralarsin.com/kisisel-bakim"
+                "children": [],
+                "parent": []
             }
-        ]
+        ],
+        "parent": []
     },
     {
-        "id": 33,
+        "id": 23,
         "parentId": 0,
-        "name": "Hobi / Oyun",
+        "name": "Hobi ve Oyun",
         "filterName": null,
         "isShowHeader": true,
-        "slug": "https://www.kiralarsin.com/hobi-oyun",
+        "slug": "hobi-oyun",
         "productCount": 0,
-        "headerMediaUrl": null,
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/hobiveoyun.jpg",
         "medias": [],
         "icon": "Game",
         "children": [
             {
-                "id": 20,
-                "parentId": 33,
+                "id": 30,
+                "parentId": 23,
                 "name": "Hoparlör",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/hoparlor",
+                "slug": "hoparlor",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 43,
-                "parentId": 33,
+                "id": 33,
+                "parentId": 23,
                 "name": "Konsollar ve Oyunlar",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/konsollar-ve-oyunlar",
+                "slug": "konsollar-ve-oyunlar",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 44,
-                "parentId": 33,
+                "id": 34,
+                "parentId": 23,
                 "name": "VR Gözlükler",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/vr-gozlukler",
+                "slug": "vr-gozlukler",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 45,
-                "parentId": 33,
+                "id": 35,
+                "parentId": 23,
                 "name": "E-kitap Okuyucu",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/e-kitap-okuyucu",
+                "slug": "e-kitap-okuyucu",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 46,
-                "parentId": 33,
+                "id": 36,
+                "parentId": 23,
                 "name": "Kamera",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/kamera",
+                "slug": "kamera",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 48,
-                "parentId": 33,
-                "name": "3D Printer",
+                "id": 49,
+                "parentId": 23,
+                "name": "Kamera Aksesuarları",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/3d-printer",
+                "slug": "kamera-aksesuarlari",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 53,
-                "parentId": 33,
-                "name": "Dikiş Makineleri ",
+                "id": 59,
+                "parentId": 23,
+                "name": "Müzik",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/dikis-makineleri",
+                "slug": "muzik",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 54,
-                "parentId": 33,
-                "name": "Drone",
+                "id": 65,
+                "parentId": 23,
+                "name": "Ses Kayıt ve Mikrofon",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/drone",
+                "slug": "ses-kayit-ve-mikrofon",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
-            },
+                "children": [],
+                "parent": []
+            }
+        ],
+        "parent": []
+    },
+    {
+        "id": 25,
+        "parentId": 0,
+        "name": "Akıllı Ev",
+        "filterName": null,
+        "isShowHeader": true,
+        "slug": "akilli-ev",
+        "productCount": 0,
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/akilliev.jpg",
+        "medias": [],
+        "icon": "House",
+        "children": [
             {
-                "id": 55,
-                "parentId": 33,
-                "name": "E-bisiklet",
+                "id": 32,
+                "parentId": 25,
+                "name": "Süpürgeler",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/e-bisiklet",
+                "slug": "supurgeler",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 59,
-                "parentId": 33,
-                "name": "Kamera Aksesuarları",
+                "id": 39,
+                "parentId": 25,
+                "name": "Akıllı Alarm",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/kamera-aksesuarlari",
+                "slug": "akilli-alarm",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 62,
-                "parentId": 33,
-                "name": "Kulaklık",
+                "id": 47,
+                "parentId": 25,
+                "name": "Ev Sineması",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/kulaklik",
+                "slug": "ev-sinemasi",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 69,
-                "parentId": 33,
-                "name": "Müzik",
+                "id": 48,
+                "parentId": 25,
+                "name": "Hava Temizleyici",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/muzik",
+                "slug": "hava-temizleyici",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 70,
-                "parentId": 33,
-                "name": "Optik Cihazlar",
+                "id": 50,
+                "parentId": 25,
+                "name": "Kırışıklık Giderici Ütü",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/optik-cihazlar",
+                "slug": "kirisiklik-giderici-utu",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 74,
-                "parentId": 33,
-                "name": "Scooter",
+                "id": 56,
+                "parentId": 25,
+                "name": "Matkap ve Vidalayıcılar",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/scooter",
+                "slug": "matkap-ve-vidalayicilar",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 75,
-                "parentId": 33,
-                "name": "Ses Kayıt ve Mikrofon",
+                "id": 58,
+                "parentId": 25,
+                "name": "Mutfak Aletleri",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/ses-kayit-ve-mikrofon",
+                "slug": "mutfak-aletleri",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
-            },
-            {
-                "id": 99999902,
-                "name": "Tümünü gör",
-                "isSeeAll": true,
-                "slug": "https://www.kiralarsin.com/hobi-oyun"
+                "children": [],
+                "parent": []
             }
-        ]
+        ],
+        "parent": []
     },
     {
-        "id": 34,
+        "id": 27,
         "parentId": 0,
-        "name": "Giyilebilir Teknoloji ",
+        "name": "Bebek ve Çocuk",
         "filterName": null,
         "isShowHeader": true,
-        "slug": "https://www.kiralarsin.com/giyilebilir-teknoloji",
+        "slug": "bebek-ve-cocuk",
         "productCount": 0,
-        "headerMediaUrl": null,
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/bebekvecocuk.jpg",
         "medias": [],
-        "icon": "Watch",
+        "icon": "Baby",
         "children": [
             {
-                "id": 41,
-                "parentId": 34,
-                "name": "Akıllı Saat",
+                "id": 42,
+                "parentId": 27,
+                "name": "Bebek Bakımı",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/akilli-saat",
+                "slug": "bebek-bakimi",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             }
-        ]
+        ],
+        "parent": []
     },
     {
-        "id": 35,
+        "id": 76,
         "parentId": 0,
-        "name": "Akıllı Ev",
+        "name": "Telefon",
         "filterName": null,
         "isShowHeader": true,
-        "slug": "https://www.kiralarsin.com/akilli-ev",
+        "slug": "telefon",
         "productCount": 0,
-        "headerMediaUrl": null,
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/telefon.jpg",
         "medias": [],
-        "icon": "House",
+        "icon": "Call",
         "children": [
             {
-                "id": 42,
-                "parentId": 35,
-                "name": "Süpürgeler",
+                "id": 77,
+                "parentId": 76,
+                "name": "Cep Telefonu",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/supurgeler",
+                "slug": "cep-telefonu",
                 "productCount": 0,
-                "headerMediaUrl": null,
+                "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/telefon.jpg",
                 "medias": [],
-                "children": []
-            },
+                "children": [],
+                "parent": []
+            }
+        ],
+        "parent": []
+    },
+    {
+        "id": 28,
+        "parentId": 0,
+        "name": "Tablet ve Laptop",
+        "filterName": null,
+        "isShowHeader": true,
+        "slug": "tablet-laptop",
+        "productCount": 0,
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/tabletvelaptop.jpg",
+        "medias": [],
+        "icon": "Laptop",
+        "children": [
             {
-                "id": 49,
-                "parentId": 35,
-                "name": "Akıllı Alarm",
+                "id": 53,
+                "parentId": 28,
+                "name": "Laptop",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/akilli-alarm",
+                "slug": "laptop",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 51,
-                "parentId": 35,
-                "name": "Asistan",
+                "id": 54,
+                "parentId": 28,
+                "name": "Laptop Aksesuarları",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/asistan",
+                "slug": "laptop-aksesuarlari",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
                 "id": 57,
-                "parentId": 35,
-                "name": "Ev Sineması",
+                "parentId": 28,
+                "name": "Monitör",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/ev-sinemasi",
+                "slug": "monitor",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
-            },
-            {
-                "id": 58,
-                "parentId": 35,
-                "name": "Hava Temizleyici",
-                "filterName": null,
-                "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/hava-temizleyici",
-                "productCount": 0,
-                "headerMediaUrl": null,
-                "medias": [],
-                "children": []
-            },
-            {
-                "id": 60,
-                "parentId": 35,
-                "name": "Kırışıklık Giderici Ütü",
-                "filterName": null,
-                "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/kirisiklik-giderici-utu",
-                "productCount": 0,
-                "headerMediaUrl": null,
-                "medias": [],
-                "children": []
-            },
-            {
-                "id": 66,
-                "parentId": 35,
-                "name": "Matkap ve Vidalayıcılar",
-                "filterName": null,
-                "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/matkap-ve-vidalayicilar",
-                "productCount": 0,
-                "headerMediaUrl": null,
-                "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
                 "id": 68,
-                "parentId": 35,
-                "name": "Mutfak Aletleri",
+                "parentId": 28,
+                "name": "Tablet Aksesuarları",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/mutfak-aletleri",
+                "slug": "tablet-aksesuarlari",
                 "productCount": 0,
                 "headerMediaUrl": null,
                 "medias": [],
-                "children": []
+                "children": [],
+                "parent": []
             },
             {
-                "id": 76,
-                "parentId": 35,
-                "name": "Ses Sistemi",
+                "id": 85,
+                "parentId": 28,
+                "name": "Tablet",
                 "filterName": null,
                 "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/ses-sistemi",
+                "slug": "tablet",
                 "productCount": 0,
-                "headerMediaUrl": null,
+                "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/tablet-ve-laptop.jpg",
                 "medias": [],
-                "children": []
-            },
-            {
-                "id": 99999903,
-                "name": "Tümünü gör",
-                "isSeeAll": true,
-                "slug": "https://www.kiralarsin.com/akilli-ev"
+                "children": [],
+                "parent": []
             }
-        ]
+        ],
+        "parent": []
     },
     {
-        "id": 36,
+        "id": 31,
         "parentId": 0,
-        "name": "Telefon ",
+        "name": "Akıllı Saat",
         "filterName": null,
         "isShowHeader": true,
-        "slug": "https://www.kiralarsin.com/telefon",
+        "slug": "akilli-saat",
         "productCount": 0,
-        "headerMediaUrl": null,
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/giyilebilirteknoloji.jpg",
         "medias": [],
-        "icon": "Call",
-        "children": [
-            {
-                "id": 47,
-                "parentId": 36,
-                "name": "Akıllı Telefon",
-                "filterName": null,
-                "isShowHeader": true,
-                "slug": "https://www.kiralarsin.com/akilli-Telefon",
-                "productCount": 0,
-                "headerMediaUrl": null,
-                "medias": [],
-                "children": []
-            }
-        ]
+        "children": [],
+        "parent": [],
+        "icon": "Watch",
     },
     {
         "id": 40,
@@ -544,18 +514,18 @@ exports.default = [
         ]
     },
     {
-        "id": 41,
+        "id": 83,
         "parentId": 0,
-        "name": "Yeni Ürünler",
+        "name": "İndirimli Ürünler",
         "filterName": null,
         "isShowHeader": true,
-        "slug": "https://www.kiralarsin.com/sevgililer-gunu",
+        "slug": "indirimli-urunler",
         "productCount": 0,
-        "headerMediaUrl": null,
+        "headerMediaUrl": "https://kiralarsin.s3.eu-central-1.amazonaws.com/categories/indirim.jpg",
         "medias": [],
-        "icon": "Valentine",
         "children": [],
-        "badgeText": "New"
+        "parent": [],
+        "icon": "Announcement",
     },
     {
         "id": 41,

package/package.json

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