krl-alfred 2.19.0 → 2.20.1

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { AddressCardProps } from "../props";
 declare const _default: {
     title: string;
     component: (props: any) => React.JSX.Element;
@@ -158,7 +159,7 @@ export declare const CustomMinHeight: {
     };
 };
 export declare const WithContent: {
-    render: (args: any) => React.JSX.Element;
+    render: (args: AddressCardProps) => React.JSX.Element;
     args: {
         title: string;
         description: any;

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

@@ -19,6 +19,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var AddressCard_1 = __importDefault(require("../AddressCard"));
 var Input_1 = __importDefault(require("../../Input"));
+var WithContentStory = function (args) {
+    var _a;
+    var _b = react_1.default.useState((_a = args.checked) !== null && _a !== void 0 ? _a : false), checked = _b[0], setChecked = _b[1];
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '305px' } }, { children: (0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, args, { checked: checked, onChange: function () { return setChecked(function (prev) { return !prev; }); }, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: '0 0 0.5rem', font: 'var(--body-regular-14-17)', color: 'var(--dark)' } }, { children: "Aboneli\u011Fin se\u00E7ti\u011Fin tarihte otomatik olarak yeniden ba\u015Flar." })), (0, jsx_runtime_1.jsx)(Input_1.default, { label: "Tarih", placeholder: "GG/AA/YYYY", type: "text" })] }) })) })));
+};
 exports.default = {
     title: 'Components/AddressCard',
     component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '305px' } }, { children: (0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, props)) })); },
@@ -167,11 +172,7 @@ exports.CustomMinHeight = {
     },
 };
 exports.WithContent = {
-    render: function (args) {
-        var _a;
-        var _b = react_1.default.useState((_a = args.checked) !== null && _a !== void 0 ? _a : false), checked = _b[0], setChecked = _b[1];
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '305px' } }, { children: (0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, args, { checked: checked, onChange: function () { return setChecked(function (prev) { return !prev; }); }, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: '0 0 0.5rem', font: 'var(--body-regular-14-17)', color: 'var(--dark)' } }, { children: "Aboneli\u011Fin se\u00E7ti\u011Fin tarihte otomatik olarak yeniden ba\u015Flar." })), (0, jsx_runtime_1.jsx)(Input_1.default, { label: "Tarih", placeholder: "GG/AA/YYYY", type: "text" })] }) })) })));
-    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(WithContentStory, __assign({}, args)); },
     args: {
         title: "Belirli bir tarihte tekrar başlasın",
         description: null,

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CheckboxProps } from "./props";
-declare const Checkbox: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, color, textSize, verticalAlign, required, readOnly, }: CheckboxProps) => import("react").JSX.Element;
+declare const Checkbox: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, textSize, verticalAlign, required, readOnly, }: CheckboxProps) => import("react").JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -14,15 +14,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./props");
 var Checkbox_styled_1 = require("./Checkbox.styled");
-var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
+var getRootCssVariable_1 = require("../../utils/getRootCssVariable");
 var Checkbox = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.color, color = _m === void 0 ? props_1.CheckboxDefault.color : _m, _o = _a.textSize, textSize = _o === void 0 ? props_1.CheckboxDefault.textSize : _o, _p = _a.verticalAlign, verticalAlign = _p === void 0 ? props_1.CheckboxDefault.verticalAlign : _p, _q = _a.required, required = _q === void 0 ? props_1.CheckboxDefault.required : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.CheckboxDefault.readOnly : _r;
-    var _s = (0, react_1.useState)(color), inputColor = _s[0], setInputColor = _s[1];
+    var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.textSize, textSize = _m === void 0 ? props_1.CheckboxDefault.textSize : _m, _o = _a.verticalAlign, verticalAlign = _o === void 0 ? props_1.CheckboxDefault.verticalAlign : _o, _p = _a.required, required = _p === void 0 ? props_1.CheckboxDefault.required : _p, _q = _a.readOnly, readOnly = _q === void 0 ? props_1.CheckboxDefault.readOnly : _q;
     var t = (0, react_i18next_1.useTranslation)().t;
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
-    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$color": inputColor, "$textSize": textSize, "$verticalAlign": verticalAlign, "$required": required }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, readOnly: readOnly }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "indicator" }), label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$color": (0, getRootCssVariable_1.getPrimaryColor)(), "$textSize": textSize, "$verticalAlign": verticalAlign, "$required": required }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, readOnly: readOnly }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "indicator" }), label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
 };
 exports.default = Checkbox;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, color, textSize, verticalAlign, required, readOnly, }: import("../props").Checkbox) => import("react").JSX.Element;
+    component: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, textSize, verticalAlign, required, readOnly, }: import("../props").Checkbox) => import("react").JSX.Element;
     tags: string[];
     argTypes: {
         size: {

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

@@ -0,0 +1,3 @@
+export default SvgPlayMd;
+declare function SvgPlayMd(props: any): React.JSX.Element;
+import * as React from "react";

package/dist/components/Icon/iconList/PlayMd.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 SvgPlayMd = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M17.3311 10.792C17.9591 11.4715 17.9594 12.5276 17.3311 13.207L17.1865 13.3467L11.3418 18.4082C10.1876 19.4072 8.39355 18.5872 8.39355 17.0605V6.9375C8.39366 5.41077 10.1876 4.5914 11.3418 5.59082L17.1865 10.6523L17.3311 10.792Z", stroke: "currentColor", strokeWidth: 2 }) }))); };
+exports.default = SvgPlayMd;

package/dist/components/Icon/iconList/RadioButtonElementChecked.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 SvgRadioButtonElementChecked = 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)("circle", { cx: 12, cy: 12, r: 12, fill: "#9763F6" }), (0, jsx_runtime_1.jsx)("circle", { cx: 12, cy: 12, r: 6, fill: "white" })] }))); };
+var SvgRadioButtonElementChecked = 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)("circle", { cx: 12, cy: 12, r: 12, fill: "currentColor" }), (0, jsx_runtime_1.jsx)("circle", { cx: 12, cy: 12, r: 6, fill: "white" })] }))); };
 exports.default = SvgRadioButtonElementChecked;

package/dist/components/Icon/iconList/Rectangle.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 SvgRectangle = 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", { id: "Rectangle 8", 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_17925_27746)" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", __assign({ id: "paint0_linear_17925_27746", x1: 93.9999, y1: 3.99994, x2: 73, y2: -17, gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#7730FA" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "#9961FF" })] })) })] }))); };
+var SvgRectangle = 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", { id: "Rectangle 8", 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_17925_27746)" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", __assign({ id: "paint0_linear_17925_27746", x1: 93.9999, y1: 3.99994, x2: 73, y2: -17, gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "var(--primary-linear)" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "var(--primary-linear-to)" })] })) })] }))); };
 exports.default = SvgRectangle;

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

@@ -476,6 +476,9 @@ export namespace iconList {
     function PauseMd({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
+    function PlayMd({ ...props }: {
+        [x: string]: any;
+    }): import("react").JSX.Element;
     function PlusBig({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
@@ -939,6 +942,7 @@ import { default as PaperUpload } from "./PaperUpload";
 import { default as Password } from "./Password";
 import { default as Pause } from "./Pause";
 import { default as PauseMd } from "./PauseMd";
+import { default as PlayMd } from "./PlayMd";
 import { default as PlusBig } from "./PlusBig";
 import { default as PlusCircle } from "./PlusCircle";
 import { default as PlusSmall } from "./PlusSmall";
@@ -1040,4 +1044,4 @@ import { default as UserPlusLg } from "./UserPlusLg";
 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, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, 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, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlusBig, PlusCircle, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, 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, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, 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, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, 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, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, 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, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };

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

@@ -28,9 +28,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Call = exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.BagCircleFilled = 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.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.CreditCard = exports.Copy = exports.Completed = exports.Coffee = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkMd = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = void 0;
 exports.OrderProgressIcons = exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.MoneyBig = 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 = exports.Graph = exports.Gift = exports.Game = exports.ForwardMd = exports.Folder = void 0;
-exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.ThumbCircleFilled = 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.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = 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.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = void 0;
-exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = 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 = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = void 0;
-exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = void 0;
+exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.ThumbCircleFilled = 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.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = 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.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = void 0;
+exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = 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 = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = exports.TimeCircle = void 0;
+exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = 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; } });
@@ -350,6 +350,8 @@ var Pause_1 = __importDefault(require("./Pause"));
 Object.defineProperty(exports, "Pause", { enumerable: true, get: function () { return Pause_1.default; } });
 var PauseMd_1 = __importDefault(require("./PauseMd"));
 Object.defineProperty(exports, "PauseMd", { enumerable: true, get: function () { return PauseMd_1.default; } });
+var PlayMd_1 = __importDefault(require("./PlayMd"));
+Object.defineProperty(exports, "PlayMd", { enumerable: true, get: function () { return PlayMd_1.default; } });
 var PlusBig_1 = __importDefault(require("./PlusBig"));
 Object.defineProperty(exports, "PlusBig", { enumerable: true, get: function () { return PlusBig_1.default; } });
 var PlusCircle_1 = __importDefault(require("./PlusCircle"));
@@ -1189,6 +1191,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(PauseMd_1.default, __assign({}, props));
     },
+    PlayMd: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(PlayMd_1.default, __assign({}, props));
+    },
     PlusBig: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(PlusBig_1.default, __assign({}, props));

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ModalProps } from "./props";
-declare const Modal: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, hasHeaderMinHeight, ...other }: ModalProps) => React.JSX.Element;
+declare const Modal: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, portalContainer, hasHeaderMinHeight, ...other }: ModalProps) => React.ReactPortal;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -37,21 +37,35 @@ var TextLink_1 = __importDefault(require("../TextLink"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var react_i18next_1 = require("react-i18next");
 var Modal = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showSkipButton, showSkipButton = _d === void 0 ? props_1.ModalDefault.showSkipButton : _d, _e = _a.skipButtonText, skipButtonText = _e === void 0 ? props_1.ModalDefault.skipButtonText : _e, _f = _a.onSkip, onSkip = _f === void 0 ? props_1.ModalDefault.onSkip : _f, _g = _a.showBackIcon, showBackIcon = _g === void 0 ? props_1.ModalDefault.showBackIcon : _g, _h = _a.backIconType, backIconType = _h === void 0 ? props_1.ModalDefault.backIconType : _h, _j = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _j === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _j, _k = _a.onClose, onClose = _k === void 0 ? props_1.ModalDefault.onClose : _k, _l = _a.onBack, onBack = _l === void 0 ? props_1.ModalDefault.onBack : _l, _m = _a.show, show = _m === void 0 ? props_1.ModalDefault.show : _m, _o = _a.showDivider, showDivider = _o === void 0 ? props_1.ModalDefault.showDivider : _o, _p = _a.title, title = _p === void 0 ? props_1.ModalDefault.title : _p, _q = _a.children, children = _q === void 0 ? props_1.ModalDefault.children : _q, _r = _a.modalFooter, modalFooter = _r === void 0 ? props_1.ModalDefault.modalFooter : _r, _s = _a.showPrimaryButton, showPrimaryButton = _s === void 0 ? props_1.ModalDefault.showPrimaryButton : _s, _t = _a.showSecondaryButton, showSecondaryButton = _t === void 0 ? props_1.ModalDefault.showSecondaryButton : _t, _u = _a.onPrimaryAction, onPrimaryAction = _u === void 0 ? props_1.ModalDefault.onPrimaryAction : _u, _v = _a.onSecondaryAction, onSecondaryAction = _v === void 0 ? props_1.ModalDefault.onSecondaryAction : _v, _w = _a.buttonsAlignment, buttonsAlignment = _w === void 0 ? props_1.ModalDefault.buttonsAlignment : _w, _x = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _x === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _x, _y = _a.primaryButtonText, primaryButtonText = _y === void 0 ? props_1.ModalDefault.primaryButtonText : _y, _z = _a.secondaryButtonText, secondaryButtonText = _z === void 0 ? props_1.ModalDefault.secondaryButtonText : _z, _0 = _a.showHeaderBorder, showHeaderBorder = _0 === void 0 ? props_1.ModalDefault.showHeaderBorder : _0, _1 = _a.showFooterBorder, showFooterBorder = _1 === void 0 ? props_1.ModalDefault.showFooterBorder : _1, _2 = _a.autoHeight, autoHeight = _2 === void 0 ? props_1.ModalDefault.autoHeight : _2, _3 = _a.titleAlignment, titleAlignment = _3 === void 0 ? props_1.ModalDefault.titleAlignment : _3, _4 = _a.titleDescription, titleDescription = _4 === void 0 ? props_1.ModalDefault.titleDescription : _4, _5 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _5, _6 = _a.primaryButtonIcon, primaryButtonIcon = _6 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _6, _7 = _a.secondaryButtonIcon, secondaryButtonIcon = _7 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _7, _8 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _8 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _8, _9 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _9 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _9, _10 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _10 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _10, _11 = _a.primaryButtonWidth, primaryButtonWidth = _11 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _11, _12 = _a.secondaryButtonWidth, secondaryButtonWidth = _12 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _12, _13 = _a.customContent, customContent = _13 === void 0 ? props_1.ModalDefault.customContent : _13, _14 = _a.showHeader, showHeader = _14 === void 0 ? props_1.ModalDefault.showHeader : _14, _15 = _a.id, id = _15 === void 0 ? props_1.ModalDefault.id : _15, _16 = _a.renderInDOM, renderInDOM = _16 === void 0 ? props_1.ModalDefault.renderInDOM : _16, _17 = _a.hasHeaderMinHeight, hasHeaderMinHeight = _17 === void 0 ? props_1.ModalDefault.hasHeaderMinHeight : _17, other = __rest(_a, ["size", "showCloseIcon", "showSkipButton", "skipButtonText", "onSkip", "showBackIcon", "backIconType", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "showHeader", "id", "renderInDOM", "hasHeaderMinHeight"]);
-    var uniqueId = (0, react_1.useId)();
+    var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showSkipButton, showSkipButton = _d === void 0 ? props_1.ModalDefault.showSkipButton : _d, _e = _a.skipButtonText, skipButtonText = _e === void 0 ? props_1.ModalDefault.skipButtonText : _e, _f = _a.onSkip, onSkip = _f === void 0 ? props_1.ModalDefault.onSkip : _f, _g = _a.showBackIcon, showBackIcon = _g === void 0 ? props_1.ModalDefault.showBackIcon : _g, _h = _a.backIconType, backIconType = _h === void 0 ? props_1.ModalDefault.backIconType : _h, _j = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _j === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _j, _k = _a.onClose, onClose = _k === void 0 ? props_1.ModalDefault.onClose : _k, _l = _a.onBack, onBack = _l === void 0 ? props_1.ModalDefault.onBack : _l, _m = _a.show, show = _m === void 0 ? props_1.ModalDefault.show : _m, _o = _a.showDivider, showDivider = _o === void 0 ? props_1.ModalDefault.showDivider : _o, _p = _a.title, title = _p === void 0 ? props_1.ModalDefault.title : _p, _q = _a.children, children = _q === void 0 ? props_1.ModalDefault.children : _q, _r = _a.modalFooter, modalFooter = _r === void 0 ? props_1.ModalDefault.modalFooter : _r, _s = _a.showPrimaryButton, showPrimaryButton = _s === void 0 ? props_1.ModalDefault.showPrimaryButton : _s, _t = _a.showSecondaryButton, showSecondaryButton = _t === void 0 ? props_1.ModalDefault.showSecondaryButton : _t, _u = _a.onPrimaryAction, onPrimaryAction = _u === void 0 ? props_1.ModalDefault.onPrimaryAction : _u, _v = _a.onSecondaryAction, onSecondaryAction = _v === void 0 ? props_1.ModalDefault.onSecondaryAction : _v, _w = _a.buttonsAlignment, buttonsAlignment = _w === void 0 ? props_1.ModalDefault.buttonsAlignment : _w, _x = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _x === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _x, _y = _a.primaryButtonText, primaryButtonText = _y === void 0 ? props_1.ModalDefault.primaryButtonText : _y, _z = _a.secondaryButtonText, secondaryButtonText = _z === void 0 ? props_1.ModalDefault.secondaryButtonText : _z, _0 = _a.showHeaderBorder, showHeaderBorder = _0 === void 0 ? props_1.ModalDefault.showHeaderBorder : _0, _1 = _a.showFooterBorder, showFooterBorder = _1 === void 0 ? props_1.ModalDefault.showFooterBorder : _1, _2 = _a.autoHeight, autoHeight = _2 === void 0 ? props_1.ModalDefault.autoHeight : _2, _3 = _a.titleAlignment, titleAlignment = _3 === void 0 ? props_1.ModalDefault.titleAlignment : _3, _4 = _a.titleDescription, titleDescription = _4 === void 0 ? props_1.ModalDefault.titleDescription : _4, _5 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _5, _6 = _a.primaryButtonIcon, primaryButtonIcon = _6 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _6, _7 = _a.secondaryButtonIcon, secondaryButtonIcon = _7 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _7, _8 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _8 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _8, _9 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _9 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _9, _10 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _10 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _10, _11 = _a.primaryButtonWidth, primaryButtonWidth = _11 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _11, _12 = _a.secondaryButtonWidth, secondaryButtonWidth = _12 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _12, _13 = _a.customContent, customContent = _13 === void 0 ? props_1.ModalDefault.customContent : _13, _14 = _a.showHeader, showHeader = _14 === void 0 ? props_1.ModalDefault.showHeader : _14, _15 = _a.id, id = _15 === void 0 ? props_1.ModalDefault.id : _15, _16 = _a.renderInDOM, renderInDOM = _16 === void 0 ? props_1.ModalDefault.renderInDOM : _16, _17 = _a.portalContainer, portalContainer = _17 === void 0 ? props_1.ModalDefault.portalContainer : _17, _18 = _a.hasHeaderMinHeight, hasHeaderMinHeight = _18 === void 0 ? props_1.ModalDefault.hasHeaderMinHeight : _18, other = __rest(_a, ["size", "showCloseIcon", "showSkipButton", "skipButtonText", "onSkip", "showBackIcon", "backIconType", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "showHeader", "id", "renderInDOM", "portalContainer", "hasHeaderMinHeight"]);
+    var generatedId = (0, react_1.useId)();
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _18 = (0, react_1.useState)(show), showModal = _18[0], setShowModal = _18[1];
+    var _19 = (0, react_1.useState)(show), showModal = _19[0], setShowModal = _19[1];
+    var _20 = (0, react_1.useState)(null), uniqueId = _20[0], setUniqueId = _20[1];
+    var _21 = (0, react_1.useState)(null), defaultPortalContainer = _21[0], setDefaultPortalContainer = _21[1];
     (0, react_1.useEffect)(function () {
+        if (!uniqueId) {
+            setUniqueId(generatedId);
+        }
+    }, [uniqueId, generatedId]);
+    (0, react_1.useEffect)(function () {
+        setDefaultPortalContainer(document.body);
+    }, []);
+    var resolvedPortalContainer = portalContainer !== null && portalContainer !== void 0 ? portalContainer : defaultPortalContainer;
+    (0, react_1.useEffect)(function () {
+        if (!uniqueId)
+            return;
         setShowModal(show);
+        var modalClass = "modalActive_".concat(uniqueId);
         if (!show) {
-            //document.body.classList.remove('hasModal')
-            document.body.classList.remove("modalActive_".concat(uniqueId));
+            if (document.body.classList.contains(modalClass)) {
+                document.body.classList.remove(modalClass);
+            }
         }
-        else {
-            //document.body.classList.add('hasModal')
-            document.body.classList.add("modalActive_".concat(uniqueId));
+        else if (!document.body.classList.contains(modalClass)) {
+            document.body.classList.add(modalClass);
         }
-    }, [show]);
+    }, [show, uniqueId]);
     var handleClose = function () {
         if (onClose) {
             onClose();
@@ -71,10 +85,12 @@ var Modal = function (_a) {
     var modalRef = (0, react_1.useRef)();
     (0, useOnClickOutside_1.default)(modalRef, onClose, hasCloseOnOutsideClick);
     var modalContent = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id), "$show": renderInDOM ? showModal : true }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": size, "$autoHeight": autoHeight, "$showHeaderBorder": showHeaderBorder, "$titleAlignment": titleAlignment, "$customContent": customContent, "$showFooterBorder": showFooterBorder, "$buttonsAlignment": buttonsAlignment, "$showSecondaryButton": showSecondaryButton, "$showDivider": showDivider, "$showHeader": showHeader, "$buttonsAlignmentOnMobile": buttonsAlignmentOnMobile, id: id, "$hasHeaderMinHeight": hasHeaderMinHeight }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [showBackIcon ? (backIconType === 2 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "modalTextLinkWrapper" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onBack, icon: "ArrowSmallLeft" }, { children: t("back") })) }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeftBig" }) })))) : (titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [title && ((0, jsx_runtime_1.jsx)("h5", { children: title })), titleDescription && (0, jsx_runtime_1.jsx)("p", { children: titleDescription })] })), showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) }))) : showSkipButton ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "modalTextLinkWrapper skipButton" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleSkip }, { children: skipButtonText })) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: children })) })), modalFooter ? modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (showPrimaryButton || showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, width: primaryButtonWidth, icon: primaryButtonIcon }, { children: primaryButtonText }))), showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttonsAlignment === "vertical" && showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: isSecondaryButtonLoading, disabled: isSecondaryButtonDisabled, width: secondaryButtonWidth, icon: secondaryButtonIcon }, { children: secondaryButtonText }))] }))] })) })] })) })) }));
-    if (renderInDOM) {
-        return modalContent;
+    if (!resolvedPortalContainer) {
+        return null;
+    }
+    if (!renderInDOM && !showModal) {
+        return null;
     }
-    return (showModal &&
-        react_dom_1.default.createPortal(modalContent, document.body));
+    return react_dom_1.default.createPortal(modalContent, resolvedPortalContainer);
 };
 exports.default = Modal;

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

@@ -45,6 +45,8 @@ export interface Modal {
     showHeader?: boolean;
     id?: string;
     renderInDOM?: boolean;
+    /** Portal hedefi — varsayılan `document.body` */
+    portalContainer?: HTMLElement | null;
     showSkipButton?: boolean;
     skipButtonText?: string;
     onSkip?: () => void;

package/dist/components/Modal/props.js

@@ -44,6 +44,7 @@ exports.ModalDefault = {
     showHeader: true,
     id: null,
     renderInDOM: false,
+    portalContainer: null,
     showSkipButton: false,
     skipButtonText: 'Skip',
     onSkip: null,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, hasHeaderMinHeight, ...other }: import("../props").Modal) => React.JSX.Element;
+    component: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, portalContainer, hasHeaderMinHeight, ...other }: import("../props").Modal) => React.ReactPortal;
     tags: string[];
     argTypes: {
         showDivider: {

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, slug, component, onClick, hasLoading, textSize, hasBgColor, }: import("./props").ProductCardHorizontalMd) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, oldPrice, newPrice, discountRate, variant, slug, component, onClick, hasLoading, textSize, hasBgColor, }: import("./props").ProductCardHorizontalMd) => React.JSX.Element>;
 export default _default;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.js

@@ -26,12 +26,24 @@ var CardLinkComponent = (0, react_1.memo)(function (_a) {
 });
 var ProductCardHorizontalMd = function (_a) {
     var _b;
-    var _c = _a.title, title = _c === void 0 ? props_1.ProductCardHorizontalMdDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardHorizontalMdDefault.description : _d, _e = _a.listDescription, listDescription = _e === void 0 ? props_1.ProductCardHorizontalMdDefault.listDescription : _e, _f = _a.image, image = _f === void 0 ? props_1.ProductCardHorizontalMdDefault.image : _f, _g = _a.unitPriceText, unitPriceText = _g === void 0 ? props_1.ProductCardHorizontalMdDefault.unitPriceText : _g, _h = _a.totalPrice, totalPrice = _h === void 0 ? props_1.ProductCardHorizontalMdDefault.totalPrice : _h, _j = _a.slug, slug = _j === void 0 ? props_1.ProductCardHorizontalMdDefault.slug : _j, _k = _a.component, component = _k === void 0 ? props_1.ProductCardHorizontalMdDefault.component : _k, _l = _a.onClick, onClick = _l === void 0 ? props_1.ProductCardHorizontalMdDefault.onClick : _l, _m = _a.hasLoading, hasLoading = _m === void 0 ? props_1.ProductCardHorizontalMdDefault.hasLoading : _m, _o = _a.textSize, textSize = _o === void 0 ? props_1.ProductCardHorizontalMdDefault.textSize : _o, _p = _a.hasBgColor, hasBgColor = _p === void 0 ? props_1.ProductCardHorizontalMdDefault.hasBgColor : _p;
-    var styledProps = { $hasLoading: hasLoading, $textSize: textSize, $hasBgColor: hasBgColor };
+    var _c = _a.title, title = _c === void 0 ? props_1.ProductCardHorizontalMdDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardHorizontalMdDefault.description : _d, _e = _a.listDescription, listDescription = _e === void 0 ? props_1.ProductCardHorizontalMdDefault.listDescription : _e, _f = _a.image, image = _f === void 0 ? props_1.ProductCardHorizontalMdDefault.image : _f, _g = _a.unitPriceText, unitPriceText = _g === void 0 ? props_1.ProductCardHorizontalMdDefault.unitPriceText : _g, _h = _a.totalPrice, totalPrice = _h === void 0 ? props_1.ProductCardHorizontalMdDefault.totalPrice : _h, _j = _a.oldPrice, oldPrice = _j === void 0 ? props_1.ProductCardHorizontalMdDefault.oldPrice : _j, _k = _a.newPrice, newPrice = _k === void 0 ? props_1.ProductCardHorizontalMdDefault.newPrice : _k, _l = _a.discountRate, discountRate = _l === void 0 ? props_1.ProductCardHorizontalMdDefault.discountRate : _l, _m = _a.variant, variant = _m === void 0 ? props_1.ProductCardHorizontalMdDefault.variant : _m, _o = _a.slug, slug = _o === void 0 ? props_1.ProductCardHorizontalMdDefault.slug : _o, _p = _a.component, component = _p === void 0 ? props_1.ProductCardHorizontalMdDefault.component : _p, _q = _a.onClick, onClick = _q === void 0 ? props_1.ProductCardHorizontalMdDefault.onClick : _q, _r = _a.hasLoading, hasLoading = _r === void 0 ? props_1.ProductCardHorizontalMdDefault.hasLoading : _r, _s = _a.textSize, textSize = _s === void 0 ? props_1.ProductCardHorizontalMdDefault.textSize : _s, _t = _a.hasBgColor, hasBgColor = _t === void 0 ? props_1.ProductCardHorizontalMdDefault.hasBgColor : _t;
+    var styledProps = {
+        $hasLoading: hasLoading,
+        $textSize: textSize,
+        $hasBgColor: hasBgColor,
+        $variant: variant,
+        $discountRate: discountRate,
+    };
     var filteredListDescription = (_b = listDescription === null || listDescription === void 0 ? void 0 : listDescription.filter(Boolean)) !== null && _b !== void 0 ? _b : [];
     var hasListDescription = filteredListDescription.length > 0;
     var hasDescription = hasLoading || hasListDescription || Boolean(description);
-    var cardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ImageWrapper, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "64px", height: "64px", hasInset: true })) : (image) })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.TextSection, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Title, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "180px", height: "19px", hasInset: true })] })) : (title) })), hasDescription && (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "140px", height: "17px", hasInset: true })] }) }))) : hasListDescription ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionList, __assign({}, styledProps, { children: filteredListDescription.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionListItem, { children: item }, "".concat(item, "-").concat(index))); }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: description }))))] }), (hasLoading || unitPriceText || totalPrice) && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceSection, { children: [(hasLoading || unitPriceText) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.UnitPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "120px", height: "17px" })) : (unitPriceText) })), (hasLoading || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.TotalPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "80px", height: "19px" })) : (totalPrice) }))] }))] }));
+    var isDiscountVariant = variant === 'discount';
+    var hasDiscountPrice = hasLoading || oldPrice || newPrice || (discountRate != null && discountRate > 0);
+    var imageContent = ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ImageWrapper, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "64px", height: "64px", hasInset: true })) : (image) })));
+    var titleContent = ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Title, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "180px", height: "19px", hasInset: true })] })) : (title) })));
+    var defaultCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [imageContent, (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.TextSection, { children: [titleContent, hasDescription && (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "140px", height: "17px", hasInset: true })] }) }))) : hasListDescription ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionList, __assign({}, styledProps, { children: filteredListDescription.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionListItem, { children: item }, "".concat(item, "-").concat(index))); }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: description }))))] }), (hasLoading || unitPriceText || totalPrice) && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceSection, { children: [(hasLoading || unitPriceText) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.UnitPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "120px", height: "17px" })) : (unitPriceText) })), (hasLoading || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.TotalPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "80px", height: "19px" })) : (totalPrice) }))] }))] })));
+    var discountCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [imageContent, (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.DiscountContentSection, { children: [titleContent, hasDiscountPrice && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceRow, __assign({}, styledProps, { children: [(hasLoading || (discountRate != null && discountRate > 0)) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DiscountBadge, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "32px", height: "16px", hasInset: true })) : ("%".concat(discountRate)) })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceStack, { children: [(hasLoading || oldPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.OldPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "60px", height: "15px", hasInset: true })) : (oldPrice) })), (hasLoading || newPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.NewPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "72px", height: "17px", hasInset: true })) : (newPrice) }))] })] })))] })] })));
+    var cardBody = isDiscountVariant ? discountCardBody : defaultCardBody;
     if (hasLoading) {
         return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CardLink, { children: cardBody }) })));
     }

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
 import { ProductCardHorizontalMdStyledProps } from "./props";
 export declare const CardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
-export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
+export declare const DiscountContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const PriceRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
+export declare const DiscountBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const PriceStack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const OldPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const NewPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
 export declare const TextSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.js

@@ -7,23 +7,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCardHorizontalMdStyled = exports.TotalPrice = exports.UnitPrice = exports.PriceSection = exports.DescriptionListItem = exports.DescriptionList = exports.Description = exports.Title = exports.TextSection = exports.ImageWrapper = exports.CardBody = exports.CardLink = void 0;
+exports.ProductCardHorizontalMdStyled = exports.TotalPrice = exports.UnitPrice = exports.PriceSection = exports.DescriptionListItem = exports.DescriptionList = exports.Description = exports.Title = exports.TextSection = exports.ImageWrapper = exports.NewPrice = exports.OldPrice = exports.PriceStack = exports.DiscountBadge = exports.PriceRow = exports.DiscountContentSection = exports.CardBody = exports.CardLink = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.CardLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    text-decoration: none !important;\n    color: inherit;\n\n    &:hover,\n    &:focus,\n    &:visited,\n    &:active {\n        text-decoration: none !important;\n        color: inherit;\n    }\n\n    &,\n    & * {\n        text-decoration: none !important;\n    }\n"], ["\n    display: block;\n    text-decoration: none !important;\n    color: inherit;\n\n    &:hover,\n    &:focus,\n    &:visited,\n    &:active {\n        text-decoration: none !important;\n        color: inherit;\n    }\n\n    &,\n    & * {\n        text-decoration: none !important;\n    }\n"])));
-exports.CardBody = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n"], ["\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n"])));
-exports.ImageWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: white;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: white;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"])), function (props) { return props.$hasLoading || props.$hasBgColor ? "none" : "1px solid var(--grey-10)"; });
-exports.TextSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"], ["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"])), function (props) { return props.$textSize === 'md'
+exports.CardBody = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n"])), function (props) { return props.$variant === 'discount' ? 'auto 1fr' : 'auto 1fr auto'; });
+exports.DiscountContentSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"])));
+exports.PriceRow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: grid;\n    align-items: center;\n    grid-template-columns: ", ";\n    gap: 0.5rem;\n"], ["\n    display: grid;\n    align-items: center;\n    grid-template-columns: ", ";\n    gap: 0.5rem;\n"])), function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; });
+exports.DiscountBadge = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 65px;\n    height: 47px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    color: var(--dark);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font: var(--title-extra-bold-16-19);\n    flex-shrink: 0;\n"], ["\n    width: 65px;\n    height: 47px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    color: var(--dark);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font: var(--title-extra-bold-16-19);\n    flex-shrink: 0;\n"])));
+exports.PriceStack = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n"])));
+exports.OldPrice = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    color: var(--dark-opacity-25);\n    font: var(--body-semi-bold-14-17);\n    text-decoration: line-through;\n    white-space: nowrap;\n"], ["\n    color: var(--dark-opacity-25);\n    font: var(--body-semi-bold-14-17);\n    text-decoration: line-through;\n    white-space: nowrap;\n"])));
+exports.NewPrice = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    color: var(--dark);\n    font: var(--headline-extra-bold-18-22);\n    white-space: nowrap;\n"], ["\n    color: var(--dark);\n    font: var(--headline-extra-bold-18-22);\n    white-space: nowrap;\n"])));
+exports.ImageWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: white;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: white;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"])), function (props) { return props.$hasLoading || props.$hasBgColor ? "none" : "1px solid var(--grey-10)"; });
+exports.TextSection = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"], ["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"])), function (props) { return props.$variant === 'discount' || props.$textSize === 'md'
     ? 'var(--title-extra-bold-16-19)'
     : 'var(--body-semi-bold-14-17)'; });
 var descriptionTextStyles = function (props) { return "\n    font: ".concat(props.$textSize === 'md'
     ? 'var(--body-medium-14-17)'
     : 'var(--body-regular-14-17)', ";\n    color: ").concat(props.$hasBgColor ? 'var(--grey-40)' : 'inherit', ";\n"); };
-exports.Description = styled_components_1.default.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"], ["\n    margin: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"])), descriptionTextStyles);
-exports.DescriptionList = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-width: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    row-gap: 0.25rem;\n    column-gap: 0.5rem;\n"], ["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-width: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    row-gap: 0.25rem;\n    column-gap: 0.5rem;\n"])), descriptionTextStyles);
-exports.DescriptionListItem = styled_components_1.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n\n    & + & {\n        &::before {\n            content: '';\n            display: inline-block;\n            width: 4px;\n            height: 4px;\n            border-radius: 50%;\n            background-color: currentColor;\n            margin: 0 0.5rem;\n            flex-shrink: 0;\n        }\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n\n    & + & {\n        &::before {\n            content: '';\n            display: inline-block;\n            width: 4px;\n            height: 4px;\n            border-radius: 50%;\n            background-color: currentColor;\n            margin: 0 0.5rem;\n            flex-shrink: 0;\n        }\n    }\n"])));
-exports.PriceSection = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    flex-shrink: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    text-align: right;\n"], ["\n    flex-shrink: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    text-align: right;\n"])));
-exports.UnitPrice = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"])));
-exports.TotalPrice = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"])));
-exports.ProductCardHorizontalMdStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"], ["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"])), function (props) { return props.$hasBgColor ? 'none' : '1px solid var(--grey-10)'; }, function (props) { return props.$hasBgColor ? 'var(--dark-opacity-3)' : 'white'; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+exports.Description = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    margin: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"], ["\n    margin: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"])), descriptionTextStyles);
+exports.DescriptionList = styled_components_1.default.ul(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-width: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    row-gap: 0.25rem;\n    column-gap: 0.5rem;\n"], ["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-width: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    row-gap: 0.25rem;\n    column-gap: 0.5rem;\n"])), descriptionTextStyles);
+exports.DescriptionListItem = styled_components_1.default.li(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n\n    & + & {\n        &::before {\n            content: '';\n            display: inline-block;\n            width: 4px;\n            height: 4px;\n            border-radius: 50%;\n            background-color: currentColor;\n            margin: 0 0.5rem;\n            flex-shrink: 0;\n        }\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n\n    & + & {\n        &::before {\n            content: '';\n            display: inline-block;\n            width: 4px;\n            height: 4px;\n            border-radius: 50%;\n            background-color: currentColor;\n            margin: 0 0.5rem;\n            flex-shrink: 0;\n        }\n    }\n"])));
+exports.PriceSection = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    flex-shrink: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    text-align: right;\n"], ["\n    flex-shrink: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    text-align: right;\n"])));
+exports.UnitPrice = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"])));
+exports.TotalPrice = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"])));
+exports.ProductCardHorizontalMdStyled = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"], ["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"])), function (props) { return props.$hasBgColor ? 'none' : '1px solid var(--grey-10)'; }, function (props) { return props.$hasBgColor ? 'var(--dark-opacity-3)' : 'white'; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

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

@@ -1,6 +1,8 @@
 import React from "react";
 export declare const textSizes: readonly ["sm", "md"];
+export declare const variants: readonly ["default", "discount"];
 type TEXTSIZE = (typeof textSizes)[number];
+type VARIANT = (typeof variants)[number];
 export interface ProductCardHorizontalMd {
     title?: string;
     description?: string;
@@ -8,6 +10,10 @@ export interface ProductCardHorizontalMd {
     image?: React.ReactNode;
     unitPriceText?: string;
     totalPrice?: string;
+    oldPrice?: string;
+    newPrice?: string;
+    discountRate?: number;
+    variant?: VARIANT;
     slug?: string;
     component?: React.ElementType | null;
     onClick?(): void;
@@ -19,6 +25,8 @@ export interface ProductCardHorizontalMdStyledProps {
     $hasLoading?: boolean;
     $textSize?: TEXTSIZE;
     $hasBgColor?: boolean;
+    $variant?: VARIANT;
+    $discountRate?: number;
 }
 export declare const ProductCardHorizontalMdDefault: ProductCardHorizontalMd;
 export type ProductCardHorizontalMdProps = typeof ProductCardHorizontalMdDefault;

package/dist/components/ProductCardHorizontalMd/props.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCardHorizontalMdDefault = exports.textSizes = void 0;
+exports.ProductCardHorizontalMdDefault = exports.variants = exports.textSizes = void 0;
 exports.textSizes = ['sm', 'md'];
+exports.variants = ['default', 'discount'];
 exports.ProductCardHorizontalMdDefault = {
     title: null,
     description: null,
@@ -9,6 +10,10 @@ exports.ProductCardHorizontalMdDefault = {
     image: null,
     unitPriceText: null,
     totalPrice: null,
+    oldPrice: null,
+    newPrice: null,
+    discountRate: null,
+    variant: 'default',
     slug: null,
     component: null,
     onClick: null,