krl-alfred 2.19.0 → 2.20.1

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

@@ -0,0 +1,90 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: ({ label, id, orientation, quantity, onIncrement, onDecrement, onRemove, hasRemove, hasLoading, hasError, errorText, hasDisableActions, hasDisableIncrement, }: import("../props").QuantitySelector) => React.JSX.Element;
+    tags: string[];
+    argTypes: {
+        orientation: {
+            control: string;
+            options: readonly ["horizontal", "vertical"];
+        };
+        hasRemove: {
+            control: string;
+        };
+        hasLoading: {
+            control: string;
+        };
+        hasError: {
+            control: string;
+        };
+        hasDisableActions: {
+            control: string;
+        };
+        hasDisableIncrement: {
+            control: string;
+        };
+        onIncrement: {
+            action: string;
+        };
+        onDecrement: {
+            action: string;
+        };
+        onRemove: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Horizontal: {
+    args: {
+        orientation: string;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};
+export declare const Vertical: {
+    args: {
+        orientation: string;
+        label: any;
+        quantity: number;
+        id: string;
+    };
+};
+export declare const WithRemove: {
+    args: {
+        orientation: string;
+        hasRemove: boolean;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};
+export declare const DisabledActions: {
+    args: {
+        orientation: string;
+        hasDisableActions: boolean;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};
+export declare const WithError: {
+    args: {
+        orientation: string;
+        hasError: boolean;
+        errorText: string;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};
+export declare const Loading: {
+    args: {
+        orientation: string;
+        hasLoading: boolean;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};

package/dist/components/QuantitySelector/stories/QuantitySelector.stories.js

@@ -0,0 +1,58 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.WithError = exports.DisabledActions = exports.WithRemove = exports.Vertical = exports.Horizontal = void 0;
+var QuantitySelector_1 = __importDefault(require("../QuantitySelector"));
+var props_1 = require("../props");
+exports.default = {
+    title: 'Components/QuantitySelector',
+    component: QuantitySelector_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        orientation: { control: 'select', options: props_1.orientations },
+        hasRemove: { control: 'boolean' },
+        hasLoading: { control: 'boolean' },
+        hasError: { control: 'boolean' },
+        hasDisableActions: { control: 'boolean' },
+        hasDisableIncrement: { control: 'boolean' },
+        onIncrement: { action: 'incremented' },
+        onDecrement: { action: 'decremented' },
+        onRemove: { action: 'removed' },
+    },
+};
+var defaultArgs = {
+    quantity: 10,
+    label: 'Miktar seç',
+    id: 'quantity-selector',
+};
+exports.Horizontal = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'horizontal' }),
+};
+exports.Vertical = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'vertical', label: null }),
+};
+exports.WithRemove = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'horizontal', hasRemove: true }),
+};
+exports.DisabledActions = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'horizontal', hasDisableActions: true, quantity: 1 }),
+};
+exports.WithError = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'vertical', hasError: true, errorText: 'Stokta yok' }),
+};
+exports.Loading = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'horizontal', hasLoading: true }),
+};

package/dist/components/RadioButton/layouts/basic/Basic.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioButtonProps } from "./../../props";
-declare const Basic: ({ value, checked, onChange, onClick, name, id, label, disabled, size, description, valid, labelOffset, hasNoneClick, color, alignment, textSize, verticalAlign, isWrapText, readOnly, showIndicator, }: RadioButtonProps) => React.JSX.Element;
+declare const Basic: ({ value, checked, onChange, onClick, name, id, label, disabled, size, description, valid, labelOffset, hasNoneClick, alignment, textSize, verticalAlign, isWrapText, readOnly, showIndicator, }: RadioButtonProps) => React.JSX.Element;
 export default Basic;

package/dist/components/RadioButton/layouts/basic/Basic.js

@@ -12,15 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("./../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Basic_styled_1 = require("./Basic.styled");
 var Basic = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, _b = _a.id, id = _b === void 0 ? props_1.BasicDefault.id : _b, label = _a.label, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, description = _a.description, _d = _a.valid, valid = _d === void 0 ? props_1.BasicDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BasicDefault.labelOffset : _e, _f = _a.hasNoneClick, hasNoneClick = _f === void 0 ? props_1.BasicDefault.hasNoneClick : _f, _g = _a.color, color = _g === void 0 ? props_1.BasicDefault.color : _g, _h = _a.alignment, alignment = _h === void 0 ? props_1.BasicDefault.alignment : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.BasicDefault.textSize : _j, _k = _a.verticalAlign, verticalAlign = _k === void 0 ? props_1.BasicDefault.verticalAlign : _k, isWrapText = _a.isWrapText, readOnly = _a.readOnly, _l = _a.showIndicator, showIndicator = _l === void 0 ? true : _l;
-    var _m = (0, react_1.useState)(color), inputColor = _m[0], setInputColor = _m[1];
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, _b = _a.id, id = _b === void 0 ? props_1.BasicDefault.id : _b, label = _a.label, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, description = _a.description, _d = _a.valid, valid = _d === void 0 ? props_1.BasicDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BasicDefault.labelOffset : _e, _f = _a.hasNoneClick, hasNoneClick = _f === void 0 ? props_1.BasicDefault.hasNoneClick : _f, _g = _a.alignment, alignment = _g === void 0 ? props_1.BasicDefault.alignment : _g, _h = _a.textSize, textSize = _h === void 0 ? props_1.BasicDefault.textSize : _h, _j = _a.verticalAlign, verticalAlign = _j === void 0 ? props_1.BasicDefault.verticalAlign : _j, isWrapText = _a.isWrapText, readOnly = _a.readOnly, _k = _a.showIndicator, showIndicator = _k === void 0 ? true : _k;
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -30,7 +26,7 @@ var Basic = function (_a) {
         $hasNoneClick: hasNoneClick,
         $isWrapText: isWrapText,
         $readOnly: readOnly,
-        $color: inputColor,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $alignment: alignment,
         $textSize: textSize,
         $verticalAlign: verticalAlign,

package/dist/components/RadioButton/layouts/boxed/Boxed.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioButtonProps } from "./../../props";
-declare const Boxed: ({ value, checked, onChange, onClick, name, label, disabled, description, image, hasBadge, badgeText, badgeVariant, labelSm, readOnly, id, size, valid, labelOffset, textSize, color, showIndicator, }: RadioButtonProps) => React.JSX.Element;
+declare const Boxed: ({ value, checked, onChange, onClick, name, label, disabled, description, image, hasBadge, badgeText, badgeVariant, labelSm, readOnly, id, size, valid, labelOffset, textSize, showIndicator, }: RadioButtonProps) => React.JSX.Element;
 export default Boxed;

package/dist/components/RadioButton/layouts/boxed/Boxed.js

@@ -15,16 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("./../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Boxed_styled_1 = require("./Boxed.styled");
 var Badges_1 = __importDefault(require("../../../Badges"));
 var Boxed = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, hasBadge = _a.hasBadge, badgeText = _a.badgeText, badgeVariant = _a.badgeVariant, labelSm = _a.labelSm, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
-    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, hasBadge = _a.hasBadge, badgeText = _a.badgeText, badgeVariant = _a.badgeVariant, labelSm = _a.labelSm, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.showIndicator, showIndicator = _g === void 0 ? true : _g;
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -32,7 +28,7 @@ var Boxed = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
-        $color: inputColor,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $textSize: textSize,
     };
     return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({ htmlFor: id }, styledProps, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, readOnly: readOnly }), showIndicator && (0, jsx_runtime_1.jsx)(Boxed_styled_1.Indicator, __assign({}, styledProps)), (label || description || image) && ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.LabelsWrapper, __assign({}, styledProps, { children: [label && ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.LabelText, __assign({ htmlFor: id }, { children: [label, labelSm && (0, jsx_runtime_1.jsx)(Boxed_styled_1.LabelSm, { children: labelSm })] }))), description && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.DescriptionText, __assign({ htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.ImageLabel, __assign({ htmlFor: id }, { children: image })))] }))), hasBadge && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.BoxedBadgesWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "belt", variant: badgeVariant, hasResponsive: true }) }))] })));

package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { RadioButtonProps } from "./../../props";
-declare const BoxedMd: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, color, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
+declare const BoxedMd: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
 export default BoxedMd;

package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.js

@@ -12,15 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("./../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var BoxedMd_styled_1 = require("./BoxedMd.styled");
 var BoxedMd = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
-    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.showIndicator, showIndicator = _g === void 0 ? true : _g;
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -28,7 +24,7 @@ var BoxedMd = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
-        $color: inputColor,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $textSize: textSize,
         $showIndicator: showIndicator,
     };

package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { RadioButtonProps } from "./../../props";
-declare const BoxedSm: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, color, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
+declare const BoxedSm: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
 export default BoxedSm;

package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.js

@@ -12,15 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("./../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var BoxedSm_styled_1 = require("./BoxedSm.styled");
 var BoxedSm = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
-    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.showIndicator, showIndicator = _g === void 0 ? true : _g;
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -28,7 +24,7 @@ var BoxedSm = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
-        $color: inputColor,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $textSize: textSize,
         $showIndicator: showIndicator,
     };

package/dist/components/RadioButton/layouts/boxedWithIcon/BoxedWithIcon.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioButtonProps } from "../../props";
-declare const BoxedWithIcon: ({ value, checked, onChange, onClick, name, label, disabled, readOnly, id, size, valid, labelOffset, color, textSize, iconName, iconColor, content }: RadioButtonProps) => React.JSX.Element;
+declare const BoxedWithIcon: ({ value, checked, onChange, onClick, name, label, disabled, readOnly, id, size, valid, labelOffset, textSize, iconName, iconColor, content }: RadioButtonProps) => React.JSX.Element;
 export default BoxedWithIcon;

package/dist/components/RadioButton/layouts/boxedWithIcon/BoxedWithIcon.js

@@ -15,19 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var BoxedWithIcon_styled_1 = require("./BoxedWithIcon.styled");
 var BoxedWithIcon = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedWithIconDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedWithIconDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedWithIconDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedWithIconDefault.labelOffset : _e, _f = _a.color, color = _f === void 0 ? props_1.BoxedWithIconDefault.color : _f, _g = _a.textSize, textSize = _g === void 0 ? "medium" : _g, iconName = _a.iconName, iconColor = _a.iconColor, content = _a.content;
-    var _h = (0, react_1.useState)(color), inputColor = _h[0], setInputColor = _h[1];
-    (0, react_1.useEffect)(function () {
-        var primaryColor = typeof window !== "undefined"
-            ? window.getComputedStyle(document.body).getPropertyValue("--primary").trim() || "#9763F6"
-            : "#9763F6";
-        setInputColor(color || primaryColor);
-    }, [color]);
-    return ((0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.BoxedWithIconStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$readOnly": readOnly, "$color": inputColor }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, readOnly: readOnly }), (0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.ContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.Header, { children: [iconName && ((0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: iconName, color: iconColor, hasWrapper: false, width: "32", height: "32" }) })), label && (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Indicator, { "$disabled": disabled, "$valid": valid })] }), content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Separator, {}), (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Content, { children: content })] }))] })] })));
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedWithIconDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedWithIconDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedWithIconDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedWithIconDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? "medium" : _f, iconName = _a.iconName, iconColor = _a.iconColor, content = _a.content;
+    return ((0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.BoxedWithIconStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$readOnly": readOnly, "$color": (0, getRootCssVariable_1.getRadioPrimaryColor)() }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, readOnly: readOnly }), (0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.ContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.Header, { children: [iconName && ((0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: iconName, color: iconColor, hasWrapper: false, width: "32", height: "32" }) })), label && (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Indicator, { "$disabled": disabled, "$valid": valid })] }), content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Separator, {}), (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Content, { children: content })] }))] })] })));
 };
 exports.default = BoxedWithIcon;

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

@@ -15,16 +15,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 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 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, color = props.color, _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;
     var titleBadgeBelow = titleBadgePosition === "below";
     var styledProps = {
         checked: checked,
         $disabled: disabled,
         $valid: valid,
-        $color: color,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $labelOffset: labelOffset,
         $titleBadgeBelow: titleBadgeBelow,
     };

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 }: 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, }: RadioGroupProps) => React.JSX.Element;
 export default RadioGroup;

package/dist/components/RadioGroup/RadioGroup.js

@@ -21,13 +21,13 @@ 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;
+    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 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 }, { children: options.map(function (option, index) {
+    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 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, showIndicator: showIndicator, titleBadgePosition: option.titleBadgePosition, hasTitleBadge: option.hasTitleBadge, titleBadgeLayout: option.titleBadgeLayout, titleBadgeText: option.titleBadgeText }, radioId));

package/dist/components/RadioGroup/RadioGroup.styled.js

@@ -9,14 +9,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupStyled = exports.RadioButtonsWrapper = exports.InfoText = exports.InfoIconWrapper = exports.InfoArea = exports.GroupLabel = exports.GroupLabelWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
 exports.GroupLabelWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    margin-bottom: ", ";\n"], ["\n    display: flex;\n    margin-bottom: ", ";\n"])), function (props) { return props.$emphasizedLabel ? "0.5rem" : "1rem"; });
 exports.GroupLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0;\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"])));
 exports.InfoArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0 0;\n    margin-bottom: 1rem;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0 0;\n    margin-bottom: 1rem;\n"])));
 exports.InfoIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--dark-opacity-50);\n"], ["\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--dark-opacity-50);\n"])));
 exports.InfoText = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: 0;\n    flex: 1;\n    font: var(--caption-medium-12-15);\n    color: var(--dark-opacity-50);\n"], ["\n    margin: 0;\n    flex: 1;\n    font: var(--caption-medium-12-15);\n    color: var(--dark-opacity-50);\n"])));
 exports.RadioButtonsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    gap: ", ";\n    width: 100%;\n\n    ", "\n"], ["\n    gap: ", ";\n    width: 100%;\n\n    ", "\n"])), function (props) { return props.$gap || "0.5rem"; }, function (props) { return props.$gridColumnLength
-    ? "\n        display: grid;\n        grid-template-columns: repeat(".concat(props.$gridColumnLength, ", minmax(0, 1fr));\n    ")
-    : "\n        display: flex;\n        flex-direction: ".concat(props.$layout === "horizontal" ? "row" : "column", ";\n        flex-wrap: ").concat(props.$layout === "horizontal" ? "wrap" : "nowrap", ";\n        ").concat(props.$isFilled
+    ? "\n        display: grid;\n        grid-template-columns: repeat(".concat(props.$gridColumnLength, ", minmax(0, 1fr));\n        ").concat(props.$isHorizontalOnMobile
+        ? "\n        @media only screen and ".concat(devices_1.devices.md, " {\n            grid-template-columns: 1fr;\n        }\n        ")
+        : "", "\n    ")
+    : "\n        display: flex;\n        ".concat(props.$isHorizontalOnMobile && props.$layout === "horizontal"
+        ? "\n        flex-direction: row;\n        flex-wrap: wrap;\n        @media only screen and ".concat(devices_1.devices.md, " {\n            flex-direction: column;\n            flex-wrap: nowrap;\n        }\n        ")
+        : "\n        flex-direction: ".concat(props.$layout === "horizontal" ? "row" : "column", ";\n        flex-wrap: ").concat(props.$layout === "horizontal" ? "wrap" : "nowrap", ";\n        "), "\n        ").concat(props.$isFilled
         ? "\n            > * {\n                flex: 1 1 0;\n            }\n        "
         : "", "\n    "); });
 exports.RadioGroupStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n"], ["\n    display: flex;\n    flex-direction: column;\n"])));

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

@@ -49,6 +49,8 @@ export interface RadioGroup {
     infoIcon?: string;
     /** Satır başına sütun sayısı — verildiğinde flex yerine grid kullanılır */
     gridColumnLength?: number;
+    /** Mobilde layout uyarlaması: flex vertical → row; grid → tek sütun (alt alta) */
+    isHorizontalOnMobile?: boolean;
 }
 export declare const RadioGroupDefault: RadioGroup;
 export interface RadioGroupStyledProps {
@@ -57,6 +59,7 @@ export interface RadioGroupStyledProps {
     $isFilled?: boolean;
     $emphasizedLabel?: boolean;
     $gridColumnLength?: number;
+    $isHorizontalOnMobile?: boolean;
 }
 export type RadioGroupProps = typeof RadioGroupDefault;
 export {};

package/dist/components/RadioGroup/props.js

@@ -28,5 +28,6 @@ exports.RadioGroupDefault = {
     hasInfo: false,
     infoText: null,
     infoIcon: "InfoSquare",
-    gridColumnLength: undefined
+    gridColumnLength: undefined,
+    isHorizontalOnMobile: 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 }: 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, }: import("../props").RadioGroup) => React.JSX.Element;
     tags: string[];
     argTypes: {
         layout: {
@@ -49,6 +49,9 @@ declare const _default: {
             min: number;
             max: number;
         };
+        isHorizontalOnMobile: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -86,6 +89,24 @@ export declare const WithoutIndicator: {
         textSize: string;
     };
 };
+export declare const VerticalHorizontalOnMobile: {
+    args: {
+        layout: string;
+        isHorizontalOnMobile: boolean;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        name: string;
+        label: string;
+        value: string;
+        onChange: (value: any) => void;
+        radioLayout: string;
+        size: string;
+        textSize: string;
+        showIndicator: boolean;
+    };
+};
 export declare const Horizontal: {
     args: {
         name: string;
@@ -240,6 +261,25 @@ export declare const GridTwoColumns: {
     };
     render: (args: any) => React.JSX.Element;
 };
+export declare const GridStackedOnMobile: {
+    args: {
+        isHorizontalOnMobile: boolean;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        name: string;
+        label: string;
+        value: string;
+        onChange: (value: any) => void;
+        radioLayout: string;
+        size: string;
+        gridColumnLength: number;
+        gap: string;
+        showIndicator: boolean;
+    };
+    render: (args: any) => React.JSX.Element;
+};
 export declare const ColorPicker: {
     args: {
         name: string;

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.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.WithoutIndicator = exports.Default = void 0;
+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 RadioGroup_1 = __importDefault(require("../RadioGroup"));
 var props_1 = require("../props");
@@ -36,6 +36,7 @@ exports.default = {
         infoText: { control: 'text' },
         infoIcon: { control: 'text' },
         gridColumnLength: { control: 'number', min: 1, max: 6 },
+        isHorizontalOnMobile: { control: 'boolean' },
     }
 };
 exports.Default = {
@@ -59,6 +60,14 @@ exports.Default = {
 exports.WithoutIndicator = {
     args: __assign(__assign({}, exports.Default.args), { showIndicator: false }),
 };
+exports.VerticalHorizontalOnMobile = {
+    args: __assign(__assign({}, exports.Default.args), { layout: "vertical", isHorizontalOnMobile: true, options: [
+            { label: "Option 1", value: "option1" },
+            { label: "Option 2", value: "option2" },
+            { label: "Option 3", value: "option3" },
+            { label: "Option 4", value: "option4" },
+        ] }),
+};
 exports.Horizontal = {
     args: {
         name: "horizontalRadioGroup",
@@ -204,6 +213,15 @@ exports.GridTwoColumns = {
     },
     render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, __assign({}, args)) }))); },
 };
+exports.GridStackedOnMobile = {
+    args: __assign(__assign({}, exports.GridTwoColumns.args), { isHorizontalOnMobile: true, options: [
+            { label: "Esnek", value: "flexible" },
+            { label: "Taahhütlü", value: "committed" },
+            { label: "Seçenek 3", value: "option3" },
+            { label: "Seçenek 4", value: "option4" },
+        ] }),
+    render: exports.GridTwoColumns.render,
+};
 exports.ColorPicker = {
     args: {
         name: "colorRadioGroup",