krl-alfred 2.18.23 → 2.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/components/AddressCard/AddressCard.d.ts +1 -1
  2. package/dist/components/AddressCard/AddressCard.js +2 -2
  3. package/dist/components/AddressCard/AddressCard.styled.d.ts +1 -0
  4. package/dist/components/AddressCard/AddressCard.styled.js +4 -3
  5. package/dist/components/AddressCard/props.d.ts +4 -0
  6. package/dist/components/AddressCard/props.js +2 -0
  7. package/dist/components/AddressCard/stories/AddressCard.stories.d.ts +38 -0
  8. package/dist/components/AddressCard/stories/AddressCard.stories.js +41 -1
  9. package/dist/components/Button/Button.js +6 -4
  10. package/dist/components/Button/Button.styled.js +2 -2
  11. package/dist/components/Button/props.d.ts +4 -0
  12. package/dist/components/Button/props.js +3 -1
  13. package/dist/components/Button/stories/Button.stories.d.ts +19 -0
  14. package/dist/components/Button/stories/Button.stories.js +5 -1
  15. package/dist/components/Icon/iconList/CheckMarkMd.d.ts +3 -0
  16. package/dist/components/Icon/iconList/CheckMarkMd.js +40 -0
  17. package/dist/components/Icon/iconList/ForwardMd.d.ts +3 -0
  18. package/dist/components/Icon/iconList/ForwardMd.js +40 -0
  19. package/dist/components/Icon/iconList/PauseMd.d.ts +3 -0
  20. package/dist/components/Icon/iconList/PauseMd.js +40 -0
  21. package/dist/components/Icon/iconList/TimeCircleMd.d.ts +3 -0
  22. package/dist/components/Icon/iconList/TimeCircleMd.js +40 -0
  23. package/dist/components/Icon/iconList/index.d.ts +17 -1
  24. package/dist/components/Icon/iconList/index.js +29 -5
  25. package/dist/components/InfoBox/InfoBox.d.ts +1 -1
  26. package/dist/components/InfoBox/InfoBox.js +5 -5
  27. package/dist/components/InfoBox/InfoBox.styled.js +4 -0
  28. package/dist/components/InfoBox/props.d.ts +1 -0
  29. package/dist/components/InfoBox/props.js +2 -1
  30. package/dist/components/InfoBox/stories/InfoBox.stories.d.ts +19 -0
  31. package/dist/components/InfoBox/stories/InfoBox.stories.js +8 -1
  32. package/dist/components/Input/Input.d.ts +1 -1
  33. package/dist/components/Input/Input.js +9 -9
  34. package/dist/components/Input/Input.styled.js +1 -1
  35. package/dist/components/Input/props.d.ts +1 -0
  36. package/dist/components/Input/props.js +1 -0
  37. package/dist/components/Input/stories/Input.stories.d.ts +3 -0
  38. package/dist/components/Input/stories/Input.stories.js +1 -0
  39. package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.d.ts +3 -0
  40. package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.js +41 -0
  41. package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.d.ts +14 -0
  42. package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.js +29 -0
  43. package/dist/components/ProductCardHorizontalMd/index.d.ts +1 -0
  44. package/dist/components/ProductCardHorizontalMd/index.js +8 -0
  45. package/dist/components/ProductCardHorizontalMd/props.d.ts +25 -0
  46. package/dist/components/ProductCardHorizontalMd/props.js +18 -0
  47. package/dist/components/ProductCardHorizontalMd/stories/ProductCardHorizontalMd.stories.d.ts +157 -0
  48. package/dist/components/ProductCardHorizontalMd/stories/ProductCardHorizontalMd.stories.js +70 -0
  49. package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts +1 -1
  50. package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js +3 -13
  51. package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.d.ts +1 -0
  52. package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +12 -11
  53. package/dist/components/ProductCardHorizontalSm/props.d.ts +2 -0
  54. package/dist/components/ProductCardHorizontalSm/props.js +1 -0
  55. package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts +39 -0
  56. package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js +9 -1
  57. package/dist/components/Textarea/Textarea.d.ts +1 -1
  58. package/dist/components/Textarea/Textarea.js +2 -2
  59. package/dist/components/Textarea/props.d.ts +2 -0
  60. package/dist/components/Textarea/props.js +1 -0
  61. package/dist/components/Textarea/stories/Textarea.stories.d.ts +4 -1
  62. package/dist/components/Textarea/stories/Textarea.stories.js +1 -0
  63. package/dist/index.d.ts +2 -1
  64. package/dist/index.js +4 -2
  65. package/package.json +1 -1
package/dist/components/Icon/iconList/index.d.ts CHANGED
@@ -188,6 +188,9 @@ export namespace iconList {
188
188
  function CheckMark({ ...props }: {
189
189
  [x: string]: any;
190
190
  }): import("react").JSX.Element;
191
+ function CheckMarkMd({ ...props }: {
192
+ [x: string]: any;
193
+ }): import("react").JSX.Element;
191
194
  function CheckboxElementChecked({ ...props }: {
192
195
  [x: string]: any;
193
196
  }): import("react").JSX.Element;
@@ -299,6 +302,9 @@ export namespace iconList {
299
302
  function Folder({ ...props }: {
300
303
  [x: string]: any;
301
304
  }): import("react").JSX.Element;
305
+ function ForwardMd({ ...props }: {
306
+ [x: string]: any;
307
+ }): import("react").JSX.Element;
302
308
  function Game({ ...props }: {
303
309
  [x: string]: any;
304
310
  }): import("react").JSX.Element;
@@ -467,6 +473,9 @@ export namespace iconList {
467
473
  function Pause({ ...props }: {
468
474
  [x: string]: any;
469
475
  }): import("react").JSX.Element;
476
+ function PauseMd({ ...props }: {
477
+ [x: string]: any;
478
+ }): import("react").JSX.Element;
470
479
  function PlusBig({ ...props }: {
471
480
  [x: string]: any;
472
481
  }): import("react").JSX.Element;
@@ -590,6 +599,9 @@ export namespace iconList {
590
599
  function TimeCircle({ ...props }: {
591
600
  [x: string]: any;
592
601
  }): import("react").JSX.Element;
602
+ function TimeCircleMd({ ...props }: {
603
+ [x: string]: any;
604
+ }): import("react").JSX.Element;
593
605
  function TimeSquare({ ...props }: {
594
606
  [x: string]: any;
595
607
  }): import("react").JSX.Element;
@@ -831,6 +843,7 @@ import { default as Category } from "./Category";
831
843
  import { default as Chart } from "./Chart";
832
844
  import { default as Chat } from "./Chat";
833
845
  import { default as CheckMark } from "./CheckMark";
846
+ import { default as CheckMarkMd } from "./CheckMarkMd";
834
847
  import { default as CheckboxElementChecked } from "./CheckboxElementChecked";
835
848
  import { default as CheckboxElementDisabled } from "./CheckboxElementDisabled";
836
849
  import { default as CheckboxElementInvalid } from "./CheckboxElementInvalid";
@@ -868,6 +881,7 @@ import { default as FilterSmall } from "./FilterSmall";
868
881
  import { default as FilterUp } from "./FilterUp";
869
882
  import { default as Flash } from "./Flash";
870
883
  import { default as Folder } from "./Folder";
884
+ import { default as ForwardMd } from "./ForwardMd";
871
885
  import { default as Game } from "./Game";
872
886
  import { default as Gift } from "./Gift";
873
887
  import { default as Graph } from "./Graph";
@@ -924,6 +938,7 @@ import { default as PaperPlus } from "./PaperPlus";
924
938
  import { default as PaperUpload } from "./PaperUpload";
925
939
  import { default as Password } from "./Password";
926
940
  import { default as Pause } from "./Pause";
941
+ import { default as PauseMd } from "./PauseMd";
927
942
  import { default as PlusBig } from "./PlusBig";
928
943
  import { default as PlusCircle } from "./PlusCircle";
929
944
  import { default as PlusSmall } from "./PlusSmall";
@@ -965,6 +980,7 @@ import { default as TickSquare } from "./TickSquare";
965
980
  import { default as TicketStar } from "./TicketStar";
966
981
  import { default as Ticket } from "./Ticket";
967
982
  import { default as TimeCircle } from "./TimeCircle";
983
+ import { default as TimeCircleMd } from "./TimeCircleMd";
968
984
  import { default as TimeSquare } from "./TimeSquare";
969
985
  import { default as Trash } from "./Trash";
970
986
  import { default as Twitter } from "./Twitter";
@@ -1024,4 +1040,4 @@ import { default as UserPlusLg } from "./UserPlusLg";
1024
1040
  import { default as Wphk } from "./Wphk";
1025
1041
  import { default as Youtubehk } from "./Youtubehk";
1026
1042
  import { default as Youtubewithfooter } from "./Youtubewithfooter";
1027
- export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PlusBig, PlusCircle, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickSquare, TicketStar, Ticket, TimeCircle, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };
1043
+ export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlusBig, PlusCircle, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };
package/dist/components/Icon/iconList/index.js CHANGED
@@ -26,11 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.Call = exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.BagCircleFilled = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeft = exports.ArrowSmallDownStroke = exports.ArrowSmallDown = exports.ArrowSharemini = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGoSmall = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.Announcement = exports.Activity = void 0;
29
- exports.Folder = exports.Flash = exports.FilterUp = exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ElSatis = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.DownloadMini = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.CreditCard = exports.Copy = exports.Completed = exports.Coffee = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = void 0;
30
- 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.MoneyBig = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = void 0;
31
- exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusCircle = exports.PlusBig = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = void 0;
32
- exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = void 0;
33
- exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = void 0;
29
+ exports.Flash = exports.FilterUp = exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ElSatis = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.DownloadMini = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.CreditCard = exports.Copy = exports.Completed = exports.Coffee = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkMd = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = void 0;
30
+ exports.OrderProgressIcons = exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.MoneyBig = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.ForwardMd = exports.Folder = void 0;
31
+ exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusCircle = exports.PlusBig = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = void 0;
32
+ exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = void 0;
33
+ exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = void 0;
34
34
  var jsx_runtime_1 = require("react/jsx-runtime");
35
35
  var Activity_1 = __importDefault(require("./Activity"));
36
36
  Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -158,6 +158,8 @@ var Chat_1 = __importDefault(require("./Chat"));
158
158
  Object.defineProperty(exports, "Chat", { enumerable: true, get: function () { return Chat_1.default; } });
159
159
  var CheckMark_1 = __importDefault(require("./CheckMark"));
160
160
  Object.defineProperty(exports, "CheckMark", { enumerable: true, get: function () { return CheckMark_1.default; } });
161
+ var CheckMarkMd_1 = __importDefault(require("./CheckMarkMd"));
162
+ Object.defineProperty(exports, "CheckMarkMd", { enumerable: true, get: function () { return CheckMarkMd_1.default; } });
161
163
  var CheckboxElementChecked_1 = __importDefault(require("./CheckboxElementChecked"));
162
164
  Object.defineProperty(exports, "CheckboxElementChecked", { enumerable: true, get: function () { return CheckboxElementChecked_1.default; } });
163
165
  var CheckboxElementDisabled_1 = __importDefault(require("./CheckboxElementDisabled"));
@@ -232,6 +234,8 @@ var Flash_1 = __importDefault(require("./Flash"));
232
234
  Object.defineProperty(exports, "Flash", { enumerable: true, get: function () { return Flash_1.default; } });
233
235
  var Folder_1 = __importDefault(require("./Folder"));
234
236
  Object.defineProperty(exports, "Folder", { enumerable: true, get: function () { return Folder_1.default; } });
237
+ var ForwardMd_1 = __importDefault(require("./ForwardMd"));
238
+ Object.defineProperty(exports, "ForwardMd", { enumerable: true, get: function () { return ForwardMd_1.default; } });
235
239
  var Game_1 = __importDefault(require("./Game"));
236
240
  Object.defineProperty(exports, "Game", { enumerable: true, get: function () { return Game_1.default; } });
237
241
  var Gift_1 = __importDefault(require("./Gift"));
@@ -344,6 +348,8 @@ var Password_1 = __importDefault(require("./Password"));
344
348
  Object.defineProperty(exports, "Password", { enumerable: true, get: function () { return Password_1.default; } });
345
349
  var Pause_1 = __importDefault(require("./Pause"));
346
350
  Object.defineProperty(exports, "Pause", { enumerable: true, get: function () { return Pause_1.default; } });
351
+ var PauseMd_1 = __importDefault(require("./PauseMd"));
352
+ Object.defineProperty(exports, "PauseMd", { enumerable: true, get: function () { return PauseMd_1.default; } });
347
353
  var PlusBig_1 = __importDefault(require("./PlusBig"));
348
354
  Object.defineProperty(exports, "PlusBig", { enumerable: true, get: function () { return PlusBig_1.default; } });
349
355
  var PlusCircle_1 = __importDefault(require("./PlusCircle"));
@@ -426,6 +432,8 @@ var Ticket_1 = __importDefault(require("./Ticket"));
426
432
  Object.defineProperty(exports, "Ticket", { enumerable: true, get: function () { return Ticket_1.default; } });
427
433
  var TimeCircle_1 = __importDefault(require("./TimeCircle"));
428
434
  Object.defineProperty(exports, "TimeCircle", { enumerable: true, get: function () { return TimeCircle_1.default; } });
435
+ var TimeCircleMd_1 = __importDefault(require("./TimeCircleMd"));
436
+ Object.defineProperty(exports, "TimeCircleMd", { enumerable: true, get: function () { return TimeCircleMd_1.default; } });
429
437
  var TimeSquare_1 = __importDefault(require("./TimeSquare"));
430
438
  Object.defineProperty(exports, "TimeSquare", { enumerable: true, get: function () { return TimeSquare_1.default; } });
431
439
  var Trash_1 = __importDefault(require("./Trash"));
@@ -797,6 +805,10 @@ exports.iconList = {
797
805
  var props = __rest(_a, []);
798
806
  return (0, jsx_runtime_1.jsx)(CheckMark_1.default, __assign({}, props));
799
807
  },
808
+ CheckMarkMd: function (_a) {
809
+ var props = __rest(_a, []);
810
+ return (0, jsx_runtime_1.jsx)(CheckMarkMd_1.default, __assign({}, props));
811
+ },
800
812
  CheckboxElementChecked: function (_a) {
801
813
  var props = __rest(_a, []);
802
814
  return ((0, jsx_runtime_1.jsx)(CheckboxElementChecked_1.default, __assign({}, props)));
@@ -945,6 +957,10 @@ exports.iconList = {
945
957
  var props = __rest(_a, []);
946
958
  return (0, jsx_runtime_1.jsx)(Folder_1.default, __assign({}, props));
947
959
  },
960
+ ForwardMd: function (_a) {
961
+ var props = __rest(_a, []);
962
+ return (0, jsx_runtime_1.jsx)(ForwardMd_1.default, __assign({}, props));
963
+ },
948
964
  Game: function (_a) {
949
965
  var props = __rest(_a, []);
950
966
  return (0, jsx_runtime_1.jsx)(Game_1.default, __assign({}, props));
@@ -1169,6 +1185,10 @@ exports.iconList = {
1169
1185
  var props = __rest(_a, []);
1170
1186
  return (0, jsx_runtime_1.jsx)(Pause_1.default, __assign({}, props));
1171
1187
  },
1188
+ PauseMd: function (_a) {
1189
+ var props = __rest(_a, []);
1190
+ return (0, jsx_runtime_1.jsx)(PauseMd_1.default, __assign({}, props));
1191
+ },
1172
1192
  PlusBig: function (_a) {
1173
1193
  var props = __rest(_a, []);
1174
1194
  return (0, jsx_runtime_1.jsx)(PlusBig_1.default, __assign({}, props));
@@ -1333,6 +1353,10 @@ exports.iconList = {
1333
1353
  var props = __rest(_a, []);
1334
1354
  return (0, jsx_runtime_1.jsx)(TimeCircle_1.default, __assign({}, props));
1335
1355
  },
1356
+ TimeCircleMd: function (_a) {
1357
+ var props = __rest(_a, []);
1358
+ return (0, jsx_runtime_1.jsx)(TimeCircleMd_1.default, __assign({}, props));
1359
+ },
1336
1360
  TimeSquare: function (_a) {
1337
1361
  var props = __rest(_a, []);
1338
1362
  return (0, jsx_runtime_1.jsx)(TimeSquare_1.default, __assign({}, props));
package/dist/components/InfoBox/InfoBox.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { InfoBoxProps } from "./props";
3
- declare const InfoBox: ({ title, description, radius, size, variant, onClick, icon, }: InfoBoxProps) => React.JSX.Element;
3
+ declare const InfoBox: ({ title, description, radius, size, variant, onClick, icon, hasIcon, }: InfoBoxProps) => React.JSX.Element;
4
4
  export default InfoBox;
package/dist/components/InfoBox/InfoBox.js CHANGED
@@ -21,12 +21,12 @@ var InfoBox_styled_1 = require("./InfoBox.styled");
21
21
  var Icon_1 = __importDefault(require("../Icon/Icon"));
22
22
  var react_i18next_1 = require("react-i18next");
23
23
  var InfoBox = function (_a) {
24
- var _b = _a.title, title = _b === void 0 ? props_1.InfoBoxDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.InfoBoxDefault.description : _c, _d = _a.radius, radius = _d === void 0 ? props_1.InfoBoxDefault.radius : _d, _e = _a.size, size = _e === void 0 ? props_1.InfoBoxDefault.size : _e, _f = _a.variant, variant = _f === void 0 ? props_1.InfoBoxDefault.variant : _f, _g = _a.onClick, onClick = _g === void 0 ? props_1.InfoBoxDefault.onClick : _g, _h = _a.icon, icon = _h === void 0 ? props_1.InfoBoxDefault.icon : _h;
24
+ var _b = _a.title, title = _b === void 0 ? props_1.InfoBoxDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.InfoBoxDefault.description : _c, _d = _a.radius, radius = _d === void 0 ? props_1.InfoBoxDefault.radius : _d, _e = _a.size, size = _e === void 0 ? props_1.InfoBoxDefault.size : _e, _f = _a.variant, variant = _f === void 0 ? props_1.InfoBoxDefault.variant : _f, _g = _a.onClick, onClick = _g === void 0 ? props_1.InfoBoxDefault.onClick : _g, _h = _a.icon, icon = _h === void 0 ? props_1.InfoBoxDefault.icon : _h, _j = _a.hasIcon, hasIcon = _j === void 0 ? props_1.InfoBoxDefault.hasIcon : _j;
25
25
  var descriptionRef = (0, react_1.useRef)(null);
26
26
  var inputRef = (0, react_1.useRef)(null);
27
- var _j = (0, react_1.useState)(false), alert = _j[0], setAlert = _j[1];
28
- var _k = (0, react_1.useState)(0), alertLeft = _k[0], setAlertLeft = _k[1];
29
- var _l = (0, react_1.useState)(0), alertTop = _l[0], setAlertTop = _l[1];
27
+ var _k = (0, react_1.useState)(false), alert = _k[0], setAlert = _k[1];
28
+ var _l = (0, react_1.useState)(0), alertLeft = _l[0], setAlertLeft = _l[1];
29
+ var _m = (0, react_1.useState)(0), alertTop = _m[0], setAlertTop = _m[1];
30
30
  var t = (0, react_i18next_1.useTranslation)().t;
31
31
  (0, react_1.useEffect)(function () {
32
32
  if (alert) {
@@ -56,6 +56,6 @@ var InfoBox = function (_a) {
56
56
  }
57
57
  });
58
58
  }, []);
59
- 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" }) }))] })));
59
+ return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [hasIcon && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) }))), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, __assign({ "$size": size, ref: descriptionRef }, { children: description })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
60
60
  };
61
61
  exports.default = InfoBox;
package/dist/components/InfoBox/InfoBox.styled.js CHANGED
@@ -18,6 +18,8 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
18
18
  return "var(--yellow)";
19
19
  case 'danger':
20
20
  return "var(--red)";
21
+ case 'secondary':
22
+ return "var(--dark-opacity-3)";
21
23
  default:
22
24
  return "var(--primary-opacity-10)";
23
25
  }
@@ -29,6 +31,8 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
29
31
  return "white";
30
32
  case 'danger':
31
33
  return "white";
34
+ case 'secondary':
35
+ return "var(--dark)";
32
36
  default:
33
37
  return "var(--dark)";
34
38
  }
package/dist/components/InfoBox/props.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface InfoBox {
12
12
  size?: SIZES;
13
13
  variant?: VARIANT;
14
14
  icon?: ICON;
15
+ hasIcon?: boolean;
15
16
  onClick?: (e: any) => void;
16
17
  }
17
18
  export interface InfoBoxStyledProps {
package/dist/components/InfoBox/props.js CHANGED
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.InfoBoxDefault = exports.iconNames = exports.variants = exports.sizes = void 0;
4
4
  var iconList_1 = require("../Icon/iconList");
5
5
  exports.sizes = ['small', 'medium', 'large'];
6
- exports.variants = ['primary', 'danger', 'warning'];
6
+ exports.variants = ['primary', 'danger', 'warning', 'secondary'];
7
7
  exports.iconNames = Object.keys(iconList_1.iconList);
8
8
  exports.InfoBoxDefault = {
9
9
  title: null,
@@ -13,4 +13,5 @@ exports.InfoBoxDefault = {
13
13
  variant: exports.variants[0],
14
14
  onClick: null,
15
15
  icon: "InfoSquare",
16
+ hasIcon: true,
16
17
  };
package/dist/components/InfoBox/stories/InfoBox.stories.d.ts CHANGED
@@ -21,6 +21,9 @@ declare const _default: {
21
21
  icon: {
22
22
  control: string;
23
23
  };
24
+ hasIcon: {
25
+ control: string;
26
+ };
24
27
  onClick: {
25
28
  action: string;
26
29
  };
@@ -34,6 +37,14 @@ export declare const Default: {
34
37
  onClick: () => void;
35
38
  };
36
39
  };
40
+ export declare const WithoutIcon: {
41
+ args: {
42
+ hasIcon: boolean;
43
+ title: string;
44
+ description: string;
45
+ onClick: () => void;
46
+ };
47
+ };
37
48
  export declare const Primary: {
38
49
  args: {
39
50
  variant: string;
@@ -58,6 +69,14 @@ export declare const Warning: {
58
69
  onClick: () => void;
59
70
  };
60
71
  };
72
+ export declare const Secondary: {
73
+ args: {
74
+ variant: string;
75
+ onClick: any;
76
+ title: string;
77
+ description: string;
78
+ };
79
+ };
61
80
  export declare const Small: {
62
81
  args: {
63
82
  size: string;
package/dist/components/InfoBox/stories/InfoBox.stories.js CHANGED
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
14
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.WithCustomRadius = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.Warning = exports.Danger = exports.Primary = exports.Default = void 0;
17
+ exports.WithCustomRadius = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.Secondary = exports.Warning = exports.Danger = exports.Primary = exports.WithoutIcon = exports.Default = void 0;
18
18
  var jsx_runtime_1 = require("react/jsx-runtime");
19
19
  var InfoBox_1 = __importDefault(require("../InfoBox"));
20
20
  var props_1 = require("../props");
@@ -34,12 +34,16 @@ exports.default = {
34
34
  title: { control: 'text' },
35
35
  radius: { control: 'text' },
36
36
  icon: { control: 'text' },
37
+ hasIcon: { control: 'boolean' },
37
38
  onClick: { action: 'clicked' },
38
39
  }
39
40
  };
40
41
  exports.Default = {
41
42
  args: defaultArgs,
42
43
  };
44
+ exports.WithoutIcon = {
45
+ args: __assign(__assign({}, defaultArgs), { hasIcon: false }),
46
+ };
43
47
  // Variant stories
44
48
  exports.Primary = {
45
49
  args: __assign(__assign({}, defaultArgs), { variant: 'primary' }),
@@ -50,6 +54,9 @@ exports.Danger = {
50
54
  exports.Warning = {
51
55
  args: __assign(__assign({}, defaultArgs), { variant: 'warning', title: "Dikkat" }),
52
56
  };
57
+ exports.Secondary = {
58
+ args: __assign(__assign({}, defaultArgs), { variant: 'secondary', onClick: undefined }),
59
+ };
53
60
  // Size stories
54
61
  exports.Small = {
55
62
  args: __assign(__assign({}, defaultArgs), { size: 'small' }),
package/dist/components/Input/Input.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { InputProps } from "./props";
3
- declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, ...other }: InputProps) => React.JSX.Element;
3
+ declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, ...other }: InputProps) => React.JSX.Element;
4
4
  export default Input;
package/dist/components/Input/Input.js CHANGED
@@ -41,12 +41,12 @@ var locale_1 = require("date-fns/locale");
41
41
  var date_fns_1 = require("date-fns");
42
42
  var Input = function (_a) {
43
43
  var _b;
44
- var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, _5 = _a.onCalendarOpen, onCalendarOpen = _5 === void 0 ? props_1.InputDefault.onCalendarOpen : _5, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen"]);
45
- var _6 = (0, react_1.useState)(type), inputType = _6[0], setInputType = _6[1];
46
- var _7 = (0, react_1.useState)(false), alert = _7[0], setAlert = _7[1];
47
- var _8 = (0, react_1.useState)(value), inputValue = _8[0], setInputValue = _8[1];
48
- var _9 = (0, react_1.useState)(false), isCalendarOpen = _9[0], setIsCalendarOpen = _9[1];
49
- var _10 = (0, react_1.useState)(function () {
44
+ var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, _5 = _a.onCalendarOpen, onCalendarOpen = _5 === void 0 ? props_1.InputDefault.onCalendarOpen : _5, _6 = _a.maxLength, maxLength = _6 === void 0 ? props_1.InputDefault.maxLength : _6, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength"]);
45
+ var _7 = (0, react_1.useState)(type), inputType = _7[0], setInputType = _7[1];
46
+ var _8 = (0, react_1.useState)(false), alert = _8[0], setAlert = _8[1];
47
+ var _9 = (0, react_1.useState)(value), inputValue = _9[0], setInputValue = _9[1];
48
+ var _10 = (0, react_1.useState)(false), isCalendarOpen = _10[0], setIsCalendarOpen = _10[1];
49
+ var _11 = (0, react_1.useState)(function () {
50
50
  if (!value)
51
51
  return null;
52
52
  // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
@@ -59,7 +59,7 @@ var Input = function (_a) {
59
59
  }
60
60
  }
61
61
  return new Date(value);
62
- }), startDate = _10[0], setStartDate = _10[1];
62
+ }), startDate = _11[0], setStartDate = _11[1];
63
63
  var inputRef = (0, react_1.useRef)(null);
64
64
  var t = (0, react_i18next_1.useTranslation)().t;
65
65
  var language = i18n_1.default.language;
@@ -131,7 +131,7 @@ var Input = function (_a) {
131
131
  if (onClear)
132
132
  onClear();
133
133
  };
134
- 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 })))
134
+ return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
135
135
  : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
136
136
  if (date) {
137
137
  setStartDate(date);
@@ -162,6 +162,6 @@ var Input = function (_a) {
162
162
  } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
163
163
  onChange(e);
164
164
  setInputValue(e.currentTarget.value);
165
- }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
165
+ }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
166
166
  };
167
167
  exports.default = Input;
package/dist/components/Input/Input.styled.js CHANGED
@@ -27,5 +27,5 @@ exports.InputStyled = styled_components_1.default.input(templateObject_3 || (tem
27
27
  return '18.5px 23px';
28
28
  return '19.5px 24px';
29
29
  }, 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)'; });
30
- exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], [";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
30
+ exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n background-color: white;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n text-align: center;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n padding: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n text-align: center;\n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], [";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n background-color: white;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n text-align: center;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n padding: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n text-align: center;\n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
31
31
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/Input/props.d.ts CHANGED
@@ -29,6 +29,7 @@ export interface Input {
29
29
  maxDate?: Date;
30
30
  filterDate?: any;
31
31
  onCalendarOpen?(): void;
32
+ maxLength?: number;
32
33
  }
33
34
  export interface InputStyledProps {
34
35
  disabled?: boolean;
package/dist/components/Input/props.js CHANGED
@@ -30,4 +30,5 @@ exports.InputDefault = {
30
30
  maxDate: null,
31
31
  filterDate: null,
32
32
  onCalendarOpen: null,
33
+ maxLength: undefined,
33
34
  };
package/dist/components/Input/stories/Input.stories.d.ts CHANGED
@@ -32,6 +32,9 @@ declare const _default: {
32
32
  control: string;
33
33
  options: string[];
34
34
  };
35
+ maxLength: {
36
+ control: string;
37
+ };
35
38
  };
36
39
  };
37
40
  export default _default;
package/dist/components/Input/stories/Input.stories.js CHANGED
@@ -31,6 +31,7 @@ exports.default = {
31
31
  hasNumericFormat: { control: 'boolean' },
32
32
  onCustomLinkClick: { action: 'clicked' },
33
33
  type: { control: 'select', options: ["text", "number", "password", "date", "email", "tel"] },
34
+ maxLength: { control: 'number' },
34
35
  }
35
36
  };
36
37
  exports.Default = {
package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare const _default: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, slug, component, onClick, hasLoading, textSize, hasBgColor, }: import("./props").ProductCardHorizontalMd) => React.JSX.Element>;
3
+ export default _default;
package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.js ADDED
@@ -0,0 +1,41 @@
1
+ "use client";
2
+ "use strict";
3
+ var __assign = (this && this.__assign) || function () {
4
+ __assign = Object.assign || function(t) {
5
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
6
+ s = arguments[i];
7
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
8
+ t[p] = s[p];
9
+ }
10
+ return t;
11
+ };
12
+ return __assign.apply(this, arguments);
13
+ };
14
+ var __importDefault = (this && this.__importDefault) || function (mod) {
15
+ return (mod && mod.__esModule) ? mod : { "default": mod };
16
+ };
17
+ Object.defineProperty(exports, "__esModule", { value: true });
18
+ var jsx_runtime_1 = require("react/jsx-runtime");
19
+ var react_1 = require("react");
20
+ var props_1 = require("./props");
21
+ var ProductCardHorizontalMd_styled_1 = require("./ProductCardHorizontalMd.styled");
22
+ var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
23
+ var CardLinkComponent = (0, react_1.memo)(function (_a) {
24
+ var Component = _a.component, slug = _a.slug, children = _a.children;
25
+ return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CardLink, __assign({ as: Component || "a", href: slug }, { children: children })));
26
+ });
27
+ var ProductCardHorizontalMd = function (_a) {
28
+ var _b;
29
+ var _c = _a.title, title = _c === void 0 ? props_1.ProductCardHorizontalMdDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardHorizontalMdDefault.description : _d, _e = _a.listDescription, listDescription = _e === void 0 ? props_1.ProductCardHorizontalMdDefault.listDescription : _e, _f = _a.image, image = _f === void 0 ? props_1.ProductCardHorizontalMdDefault.image : _f, _g = _a.unitPriceText, unitPriceText = _g === void 0 ? props_1.ProductCardHorizontalMdDefault.unitPriceText : _g, _h = _a.totalPrice, totalPrice = _h === void 0 ? props_1.ProductCardHorizontalMdDefault.totalPrice : _h, _j = _a.slug, slug = _j === void 0 ? props_1.ProductCardHorizontalMdDefault.slug : _j, _k = _a.component, component = _k === void 0 ? props_1.ProductCardHorizontalMdDefault.component : _k, _l = _a.onClick, onClick = _l === void 0 ? props_1.ProductCardHorizontalMdDefault.onClick : _l, _m = _a.hasLoading, hasLoading = _m === void 0 ? props_1.ProductCardHorizontalMdDefault.hasLoading : _m, _o = _a.textSize, textSize = _o === void 0 ? props_1.ProductCardHorizontalMdDefault.textSize : _o, _p = _a.hasBgColor, hasBgColor = _p === void 0 ? props_1.ProductCardHorizontalMdDefault.hasBgColor : _p;
30
+ var styledProps = { $hasLoading: hasLoading, $textSize: textSize, $hasBgColor: hasBgColor };
31
+ var filteredListDescription = (_b = listDescription === null || listDescription === void 0 ? void 0 : listDescription.filter(Boolean)) !== null && _b !== void 0 ? _b : [];
32
+ var hasListDescription = filteredListDescription.length > 0;
33
+ var hasDescription = hasLoading || hasListDescription || Boolean(description);
34
+ var cardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ImageWrapper, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "64px", height: "64px", hasInset: true })) : (image) })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.TextSection, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Title, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "180px", height: "19px", hasInset: true })] })) : (title) })), hasDescription && (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "140px", height: "17px", hasInset: true })] }) }))) : hasListDescription ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionList, __assign({}, styledProps, { children: filteredListDescription.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionListItem, { children: item }, "".concat(item, "-").concat(index))); }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: description }))))] }), (hasLoading || unitPriceText || totalPrice) && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceSection, { children: [(hasLoading || unitPriceText) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.UnitPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "120px", height: "17px" })) : (unitPriceText) })), (hasLoading || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.TotalPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "80px", height: "19px" })) : (totalPrice) }))] }))] }));
35
+ if (hasLoading) {
36
+ return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CardLink, { children: cardBody }) })));
37
+ }
38
+ var hasSlug = Boolean(slug && String(slug).trim());
39
+ return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { onClick: onClick }, { children: hasSlug ? ((0, jsx_runtime_1.jsx)(CardLinkComponent, __assign({ component: component, slug: slug }, { children: cardBody }))) : (cardBody) })));
40
+ };
41
+ exports.default = (0, react_1.memo)(ProductCardHorizontalMd);
package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ import { ProductCardHorizontalMdStyledProps } from "./props";
3
+ export declare const CardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
4
+ export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
5
+ export declare const ImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
6
+ export declare const TextSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
7
+ export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
8
+ export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
9
+ export declare const DescriptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
10
+ export declare const DescriptionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
11
+ export declare const PriceSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
12
+ export declare const UnitPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
13
+ export declare const TotalPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
14
+ export declare const ProductCardHorizontalMdStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;