krl-alfred 2.24.3 → 2.24.4

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

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

package/dist/components/Checkbox/Checkbox.js

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

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

@@ -8,10 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxLabel = exports.LabelsWrapper = exports.CheckboxInput = exports.CheckboxIndicator = exports.CheckboxWrapper = 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 getIndicatorSize = function (size) {
     switch (size) {
         case 'medium':
@@ -35,18 +32,6 @@ var getLabelFont = function (textSize) {
             return 'var(--body-semi-bold-14-17)';
     }
 };
-var getUncheckedBackground = function (props) {
-    if (props.disabled) {
-        return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" }));
-    }
-    if (props.$valid) {
-        return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color, name: "CheckboxElementUncheck" }));
-    }
-    return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }));
-};
-var getCheckedBackground = function (props) {
-    return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$checkedColor || props.$color, name: "CheckboxElementChecked" }));
-};
 var getCheckboxCursor = function (props) {
     if (props.disabled || props.$isCheckable === false) {
         return 'default';
@@ -54,8 +39,8 @@ var getCheckboxCursor = function (props) {
     return 'pointer';
 };
 exports.CheckboxWrapper = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"], ["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"])), function (props) { return props.$verticalAlign; }, function (props) { return getCheckboxCursor(props); });
-exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"], ["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"])), function (props) { return getUncheckedBackground(props); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getCheckboxCursor(props); });
-exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        background-image: url('", "');\n    }\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        background-image: url('", "');\n    }\n"])), exports.CheckboxIndicator, function (props) { return getCheckedBackground(props); });
+exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n\n    svg {\n        display: block;\n        width: 100%;\n        height: 100%;\n    }\n\n    .checkbox-indicator-checked {\n        display: none;\n    }\n\n    .checkbox-indicator-idle {\n        display: block;\n    }\n"], ["\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n\n    svg {\n        display: block;\n        width: 100%;\n        height: 100%;\n    }\n\n    .checkbox-indicator-checked {\n        display: none;\n    }\n\n    .checkbox-indicator-idle {\n        display: block;\n    }\n"])), function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getCheckboxCursor(props); });
+exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        .checkbox-indicator-checked {\n            display: block;\n        }\n\n        .checkbox-indicator-idle {\n            display: none;\n        }\n    }\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        .checkbox-indicator-checked {\n            display: block;\n        }\n\n        .checkbox-indicator-idle {\n            display: none;\n        }\n    }\n"])), exports.CheckboxIndicator);
 exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"], ["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"])), function (props) { return getCheckboxCursor(props); }, function (props) {
     if (props.disabled)
         return 'var(--dark-opacity-25)';

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

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("@testing-library/react");
+var server_1 = require("react-dom/server");
 var Checkbox_1 = __importDefault(require("./Checkbox"));
 var props_1 = require("./props");
 var renderCheckbox = function (props) {
@@ -31,8 +32,32 @@ describe('Checkbox', function () {
         var container = renderCheckbox({ isCheckable: false }).container;
         expect(container.querySelector('label')).toHaveStyle({ cursor: 'default' });
     });
-    it('renders success variant when checked', function () {
-        renderCheckbox({ variant: 'success', checked: true });
-        expect(react_1.screen.getByText('Seçenek')).toBeInTheDocument();
+    it('paints the checked indicator with var(--primary) instead of a resolved hex', function () {
+        var container = renderCheckbox({ checked: true, onChange: jest.fn() }).container;
+        var checkedSvg = container.querySelector('.checkbox-indicator-checked svg');
+        expect(checkedSvg).toHaveAttribute('color', 'var(--primary)');
+    });
+    it('paints the success variant with var(--green)', function () {
+        var container = renderCheckbox({
+            variant: 'success',
+            checked: true,
+            onChange: jest.fn(),
+        }).container;
+        var checkedSvg = container.querySelector('.checkbox-indicator-checked svg');
+        expect(checkedSvg).toHaveAttribute('color', 'var(--green)');
+    });
+    it('uses the color prop as an SSR-safe override', function () {
+        var container = renderCheckbox({
+            checked: true,
+            color: '#00aa88',
+            onChange: jest.fn(),
+        }).container;
+        var checkedSvg = container.querySelector('.checkbox-indicator-checked svg');
+        expect(checkedSvg).toHaveAttribute('color', '#00aa88');
+    });
+    it('does not snapshot indicator SVGs into data URIs', function () {
+        var html = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(Checkbox_1.default, __assign({}, props_1.CheckboxDefault, { id: "ssr-checkbox", label: "Se\u00E7enek", checked: true, onChange: function () { return undefined; } })));
+        expect(html).toContain('var(--primary)');
+        expect(html).not.toContain('data:image/svg+xml');
     });
 });

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { CheckboxProps } from "./props";
+type CheckboxIndicatorIconsProps = {
+    disabled?: boolean;
+    valid?: boolean;
+    color?: string;
+    variant?: CheckboxProps["variant"];
+};
+declare const CheckboxIndicatorIcons: ({ disabled, valid, color, variant, }: CheckboxIndicatorIconsProps) => React.JSX.Element;
+export default CheckboxIndicatorIcons;

package/dist/components/Checkbox/CheckboxIndicator.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var CheckboxIndicatorIcons = function (_a) {
+    var disabled = _a.disabled, _b = _a.valid, valid = _b === void 0 ? true : _b, color = _a.color, variant = _a.variant;
+    var checkedColor = color || (variant === "success" ? "var(--green)" : "var(--primary)");
+    var idleName = disabled
+        ? "CheckboxElementDisabled"
+        : valid
+            ? "CheckboxElementUncheck"
+            : "CheckboxElementInvalid";
+    var idleColor = disabled || valid ? "currentColor" : "var(--red)";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "checkbox-indicator-idle", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: idleName, color: idleColor }) })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "checkbox-indicator-checked", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "CheckboxElementChecked", color: checkedColor }) }))] }));
+};
+exports.default = CheckboxIndicatorIcons;

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

@@ -37,12 +37,9 @@ export interface CheckboxStyledProps {
     name?: string;
     id?: string;
     label?: React.ReactNode;
-    $color?: string;
     $verticalAlign?: string;
     $required?: boolean;
     $isCheckable?: boolean;
-    $variant?: VARIANT;
-    $checkedColor?: string;
 }
 export declare const CheckboxDefault: Checkbox;
 export type CheckboxProps = typeof CheckboxDefault;

package/dist/components/Modal/Modal.js

@@ -36,36 +36,27 @@ var Divider_1 = __importDefault(require("../Divider"));
 var TextLink_1 = __importDefault(require("../TextLink"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var react_i18next_1 = require("react-i18next");
+var bodyScrollLock_1 = require("./core/bodyScrollLock");
 var Modal = function (_a) {
     var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showSkipButton, showSkipButton = _d === void 0 ? props_1.ModalDefault.showSkipButton : _d, _e = _a.skipButtonText, skipButtonText = _e === void 0 ? props_1.ModalDefault.skipButtonText : _e, _f = _a.onSkip, onSkip = _f === void 0 ? props_1.ModalDefault.onSkip : _f, _g = _a.showBackIcon, showBackIcon = _g === void 0 ? props_1.ModalDefault.showBackIcon : _g, _h = _a.backIconType, backIconType = _h === void 0 ? props_1.ModalDefault.backIconType : _h, _j = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _j === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _j, _k = _a.onClose, onClose = _k === void 0 ? props_1.ModalDefault.onClose : _k, _l = _a.onBack, onBack = _l === void 0 ? props_1.ModalDefault.onBack : _l, _m = _a.show, show = _m === void 0 ? props_1.ModalDefault.show : _m, _o = _a.showDivider, showDivider = _o === void 0 ? props_1.ModalDefault.showDivider : _o, _p = _a.title, title = _p === void 0 ? props_1.ModalDefault.title : _p, _q = _a.children, children = _q === void 0 ? props_1.ModalDefault.children : _q, _r = _a.modalFooter, modalFooter = _r === void 0 ? props_1.ModalDefault.modalFooter : _r, _s = _a.showPrimaryButton, showPrimaryButton = _s === void 0 ? props_1.ModalDefault.showPrimaryButton : _s, _t = _a.showSecondaryButton, showSecondaryButton = _t === void 0 ? props_1.ModalDefault.showSecondaryButton : _t, _u = _a.onPrimaryAction, onPrimaryAction = _u === void 0 ? props_1.ModalDefault.onPrimaryAction : _u, _v = _a.onSecondaryAction, onSecondaryAction = _v === void 0 ? props_1.ModalDefault.onSecondaryAction : _v, _w = _a.buttonsAlignment, buttonsAlignment = _w === void 0 ? props_1.ModalDefault.buttonsAlignment : _w, _x = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _x === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _x, _y = _a.primaryButtonText, primaryButtonText = _y === void 0 ? props_1.ModalDefault.primaryButtonText : _y, _z = _a.secondaryButtonText, secondaryButtonText = _z === void 0 ? props_1.ModalDefault.secondaryButtonText : _z, _0 = _a.showHeaderBorder, showHeaderBorder = _0 === void 0 ? props_1.ModalDefault.showHeaderBorder : _0, _1 = _a.showFooterBorder, showFooterBorder = _1 === void 0 ? props_1.ModalDefault.showFooterBorder : _1, _2 = _a.autoHeight, autoHeight = _2 === void 0 ? props_1.ModalDefault.autoHeight : _2, _3 = _a.titleAlignment, titleAlignment = _3 === void 0 ? props_1.ModalDefault.titleAlignment : _3, _4 = _a.titleDescription, titleDescription = _4 === void 0 ? props_1.ModalDefault.titleDescription : _4, _5 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _5, _6 = _a.primaryButtonIcon, primaryButtonIcon = _6 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _6, _7 = _a.secondaryButtonIcon, secondaryButtonIcon = _7 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _7, _8 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _8 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _8, _9 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _9 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _9, _10 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _10 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _10, _11 = _a.primaryButtonWidth, primaryButtonWidth = _11 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _11, _12 = _a.secondaryButtonWidth, secondaryButtonWidth = _12 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _12, _13 = _a.customContent, customContent = _13 === void 0 ? props_1.ModalDefault.customContent : _13, _14 = _a.showHeader, showHeader = _14 === void 0 ? props_1.ModalDefault.showHeader : _14, _15 = _a.id, id = _15 === void 0 ? props_1.ModalDefault.id : _15, _16 = _a.renderInDOM, renderInDOM = _16 === void 0 ? props_1.ModalDefault.renderInDOM : _16, _17 = _a.portalContainer, portalContainer = _17 === void 0 ? props_1.ModalDefault.portalContainer : _17, _18 = _a.hasHeaderMinHeight, hasHeaderMinHeight = _18 === void 0 ? props_1.ModalDefault.hasHeaderMinHeight : _18, other = __rest(_a, ["size", "showCloseIcon", "showSkipButton", "skipButtonText", "onSkip", "showBackIcon", "backIconType", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "showHeader", "id", "renderInDOM", "portalContainer", "hasHeaderMinHeight"]);
-    var generatedId = (0, react_1.useId)();
     var t = (0, react_i18next_1.useTranslation)().t;
     var _19 = (0, react_1.useState)(show), showModal = _19[0], setShowModal = _19[1];
-    var _20 = (0, react_1.useState)(null), uniqueId = _20[0], setUniqueId = _20[1];
-    var _21 = (0, react_1.useState)(null), defaultPortalContainer = _21[0], setDefaultPortalContainer = _21[1];
-    (0, react_1.useEffect)(function () {
-        if (!uniqueId) {
-            setUniqueId(generatedId);
-        }
-    }, [uniqueId, generatedId]);
+    var _20 = (0, react_1.useState)(null), defaultPortalContainer = _20[0], setDefaultPortalContainer = _20[1];
     (0, react_1.useEffect)(function () {
         setDefaultPortalContainer(document.body);
     }, []);
     var resolvedPortalContainer = portalContainer !== null && portalContainer !== void 0 ? portalContainer : defaultPortalContainer;
     (0, react_1.useEffect)(function () {
-        if (!uniqueId)
-            return;
         setShowModal(show);
-        var modalClass = "modalActive_".concat(uniqueId);
-        if (!show) {
-            if (document.body.classList.contains(modalClass)) {
-                document.body.classList.remove(modalClass);
-            }
-        }
-        else if (!document.body.classList.contains(modalClass)) {
-            document.body.classList.add(modalClass);
-        }
-    }, [show, uniqueId]);
+    }, [show]);
+    (0, react_1.useEffect)(function () {
+        if (!showModal)
+            return undefined;
+        (0, bodyScrollLock_1.lockBodyScroll)();
+        return function () {
+            (0, bodyScrollLock_1.unlockBodyScroll)();
+        };
+    }, [showModal]);
     var handleClose = function () {
         if (onClose) {
             onClose();

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

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

package/dist/components/Modal/Modal.test.js

@@ -0,0 +1,62 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var Modal_1 = __importDefault(require("./Modal"));
+var props_1 = require("./props");
+var bodyScrollLock_1 = require("./core/bodyScrollLock");
+var modalProps = function (overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return (__assign(__assign(__assign({}, props_1.ModalDefault), { title: 'Başlık', showBackIcon: false, showCloseIcon: true, showPrimaryButton: false, showSecondaryButton: false }), overrides));
+};
+var renderModal = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, modalProps(props))));
+};
+describe('Modal body scroll lock', function () {
+    afterEach(function () {
+        (0, react_1.cleanup)();
+        (0, bodyScrollLock_1.resetBodyScrollLock)();
+    });
+    it('locks body scroll while open', function () {
+        renderModal({ onClose: jest.fn() });
+        expect(document.body).toHaveClass(bodyScrollLock_1.MODAL_BODY_LOCK_CLASS);
+    });
+    it('unlocks body scroll when show becomes false', function () {
+        var rerender = renderModal({ onClose: jest.fn() }).rerender;
+        rerender((0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, modalProps({ show: false, onClose: jest.fn() }))));
+        expect(document.body).not.toHaveClass(bodyScrollLock_1.MODAL_BODY_LOCK_CLASS);
+    });
+    it('unlocks body scroll when the open modal unmounts', function () {
+        var unmount = renderModal({ onClose: jest.fn() }).unmount;
+        unmount();
+        expect(document.body).not.toHaveClass(bodyScrollLock_1.MODAL_BODY_LOCK_CLASS);
+    });
+    it('keeps scroll locked while a stacked modal remains open', function () {
+        var rerender = (0, react_1.render)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, modalProps({ title: 'Bir', showCloseIcon: false }))), (0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, modalProps({ title: 'İki', showCloseIcon: false })))] })).rerender;
+        expect(document.body).toHaveClass(bodyScrollLock_1.MODAL_BODY_LOCK_CLASS);
+        rerender((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, modalProps({ title: 'Bir', showCloseIcon: false }))), (0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, modalProps({ title: 'İki', show: false, showCloseIcon: false })))] }));
+        expect(document.body).toHaveClass(bodyScrollLock_1.MODAL_BODY_LOCK_CLASS);
+        rerender((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, modalProps({ title: 'Bir', show: false, showCloseIcon: false }))), (0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, modalProps({ title: 'İki', show: false, showCloseIcon: false })))] }));
+        expect(document.body).not.toHaveClass(bodyScrollLock_1.MODAL_BODY_LOCK_CLASS);
+    });
+    it('unlocks body scroll when closed via the close icon without onClose', function () {
+        renderModal();
+        react_1.fireEvent.click(document.querySelector('.header .icon'));
+        expect(document.body).not.toHaveClass(bodyScrollLock_1.MODAL_BODY_LOCK_CLASS);
+    });
+});

package/dist/components/Modal/core/bodyScrollLock.d.ts

@@ -0,0 +1,4 @@
+export declare const MODAL_BODY_LOCK_CLASS = "modalActive";
+export declare const lockBodyScroll: () => void;
+export declare const unlockBodyScroll: () => void;
+export declare const resetBodyScrollLock: () => void;

package/dist/components/Modal/core/bodyScrollLock.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetBodyScrollLock = exports.unlockBodyScroll = exports.lockBodyScroll = exports.MODAL_BODY_LOCK_CLASS = void 0;
+exports.MODAL_BODY_LOCK_CLASS = 'modalActive';
+var lockCount = 0;
+var lockBodyScroll = function () {
+    if (typeof document === 'undefined')
+        return;
+    lockCount += 1;
+    if (lockCount === 1) {
+        document.body.classList.add(exports.MODAL_BODY_LOCK_CLASS);
+    }
+};
+exports.lockBodyScroll = lockBodyScroll;
+var unlockBodyScroll = function () {
+    if (typeof document === 'undefined')
+        return;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0) {
+        document.body.classList.remove(exports.MODAL_BODY_LOCK_CLASS);
+    }
+};
+exports.unlockBodyScroll = unlockBodyScroll;
+var resetBodyScrollLock = function () {
+    lockCount = 0;
+    if (typeof document !== 'undefined') {
+        document.body.classList.remove(exports.MODAL_BODY_LOCK_CLASS);
+    }
+};
+exports.resetBodyScrollLock = resetBodyScrollLock;

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

@@ -585,3 +585,20 @@ export declare const Interactive: {
         onClose: (e: any) => void;
     };
 };
+export declare const NestedModals: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        id: string;
+        title: string;
+        children: React.JSX.Element;
+        showBackIcon: boolean;
+        showCloseIcon: boolean;
+        show: boolean;
+        showPrimaryButton: boolean;
+        showSecondaryButton: boolean;
+        hasCloseOnOutsideClick: boolean;
+        primaryButtonText: string;
+        secondaryButtonText: string;
+        onClose: (e: any) => void;
+    };
+};

package/dist/components/Modal/stories/Modal.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.Interactive = exports.WithButtonIcons = exports.AutoHeight = exports.VerticalButtons = exports.Hidden = exports.RenderInDOM = exports.WithHeaderAndFooterBorders = exports.WithTitleDescription = exports.TitleCenter = exports.TitleLeft = exports.Minimal = exports.SecondaryButtonDisabled = exports.PrimaryButtonDisabled = exports.SecondaryButtonLoading = exports.PrimaryButtonLoading = exports.WithoutHeader = exports.Large = exports.Medium = exports.Small = exports.XSmall = exports.XXSmall = exports.WithTextLinkBackIcon = exports.WithSkipButtonAndCallback = exports.WithSkipButton = exports.Type6 = exports.Type5 = exports.Type4 = exports.Type3 = exports.Type2 = exports.Type1 = exports.Default = void 0;
+exports.NestedModals = exports.Interactive = exports.WithButtonIcons = exports.AutoHeight = exports.VerticalButtons = exports.Hidden = exports.RenderInDOM = exports.WithHeaderAndFooterBorders = exports.WithTitleDescription = exports.TitleCenter = exports.TitleLeft = exports.Minimal = exports.SecondaryButtonDisabled = exports.PrimaryButtonDisabled = exports.SecondaryButtonLoading = exports.PrimaryButtonLoading = exports.WithoutHeader = exports.Large = exports.Medium = exports.Small = exports.XSmall = exports.XXSmall = exports.WithTextLinkBackIcon = exports.WithSkipButtonAndCallback = exports.WithSkipButton = exports.Type6 = exports.Type5 = exports.Type4 = exports.Type3 = exports.Type2 = exports.Type1 = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var Modal_1 = __importDefault(require("../Modal"));
@@ -272,3 +272,16 @@ exports.Interactive = {
     render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
     args: __assign(__assign({}, exports.Default.args), { id: "modal_interactive", title: "Interactive Modal", children: (0, jsx_runtime_1.jsx)("div", { children: "A\u00E7/kapa davran\u0131\u015F\u0131n\u0131 buradan test edebilirsin." }) }),
 };
+var NestedModalsStory = function (args) {
+    var _a = react_1.default.useState(false), showOuter = _a[0], setShowOuter = _a[1];
+    var _b = react_1.default.useState(false), showInner = _b[0], setShowInner = _b[1];
+    var closeOuter = function () {
+        setShowInner(false);
+        setShowOuter(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setShowOuter(true); } }, { children: "D\u0131\u015F modal\u0131 a\u00E7" })), (0, jsx_runtime_1.jsx)(Modal_1.default, __assign({}, args, { show: showOuter, id: "modal_nested_outer", title: "D\u0131\u015F modal", hasCloseOnOutsideClick: !showInner, onClose: closeOuter, onBack: closeOuter, showSecondaryButton: false, primaryButtonText: "\u0130\u00E7 modal\u0131 a\u00E7", onPrimaryAction: function () { return setShowInner(true); } }, { children: (0, jsx_runtime_1.jsx)("div", { children: "\u0130\u00E7 modal\u0131 a\u00E7\u0131nca body scroll kilitli kalmal\u0131. \u0130\u00E7 modal\u0131 kapat\u0131nca bu modal a\u00E7\u0131k kalmal\u0131." }) })), (0, jsx_runtime_1.jsx)(Modal_1.default, __assign({ show: showInner, id: "modal_nested_inner", size: "small", showDivider: false, title: "\u0130\u00E7 modal", showBackIcon: false, showCloseIcon: true, showPrimaryButton: false, showSecondaryButton: false, onClose: function () { return setShowInner(false); } }, { children: (0, jsx_runtime_1.jsx)("div", { children: "Kapat\u0131nca d\u0131\u015F modal duruyor; her ikisi kapan\u0131nca scroll a\u00E7\u0131l\u0131yor." }) }))] }));
+};
+exports.NestedModals = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(NestedModalsStory, __assign({}, args)); },
+    args: __assign(__assign({}, exports.Default.args), { id: "modal_nested_outer", title: "Dış modal", children: (0, jsx_runtime_1.jsx)("div", { children: "\u0130\u00E7 i\u00E7e modal \u00F6rne\u011Fi" }) }),
+};

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

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

package/dist/components/RadioButton/RadioButton.test.js

@@ -0,0 +1,97 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var server_1 = require("react-dom/server");
+var RadioButton_1 = __importDefault(require("./RadioButton"));
+var renderRadio = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(RadioButton_1.default, __assign({ id: "radio-test", name: "group", label: "Se\u00E7enek" }, props)));
+};
+describe('RadioButton', function () {
+    it('renders a radio input', function () {
+        renderRadio();
+        expect(react_1.screen.getByRole('radio')).toBeInTheDocument();
+    });
+    it('paints the checked indicator with var(--primary) instead of a resolved hex', function () {
+        var container = renderRadio({ checked: true, onChange: jest.fn() }).container;
+        var checkedSvg = container.querySelector('.radio-indicator-checked svg');
+        expect(checkedSvg).toHaveAttribute('color', 'var(--primary)');
+    });
+    it('uses the color prop as an SSR-safe override', function () {
+        var container = renderRadio({ checked: true, color: '#00aa88', onChange: jest.fn() }).container;
+        var checkedSvg = container.querySelector('.radio-indicator-checked svg');
+        expect(checkedSvg).toHaveAttribute('color', '#00aa88');
+    });
+    it('does not snapshot indicator SVGs into data URIs', function () {
+        var html = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: "ssr-radio", name: "group", label: "Se\u00E7enek", checked: true, onChange: function () { return undefined; } }));
+        expect(html).toContain('var(--primary)');
+        expect(html).not.toContain('data:image/svg+xml');
+    });
+    it('calls onChange when selected', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    renderRadio({ onChange: onChange });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('radio'))];
+                case 1:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -0,0 +1,10 @@
+import React from "react";
+type RadioIndicatorIconsProps = {
+    disabled?: boolean;
+    valid?: boolean;
+    hasError?: boolean;
+    color?: string;
+    checkedGlyphWhenDisabled?: boolean;
+};
+declare const RadioIndicatorIcons: ({ disabled, valid, hasError, color, checkedGlyphWhenDisabled, }: RadioIndicatorIconsProps) => React.JSX.Element;
+export default RadioIndicatorIcons;

package/dist/components/RadioButton/RadioIndicator.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var RadioIndicatorIcons = function (_a) {
+    var disabled = _a.disabled, _b = _a.valid, valid = _b === void 0 ? true : _b, hasError = _a.hasError, color = _a.color, checkedGlyphWhenDisabled = _a.checkedGlyphWhenDisabled;
+    var checkedColor = color || "var(--primary)";
+    var idleName = disabled
+        ? checkedGlyphWhenDisabled
+            ? "RadioButtonElementChecked"
+            : "RadioButtonElementDisabled"
+        : hasError || !valid
+            ? "RadioButtonElementInvalid"
+            : "RadioButtonElementUnchecked";
+    var idleColor = disabled
+        ? "var(--dark-opacity-25)"
+        : hasError || !valid
+            ? "var(--red)"
+            : "currentColor";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "radio-indicator-idle", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: idleName, color: idleColor }) })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "radio-indicator-checked", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementChecked", color: checkedColor }) }))] }));
+};
+exports.default = RadioIndicatorIcons;

package/dist/components/RadioButton/RadioIndicator.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const radioIndicatorIconStyles: import("styled-components").RuleSet<object>;
+export declare const radioIndicatorCheckedStyles: import("styled-components").RuleSet<object>;

package/dist/components/RadioButton/RadioIndicator.styled.js

@@ -0,0 +1,11 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radioIndicatorCheckedStyles = exports.radioIndicatorIconStyles = void 0;
+var styled_components_1 = require("styled-components");
+exports.radioIndicatorIconStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .radio-indicator-checked {\n    display: none;\n  }\n\n  .radio-indicator-idle {\n    display: block;\n  }\n"], ["\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .radio-indicator-checked {\n    display: none;\n  }\n\n  .radio-indicator-idle {\n    display: block;\n  }\n"])));
+exports.radioIndicatorCheckedStyles = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .radio-indicator-checked {\n    display: block;\n  }\n\n  .radio-indicator-idle {\n    display: none;\n  }\n"], ["\n  .radio-indicator-checked {\n    display: block;\n  }\n\n  .radio-indicator-idle {\n    display: none;\n  }\n"])));
+var templateObject_1, templateObject_2;

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