krl-alfred 2.20.7 → 2.21.1

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

@@ -25,12 +25,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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.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.TickSquare = exports.TickMd = exports.Tick = exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Subcategory = 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.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 = exports.Ticket = exports.TicketStar = 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 = exports.More = exports.Live = void 0;
+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.ArrowLeftXl = 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.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 = exports.Call = void 0;
+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 = exports.Flash = void 0;
+exports.Tick = exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Subcategory = 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.PlusMd = exports.PlusCircle = exports.PlusBig = exports.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = void 0;
+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 = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.TickMd = 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 = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = 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; } });
@@ -58,6 +58,8 @@ var ArrowLeftCircle_1 = __importDefault(require("./ArrowLeftCircle"));
 Object.defineProperty(exports, "ArrowLeftCircle", { enumerable: true, get: function () { return ArrowLeftCircle_1.default; } });
 var ArrowLeftSquare_1 = __importDefault(require("./ArrowLeftSquare"));
 Object.defineProperty(exports, "ArrowLeftSquare", { enumerable: true, get: function () { return ArrowLeftSquare_1.default; } });
+var ArrowLeftXl_1 = __importDefault(require("./ArrowLeftXl"));
+Object.defineProperty(exports, "ArrowLeftXl", { enumerable: true, get: function () { return ArrowLeftXl_1.default; } });
 var ArrowRight_1 = __importDefault(require("./ArrowRight"));
 Object.defineProperty(exports, "ArrowRight", { enumerable: true, get: function () { return ArrowRight_1.default; } });
 var ArrowRightAnimate_1 = __importDefault(require("./ArrowRightAnimate"));
@@ -356,6 +358,8 @@ var PlusBig_1 = __importDefault(require("./PlusBig"));
 Object.defineProperty(exports, "PlusBig", { enumerable: true, get: function () { return PlusBig_1.default; } });
 var PlusCircle_1 = __importDefault(require("./PlusCircle"));
 Object.defineProperty(exports, "PlusCircle", { enumerable: true, get: function () { return PlusCircle_1.default; } });
+var PlusMd_1 = __importDefault(require("./PlusMd"));
+Object.defineProperty(exports, "PlusMd", { enumerable: true, get: function () { return PlusMd_1.default; } });
 var PlusSmall_1 = __importDefault(require("./PlusSmall"));
 Object.defineProperty(exports, "PlusSmall", { enumerable: true, get: function () { return PlusSmall_1.default; } });
 var PlusSquare_1 = __importDefault(require("./PlusSquare"));
@@ -611,6 +615,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(ArrowLeftSquare_1.default, __assign({}, props));
     },
+    ArrowLeftXl: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(ArrowLeftXl_1.default, __assign({}, props));
+    },
     ArrowRight: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(ArrowRight_1.default, __assign({}, props));
@@ -1207,6 +1215,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(PlusCircle_1.default, __assign({}, props));
     },
+    PlusMd: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(PlusMd_1.default, __assign({}, props));
+    },
     PlusSmall: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(PlusSmall_1.default, __assign({}, props));

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, maxLength, ...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, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -29,7 +29,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var props_1 = require("./props");
 var Input_styled_1 = require("./Input.styled");
-var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var TextLink_1 = __importDefault(require("../TextLink"));
 var react_number_format_1 = require("react-number-format");
@@ -40,13 +39,12 @@ var i18n_1 = __importDefault(require("../../i18n/i18n"));
 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, _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 () {
+    var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.id, id = _w === void 0 ? props_1.InputDefault.id : _w, _x = _a.isClearable, isClearable = _x === void 0 ? props_1.InputDefault.isClearable : _x, _y = _a.onClear, onClear = _y === void 0 ? props_1.InputDefault.onClear : _y, _z = _a.hasNumericFormat, hasNumericFormat = _z === void 0 ? props_1.InputDefault.hasNumericFormat : _z, _0 = _a.inline, inline = _0 === void 0 ? props_1.InputDefault.inline : _0, _1 = _a.minDate, minDate = _1 === void 0 ? props_1.InputDefault.minDate : _1, _2 = _a.maxDate, maxDate = _2 === void 0 ? props_1.InputDefault.maxDate : _2, _3 = _a.filterDate, filterDate = _3 === void 0 ? props_1.InputDefault.filterDate : _3, _4 = _a.onCalendarOpen, onCalendarOpen = _4 === void 0 ? props_1.InputDefault.onCalendarOpen : _4, _5 = _a.maxLength, maxLength = _5 === void 0 ? props_1.InputDefault.maxLength : _5, _6 = _a.showMaxLengthCounter, showMaxLengthCounter = _6 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _6, _7 = _a.description, description = _7 === void 0 ? props_1.InputDefault.description : _7, 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", "showMaxLengthCounter", "description"]);
+    var _8 = (0, react_1.useState)(type), inputType = _8[0], setInputType = _8[1];
+    var _9 = (0, react_1.useState)(false), alert = _9[0], setAlert = _9[1];
+    var _10 = (0, react_1.useState)(value), inputValue = _10[0], setInputValue = _10[1];
+    var _11 = (0, react_1.useState)(false), isCalendarOpen = _11[0], setIsCalendarOpen = _11[1];
+    var _12 = (0, react_1.useState)(function () {
         if (!value)
             return null;
         // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
@@ -59,7 +57,7 @@ var Input = function (_a) {
             }
         }
         return new Date(value);
-    }), startDate = _11[0], setStartDate = _11[1];
+    }), startDate = _12[0], setStartDate = _12[1];
     var inputRef = (0, react_1.useRef)(null);
     var datePickerRef = (0, react_1.useRef)(null);
     var dateInputRef = (0, react_1.useRef)(null);
@@ -170,7 +168,10 @@ 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, 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 })))
+    var currentLength = (inputValue !== null && inputValue !== void 0 ? inputValue : '').length;
+    var showCharCount = showMaxLengthCounter && maxLength != null;
+    var showTopRow = Boolean(label || customLinkText || showCharCount);
+    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), 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) {
                                     if (date) {
                                         setStartDate(date);
@@ -202,6 +203,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, 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 && errorMessage && (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') }))] })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description }), hasError && errorMessage && (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.d.ts

@@ -2,5 +2,10 @@
 import { ContainerProps, InputStyledProps } from "./props";
 export declare const AlertStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
+export declare const FieldTop: 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 FieldTopActions: 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 FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const CharCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 export declare const InputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputStyledProps> & InputStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputStyledProps> & InputStyledProps, never>>> & string;
 export declare const DatePickerWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputStyledProps> & InputStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputStyledProps> & InputStyledProps, never>>> & string;

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

@@ -7,11 +7,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerWrapperStyled = exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
+exports.DatePickerWrapperStyled = exports.InputStyled = exports.FieldDescription = exports.CharCount = exports.FieldLabel = exports.FieldTopActions = exports.FieldTop = exports.Container = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"], ["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
-exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n\n        /*a {\n          margin: 0;\n          color: var(--primary);\n          text-decoration: none;\n          cursor: pointer;\n          &:hover,:focus,:active{\n            color: var(--primary-hover) !important;\n          }\n        }*/\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n\n        .popupText {\n            font: var(--caption-semi-bold-11-13);\n            text-align: center;\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n\n        /*a {\n          margin: 0;\n          color: var(--primary);\n          text-decoration: none;\n          cursor: pointer;\n          &:hover,:focus,:active{\n            color: var(--primary-hover) !important;\n          }\n        }*/\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n\n        .popupText {\n            font: var(--caption-semi-bold-11-13);\n            text-align: center;\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"])), function (props) { return props.$width || '370px'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"])), function (props) {
+exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n\n        .popupText {\n            font: var(--caption-semi-bold-11-13);\n            text-align: center;\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n\n        .popupText {\n            font: var(--caption-semi-bold-11-13);\n            text-align: center;\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"])), function (props) { return props.$width || '370px'; });
+exports.FieldTop = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin-bottom: 16px;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin-bottom: 16px;\n"])));
+exports.FieldTopActions = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-left: auto;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-left: auto;\n"])));
+exports.FieldLabel = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
+exports.CharCount = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"])));
+exports.FieldDescription = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
+exports.InputStyled = styled_components_1.default.input(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"])), function (props) {
     if (props.disabled)
         return 'var(--dark-opacity-5)';
     if (props.$isCalendarOpen || props.$hasError)
@@ -27,5 +32,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        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;
+exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __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, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -30,6 +30,8 @@ export interface Input {
     filterDate?: any;
     onCalendarOpen?(): void;
     maxLength?: number;
+    showMaxLengthCounter?: boolean;
+    description?: string;
 }
 export interface InputStyledProps {
     disabled?: boolean;

package/dist/components/Input/props.js

@@ -31,4 +31,6 @@ exports.InputDefault = {
     filterDate: null,
     onCalendarOpen: null,
     maxLength: undefined,
+    showMaxLengthCounter: false,
+    description: null,
 };

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

@@ -35,6 +35,12 @@ declare const _default: {
         maxLength: {
             control: string;
         };
+        showMaxLengthCounter: {
+            control: string;
+        };
+        description: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -399,3 +405,14 @@ export declare const ErrorWithCustomLink: {
         onChange: (e: any) => void;
     };
 };
+export declare const WithMaxLengthAndDescription: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        label: string;
+        placeholder: string;
+        maxLength: number;
+        showMaxLengthCounter: boolean;
+        description: string;
+        id: string;
+    };
+};

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

@@ -14,8 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.Default = void 0;
+exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var Input_1 = __importDefault(require("../Input"));
 exports.default = {
     title: 'Components/Input',
@@ -32,6 +33,8 @@ exports.default = {
         onCustomLinkClick: { action: 'clicked' },
         type: { control: 'select', options: ["text", "number", "password", "date", "email", "tel"] },
         maxLength: { control: 'number' },
+        showMaxLengthCounter: { control: 'boolean' },
+        description: { control: 'text' },
     }
 };
 exports.Default = {
@@ -445,3 +448,19 @@ exports.ErrorWithCustomLink = {
         }
     },
 };
+var InputWithMaxLengthStory = function (args) {
+    var _a;
+    var _b = react_1.default.useState((_a = args.value) !== null && _a !== void 0 ? _a : ""), value = _b[0], setValue = _b[1];
+    return ((0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, args, { value: value, onChange: function (e) { return setValue(e.target.value); } })));
+};
+exports.WithMaxLengthAndDescription = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InputWithMaxLengthStory, __assign({}, args)); },
+    args: {
+        label: "Kısa açıklama gir",
+        placeholder: "Kısa açıklama yaz",
+        maxLength: 60,
+        showMaxLengthCounter: true,
+        description: "Ürün adının altında, ürün kartlarında ve sepete ekleme modalında görünür.",
+        id: "input_max_length_description",
+    },
+};

package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js

@@ -11,5 +11,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductCardHorizontalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 0.5rem;\n\n    ", "\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: ", ";\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: ", " !important;\n                height: ", " !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n            }\n        }\n\n        .title {\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            position: relative;\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n                ", ";\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n            position: relative;\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n            position: relative;\n\n            .price {\n                margin-right: 4px;\n                font: var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font: var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n\n    ", "\n"], ["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 0.5rem;\n\n    ", "\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: ", ";\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: ", " !important;\n                height: ", " !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n            }\n        }\n\n        .title {\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            position: relative;\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n                ", ";\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n            position: relative;\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n            position: relative;\n\n            .price {\n                margin-right: 4px;\n                font: var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font: var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return !props.$hasLoading && "\n        &:hover {\n            background: var(--dark-opacity-3);\n        }\n    "; }, function (props) { return props.$hasLoading ? "none" : "1px solid var(--dark-opacity-5)"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "100%" : "90%"; }, function (props) { return props.$hasLoading ? "100%" : "90%"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "margin-bottom: 0.25rem" : null; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.$size === "small" ? "\n        .horizontalWrapper {\n            .img {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n            .title{\n                font: var(--caption-semi-bold-12-15);\n            }\n            .description {\n                display: none;\n            }\n            .priceContent {\n                .price {\n                   font: var(--caption-extra-bold-12-15);\n                }\n                .period {\n                   font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    " : ""; });
+exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 0.5rem;\n\n    ", "\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: ", ";\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: ", " !important;\n                height: ", " !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n                border-radius: 0.5rem;\n                max-height: calc(100% - 1rem);\n            }\n        }\n\n        .title {\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            position: relative;\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n                ", ";\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n            position: relative;\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n            position: relative;\n\n            .price {\n                margin-right: 4px;\n                font: var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font: var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n\n    ", "\n"], ["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 0.5rem;\n\n    ", "\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: ", ";\n            border-radius: 0.5rem;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: ", " !important;\n                height: ", " !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n                border-radius: 0.5rem;\n                max-height: calc(100% - 1rem);\n            }\n        }\n\n        .title {\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            position: relative;\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n                ", ";\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n            position: relative;\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n            position: relative;\n\n            .price {\n                margin-right: 4px;\n                font: var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font: var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return !props.$hasLoading && "\n        &:hover {\n            background: var(--dark-opacity-3);\n        }\n    "; }, function (props) { return props.$hasLoading ? "none" : "1px solid var(--dark-opacity-5)"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "100%" : "initial"; }, function (props) { return props.$hasLoading ? "100%" : "initial"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "margin-bottom: 0.25rem" : null; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.$size === "small" ? "\n        .horizontalWrapper {\n            .img {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n            .title{\n                font: var(--caption-semi-bold-12-15);\n            }\n            .description {\n                display: none;\n            }\n            .priceContent {\n                .price {\n                   font: var(--caption-extra-bold-12-15);\n                }\n                .period {\n                   font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    " : ""; });
 var templateObject_1;

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, oldPrice, newPrice, discountRate, variant, 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, hasPriceLoading, textSize, hasBgColor, }: import("./props").ProductCardHorizontalMd) => React.JSX.Element>;
 export default _default;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.js

@@ -20,13 +20,14 @@ var react_1 = require("react");
 var props_1 = require("./props");
 var ProductCardHorizontalMd_styled_1 = require("./ProductCardHorizontalMd.styled");
 var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
+var Loader_1 = __importDefault(require("../Loader"));
 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.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 _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.hasPriceLoading, hasPriceLoading = _s === void 0 ? props_1.ProductCardHorizontalMdDefault.hasPriceLoading : _s, _t = _a.textSize, textSize = _t === void 0 ? props_1.ProductCardHorizontalMdDefault.textSize : _t, _u = _a.hasBgColor, hasBgColor = _u === void 0 ? props_1.ProductCardHorizontalMdDefault.hasBgColor : _u;
     var styledProps = {
         $hasLoading: hasLoading,
         $textSize: textSize,
@@ -38,11 +39,12 @@ var ProductCardHorizontalMd = function (_a) {
     var hasListDescription = filteredListDescription.length > 0;
     var hasDescription = hasLoading || hasListDescription || Boolean(description);
     var isDiscountVariant = variant === 'discount';
-    var hasDiscountPrice = hasLoading || oldPrice || newPrice || (discountRate != null && discountRate > 0);
+    var showPriceLoading = hasPriceLoading && !hasLoading;
+    var hasDiscountPrice = hasLoading || showPriceLoading || 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 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.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 || showPriceLoading || unitPriceText || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceSection, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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.jsx)(ProductCardHorizontalMd_styled_1.PriceRow, __assign({}, styledProps, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, __assign({ "$isDiscount": true, "$fullRow": true }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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: "65px", 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, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "15px", hasInset: true })) : (oldPrice) }))), (hasLoading || newPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.NewPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", 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

@@ -6,8 +6,16 @@ export declare const DiscountContentSection: import("styled-components/dist/type
 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 OldPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasLoading"> & {
+    $hasLoading?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasLoading"> & {
+    $hasLoading?: boolean;
+}, never>>> & string;
+export declare const NewPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasLoading"> & {
+    $hasLoading?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasLoading"> & {
+    $hasLoading?: boolean;
+}, 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;
@@ -17,4 +25,11 @@ export declare const DescriptionListItem: import("styled-components/dist/types")
 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 PriceLoading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isDiscount" | "$fullRow"> & {
+    $isDiscount?: boolean;
+    $fullRow?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isDiscount" | "$fullRow"> & {
+    $isDiscount?: boolean;
+    $fullRow?: boolean;
+}, 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;