krl-alfred 2.18.24 → 2.19.0

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

@@ -27,10 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 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.Paper = 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.Folder = void 0;
-exports.Trash = exports.TimeSquare = 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.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = void 0;
-exports.Subscription = 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.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 = void 0;
-exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = 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;
 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; } });
@@ -234,6 +234,8 @@ var Flash_1 = __importDefault(require("./Flash"));
 Object.defineProperty(exports, "Flash", { enumerable: true, get: function () { return Flash_1.default; } });
 var Folder_1 = __importDefault(require("./Folder"));
 Object.defineProperty(exports, "Folder", { enumerable: true, get: function () { return Folder_1.default; } });
+var ForwardMd_1 = __importDefault(require("./ForwardMd"));
+Object.defineProperty(exports, "ForwardMd", { enumerable: true, get: function () { return ForwardMd_1.default; } });
 var Game_1 = __importDefault(require("./Game"));
 Object.defineProperty(exports, "Game", { enumerable: true, get: function () { return Game_1.default; } });
 var Gift_1 = __importDefault(require("./Gift"));
@@ -346,6 +348,8 @@ var Password_1 = __importDefault(require("./Password"));
 Object.defineProperty(exports, "Password", { enumerable: true, get: function () { return Password_1.default; } });
 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 PlusBig_1 = __importDefault(require("./PlusBig"));
 Object.defineProperty(exports, "PlusBig", { enumerable: true, get: function () { return PlusBig_1.default; } });
 var PlusCircle_1 = __importDefault(require("./PlusCircle"));
@@ -428,6 +432,8 @@ var Ticket_1 = __importDefault(require("./Ticket"));
 Object.defineProperty(exports, "Ticket", { enumerable: true, get: function () { return Ticket_1.default; } });
 var TimeCircle_1 = __importDefault(require("./TimeCircle"));
 Object.defineProperty(exports, "TimeCircle", { enumerable: true, get: function () { return TimeCircle_1.default; } });
+var TimeCircleMd_1 = __importDefault(require("./TimeCircleMd"));
+Object.defineProperty(exports, "TimeCircleMd", { enumerable: true, get: function () { return TimeCircleMd_1.default; } });
 var TimeSquare_1 = __importDefault(require("./TimeSquare"));
 Object.defineProperty(exports, "TimeSquare", { enumerable: true, get: function () { return TimeSquare_1.default; } });
 var Trash_1 = __importDefault(require("./Trash"));
@@ -951,6 +957,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Folder_1.default, __assign({}, props));
     },
+    ForwardMd: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(ForwardMd_1.default, __assign({}, props));
+    },
     Game: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Game_1.default, __assign({}, props));
@@ -1175,6 +1185,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Pause_1.default, __assign({}, props));
     },
+    PauseMd: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(PauseMd_1.default, __assign({}, props));
+    },
     PlusBig: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(PlusBig_1.default, __assign({}, props));
@@ -1339,6 +1353,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(TimeCircle_1.default, __assign({}, props));
     },
+    TimeCircleMd: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(TimeCircleMd_1.default, __assign({}, props));
+    },
     TimeSquare: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(TimeSquare_1.default, __assign({}, props));

package/dist/components/InfoBox/InfoBox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { InfoBoxProps } from "./props";
-declare const InfoBox: ({ title, description, radius, size, variant, onClick, icon, }: InfoBoxProps) => React.JSX.Element;
+declare const InfoBox: ({ title, description, radius, size, variant, onClick, icon, hasIcon, }: InfoBoxProps) => React.JSX.Element;
 export default InfoBox;

package/dist/components/InfoBox/InfoBox.js

@@ -21,12 +21,12 @@ var InfoBox_styled_1 = require("./InfoBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var react_i18next_1 = require("react-i18next");
 var InfoBox = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.InfoBoxDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.InfoBoxDefault.description : _c, _d = _a.radius, radius = _d === void 0 ? props_1.InfoBoxDefault.radius : _d, _e = _a.size, size = _e === void 0 ? props_1.InfoBoxDefault.size : _e, _f = _a.variant, variant = _f === void 0 ? props_1.InfoBoxDefault.variant : _f, _g = _a.onClick, onClick = _g === void 0 ? props_1.InfoBoxDefault.onClick : _g, _h = _a.icon, icon = _h === void 0 ? props_1.InfoBoxDefault.icon : _h;
+    var _b = _a.title, title = _b === void 0 ? props_1.InfoBoxDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.InfoBoxDefault.description : _c, _d = _a.radius, radius = _d === void 0 ? props_1.InfoBoxDefault.radius : _d, _e = _a.size, size = _e === void 0 ? props_1.InfoBoxDefault.size : _e, _f = _a.variant, variant = _f === void 0 ? props_1.InfoBoxDefault.variant : _f, _g = _a.onClick, onClick = _g === void 0 ? props_1.InfoBoxDefault.onClick : _g, _h = _a.icon, icon = _h === void 0 ? props_1.InfoBoxDefault.icon : _h, _j = _a.hasIcon, hasIcon = _j === void 0 ? props_1.InfoBoxDefault.hasIcon : _j;
     var descriptionRef = (0, react_1.useRef)(null);
     var inputRef = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)(false), alert = _j[0], setAlert = _j[1];
-    var _k = (0, react_1.useState)(0), alertLeft = _k[0], setAlertLeft = _k[1];
-    var _l = (0, react_1.useState)(0), alertTop = _l[0], setAlertTop = _l[1];
+    var _k = (0, react_1.useState)(false), alert = _k[0], setAlert = _k[1];
+    var _l = (0, react_1.useState)(0), alertLeft = _l[0], setAlertLeft = _l[1];
+    var _m = (0, react_1.useState)(0), alertTop = _m[0], setAlertTop = _m[1];
     var t = (0, react_i18next_1.useTranslation)().t;
     (0, react_1.useEffect)(function () {
         if (alert) {
@@ -56,6 +56,6 @@ var InfoBox = function (_a) {
             }
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) })), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, __assign({ "$size": size, ref: descriptionRef }, { children: description })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [hasIcon && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) }))), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, __assign({ "$size": size, ref: descriptionRef }, { children: description })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
 };
 exports.default = InfoBox;

package/dist/components/InfoBox/InfoBox.styled.js

@@ -18,6 +18,8 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
             return "var(--yellow)";
         case 'danger':
             return "var(--red)";
+        case 'secondary':
+            return "var(--dark-opacity-3)";
         default:
             return "var(--primary-opacity-10)";
     }
@@ -29,6 +31,8 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
             return "white";
         case 'danger':
             return "white";
+        case 'secondary':
+            return "var(--dark)";
         default:
             return "var(--dark)";
     }

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

@@ -12,6 +12,7 @@ export interface InfoBox {
     size?: SIZES;
     variant?: VARIANT;
     icon?: ICON;
+    hasIcon?: boolean;
     onClick?: (e: any) => void;
 }
 export interface InfoBoxStyledProps {

package/dist/components/InfoBox/props.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoBoxDefault = exports.iconNames = exports.variants = exports.sizes = void 0;
 var iconList_1 = require("../Icon/iconList");
 exports.sizes = ['small', 'medium', 'large'];
-exports.variants = ['primary', 'danger', 'warning'];
+exports.variants = ['primary', 'danger', 'warning', 'secondary'];
 exports.iconNames = Object.keys(iconList_1.iconList);
 exports.InfoBoxDefault = {
     title: null,
@@ -13,4 +13,5 @@ exports.InfoBoxDefault = {
     variant: exports.variants[0],
     onClick: null,
     icon: "InfoSquare",
+    hasIcon: true,
 };

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

@@ -21,6 +21,9 @@ declare const _default: {
         icon: {
             control: string;
         };
+        hasIcon: {
+            control: string;
+        };
         onClick: {
             action: string;
         };
@@ -34,6 +37,14 @@ export declare const Default: {
         onClick: () => void;
     };
 };
+export declare const WithoutIcon: {
+    args: {
+        hasIcon: boolean;
+        title: string;
+        description: string;
+        onClick: () => void;
+    };
+};
 export declare const Primary: {
     args: {
         variant: string;
@@ -58,6 +69,14 @@ export declare const Warning: {
         onClick: () => void;
     };
 };
+export declare const Secondary: {
+    args: {
+        variant: string;
+        onClick: any;
+        title: string;
+        description: string;
+    };
+};
 export declare const Small: {
     args: {
         size: string;

package/dist/components/InfoBox/stories/InfoBox.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithCustomRadius = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.Warning = exports.Danger = exports.Primary = exports.Default = void 0;
+exports.WithCustomRadius = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.Secondary = exports.Warning = exports.Danger = exports.Primary = exports.WithoutIcon = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var InfoBox_1 = __importDefault(require("../InfoBox"));
 var props_1 = require("../props");
@@ -34,12 +34,16 @@ exports.default = {
         title: { control: 'text' },
         radius: { control: 'text' },
         icon: { control: 'text' },
+        hasIcon: { control: 'boolean' },
         onClick: { action: 'clicked' },
     }
 };
 exports.Default = {
     args: defaultArgs,
 };
+exports.WithoutIcon = {
+    args: __assign(__assign({}, defaultArgs), { hasIcon: false }),
+};
 // Variant stories
 exports.Primary = {
     args: __assign(__assign({}, defaultArgs), { variant: 'primary' }),
@@ -50,6 +54,9 @@ exports.Danger = {
 exports.Warning = {
     args: __assign(__assign({}, defaultArgs), { variant: 'warning', title: "Dikkat" }),
 };
+exports.Secondary = {
+    args: __assign(__assign({}, defaultArgs), { variant: 'secondary', onClick: undefined }),
+};
 // Size stories
 exports.Small = {
     args: __assign(__assign({}, defaultArgs), { size: 'small' }),

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { InputProps } from "./props";
-declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, ...other }: InputProps) => React.JSX.Element;
+declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, ...other }: InputProps) => React.JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -41,12 +41,12 @@ var locale_1 = require("date-fns/locale");
 var date_fns_1 = require("date-fns");
 var Input = function (_a) {
     var _b;
-    var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, _5 = _a.onCalendarOpen, onCalendarOpen = _5 === void 0 ? props_1.InputDefault.onCalendarOpen : _5, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen"]);
-    var _6 = (0, react_1.useState)(type), inputType = _6[0], setInputType = _6[1];
-    var _7 = (0, react_1.useState)(false), alert = _7[0], setAlert = _7[1];
-    var _8 = (0, react_1.useState)(value), inputValue = _8[0], setInputValue = _8[1];
-    var _9 = (0, react_1.useState)(false), isCalendarOpen = _9[0], setIsCalendarOpen = _9[1];
-    var _10 = (0, react_1.useState)(function () {
+    var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, _5 = _a.onCalendarOpen, onCalendarOpen = _5 === void 0 ? props_1.InputDefault.onCalendarOpen : _5, _6 = _a.maxLength, maxLength = _6 === void 0 ? props_1.InputDefault.maxLength : _6, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength"]);
+    var _7 = (0, react_1.useState)(type), inputType = _7[0], setInputType = _7[1];
+    var _8 = (0, react_1.useState)(false), alert = _8[0], setAlert = _8[1];
+    var _9 = (0, react_1.useState)(value), inputValue = _9[0], setInputValue = _9[1];
+    var _10 = (0, react_1.useState)(false), isCalendarOpen = _10[0], setIsCalendarOpen = _10[1];
+    var _11 = (0, react_1.useState)(function () {
         if (!value)
             return null;
         // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
@@ -59,7 +59,7 @@ var Input = function (_a) {
             }
         }
         return new Date(value);
-    }), startDate = _10[0], setStartDate = _10[1];
+    }), startDate = _11[0], setStartDate = _11[1];
     var inputRef = (0, react_1.useRef)(null);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
@@ -131,7 +131,7 @@ var Input = function (_a) {
         if (onClear)
             onClear();
     };
-    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
+    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
                         : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
                                     if (date) {
                                         setStartDate(date);
@@ -162,6 +162,6 @@ var Input = function (_a) {
                                 } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
                                 onChange(e);
                                 setInputValue(e.currentTarget.value);
-                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
+                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
 };
 exports.default = Input;

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

@@ -27,5 +27,5 @@ exports.InputStyled = styled_components_1.default.input(templateObject_3 || (tem
         return '18.5px 23px';
     return '19.5px 24px';
 }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
-exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
+exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: white;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: white;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -29,6 +29,7 @@ export interface Input {
     maxDate?: Date;
     filterDate?: any;
     onCalendarOpen?(): void;
+    maxLength?: number;
 }
 export interface InputStyledProps {
     disabled?: boolean;

package/dist/components/Input/props.js

@@ -30,4 +30,5 @@ exports.InputDefault = {
     maxDate: null,
     filterDate: null,
     onCalendarOpen: null,
+    maxLength: undefined,
 };

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

@@ -32,6 +32,9 @@ declare const _default: {
             control: string;
             options: string[];
         };
+        maxLength: {
+            control: string;
+        };
     };
 };
 export default _default;

package/dist/components/Input/stories/Input.stories.js

@@ -31,6 +31,7 @@ exports.default = {
         hasNumericFormat: { control: 'boolean' },
         onCustomLinkClick: { action: 'clicked' },
         type: { control: 'select', options: ["text", "number", "password", "date", "email", "tel"] },
+        maxLength: { control: 'number' },
     }
 };
 exports.Default = {

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

@@ -0,0 +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>;
+export default _default;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.js

@@ -0,0 +1,41 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var props_1 = require("./props");
+var ProductCardHorizontalMd_styled_1 = require("./ProductCardHorizontalMd.styled");
+var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
+var CardLinkComponent = (0, react_1.memo)(function (_a) {
+    var Component = _a.component, slug = _a.slug, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CardLink, __assign({ as: Component || "a", href: slug }, { children: children })));
+});
+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 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) }))] }))] }));
+    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 }) })));
+    }
+    var hasSlug = Boolean(slug && String(slug).trim());
+    return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { onClick: onClick }, { children: hasSlug ? ((0, jsx_runtime_1.jsx)(CardLinkComponent, __assign({ component: component, slug: slug }, { children: cardBody }))) : (cardBody) })));
+};
+exports.default = (0, react_1.memo)(ProductCardHorizontalMd);

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

@@ -0,0 +1,14 @@
+/// <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 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;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
+export declare const DescriptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
+export declare const DescriptionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
+export declare const PriceSection: 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 UnitPrice: 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 TotalPrice: 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 ProductCardHorizontalMdStyled: 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;

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

@@ -0,0 +1,29 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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;
+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'
+    ? '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;

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

@@ -0,0 +1 @@
+export { default } from './ProductCardHorizontalMd';

package/dist/components/ProductCardHorizontalMd/index.js

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

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

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

package/dist/components/ProductCardHorizontalMd/props.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductCardHorizontalMdDefault = exports.textSizes = void 0;
+exports.textSizes = ['sm', 'md'];
+exports.ProductCardHorizontalMdDefault = {
+    title: null,
+    description: null,
+    listDescription: null,
+    image: null,
+    unitPriceText: null,
+    totalPrice: null,
+    slug: null,
+    component: null,
+    onClick: null,
+    hasLoading: false,
+    textSize: 'sm',
+    hasBgColor: false,
+};