krl-alfred 2.18.22 → 2.18.24

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

@@ -7,12 +7,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BasicStyled = void 0;
+exports.BasicStyled = exports.DescriptionText = exports.LabelText = exports.LabelsWrapper = exports.Indicator = void 0;
 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"));
-exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __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 ~ .indicator {\n      background-image:url('", "');\n    }\n  }\n\n  div.indicator {\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    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    padding: ", ";\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n      font: ", ";\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n      cursor: inherit;\n      font: var(--body-medium-14-17);\n      color: var(--grey-50);\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 ~ .indicator {\n      background-image:url('", "');\n    }\n  }\n\n  div.indicator {\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    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    padding: ", ";\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n      font: ", ";\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n      cursor: inherit;\n      font: var(--body-medium-14-17);\n      color: var(--grey-50);\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  "; }, 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.$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) {
+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':
             return "16px";
@@ -34,7 +34,9 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
         default:
             return "16px";
     }
-}, 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    "; }, function (props) {
+});
+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.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':
             return "var(--body-medium-13-16)";
@@ -46,4 +48,6 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
             return "var(--body-medium-14-17)";
     }
 });
-var templateObject_1;
+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" })); });
+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, color }: 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, color, showIndicator, }: RadioButtonProps) => React.JSX.Element;
 export default Boxed;

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

@@ -20,11 +20,21 @@ var props_1 = require("./../../props");
 var Boxed_styled_1 = require("./Boxed.styled");
 var Badges_1 = __importDefault(require("../../../Badges"));
 var Boxed = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, hasBadge = _a.hasBadge, badgeText = _a.badgeText, badgeVariant = _a.badgeVariant, labelSm = _a.labelSm, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g;
-    var _h = (0, react_1.useState)(color), inputColor = _h[0], setInputColor = _h[1];
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, hasBadge = _a.hasBadge, badgeText = _a.badgeText, badgeVariant = _a.badgeVariant, labelSm = _a.labelSm, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
+    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
     (0, react_1.useEffect)(function () {
         setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
     });
-    return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$readOnly": readOnly, "$color": inputColor, "$textSize": textSize }, { 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)("div", { className: "indicator" }), (label || description || image) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, labelSm && (0, jsx_runtime_1.jsx)("span", __assign({ className: "labelSm" }, { children: labelSm }))] }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: image })))] }))), hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "boxedBadgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "belt", variant: badgeVariant, hasResponsive: true }) })))] })));
+    var styledProps = {
+        $disabled: disabled,
+        $checked: checked,
+        $size: size,
+        $valid: valid,
+        $labelOffset: labelOffset,
+        $readOnly: readOnly,
+        $color: inputColor,
+        $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 }) }))] })));
 };
 exports.default = Boxed;

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

@@ -1,3 +1,10 @@
 /// <reference types="react" />
 import { RadioButtonStyledProps } from "./../../props";
+export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
+export declare const LabelsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
+export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const LabelSm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const DescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const ImageLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const BoxedBadgesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const BoxedStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;

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

@@ -7,13 +7,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoxedStyled = void 0;
+exports.BoxedStyled = exports.BoxedBadgesWrapper = exports.ImageLabel = exports.DescriptionText = exports.LabelSm = exports.LabelText = exports.LabelsWrapper = exports.Indicator = void 0;
 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 devices_1 = require("../../../../constants/devices");
-exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __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  @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 ~ .indicator {\n      background-image:url('", "');\n    }\n\n    &:checked ", " {\n      ~ div.labelsWrapper {\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      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n      ", "\n  }\n\n  div.indicator {\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    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\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       //display: flex;\n       //align-items: center;\n       //justify-content: center;\n        row-gap: 4px;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      .labelSm{\n        font:var(--body-regular-14-17);\n        margin-left: 0.25rem;\n      }\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\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  @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 ~ .indicator {\n      background-image:url('", "');\n    }\n\n    &:checked ", " {\n      ~ div.labelsWrapper {\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      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n      ", "\n  }\n\n  div.indicator {\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    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\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       //display: flex;\n       //align-items: center;\n       //justify-content: center;\n        row-gap: 4px;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      .labelSm{\n        font:var(--body-regular-14-17);\n        margin-left: 0.25rem;\n      }\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\n      }\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, devices_1.devices.lg, 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"; }, function (props) { return !props.$readOnly && " \n          &:hover {\n          ~ div.labelsWrapper {\n            &:before {\n              border: 1px solid var(--primary-hover);\n            }\n          }\n        }\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) {
+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) {
         case 'small':
             return "16px";
@@ -31,5 +31,12 @@ exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (tem
         default:
             return "16px";
     }
-}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
-var templateObject_1;
+});
+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  position: relative;\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  position: relative;\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.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    "); });
+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

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

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

@@ -0,0 +1,37 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var props_1 = require("./../../props");
+var BoxedMd_styled_1 = require("./BoxedMd.styled");
+var BoxedMd = function (_a) {
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
+    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
+    (0, react_1.useEffect)(function () {
+        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
+    });
+    var styledProps = {
+        $disabled: disabled,
+        $checked: checked,
+        $size: size,
+        $valid: valid,
+        $labelOffset: labelOffset,
+        $readOnly: readOnly,
+        $color: inputColor,
+        $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 }))) })))] })));
+};
+exports.default = BoxedMd;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { RadioButtonStyledProps } from "./../../props";
+export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
+export declare const LabelsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
+export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
+export declare const BoxedMdStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;

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

@@ -0,0 +1,46 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoxedMdStyled = exports.LabelText = exports.LabelsWrapper = exports.Indicator = void 0;
+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"));
+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':
+            return "16px";
+        case 'medium':
+            return "24px";
+        default:
+            return "16px";
+    }
+}, function (props) {
+    switch (props.$size) {
+        case 'small':
+            return "16px";
+        case 'medium':
+            return "24px";
+        default:
+            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.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':
+            return "var(--caption-semi-bold-12-15)";
+        case 'medium':
+            return "var(--body-semi-bold-14-17)";
+        default:
+            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);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1 @@
+export { default } from './BoxedMd';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var BoxedMd_1 = require("./BoxedMd");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BoxedMd_1).default; } });

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

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

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

@@ -16,11 +16,22 @@ var react_1 = require("react");
 var props_1 = require("./../../props");
 var BoxedSm_styled_1 = require("./BoxedSm.styled");
 var BoxedSm = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g;
-    var _h = (0, react_1.useState)(color), inputColor = _h[0], setInputColor = _h[1];
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
+    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
     (0, react_1.useEffect)(function () {
         setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
     });
-    return ((0, jsx_runtime_1.jsxs)(BoxedSm_styled_1.BoxedSmStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$readOnly": readOnly, "$color": inputColor, "$textSize": textSize }, { 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)("div", { className: "indicator" }), (label || description || image) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))) })))] })));
+    var styledProps = {
+        $disabled: disabled,
+        $checked: checked,
+        $size: size,
+        $valid: valid,
+        $labelOffset: labelOffset,
+        $readOnly: readOnly,
+        $color: inputColor,
+        $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 }))) })))] })));
 };
 exports.default = BoxedSm;

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

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { RadioButtonStyledProps } from "./../../props";
+export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
+export declare const LabelsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
+export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
 export declare const BoxedSmStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;

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

@@ -7,12 +7,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoxedSmStyled = void 0;
+exports.BoxedSmStyled = exports.LabelText = exports.LabelsWrapper = exports.Indicator = void 0;
 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"));
-exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __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  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image:url('", "');\n    }\n\n    &:checked ", " {\n      ~ div.labelsWrapper {\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      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n  }\n\n  div.indicator {\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    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 4px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0 0 0 1.5rem;\n    display: grid;\n\n    label.label {\n      display: block;\n      margin: 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font: ", ";\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  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image:url('", "');\n    }\n\n    &:checked ", " {\n      ~ div.labelsWrapper {\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      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n  }\n\n  div.indicator {\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    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 4px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0 0 0 1.5rem;\n    display: grid;\n\n    label.label {\n      display: block;\n      margin: 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font: ", ";\n    }\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, 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"; }, 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) {
+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':
             return "16px";
@@ -30,7 +30,9 @@ exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (t
         default:
             return "16px";
     }
-}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) {
+});
+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  position: relative;\n"], ["\n  row-gap: 4px;\n  cursor: ", ";\n  margin: 0;\n  color: ", ";\n  padding: 0 0 0 ", ";\n  display: grid;\n  position: relative;\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.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':
             return "var(--caption-semi-bold-12-15)";
@@ -40,4 +42,5 @@ exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (t
             return "var(--body-semi-bold-14-17)";
     }
 });
-var templateObject_1;
+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);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -16,6 +16,12 @@ var props_1 = require("./../../props");
 var Color_styled_1 = require("./Color.styled");
 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;
-    return ((0, jsx_runtime_1.jsxs)(Color_styled_1.ColorStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$color": color, "$size": size }, { 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)("div", { className: "colorIndicator" }), label && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "colorLabel" }, { children: label })))] })));
+    var styledProps = {
+        $disabled: disabled,
+        $checked: checked,
+        $color: color,
+        $size: size,
+    };
+    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 }))] })));
 };
 exports.default = Color;

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

@@ -5,4 +5,6 @@ export interface ColorStyledProps {
     $color?: string;
     $size?: string;
 }
+export declare const ColorIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ColorStyledProps> & ColorStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ColorStyledProps> & ColorStyledProps, never>>> & string;
+export declare const ColorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof ColorStyledProps> & ColorStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof ColorStyledProps> & ColorStyledProps, never>>> & string;
 export declare const ColorStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ColorStyledProps> & ColorStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ColorStyledProps> & ColorStyledProps, never>>> & string;

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

@@ -7,7 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorStyled = void 0;
+exports.ColorStyled = exports.ColorLabel = exports.ColorIndicator = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ColorStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __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  .colorIndicator {\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    box-sizing: border-box;\n    outline: ", ";\n    outline-offset: 2px;\n  }\n\n  .colorLabel {\n    font: var(--caption-medium-12-15);\n    color: ", ";\n    text-align: center;\n    white-space: nowrap;\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\n  .colorIndicator {\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    box-sizing: border-box;\n    outline: ", ";\n    outline-offset: 2px;\n  }\n\n  .colorLabel {\n    font: var(--caption-medium-12-15);\n    color: ", ";\n    text-align: center;\n    white-space: nowrap;\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$disabled && "\n    opacity: 0.4;\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"; }, function (props) { return props.$checked ? "var(--primary)" : "var(--dark-opacity-50)"; });
-var templateObject_1;
+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  "; });
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -18,7 +18,17 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var Badges_1 = __importDefault(require("../../../Badges"));
 var Horizontal_styled_1 = require("./Horizontal.styled");
 var Horizontal = function (props) {
-    var label = props.label, description = props.description, id = props.id, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, value = props.value, price = props.price, priceDesc = props.priceDesc, hasTitleBadge = props.hasTitleBadge, titleBadgeLayout = props.titleBadgeLayout, titleBadgeText = props.titleBadgeText, hasPriceBadge = props.hasPriceBadge, priceBadgeLayout = props.priceBadgeLayout, priceBadgeText = props.priceBadgeText, _a = props.labelOffset, labelOffset = _a === void 0 ? "1rem" : _a, disabled = props.disabled, _b = props.valid, valid = _b === void 0 ? true : _b, color = props.color;
-    return ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.HorizontalBoxStyled, __assign({ checked: checked, "$disabled": disabled, "$valid": valid, "$color": color, "$labelOffset": labelOffset }, { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftContent" }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelContent" }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelWrapper" }, { children: [label, (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: hasTitleBadge && (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: titleBadgeLayout, title: titleBadgeText }) }))] }))), description && (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description }))] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "rightContent" }, { children: hasPriceBadge ? (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: priceBadgeLayout, title: priceBadgeText }) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "price" }, { children: price })), priceDesc && ((0, jsx_runtime_1.jsxs)("strong", __assign({ className: "totalPrice" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "total" }, { children: "Toplam:" })), " ", priceDesc] })))] })) }))] })) }) })));
+    var label = props.label, description = props.description, id = props.id, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, value = props.value, price = props.price, priceDesc = props.priceDesc, hasTitleBadge = props.hasTitleBadge, titleBadgeLayout = props.titleBadgeLayout, titleBadgeText = props.titleBadgeText, _a = props.titleBadgePosition, titleBadgePosition = _a === void 0 ? "inline" : _a, hasPriceBadge = props.hasPriceBadge, priceBadgeLayout = props.priceBadgeLayout, priceBadgeText = props.priceBadgeText, _b = props.labelOffset, labelOffset = _b === void 0 ? "1rem" : _b, disabled = props.disabled, _c = props.valid, valid = _c === void 0 ? true : _c, color = props.color, _d = props.showIndicator, showIndicator = _d === void 0 ? true : _d;
+    var titleBadgeBelow = titleBadgePosition === "below";
+    var styledProps = {
+        checked: checked,
+        $disabled: disabled,
+        $valid: valid,
+        $color: color,
+        $labelOffset: labelOffset,
+        $titleBadgeBelow: titleBadgeBelow,
+    };
+    var titleBadge = hasTitleBadge && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.BadgesWrapper, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: titleBadgeLayout, title: titleBadgeText }) })));
+    return ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.HorizontalBoxStyled, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(Horizontal_styled_1.HorizontalLabel, { children: (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.Inner, { children: [(0, jsx_runtime_1.jsxs)(Horizontal_styled_1.LeftContent, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), showIndicator && (0, jsx_runtime_1.jsx)(Horizontal_styled_1.Indicator, __assign({}, styledProps)), (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.LabelContent, { children: [label && ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.LabelWrapper, __assign({}, styledProps, { children: titleBadgeBelow ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.TitleLabel, { children: label }), titleBadge] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, titleBadge] })) }))), description && (0, jsx_runtime_1.jsx)(Horizontal_styled_1.Description, { children: description })] })] }), (0, jsx_runtime_1.jsx)(Horizontal_styled_1.RightContent, { children: hasPriceBadge ? ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: priceBadgeLayout, title: priceBadgeText })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.Price, { children: price }), priceDesc && ((0, jsx_runtime_1.jsxs)(Horizontal_styled_1.TotalPrice, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.TotalLabel, { children: "Toplam:" }), " ", priceDesc] }))] })) })] }) }) })));
 };
 exports.default = Horizontal;

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

@@ -1,14 +1,23 @@
 /// <reference types="react" />
-export declare const HorizontalBoxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "checked" | "$labelOffset" | "$valid" | "$disabled"> & {
+export type HorizontalStyledProps = {
     checked?: boolean;
     $disabled?: boolean;
     $valid: boolean;
     $color?: string;
     $labelOffset?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "checked" | "$labelOffset" | "$valid" | "$disabled"> & {
-    checked?: boolean;
-    $disabled?: boolean;
-    $valid: boolean;
-    $color?: string;
-    $labelOffset?: string;
-}, never>>> & string;
+    $titleBadgeBelow?: boolean;
+};
+export declare const HorizontalLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const LeftContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never>>> & string;
+export declare const LabelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const LabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never>>> & string;
+export declare const TitleLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const BadgesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never>>> & string;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const RightContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Price: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const TotalPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const TotalLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const HorizontalBoxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HorizontalStyledProps> & HorizontalStyledProps, never>>> & string;