krl-alfred 2.23.5 → 2.23.7

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

@@ -28,9 +28,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.BagCircleFilled = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeft = exports.ArrowSmallDownStroke = exports.ArrowSmallDown = exports.ArrowSharemini = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowLeftXl = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGoSmall = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.Announcement = exports.Activity = void 0;
 exports.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.Closemini = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkMd = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = void 0;
 exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.MoneyBig = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.ForwardMd = exports.Folder = exports.Flash = exports.FilterUp = void 0;
-exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Subcategory = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusMd = exports.PlusCircle = exports.PlusBig = exports.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = void 0;
-exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.TickMd = exports.Tick = void 0;
-exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = void 0;
+exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Subcategory = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.ShowSm = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusMd = exports.PlusCircle = exports.PlusBig = exports.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = void 0;
+exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.TickMd = exports.Tick = exports.ThumbCircleFilled = void 0;
+exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Activity_1 = __importDefault(require("./Activity"));
 Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -408,6 +408,8 @@ var ShieldFail_1 = __importDefault(require("./ShieldFail"));
 Object.defineProperty(exports, "ShieldFail", { enumerable: true, get: function () { return ShieldFail_1.default; } });
 var Show_1 = __importDefault(require("./Show"));
 Object.defineProperty(exports, "Show", { enumerable: true, get: function () { return Show_1.default; } });
+var ShowSm_1 = __importDefault(require("./ShowSm"));
+Object.defineProperty(exports, "ShowSm", { enumerable: true, get: function () { return ShowSm_1.default; } });
 var ShufflePlay_1 = __importDefault(require("./ShufflePlay"));
 Object.defineProperty(exports, "ShufflePlay", { enumerable: true, get: function () { return ShufflePlay_1.default; } });
 var SignLanguage_1 = __importDefault(require("./SignLanguage"));
@@ -1317,6 +1319,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Show_1.default, __assign({}, props));
     },
+    ShowSm: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(ShowSm_1.default, __assign({}, props));
+    },
     ShufflePlay: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(ShufflePlay_1.default, __assign({}, props));

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

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

package/dist/components/RadioButton/layouts/horizontal/Horizontal.js

@@ -17,9 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Badges_1 = __importDefault(require("../../../Badges"));
+var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var Horizontal_styled_1 = require("./Horizontal.styled");
 var Horizontal = function (props) {
-    var label = props.label, description = props.description, id = props.id, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, value = props.value, price = props.price, priceDesc = props.priceDesc, hasTitleBadge = props.hasTitleBadge, titleBadgeLayout = props.titleBadgeLayout, titleBadgeText = props.titleBadgeText, _a = props.titleBadgePosition, titleBadgePosition = _a === void 0 ? "inline" : _a, hasPriceBadge = props.hasPriceBadge, priceBadgeLayout = props.priceBadgeLayout, priceBadgeText = props.priceBadgeText, _b = props.labelOffset, labelOffset = _b === void 0 ? "1rem" : _b, disabled = props.disabled, _c = props.valid, valid = _c === void 0 ? true : _c, _d = props.showIndicator, showIndicator = _d === void 0 ? true : _d, content = props.content, _e = props.size, size = _e === void 0 ? "small" : _e;
+    var label = props.label, description = props.description, id = props.id, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, value = props.value, price = props.price, priceDesc = props.priceDesc, hasTitleBadge = props.hasTitleBadge, titleBadgeLayout = props.titleBadgeLayout, titleBadgeText = props.titleBadgeText, _a = props.titleBadgePosition, titleBadgePosition = _a === void 0 ? "inline" : _a, hasPriceBadge = props.hasPriceBadge, priceBadgeLayout = props.priceBadgeLayout, priceBadgeText = props.priceBadgeText, _b = props.labelOffset, labelOffset = _b === void 0 ? "1rem" : _b, disabled = props.disabled, _c = props.valid, valid = _c === void 0 ? true : _c, _d = props.showIndicator, showIndicator = _d === void 0 ? true : _d, content = props.content, _e = props.size, size = _e === void 0 ? "small" : _e, _f = props.hasError, hasError = _f === void 0 ? false : _f, errorMessage = props.errorMessage;
     var titleBadgeBelow = titleBadgePosition === "below";
     var titleBadgeTopRight = titleBadgePosition === "topRight";
     var hasContent = Boolean(content);
@@ -27,6 +28,7 @@ var Horizontal = function (props) {
         checked: checked,
         $disabled: disabled,
         $valid: valid,
+        $hasError: hasError,
         $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $labelOffset: labelOffset,
         $titleBadgeBelow: titleBadgeBelow,
@@ -36,6 +38,6 @@ var Horizontal = function (props) {
     };
     var titleBadgeElement = ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: titleBadgeLayout, title: titleBadgeText }));
     var titleBadge = hasTitleBadge && !titleBadgeTopRight && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.BadgesWrapper, __assign({}, styledProps, { children: titleBadgeElement })));
-    return ((0, jsx_runtime_1.jsxs)(Horizontal_styled_1.HorizontalBoxStyled, __assign({}, styledProps, { children: [hasTitleBadge && titleBadgeTopRight && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.TitleBadgeTopRight, { children: titleBadgeElement })), (0, jsx_runtime_1.jsx)(Horizontal_styled_1.HorizontalLabel, { children: (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.Inner, { children: [(0, jsx_runtime_1.jsxs)(Horizontal_styled_1.LeftContent, { 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)(Horizontal_styled_1.Indicator, __assign({}, styledProps)), (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.LabelContent, { children: [label && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.LabelWrapper, __assign({}, styledProps, { children: titleBadgeBelow ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.TitleLabel, { children: label }), titleBadge] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, titleBadge] })) }))), description && (0, jsx_runtime_1.jsx)(Horizontal_styled_1.Description, { children: description })] })] }), (0, jsx_runtime_1.jsx)(Horizontal_styled_1.RightContent, { children: hasPriceBadge ? ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: priceBadgeLayout, title: priceBadgeText })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.Price, { children: price }), priceDesc && ((0, jsx_runtime_1.jsxs)(Horizontal_styled_1.TotalPrice, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.TotalLabel, { children: "Toplam:" }), " ", priceDesc] }))] })) })] }) }), checked && content && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.ContentArea, { children: content }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Horizontal_styled_1.HorizontalRoot, { children: [(0, jsx_runtime_1.jsxs)(Horizontal_styled_1.HorizontalBoxStyled, __assign({}, styledProps, { children: [hasTitleBadge && titleBadgeTopRight && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.TitleBadgeTopRight, { children: titleBadgeElement })), (0, jsx_runtime_1.jsx)(Horizontal_styled_1.HorizontalLabel, { children: (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.Inner, { children: [(0, jsx_runtime_1.jsxs)(Horizontal_styled_1.LeftContent, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, "aria-invalid": hasError, "aria-describedby": hasError && errorMessage ? "".concat(id, "-error") : undefined }), showIndicator && (0, jsx_runtime_1.jsx)(Horizontal_styled_1.Indicator, __assign({}, styledProps)), (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.LabelContent, { children: [label && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.LabelWrapper, __assign({}, styledProps, { children: titleBadgeBelow ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.TitleLabel, { children: label }), titleBadge] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, titleBadge] })) }))), description && (0, jsx_runtime_1.jsx)(Horizontal_styled_1.Description, { children: description })] })] }), (0, jsx_runtime_1.jsx)(Horizontal_styled_1.RightContent, { children: hasPriceBadge ? ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: priceBadgeLayout, title: priceBadgeText })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.Price, { children: price }), priceDesc && ((0, jsx_runtime_1.jsxs)(Horizontal_styled_1.TotalPrice, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.TotalLabel, { children: "Toplam:" }), " ", priceDesc] }))] })) })] }) }), checked && content && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.ContentArea, { children: content }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)(Horizontal_styled_1.ErrorMessage, __assign({ id: id ? "".concat(id, "-error") : undefined }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] }));
 };
 exports.default = Horizontal;

package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.d.ts

@@ -5,6 +5,7 @@ export type HorizontalStyledProps = {
     checked?: boolean;
     $disabled?: boolean;
     $valid: boolean;
+    $hasError?: boolean;
     $color?: string;
     $labelOffset?: string;
     $titleBadgeBelow?: boolean;
@@ -21,7 +22,9 @@ export declare const LabelWrapper: import("styled-components/dist/types").IStyle
 export declare const TitleLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const BadgesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never>>> & string;
 export declare const TitleBadgeTopRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const HorizontalRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const RightContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const Price: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
 export declare const TotalPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HorizontalBoxStyled = exports.ContentArea = exports.TotalLabel = exports.TotalPrice = exports.Price = exports.RightContent = exports.Description = exports.TitleBadgeTopRight = exports.BadgesWrapper = exports.TitleLabel = exports.LabelWrapper = exports.LabelContent = exports.Indicator = exports.LeftContent = exports.Inner = exports.HorizontalLabel = void 0;
+exports.HorizontalBoxStyled = exports.ContentArea = exports.TotalLabel = exports.TotalPrice = exports.Price = exports.RightContent = exports.HorizontalRoot = exports.ErrorMessage = exports.Description = exports.TitleBadgeTopRight = exports.BadgesWrapper = exports.TitleLabel = exports.LabelWrapper = exports.LabelContent = exports.Indicator = exports.LeftContent = exports.Inner = exports.HorizontalLabel = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
@@ -24,21 +24,41 @@ var getIndicatorSize = function (size) {
 exports.HorizontalLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n"])));
 exports.Inner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.5rem;\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 1rem 1.5rem;\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"])), devices_1.devices.sm);
 exports.LeftContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"])));
-exports.Indicator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"])), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$labelOffset || "0.5rem"; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); });
+exports.Indicator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+    if (props.$disabled) {
+        return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" }));
+    }
+    if (props.$hasError) {
+        return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }));
+    }
+    if (props.checked) {
+        return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" }));
+    }
+    if (props.$valid) {
+        return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" }));
+    }
+    return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }));
+}, function (props) { return props.$labelOffset || "0.5rem"; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); });
 exports.LabelContent = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  align-items: center;\n  justify-content: flex-start;\n"], ["\n  display: grid;\n  align-items: center;\n  justify-content: flex-start;\n"])));
 exports.LabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  justify-content: flex-start;\n  flex-direction: ", ";\n  font: var(--body-semi-bold-14-17);\n  row-gap: ", ";\n\n  @media only screen and ", " {\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  justify-content: flex-start;\n  flex-direction: ", ";\n  font: var(--body-semi-bold-14-17);\n  row-gap: ", ";\n\n  @media only screen and ", " {\n    ", "\n  }\n"])), function (props) { return (props.$titleBadgeBelow ? "flex-start" : "center"); }, function (props) { return (props.$titleBadgeBelow ? "column" : "row"); }, function (props) { return (props.$titleBadgeBelow ? "0.25rem" : "0"); }, devices_1.devices.sm, function (props) { return !props.$titleBadgeBelow && "display: block;"; });
 exports.TitleLabel = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
 exports.BadgesWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin-left: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin-left: ", ";\n  margin-top: ", ";\n"])), function (props) { return (props.$titleBadgeBelow ? "0" : "1rem"); }, function (props) { return (props.$titleBadgeBelow ? "0.25rem" : "0"); });
 exports.TitleBadgeTopRight = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"])));
-exports.Description = styled_components_1.default.p(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: var(--dark-opacity-50);\n  font: var(--caption-medium-12-15);\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n  width: 100%;\n  display: block;\n"], ["\n  color: var(--dark-opacity-50);\n  font: var(--caption-medium-12-15);\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n  width: 100%;\n  display: block;\n"])));
-exports.RightContent = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  width: auto;\n  text-align: end;\n  row-gap: 0.25rem;\n  display: grid;\n"], ["\n  flex: 0 0 auto;\n  width: auto;\n  text-align: end;\n  row-gap: 0.25rem;\n  display: grid;\n"])));
-exports.Price = styled_components_1.default.strong(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: var(--dark);\n  font: var(--title-bold-16-19);\n"], ["\n  color: var(--dark);\n  font: var(--title-bold-16-19);\n"])));
-exports.TotalPrice = styled_components_1.default.strong(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"], ["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"])));
-exports.TotalLabel = styled_components_1.default.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.sm);
-exports.ContentArea = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"])), devices_1.devices.sm);
-exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border: 1px solid transparent;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ ", " {\n      background-image: url('", "');\n    }\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border: 1px solid transparent;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ ", " {\n      background-image: url('", "');\n    }\n\n    ", "\n  }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-3)' : 'white'; }, function (props) { return props.$disabled
-    ? '1px solid var(--grey-10)'
-    : props.checked
-        ? '2px solid var(--primary)'
-        : '1px solid var(--dark-opacity-10)'; }, function (props) { return !props.checked && !props.$disabled && "\n    @media only screen and ".concat(devices_1.devices.lgUp, " {\n      &:hover:before {\n        border: 1px solid var(--primary);\n      }\n    }\n  "); }, exports.HorizontalLabel, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })); }, function (props) { return props.$disabled ? "\n      pointer-events: none;\n      user-select:none;\n    " : ""; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+exports.Description = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: var(--dark-opacity-50);\n  font: var(--caption-medium-12-15);\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n  width: 100%;\n  display: block;\n\n  p {\n    margin: 0;\n  }\n\n  a {\n    color: inherit;\n  }\n"], ["\n  color: var(--dark-opacity-50);\n  font: var(--caption-medium-12-15);\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n  width: 100%;\n  display: block;\n\n  p {\n    margin: 0;\n  }\n\n  a {\n    color: inherit;\n  }\n"])));
+exports.ErrorMessage = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 8px;\n  color: var(--red);\n\n  svg {\n    margin-right: 8px;\n  }\n\n  p {\n    margin: 0;\n    font: var(--caption-semi-bold-11-13);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 8px;\n  color: var(--red);\n\n  svg {\n    margin-right: 8px;\n  }\n\n  p {\n    margin: 0;\n    font: var(--caption-semi-bold-11-13);\n  }\n"])));
+exports.HorizontalRoot = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n"], ["\n  display: block;\n  width: 100%;\n"])));
+exports.RightContent = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  width: auto;\n  text-align: end;\n  row-gap: 0.25rem;\n  display: grid;\n"], ["\n  flex: 0 0 auto;\n  width: auto;\n  text-align: end;\n  row-gap: 0.25rem;\n  display: grid;\n"])));
+exports.Price = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: var(--dark);\n  font: var(--title-bold-16-19);\n"], ["\n  color: var(--dark);\n  font: var(--title-bold-16-19);\n"])));
+exports.TotalPrice = styled_components_1.default.strong(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"], ["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"])));
+exports.TotalLabel = styled_components_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.sm);
+exports.ContentArea = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"])), devices_1.devices.sm);
+exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n  }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-3)' : 'white'; }, function (props) {
+    if (props.$disabled)
+        return '1px solid var(--grey-10)';
+    if (props.$hasError)
+        return '2px solid var(--red)';
+    if (props.checked)
+        return '2px solid var(--primary)';
+    return '1px solid var(--dark-opacity-10)';
+}, function (props) { return !props.checked && !props.$disabled && !props.$hasError && "\n    @media only screen and ".concat(devices_1.devices.lgUp, " {\n      &:hover:before {\n        border: 1px solid var(--primary);\n      }\n    }\n  "); }, exports.HorizontalLabel, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$hasError && !props.$disabled && "\n    ".concat(exports.LabelWrapper, ",\n    ").concat(exports.TitleLabel, ",\n    ").concat(exports.Description, ",\n    ").concat(exports.Price, ",\n    ").concat(exports.TotalPrice, " {\n      color: var(--red);\n    }\n\n    ").concat(exports.Description, " a {\n      color: var(--red);\n    }\n  "); }, function (props) { return !props.$disabled && !props.$hasError ? "\n      &:checked ~ ".concat(exports.Indicator, " {\n        background-image: url('").concat((0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })), "');\n      }\n    ") : ""; }, function (props) { return props.$disabled ? "\n      pointer-events: none;\n      user-select:none;\n    " : ""; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

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

@@ -48,6 +48,8 @@ interface RadioButton {
     iconColor?: string;
     content?: React.ReactNode;
     showIndicator?: boolean;
+    hasError?: boolean;
+    errorMessage?: React.ReactNode;
 }
 declare const RadioButtonDefault: RadioButton;
 export declare const BoxedDefault: RadioButton;

package/dist/components/RadioButton/props.js

@@ -27,7 +27,9 @@ var RadioButtonDefault = {
     titleBadgePosition: "inline",
     hasPriceBadge: false,
     priceBadgeLayout: "primary",
-    priceBadgeText: "Avantajlı"
+    priceBadgeText: "Avantajlı",
+    hasError: false,
+    errorMessage: null,
 };
 exports.BoxedDefault = {
     id: "styledChecbox_".concat(Math.floor(Math.random() * (99999999999 - 11111111111) + 11111111111)),
@@ -74,5 +76,7 @@ exports.HorizontalDefault = {
     hasPriceBadge: false,
     priceBadgeLayout: "disabled",
     priceBadgeText: "Satışta yok",
-    description: null
+    description: null,
+    hasError: false,
+    errorMessage: null,
 };

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

@@ -51,6 +51,12 @@ declare const _default: {
         valid: {
             control: string;
         };
+        hasError: {
+            control: string;
+        };
+        errorMessage: {
+            control: string;
+        };
         readOnly: {
             control: string;
         };
@@ -337,6 +343,29 @@ export declare const HorizontalTitleBadgeTopRight: {
     };
     render: (args: any) => import("react").JSX.Element;
 };
+export declare const HorizontalWithError: {
+    name: string;
+    args: {
+        id: string;
+        hasError: boolean;
+        errorMessage: string;
+        label: string;
+        description: string;
+        valid: boolean;
+        layout: string;
+        price: string;
+        priceDesc: string;
+        hasTitleBadge: boolean;
+        titleBadgeLayout: string;
+        titleBadgeText: string;
+        hasPriceBadge: boolean;
+        priceBadgeLayout: string;
+        priceBadgeText: string;
+        checked: boolean;
+        color: string;
+        labelOffset: string;
+    };
+};
 export declare const HorizontalDisabled: {
     args: {
         label: string;

package/dist/components/RadioButton/stories/RadioButton.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HorizontalChecked = exports.WithoutDescription = exports.BoxedWithBadge = exports.AllLayouts = exports.AllSizes = exports.VerticalAlignment = exports.ReadOnly = exports.Disabled = exports.Invalid = exports.Unchecked = exports.Checked = exports.ColorPicker = exports.HorizontalWithDangerBadge = exports.HorizontalWithContent = exports.HorizontalDisabled = exports.HorizontalTitleBadgeTopRight = exports.HorizontalTitleBadgeBelowWithDescription = exports.HorizontalTitleBadgeBelow = exports.Horizontal = exports.BoxedMdWithoutIndicator = exports.BoxedMdUnchecked = exports.BoxedMd = exports.BoxedSm = exports.BoxedWithIconGroup = exports.BoxedWithIconUnselected = exports.BoxedWithIcon = exports.Boxed = exports.Basic = exports.Default = void 0;
+exports.HorizontalChecked = exports.WithoutDescription = exports.BoxedWithBadge = exports.AllLayouts = exports.AllSizes = exports.VerticalAlignment = exports.ReadOnly = exports.Disabled = exports.Invalid = exports.Unchecked = exports.Checked = exports.ColorPicker = exports.HorizontalWithDangerBadge = exports.HorizontalWithContent = exports.HorizontalDisabled = exports.HorizontalWithError = exports.HorizontalTitleBadgeTopRight = exports.HorizontalTitleBadgeBelowWithDescription = exports.HorizontalTitleBadgeBelow = exports.Horizontal = exports.BoxedMdWithoutIndicator = exports.BoxedMdUnchecked = exports.BoxedMd = exports.BoxedSm = exports.BoxedWithIconGroup = exports.BoxedWithIconUnselected = exports.BoxedWithIcon = exports.Boxed = exports.Basic = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var props_1 = require("../props");
@@ -43,6 +43,8 @@ exports.default = {
         name: { control: "text" },
         checked: { control: "boolean" },
         valid: { control: "boolean" },
+        hasError: { control: "boolean" },
+        errorMessage: { control: "text" },
         readOnly: { control: "boolean" },
         disabled: { control: "boolean" },
         isWrapText: { control: "boolean" },
@@ -274,6 +276,10 @@ exports.HorizontalTitleBadgeTopRight = {
     },
     render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "360px" } }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, __assign({}, args)) }))); },
 };
+exports.HorizontalWithError = {
+    name: "Horizontal — error",
+    args: __assign(__assign({}, exports.Horizontal.args), { id: "horizontal_error", hasError: true, errorMessage: "Bu alan zorunludur" }),
+};
 exports.HorizontalDisabled = {
     args: {
         label: "Taksitli Ödeme",

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioGroupProps } from "./props";
-declare const RadioGroup: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength, isHorizontalOnMobile, }: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength, isHorizontalOnMobile, hasError, }: RadioGroupProps) => React.JSX.Element;
 export default RadioGroup;

package/dist/components/RadioGroup/RadioGroup.js

@@ -21,16 +21,18 @@ var RadioGroup_styled_1 = require("./RadioGroup.styled");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var RadioGroup = function (_a) {
-    var _b = _a.options, options = _b === void 0 ? props_1.RadioGroupDefault.options : _b, _c = _a.value, value = _c === void 0 ? props_1.RadioGroupDefault.value : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.RadioGroupDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.RadioGroupDefault.name : _e, _f = _a.label, label = _f === void 0 ? props_1.RadioGroupDefault.label : _f, _g = _a.disabled, disabled = _g === void 0 ? props_1.RadioGroupDefault.disabled : _g, _h = _a.size, size = _h === void 0 ? props_1.RadioGroupDefault.size : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.RadioGroupDefault.textSize : _j, _k = _a.layout, layout = _k === void 0 ? props_1.RadioGroupDefault.layout : _k, _l = _a.radioLayout, radioLayout = _l === void 0 ? props_1.RadioGroupDefault.radioLayout : _l, _m = _a.valid, valid = _m === void 0 ? props_1.RadioGroupDefault.valid : _m, _o = _a.labelOffset, labelOffset = _o === void 0 ? props_1.RadioGroupDefault.labelOffset : _o, _p = _a.color, color = _p === void 0 ? props_1.RadioGroupDefault.color : _p, _q = _a.verticalAlign, verticalAlign = _q === void 0 ? props_1.RadioGroupDefault.verticalAlign : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.RadioGroupDefault.readOnly : _r, _s = _a.gap, gap = _s === void 0 ? props_1.RadioGroupDefault.gap : _s, _t = _a.isFilled, isFilled = _t === void 0 ? props_1.RadioGroupDefault.isFilled : _t, _u = _a.showIndicator, showIndicator = _u === void 0 ? props_1.RadioGroupDefault.showIndicator : _u, _v = _a.hasInfo, hasInfo = _v === void 0 ? props_1.RadioGroupDefault.hasInfo : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.RadioGroupDefault.infoText : _w, _x = _a.infoIcon, infoIcon = _x === void 0 ? props_1.RadioGroupDefault.infoIcon : _x, _y = _a.gridColumnLength, gridColumnLength = _y === void 0 ? props_1.RadioGroupDefault.gridColumnLength : _y, _z = _a.isHorizontalOnMobile, isHorizontalOnMobile = _z === void 0 ? props_1.RadioGroupDefault.isHorizontalOnMobile : _z;
+    var _b = _a.options, options = _b === void 0 ? props_1.RadioGroupDefault.options : _b, _c = _a.value, value = _c === void 0 ? props_1.RadioGroupDefault.value : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.RadioGroupDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.RadioGroupDefault.name : _e, _f = _a.label, label = _f === void 0 ? props_1.RadioGroupDefault.label : _f, _g = _a.disabled, disabled = _g === void 0 ? props_1.RadioGroupDefault.disabled : _g, _h = _a.size, size = _h === void 0 ? props_1.RadioGroupDefault.size : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.RadioGroupDefault.textSize : _j, _k = _a.layout, layout = _k === void 0 ? props_1.RadioGroupDefault.layout : _k, _l = _a.radioLayout, radioLayout = _l === void 0 ? props_1.RadioGroupDefault.radioLayout : _l, _m = _a.valid, valid = _m === void 0 ? props_1.RadioGroupDefault.valid : _m, _o = _a.labelOffset, labelOffset = _o === void 0 ? props_1.RadioGroupDefault.labelOffset : _o, _p = _a.color, color = _p === void 0 ? props_1.RadioGroupDefault.color : _p, _q = _a.verticalAlign, verticalAlign = _q === void 0 ? props_1.RadioGroupDefault.verticalAlign : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.RadioGroupDefault.readOnly : _r, _s = _a.gap, gap = _s === void 0 ? props_1.RadioGroupDefault.gap : _s, _t = _a.isFilled, isFilled = _t === void 0 ? props_1.RadioGroupDefault.isFilled : _t, _u = _a.showIndicator, showIndicator = _u === void 0 ? props_1.RadioGroupDefault.showIndicator : _u, _v = _a.hasInfo, hasInfo = _v === void 0 ? props_1.RadioGroupDefault.hasInfo : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.RadioGroupDefault.infoText : _w, _x = _a.infoIcon, infoIcon = _x === void 0 ? props_1.RadioGroupDefault.infoIcon : _x, _y = _a.gridColumnLength, gridColumnLength = _y === void 0 ? props_1.RadioGroupDefault.gridColumnLength : _y, _z = _a.isHorizontalOnMobile, isHorizontalOnMobile = _z === void 0 ? props_1.RadioGroupDefault.isHorizontalOnMobile : _z, _0 = _a.hasError, hasError = _0 === void 0 ? props_1.RadioGroupDefault.hasError : _0;
     var handleRadioChange = function (optionValue) {
         if (!onChange)
             return;
         onChange(optionValue);
     };
     return ((0, jsx_runtime_1.jsxs)(RadioGroup_styled_1.RadioGroupStyled, { children: [label && ((0, jsx_runtime_1.jsx)(RadioGroup_styled_1.GroupLabelWrapper, __assign({ "$emphasizedLabel": hasInfo }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.GroupLabel, __assign({ "$emphasizedLabel": hasInfo }, { children: label })) }))), hasInfo && infoText && ((0, jsx_runtime_1.jsxs)(RadioGroup_styled_1.InfoArea, { children: [(0, jsx_runtime_1.jsx)(RadioGroup_styled_1.InfoIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: (infoIcon || props_1.RadioGroupDefault.infoIcon), width: "24", height: "24", hasWrapper: false }) }), (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.InfoText, { children: infoText })] })), (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.RadioButtonsWrapper, __assign({ "$layout": layout, "$gap": gap, "$isFilled": isFilled, "$gridColumnLength": gridColumnLength, "$isHorizontalOnMobile": isHorizontalOnMobile }, { children: options.map(function (option, index) {
+                    var _a;
                     var radioId = option.id || "".concat(name, "_").concat(index);
                     var isChecked = value === option.value;
-                    return ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, name: name, value: option.value, checked: isChecked, onChange: function (e) { return handleRadioChange(option.value); }, label: option.label, description: option.description, image: option.image, disabled: disabled || option.disabled, alignment: option.alignment, isWrapText: option.isWrapText, size: size, textSize: textSize, layout: radioLayout, valid: valid, labelOffset: labelOffset, color: option.color || color, verticalAlign: verticalAlign, readOnly: readOnly, labelSm: option.labelSm, hasBadge: option.hasBadge, badgeText: option.badgeText, badgeVariant: option.badgeVariant, price: option.price, priceDesc: option.priceDesc, hasTitleBadge: option.hasTitleBadge, titleBadgeLayout: option.titleBadgeLayout, titleBadgeText: option.titleBadgeText, hasPriceBadge: option.hasPriceBadge, priceBadgeLayout: option.priceBadgeLayout, priceBadgeText: option.priceBadgeText, iconName: option.iconName, iconColor: option.iconColor, content: option.content, showIndicator: showIndicator, titleBadgePosition: option.titleBadgePosition }, radioId));
+                    var optionHasError = (_a = option.hasError) !== null && _a !== void 0 ? _a : hasError;
+                    return ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, name: name, value: option.value, checked: isChecked, onChange: function (e) { return handleRadioChange(option.value); }, label: option.label, description: option.description, image: option.image, disabled: disabled || option.disabled, alignment: option.alignment, isWrapText: option.isWrapText, size: size, textSize: textSize, layout: radioLayout, valid: valid, labelOffset: labelOffset, color: option.color || color, verticalAlign: verticalAlign, readOnly: readOnly, labelSm: option.labelSm, hasBadge: option.hasBadge, badgeText: option.badgeText, badgeVariant: option.badgeVariant, price: option.price, priceDesc: option.priceDesc, hasTitleBadge: option.hasTitleBadge, titleBadgeLayout: option.titleBadgeLayout, titleBadgeText: option.titleBadgeText, hasPriceBadge: option.hasPriceBadge, priceBadgeLayout: option.priceBadgeLayout, priceBadgeText: option.priceBadgeText, iconName: option.iconName, iconColor: option.iconColor, content: option.content, showIndicator: showIndicator, titleBadgePosition: option.titleBadgePosition, hasError: optionHasError, errorMessage: option.errorMessage }, radioId));
                 }) }))] }));
 };
 exports.default = RadioGroup;

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

@@ -34,7 +34,9 @@ export interface RadioOption {
     iconName?: string;
     iconColor?: string;
     content?: React.ReactNode;
-    titleBadgePosition?: "inline" | "below";
+    titleBadgePosition?: "inline" | "below" | "topRight";
+    hasError?: boolean;
+    errorMessage?: React.ReactNode;
 }
 export interface RadioGroup {
     options?: RadioOption[];
@@ -62,6 +64,7 @@ export interface RadioGroup {
     gridColumnLength?: number;
     /** Mobilde layout uyarlaması: flex vertical → row; grid → tek sütun (alt alta) */
     isHorizontalOnMobile?: boolean;
+    hasError?: boolean;
 }
 export declare const RadioGroupDefault: RadioGroup;
 export interface RadioGroupStyledProps {

package/dist/components/RadioGroup/props.js

@@ -30,4 +30,5 @@ exports.RadioGroupDefault = {
     infoIcon: "InfoSquare",
     gridColumnLength: undefined,
     isHorizontalOnMobile: false,
+    hasError: false,
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength, isHorizontalOnMobile, }: import("../props").RadioGroup) => React.JSX.Element;
+    component: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength, isHorizontalOnMobile, hasError, }: import("../props").RadioGroup) => React.JSX.Element;
     tags: string[];
     argTypes: {
         layout: {
@@ -52,6 +52,9 @@ declare const _default: {
         isHorizontalOnMobile: {
             control: string;
         };
+        hasError: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -398,6 +401,101 @@ export declare const HorizontalInstallment: {
         gap: string;
     };
 };
+export declare const HorizontalInstallmentWithError: {
+    name: string;
+    args: {
+        name: string;
+        hasError: boolean;
+        options: ({
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            hasPriceBadge: boolean;
+            titleBadgeLayout?: undefined;
+            titleBadgeText?: undefined;
+            priceBadgeLayout?: undefined;
+            priceBadgeText?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled: boolean;
+        } | {
+            errorMessage: string;
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled?: undefined;
+        } | {
+            errorMessage: string;
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            hasPriceBadge: boolean;
+            titleBadgeLayout?: undefined;
+            titleBadgeText?: undefined;
+            priceBadgeLayout?: undefined;
+            priceBadgeText?: undefined;
+            disabled?: undefined;
+        } | {
+            errorMessage: string;
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled: boolean;
+        })[];
+        label: string;
+        value: string;
+        onChange: (value: any) => void;
+        layout: string;
+        radioLayout: string;
+        gap: string;
+    };
+};
 export declare const VariantPricing: {
     name: string;
     render: () => React.JSX.Element;

package/dist/components/RadioGroup/stories/RadioGroup.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
+exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallmentWithError = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var RadioGroup_1 = __importDefault(require("../RadioGroup"));
@@ -116,6 +116,7 @@ exports.default = {
         infoIcon: { control: 'text' },
         gridColumnLength: { control: 'number', min: 1, max: 6 },
         isHorizontalOnMobile: { control: 'boolean' },
+        hasError: { control: 'boolean' },
     }
 };
 exports.Default = {
@@ -388,6 +389,13 @@ exports.HorizontalInstallment = {
         gap: "0.75rem",
     },
 };
+exports.HorizontalInstallmentWithError = {
+    name: "Horizontal — error",
+    args: __assign(__assign({}, exports.HorizontalInstallment.args), { name: "horizontalInstallmentErrorRadioGroup", hasError: true, options: horizontalOptions.map(function (option, index) {
+            return index === 0
+                ? __assign(__assign({}, option), { errorMessage: "Bu alan zorunludur" }) : option;
+        }) }),
+};
 var variantPricingContent = ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem" } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { padding: "1rem", borderRadius: "0.5rem", background: "var(--dark-opacity-3)" } }, { children: "\u00DCr\u00FCn g\u00F6rselleri alan\u0131" })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.5rem" } }, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } }), (0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } }), (0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" } }, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } }), (0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } })] }))] })));
 var VariantPricingStory = function () {
     var _a = react_1.default.useState("noVariant"), value = _a[0], setValue = _a[1];