krl-alfred 1.83.1 → 1.83.3

package/dist/components/Badges/props.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgesDefault = exports.variants = exports.sizes = exports.layouts = void 0;
 exports.layouts = ['belt', 'dark', 'text'];
 exports.sizes = ['large', 'medium', 'small', 'xsmall'];
-exports.variants = ['primary', 'secondary', 'danger', 'disabled'];
+exports.variants = ['primary', 'secondary', 'danger', 'disabled', 'light'];
 exports.BadgesDefault = {
     title: "İndirimli"
 };

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

@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var SvgStarfullSmall = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.73186 12.3144C7.8955 12.2104 8.1045 12.2104 8.26814 12.3144L10.6911 13.8538C11.0668 14.0925 11.5437 13.7582 11.4474 13.3236L10.7866 10.3426C10.7479 10.1678 10.8055 9.9856 10.9379 9.86495L13.1596 7.83891C13.4812 7.54569 13.3006 7.01013 12.8672 6.97144L9.99104 6.71466C9.80387 6.69795 9.64188 6.5777 9.57169 6.40339L8.46381 3.65191C8.29564 3.23425 7.70436 3.23425 7.53619 3.65191L6.42831 6.40339C6.35812 6.5777 6.19613 6.69795 6.00896 6.71466L3.13281 6.97144C2.69938 7.01013 2.51883 7.54569 2.84037 7.83891L5.06214 9.86495C5.19445 9.9856 5.25214 10.1678 5.21339 10.3426L4.55263 13.3236C4.4563 13.7582 4.93319 14.0925 5.30892 13.8538L7.73186 12.3144Z", fill: "currentColor" }) }))); };
+var SvgStarfullSmall = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("g", __assign({ clipPath: "url(#clip0_33915_135572)" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.73186 13.029C7.8955 12.9251 8.1045 12.9251 8.26814 13.029L11.9271 15.3538C12.3029 15.5925 12.7797 15.2582 12.6834 14.8236L11.6946 10.3626C11.6558 10.1878 11.7135 10.0056 11.8458 9.88495L15.1596 6.8631C15.4812 6.56988 15.3006 6.03432 14.8672 5.99563L10.5531 5.61047C10.3659 5.59376 10.2039 5.47351 10.1337 5.2992L8.46381 1.15191C8.29564 0.734246 7.70436 0.734248 7.53619 1.15191L5.86629 5.2992C5.7961 5.47351 5.63411 5.59376 5.44694 5.61047L1.13281 5.99563C0.699376 6.03432 0.518827 6.56988 0.840369 6.8631L4.15416 9.88495C4.28646 10.0056 4.34415 10.1878 4.3054 10.3626L3.31659 14.8236C3.22025 15.2582 3.69715 15.5925 4.07287 15.3538L7.73186 13.029Z", fill: "currentColor" }) })), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", __assign({ id: "clip0_33915_135572" }, { children: (0, jsx_runtime_1.jsx)("rect", { width: 16, height: 16, fill: "white" }) })) })] }))); };
 exports.default = SvgStarfullSmall;

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

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgStarfullXSmall = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.73186 11.8144C7.8955 11.7104 8.1045 11.7104 8.26814 11.8144L10.6911 13.3538C11.0668 13.5925 11.5437 13.2582 11.4474 12.8236L10.7866 9.84261C10.7479 9.66779 10.8055 9.4856 10.9379 9.36495L13.1596 7.33891C13.4812 7.04569 13.3006 6.51013 12.8672 6.47144L9.99104 6.21466C9.80387 6.19795 9.64188 6.0777 9.57169 5.90339L8.46381 3.15191C8.29564 2.73425 7.70436 2.73425 7.53619 3.15191L6.42831 5.90339C6.35812 6.0777 6.19613 6.19795 6.00896 6.21466L3.13281 6.47144C2.69938 6.51013 2.51883 7.04569 2.84037 7.33891L5.06214 9.36495C5.19445 9.4856 5.25214 9.66779 5.21339 9.84261L4.55263 12.8236C4.4563 13.2582 4.93319 13.5925 5.30892 13.3538L7.73186 11.8144Z", fill: "currentColor" }) }))); };
+exports.default = SvgStarfullXSmall;

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

@@ -28,8 +28,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeft = exports.ArrowSmallDown = 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.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.Folder = exports.Flash = exports.FilterUp = exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Completed = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = void 0;
 exports.PlusCircle = exports.PlusBig = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = void 0;
-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.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = void 0;
-exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.RotateRight = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUp = exports.VolumeOff = void 0;
+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.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = void 0;
+exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.RotateRight = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = 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; } });
@@ -383,6 +383,8 @@ var Starfull_1 = __importDefault(require("./Starfull"));
 Object.defineProperty(exports, "Starfull", { enumerable: true, get: function () { return Starfull_1.default; } });
 var StarfullSmall_1 = __importDefault(require("./StarfullSmall"));
 Object.defineProperty(exports, "StarfullSmall", { enumerable: true, get: function () { return StarfullSmall_1.default; } });
+var StarfullXSmall_1 = __importDefault(require("./StarfullXSmall"));
+Object.defineProperty(exports, "StarfullXSmall", { enumerable: true, get: function () { return StarfullXSmall_1.default; } });
 var Swap_1 = __importDefault(require("./Swap"));
 Object.defineProperty(exports, "Swap", { enumerable: true, get: function () { return Swap_1.default; } });
 var SwitchPassive_1 = __importDefault(require("./SwitchPassive"));
@@ -1210,6 +1212,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(StarfullSmall_1.default, __assign({}, props));
     },
+    StarfullXSmall: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(StarfullXSmall_1.default, __assign({}, props));
+    },
     Swap: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Swap_1.default, __assign({}, props));

package/dist/components/InfoBox/InfoBox.js

@@ -56,6 +56,6 @@ var InfoBox = function (_a) {
             }
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) })), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) })), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, __assign({ "$size": size, ref: descriptionRef }, { children: description })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
 };
 exports.default = InfoBox;

package/dist/components/Input/Input.js

@@ -41,11 +41,11 @@ 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, 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"]);
-    var _1 = (0, react_1.useState)(type), inputType = _1[0], setInputType = _1[1];
-    var _2 = (0, react_1.useState)(false), alert = _2[0], setAlert = _2[1];
-    var _3 = (0, react_1.useState)(value), inputValue = _3[0], setInputValue = _3[1];
-    var _4 = (0, react_1.useState)(value ? new Date(value) : null), startDate = _4[0], setStartDate = _4[1];
+    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, 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"]);
+    var _4 = (0, react_1.useState)(type), inputType = _4[0], setInputType = _4[1];
+    var _5 = (0, react_1.useState)(false), alert = _5[0], setAlert = _5[1];
+    var _6 = (0, react_1.useState)(value), inputValue = _6[0], setInputValue = _6[1];
+    var _7 = (0, react_1.useState)(value ? new Date(value) : null), startDate = _7[0], setStartDate = _7[1];
     var inputRef = (0, react_1.useRef)(null);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
@@ -85,21 +85,22 @@ var Input = function (_a) {
             onClear();
     };
     return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
-                        : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, value: value, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
+                        : 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, value: value, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
                                     setStartDate(date);
                                     setInputValue((0, date_fns_1.format)(date, format));
                                     onChange((0, date_fns_1.format)(date, format));
                                     setTimeout(function () {
-                                        inputRef.current.input.blur();
+                                        var _a, _b;
+                                        (_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.blur();
                                     }, 1);
                                 }, selected: startDate, ref: inputRef, dateFormat: format, locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), 
                                 //customInput={<InputStyled $hasError={hasError} id={id}/>}
-                                renderCustomHeader: function (_a) {
-                                    var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear;
-                                    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
-                                } }) })) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
+                                inline: inline, minDate: minDate, maxDate: maxDate, renderCustomHeader: function (_a) {
+                                    var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
+                                    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
+                                } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
                                 onChange(e);
                                 setInputValue(e.currentTarget.value);
-                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
+                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$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" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
 };
 exports.default = Input;

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

@@ -12,5 +12,5 @@ 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        }\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        }\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) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '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\n        .react-datepicker__triangle {\n            display: none !important;\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: 0 6px 30px 0 var(--box-shadow-color);\n\n            .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n                background-color: transparent !important;\n                color: inherit !important;\n            }\n\n            .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n                margin: 0 !important;\n                width: 1.5rem !important;\n                height: 1.5rem !important;\n                line-height: 1.5rem !important;\n            }\n\n            .react-datepicker__navigation {\n                position: static;\n                border-radius: 0.5rem;\n                transition: all .2s ease;\n\n                &:hover {\n                    background-color: white;\n                    box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                    z-index: 2;\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: 1rem 1.5rem;\n\n                        .react-datepicker__navigation {\n                            width: 1.5rem;\n                            height: 1.5rem;\n                        }\n\n                        .leftButtons, .rightButtons {\n                            display: flex;\n                            align-items: center;\n                            justify-content: space-between;\n                            color: var(--dark-opacity-50);\n\n                            svg {\n                                color: var(--dark-opacity-50);\n                            }\n                        }\n                    }\n\n                    .react-datepicker__current-month {\n                        display: block !important;\n                        font: var(--body-semi-bold-14-17);\n                    }\n                }\n\n                .react-datepicker__month {\n                    margin: 0 1.5rem 1rem 1.5rem !important;\n                }\n\n                .react-datepicker__day-names {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    margin: 0.5rem 1.5rem !important;\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                    .react-datepicker__day {\n                        font: var(--caption-bold-12-15);\n                        color: var(--dark);\n                        outline: none !important;\n\n                        &:is(.react-datepicker__day--selected), &:hover {\n                            border-radius: 0.25rem;\n                            background-color: var(--primary-opacity-10) !important;\n                            color: var(--primary) !important;\n                        }\n\n                        &:is(.react-datepicker__day--today) {\n                            color: var(--primary) !important;\n                        }\n\n                        &:is(.react-datepicker__day--outside-month) {\n                            color: var(--grey-50);\n                        }\n                    }\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\n        .react-datepicker__triangle {\n            display: none !important;\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: 0 6px 30px 0 var(--box-shadow-color);\n\n            .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n                background-color: transparent !important;\n                color: inherit !important;\n            }\n\n            .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n                margin: 0 !important;\n                width: 1.5rem !important;\n                height: 1.5rem !important;\n                line-height: 1.5rem !important;\n            }\n\n            .react-datepicker__navigation {\n                position: static;\n                border-radius: 0.5rem;\n                transition: all .2s ease;\n\n                &:hover {\n                    background-color: white;\n                    box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                    z-index: 2;\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: 1rem 1.5rem;\n\n                        .react-datepicker__navigation {\n                            width: 1.5rem;\n                            height: 1.5rem;\n                        }\n\n                        .leftButtons, .rightButtons {\n                            display: flex;\n                            align-items: center;\n                            justify-content: space-between;\n                            color: var(--dark-opacity-50);\n\n                            svg {\n                                color: var(--dark-opacity-50);\n                            }\n                        }\n                    }\n\n                    .react-datepicker__current-month {\n                        display: block !important;\n                        font: var(--body-semi-bold-14-17);\n                    }\n                }\n\n                .react-datepicker__month {\n                    margin: 0 1.5rem 1rem 1.5rem !important;\n                }\n\n                .react-datepicker__day-names {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    margin: 0.5rem 1.5rem !important;\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                    .react-datepicker__day {\n                        font: var(--caption-bold-12-15);\n                        color: var(--dark);\n                        outline: none !important;\n\n                        &:is(.react-datepicker__day--selected), &:hover {\n                            border-radius: 0.25rem;\n                            background-color: var(--primary-opacity-10) !important;\n                            color: var(--primary) !important;\n                        }\n\n                        &:is(.react-datepicker__day--today) {\n                            color: var(--primary) !important;\n                        }\n\n                        &:is(.react-datepicker__day--outside-month) {\n                            color: var(--grey-50);\n                        }\n                    }\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"])));
+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\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\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today) {\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                }\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\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\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today) {\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                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Input/props.js

@@ -24,5 +24,8 @@ exports.InputDefault = {
     infoText: null,
     id: null,
     isClearable: false,
-    hasNumericFormat: false
+    hasNumericFormat: false,
+    inline: false,
+    minDate: null,
+    maxDate: null,
 };

package/dist/components/ReviewBlock/ReviewBlock.js

@@ -23,7 +23,7 @@ var react_i18next_1 = require("react-i18next");
 var TextLink_1 = __importDefault(require("../TextLink"));
 var Dropdown_1 = __importDefault(require("../Dropdown"));
 var ReviewBlock = function (_a) {
-    var _b = _a.rating, rating = _b === void 0 ? props_1.ReviewBlockDefault.rating : _b, customerName = _a.customerName, date = _a.date, _c = _a.comment, comment = _c === void 0 ? props_1.ReviewBlockDefault.comment : _c, productReviews = _a.productReviews, _d = _a.maxStars, maxStars = _d === void 0 ? props_1.ReviewBlockDefault.maxStars : _d, _e = _a.hasDropdown, hasDropdown = _e === void 0 ? props_1.ReviewBlockDefault.hasDropdown : _e, _f = _a.hasApproveButton, hasApproveButton = _f === void 0 ? props_1.ReviewBlockDefault.hasApproveButton : _f, onApproveButtonClick = _a.onApproveButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick;
+    var _b = _a.rating, rating = _b === void 0 ? props_1.ReviewBlockDefault.rating : _b, customerName = _a.customerName, date = _a.date, _c = _a.comment, comment = _c === void 0 ? props_1.ReviewBlockDefault.comment : _c, productReviews = _a.productReviews, _d = _a.maxStars, maxStars = _d === void 0 ? props_1.ReviewBlockDefault.maxStars : _d, _e = _a.hasDropdown, hasDropdown = _e === void 0 ? props_1.ReviewBlockDefault.hasDropdown : _e, _f = _a.hasApproveButton, hasApproveButton = _f === void 0 ? props_1.ReviewBlockDefault.hasApproveButton : _f, _g = _a.hasBadge, hasBadge = _g === void 0 ? props_1.ReviewBlockDefault.hasBadge : _g, _h = _a.badgeText, badgeText = _h === void 0 ? props_1.ReviewBlockDefault.badgeText : _h, _j = _a.badgeVariant, badgeVariant = _j === void 0 ? props_1.ReviewBlockDefault.badgeVariant : _j, onApproveButtonClick = _a.onApproveButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick;
     var t = (0, react_i18next_1.useTranslation)().t;
     var percentage = (rating / maxStars) * 100;
     var dropdownList = [
@@ -32,7 +32,7 @@ var ReviewBlock = function (_a) {
             onClick: onRemoveButtonClick,
         }
     ];
-    return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ReviewCard, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.Header, __assign({ "$hasDropdown": hasDropdown, "$hasApproveButton": hasApproveButton }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.StarsWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "notFilleds" }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--dark-opacity-10)" }, i)); }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "filleds", style: { width: "".concat(percentage, "%") } }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--yellowDark)" }, i)); }) }))] }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.CustomerName, { children: customerName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasApproveButton && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onApproveButtonClick }, { children: t("POST_COMMENTS") })) })), hasDropdown && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "-12px", width: "145px", top: "calc(100% + 10px)" }) })), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Date, { children: date })] })] })), comment && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.PlatformReview, { children: comment }), productReviews === null || productReviews === void 0 ? void 0 : productReviews.map(function (product, idx) {
+    return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ReviewCard, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.Header, __assign({ "$hasDropdown": hasDropdown, "$hasApproveButton": hasApproveButton }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.StarsWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "notFilleds" }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--dark-opacity-10)" }, i)); }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "filleds", style: { width: "".concat(percentage, "%") } }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--yellowDark)" }, i)); }) }))] }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.CustomerName, { children: customerName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasApproveButton && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onApproveButtonClick }, { children: t("POST_COMMENTS") })) })), hasBadge && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: badgeVariant, title: badgeText }) })), hasDropdown && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "-12px", width: "145px", top: "calc(100% + 10px)" }) })), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Date, { children: date })] })] })), comment && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.PlatformReview, { children: comment }), productReviews === null || productReviews === void 0 ? void 0 : productReviews.map(function (product, idx) {
                 var _a, _b;
                 return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductReviewBlock, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductWrapper, { children: [(0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductImage, { children: product === null || product === void 0 ? void 0 : product.image }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductReviewContent, { children: (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductName, { children: product === null || product === void 0 ? void 0 : product.name }) })] }), (product === null || product === void 0 ? void 0 : product.question) && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductQuestion, { children: product === null || product === void 0 ? void 0 : product.question }), (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductAnswer, { children: ["\u201C", product === null || product === void 0 ? void 0 : product.answer, "\u201D"] }), ((_a = product === null || product === void 0 ? void 0 : product.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Tags, { children: (_b = product === null || product === void 0 ? void 0 : product.tags) === null || _b === void 0 ? void 0 : _b.map(function (tag, i) { return ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: tag }, i)); }) }))] }, idx));
             })] }));

package/dist/components/ReviewBlock/ReviewBlock.styled.js

@@ -7,12 +7,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownToggleButton = exports.DropdownWrapper = exports.StarsWrapper = exports.TextLinkWrapper = exports.Tags = exports.ProductAnswer = exports.ProductQuestion = exports.ProductName = exports.ProductReviewContent = exports.ProductImage = exports.ProductWrapper = exports.ProductReviewBlock = exports.PlatformReview = exports.Date = exports.CustomerName = exports.Header = exports.ReviewCard = void 0;
+exports.DropdownToggleButton = exports.DropdownWrapper = exports.StarsWrapper = exports.BadgeWrapper = exports.TextLinkWrapper = exports.Tags = exports.ProductAnswer = exports.ProductQuestion = exports.ProductName = exports.ProductReviewContent = exports.ProductImage = exports.ProductWrapper = exports.ProductReviewBlock = exports.PlatformReview = exports.Date = exports.CustomerName = exports.Header = exports.ReviewCard = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: white;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n"], ["\n    background: white;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n"])));
 exports.Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: ", ";\n    border-bottom: 1px solid var(--dark-opacity-10);\n    padding-bottom: 1rem;\n    margin-bottom: 1rem;\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: ", ";\n    border-bottom: 1px solid var(--dark-opacity-10);\n    padding-bottom: 1rem;\n    margin-bottom: 1rem;\n"])), function (props) { return props.$hasDropdown || props.$hasApproveButton ? "center" : "flex-end"; });
 exports.CustomerName = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n"])));
-exports.Date = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--caption-semi-bold-12-15);\n    margin-top: 1rem;\n    text-align: end;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--caption-semi-bold-12-15);\n    margin-top: 1rem;\n    text-align: end;\n"])));
+exports.Date = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font: var(--caption-semi-bold-12-15);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n    text-align: end;\n"], ["\n    font: var(--caption-semi-bold-12-15);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n    text-align: end;\n"])));
 exports.PlatformReview = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font: var(--body-regular-14-20);\n    color: var(--grey-90);\n    margin: 16px 0;\n"], ["\n    font: var(--body-regular-14-20);\n    color: var(--grey-90);\n    margin: 16px 0;\n"])));
 exports.ProductReviewBlock = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    + div{\n        margin-top: 1.5rem;\n    }\n"], ["\n    + div{\n        margin-top: 1.5rem;\n    }\n"])));
 exports.ProductWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    margin-bottom: 1rem;\n"], ["\n    margin-top: 0;\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    margin-bottom: 1rem;\n"])));
@@ -23,7 +23,8 @@ exports.ProductQuestion = styled_components_1.default.div(templateObject_11 || (
 exports.ProductAnswer = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n    margin: 0;\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n    margin: 0;\n"])));
 exports.Tags = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"])));
 exports.TextLinkWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: var(--body-bold-14-17);\n"], ["\n    font: var(--body-bold-14-17);\n"])));
-exports.StarsWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    position: relative;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n\n    .filleds {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: absolute;\n        inset: 0;\n        left: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        color: var(--yellowDark);\n        z-index: 1;\n    }\n\n    .notFilleds {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        color: var(--dark-opacity-10);\n        z-index: 0;\n    }\n"], ["\n    position: relative;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n\n    .filleds {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: absolute;\n        inset: 0;\n        left: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        color: var(--yellowDark);\n        z-index: 1;\n    }\n\n    .notFilleds {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        color: var(--dark-opacity-10);\n        z-index: 0;\n    }\n"])));
-exports.DropdownWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    margin-left: 1rem;\n"], ["\n    margin-left: 1rem;\n"])));
-exports.DropdownToggleButton = styled_components_1.default.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0;\n    background: none;\n    color: var(--primary);\n"], ["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0;\n    background: none;\n    color: var(--primary);\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+exports.BadgeWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    text-align: end;\n    div{\n        display: inline-block;\n    }\n"], ["\n    text-align: end;\n    div{\n        display: inline-block;\n    }\n"])));
+exports.StarsWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    position: relative;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n\n    .filleds {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: absolute;\n        inset: 0;\n        left: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        color: var(--yellowDark);\n        z-index: 1;\n        column-gap: 2px;\n    }\n\n    .notFilleds {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        color: var(--dark-opacity-10);\n        z-index: 0;\n        column-gap: 2px;\n    }\n"], ["\n    position: relative;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n\n    .filleds {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: absolute;\n        inset: 0;\n        left: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        color: var(--yellowDark);\n        z-index: 1;\n        column-gap: 2px;\n    }\n\n    .notFilleds {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        color: var(--dark-opacity-10);\n        z-index: 0;\n        column-gap: 2px;\n    }\n"])));
+exports.DropdownWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    margin-left: 1rem;\n"], ["\n    margin-left: 1rem;\n"])));
+exports.DropdownToggleButton = styled_components_1.default.span(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0;\n    background: none;\n    color: var(--primary);\n"], ["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0;\n    background: none;\n    color: var(--primary);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

package/dist/components/ReviewBlock/props.js

@@ -7,4 +7,7 @@ exports.ReviewBlockDefault = {
     comment: '',
     hasApproveButton: true,
     hasDropdown: false,
+    hasBadge: false,
+    badgeText: "badgeText",
+    badgeVariant: "light",
 };

package/dist/components/ReviewBlock/stories/ReviewBlock.stories.js

@@ -31,6 +31,9 @@ exports.Default = {
         date: "25 aralık 2024",
         hasApproveButton: true,
         hasDropdown: false,
+        hasBadge: false,
+        badgeVariant: "light",
+        badgeText: "Badge Text",
         onApproveButtonClick: function () { return console.log("onApproveButtonClick"); },
         onRemoveButtonClick: function () { return console.log("onRemoveButtonClick"); },
     },

package/dist/components/ReviewCard/ReviewCard.js

@@ -30,6 +30,6 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
 var classnames_1 = __importDefault(require("classnames"));
 var ReviewCard = function (_a) {
     var _b = _a.image, image = _b === void 0 ? props_1.ReviewCardDefault.image : _b, _c = _a.description, description = _c === void 0 ? props_1.ReviewCardDefault.description : _c, _d = _a.name, name = _d === void 0 ? props_1.ReviewCardDefault.name : _d, _e = _a.logo, logo = _e === void 0 ? props_1.ReviewCardDefault.logo : _e, _f = _a.star, star = _f === void 0 ? props_1.ReviewCardDefault.star : _f, _g = _a.totalStar, totalStar = _g === void 0 ? props_1.ReviewCardDefault.totalStar : _g, _h = _a.title, title = _h === void 0 ? props_1.ReviewCardDefault.title : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ReviewCardDefault.onClick : _j, _k = _a.date, date = _k === void 0 ? props_1.ReviewCardDefault.date : _k;
-    return ((0, jsx_runtime_1.jsx)(ReviewCard_styled_1.ReviewCardStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.ImgWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Detail, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Title, { children: title }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Stars, { children: __spreadArray([], Array(totalStar), true).map(function (value, key) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('star', { 'isFilled': key < star }) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: key < star ? 'var(--yellowDark)' : 'var(--dark-opacity-10)', name: "StarfullSmall" }) }), key)); }) })] })] }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Description, { children: description }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Line, {}), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Bottom, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.CustomerName, { children: name }), logo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.HorizontalLine, {}), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Logo, { children: logo })] }))] }), date && (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Date, { children: date })] })] }) })));
+    return ((0, jsx_runtime_1.jsx)(ReviewCard_styled_1.ReviewCardStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.ImgWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Detail, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Title, { children: title }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Stars, { children: __spreadArray([], Array(totalStar), true).map(function (value, key) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('star', { 'isFilled': key < star }) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: key < star ? 'var(--yellowDark)' : 'var(--dark-opacity-10)', name: "StarfullXSmall" }) }), key)); }) })] })] }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Description, { children: description }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Line, {}), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Bottom, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.CustomerName, { children: name }), logo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.HorizontalLine, {}), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Logo, { children: logo })] }))] }), date && (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Date, { children: date })] })] }) })));
 };
 exports.default = ReviewCard;

package/dist/components/ReviewCard/ReviewCard.styled.js

@@ -13,7 +13,7 @@ exports.ReviewCardStyled = styled_components_1.default.div(templateObject_1 || (
 exports.ImgWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .img{\n        width: 64px;\n        height: 64px;\n        border: 1px solid var(--dark-opacity-5);\n        border-radius: 0.5rem;\n        position: relative;\n        margin-right: 1rem;\n        overflow: hidden;\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 1 0 auto;\n        max-width: 64px;\n        * {\n            display: block !important;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .img{\n        width: 64px;\n        height: 64px;\n        border: 1px solid var(--dark-opacity-5);\n        border-radius: 0.5rem;\n        position: relative;\n        margin-right: 1rem;\n        overflow: hidden;\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 1 0 auto;\n        max-width: 64px;\n        * {\n            display: block !important;\n        }\n    }\n"])));
 exports.Detail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n"], ["\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-bottom: 0.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    color: var(--dark-opacity-75);\n    font : var(--body-bold-14-17);\n"], ["\n    margin-bottom: 0.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    color: var(--dark-opacity-75);\n    font : var(--body-bold-14-17);\n"])));
-exports.Stars = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .star{\n        + .star{\n            margin-left: 1px;\n        }\n        div{\n            display: block;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .star{\n        + .star{\n            margin-left: 1px;\n        }\n        div{\n            display: block;\n        }\n    }\n"])));
+exports.Stars = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .star{\n        + .star{\n            margin-left: -2px;\n        }\n        div{\n            display: block;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .star{\n        + .star{\n            margin-left: -2px;\n        }\n        div{\n            display: block;\n        }\n    }\n"])));
 exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n    margin: 1rem 0 1.5rem 0;\n    overflow: hidden;\n    position: relative;\n    min-height: 68px;\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n    margin: 1rem 0 1.5rem 0;\n    overflow: hidden;\n    position: relative;\n    min-height: 68px;\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n"])));
 exports.Line = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    border-bottom: 1px solid var(--icon-shadow-color);\n    margin-bottom: 1rem;\n"], ["\n    border-bottom: 1px solid var(--icon-shadow-color);\n    margin-bottom: 1rem;\n"])));
 exports.Bottom = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    >div{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    >div{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n"])));

package/dist/components/Tabs/TabItem.js

@@ -10,15 +10,19 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./props");
 var react_1 = require("react");
 var TabContext_1 = require("./TabContext");
 var Tabs_styled_1 = require("./Tabs.styled");
+var classnames_1 = __importDefault(require("classnames"));
 var TabItem = function (_a) {
-    var _b = _a.isActive, isActive = _b === void 0 ? props_1.TabItemDefault.isActive : _b, _c = _a.hasAutoFlex, hasAutoFlex = _c === void 0 ? props_1.TabsDefault.hasAutoFlex : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? props_1.TabItemDefault.isDisabled : _d, _e = _a.title, title = _e === void 0 ? props_1.TabItemDefault.title : _e, _f = _a.children, children = _f === void 0 ? props_1.TabItemDefault.children : _f, _g = _a.key, key = _g === void 0 ? props_1.TabItemDefault.key : _g, _h = _a.onClick, onClick = _h === void 0 ? props_1.TabItemDefault.onClick : _h;
-    var _j = (0, react_1.useContext)(TabContext_1.TabsContext), onActivate = _j.onActivate, setActiveContent = _j.setActiveContent;
+    var _b = _a.isActive, isActive = _b === void 0 ? props_1.TabItemDefault.isActive : _b, _c = _a.hasAutoFlex, hasAutoFlex = _c === void 0 ? props_1.TabsDefault.hasAutoFlex : _c, _d = _a.size, size = _d === void 0 ? props_1.TabsDefault.size : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? props_1.TabItemDefault.isDisabled : _e, _f = _a.title, title = _f === void 0 ? props_1.TabItemDefault.title : _f, _g = _a.children, children = _g === void 0 ? props_1.TabItemDefault.children : _g, _h = _a.key, key = _h === void 0 ? props_1.TabItemDefault.key : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.TabItemDefault.onClick : _j;
+    var _k = (0, react_1.useContext)(TabContext_1.TabsContext), onActivate = _k.onActivate, setActiveContent = _k.setActiveContent;
     var onClickTab = function (event) {
         if (event) {
             event.preventDefault();
@@ -33,6 +37,6 @@ var TabItem = function (_a) {
         if (isActive)
             setActiveContent(children);
     }, [isActive, children]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$isDisabled": isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": isActive, "$hasAutoFlex": hasAutoFlex, onClick: onClickTab }, { children: title })) }), key));
+    return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$size": size, className: (0, classnames_1.default)("customTabItem", { isActive: isActive }), "$isDisabled": isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$size": size, "$isActive": isActive, "$hasAutoFlex": hasAutoFlex, onClick: onClickTab }, { children: title })) }), key));
 };
 exports.default = TabItem;

package/dist/components/Tabs/Tabs.js

@@ -44,9 +44,9 @@ var Tabs_styled_1 = require("./Tabs.styled");
 var TabContext_1 = require("./TabContext");
 var TabItem_1 = __importDefault(require("./TabItem"));
 var Tabs = function (_a) {
-    var _b = _a.activeIndex, activeIndex = _b === void 0 ? props_1.TabsDefault.activeIndex : _b, _c = _a.children, children = _c === void 0 ? props_1.TabsDefault.children : _c, _d = _a.onActive, onActive = _d === void 0 ? props_1.TabsDefault.onActive : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e;
-    var _f = (0, react_1.useState)(activeIndex || 0), tabActiveIndex = _f[0], setTabActiveIndex = _f[1];
-    var _g = (0, react_1.useState)(null), activeContent = _g[0], setActiveContent = _g[1];
+    var _b = _a.activeIndex, activeIndex = _b === void 0 ? props_1.TabsDefault.activeIndex : _b, _c = _a.children, children = _c === void 0 ? props_1.TabsDefault.children : _c, _d = _a.onActive, onActive = _d === void 0 ? props_1.TabsDefault.onActive : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e, _f = _a.size, size = _f === void 0 ? props_1.TabsDefault.size : _f;
+    var _g = (0, react_1.useState)(activeIndex || 0), tabActiveIndex = _g[0], setTabActiveIndex = _g[1];
+    var _h = (0, react_1.useState)(null), activeContent = _h[0], setActiveContent = _h[1];
     (0, react_1.useEffect)(function () {
         setTabActiveIndex(activeIndex);
     }, [activeIndex]);
@@ -66,11 +66,22 @@ var Tabs = function (_a) {
             setActiveContent: setActiveContent,
         };
     }, [tabActiveIndex, activeIndex]);
-    return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ "$hasAutoFlex": hasAutoFlex }, { children: children === null || children === void 0 ? void 0 : children.map(function (child, index) { return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(TabContext_1.TabsContext.Provider, __assign({ value: getTabsContext(index) }, { children: child
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c;
+        if (window && typeof window !== "undefined") {
+            var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".tabHeader");
+            var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".customTabItem.isActive");
+            if (activeItem && elem) {
+                //activeItem.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+                elem.scrollLeft = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.offsetLeft) - (window.innerWidth / 2) + (((_c = activeItem === null || activeItem === void 0 ? void 0 : activeItem.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) / 2);
+            }
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ "$size": size, "$hasAutoFlex": hasAutoFlex, className: "tabHeader" }, { children: children === null || children === void 0 ? void 0 : children.map(function (child, index) { return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(TabContext_1.TabsContext.Provider, __assign({ value: getTabsContext(index) }, { children: child
                             ? // cloneElement is needed for backward compatibility with custom
                                 // styled components that rely on active. We should reassess
                                 // if it is still necessary in our next major release.
-                                react_1.default.cloneElement(child, { isActive: activeIndex === index, hasAutoFlex: hasAutoFlex }) : child })) }, index)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ className: "active-tab-".concat(activeIndex) }, { children: activeContent }))] }));
+                                react_1.default.cloneElement(child, { isActive: activeIndex === index, hasAutoFlex: hasAutoFlex, size: size }) : child })) }, index)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ className: "active-tab-".concat(activeIndex) }, { children: activeContent }))] }));
 };
 Tabs.TabItem = TabItem_1.default;
 exports.default = Tabs;

package/dist/components/Tabs/Tabs.styled.js

@@ -11,8 +11,8 @@ exports.TabItemContentStyled = exports.TabItemTitleStyled = exports.TabItemStyle
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: 1rem;\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: 1rem;\n    ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return !props.$hasAutoFlex && "\n      scroll-snap-type: x proximity;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n      overflow-x: scroll;\n      padding: 2rem;\n      margin: -2rem;\n      @media only screen and ".concat(devices_1.devices.xl, " {\n        padding: 2rem 1rem;\n        margin: -2rem -1rem;\n      }\n    "); });
+exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return props.$size === "large" ? "1.5rem" : "1rem"; }, function (props) { return !props.$hasAutoFlex && "\n      scroll-snap-type: x proximity;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n      overflow-x: scroll;\n      padding: 2rem;\n      margin: -2rem;\n      @media only screen and ".concat(devices_1.devices.xl, " {\n        padding: 2rem 1rem;\n        margin: -2rem -1rem;\n      }\n    "); });
 exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: ", ";\n    ", "\n"], ["\n    flex: ", ";\n    ", "\n"])), function (props) { return props.$hasAutoFlex ? "1 0" : "auto 0"; }, function (props) { return props.$isDisabled ? "\n        cursor: no-drop;\n        pointer-events: none;\n        user-select: none;\n    " : ""; });
-exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: ", ";\n    height: 40px;\n    cursor: pointer;\n    font: var(--body-semi-bold-14-17);\n    white-space: ", ";\n    outline: none !important;\n    &:hover {\n        color: var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    background: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: ", ";\n    height: 40px;\n    cursor: pointer;\n    font: var(--body-semi-bold-14-17);\n    white-space: ", ";\n    outline: none !important;\n    &:hover {\n        color: var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; }, function (props) { return props.$hasAutoFlex ? "0" : "0 1rem"; }, function (props) { return props.$hasAutoFlex ? "pre-wrap" : "nowrap"; });
+exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: ", ";\n    height: 40px;\n    cursor: pointer;\n    font: var(--body-semi-bold-14-17);\n    white-space: ", ";\n    outline: none !important;\n    &:hover {\n        color: var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    background: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: ", ";\n    height: 40px;\n    cursor: pointer;\n    font: var(--body-semi-bold-14-17);\n    white-space: ", ";\n    outline: none !important;\n    &:hover {\n        color: var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; }, function (props) { return props.$hasAutoFlex ? "0" : props.$size === "large" ? "0 1.5rem" : "0 1rem"; }, function (props) { return props.$hasAutoFlex ? "pre-wrap" : "nowrap"; });
 exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding-top: 1rem;\n"], ["\n    padding-top: 1rem;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/Tabs/props.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabItemDefault = exports.TabsDefault = void 0;
+exports.TabItemDefault = exports.TabsDefault = exports.sizes = void 0;
+exports.sizes = ['large', 'medium'];
 exports.TabsDefault = {
     activeIndex: null,
     children: null,
     onActive: null,
     hasAutoFlex: true,
+    size: "medium"
 };
 exports.TabItemDefault = {
     isActive: false,
@@ -15,4 +17,5 @@ exports.TabItemDefault = {
     key: null,
     onClick: null,
     hasAutoFlex: exports.TabsDefault.hasAutoFlex,
+    size: exports.TabsDefault.size,
 };

package/dist/components/TextLink/TextLink.styled.js

@@ -22,5 +22,5 @@ exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (temp
 }, function (props) { return props.$variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, devices_1.devices.lg, function (props) { return props.$variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.$variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
 exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n"], ["\n    ", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "margin-left: 0.5rem;" : 'margin-right: 0.5rem;'; });
 exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex-direction: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex-direction: ", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "row-reverse" : 'row'; });
-exports.AlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: absolute;\n    right: 0px;\n    top: calc(100% + 6px);\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    font: var(--caption-medium-10-12);\n    color: var(--dark);\n"], ["\n    position: absolute;\n    right: 0px;\n    top: calc(100% + 6px);\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    font: var(--caption-medium-10-12);\n    color: var(--dark);\n"])));
+exports.AlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: absolute;\n    right: 0px;\n    top: calc(100% + 6px);\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    font: var(--caption-medium-10-12);\n    color: var(--dark);\n    z-index: 99;\n"], ["\n    position: absolute;\n    right: 0px;\n    top: calc(100% + 6px);\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    font: var(--caption-medium-10-12);\n    color: var(--dark);\n    z-index: 99;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/VideoCard/VideoCard.styled.js

@@ -11,5 +11,5 @@ exports.Title = exports.VideoWrapper = exports.VideoCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.VideoCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    cursor: pointer;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n"], ["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    cursor: pointer;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n"])));
 exports.VideoWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    video{\n        display: block;\n        width: 100%;\n        height: 371px;\n        object-fit: cover;\n        position: relative;\n        overflow: hidden;\n        border-radius: 0.5rem;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    video{\n        display: block;\n        width: 100%;\n        height: 371px;\n        object-fit: cover;\n        position: relative;\n        overflow: hidden;\n        border-radius: 0.5rem;\n    }\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-top: 1.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    color: var(--dark-opacity-75);\n    font : var(--title-bold-16-19);\n"], ["\n    margin-top: 1.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    color: var(--dark-opacity-75);\n    font : var(--title-bold-16-19);\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-top: 1.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    font : var(--title-bold-16-19);\n"], ["\n    margin-top: 1.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    font : var(--title-bold-16-19);\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/i18n/locales/turkish.json

@@ -16,6 +16,6 @@
     "GO": "Git",
     "OPTIONAL": "Opsiyonel",
     "ALL_RENTED": "Hepsi kiralandı",
-    "POST_COMMENTS": "Yorumları yayınla",
+    "POST_COMMENTS": "Yorumlarını yayınla",
     "REMOVE_COMMENTS": "Yorumlarını kaldır"
 }

package/package.json

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