krl-alfred 2.23.18 → 2.23.19

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;

package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.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: 1rem;\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: 1rem;\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 ? "1.5rem" : "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 ? "1.5rem" : "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.BoxedSmStyled = 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: calc(0.75rem - 0.5px) 1rem;\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: calc(0.75rem - 0.5px) 1rem;\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.BoxedSmStyled = 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: calc(0.75rem - 0.5px) 1rem;\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: calc(0.75rem - 0.5px) 1rem;\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/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, 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, isCheckable, }: RadioButtonProps) => React.JSX.Element;
 export default BoxedWithIcon;

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

@@ -19,8 +19,15 @@ 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 radioInteraction_1 = require("../../utils/radioInteraction");
 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.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 })] }))] })] })));
+    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, _g = _a.isCheckable, isCheckable = _g === void 0 ? true : _g;
+    var inputInteraction = (0, radioInteraction_1.getRadioInputInteractionProps)({
+        isCheckable: isCheckable,
+        readOnly: readOnly,
+        onChange: onChange,
+        onClick: onClick,
+    });
+    return ((0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.BoxedWithIconStyled, __assign({}, (0, radioInteraction_1.getRadioLabelProps)(isCheckable, id), { "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$readOnly": readOnly, "$isCheckable": isCheckable, "$color": (0, getRootCssVariable_1.getRadioPrimaryColor)() }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked }, inputInteraction)), (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/boxedWithIcon/BoxedWithIcon.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.ContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1.5rem 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n"], ["\n  padding: 1.5rem 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n"])));
 exports.Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-height: 24px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-height: 24px;\n"])));
 exports.IconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n"], ["\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n"])));
@@ -19,5 +20,5 @@ exports.Label = styled_components_1.default.span(templateObject_4 || (templateOb
 exports.Indicator = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-shrink: 0;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  width: 20px;\n  height: 20px;\n  display: block;\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n"], ["\n  flex-shrink: 0;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  width: 20px;\n  height: 20px;\n  display: block;\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\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" }))); });
 exports.Separator = styled_components_1.default.hr(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 1px;\n  background-color: var(--grey-10);\n  margin: 0;\n  border: none;\n  opacity: 1;\n"], ["\n  height: 1px;\n  background-color: var(--grey-10);\n  margin: 0;\n  border: none;\n  opacity: 1;\n"])));
 exports.Content = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: var(--dark-opacity-50);\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  li {\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-70);\n    line-height: 1.4;\n  }\n"], ["\n  color: var(--dark-opacity-50);\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  li {\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-70);\n    line-height: 1.4;\n  }\n"])));
-exports.BoxedWithIconStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: white;\n  cursor: ", ";\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"], ["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: white;\n  cursor: ", ";\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"])), function (props) { return props.$checked ? "transparent" : "var(--dark-opacity-10)"; }, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$checked && "\n    &:before{\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      user-select: none;\n      pointer-events: none;\n      border: 2px solid var(--primary);\n    }\n  "; }, exports.ContentWrapper, exports.Header, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })); });
+exports.BoxedWithIconStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: white;\n  cursor: ", ";\n  ", "\n  overflow: hidden;\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  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: white;\n  cursor: ", ";\n  ", "\n  overflow: hidden;\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.$checked ? "transparent" : "var(--dark-opacity-10)"; }, function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, function (props) { return props.$checked && "\n    &:before{\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      user-select: none;\n      pointer-events: none;\n      border: 2px solid var(--primary);\n    }\n  "; }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, exports.ContentWrapper, exports.Header, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/RadioButton/layouts/color/Color.d.ts

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

package/dist/components/RadioButton/layouts/color/Color.js

@@ -14,14 +14,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./../../props");
 var Color_styled_1 = require("./Color.styled");
+var radioInteraction_1 = require("../../utils/radioInteraction");
 var Color = 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.BasicDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, color = _a.color;
+    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.BasicDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, color = _a.color, _d = _a.isCheckable, isCheckable = _d === void 0 ? true : _d;
+    var inputInteraction = (0, radioInteraction_1.getRadioInputInteractionProps)({
+        isCheckable: isCheckable,
+        readOnly: readOnly,
+        onChange: onChange,
+        onClick: onClick,
+    });
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
         $color: color,
         $size: size,
+        $isCheckable: isCheckable,
     };
-    return ((0, jsx_runtime_1.jsxs)(Color_styled_1.ColorStyled, __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 }), (0, jsx_runtime_1.jsx)(Color_styled_1.ColorIndicator, __assign({}, styledProps)), label && (0, jsx_runtime_1.jsx)(Color_styled_1.ColorLabel, __assign({}, styledProps, { children: label }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Color_styled_1.ColorStyled, __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)), (0, jsx_runtime_1.jsx)(Color_styled_1.ColorIndicator, __assign({}, styledProps)), label && (0, jsx_runtime_1.jsx)(Color_styled_1.ColorLabel, __assign({}, styledProps, { children: label }))] })));
 };
 exports.default = Color;

package/dist/components/RadioButton/layouts/color/Color.styled.d.ts

@@ -4,6 +4,7 @@ export interface ColorStyledProps {
     $checked?: boolean;
     $color?: string;
     $size?: string;
+    $isCheckable?: boolean;
 }
 export declare const ColorIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;

package/dist/components/RadioButton/layouts/color/Color.styled.js

@@ -9,7 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorStyled = exports.ColorLabel = exports.ColorIndicator = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+var radioInteraction_1 = require("../../utils/radioInteraction");
 exports.ColorIndicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color: ", ";\n  box-sizing: border-box;\n  outline: ", ";\n  outline-offset: 2px;\n"], ["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color: ", ";\n  box-sizing: border-box;\n  outline: ", ";\n  outline-offset: 2px;\n"])), function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$color || "var(--dark)"; }, function (props) { return props.$checked ? "2px solid var(--primary)" : "2px solid transparent"; });
 exports.ColorLabel = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font: var(--caption-medium-12-15);\n  color: ", ";\n  text-align: center;\n  white-space: nowrap;\n"], ["\n  font: var(--caption-medium-12-15);\n  color: ", ";\n  text-align: center;\n  white-space: nowrap;\n"])), function (props) { return props.$checked ? "var(--primary)" : "var(--dark-opacity-50)"; });
-exports.ColorStyled = styled_components_1.default.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: ", ";\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: ", ";\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$disabled && "\n    opacity: 0.4;\n  "; });
+exports.ColorStyled = styled_components_1.default.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\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"], ["\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\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"])), function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, function (props) { return props.$disabled && "\n    opacity: 0.4;\n  "; }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); });
 var templateObject_1, templateObject_2, templateObject_3;

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

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

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

@@ -13,10 +13,11 @@ export type HorizontalStyledProps = {
     $hasContent?: boolean;
     $size?: IndicatorSize;
     $innerMinHeight?: "70" | "initial";
+    $isCheckable?: boolean;
 };
-export declare const HorizontalLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
+export declare const HorizontalLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
-}> & string;
+}, HorizontalStyledProps>> & string;
 export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
 }, Pick<HorizontalStyledProps, "$innerMinHeight">>> & string;

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

@@ -13,6 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
+var radioInteraction_1 = require("../../utils/radioInteraction");
 var getIndicatorSize = function (size) {
     switch (size) {
         case 'medium':
@@ -21,7 +22,7 @@ var getIndicatorSize = function (size) {
             return '16px';
     }
 };
-exports.HorizontalLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n"])));
+exports.HorizontalLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: stretch;\n  justify-content: center;\n  cursor: inherit;\n  ", "\n"])), function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); });
 exports.Inner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.5rem;\n  min-height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 1rem 1.5rem;\n  min-height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n\n  @media only screen and ", " {\n    padding: 0 1rem;\n  }\n"])), function (props) { return (props.$innerMinHeight === 'initial' ? 'initial' : '70px'); }, devices_1.devices.sm);
 exports.LeftContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"])));
 exports.Indicator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"])), function (props) {
@@ -52,7 +53,7 @@ exports.Price = styled_components_1.default.strong(templateObject_14 || (templat
 exports.TotalPrice = styled_components_1.default.strong(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"], ["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"])));
 exports.TotalLabel = styled_components_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.sm);
 exports.ContentArea = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"])), devices_1.devices.sm);
-exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n  }\n"])), function (props) {
+exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n    ", "\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n"])), function (props) {
     if (props.$disabled)
         return '1px solid var(--grey-10)';
     if (props.$hasError)
@@ -60,5 +61,5 @@ exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_18
     if (props.checked)
         return '2px solid var(--primary)';
     return '1px solid var(--dark-opacity-10)';
-}, function (props) { return !props.checked && !props.$disabled && !props.$hasError && "\n    @media only screen and ".concat(devices_1.devices.lgUp, " {\n      &:hover:before {\n        border: 1px solid var(--primary);\n      }\n    }\n  "); }, exports.HorizontalLabel, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$hasError && !props.$disabled && "\n    ".concat(exports.LabelWrapper, ",\n    ").concat(exports.TitleLabel, ",\n    ").concat(exports.Description, ",\n    ").concat(exports.Price, ",\n    ").concat(exports.TotalPrice, " {\n      color: var(--red);\n    }\n\n    ").concat(exports.Description, " a {\n      color: var(--red);\n    }\n  "); }, function (props) { return !props.$disabled && !props.$hasError ? "\n      &:checked ~ ".concat(exports.Indicator, " {\n        background-image: url('").concat((0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })), "');\n      }\n    ") : ""; }, function (props) { return props.$disabled ? "\n      pointer-events: none;\n      user-select:none;\n    " : ""; });
+}, function (props) { return !props.checked && !props.$disabled && !props.$hasError && props.$isCheckable !== false && "\n    @media only screen and ".concat(devices_1.devices.lgUp, " {\n      &:hover:before {\n        border: 1px solid var(--primary);\n      }\n    }\n  "); }, exports.HorizontalLabel, function (props) { return (0, radioInteraction_1.getRadioCursor)(props); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, function (props) { return props.$hasError && !props.$disabled && "\n    ".concat(exports.LabelWrapper, ",\n    ").concat(exports.TitleLabel, ",\n    ").concat(exports.Description, ",\n    ").concat(exports.Price, ",\n    ").concat(exports.TotalPrice, " {\n      color: var(--red);\n    }\n\n    ").concat(exports.Description, " a {\n      color: var(--red);\n    }\n  "); }, function (props) { return (0, radioInteraction_1.nonCheckableWrapperStyles)(props); }, function (props) { return !props.$disabled && !props.$hasError ? "\n      &:checked ~ ".concat(exports.Indicator, " {\n        background-image: url('").concat((0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })), "');\n      }\n    ") : ""; }, function (props) { return props.$disabled ? "\n      pointer-events: none;\n      user-select:none;\n    " : ""; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

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

@@ -64,4 +64,21 @@ describe('RadioButton Horizontal', function () {
         renderHorizontal({ label: 'Taksitli Ödeme' });
         expect(react_1.screen.getByText('Taksitli Ödeme')).toBeInTheDocument();
     });
+    it('uses default cursor when isCheckable is false', function () {
+        var container = renderHorizontal({ isCheckable: false, checked: true }).container;
+        expect(container.querySelector('label')).toHaveStyle({ cursor: 'default' });
+    });
+    it('does not trigger onChange when isCheckable is false', function () {
+        var onChange = jest.fn();
+        var container = renderHorizontal({
+            isCheckable: false,
+            checked: false,
+            onChange: onChange,
+        }).container;
+        var label = container.querySelector('label');
+        expect(label).not.toHaveAttribute('for');
+        react_1.fireEvent.mouseDown(label);
+        react_1.fireEvent.click(label);
+        expect(onChange).not.toHaveBeenCalled();
+    });
 });

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

@@ -56,6 +56,8 @@ export interface RadioButton {
     showIndicator?: boolean;
     hasError?: boolean;
     errorMessage?: React.ReactNode;
+    /** false ise sadece görüntülenir; checked/disabled/error stilleri korunur */
+    isCheckable?: boolean;
 }
 export declare const BoxedDefault: RadioButton;
 export declare const BasicDefault: RadioButton;
@@ -75,6 +77,7 @@ export interface RadioButtonStyledProps {
     $alignment?: string;
     $verticalAlign?: string;
     $showIndicator?: boolean;
+    $isCheckable?: boolean;
 }
 export type RadioButtonProps = RadioButton;
 export {};

package/dist/components/RadioButton/props.js

@@ -32,6 +32,7 @@ var RadioButtonDefault = {
     innerMinHeight: "70",
     hasError: false,
     errorMessage: null,
+    isCheckable: true,
 };
 exports.BoxedDefault = {
     id: "styledChecbox_".concat(Math.floor(Math.random() * (99999999999 - 11111111111) + 11111111111)),

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

@@ -60,6 +60,9 @@ declare const _default: {
         readOnly: {
             control: string;
         };
+        isCheckable: {
+            control: string;
+        };
         disabled: {
             control: string;
         };
@@ -397,6 +400,20 @@ export declare const HorizontalWithTitleImage: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const HorizontalNotCheckable: {
+    name: string;
+    args: {
+        label: string;
+        description: string;
+        valid: boolean;
+        layout: string;
+        checked: boolean;
+        showIndicator: boolean;
+        labelOffset: string;
+        isCheckable: boolean;
+    };
+    render: (args: any) => import("react").JSX.Element;
+};
 export declare const HorizontalWithContent: {
     name: string;
     args: {

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HorizontalChecked = exports.WithoutDescription = exports.BoxedWithBadge = exports.AllLayouts = exports.AllSizes = exports.VerticalAlignment = exports.ReadOnly = exports.Disabled = exports.Invalid = exports.Unchecked = exports.Checked = exports.ColorPicker = exports.HorizontalWithDangerBadge = exports.HorizontalWithRightContent = exports.HorizontalWithContent = exports.HorizontalWithTitleImage = exports.HorizontalDisabled = exports.HorizontalWithError = exports.HorizontalTitleBadgeTopRight = exports.HorizontalTitleBadgeBelowWithDescription = exports.HorizontalTitleBadgeBelow = exports.Horizontal = exports.BoxedMdWithoutIndicator = exports.BoxedMdUnchecked = exports.BoxedMd = exports.BoxedSm = exports.BoxedWithIconGroup = exports.BoxedWithIconUnselected = exports.BoxedWithIcon = exports.Boxed = exports.Basic = exports.Default = void 0;
+exports.HorizontalChecked = exports.WithoutDescription = exports.BoxedWithBadge = exports.AllLayouts = exports.AllSizes = exports.VerticalAlignment = exports.ReadOnly = exports.Disabled = exports.Invalid = exports.Unchecked = exports.Checked = exports.ColorPicker = exports.HorizontalWithDangerBadge = exports.HorizontalWithRightContent = exports.HorizontalWithContent = exports.HorizontalNotCheckable = exports.HorizontalWithTitleImage = exports.HorizontalDisabled = exports.HorizontalWithError = exports.HorizontalTitleBadgeTopRight = exports.HorizontalTitleBadgeBelowWithDescription = exports.HorizontalTitleBadgeBelow = exports.Horizontal = exports.BoxedMdWithoutIndicator = exports.BoxedMdUnchecked = exports.BoxedMd = exports.BoxedSm = exports.BoxedWithIconGroup = exports.BoxedWithIconUnselected = exports.BoxedWithIcon = exports.Boxed = exports.Basic = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var props_1 = require("../props");
@@ -46,6 +46,7 @@ exports.default = {
         hasError: { control: "boolean" },
         errorMessage: { control: "text" },
         readOnly: { control: "boolean" },
+        isCheckable: { control: "boolean" },
         disabled: { control: "boolean" },
         isWrapText: { control: "boolean" },
         hasNoneClick: { control: "boolean" },
@@ -311,6 +312,20 @@ exports.HorizontalWithTitleImage = {
     name: "Horizontal — title (ReactNode + görsel)",
     render: function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { layout: "horizontal", title: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "", width: 32, height: 32, style: { borderRadius: "0.25rem", objectFit: "cover" } }), (0, jsx_runtime_1.jsx)("span", { children: "Etiyopya torres single" })] })), description: "SKU-001 - \u00C7ekirdek kahve", checked: true, showIndicator: true, labelOffset: "1rem", innerMinHeight: "initial", rightContent: ((0, jsx_runtime_1.jsx)("span", __assign({ style: { color: "var(--grey-50)", font: "var(--body-medium-13-16)" } }, { children: "3 varyasyon" }))) }) }))); },
 };
+exports.HorizontalNotCheckable = {
+    name: "Horizontal — not checkable (isCheckable: false)",
+    args: {
+        label: "Seçili görünüm",
+        description: "Sadece görüntüleme — tıklanamaz",
+        valid: true,
+        layout: "horizontal",
+        checked: true,
+        showIndicator: true,
+        labelOffset: "1rem",
+        isCheckable: false,
+    },
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, __assign({}, args)) }))); },
+};
 exports.HorizontalWithContent = {
     name: "Horizontal — content (checked)",
     args: {

package/dist/components/RadioButton/utils/radioInteraction.d.ts

@@ -0,0 +1,35 @@
+type RadioInteractionProps = {
+    $disabled?: boolean;
+    $isCheckable?: boolean;
+};
+type RadioInputInteractionProps = {
+    isCheckable?: boolean;
+    readOnly?: boolean;
+    onChange?(e: any): void;
+    onClick?(): void;
+};
+export declare const getRadioCursor: ({ $disabled, $isCheckable }: RadioInteractionProps) => "default" | "not-allowed" | "pointer";
+export declare const canInteractWithRadio: ({ $readOnly, $isCheckable, }: {
+    $readOnly?: boolean;
+    $isCheckable?: boolean;
+}) => boolean;
+export declare const getRadioInputInteractionProps: ({ isCheckable, readOnly, onChange, onClick, }: RadioInputInteractionProps) => {
+    tabIndex?: number;
+    onMouseDown?: (event: {
+        preventDefault(): void;
+    }) => void;
+    readOnly: boolean;
+    onChange: (e: any) => void;
+    onClick: () => void;
+};
+export declare const getRadioLabelProps: (isCheckable?: boolean, id?: string) => {
+    onMouseDown?: (event: {
+        preventDefault(): void;
+    }) => void;
+    onClick?: (event: {
+        preventDefault(): void;
+    }) => void;
+    htmlFor?: string;
+};
+export declare const nonCheckableWrapperStyles: (props: RadioInteractionProps) => "" | "\n    pointer-events: none;\n    user-select: none;\n  ";
+export {};

package/dist/components/RadioButton/utils/radioInteraction.js

@@ -0,0 +1,57 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nonCheckableWrapperStyles = exports.getRadioLabelProps = exports.getRadioInputInteractionProps = exports.canInteractWithRadio = exports.getRadioCursor = void 0;
+var preventInteraction = function (event) {
+    event.preventDefault();
+};
+var getRadioCursor = function (_a) {
+    var $disabled = _a.$disabled, $isCheckable = _a.$isCheckable;
+    if ($disabled)
+        return 'not-allowed';
+    if ($isCheckable === false)
+        return 'default';
+    return 'pointer';
+};
+exports.getRadioCursor = getRadioCursor;
+var canInteractWithRadio = function (_a) {
+    var $readOnly = _a.$readOnly, $isCheckable = _a.$isCheckable;
+    return !($readOnly || $isCheckable === false);
+};
+exports.canInteractWithRadio = canInteractWithRadio;
+var getRadioInputInteractionProps = function (_a) {
+    var _b = _a.isCheckable, isCheckable = _b === void 0 ? true : _b, readOnly = _a.readOnly, onChange = _a.onChange, onClick = _a.onClick;
+    return (__assign({ readOnly: Boolean(readOnly || !isCheckable), onChange: isCheckable ? onChange : undefined, onClick: isCheckable ? onClick : undefined }, (isCheckable
+        ? {}
+        : {
+            tabIndex: -1,
+            onMouseDown: preventInteraction,
+        })));
+};
+exports.getRadioInputInteractionProps = getRadioInputInteractionProps;
+var getRadioLabelProps = function (isCheckable, id) {
+    if (isCheckable === void 0) { isCheckable = true; }
+    return (__assign(__assign({}, (isCheckable && id ? { htmlFor: id } : {})), (isCheckable
+        ? {}
+        : {
+            onMouseDown: preventInteraction,
+            onClick: preventInteraction,
+        })));
+};
+exports.getRadioLabelProps = getRadioLabelProps;
+var nonCheckableWrapperStyles = function (props) {
+    return props.$isCheckable === false
+        ? "\n    pointer-events: none;\n    user-select: none;\n  "
+        : '';
+};
+exports.nonCheckableWrapperStyles = nonCheckableWrapperStyles;

package/dist/components/RadioGroup/RadioGroup.js

@@ -32,7 +32,7 @@ var RadioGroup = function (_a) {
                     var radioId = option.id || "".concat(name, "_").concat(index);
                     var isChecked = value === option.value;
                     var optionHasError = (_a = option.hasError) !== null && _a !== void 0 ? _a : hasError;
-                    return ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, name: name, value: option.value, checked: isChecked, onChange: function (e) { return handleRadioChange(option.value); }, label: option.label, title: option.title, description: option.description, image: option.image, disabled: disabled || option.disabled, alignment: option.alignment, isWrapText: option.isWrapText, size: size, textSize: textSize, layout: radioLayout, valid: valid, labelOffset: labelOffset, color: option.color || color, verticalAlign: verticalAlign, readOnly: readOnly, labelSm: option.labelSm, hasBadge: option.hasBadge, badgeText: option.badgeText, badgeVariant: option.badgeVariant, price: option.price, priceDesc: option.priceDesc, hasTitleBadge: option.hasTitleBadge, titleBadgeLayout: option.titleBadgeLayout, titleBadgeText: option.titleBadgeText, hasPriceBadge: option.hasPriceBadge, priceBadgeLayout: option.priceBadgeLayout, priceBadgeText: option.priceBadgeText, iconName: option.iconName, iconColor: option.iconColor, content: option.content, showIndicator: showIndicator, titleBadgePosition: option.titleBadgePosition, rightContent: option.rightContent, innerMinHeight: option.innerMinHeight, hasError: optionHasError, errorMessage: option.errorMessage }, radioId));
+                    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, title: option.title, description: option.description, image: option.image, disabled: disabled || option.disabled, alignment: option.alignment, isWrapText: option.isWrapText, size: size, textSize: textSize, layout: radioLayout, valid: valid, labelOffset: labelOffset, color: option.color || color, verticalAlign: verticalAlign, readOnly: readOnly, labelSm: option.labelSm, hasBadge: option.hasBadge, badgeText: option.badgeText, badgeVariant: option.badgeVariant, price: option.price, priceDesc: option.priceDesc, hasTitleBadge: option.hasTitleBadge, titleBadgeLayout: option.titleBadgeLayout, titleBadgeText: option.titleBadgeText, hasPriceBadge: option.hasPriceBadge, priceBadgeLayout: option.priceBadgeLayout, priceBadgeText: option.priceBadgeText, iconName: option.iconName, iconColor: option.iconColor, content: option.content, showIndicator: showIndicator, titleBadgePosition: option.titleBadgePosition, rightContent: option.rightContent, innerMinHeight: option.innerMinHeight, hasError: optionHasError, errorMessage: option.errorMessage, isCheckable: option.isCheckable }, radioId));
                 }) }))] }));
 };
 exports.default = RadioGroup;

package/dist/components/RadioGroup/RadioGroup.test.js

@@ -44,4 +44,10 @@ describe('RadioGroup', function () {
         expect(react_1.screen.getByTestId('title-image')).toBeInTheDocument();
         expect(react_1.screen.getByText('Özel başlık')).toBeInTheDocument();
     });
+    it('forwards isCheckable from option to RadioButton', function () {
+        var container = (0, react_1.render)((0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "test-group", radioLayout: "horizontal", value: "a", options: [
+                __assign(__assign({}, baseOptions[0]), { isCheckable: false }),
+            ] })).container;
+        expect(container.querySelector('label')).toHaveStyle({ cursor: 'default' });
+    });
 });

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

@@ -43,6 +43,8 @@ export interface RadioOption {
     innerMinHeight?: "70" | "initial";
     hasError?: boolean;
     errorMessage?: React.ReactNode;
+    /** false ise sadece görüntülenir; checked/disabled/error stilleri korunur */
+    isCheckable?: boolean;
 }
 export interface RadioGroup {
     options?: RadioOption[];

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

@@ -430,6 +430,100 @@ export declare const HorizontalInstallmentWithTitleImage: {
     };
     render: (args: any) => React.JSX.Element;
 };
+export declare const HorizontalInstallmentNotCheckable: {
+    name: string;
+    args: {
+        options: ({
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            hasPriceBadge: boolean;
+            titleBadgeLayout?: undefined;
+            titleBadgeText?: undefined;
+            priceBadgeLayout?: undefined;
+            priceBadgeText?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled: boolean;
+        } | {
+            isCheckable: boolean;
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled?: undefined;
+        } | {
+            isCheckable: boolean;
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            hasPriceBadge: boolean;
+            titleBadgeLayout?: undefined;
+            titleBadgeText?: undefined;
+            priceBadgeLayout?: undefined;
+            priceBadgeText?: undefined;
+            disabled?: undefined;
+        } | {
+            isCheckable: boolean;
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled: boolean;
+        })[];
+        value: string;
+        name: string;
+        label: string;
+        onChange: (value: any) => void;
+        layout: string;
+        radioLayout: string;
+        gap: string;
+    };
+};
 export declare const HorizontalInstallmentWithError: {
     name: string;
     args: {

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallmentWithError = exports.HorizontalInstallmentWithTitleImage = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
+exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallmentWithError = exports.HorizontalInstallmentNotCheckable = exports.HorizontalInstallmentWithTitleImage = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var RadioGroup_1 = __importDefault(require("../RadioGroup"));
@@ -416,6 +416,12 @@ exports.HorizontalInstallmentWithTitleImage = {
     },
     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.HorizontalInstallmentNotCheckable = {
+    name: "Horizontal — not checkable",
+    args: __assign(__assign({}, exports.HorizontalInstallment.args), { options: horizontalOptions.map(function (option, index) {
+            return index === 0 ? __assign(__assign({}, option), { isCheckable: false }) : option;
+        }), value: "installment" }),
+};
 exports.HorizontalInstallmentWithError = {
     name: "Horizontal — error",
     args: __assign(__assign({}, exports.HorizontalInstallment.args), { name: "horizontalInstallmentErrorRadioGroup", hasError: true, options: horizontalOptions.map(function (option, index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.23.18",
+  "version": "2.23.19",
   "files": [
     "dist"
   ],