krl-alfred 2.17.24 → 2.17.26

package/dist/components/ActionButton/ActionButton.d.ts

@@ -1,3 +1,3 @@
 import { ActionButtonProps } from "./props";
-declare const ActionButton: ({ width, title, date, img, isMonthVisible, hasTimer, isLoading, ...other }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionButton: ({ width, title, date, img, isMonthVisible, hasTimer, isLoading, hasInfo, infoText, ...other }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionButton;

package/dist/components/ActionButton/ActionButton.js

@@ -33,12 +33,12 @@ var Button_1 = __importDefault(require("../Button"));
 var date_fns_1 = require("date-fns");
 var react_i18next_1 = require("react-i18next");
 var ActionButton = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.img, img = _e === void 0 ? props_1.ActionButtonDefault.img : _e, _f = _a.isMonthVisible, isMonthVisible = _f === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _f, _g = _a.hasTimer, hasTimer = _g === void 0 ? props_1.ActionButtonDefault.hasTimer : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.ActionButtonDefault.isLoading : _h, other = __rest(_a, ["width", "title", "date", "img", "isMonthVisible", "hasTimer", "isLoading"]);
+    var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.img, img = _e === void 0 ? props_1.ActionButtonDefault.img : _e, _f = _a.isMonthVisible, isMonthVisible = _f === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _f, _g = _a.hasTimer, hasTimer = _g === void 0 ? props_1.ActionButtonDefault.hasTimer : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.ActionButtonDefault.isLoading : _h, _j = _a.hasInfo, hasInfo = _j === void 0 ? props_1.ActionButtonDefault.hasInfo : _j, _k = _a.infoText, infoText = _k === void 0 ? props_1.ActionButtonDefault.infoText : _k, other = __rest(_a, ["width", "title", "date", "img", "isMonthVisible", "hasTimer", "isLoading", "hasInfo", "infoText"]);
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _j = (0, react_1.useState)(0), months = _j[0], setMonths = _j[1];
-    var _k = (0, react_1.useState)(0), days = _k[0], setDays = _k[1];
-    var _l = (0, react_1.useState)(0), minutes = _l[0], setMinutes = _l[1];
-    var _m = (0, react_1.useState)(0), hours = _m[0], setHours = _m[1];
+    var _l = (0, react_1.useState)(0), months = _l[0], setMonths = _l[1];
+    var _m = (0, react_1.useState)(0), days = _m[0], setDays = _m[1];
+    var _o = (0, react_1.useState)(0), minutes = _o[0], setMinutes = _o[1];
+    var _p = (0, react_1.useState)(0), hours = _p[0], setHours = _p[1];
     //const [secounds,setSecounds] = useState(0);
     var deadline = new Date(date).getTime();
     var count = function () {
@@ -59,6 +59,6 @@ var ActionButton = function (_a) {
     (0, react_1.useEffect)(function () {
         count();
     }, [date]);
-    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width, "$hasTimer": hasTimer }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: img })), (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: title } }), !hasTimer && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" }))] })), hasTimer && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading })] })] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width, "$hasTimer": hasTimer, "$hasInfo": hasInfo }, other, { children: [hasInfo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "actionInfoText" }, { children: infoText })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dashedLine" }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 335 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.0009 0C12.653 0 15.1966 1.05357 17.0719 2.92893C18.9473 4.8043 20.0009 7.34783 20.0009 10C20.0009 12.6522 18.9473 15.1957 17.0719 17.0711C15.1966 18.9464 12.653 20 10.0009 20L10.0009 10V0Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.0009 9.5L306.999 10.4925", stroke: "white", "stroke-width": "6", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-dasharray": "12 12" }), (0, jsx_runtime_1.jsx)("path", { d: "M324.999 20C322.347 20 319.804 18.9464 317.928 17.0711C316.053 15.1957 314.999 12.6522 314.999 10C314.999 7.34784 316.053 4.8043 317.928 2.92893C319.804 1.05357 322.347 -3.16267e-08 324.999 0V10V20Z", fill: "white" })] })) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actionInner" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: img })), (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: title } }), !hasTimer && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" }))] })), hasTimer && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading })] })] })))] }))] })));
 };
 exports.default = ActionButton;

package/dist/components/ActionButton/ActionButton.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionButtonStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1rem 1.5rem;\n    width: ", ";\n    align-items: center;\n    justify-content: space-between;\n    color: var(--dark);\n    box-sizing: border-box;\n    cursor: pointer;\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n    \n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    .top, .bottom {\n        display: grid;\n        grid-template-columns: ", ";\n        align-content: center;\n        align-items: center;\n    }\n\n    .top {\n        .icon {\n            margin-right: 1rem;\n\n            * {\n                display: block !important;\n            }\n        }\n\n        .title {\n            display: block;\n            font: var(--body-bold-14-17);\n        }\n    }\n\n    .bottom {\n        margin-top: 0.5rem;\n\n        > div {\n            display: grid;\n            grid-template-columns: 1fr auto;\n            align-content: center;\n            align-items: center;\n            justify-content: space-between;\n\n            .timer {\n                display: grid;\n                grid-template-columns: repeat(5, auto);\n                align-items: center;\n                justify-content: start;\n\n                .box {\n                    width: 40px;\n                    height: 48px;\n                    background-color: white;\n                    border-radius: 0.25rem;\n                    text-align: center;\n                    display: grid;\n                    align-items: center;\n                    align-content: center;\n                    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n                    .timerTitle {\n                        font: var(--title-extra-bold-16-19);\n                    }\n\n                    .timerDescription {\n                        font: var(--caption-regular-10-12);\n                    }\n                }\n\n                .dots {\n                    margin: 0 4px;\n                    width: 4px;\n                    font: var(--caption-bold-12-15);\n                }\n            }\n        }\n    }\n"], ["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1rem 1.5rem;\n    width: ", ";\n    align-items: center;\n    justify-content: space-between;\n    color: var(--dark);\n    box-sizing: border-box;\n    cursor: pointer;\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n    \n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    .top, .bottom {\n        display: grid;\n        grid-template-columns: ", ";\n        align-content: center;\n        align-items: center;\n    }\n\n    .top {\n        .icon {\n            margin-right: 1rem;\n\n            * {\n                display: block !important;\n            }\n        }\n\n        .title {\n            display: block;\n            font: var(--body-bold-14-17);\n        }\n    }\n\n    .bottom {\n        margin-top: 0.5rem;\n\n        > div {\n            display: grid;\n            grid-template-columns: 1fr auto;\n            align-content: center;\n            align-items: center;\n            justify-content: space-between;\n\n            .timer {\n                display: grid;\n                grid-template-columns: repeat(5, auto);\n                align-items: center;\n                justify-content: start;\n\n                .box {\n                    width: 40px;\n                    height: 48px;\n                    background-color: white;\n                    border-radius: 0.25rem;\n                    text-align: center;\n                    display: grid;\n                    align-items: center;\n                    align-content: center;\n                    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n                    .timerTitle {\n                        font: var(--title-extra-bold-16-19);\n                    }\n\n                    .timerDescription {\n                        font: var(--caption-regular-10-12);\n                    }\n                }\n\n                .dots {\n                    margin: 0 4px;\n                    width: 4px;\n                    font: var(--caption-bold-12-15);\n                }\n            }\n        }\n    }\n"])), function (props) { return props.$width; }, devices_1.devices.mdUp, devices_1.devices.md, function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
+exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n    .actionInfoText{\n        background-color: var(--primary-opacity-5);\n        font: var(--caption-semi-bold-10-12);\n        color: var(--primary);\n        padding-top:1rem;\n        padding-bottom:0.5rem;\n        padding-left:1.5rem;\n        width: ", ";\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n    .dashedLine {\n        width: ", ";\n        position: relative;\n        width: 100%;\n        background: #fbf7ff; /* arka plan rengi */\n        overflow: hidden;\n        height:20px;\n            svg{\n                height:20px;\n                position: absolute;\n                top: 0;\n                transform: translateX(-50%);\n                left: 50%;\n                width: calc(100% + 20px)\n            }\n    }\n\n    .actionInner{\n        border-radius: 0.5rem;\n        ", "\n        background-color: var(--primary-opacity-5);\n        padding: 1rem 1.5rem;\n        align-items: center;\n        justify-content: space-between;\n        color: var(--dark);\n        box-sizing: border-box;\n        cursor: pointer;\n        @media only screen and ", " {\n            &:hover {\n                button {\n                    background-color: var(--primary-hover);\n                }\n            }\n        }\n        \n        &:active {\n            button {\n                background-color: var(--primary-press);\n                @media only screen and ", " {\n                    background-color: var(--primary-hover);\n                }\n            }\n        }\n\n        .top, .bottom {\n            display: grid;\n            grid-template-columns: ", ";\n            align-content: center;\n            align-items: center;\n        }\n\n        .top {\n            .icon {\n                margin-right: 1rem;\n\n                * {\n                    display: block !important;\n                }\n            }\n\n            .title {\n                display: block;\n                font: var(--body-bold-14-17);\n            }\n        }\n\n        .bottom {\n            margin-top: 0.5rem;\n\n            > div {\n                display: grid;\n                grid-template-columns: 1fr auto;\n                align-content: center;\n                align-items: center;\n                justify-content: space-between;\n\n                .timer {\n                    display: grid;\n                    grid-template-columns: repeat(5, auto);\n                    align-items: center;\n                    justify-content: start;\n\n                    .box {\n                        width: 40px;\n                        height: 48px;\n                        background-color: white;\n                        border-radius: 0.25rem;\n                        text-align: center;\n                        display: grid;\n                        align-items: center;\n                        align-content: center;\n                        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n                        .timerTitle {\n                            font: var(--title-extra-bold-16-19);\n                        }\n\n                        .timerDescription {\n                            font: var(--caption-regular-10-12);\n                        }\n                    }\n\n                    .dots {\n                        margin: 0 4px;\n                        width: 4px;\n                        font: var(--caption-bold-12-15);\n                    }\n                }\n            }\n        }\n    }\n    \n"], ["\n    width: ", ";\n    .actionInfoText{\n        background-color: var(--primary-opacity-5);\n        font: var(--caption-semi-bold-10-12);\n        color: var(--primary);\n        padding-top:1rem;\n        padding-bottom:0.5rem;\n        padding-left:1.5rem;\n        width: ", ";\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n    .dashedLine {\n        width: ", ";\n        position: relative;\n        width: 100%;\n        background: #fbf7ff; /* arka plan rengi */\n        overflow: hidden;\n        height:20px;\n            svg{\n                height:20px;\n                position: absolute;\n                top: 0;\n                transform: translateX(-50%);\n                left: 50%;\n                width: calc(100% + 20px)\n            }\n    }\n\n    .actionInner{\n        border-radius: 0.5rem;\n        ", "\n        background-color: var(--primary-opacity-5);\n        padding: 1rem 1.5rem;\n        align-items: center;\n        justify-content: space-between;\n        color: var(--dark);\n        box-sizing: border-box;\n        cursor: pointer;\n        @media only screen and ", " {\n            &:hover {\n                button {\n                    background-color: var(--primary-hover);\n                }\n            }\n        }\n        \n        &:active {\n            button {\n                background-color: var(--primary-press);\n                @media only screen and ", " {\n                    background-color: var(--primary-hover);\n                }\n            }\n        }\n\n        .top, .bottom {\n            display: grid;\n            grid-template-columns: ", ";\n            align-content: center;\n            align-items: center;\n        }\n\n        .top {\n            .icon {\n                margin-right: 1rem;\n\n                * {\n                    display: block !important;\n                }\n            }\n\n            .title {\n                display: block;\n                font: var(--body-bold-14-17);\n            }\n        }\n\n        .bottom {\n            margin-top: 0.5rem;\n\n            > div {\n                display: grid;\n                grid-template-columns: 1fr auto;\n                align-content: center;\n                align-items: center;\n                justify-content: space-between;\n\n                .timer {\n                    display: grid;\n                    grid-template-columns: repeat(5, auto);\n                    align-items: center;\n                    justify-content: start;\n\n                    .box {\n                        width: 40px;\n                        height: 48px;\n                        background-color: white;\n                        border-radius: 0.25rem;\n                        text-align: center;\n                        display: grid;\n                        align-items: center;\n                        align-content: center;\n                        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n                        .timerTitle {\n                            font: var(--title-extra-bold-16-19);\n                        }\n\n                        .timerDescription {\n                            font: var(--caption-regular-10-12);\n                        }\n                    }\n\n                    .dots {\n                        margin: 0 4px;\n                        width: 4px;\n                        font: var(--caption-bold-12-15);\n                    }\n                }\n            }\n        }\n    }\n    \n"])), function (props) { return props.$width; }, function (props) { return props.$width; }, function (props) { return props.$width; }, function (props) { return props.$hasInfo ? "\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n            padding-top:0.5rem;\n            " : ""; }, devices_1.devices.mdUp, devices_1.devices.md, function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
 var templateObject_1;

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

@@ -7,10 +7,13 @@ export interface ActionButton {
     isMonthVisible?: boolean;
     hasTimer?: boolean;
     isLoading?: boolean;
+    hasInfo?: boolean;
+    infoText?: string;
 }
 export declare const ActionButtonDefault: ActionButton;
 export interface ActionButtonStyledProps {
     $width?: string;
     $hasTimer?: boolean;
+    $hasInfo?: boolean;
 }
 export type ActionButtonProps = typeof ActionButtonDefault;

package/dist/components/ActionButton/props.js

@@ -8,5 +8,7 @@ exports.ActionButtonDefault = {
     img: "",
     isMonthVisible: false,
     hasTimer: true,
-    isLoading: false
+    isLoading: false,
+    hasInfo: false,
+    infoText: "test"
 };

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: ({ width, title, date, img, isMonthVisible, hasTimer, isLoading, ...other }: import("../props").ActionButton) => import("react/jsx-runtime").JSX.Element;
+    component: ({ width, title, date, img, isMonthVisible, hasTimer, isLoading, hasInfo, infoText, ...other }: import("../props").ActionButton) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     argTypes: {
         onClick: {
@@ -23,5 +23,7 @@ export declare const Default: {
         onClick: (e: any) => void;
         isMonthVisible: boolean;
         isLoading: boolean;
+        hasInfo: boolean;
+        infoText: string;
     };
 };

package/dist/components/ActionButton/stories/ActionButton.stories.js

@@ -29,5 +29,7 @@ exports.Default = {
         onClick: function (e) { return console.log(e); },
         isMonthVisible: false,
         isLoading: false,
+        hasInfo: true,
+        infoText: "UZAT10 koduyla %10 indirim ",
     },
 };

package/dist/components/Badges/layouts/belt/index.d.ts

@@ -1,3 +1,3 @@
 import { BadgesProps } from "./../../props";
-declare const Belt: ({ title, size, hasResponsive, }: BadgesProps) => import("react/jsx-runtime").JSX.Element;
+declare const Belt: ({ title, size, hasResponsive, variant, }: BadgesProps) => import("react/jsx-runtime").JSX.Element;
 export default Belt;

package/dist/components/Badges/layouts/belt/index.js

@@ -19,7 +19,7 @@ var props_1 = require("./../../props");
 var belt_styled_1 = require("./belt.styled");
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var Belt = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.BadgesDefault.title : _b, _c = _a.size, size = _c === void 0 ? props_1.BadgesDefault.size : _c, _d = _a.hasResponsive, hasResponsive = _d === void 0 ? props_1.BadgesDefault.hasResponsive : _d;
-    return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({ "$hasResponsive": hasResponsive, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: size === "small" ? "56px" : "90px", height: size === "small" ? "56px" : "90px" }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: title }))] })));
+    var _b = _a.title, title = _b === void 0 ? props_1.BadgesDefault.title : _b, _c = _a.size, size = _c === void 0 ? props_1.BadgesDefault.size : _c, _d = _a.hasResponsive, hasResponsive = _d === void 0 ? props_1.BadgesDefault.hasResponsive : _d, _e = _a.variant, variant = _e === void 0 ? props_1.BadgesDefault.variant : _e;
+    return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({ "$hasResponsive": hasResponsive, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { hasColorChanged: false, name: variant === "secondary" ? "RectanglePurple" : "Rectangle", width: size === "small" ? "56px" : "90px", height: size === "small" ? "56px" : "90px" }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: title }))] })));
 };
 exports.default = Belt;

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

@@ -21,5 +21,6 @@ export default _default;
 export declare const Default: {
     args: {
         title: string;
+        variant: string;
     };
 };

package/dist/components/Badges/stories/Badges.stories.js

@@ -44,5 +44,6 @@ exports.default = {
 exports.Default = {
     args: {
         title: "İndirimli",
+        variant: "primary",
     },
 };

package/dist/components/BlogCard/BlogCard.js

@@ -16,6 +16,6 @@ var props_1 = require("./props");
 var BlogCard_styled_1 = require("./BlogCard.styled");
 var BlogCard = function (props) {
     var _a = props.authorTitle, authorTitle = _a === void 0 ? props_1.BlogCardDefault.authorTitle : _a, _b = props.authorImg, authorImg = _b === void 0 ? props_1.BlogCardDefault.authorImg : _b, _c = props.contentImg, contentImg = _c === void 0 ? props_1.BlogCardDefault.contentImg : _c, _d = props.tags, tags = _d === void 0 ? props_1.BlogCardDefault.tags : _d, _e = props.date, date = _e === void 0 ? props_1.BlogCardDefault.date : _e, _f = props.contentTitle, contentTitle = _f === void 0 ? props_1.BlogCardDefault.contentTitle : _f, _g = props.contentDesc, contentDesc = _g === void 0 ? props_1.BlogCardDefault.contentDesc : _g, _h = props.direction, direction = _h === void 0 ? props_1.BlogCardDefault.direction : _h, _j = props.size, size = _j === void 0 ? props_1.BlogCardDefault.size : _j;
-    return ((0, jsx_runtime_1.jsxs)(BlogCard_styled_1.BlogCardStyled, __assign({ "$direction": direction, "$size": size }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "author" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: authorImg })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: authorTitle }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "content" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "contentImg" }, { children: contentImg })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "contentBottom" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "tagWrapper" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "tags" }, { children: tags })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "date" }, { children: date }))] })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "contentTitle" }, { children: contentTitle })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "contentDesc" }, { children: contentDesc }))] }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(BlogCard_styled_1.BlogCardStyled, __assign({ "$direction": direction, "$size": size }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "author" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: authorImg })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: authorTitle }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "content" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "contentImg" }, { children: contentImg })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "contentBottom" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "tagWrapper" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "tags" }, { children: tags })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "date" }, { children: date }))] })), (0, jsx_runtime_1.jsx)("strong", { className: "contentTitle", dangerouslySetInnerHTML: { __html: contentTitle } }), (0, jsx_runtime_1.jsx)("p", __assign({ className: "contentDesc" }, { children: contentDesc }))] }))] }))] })));
 };
 exports.default = BlogCard;

package/dist/components/Icon/iconList/RectanglePurple.d.ts

@@ -0,0 +1,2 @@
+export default SvgRectanglePurple;
+declare function SvgRectanglePurple(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/iconList/RectanglePurple.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgRectanglePurple = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 90, height: 90, viewBox: "0 0 90 90", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M5.21017e-05 62.2132C7.71369e-05 58.235 1.58042 54.4197 4.39344 51.6067L52.5829 3.41714C54.7708 1.22916 57.7384 -3.13031e-05 60.8326 -3.55178e-05L82 -5.45681e-05C86.4183 -5.59168e-05 90 3.58166 90 7.99994L83 7.99994L7.99997 82.9999V89.9999C3.58164 89.9999 -0.000102999 86.4181 -7.50132e-05 81.9998L5.21017e-05 62.2132Z", fill: "url(#paint0_linear_35896_58197)" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", __assign({ id: "paint0_linear_35896_58197", x1: 93.9999, y1: 3.99994, x2: 73, y2: -17, gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#E80142" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "#FA3098" })] })) })] }))); };
+exports.default = SvgRectanglePurple;

package/dist/components/Icon/iconList/index.d.ts

@@ -488,6 +488,9 @@ export namespace iconList {
     function Rectangle({ ...props }: {
         [x: string]: any;
     }): import("react/jsx-runtime").JSX.Element;
+    function RectanglePurple({ ...props }: {
+        [x: string]: any;
+    }): import("react/jsx-runtime").JSX.Element;
     function Sandwatch({ ...props }: {
         [x: string]: any;
     }): import("react/jsx-runtime").JSX.Element;
@@ -898,6 +901,7 @@ import { default as RadioButtonElementDisabled } from "./RadioButtonElementDisab
 import { default as RadioButtonElementInvalid } from "./RadioButtonElementInvalid";
 import { default as RadioButtonElementUnchecked } from "./RadioButtonElementUnchecked";
 import { default as Rectangle } from "./Rectangle";
+import { default as RectanglePurple } from "./RectanglePurple";
 import { default as Sandwatch } from "./Sandwatch";
 import { default as Scan } from "./Scan";
 import { default as Search } from "./Search";
@@ -980,4 +984,4 @@ import { default as UserPlus } from "./UserPlus";
 import { default as Wphk } from "./Wphk";
 import { default as Youtubehk } from "./Youtubehk";
 import { default as Youtubewithfooter } from "./Youtubewithfooter";
-export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Completed, Copy, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PlusBig, PlusCircle, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Swap, SwitchPassive, Tamamlarsin, Tick, TickSquare, TicketStar, Ticket, TimeCircle, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, TextLoading, Tiktok, UserPlus, Wphk, Youtubehk, Youtubewithfooter };
+export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Completed, Copy, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PlusBig, PlusCircle, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Swap, SwitchPassive, Tamamlarsin, Tick, TickSquare, TicketStar, Ticket, TimeCircle, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, TextLoading, Tiktok, UserPlus, Wphk, Youtubehk, Youtubewithfooter };

package/dist/components/Icon/iconList/index.js

@@ -28,8 +28,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CallMissed = exports.Call = exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeft = exports.ArrowSmallDownStroke = exports.ArrowSmallDown = exports.ArrowSharemini = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGoSmall = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.Announcement = exports.Activity = void 0;
 exports.Graph = exports.Gift = exports.Game = exports.Folder = exports.Flash = exports.FilterUp = exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ElSatis = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.DownloadMini = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Completed = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = void 0;
 exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = void 0;
-exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusCircle = exports.PlusBig = exports.Pause = exports.Password = void 0;
-exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = void 0;
+exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusCircle = exports.PlusBig = exports.Pause = exports.Password = void 0;
+exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Activity_1 = __importDefault(require("./Activity"));
 Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -357,6 +357,8 @@ var RadioButtonElementUnchecked_1 = __importDefault(require("./RadioButtonElemen
 Object.defineProperty(exports, "RadioButtonElementUnchecked", { enumerable: true, get: function () { return RadioButtonElementUnchecked_1.default; } });
 var Rectangle_1 = __importDefault(require("./Rectangle"));
 Object.defineProperty(exports, "Rectangle", { enumerable: true, get: function () { return Rectangle_1.default; } });
+var RectanglePurple_1 = __importDefault(require("./RectanglePurple"));
+Object.defineProperty(exports, "RectanglePurple", { enumerable: true, get: function () { return RectanglePurple_1.default; } });
 var Sandwatch_1 = __importDefault(require("./Sandwatch"));
 Object.defineProperty(exports, "Sandwatch", { enumerable: true, get: function () { return Sandwatch_1.default; } });
 var Scan_1 = __importDefault(require("./Scan"));
@@ -1174,6 +1176,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Rectangle_1.default, __assign({}, props));
     },
+    RectanglePurple: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(RectanglePurple_1.default, __assign({}, props));
+    },
     Sandwatch: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Sandwatch_1.default, __assign({}, props));

package/dist/components/ProductCardVertical/ProductCardVertical.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, ...other }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, ...other }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/ProductCardVertical/ProductCardVertical.js

@@ -32,8 +32,8 @@ var ProductCardVertical_styled_1 = require("./ProductCardVertical.styled");
 var react_i18next_1 = require("react-i18next");
 var Badges_1 = __importDefault(require("../Badges"));
 var ProductCardVertical = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock"]);
+    var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock", "hasBeltBadge", "beltBadgeVariant", "beltBadgeTitle", "imageInfoText"]);
     var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasDiscount && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: t("discount") }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", __assign({ className: "imageInfoText" }, { children: imageInfoText }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
 };
 exports.default = (0, react_1.memo)(ProductCardVertical);

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

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

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

@@ -15,6 +15,10 @@ export interface ProductCardVertical {
     customBadge?: React.ReactNode;
     hasNewImageType?: boolean;
     hasOutOfStock?: boolean;
+    hasBeltBadge?: boolean;
+    beltBadgeVariant?: string;
+    beltBadgeTitle?: string;
+    imageInfoText?: string;
 }
 export interface ProductCardVerticalStyledProps {
     $discountRate?: number;

package/dist/components/ProductCardVertical/props.js

@@ -16,5 +16,9 @@ exports.ProductCardVerticalDefault = {
     hasCustomBadge: false,
     customBadge: null,
     hasNewImageType: false,
-    hasOutOfStock: false
+    hasOutOfStock: false,
+    hasBeltBadge: false,
+    beltBadgeVariant: "primary",
+    beltBadgeTitle: "discount",
+    imageInfoText: null
 };

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

@@ -29,5 +29,11 @@ export declare const Default: {
         hasCustomBadge: boolean;
         isResponsive: boolean;
         hasOutOfStock: boolean;
+        badgeVariant: string;
+        customBadge: import("react/jsx-runtime").JSX.Element;
+        beltBadgeVariant: string;
+        hasBeltBadge: boolean;
+        beltBadgeTitle: string;
+        imageInfoText: import("react/jsx-runtime").JSX.Element;
     };
 };

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

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardVertical_1 = __importDefault(require("../ProductCardVertical"));
+var Badges_1 = __importDefault(require("../../Badges"));
 exports.default = {
     title: 'Components/ProductCard/ProductCard Vertical',
     component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "240px" } }, { children: (0, jsx_runtime_1.jsx)(ProductCardVertical_1.default, __assign({}, props)) })); },
@@ -41,5 +42,11 @@ exports.Default = {
         hasCustomBadge: false,
         isResponsive: false,
         hasOutOfStock: false,
+        badgeVariant: "primary",
+        customBadge: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: "test" }),
+        beltBadgeVariant: "primary",
+        hasBeltBadge: true,
+        beltBadgeTitle: "discount",
+        imageInfoText: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "A\u011EUST" }), " koduyla sepette 250 TL indirim"] }),
     },
 };

package/dist/components/VideoCard/stories/VideoCard.stories.js

@@ -27,6 +27,6 @@ exports.Default = {
     args: {
         poster: "https://www.kiralarsin.com/Banners/kiralama-uzatmain-new.svg",
         title: "Buharlı temizlik makinesini kullanmaya emin olamıyordum. ",
-        videoUrl: "https://cdn.upvi.org/anonymous/QLjyqoi0ceCdkaE_1751446819.mp4"
+        videoUrl: "https://kiralarsin.s3.eu-central-1.amazonaws.com/video/bugu%CC%88n-kiralarsin-dan-kiraladig%CC%86im-insta360-ile-keyifli-bi-motosiklet-gezisi-yaptim.mp4"
     },
 };

package/dist/hooks/useVideoPlayer.js

@@ -39,10 +39,6 @@ var useVideoPlayer = function () {
                 }
             });
             video.play();
-            // Automatically unmute when playing
-            if (video.muted) {
-                video.muted = false;
-            }
         }
         else {
             video.pause();

package/package.json

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