krl-alfred 2.21.0 → 2.22.0

package/dist/components/Badges/layouts/belt/belt.styled.js

@@ -10,7 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgesStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
-exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  filter: ", ";\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"], ["\n  filter: ", ";\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"])), function (props) { return props.$variant === "secondary" ? "drop-shadow(4px 4px 15px rgb(246,99,185,0.5))" : "drop-shadow(4px 4px 15px rgba(151,99,246,.5))"; }, function (props) { return props.$hasResponsive && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n          width: 60px;\n          height: 60px;\n        }\n      "); }, function (props) { return props.$size === "small" ? "60px" : "90px"; }, function (props) { return props.$size === "small" ? "15px" : "27px"; }, function (props) { return props.$size === "small" ? "-5px" : "-7px"; }, function (props) {
+exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  filter: ", ";\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"], ["\n  filter: ", ";\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"])), function (props) { return props.$variant === "secondary"
+    ? "drop-shadow(4px 4px 15px rgb(246,99,185,0.5))"
+    : "drop-shadow(4px 4px 15px color-mix(in srgb, var(--primary) 50%, transparent))"; }, function (props) { return props.$hasResponsive && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n          width: 60px;\n          height: 60px;\n        }\n      "); }, function (props) { return props.$size === "small" ? "60px" : "90px"; }, function (props) { return props.$size === "small" ? "15px" : "27px"; }, function (props) { return props.$size === "small" ? "-5px" : "-7px"; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "var(--caption-bold-10-12)";

package/dist/components/DescriptionCard/DescriptionCard.styled.js

@@ -13,8 +13,8 @@ exports.categoryRowGridColumns = 'minmax(0, 1fr) auto minmax(0, 1fr)';
 exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    padding: 0;\n"], ["\n    display: block;\n    padding: 0;\n"])));
 exports.DropdownWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n\n    &:hover{\n        > div{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.2s;\n        }\n        button{\n            svg{\n                transform: rotate(180deg);\n            }\n        }\n    }\n"], ["\n    display: block;\n    position: relative;\n\n    &:hover{\n        > div{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.2s;\n        }\n        button{\n            svg{\n                transform: rotate(180deg);\n            }\n        }\n    }\n"])));
 exports.CategoryDropdownWrapper = (0, styled_components_1.default)(exports.DropdownWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"], ["\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"])));
-exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    ", "\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: ", ";\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n        z-index: 2;\n    }\n"], ["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    ", "\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: ", ";\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n        z-index: 2;\n    }\n"])), function (props) { return props.$hasRounded ? "0.5rem" : "0"; }, function (props) { return props.$hasCategoryPadding && "\n        padding: 0 1.5rem 0;\n\n        &:has(".concat(exports.CategoryContentWrapper, ":not(:empty)) {\n            padding-bottom: 1.5rem;\n        }\n    "); }, function (props) { return props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
-exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-bottom: ", ";\n    padding-bottom: 1rem;\n    ", "\n"], ["\n    padding: ", ";\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-bottom: ", ";\n    padding-bottom: 1rem;\n    ", "\n"])), function (props) {
+exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    ", "\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: ", ";\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n        z-index: 2;\n    }\n"], ["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    ", "\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: ", ";\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n        z-index: 2;\n    }\n"])), function (props) { return props.$hasRounded ? "0.5rem" : "0"; }, function (props) { return props.$hasCategoryPadding ? "\n        padding: 0 1.5rem 0;\n    " : "\n        padding: 0;\n    "; }, function (props) { return props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
+exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-bottom: ", ";\n    ", "\n"], ["\n    padding: ", ";\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-bottom: ", ";\n    ", "\n"])), function (props) {
     if (props.$hasCategoryPadding) {
         return props.$headerImage ? "1rem 0" : "1.5rem 0";
     }
@@ -44,7 +44,7 @@ exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14
 exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
 exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    margin-left: 1.5rem;\n"], ["\n    display: block;\n    margin-left: 1.5rem;\n"])));
 exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    padding: ", ";\n"], ["\n    display: block;\n    padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '1rem 0 1.5rem 0' : '0 1.5rem 1.5rem 1.5rem'; });
-exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-bottom-left-radius: inherit;\n    border-bottom-right-radius: inherit;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px 0px 0 0px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-bottom-left-radius: inherit;\n    border-bottom-right-radius: inherit;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px 0px 0 0px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"])), function (props) { return props.$boxSize; });
+exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px 0px 0 0px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px 0px 0 0px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"])), function (props) { return props.$boxSize; });
 exports.ListItemStyled = styled_components_1.default.li(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    display: block;\n    padding: 1.5rem;\n    border-right: 1px solid var(--dark-opacity-10);\n    border-bottom: 1px solid var(--dark-opacity-10);\n    word-break: break-word;\n    grid-column: span ", ";\n\n    &:is(:last-child){\n        border-right: 0;\n    }\n"], ["\n    display: block;\n    padding: 1.5rem;\n    border-right: 1px solid var(--dark-opacity-10);\n    border-bottom: 1px solid var(--dark-opacity-10);\n    word-break: break-word;\n    grid-column: span ", ";\n\n    &:is(:last-child){\n        border-right: 0;\n    }\n"])), function (props) { var _a; return (_a = props.$columnSpan) !== null && _a !== void 0 ? _a : 1; });
 exports.DisplayTitleStyled = styled_components_1.default.strong(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--body-semi-bold-14-17);\n"], ["\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--body-semi-bold-14-17);\n"])));
 exports.DisplayValueStyled = styled_components_1.default.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    display: block;\n    margin-top: 0.5rem;\n    color: var(--dark);\n    font: var(--body-semi-bold-14-17);\n"], ["\n    display: block;\n    margin-top: 0.5rem;\n    color: var(--dark);\n    font: var(--body-semi-bold-14-17);\n"])));

package/dist/components/Icon/iconList/Closemini.d.ts

@@ -0,0 +1,3 @@
+export default SvgClosemini;
+declare function SvgClosemini(props: any): React.JSX.Element;
+import * as React from "react";

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

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgClosemini = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+exports.default = SvgClosemini;

package/dist/components/Icon/iconList/index.d.ts

@@ -224,6 +224,9 @@ export namespace iconList {
     function Closebig({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
+    function Closemini({ ...props }: {
+        [x: string]: any;
+    }): import("react").JSX.Element;
     function Coffee({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
@@ -870,6 +873,7 @@ import { default as CloseMedium } from "./CloseMedium";
 import { default as CloseSmall } from "./CloseSmall";
 import { default as CloseSquare } from "./CloseSquare";
 import { default as Closebig } from "./Closebig";
+import { default as Closemini } from "./Closemini";
 import { default as Coffee } from "./Coffee";
 import { default as Completed } from "./Completed";
 import { default as Copy } from "./Copy";
@@ -1060,4 +1064,4 @@ import { default as UserPlusLg } from "./UserPlusLg";
 import { default as Wphk } from "./Wphk";
 import { default as Youtubehk } from "./Youtubehk";
 import { default as Youtubewithfooter } from "./Youtubewithfooter";
-export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowLeftXl, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusMd, 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, Subcategory, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickMd, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };
+export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowLeftXl, 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, Closemini, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusMd, 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, Subcategory, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickMd, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };

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

@@ -26,11 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 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.FilterUp = exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ElSatis = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.DownloadMini = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.CreditCard = exports.Copy = exports.Completed = exports.Coffee = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkMd = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = void 0;
-exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.MoneyBig = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.ForwardMd = exports.Folder = exports.Flash = void 0;
-exports.Tick = exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Subcategory = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusMd = exports.PlusCircle = exports.PlusBig = exports.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = void 0;
-exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.TickMd = void 0;
-exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = void 0;
+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;
 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; } });
@@ -182,6 +182,8 @@ var CloseSquare_1 = __importDefault(require("./CloseSquare"));
 Object.defineProperty(exports, "CloseSquare", { enumerable: true, get: function () { return CloseSquare_1.default; } });
 var Closebig_1 = __importDefault(require("./Closebig"));
 Object.defineProperty(exports, "Closebig", { enumerable: true, get: function () { return Closebig_1.default; } });
+var Closemini_1 = __importDefault(require("./Closemini"));
+Object.defineProperty(exports, "Closemini", { enumerable: true, get: function () { return Closemini_1.default; } });
 var Coffee_1 = __importDefault(require("./Coffee"));
 Object.defineProperty(exports, "Coffee", { enumerable: true, get: function () { return Coffee_1.default; } });
 var Completed_1 = __importDefault(require("./Completed"));
@@ -863,6 +865,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Closebig_1.default, __assign({}, props));
     },
+    Closemini: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(Closemini_1.default, __assign({}, props));
+    },
     Coffee: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Coffee_1.default, __assign({}, props));

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

@@ -12,7 +12,7 @@ export interface Input {
     type?: HTMLInputTypeAttribute;
     name?: string;
     width?: string;
-    mask?: string;
+    mask?: string | string[];
     placeholder?: string;
     hasCopyButton?: boolean;
     isClearable?: boolean;
@@ -32,6 +32,8 @@ export interface Input {
     maxLength?: number;
     showMaxLengthCounter?: boolean;
     description?: string;
+    allowEmptyFormatting?: boolean;
+    valueIsNumericString?: boolean;
 }
 export interface InputStyledProps {
     disabled?: boolean;

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

@@ -416,3 +416,30 @@ export declare const WithMaxLengthAndDescription: {
         id: string;
     };
 };
+export declare const PercentageMask: {
+    name: string;
+    render: (args: any) => React.JSX.Element;
+    args: {
+        label: string;
+        placeholder: string;
+        format: string;
+        mask: string[];
+        allowEmptyFormatting: boolean;
+        valueIsNumericString: boolean;
+        id: string;
+    };
+};
+export declare const PercentageMaskWithValue: {
+    name: string;
+    render: (args: any) => React.JSX.Element;
+    args: {
+        label: string;
+        placeholder: string;
+        format: string;
+        mask: string[];
+        allowEmptyFormatting: boolean;
+        valueIsNumericString: boolean;
+        value: string;
+        id: string;
+    };
+};

package/dist/components/Input/stories/Input.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.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.Default = void 0;
+exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var Input_1 = __importDefault(require("../Input"));
@@ -464,3 +464,39 @@ exports.WithMaxLengthAndDescription = {
         id: "input_max_length_description",
     },
 };
+var normalizePercentageValue = function (formattedValue) {
+    if (formattedValue === void 0) { formattedValue = ''; }
+    return formattedValue.replace(/%/g, '').replace(/\D/g, '').slice(0, 2);
+};
+var InputPercentageMaskStory = function (args) {
+    var _a;
+    var _b = react_1.default.useState((_a = args.value) !== null && _a !== void 0 ? _a : ''), value = _b[0], setValue = _b[1];
+    return ((0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, args, { value: value, onChange: function (e) { return setValue(normalizePercentageValue(e.target.value)); } })));
+};
+exports.PercentageMask = {
+    name: 'Percentage Mask',
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InputPercentageMaskStory, __assign({}, args)); },
+    args: {
+        label: 'İndirim oranı',
+        placeholder: '',
+        format: '%##',
+        mask: ['', ''],
+        allowEmptyFormatting: true,
+        valueIsNumericString: true,
+        id: 'input_percentage_mask',
+    },
+};
+exports.PercentageMaskWithValue = {
+    name: 'Percentage Mask With Value',
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InputPercentageMaskStory, __assign({}, args)); },
+    args: {
+        label: 'İndirim oranı',
+        placeholder: '',
+        format: '%##',
+        mask: ['', ''],
+        allowEmptyFormatting: true,
+        valueIsNumericString: true,
+        value: '50',
+        id: 'input_percentage_mask_value',
+    },
+};

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

@@ -19,8 +19,10 @@ var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Badges_1 = __importDefault(require("../../../Badges"));
 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;
+    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 titleBadgeBelow = titleBadgePosition === "below";
+    var titleBadgeTopRight = titleBadgePosition === "topRight";
+    var hasContent = Boolean(content);
     var styledProps = {
         checked: checked,
         $disabled: disabled,
@@ -28,8 +30,12 @@ var Horizontal = function (props) {
         $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $labelOffset: labelOffset,
         $titleBadgeBelow: titleBadgeBelow,
+        $titleBadgeTopRight: titleBadgeTopRight,
+        $hasContent: hasContent,
+        $size: size,
     };
-    var titleBadge = hasTitleBadge && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.BadgesWrapper, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: titleBadgeLayout, title: titleBadgeText }) })));
-    return ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.HorizontalBoxStyled, __assign({}, styledProps, { children: (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] }))] })) })] }) }) })));
+    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 }))] })));
 };
 exports.default = Horizontal;

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { sizes } from "../../props";
+type IndicatorSize = (typeof sizes)[number];
 export type HorizontalStyledProps = {
     checked?: boolean;
     $disabled?: boolean;
@@ -6,6 +8,9 @@ export type HorizontalStyledProps = {
     $color?: string;
     $labelOffset?: string;
     $titleBadgeBelow?: boolean;
+    $titleBadgeTopRight?: boolean;
+    $hasContent?: boolean;
+    $size?: IndicatorSize;
 };
 export declare const HorizontalLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
 export declare const Inner: 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,9 +20,12 @@ export declare const LabelContent: import("styled-components/dist/types").IStyle
 export declare const LabelWrapper: 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 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 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;
 export declare const TotalLabel: 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 ContentArea: 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 HorizontalBoxStyled: 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 {};

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

@@ -7,24 +7,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HorizontalBoxStyled = exports.TotalLabel = exports.TotalPrice = exports.Price = exports.RightContent = exports.Description = 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.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");
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
-exports.HorizontalLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  cursor: inherit;\n"], ["\n  display: flex;\n  width: 100%;\n  align-items: center;\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: 0 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 0 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"])), devices_1.devices.sm);
+var getIndicatorSize = function (size) {
+    switch (size) {
+        case 'medium':
+            return '24px';
+        default:
+            return '16px';
+    }
+};
+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: 0 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: 0 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  flex: 0 0 auto;\n  width: auto;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex: 0 0 auto;\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: 16px;\n  height: 16px;\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: 16px;\n  height: 16px;\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"; });
+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.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.Description = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __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_10 || (templateObject_10 = __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_11 || (templateObject_11 = __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_12 || (templateObject_12 = __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_13 || (templateObject_13 = __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.HorizontalBoxStyled = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: block;\n\n  ", " {\n    border: ", ";\n    border-radius: 0.5rem;\n    height: 70px;\n    cursor: ", ";\n    background-color: ", ";\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    &:checked ~ ", " {\n      background-image: url('", "');\n    }\n\n    ", "\n  }\n"], ["\n  display: block;\n\n  ", " {\n    border: ", ";\n    border-radius: 0.5rem;\n    height: 70px;\n    cursor: ", ";\n    background-color: ", ";\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    &:checked ~ ", " {\n      background-image: url('", "');\n    }\n\n    ", "\n  }\n"])), exports.HorizontalLabel, function (props) { return props.$disabled ? 'var(--grey-10)' : props.checked ? '2px solid var(--primary)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$disabled ? 'var(--dark-opacity-3)' : 'white'; }, function (props) { return !props.checked && !props.$disabled && "\n      @media only screen and ".concat(devices_1.devices.lgUp, " {\n        &:hover {\n          border: 1px solid var(--primary);\n        }\n      }\n    "); }, 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;
+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: ", ";\n  border-radius: 0.5rem;\n  min-height: 70px;\n  height: ", ";\n  background-color: ", ";\n  box-sizing: border-box;\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: ", ";\n  border-radius: 0.5rem;\n  min-height: 70px;\n  height: ", ";\n  background-color: ", ";\n  box-sizing: border-box;\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(--grey-10)' : props.checked ? '2px solid var(--primary)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.checked && props.$hasContent ? 'auto' : '70px'; }, function (props) { return props.$disabled ? 'var(--dark-opacity-3)' : 'white'; }, function (props) { return !props.checked && !props.$disabled && "\n    @media only screen and ".concat(devices_1.devices.lgUp, " {\n      &:hover {\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;

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

@@ -39,8 +39,8 @@ interface RadioButton {
     hasTitleBadge?: boolean;
     titleBadgeLayout?: (typeof variants)[number];
     titleBadgeText?: string;
-    /** Title badge konumu — inline: başlığın yanında, below: başlığın altında */
-    titleBadgePosition?: "inline" | "below";
+    /** Title badge konumu — inline: başlığın yanında, below: başlığın altında, topRight: kartın sağ üstünde absolute */
+    titleBadgePosition?: "inline" | "below" | "topRight";
     hasPriceBadge?: boolean;
     priceBadgeLayout?: (typeof variants)[number];
     priceBadgeText?: string;

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

@@ -319,6 +319,24 @@ export declare const HorizontalTitleBadgeBelowWithDescription: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const HorizontalTitleBadgeTopRight: {
+    name: string;
+    args: {
+        label: string;
+        description: any;
+        valid: boolean;
+        layout: string;
+        hasTitleBadge: boolean;
+        titleBadgeLayout: string;
+        titleBadgeText: string;
+        titleBadgePosition: string;
+        hasPriceBadge: boolean;
+        checked: boolean;
+        showIndicator: boolean;
+        labelOffset: string;
+    };
+    render: (args: any) => import("react").JSX.Element;
+};
 export declare const HorizontalDisabled: {
     args: {
         label: string;
@@ -346,6 +364,19 @@ export declare const HorizontalDisabled: {
         };
     };
 };
+export declare const HorizontalWithContent: {
+    name: string;
+    args: {
+        label: string;
+        layout: string;
+        size: string;
+        checked: boolean;
+        showIndicator: boolean;
+        labelOffset: string;
+        content: import("react").JSX.Element;
+    };
+    render: (args: any) => import("react").JSX.Element;
+};
 export declare const HorizontalWithDangerBadge: {
     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.HorizontalDisabled = 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.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");
@@ -59,7 +59,7 @@ exports.default = {
         titleBadgeText: { control: "text" },
         titleBadgePosition: {
             control: "select",
-            options: ["inline", "below"],
+            options: ["inline", "below", "topRight"],
         },
         hasPriceBadge: { control: "boolean" },
         priceBadgeLayout: { control: "select", options: props_2.variants },
@@ -256,6 +256,24 @@ exports.HorizontalTitleBadgeBelowWithDescription = {
     name: "Horizontal — badge altta + açıklama",
     render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: "720px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" } }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { layout: "horizontal", label: "Esnek", description: "\u0130stedi\u011Fin zaman iptal", checked: true, showIndicator: true, labelOffset: "1rem" }), (0, jsx_runtime_1.jsx)(RadioButton_1.default, { layout: "horizontal", label: "Taahh\u00FCtl\u00FC", hasTitleBadge: true, titleBadgeLayout: "light", titleBadgeText: "Yeni", titleBadgePosition: "below", showIndicator: true, labelOffset: "1rem" })] }))); },
 };
+exports.HorizontalTitleBadgeTopRight = {
+    name: "Horizontal — title badge sağ üstte",
+    args: {
+        label: "Taahhütlü",
+        description: null,
+        valid: true,
+        layout: "horizontal",
+        hasTitleBadge: true,
+        titleBadgeLayout: "light",
+        titleBadgeText: "Yeni",
+        titleBadgePosition: "topRight",
+        hasPriceBadge: false,
+        checked: false,
+        showIndicator: true,
+        labelOffset: "1rem",
+    },
+    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.HorizontalDisabled = {
     args: {
         label: "Taksitli Ödeme",
@@ -283,6 +301,19 @@ exports.HorizontalDisabled = {
         }
     }
 };
+exports.HorizontalWithContent = {
+    name: "Horizontal — content (checked)",
+    args: {
+        label: "Bu ürünün varyantı yok",
+        layout: "horizontal",
+        size: "medium",
+        checked: true,
+        showIndicator: true,
+        labelOffset: "1rem",
+        content: ((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)" } })] }))] }))),
+    },
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, __assign({}, args)) }))); },
+};
 exports.HorizontalWithDangerBadge = {
     args: {
         label: "Taksitli Ödeme",

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

@@ -398,6 +398,10 @@ export declare const HorizontalInstallment: {
         gap: string;
     };
 };
+export declare const VariantPricing: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const AllRadioLayouts: {
     render: () => React.JSX.Element;
 };