krl-alfred 2.23.17 → 2.23.19

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CheckboxProps } from "./props";
-declare const Checkbox: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, textSize, verticalAlign, required, readOnly, }: CheckboxProps) => import("react").JSX.Element;
+declare const Checkbox: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, textSize, verticalAlign, required, readOnly, isCheckable, variant, }: CheckboxProps) => import("react").JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -16,9 +16,16 @@ var props_1 = require("./props");
 var Checkbox_styled_1 = require("./Checkbox.styled");
 var react_i18next_1 = require("react-i18next");
 var getRootCssVariable_1 = require("../../utils/getRootCssVariable");
+var getCheckedColor = function (variant) {
+    if (variant === "success") {
+        return (0, getRootCssVariable_1.getRootCssVariable)("--green", "#0FDF7B");
+    }
+    return (0, getRootCssVariable_1.getPrimaryColor)();
+};
 var Checkbox = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.textSize, textSize = _m === void 0 ? props_1.CheckboxDefault.textSize : _m, _o = _a.verticalAlign, verticalAlign = _o === void 0 ? props_1.CheckboxDefault.verticalAlign : _o, _p = _a.required, required = _p === void 0 ? props_1.CheckboxDefault.required : _p, _q = _a.readOnly, readOnly = _q === void 0 ? props_1.CheckboxDefault.readOnly : _q;
+    var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.textSize, textSize = _m === void 0 ? props_1.CheckboxDefault.textSize : _m, _o = _a.verticalAlign, verticalAlign = _o === void 0 ? props_1.CheckboxDefault.verticalAlign : _o, _p = _a.required, required = _p === void 0 ? props_1.CheckboxDefault.required : _p, _q = _a.readOnly, readOnly = _q === void 0 ? props_1.CheckboxDefault.readOnly : _q, _r = _a.isCheckable, isCheckable = _r === void 0 ? props_1.CheckboxDefault.isCheckable : _r, _s = _a.variant, variant = _s === void 0 ? props_1.CheckboxDefault.variant : _s;
     var t = (0, react_i18next_1.useTranslation)().t;
+    var checkedColor = getCheckedColor(variant);
     var styledProps = {
         disabled: disabled,
         checked: checked,
@@ -26,9 +33,12 @@ var Checkbox = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $color: (0, getRootCssVariable_1.getPrimaryColor)(),
+        $checkedColor: checkedColor,
+        $variant: variant,
         $textSize: textSize,
         $verticalAlign: verticalAlign,
         $required: required,
+        $isCheckable: isCheckable,
     };
     return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxWrapper, __assign({ htmlFor: id }, styledProps, { children: [(0, jsx_runtime_1.jsx)(Checkbox_styled_1.CheckboxInput, __assign({}, styledProps, { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, readOnly: readOnly })), (0, jsx_runtime_1.jsx)(Checkbox_styled_1.CheckboxIndicator, __assign({}, styledProps)), label && ((0, jsx_runtime_1.jsx)(Checkbox_styled_1.LabelsWrapper, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxLabel, __assign({}, styledProps, { htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
 };

package/dist/components/Checkbox/Checkbox.styled.js

@@ -45,12 +45,18 @@ var getUncheckedBackground = function (props) {
     return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }));
 };
 var getCheckedBackground = function (props) {
-    return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color, name: "CheckboxElementChecked" }));
+    return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$checkedColor || props.$color, name: "CheckboxElementChecked" }));
 };
-exports.CheckboxWrapper = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"], ["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"])), function (props) { return props.$verticalAlign; }, function (props) { return props.disabled ? 'default' : 'pointer'; });
-exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"], ["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"])), function (props) { return getUncheckedBackground(props); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return props.disabled ? 'default' : 'pointer'; });
+var getCheckboxCursor = function (props) {
+    if (props.disabled || props.$isCheckable === false) {
+        return 'default';
+    }
+    return 'pointer';
+};
+exports.CheckboxWrapper = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"], ["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"])), function (props) { return props.$verticalAlign; }, function (props) { return getCheckboxCursor(props); });
+exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"], ["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"])), function (props) { return getUncheckedBackground(props); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getCheckboxCursor(props); });
 exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        background-image: url('", "');\n    }\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        background-image: url('", "');\n    }\n"])), exports.CheckboxIndicator, function (props) { return getCheckedBackground(props); });
-exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"], ["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, function (props) {
+exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"], ["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"])), function (props) { return getCheckboxCursor(props); }, function (props) {
     if (props.disabled)
         return 'var(--dark-opacity-25)';
     return props.$valid ? 'var(--dark)' : 'var(--red)';

package/dist/components/Checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Checkbox/Checkbox.test.js

@@ -0,0 +1,38 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var Checkbox_1 = __importDefault(require("./Checkbox"));
+var props_1 = require("./props");
+var renderCheckbox = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Checkbox_1.default, __assign({}, props_1.CheckboxDefault, { id: "checkbox-test", label: "Se\u00E7enek" }, props)));
+};
+describe('Checkbox', function () {
+    it('uses pointer cursor by default', function () {
+        var container = renderCheckbox().container;
+        expect(container.querySelector('label')).toHaveStyle({ cursor: 'pointer' });
+    });
+    it('uses default cursor when isCheckable is false', function () {
+        var container = renderCheckbox({ isCheckable: false }).container;
+        expect(container.querySelector('label')).toHaveStyle({ cursor: 'default' });
+    });
+    it('renders success variant when checked', function () {
+        renderCheckbox({ variant: 'success', checked: true });
+        expect(react_1.screen.getByText('Seçenek')).toBeInTheDocument();
+    });
+});

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

@@ -1,8 +1,10 @@
 import React from "react";
 export declare const sizes: string[];
 export declare const textSizes: string[];
+export declare const variants: readonly ["default", "success"];
 type SIZES = (typeof sizes)[number];
 type TEXTSIZES = (typeof textSizes)[number];
+type VARIANT = (typeof variants)[number];
 export interface Checkbox {
     disabled?: boolean;
     value?: any;
@@ -19,6 +21,9 @@ export interface Checkbox {
     verticalAlign?: string;
     required?: boolean;
     readOnly?: boolean;
+    /** false ise tıklanabilir görünüm (pointer cursor) kapalı kalır */
+    isCheckable?: boolean;
+    variant?: VARIANT;
 }
 export interface CheckboxStyledProps {
     $labelOffset?: string;
@@ -35,6 +40,9 @@ export interface CheckboxStyledProps {
     $color?: string;
     $verticalAlign?: string;
     $required?: boolean;
+    $isCheckable?: boolean;
+    $variant?: VARIANT;
+    $checkedColor?: string;
 }
 export declare const CheckboxDefault: Checkbox;
 export type CheckboxProps = typeof CheckboxDefault;

package/dist/components/Checkbox/props.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxDefault = exports.textSizes = exports.sizes = void 0;
+exports.CheckboxDefault = exports.variants = exports.textSizes = exports.sizes = void 0;
 exports.sizes = ["small", "medium", "large"];
 exports.textSizes = ["small", "medium", "large", "xlarge"];
+exports.variants = ["default", "success"];
 exports.CheckboxDefault = {
     disabled: false,
     value: undefined,
@@ -18,5 +19,7 @@ exports.CheckboxDefault = {
     labelOffset: "0.5rem",
     color: null,
     verticalAlign: "center",
-    required: true
+    required: true,
+    isCheckable: true,
+    variant: "default",
 };

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

@@ -30,6 +30,13 @@ declare const _default: {
         readOnly: {
             control: string;
         };
+        isCheckable: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: readonly ["default", "success"];
+        };
         labelOffset: {
             control: string;
         };
@@ -133,6 +140,65 @@ export declare const DisabledChecked: {
         onChange: (e: any) => void;
     };
 };
+export declare const NotCheckable: {
+    name: string;
+    args: {
+        isCheckable: boolean;
+        checked: boolean;
+        id: string;
+        label: string;
+        valid: boolean;
+        disabled: boolean;
+        required: boolean;
+        readOnly: boolean;
+        size: string;
+        textSize: string;
+        labelOffset: string;
+        verticalAlign: string;
+        name: string;
+        value: string;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Success: {
+    args: {
+        variant: string;
+        checked: boolean;
+        label: string;
+        id: string;
+        valid: boolean;
+        disabled: boolean;
+        required: boolean;
+        readOnly: boolean;
+        size: string;
+        textSize: string;
+        labelOffset: string;
+        verticalAlign: string;
+        name: string;
+        value: string;
+        onChange: (e: any) => void;
+    };
+};
+export declare const SuccessUnchecked: {
+    name: string;
+    args: {
+        variant: string;
+        checked: boolean;
+        label: string;
+        id: string;
+        valid: boolean;
+        disabled: boolean;
+        required: boolean;
+        readOnly: boolean;
+        size: string;
+        textSize: string;
+        labelOffset: string;
+        verticalAlign: string;
+        name: string;
+        value: string;
+        onChange: (e: any) => void;
+    };
+};
 export declare const Invalid: {
     args: {
         valid: boolean;

package/dist/components/Checkbox/stories/Checkbox.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.Complete = exports.Interactive = exports.AllTextSizes = exports.AllSizes = exports.LongLabel = exports.WithHtmlLabel = exports.WithoutLabel = exports.VerticalAlignStart = exports.CustomLabelOffset = exports.TextSizeXlarge = exports.TextSizeLarge = exports.Large = exports.Medium = exports.Small = exports.ReadOnly = exports.OptionalChecked = exports.Optional = exports.InvalidChecked = exports.Invalid = exports.DisabledChecked = exports.Disabled = exports.Unchecked = exports.Checked = exports.Default = void 0;
+exports.Complete = exports.Interactive = exports.AllTextSizes = exports.AllSizes = exports.LongLabel = exports.WithHtmlLabel = exports.WithoutLabel = exports.VerticalAlignStart = exports.CustomLabelOffset = exports.TextSizeXlarge = exports.TextSizeLarge = exports.Large = exports.Medium = exports.Small = exports.ReadOnly = exports.OptionalChecked = exports.Optional = exports.InvalidChecked = exports.Invalid = exports.SuccessUnchecked = exports.Success = exports.NotCheckable = exports.DisabledChecked = exports.Disabled = exports.Unchecked = exports.Checked = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var Checkbox_1 = __importDefault(require("../Checkbox"));
@@ -48,6 +48,8 @@ exports.default = {
         valid: { control: "boolean" },
         required: { control: "boolean" },
         readOnly: { control: "boolean" },
+        isCheckable: { control: "boolean" },
+        variant: { control: "select", options: props_1.variants },
         labelOffset: { control: "text" },
         verticalAlign: {
             control: "select",
@@ -71,6 +73,17 @@ exports.Disabled = {
 exports.DisabledChecked = {
     args: __assign(__assign({}, baseArgs), { disabled: true, checked: true, id: "check_disabled_checked" }),
 };
+exports.NotCheckable = {
+    name: "Not checkable (isCheckable: false)",
+    args: __assign(__assign({}, baseArgs), { isCheckable: false, checked: true, id: "check_not_checkable" }),
+};
+exports.Success = {
+    args: __assign(__assign({}, baseArgs), { variant: "success", checked: true, label: "Onaylandı", id: "check_success" }),
+};
+exports.SuccessUnchecked = {
+    name: "Success — unchecked",
+    args: __assign(__assign({}, baseArgs), { variant: "success", checked: false, label: "Onay bekliyor", id: "check_success_unchecked" }),
+};
 exports.Invalid = {
     args: __assign(__assign({}, baseArgs), { valid: false, id: "check_invalid" }),
 };

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, 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, isCheckable, showIndicator, }: RadioButtonProps) => React.JSX.Element;
 export default Basic;

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

@@ -15,8 +15,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./../../props");
 var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Basic_styled_1 = require("./Basic.styled");
+var radioInteraction_1 = require("../../utils/radioInteraction");
 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.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 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.isCheckable, isCheckable = _k === void 0 ? true : _k, _l = _a.showIndicator, showIndicator = _l === void 0 ? true : _l;
+    var inputInteraction = (0, radioInteraction_1.getRadioInputInteractionProps)({
+        isCheckable: isCheckable,
+        readOnly: readOnly,
+        onChange: onChange,
+        onClick: onClick,
+    });
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -26,11 +33,12 @@ var Basic = function (_a) {
         $hasNoneClick: hasNoneClick,
         $isWrapText: isWrapText,
         $readOnly: readOnly,
+        $isCheckable: isCheckable,
         $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $alignment: alignment,
         $textSize: textSize,
         $verticalAlign: verticalAlign,
     };
-    return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id }, styledProps, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), showIndicator && (0, jsx_runtime_1.jsx)(Basic_styled_1.Indicator, __assign({}, styledProps)), (label || description) && ((0, jsx_runtime_1.jsxs)(Basic_styled_1.LabelsWrapper, __assign({}, styledProps, { children: [label && ((0, jsx_runtime_1.jsx)(Basic_styled_1.LabelText, __assign({ htmlFor: id }, styledProps, { children: label }))), description && ((0, jsx_runtime_1.jsx)(Basic_styled_1.DescriptionText, __assign({ htmlFor: id }, { children: description })))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), styledProps, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked }, inputInteraction)), showIndicator && (0, jsx_runtime_1.jsx)(Basic_styled_1.Indicator, __assign({}, styledProps)), (label || description) && ((0, jsx_runtime_1.jsxs)(Basic_styled_1.LabelsWrapper, __assign({}, styledProps, { children: [label && ((0, jsx_runtime_1.jsx)(Basic_styled_1.LabelText, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), styledProps, { children: label }))), description && ((0, jsx_runtime_1.jsx)(Basic_styled_1.DescriptionText, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), { children: description })))] })))] })));
 };
 exports.default = Basic;

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

@@ -12,6 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
+var radioInteraction_1 = require("../../utils/radioInteraction");
 exports.Indicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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;\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;\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.$alignment === "vertical" ? "0.5rem" : props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) {
     switch (props.$size) {
         case 'xsmall':
@@ -35,7 +36,7 @@ exports.Indicator = styled_components_1.default.div(templateObject_1 || (templat
             return "16px";
     }
 });
-exports.LabelsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: grid;\n  row-gap: 8px;\n  cursor: ", ";\n  margin: 0;\n  padding: ", ";\n  color: ", ";\n  ", "\n"], ["\n  position: relative;\n  display: grid;\n  row-gap: 8px;\n  cursor: ", ";\n  margin: 0;\n  padding: ", ";\n  color: ", ";\n  ", "\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$verticalAlign === "flex-start" ? "5px 0 0 0" : "0"; }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return !props.$isWrapText && "\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    word-break: break-word;\n    display: -webkit-inline-box;\n  "; });
+exports.LabelsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: grid;\n  row-gap: 8px;\n  cursor: ", ";\n  margin: 0;\n  padding: ", ";\n  color: ", ";\n  ", "\n"], ["\n  position: relative;\n  display: grid;\n  row-gap: 8px;\n  cursor: ", ";\n  margin: 0;\n  padding: ", ";\n  color: ", ";\n  ", "\n"])), function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return props.$verticalAlign === "flex-start" ? "5px 0 0 0" : "0"; }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return !props.$isWrapText && "\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    word-break: break-word;\n    display: -webkit-inline-box;\n  "; });
 exports.LabelText = styled_components_1.default.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  cursor: inherit;\n  font: ", ";\n"], ["\n  display: block;\n  cursor: inherit;\n  font: ", ";\n"])), function (props) {
     switch (props.$textSize) {
         case 'small':
@@ -49,5 +50,5 @@ exports.LabelText = styled_components_1.default.label(templateObject_3 || (templ
     }
 });
 exports.DescriptionText = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  cursor: inherit;\n  font: var(--body-medium-14-17);\n  color: var(--grey-50);\n"], ["\n  display: block;\n  margin: 0;\n  cursor: inherit;\n  font: var(--body-medium-14-17);\n  color: var(--grey-50);\n"])));
-exports.BasicStyled = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items:", ";\n  justify-content: ", ";\n  cursor: pointer;\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  position: relative;\n  display: flex;\n  align-items:", ";\n  justify-content: ", ";\n  cursor: pointer;\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"])), function (props) { return props.$verticalAlign; }, function (props) { return props.$alignment === "vertical" ? "center" : "flex-start"; }, function (props) { return props.$alignment === "vertical" && "\n    flex-direction: column-reverse;\n    text-align: center;\n  "; }, function (props) { return props.$hasNoneClick && "\n    user-select:none;\n    pointer-events:none;\n  "; }, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); });
+exports.BasicStyled = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items:", ";\n  justify-content: ", ";\n  cursor:   ", ";\n  ", "\n  ", "\n  ", "\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " {\n      background-image:url('", "');\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items:", ";\n  justify-content: ", ";\n  cursor:   ", ";\n  ", "\n  ", "\n  ", "\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " {\n      background-image:url('", "');\n    }\n  }\n"])), function (props) { return props.$verticalAlign; }, function (props) { return props.$alignment === "vertical" ? "center" : "flex-start"; }, function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, function (props) { return props.$alignment === "vertical" && "\n    flex-direction: column-reverse;\n    text-align: center;\n  "; }, function (props) { return props.$hasNoneClick && "\n    user-select:none;\n    pointer-events:none;\n  "; }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

@@ -19,8 +19,15 @@ 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 radioInteraction_1 = require("../../utils/radioInteraction");
 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.showIndicator, showIndicator = _g === void 0 ? true : _g;
+    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, _h = _a.isCheckable, isCheckable = _h === void 0 ? true : _h;
+    var inputInteraction = (0, radioInteraction_1.getRadioInputInteractionProps)({
+        isCheckable: isCheckable,
+        readOnly: readOnly,
+        onChange: onChange,
+        onClick: onClick,
+    });
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -28,9 +35,10 @@ var Boxed = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
+        $isCheckable: isCheckable,
         $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 }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), styledProps, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked }, inputInteraction)), 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({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, 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({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), { children: description }))), image && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.ImageLabel, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, 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 }) }))] })));
 };
 exports.default = Boxed;

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

@@ -12,6 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
+var radioInteraction_1 = require("../../utils/radioInteraction");
 var devices_1 = require("../../../../constants/devices");
 exports.Indicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: absolute;\n  left: 12px;\n  top: 12px;\n  margin: ", ";\n  width: ", ";\n  height: ", ";\n"], ["\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: absolute;\n  left: 12px;\n  top: 12px;\n  margin: ", ";\n  width: ", ";\n  height: ", ";\n"])), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.$size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
     switch (props.$size) {
@@ -32,11 +33,11 @@ exports.Indicator = styled_components_1.default.div(templateObject_1 || (templat
             return "16px";
     }
 });
-exports.LabelsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0;\n  display: grid;\n  text-align: center;\n\n  @media only screen and ", " {\n    row-gap: 4px;\n  }\n"], ["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0;\n  display: grid;\n  text-align: center;\n\n  @media only screen and ", " {\n    row-gap: 4px;\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, devices_1.devices.lg);
+exports.LabelsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0;\n  display: grid;\n  text-align: center;\n\n  @media only screen and ", " {\n    row-gap: 4px;\n  }\n"], ["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0;\n  display: grid;\n  text-align: center;\n\n  @media only screen and ", " {\n    row-gap: 4px;\n  }\n"])), function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, devices_1.devices.lg);
 exports.LabelText = styled_components_1.default.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  margin: 0 0 4px 0;\n  vertical-align: middle;\n  cursor: pointer;\n  font:var(--title-bold-16-19);\n\n  @media only screen and ", " {\n    margin: 0;\n  }\n"], ["\n  display: block;\n  margin: 0 0 4px 0;\n  vertical-align: middle;\n  cursor: pointer;\n  font:var(--title-bold-16-19);\n\n  @media only screen and ", " {\n    margin: 0;\n  }\n"])), devices_1.devices.lg);
 exports.LabelSm = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font:var(--body-regular-14-17);\n  margin-left: 0.25rem;\n"], ["\n  font:var(--body-regular-14-17);\n  margin-left: 0.25rem;\n"])));
 exports.DescriptionText = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  vertical-align: middle;\n  margin: 0;\n  cursor: pointer;\n  font:var(--body-regular-14-17);\n\n  @media only screen and ", " {\n    margin: 0 0 0 4px;\n  }\n"], ["\n  display: block;\n  vertical-align: middle;\n  margin: 0;\n  cursor: pointer;\n  font:var(--body-regular-14-17);\n\n  @media only screen and ", " {\n    margin: 0 0 0 4px;\n  }\n"])), devices_1.devices.lg);
 exports.ImageLabel = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n"], ["\n  display: block;\n  cursor: pointer;\n"])));
 exports.BoxedBadgesWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: -9px;\n  top: -8px;\n  transform: rotate(90deg);\n\n  @media only screen and ", " {\n    right: -6px;\n    top: -6px;\n  }\n"], ["\n  position: absolute;\n  right: -9px;\n  top: -8px;\n  transform: rotate(90deg);\n\n  @media only screen and ", " {\n    right: -6px;\n    top: -6px;\n  }\n"])), devices_1.devices.lg);
-exports.BoxedStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: ", ";\n\n  @media only screen and ", " {\n    height: 69px;\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    &:checked ", " {\n      ~ ", " {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 0.5rem;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n\n    &:checked {\n      ~ ", " {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n\n    ", "\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: ", ";\n\n  @media only screen and ", " {\n    height: 69px;\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    &:checked ", " {\n      ~ ", " {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 0.5rem;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n\n    &:checked {\n      ~ ", " {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n\n    ", "\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, devices_1.devices.lg, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); }, function (props) { return !props.$readOnly && " , &:hover"; }, exports.LabelsWrapper, exports.LabelsWrapper, function (props) { return !props.$readOnly && " \n      &:hover {\n        ~ ".concat(exports.LabelsWrapper, " {\n          &:before {\n            border: 1px solid var(--primary-hover);\n          }\n        }\n      }\n    "); });
+exports.BoxedStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: ", ";\n  ", "\n\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " {\n      background-image:url('", "');\n    }\n\n    &:checked ", " {\n      ~ ", " {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 0.5rem;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n\n    &:checked {\n      ~ ", " {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n\n    ", "\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: ", ";\n  ", "\n\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " {\n      background-image:url('", "');\n    }\n\n    &:checked ", " {\n      ~ ", " {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 0.5rem;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n\n    &:checked {\n      ~ ", " {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n\n    ", "\n  }\n"])), function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, devices_1.devices.lg, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); }, function (props) { return (0, radioInteraction_1.canInteractWithRadio)(props) && " , &:hover"; }, exports.LabelsWrapper, exports.LabelsWrapper, function (props) { return (0, radioInteraction_1.canInteractWithRadio)(props) && " \n      &:hover {\n        ~ ".concat(exports.LabelsWrapper, " {\n          &:before {\n            border: 1px solid var(--primary-hover);\n          }\n        }\n      }\n    "); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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, 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, isCheckable, }: RadioButtonProps) => import("react").JSX.Element;
 export default BoxedMd;

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

@@ -15,8 +15,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./../../props");
 var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var BoxedMd_styled_1 = require("./BoxedMd.styled");
+var radioInteraction_1 = require("../../utils/radioInteraction");
 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.showIndicator, showIndicator = _g === void 0 ? true : _g;
+    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, _h = _a.isCheckable, isCheckable = _h === void 0 ? true : _h;
+    var inputInteraction = (0, radioInteraction_1.getRadioInputInteractionProps)({
+        isCheckable: isCheckable,
+        readOnly: readOnly,
+        onChange: onChange,
+        onClick: onClick,
+    });
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -24,10 +31,11 @@ var BoxedMd = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
+        $isCheckable: isCheckable,
         $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $textSize: textSize,
         $showIndicator: showIndicator,
     };
-    return ((0, jsx_runtime_1.jsxs)(BoxedMd_styled_1.BoxedMdStyled, __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)(BoxedMd_styled_1.Indicator, __assign({}, styledProps)), (label || description || image) && ((0, jsx_runtime_1.jsx)(BoxedMd_styled_1.LabelsWrapper, __assign({}, styledProps, { children: label && ((0, jsx_runtime_1.jsx)(BoxedMd_styled_1.LabelText, __assign({ htmlFor: id }, styledProps, { children: label }))) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(BoxedMd_styled_1.BoxedMdStyled, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), styledProps, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked }, inputInteraction)), showIndicator && (0, jsx_runtime_1.jsx)(BoxedMd_styled_1.Indicator, __assign({}, styledProps)), (label || description || image) && ((0, jsx_runtime_1.jsx)(BoxedMd_styled_1.LabelsWrapper, __assign({}, styledProps, { children: label && ((0, jsx_runtime_1.jsx)(BoxedMd_styled_1.LabelText, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), styledProps, { children: label }))) })))] })));
 };
 exports.default = BoxedMd;

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

@@ -12,6 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
+var radioInteraction_1 = require("../../utils/radioInteraction");
 exports.Indicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: absolute;\n  left: 1.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: ", ";\n  width: ", ";\n  height: ", ";\n"], ["\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: absolute;\n  left: 1.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: ", ";\n  width: ", ";\n  height: ", ";\n"])), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.$size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
     switch (props.$size) {
         case 'small':
@@ -31,7 +32,7 @@ exports.Indicator = styled_components_1.default.div(templateObject_1 || (templat
             return "16px";
     }
 });
-exports.LabelsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0 0 0 ", ";\n  display: grid;\n"], ["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0 0 0 ", ";\n  display: grid;\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return props.$showIndicator ? "2rem" : "0"; });
+exports.LabelsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0 0 0 ", ";\n  display: grid;\n"], ["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0 0 0 ", ";\n  display: grid;\n"])), function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return props.$showIndicator ? "2rem" : "0"; });
 exports.LabelText = styled_components_1.default.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  vertical-align: middle;\n  cursor: pointer;\n  font: ", ";\n"], ["\n  display: block;\n  margin: 0;\n  vertical-align: middle;\n  cursor: pointer;\n  font: ", ";\n"])), function (props) {
     switch (props.$textSize) {
         case 'small':
@@ -42,5 +43,5 @@ exports.LabelText = styled_components_1.default.label(templateObject_3 || (templ
             return "var(--body-semi-bold-14-17)";
     }
 });
-exports.BoxedMdStyled = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: ", ";\n  padding: 0.5rem 1.5rem;\n  min-height: 48px;\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    &:checked ", " {\n      ~ ", " {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 0.5rem;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n\n    &:checked {\n      ~ ", " {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: ", ";\n  padding: 0.5rem 1.5rem;\n  min-height: 48px;\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    &:checked ", " {\n      ~ ", " {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 0.5rem;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n\n    &:checked {\n      ~ ", " {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n  }\n"])), 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: "".concat(props.$color), name: "RadioButtonElementChecked" })); }, function (props) { return !props.$readOnly && " , &:hover"; }, exports.LabelsWrapper, exports.LabelsWrapper);
+exports.BoxedMdStyled = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: ", ";\n  ", "\n  padding: 0.5rem 1.5rem;\n  min-height: 48px;\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " {\n      background-image:url('", "');\n    }\n\n    &:checked ", " {\n      ~ ", " {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 0.5rem;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n\n    &:checked {\n      ~ ", " {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: ", ";\n  ", "\n  padding: 0.5rem 1.5rem;\n  min-height: 48px;\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    &:checked ~ ", " {\n      background-image:url('", "');\n    }\n\n    &:checked ", " {\n      ~ ", " {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 0.5rem;\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n\n    &:checked {\n      ~ ", " {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n  }\n"])), function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); }, function (props) { return (0, radioInteraction_1.canInteractWithRadio)(props) && " , &:hover"; }, exports.LabelsWrapper, exports.LabelsWrapper);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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, 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, isCheckable, }: RadioButtonProps) => import("react").JSX.Element;
 export default BoxedSm;

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

@@ -15,8 +15,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./../../props");
 var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var BoxedSm_styled_1 = require("./BoxedSm.styled");
+var radioInteraction_1 = require("../../utils/radioInteraction");
 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.showIndicator, showIndicator = _g === void 0 ? true : _g;
+    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, _h = _a.isCheckable, isCheckable = _h === void 0 ? true : _h;
+    var inputInteraction = (0, radioInteraction_1.getRadioInputInteractionProps)({
+        isCheckable: isCheckable,
+        readOnly: readOnly,
+        onChange: onChange,
+        onClick: onClick,
+    });
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -24,10 +31,11 @@ var BoxedSm = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
+        $isCheckable: isCheckable,
         $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $textSize: textSize,
         $showIndicator: showIndicator,
     };
-    return ((0, jsx_runtime_1.jsxs)(BoxedSm_styled_1.BoxedSmStyled, __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)(BoxedSm_styled_1.Indicator, __assign({}, styledProps)), (label || description || image) && ((0, jsx_runtime_1.jsx)(BoxedSm_styled_1.LabelsWrapper, __assign({}, styledProps, { children: label && ((0, jsx_runtime_1.jsx)(BoxedSm_styled_1.LabelText, __assign({ htmlFor: id }, styledProps, { children: label }))) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(BoxedSm_styled_1.BoxedSmStyled, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), styledProps, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked }, inputInteraction)), showIndicator && (0, jsx_runtime_1.jsx)(BoxedSm_styled_1.Indicator, __assign({}, styledProps)), (label || description || image) && ((0, jsx_runtime_1.jsx)(BoxedSm_styled_1.LabelsWrapper, __assign({}, styledProps, { children: label && ((0, jsx_runtime_1.jsx)(BoxedSm_styled_1.LabelText, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), styledProps, { children: label }))) })))] })));
 };
 exports.default = BoxedSm;