krl-alfred 2.23.16 → 2.23.18

package/dist/components/Button/Button.js

@@ -44,6 +44,6 @@ var Button = (0, react_1.forwardRef)(function (props, ref) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         e.currentTarget.blur();
     };
-    return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: handleClick, disabled: disabled, "$size": size, "$variant": variant, "$width": width, "$icon": icon, "$iconPosition": iconPosition, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize, iconPosition: iconPosition }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children && (0, jsx_runtime_1.jsx)("span", { children: children })] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: handleClick, disabled: disabled, "$size": size, "$variant": variant, "$width": width, "$icon": icon, "$iconPosition": iconPosition, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize, iconPosition: iconPosition }, { children: [isLoading && ((0, jsx_runtime_1.jsx)(Button_styled_1.LoadingContent, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) })), children && (0, jsx_runtime_1.jsx)("span", { children: children })] })), tooltip && (0, jsx_runtime_1.jsx)(Button_styled_1.ButtonTooltip, { children: tooltip })] })));
 });
 exports.default = Button;

package/dist/components/Button/Button.styled.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { ButtonStyledProps } from "./props";
+export declare const LoadingContent: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const ButtonTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
 export declare const ButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
 }, ButtonStyledProps>> & string;

package/dist/components/Button/Button.styled.js

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconStyled = exports.ButtonStyled = void 0;
+exports.IconStyled = exports.ButtonStyled = exports.ButtonTooltip = exports.LoadingContent = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--primary-initial);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: var(--primary-initial);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
@@ -100,7 +100,9 @@ var ghost = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-exports.ButtonStyled = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n    svg{\n      color: inherit;\n    }\n  }\n  .buttonTooltip{\n    position: absolute;\n    right: 0;\n    top: calc(100% + 5px);\n    background: white;\n    color: var(--dark);\n    font: var(--caption-medium-10-12);\n    padding: 0.5rem 1rem;\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    user-select: none;\n    pointer-events: none;\n    transition: all .2s ease;\n    opacity: 0;\n    transition-delay: 0s;\n  }\n  &:hover{\n    .buttonTooltip{\n      opacity: 1;\n      transition-delay: 0.5s;\n    }\n  }\n  &:is(.loading) {\n    user-select: none;\n    pointer-events: none;\n    .children{\n      > span{\n        opacity: 0;\n      } \n    }\n    > *:not(.children){\n      opacity: 0;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n    svg{\n      color: inherit;\n    }\n  }\n  .buttonTooltip{\n    position: absolute;\n    right: 0;\n    top: calc(100% + 5px);\n    background: white;\n    color: var(--dark);\n    font: var(--caption-medium-10-12);\n    padding: 0.5rem 1rem;\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    user-select: none;\n    pointer-events: none;\n    transition: all .2s ease;\n    opacity: 0;\n    transition-delay: 0s;\n  }\n  &:hover{\n    .buttonTooltip{\n      opacity: 1;\n      transition-delay: 0.5s;\n    }\n  }\n  &:is(.loading) {\n    user-select: none;\n    pointer-events: none;\n    .children{\n      > span{\n        opacity: 0;\n      } \n    }\n    > *:not(.children){\n      opacity: 0;\n    }\n  }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
+exports.LoadingContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  background-color: inherit;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 5;\n  border-radius: inherit;\n\n  svg {\n    color: inherit;\n  }\n"], ["\n  position: absolute;\n  background-color: inherit;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 5;\n  border-radius: inherit;\n\n  svg {\n    color: inherit;\n  }\n"])));
+exports.ButtonTooltip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: white;\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"], ["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: white;\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"])));
+exports.ButtonStyled = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  &:hover {\n    ", " {\n      opacity: 1;\n      transition-delay: 0.5s;\n    }\n  }\n  &:is(.loading) {\n    user-select: none;\n    pointer-events: none;\n    .children{\n      > span{\n        opacity: 0;\n      } \n    }\n    > *:not(.children){\n      opacity: 0;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  &:hover {\n    ", " {\n      opacity: 1;\n      transition-delay: 0.5s;\n    }\n  }\n  &:is(.loading) {\n    user-select: none;\n    pointer-events: none;\n    .children{\n      > span{\n        opacity: 0;\n      } \n    }\n    > *:not(.children){\n      opacity: 0;\n    }\n  }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
     switch (props.$variant) {
         case 'primary':
             return primary;
@@ -128,6 +130,6 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_6 || (t
         default:
             return "48px";
     }
-}, function (props) { return props.$icon && !props.$isLoading && props.$iconPosition !== 'left' ? "10px" : "0"; });
-exports.IconStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  svg{\n    width: ", ";\n    height: ", ";\n    transition: all .2s ease;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  svg{\n    width: ", ";\n    height: ", ";\n    transition: all .2s ease;\n  }\n"])), function (props) { return props.$iconPosition === 'left' && props.$icon ? "10px" : "0"; }, function (props) { return props.$iconSize && props.$iconSize; }, function (props) { return props.$iconSize && props.$iconSize; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+}, function (props) { return props.$icon && !props.$isLoading && props.$iconPosition !== 'left' ? "10px" : "0"; }, exports.ButtonTooltip);
+exports.IconStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  svg{\n    width: ", ";\n    height: ", ";\n    transition: all .2s ease;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  svg{\n    width: ", ";\n    height: ", ";\n    transition: all .2s ease;\n  }\n"])), function (props) { return props.$iconPosition === 'left' && props.$icon ? "10px" : "0"; }, function (props) { return props.$iconSize && props.$iconSize; }, function (props) { return props.$iconSize && props.$iconSize; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

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

package/dist/components/Checkbox/Checkbox.js

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var Checkbox_1 = __importDefault(require("./Checkbox"));
+var props_1 = require("./props");
+var renderCheckbox = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Checkbox_1.default, __assign({}, props_1.CheckboxDefault, { id: "checkbox-test", label: "Se\u00E7enek" }, props)));
+};
+describe('Checkbox', function () {
+    it('uses pointer cursor by default', function () {
+        var container = renderCheckbox().container;
+        expect(container.querySelector('label')).toHaveStyle({ cursor: 'pointer' });
+    });
+    it('uses default cursor when isCheckable is false', function () {
+        var container = renderCheckbox({ isCheckable: false }).container;
+        expect(container.querySelector('label')).toHaveStyle({ cursor: 'default' });
+    });
+    it('renders success variant when checked', function () {
+        renderCheckbox({ variant: 'success', checked: true });
+        expect(react_1.screen.getByText('Seçenek')).toBeInTheDocument();
+    });
+});

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

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

package/dist/components/Checkbox/props.js

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

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

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

package/dist/components/Checkbox/stories/Checkbox.stories.js

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

package/dist/components/Input/Input.js

@@ -203,6 +203,6 @@ var Input = function (_a) {
                                 } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
                                 onChange(e);
                                 setInputValue(e.currentTarget.value);
-                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description }), hasError && errorMessage && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
+                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] }));
 };
 exports.default = Input;

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

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

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

@@ -26,7 +26,7 @@ exports.Inner = styled_components_1.default.div(templateObject_2 || (templateObj
 exports.LeftContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: auto;\n  position: relative;\n"])));
 exports.Indicator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  flex: 0 0 auto;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  display: block;\n  position: relative;\n  margin: 0 ", " 0 0;\n  width: ", ";\n  height: ", ";\n"])), function (props) {
     if (props.$disabled) {
-        return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" }));
+        return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementChecked" }));
     }
     if (props.$hasError) {
         return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }));
@@ -41,7 +41,7 @@ exports.Indicator = styled_components_1.default.div(templateObject_4 || (templat
 }, function (props) { return props.$labelOffset || "0.5rem"; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); });
 exports.LabelContent = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  align-items: center;\n  justify-content: flex-start;\n"], ["\n  display: grid;\n  align-items: center;\n  justify-content: flex-start;\n"])));
 exports.LabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  justify-content: flex-start;\n  flex-direction: ", ";\n  font: var(--body-semi-bold-14-17);\n  row-gap: ", ";\n\n  @media only screen and ", " {\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  justify-content: flex-start;\n  flex-direction: ", ";\n  font: var(--body-semi-bold-14-17);\n  row-gap: ", ";\n\n  @media only screen and ", " {\n    ", "\n  }\n"])), function (props) { return (props.$titleBadgeBelow ? "flex-start" : "center"); }, function (props) { return (props.$titleBadgeBelow ? "column" : "row"); }, function (props) { return (props.$titleBadgeBelow ? "0.25rem" : "0"); }, devices_1.devices.sm, function (props) { return !props.$titleBadgeBelow && "display: block;"; });
-exports.TitleLabel = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+exports.TitleLabel = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  min-width: 0;\n\n  img,\n  svg {\n    flex-shrink: 0;\n    display: block;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  min-width: 0;\n\n  img,\n  svg {\n    flex-shrink: 0;\n    display: block;\n  }\n"])));
 exports.BadgesWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin-left: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin-left: ", ";\n  margin-top: ", ";\n"])), function (props) { return (props.$titleBadgeBelow ? "0" : "1rem"); }, function (props) { return (props.$titleBadgeBelow ? "0.25rem" : "0"); });
 exports.TitleBadgeTopRight = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"])));
 exports.Description = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: var(--dark-opacity-50);\n  font: var(--caption-medium-12-15);\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n  width: 100%;\n  display: block;\n\n  p {\n    margin: 0;\n  }\n\n  a {\n    color: inherit;\n  }\n"], ["\n  color: var(--dark-opacity-50);\n  font: var(--caption-medium-12-15);\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n  width: 100%;\n  display: block;\n\n  p {\n    margin: 0;\n  }\n\n  a {\n    color: inherit;\n  }\n"])));
@@ -52,7 +52,7 @@ exports.Price = styled_components_1.default.strong(templateObject_14 || (templat
 exports.TotalPrice = styled_components_1.default.strong(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"], ["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-semi-bold-12-15);\n"])));
 exports.TotalLabel = styled_components_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.sm);
 exports.ContentArea = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"], ["\n  width: 100%;\n  padding: 0 1.5rem 1.5rem;\n  box-sizing: border-box;\n  cursor: default;\n\n  @media only screen and ", " {\n    padding: 0 1rem 1rem;\n  }\n"])), devices_1.devices.sm);
-exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n  }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-3)' : 'white'; }, function (props) {
+exports.HorizontalBoxStyled = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n  }\n"], ["\n  display: block;\n  position: relative;\n  flex: none !important;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    border: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  ", "\n\n  ", " {\n    cursor: ", ";\n  }\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    ", "\n\n    ", "\n  }\n"])), function (props) {
     if (props.$disabled)
         return '1px solid var(--grey-10)';
     if (props.$hasError)

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

@@ -53,4 +53,15 @@ describe('RadioButton Horizontal', function () {
         var container = renderHorizontal({ innerMinHeight: 'initial' }).container;
         expect(container.querySelector('label > div')).toHaveStyle({ minHeight: 'initial' });
     });
+    it('renders title as ReactNode with image', function () {
+        renderHorizontal({
+            title: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: "/test.png", alt: "\u00DCr\u00FCn", "data-testid": "title-image" }), (0, jsx_runtime_1.jsx)("span", { children: "\u00D6zel ba\u015Fl\u0131k" })] })),
+        });
+        expect(react_1.screen.getByTestId('title-image')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Özel başlık')).toBeInTheDocument();
+    });
+    it('falls back to label when title is not provided', function () {
+        renderHorizontal({ label: 'Taksitli Ödeme' });
+        expect(react_1.screen.getByText('Taksitli Ödeme')).toBeInTheDocument();
+    });
 });

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

@@ -8,7 +8,7 @@ type SIZES = (typeof sizes)[number];
 type LAYOUTS = (typeof layouts)[number];
 type ALIGNMENTS = (typeof alignment)[number];
 type TEXTSIZES = (typeof textSizes)[number];
-interface RadioButton {
+export interface RadioButton {
     disabled?: boolean;
     value?: any;
     checked?: boolean;
@@ -20,6 +20,8 @@ interface RadioButton {
     labelOffset?: string;
     id?: string;
     label?: React.ReactNode;
+    /** Horizontal layout — başlık alanı (ReactNode; görsel vb. destekler). Verilmezse `label` kullanılır */
+    title?: React.ReactNode;
     description?: React.ReactNode;
     size?: SIZES;
     textSize?: TEXTSIZES;
@@ -55,7 +57,6 @@ interface RadioButton {
     hasError?: boolean;
     errorMessage?: React.ReactNode;
 }
-declare const RadioButtonDefault: RadioButton;
 export declare const BoxedDefault: RadioButton;
 export declare const BasicDefault: RadioButton;
 export declare const BoxedWithIconDefault: RadioButton;
@@ -75,5 +76,5 @@ export interface RadioButtonStyledProps {
     $verticalAlign?: string;
     $showIndicator?: boolean;
 }
-export type RadioButtonProps = typeof RadioButtonDefault;
+export type RadioButtonProps = RadioButton;
 export {};

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

@@ -393,6 +393,10 @@ export declare const HorizontalDisabled: {
         };
     };
 };
+export declare const HorizontalWithTitleImage: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
 export declare const HorizontalWithContent: {
     name: string;
     args: {

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

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

package/dist/components/RadioGroup/RadioGroup.js

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

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

@@ -37,4 +37,11 @@ describe('RadioGroup', function () {
             ] })).container;
         expect(container.querySelector('label > div')).toHaveStyle({ minHeight: 'initial' });
     });
+    it('forwards title as ReactNode from option to RadioButton', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "test-group", radioLayout: "horizontal", value: "a", options: [
+                __assign(__assign({}, baseOptions[0]), { title: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: "/test.png", alt: "\u00DCr\u00FCn", "data-testid": "title-image" }), (0, jsx_runtime_1.jsx)("span", { children: "\u00D6zel ba\u015Fl\u0131k" })] })) }),
+            ] }));
+        expect(react_1.screen.getByTestId('title-image')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Özel başlık')).toBeInTheDocument();
+    });
 });

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

@@ -11,6 +11,8 @@ type RADIOLAYOUTS = (typeof radioLayouts)[number];
 type ALIGNMENTS = (typeof alignments)[number];
 export interface RadioOption {
     label?: React.ReactNode;
+    /** Horizontal layout — başlık alanı (ReactNode; görsel vb. destekler). Verilmezse `label` kullanılır */
+    title?: React.ReactNode;
     value: any;
     disabled?: boolean;
     id?: string;

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

@@ -401,6 +401,35 @@ export declare const HorizontalInstallment: {
         gap: string;
     };
 };
+export declare const HorizontalInstallmentWithTitleImage: {
+    name: string;
+    args: {
+        name: string;
+        options: ({
+            title: React.JSX.Element;
+            value: string;
+            description: string;
+            rightContent: React.JSX.Element;
+            innerMinHeight: string;
+            label?: undefined;
+            price?: undefined;
+        } | {
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            title?: undefined;
+            rightContent?: undefined;
+            innerMinHeight?: undefined;
+        })[];
+        value: string;
+        onChange: (value: any) => void;
+        layout: string;
+        radioLayout: string;
+        gap: string;
+    };
+    render: (args: any) => React.JSX.Element;
+};
 export declare const HorizontalInstallmentWithError: {
     name: string;
     args: {

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallmentWithError = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
+exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallmentWithError = exports.HorizontalInstallmentWithTitleImage = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var RadioGroup_1 = __importDefault(require("../RadioGroup"));
@@ -389,6 +389,33 @@ exports.HorizontalInstallment = {
         gap: "0.75rem",
     },
 };
+exports.HorizontalInstallmentWithTitleImage = {
+    name: "Horizontal — title (ReactNode + görsel)",
+    args: {
+        name: "horizontalTitleImageRadioGroup",
+        options: [
+            {
+                title: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "", width: 32, height: 32, style: { borderRadius: "0.25rem", objectFit: "cover" } }), (0, jsx_runtime_1.jsx)("span", { children: "Etiyopya torres single" })] })),
+                value: "variant1",
+                description: "SKU-001 - Çekirdek kahve",
+                rightContent: ((0, jsx_runtime_1.jsx)("span", __assign({ style: { color: "var(--grey-50)", font: "var(--body-medium-13-16)" } }, { children: "3 varyasyon" }))),
+                innerMinHeight: "initial",
+            },
+            {
+                label: "Tek Çekim",
+                value: "single",
+                description: "Tek seferde ödeme yapın",
+                price: "12.500 TL",
+            },
+        ],
+        value: "variant1",
+        onChange: onChange,
+        layout: "vertical",
+        radioLayout: "horizontal",
+        gap: "0.75rem",
+    },
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, __assign({}, args)) }))); },
+};
 exports.HorizontalInstallmentWithError = {
     name: "Horizontal — error",
     args: __assign(__assign({}, exports.HorizontalInstallment.args), { name: "horizontalInstallmentErrorRadioGroup", hasError: true, options: horizontalOptions.map(function (option, index) {

package/package.json

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