krl-alfred 2.18.22 → 2.18.24

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 (52) hide show
  1. package/dist/components/Icon/iconList/CheckMarkMd.d.ts +3 -0
  2. package/dist/components/Icon/iconList/CheckMarkMd.js +40 -0
  3. package/dist/components/Icon/iconList/index.d.ts +5 -1
  4. package/dist/components/Icon/iconList/index.js +11 -5
  5. package/dist/components/ListGroup/ListGroup.js +1 -1
  6. package/dist/components/ListGroup/ListGroup.styled.d.ts +2 -0
  7. package/dist/components/ListGroup/ListGroup.styled.js +5 -3
  8. package/dist/components/OtpInput/OtpInput.styled.js +1 -1
  9. package/dist/components/ProductCardCheckbox/ProductCardCheckbox.js +7 -2
  10. package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.d.ts +15 -0
  11. package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js +14 -3
  12. package/dist/components/ProductCardRadio/ProductCardRadio.js +8 -2
  13. package/dist/components/ProductCardRadio/ProductCardRadio.styled.d.ts +17 -0
  14. package/dist/components/ProductCardRadio/ProductCardRadio.styled.js +16 -3
  15. package/dist/components/RadioButton/RadioButton.js +3 -0
  16. package/dist/components/RadioButton/layouts/basic/Basic.d.ts +1 -1
  17. package/dist/components/RadioButton/layouts/basic/Basic.js +17 -3
  18. package/dist/components/RadioButton/layouts/basic/Basic.styled.d.ts +4 -0
  19. package/dist/components/RadioButton/layouts/basic/Basic.styled.js +8 -4
  20. package/dist/components/RadioButton/layouts/boxed/Boxed.d.ts +1 -1
  21. package/dist/components/RadioButton/layouts/boxed/Boxed.js +13 -3
  22. package/dist/components/RadioButton/layouts/boxed/Boxed.styled.d.ts +7 -0
  23. package/dist/components/RadioButton/layouts/boxed/Boxed.styled.js +11 -4
  24. package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.d.ts +4 -0
  25. package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.js +37 -0
  26. package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.styled.d.ts +6 -0
  27. package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.styled.js +46 -0
  28. package/dist/components/RadioButton/layouts/boxedMd/index.d.ts +1 -0
  29. package/dist/components/RadioButton/layouts/boxedMd/index.js +8 -0
  30. package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.d.ts +1 -1
  31. package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.js +14 -3
  32. package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.styled.d.ts +3 -0
  33. package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.styled.js +7 -4
  34. package/dist/components/RadioButton/layouts/color/Color.js +7 -1
  35. package/dist/components/RadioButton/layouts/color/Color.styled.d.ts +2 -0
  36. package/dist/components/RadioButton/layouts/color/Color.styled.js +5 -3
  37. package/dist/components/RadioButton/layouts/horizontal/Horizontal.js +12 -2
  38. package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.d.ts +17 -8
  39. package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.js +16 -3
  40. package/dist/components/RadioButton/props.d.ts +4 -0
  41. package/dist/components/RadioButton/props.js +4 -1
  42. package/dist/components/RadioButton/stories/RadioButton.stories.d.ts +61 -0
  43. package/dist/components/RadioButton/stories/RadioButton.stories.js +52 -4
  44. package/dist/components/RadioGroup/RadioGroup.d.ts +1 -1
  45. package/dist/components/RadioGroup/RadioGroup.js +5 -4
  46. package/dist/components/RadioGroup/RadioGroup.styled.d.ts +6 -0
  47. package/dist/components/RadioGroup/RadioGroup.styled.js +13 -3
  48. package/dist/components/RadioGroup/props.d.ts +13 -0
  49. package/dist/components/RadioGroup/props.js +7 -2
  50. package/dist/components/RadioGroup/stories/RadioGroup.stories.d.ts +129 -1
  51. package/dist/components/RadioGroup/stories/RadioGroup.stories.js +103 -1
  52. package/package.json +1 -1
@@ -0,0 +1,3 @@
1
+ export default SvgCheckMarkMd;
2
+ declare function SvgCheckMarkMd(props: any): React.JSX.Element;
3
+ import * as React from "react";
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
36
+ Object.defineProperty(exports, "__esModule", { value: true });
37
+ var jsx_runtime_1 = require("react/jsx-runtime");
38
+ var React = __importStar(require("react"));
39
+ var SvgCheckMarkMd = 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: "M6.25019 9.05079C5.83271 9.50742 5.11338 9.50742 4.6959 9.05079L3.47997 7.72087C2.74049 6.91206 1.46638 6.91206 0.726898 7.72087C0.0754094 8.43343 0.075409 9.5254 0.726897 10.238L3.91875 13.7291C4.75372 14.6423 6.19237 14.6423 7.02734 13.7291L15.2736 4.7097C15.9251 3.99713 15.9251 2.90517 15.2736 2.1926C14.5341 1.3838 13.26 1.3838 12.5205 2.1926L6.25019 9.05079Z", fill: "currentColor" }) }))); };
40
+ exports.default = SvgCheckMarkMd;
@@ -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;
@@ -831,6 +834,7 @@ import { default as Category } from "./Category";
831
834
  import { default as Chart } from "./Chart";
832
835
  import { default as Chat } from "./Chat";
833
836
  import { default as CheckMark } from "./CheckMark";
837
+ import { default as CheckMarkMd } from "./CheckMarkMd";
834
838
  import { default as CheckboxElementChecked } from "./CheckboxElementChecked";
835
839
  import { default as CheckboxElementDisabled } from "./CheckboxElementDisabled";
836
840
  import { default as CheckboxElementInvalid } from "./CheckboxElementInvalid";
@@ -1024,4 +1028,4 @@ import { default as UserPlusLg } from "./UserPlusLg";
1024
1028
  import { default as Wphk } from "./Wphk";
1025
1029
  import { default as Youtubehk } from "./Youtubehk";
1026
1030
  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 };
1031
+ 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, 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 };
@@ -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.Paper = exports.OrderProgressIcons = exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.MoneyBig = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.Folder = void 0;
31
+ exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusCircle = exports.PlusBig = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = void 0;
32
+ exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = void 0;
33
+ exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = 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"));
@@ -797,6 +799,10 @@ exports.iconList = {
797
799
  var props = __rest(_a, []);
798
800
  return (0, jsx_runtime_1.jsx)(CheckMark_1.default, __assign({}, props));
799
801
  },
802
+ CheckMarkMd: function (_a) {
803
+ var props = __rest(_a, []);
804
+ return (0, jsx_runtime_1.jsx)(CheckMarkMd_1.default, __assign({}, props));
805
+ },
800
806
  CheckboxElementChecked: function (_a) {
801
807
  var props = __rest(_a, []);
802
808
  return ((0, jsx_runtime_1.jsx)(CheckboxElementChecked_1.default, __assign({}, props)));
@@ -20,6 +20,6 @@ var ListGroup_styled_1 = require("./ListGroup.styled");
20
20
  var Icon_1 = __importDefault(require("../Icon/Icon"));
21
21
  var ListGroup = function (_a) {
22
22
  var _b = _a.data, data = _b === void 0 ? props_1.ListGroupDefault.data : _b;
23
- return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsxs)(ListGroup_styled_1.ListGroupItemButton, __assign({ "$isActive": item.isActive, onClick: item.onClick, "$hasNotification": item.hasNotification }, { children: [item.icon && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "title" }, { children: item.title }))] })) }, key)); }) }));
23
+ return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsxs)(ListGroup_styled_1.ListGroupItemButton, __assign({ "$isActive": item.isActive, onClick: item.onClick, "$hasNotification": item.hasNotification }, { children: [item.icon && ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon }) })), (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ItemTitle, { children: item.title })] })) }, key)); }) }));
24
24
  };
25
25
  exports.default = ListGroup;
@@ -2,4 +2,6 @@
2
2
  import { ListGroupStyledProps } from "./props";
3
3
  export declare const ListGroupStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never>>> & string;
4
4
  export declare const ListGroupItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never>>> & string;
5
+ export declare const ItemIcon: 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;
6
+ export declare const ItemTitle: 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
7
  export declare const ListGroupItemButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never>>> & string;
@@ -7,9 +7,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.ListGroupItemButton = exports.ListGroupItem = exports.ListGroupStyled = void 0;
10
+ exports.ListGroupItemButton = exports.ItemTitle = exports.ItemIcon = exports.ListGroupItem = exports.ListGroupStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.ListGroupStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0;\n margin: 0;\n"], ["\n display: block;\n padding: 0;\n margin: 0;\n"])));
13
13
  exports.ListGroupItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0;\n margin: 0; \n display: block;\n + li {\n margin-top: 1rem;\n }\n"], ["\n padding: 0;\n margin: 0; \n display: block;\n + li {\n margin-top: 1rem;\n }\n"])));
14
- exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 1.5rem;\n margin: 0;\n height: 67px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: 0.5rem;\n background-color: ", ";\n cursor: pointer;\n color: ", ";\n border: 0;\n width: 100%;\n position: relative;\n outline: none;\n font:var(--title-bold-16-19);\n transition: all .2s ease;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n border: ", ";\n }\n ", "\n ", "\n .icon {\n width: 1.5rem;\n min-width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .title {\n display: block;\n }\n"], ["\n padding: 0 1.5rem;\n margin: 0;\n height: 67px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: 0.5rem;\n background-color: ", ";\n cursor: pointer;\n color: ", ";\n border: 0;\n width: 100%;\n position: relative;\n outline: none;\n font:var(--title-bold-16-19);\n transition: all .2s ease;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n border: ", ";\n }\n ", "\n ", "\n .icon {\n width: 1.5rem;\n min-width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .title {\n display: block;\n }\n"])), function (props) { return props.$isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.$isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return !props.$isActive && "\n &:hover{\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n }\n "; }, function (props) { return props.$hasNotification && "\n \n &:after{\n content: \"\";\n position: absolute;\n right : 1.5rem;\n top:50%;\n transform:translateY(-50%);\n width:16px;\n height:16px;\n background-color:var(--primary);\n border-radius:50%;\n }\n "; });
15
- var templateObject_1, templateObject_2, templateObject_3;
14
+ exports.ItemIcon = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 1.5rem;\n min-width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 1.5rem;\n min-width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
15
+ exports.ItemTitle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
16
+ exports.ListGroupItemButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 0 1.5rem;\n margin: 0;\n height: 67px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: 0.5rem;\n background-color: ", ";\n cursor: pointer;\n color: ", ";\n border: 0;\n width: 100%;\n position: relative;\n outline: none;\n font:var(--title-bold-16-19);\n transition: all .2s ease;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n border: ", ";\n }\n ", "\n ", "\n"], ["\n padding: 0 1.5rem;\n margin: 0;\n height: 67px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: 0.5rem;\n background-color: ", ";\n cursor: pointer;\n color: ", ";\n border: 0;\n width: 100%;\n position: relative;\n outline: none;\n font:var(--title-bold-16-19);\n transition: all .2s ease;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n border: ", ";\n }\n ", "\n ", "\n"])), function (props) { return props.$isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.$isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return !props.$isActive && "\n &:hover{\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n }\n "; }, function (props) { return props.$hasNotification && "\n \n &:after{\n content: \"\";\n position: absolute;\n right : 1.5rem;\n top:50%;\n transform:translateY(-50%);\n width:16px;\n height:16px;\n background-color:var(--primary);\n border-radius:50%;\n }\n "; });
17
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.OtpError = exports.OtpSpan = exports.OtpSpanWrapper = exports.OtpInputWrapper = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.OtpInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n \n input {\n background-color: transparent;\n border: none;\n caret-color: transparent;\n cursor: default;\n height: 0;\n opacity: 0;\n outline: none;\n width: 0;\n z-index: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n \n input {\n background-color: transparent;\n border: none;\n caret-color: transparent;\n cursor: default;\n height: 0;\n opacity: 0;\n outline: none;\n width: 0;\n z-index: 0;\n }\n"])));
13
- exports.OtpSpanWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-flex;\n gap: 18.33px;\n \n"], ["\n display: inline-flex;\n gap: 18.33px;\n \n"])));
13
+ exports.OtpSpanWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-flex;\n gap: 18.33px;\n justify-content: center;\n"], ["\n display: inline-flex;\n gap: 18.33px;\n justify-content: center;\n"])));
14
14
  exports.OtpSpan = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font: var(--headline-semi-bold-40-48);\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n\n @keyframes blink-caret {\n from,\n to {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n ", "\n"], ["\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font: var(--headline-semi-bold-40-48);\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n\n @keyframes blink-caret {\n from,\n to {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n ", "\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (_a) {
15
15
  var active = _a.active, hasError = _a.hasError;
16
16
  return active &&
@@ -18,12 +18,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
18
18
  var jsx_runtime_1 = require("react/jsx-runtime");
19
19
  var props_1 = require("./props");
20
20
  var ProductCardCheckbox_styled_1 = require("./ProductCardCheckbox.styled");
21
- var classnames_1 = __importDefault(require("classnames"));
22
21
  var Checkbox_1 = __importDefault(require("../Checkbox"));
23
22
  var Badges_1 = __importDefault(require("../Badges"));
24
23
  var Tooltip_1 = __importDefault(require("../Tooltip"));
25
24
  var ProductCardCheckbox = function (_a) {
26
25
  var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, _s = _a.infoText, infoText = _s === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _s, _t = _a.infoTitle, infoTitle = _t === void 0 ? props_1.ProductCardCheckboxDefault.infoTitle : _t, _u = _a.popupWidth, popupWidth = _u === void 0 ? props_1.ProductCardCheckboxDefault.popupWidth : _u, valid = _a.valid;
27
- return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltipWrapper" }, { children: (infoText || infoTitle) && ((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: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))) }))] })), content && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: "notSelect_".concat(checkboxId), className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("input", { id: "notSelect_".concat(checkboxId), style: { display: "none" } }), content] })))] })) })));
26
+ var styledProps = {
27
+ disabled: disabled,
28
+ $isContentOffset: isContentOffset,
29
+ $size: size,
30
+ $hasBadge: hasBadge,
31
+ };
32
+ return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId }, styledProps, { children: (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardInner, __assign({}, styledProps, { children: [hasBadge && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) })), (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxContent, __assign({ "$hidden": !hasCheckbox }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardImg, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardText, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardTitle, __assign({}, styledProps, { children: title })), (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.TooltipWrapper, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.InputIcon, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) })) })] }), content && ((0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardContent, __assign({ htmlFor: "notSelect_".concat(checkboxId) }, styledProps, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.HiddenInput, { id: "notSelect_".concat(checkboxId), readOnly: true, tabIndex: -1 }), content] })))] })) })));
28
33
  };
29
34
  exports.default = ProductCardCheckbox;
@@ -1,3 +1,18 @@
1
1
  /// <reference types="react" />
2
2
  import { ProductCardCheckboxStyledProps } from "./props";
3
+ export declare const BadgeWrapper: 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;
4
+ export declare const ProductCardCheckboxContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
5
+ $hidden?: boolean;
6
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
7
+ $hidden?: boolean;
8
+ }, never>>> & string;
9
+ export declare const ProductCardImg: 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;
10
+ export declare const ProductCardText: 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;
11
+ export declare const ProductCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
12
+ export declare const TooltipWrapper: 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 InputIcon: 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 PopupText: 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;
15
+ export declare const ProductCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
16
+ export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
17
+ export declare const ProductCardInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
3
18
  export declare const ProductCardCheckboxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
@@ -7,8 +7,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.ProductCardCheckboxStyled = void 0;
10
+ exports.ProductCardCheckboxStyled = exports.ProductCardInner = exports.HiddenInput = exports.ProductCardContent = exports.PopupText = exports.InputIcon = exports.TooltipWrapper = exports.ProductCardTitle = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardCheckboxContent = exports.BadgeWrapper = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 1rem;\n }\n\n .badgeWrapper {\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n }\n\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\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: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n .popupText{\n font: var(--caption-medium-12-15);\n a{\n color: var(--primary);\n }\n }\n }\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n }\n }\n\n ", "\n"], ["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 1rem;\n }\n\n .badgeWrapper {\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n }\n\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\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: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n .popupText{\n font: var(--caption-medium-12-15);\n a{\n color: var(--primary);\n }\n }\n }\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n }\n }\n\n ", "\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n "; }, devices_1.devices.md, devices_1.devices.md, function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md, function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n .productCardInner{\n padding: 1rem;\n .productCardCheckboxContent {\n .indicator {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n \n .productCardImg {\n \n }\n .productCardTitle {\n font: var(--body-semi-bold-14-17);\n }\n .productCardContent{\n margin: 1rem auto 0 0;\n }\n }\n "; });
14
- var templateObject_1;
13
+ exports.BadgeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"], ["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"])));
14
+ exports.ProductCardCheckboxContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"], ["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"])), function (props) { return props.$hidden && "display: none;"; }, devices_1.devices.md);
15
+ exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"], ["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"])));
16
+ exports.ProductCardText = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
17
+ exports.ProductCardTitle = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"], ["\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"])), function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md);
18
+ exports.TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"], ["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"])));
19
+ exports.InputIcon = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
20
+ exports.PopupText = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font: var(--caption-medium-12-15);\n\n a {\n color: var(--primary);\n }\n"], ["\n font: var(--caption-medium-12-15);\n\n a {\n color: var(--primary);\n }\n"])));
21
+ exports.ProductCardContent = styled_components_1.default.label(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n"], ["\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n"])), function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
22
+ exports.HiddenInput = styled_components_1.default.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
23
+ exports.ProductCardInner = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n\n @media only screen and ", " {\n padding: 1rem;\n }\n\n ", "\n"], ["\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n\n @media only screen and ", " {\n padding: 1rem;\n }\n\n ", "\n"])), devices_1.devices.md, function (props) { return props.$size === "small" && "\n padding: 1rem;\n\n ".concat(exports.ProductCardCheckboxContent, " > label > div {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n\n ").concat(exports.ProductCardTitle, " {\n font: var(--body-semi-bold-14-17);\n }\n\n ").concat(exports.ProductCardContent, " {\n margin: 1rem auto 0 0;\n }\n "); });
24
+ exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n"], ["\n display: block;\n max-width: 634px;\n\n ", "\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n "; });
25
+ 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;
@@ -18,12 +18,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
18
18
  var jsx_runtime_1 = require("react/jsx-runtime");
19
19
  var props_1 = require("./props");
20
20
  var ProductCardRadio_styled_1 = require("./ProductCardRadio.styled");
21
- var classnames_1 = __importDefault(require("classnames"));
22
21
  var RadioButton_1 = __importDefault(require("../RadioButton"));
23
22
  var Badges_1 = __importDefault(require("../Badges"));
24
23
  var Tooltip_1 = __importDefault(require("../Tooltip"));
25
24
  var ProductCardRadio = function (_a) {
26
25
  var _b = _a.hasRadio, hasRadio = _b === void 0 ? props_1.ProductCardRadioDefault.hasRadio : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardRadioDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardRadioDefault.description : _d, _e = _a.content, content = _e === void 0 ? props_1.ProductCardRadioDefault.content : _e, _f = _a.radioId, radioId = _f === void 0 ? props_1.ProductCardRadioDefault.radioId : _f, _g = _a.size, size = _g === void 0 ? props_1.ProductCardRadioDefault.size : _g, _h = _a.productCardOnChange, productCardOnChange = _h === void 0 ? props_1.ProductCardRadioDefault.productCardOnChange : _h, _j = _a.disabled, disabled = _j === void 0 ? props_1.ProductCardRadioDefault.disabled : _j, _k = _a.value, value = _k === void 0 ? props_1.ProductCardRadioDefault.value : _k, _l = _a.name, name = _l === void 0 ? props_1.ProductCardRadioDefault.name : _l, _m = _a.isContentOffset, isContentOffset = _m === void 0 ? props_1.ProductCardRadioDefault.isContentOffset : _m, _o = _a.checked, checked = _o === void 0 ? props_1.ProductCardRadioDefault.checked : _o, _p = _a.image, image = _p === void 0 ? props_1.ProductCardRadioDefault.image : _p, _q = _a.hasBadge, hasBadge = _q === void 0 ? props_1.ProductCardRadioDefault.hasBadge : _q, _r = _a.badgeText, badgeText = _r === void 0 ? props_1.ProductCardRadioDefault.badgeText : _r, _s = _a.badgeVariant, badgeVariant = _s === void 0 ? props_1.ProductCardRadioDefault.badgeVariant : _s, _t = _a.infoText, infoText = _t === void 0 ? props_1.ProductCardRadioDefault.infoText : _t, _u = _a.infoTitle, infoTitle = _u === void 0 ? props_1.ProductCardRadioDefault.infoTitle : _u, _v = _a.popupWidth, popupWidth = _v === void 0 ? props_1.ProductCardRadioDefault.popupWidth : _v, valid = _a.valid;
27
- return ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardRadioStyled, __assign({ htmlFor: radioId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge, "$checked": checked }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasRadio }, "productCardRadioContent") }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardHeadWrapper" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), description && (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDesc" }, { children: description }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltipWrapper" }, { children: (infoText || infoTitle) && ((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: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))) }))] })), content && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: "notSelect_".concat(radioId), className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("input", { id: "notSelect_".concat(radioId), style: { display: "none" } }), content] })))] })) })));
26
+ var styledProps = {
27
+ disabled: disabled,
28
+ $isContentOffset: isContentOffset,
29
+ $size: size,
30
+ $hasBadge: hasBadge,
31
+ $checked: checked,
32
+ };
33
+ return ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardRadioStyled, __assign({ htmlFor: radioId }, styledProps, { children: (0, jsx_runtime_1.jsxs)(ProductCardRadio_styled_1.ProductCardInner, __assign({}, styledProps, { children: [hasBadge && ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) })), (0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardRadioContent, __assign({ "$hidden": !hasRadio }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardImg, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardRadio_styled_1.ProductCardText, { children: [(0, jsx_runtime_1.jsxs)(ProductCardRadio_styled_1.ProductCardHeadWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardTitle, __assign({}, styledProps, { children: title })), description && (0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardDesc, { children: description })] }), (0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.TooltipWrapper, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.InputIcon, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) })) })] }), content && ((0, jsx_runtime_1.jsxs)(ProductCardRadio_styled_1.ProductCardContent, __assign({ htmlFor: "notSelect_".concat(radioId) }, styledProps, { children: [(0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.HiddenInput, { id: "notSelect_".concat(radioId), readOnly: true, tabIndex: -1 }), content] })))] })) })));
28
34
  };
29
35
  exports.default = ProductCardRadio;
@@ -1,3 +1,20 @@
1
1
  /// <reference types="react" />
2
2
  import { ProductCardRadioStyledProps } from "./props";
3
+ export declare const BadgeWrapper: 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;
4
+ export declare const ProductCardRadioContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
5
+ $hidden?: boolean;
6
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
7
+ $hidden?: boolean;
8
+ }, never>>> & string;
9
+ export declare const ProductCardImg: 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;
10
+ export declare const ProductCardText: 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;
11
+ export declare const ProductCardHeadWrapper: 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 ProductCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never>>> & string;
13
+ export declare const ProductCardDesc: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
14
+ export declare const TooltipWrapper: 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;
15
+ export declare const InputIcon: 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;
16
+ export declare const PopupText: 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;
17
+ export declare const ProductCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never>>> & string;
18
+ export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
19
+ export declare const ProductCardInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never>>> & string;
3
20
  export declare const ProductCardRadioStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never>>> & string;
@@ -7,8 +7,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.ProductCardRadioStyled = void 0;
10
+ exports.ProductCardRadioStyled = exports.ProductCardInner = exports.HiddenInput = exports.ProductCardContent = exports.PopupText = exports.InputIcon = exports.TooltipWrapper = exports.ProductCardDesc = exports.ProductCardTitle = exports.ProductCardHeadWrapper = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardRadioContent = exports.BadgeWrapper = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.ProductCardRadioStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\n border: ", ";\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 1rem;\n }\n\n .badgeWrapper {\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n }\n\n .productCardRadioContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\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: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardHeadWrapper{\n .productCardTitle {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .productCardDesc{\n margin:0.25rem 0 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-50);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n .popupText{\n font: var(--caption-medium-12-15);\n a{\n color: var(--primary);\n }\n }\n }\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n }\n }\n\n ", "\n"], ["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\n border: ", ";\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 1rem;\n }\n\n .badgeWrapper {\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n }\n\n .productCardRadioContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\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: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardHeadWrapper{\n .productCardTitle {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .productCardDesc{\n margin:0.25rem 0 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-50);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n .popupText{\n font: var(--caption-medium-12-15);\n a{\n color: var(--primary);\n }\n }\n }\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n }\n }\n\n ", "\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n "; }, function (props) { return props.$checked ? "2px solid var(--primary)" : "1px solid var(--dark-opacity-10)"; }, devices_1.devices.md, devices_1.devices.md, function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md, function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n .productCardInner{\n padding: 1rem;\n .productCardRadioContent {\n .indicator {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n \n .productCardImg {\n \n }\n .productCardTitle {\n font: var(--body-semi-bold-14-17);\n }\n .productCardContent{\n margin: 1rem auto 0 0;\n }\n }\n "; });
14
- var templateObject_1;
13
+ exports.BadgeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"], ["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"])));
14
+ exports.ProductCardRadioContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"], ["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"])), function (props) { return props.$hidden && "display: none;"; }, devices_1.devices.md);
15
+ exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"], ["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"])));
16
+ exports.ProductCardText = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
17
+ exports.ProductCardHeadWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
18
+ exports.ProductCardTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"])), function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md);
19
+ exports.ProductCardDesc = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0.25rem 0 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-50);\n"], ["\n margin: 0.25rem 0 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-50);\n"])));
20
+ exports.TooltipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"], ["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"])));
21
+ exports.InputIcon = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""])));
22
+ exports.PopupText = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font: var(--caption-medium-12-15);\n\n a {\n color: var(--primary);\n }\n"], ["\n font: var(--caption-medium-12-15);\n\n a {\n color: var(--primary);\n }\n"])));
23
+ exports.ProductCardContent = styled_components_1.default.label(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n"], ["\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n"])), function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
24
+ exports.HiddenInput = styled_components_1.default.input(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
25
+ exports.ProductCardInner = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n\n @media only screen and ", " {\n padding: 1rem;\n }\n\n ", "\n"], ["\n border: ", ";\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n\n @media only screen and ", " {\n padding: 1rem;\n }\n\n ", "\n"])), function (props) { return props.$checked ? "2px solid var(--primary)" : "1px solid var(--dark-opacity-10)"; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n padding: 1rem;\n\n ".concat(exports.ProductCardRadioContent, " > label > div {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n\n ").concat(exports.ProductCardTitle, " {\n font: var(--body-semi-bold-14-17);\n }\n\n ").concat(exports.ProductCardContent, " {\n margin: 1rem auto 0 0;\n }\n "); });
26
+ exports.ProductCardRadioStyled = styled_components_1.default.label(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n"], ["\n display: block;\n max-width: 634px;\n\n ", "\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n "; });
27
+ 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;
@@ -18,6 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
18
18
  var Basic_1 = __importDefault(require("./layouts/basic/Basic"));
19
19
  var Boxed_1 = __importDefault(require("./layouts/boxed/Boxed"));
20
20
  var BoxedSm_1 = __importDefault(require("./layouts/boxedSm/BoxedSm"));
21
+ var BoxedMd_1 = __importDefault(require("./layouts/boxedMd/BoxedMd"));
21
22
  var boxedWithIcon_1 = __importDefault(require("./layouts/boxedWithIcon"));
22
23
  var horizontal_1 = __importDefault(require("./layouts/horizontal"));
23
24
  var Color_1 = __importDefault(require("./layouts/color/Color"));
@@ -29,6 +30,8 @@ var RadioButton = function (props) {
29
30
  return (0, jsx_runtime_1.jsx)(Boxed_1.default, __assign({}, props));
30
31
  case 'boxedSm':
31
32
  return (0, jsx_runtime_1.jsx)(BoxedSm_1.default, __assign({}, props));
33
+ case 'boxedMd':
34
+ return (0, jsx_runtime_1.jsx)(BoxedMd_1.default, __assign({}, props));
32
35
  case 'boxedWithIcon':
33
36
  return (0, jsx_runtime_1.jsx)(boxedWithIcon_1.default, __assign({}, props));
34
37
  case 'horizontal':
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { RadioButtonProps } from "./../../props";
3
- declare const Basic: ({ value, checked, onChange, onClick, name, id, label, disabled, size, description, valid, labelOffset, hasNoneClick, color, alignment, textSize, verticalAlign, isWrapText, readOnly }: RadioButtonProps) => React.JSX.Element;
3
+ declare const Basic: ({ value, checked, onChange, onClick, name, id, label, disabled, size, description, valid, labelOffset, hasNoneClick, color, alignment, textSize, verticalAlign, isWrapText, readOnly, showIndicator, }: RadioButtonProps) => React.JSX.Element;
4
4
  export default Basic;
@@ -16,11 +16,25 @@ var react_1 = require("react");
16
16
  var props_1 = require("./../../props");
17
17
  var Basic_styled_1 = require("./Basic.styled");
18
18
  var Basic = function (_a) {
19
- var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, _b = _a.id, id = _b === void 0 ? props_1.BasicDefault.id : _b, label = _a.label, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, description = _a.description, _d = _a.valid, valid = _d === void 0 ? props_1.BasicDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BasicDefault.labelOffset : _e, _f = _a.hasNoneClick, hasNoneClick = _f === void 0 ? props_1.BasicDefault.hasNoneClick : _f, _g = _a.color, color = _g === void 0 ? props_1.BasicDefault.color : _g, _h = _a.alignment, alignment = _h === void 0 ? props_1.BasicDefault.alignment : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.BasicDefault.textSize : _j, _k = _a.verticalAlign, verticalAlign = _k === void 0 ? props_1.BasicDefault.verticalAlign : _k, isWrapText = _a.isWrapText, readOnly = _a.readOnly;
20
- var _l = (0, react_1.useState)(color), inputColor = _l[0], setInputColor = _l[1];
19
+ var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, _b = _a.id, id = _b === void 0 ? props_1.BasicDefault.id : _b, label = _a.label, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, description = _a.description, _d = _a.valid, valid = _d === void 0 ? props_1.BasicDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BasicDefault.labelOffset : _e, _f = _a.hasNoneClick, hasNoneClick = _f === void 0 ? props_1.BasicDefault.hasNoneClick : _f, _g = _a.color, color = _g === void 0 ? props_1.BasicDefault.color : _g, _h = _a.alignment, alignment = _h === void 0 ? props_1.BasicDefault.alignment : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.BasicDefault.textSize : _j, _k = _a.verticalAlign, verticalAlign = _k === void 0 ? props_1.BasicDefault.verticalAlign : _k, isWrapText = _a.isWrapText, readOnly = _a.readOnly, _l = _a.showIndicator, showIndicator = _l === void 0 ? true : _l;
20
+ var _m = (0, react_1.useState)(color), inputColor = _m[0], setInputColor = _m[1];
21
21
  (0, react_1.useEffect)(function () {
22
22
  setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
23
23
  });
24
- return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$hasNoneClick": hasNoneClick, "$isWrapText": isWrapText, "$readOnly": readOnly, "$color": inputColor, "$alignment": alignment, "$textSize": textSize, "$verticalAlign": verticalAlign }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description })))] })))] })));
24
+ var styledProps = {
25
+ $disabled: disabled,
26
+ $checked: checked,
27
+ $size: size,
28
+ $valid: valid,
29
+ $labelOffset: labelOffset,
30
+ $hasNoneClick: hasNoneClick,
31
+ $isWrapText: isWrapText,
32
+ $readOnly: readOnly,
33
+ $color: inputColor,
34
+ $alignment: alignment,
35
+ $textSize: textSize,
36
+ $verticalAlign: verticalAlign,
37
+ };
38
+ return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id }, styledProps, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), showIndicator && (0, jsx_runtime_1.jsx)(Basic_styled_1.Indicator, __assign({}, styledProps)), (label || description) && ((0, jsx_runtime_1.jsxs)(Basic_styled_1.LabelsWrapper, __assign({}, styledProps, { children: [label && ((0, jsx_runtime_1.jsx)(Basic_styled_1.LabelText, __assign({ htmlFor: id }, styledProps, { children: label }))), description && ((0, jsx_runtime_1.jsx)(Basic_styled_1.DescriptionText, __assign({ htmlFor: id }, { children: description })))] })))] })));
25
39
  };
26
40
  exports.default = Basic;
@@ -1,3 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { RadioButtonStyledProps } from "./../../props";
3
+ export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
4
+ export declare const LabelsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
5
+ export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
6
+ export declare const DescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
3
7
  export declare const BasicStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;