krl-alfred 2.23.9 → 2.23.11

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.d.ts

@@ -1,4 +1,4 @@
 import { ProductCardCheckboxProps } from "./props";
 import React from "react";
-declare const ProductCardCheckbox: ({ hasCheckbox, title, content, checkboxId, size, productCardOnChange, disabled, value, name, isContentOffset, checked, image, hasBadge, badgeText, badgeVariant, infoText, infoTitle, popupWidth, valid, }: ProductCardCheckboxProps) => React.JSX.Element;
+declare const ProductCardCheckbox: ({ hasCheckbox, title, content, checkboxId, size, productCardOnChange, disabled, value, name, isContentOffset, checked, image, hasBadge, badgeText, badgeVariant, infoText, infoTitle, popupWidth, valid, isShowDropdown, dropdownList, dropdownWidth, dropdownRight, dropdownTop, }: ProductCardCheckboxProps) => React.JSX.Element;
 export default ProductCardCheckbox;

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.js

@@ -21,14 +21,17 @@ var ProductCardCheckbox_styled_1 = require("./ProductCardCheckbox.styled");
 var Checkbox_1 = __importDefault(require("../Checkbox"));
 var Badges_1 = __importDefault(require("../Badges"));
 var Tooltip_1 = __importDefault(require("../Tooltip"));
+var Dropdown_1 = __importDefault(require("../Dropdown"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
 var ProductCardCheckbox = function (_a) {
-    var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, _s = _a.infoText, infoText = _s === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _s, _t = _a.infoTitle, infoTitle = _t === void 0 ? props_1.ProductCardCheckboxDefault.infoTitle : _t, _u = _a.popupWidth, popupWidth = _u === void 0 ? props_1.ProductCardCheckboxDefault.popupWidth : _u, valid = _a.valid;
+    var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, _s = _a.infoText, infoText = _s === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _s, _t = _a.infoTitle, infoTitle = _t === void 0 ? props_1.ProductCardCheckboxDefault.infoTitle : _t, _u = _a.popupWidth, popupWidth = _u === void 0 ? props_1.ProductCardCheckboxDefault.popupWidth : _u, valid = _a.valid, _v = _a.isShowDropdown, isShowDropdown = _v === void 0 ? props_1.ProductCardCheckboxDefault.isShowDropdown : _v, _w = _a.dropdownList, dropdownList = _w === void 0 ? props_1.ProductCardCheckboxDefault.dropdownList : _w, _x = _a.dropdownWidth, dropdownWidth = _x === void 0 ? props_1.ProductCardCheckboxDefault.dropdownWidth : _x, _y = _a.dropdownRight, dropdownRight = _y === void 0 ? props_1.ProductCardCheckboxDefault.dropdownRight : _y, _z = _a.dropdownTop, dropdownTop = _z === void 0 ? props_1.ProductCardCheckboxDefault.dropdownTop : _z;
     var styledProps = {
         disabled: disabled,
         $isContentOffset: isContentOffset,
         $size: size,
         $hasBadge: hasBadge,
+        $hasCheckbox: hasCheckbox,
     };
-    return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId }, styledProps, { children: (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardInner, __assign({}, styledProps, { children: [hasBadge && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) })), (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxContent, __assign({ "$hidden": !hasCheckbox }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardImg, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardText, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardTitle, __assign({}, styledProps, { children: title })), (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.TooltipWrapper, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.InputIcon, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) })) })] }), content && ((0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardContent, __assign({ htmlFor: "notSelect_".concat(checkboxId) }, styledProps, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.HiddenInput, { id: "notSelect_".concat(checkboxId), readOnly: true, tabIndex: -1 }), content] })))] })) })));
+    return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId }, styledProps, { children: (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardInner, __assign({}, styledProps, { children: [hasBadge && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) })), (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardWrapper, __assign({ "$hasCheckbox": hasCheckbox }, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxContent, __assign({ "$hidden": !hasCheckbox }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid, labelOffset: size === "large" ? "1.5rem" : "0.5rem" }) })), image && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardImg, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardText, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardTitle, __assign({}, styledProps, { children: title })), (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardTitleActionsWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.TooltipWrapper, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.InputIcon, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) })) }), isShowDropdown && (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length) ? ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.DropdownToggleButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }) })); }, childrenVariant: "primary", right: dropdownRight, width: dropdownWidth, top: dropdownTop }) })) : null] })] })] })), content && ((0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardContent, __assign({ htmlFor: "notSelect_".concat(checkboxId) }, styledProps, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.HiddenInput, { id: "notSelect_".concat(checkboxId), readOnly: true, tabIndex: -1 }), content] })))] })) })));
 };
 exports.default = ProductCardCheckbox;

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

@@ -6,10 +6,14 @@ export declare const ProductCardCheckboxContent: import("styled-components/dist/
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
     $hidden?: boolean;
 }, never>>> & string;
+export declare const ProductCardWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
 export declare const ProductCardImg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ProductCardText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ProductCardTitleActionsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ProductCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
 export declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const DropdownToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const PopupText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ProductCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js

@@ -7,19 +7,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCardCheckboxStyled = exports.ProductCardInner = exports.HiddenInput = exports.ProductCardContent = exports.PopupText = exports.InputIcon = exports.TooltipWrapper = exports.ProductCardTitle = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardCheckboxContent = exports.BadgeWrapper = void 0;
+exports.ProductCardCheckboxStyled = exports.ProductCardInner = exports.HiddenInput = exports.ProductCardContent = exports.PopupText = exports.InputIcon = exports.DropdownToggleButton = exports.DropdownWrapper = exports.TooltipWrapper = exports.ProductCardTitle = exports.ProductCardTitleActionsWrapper = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardWrapper = exports.ProductCardCheckboxContent = exports.BadgeWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.BadgeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin: 0 auto 1rem 0;\n    grid-column-start: 1;\n    grid-column-end: 4;\n    width: 100%;\n    text-align: right;\n    height: 17px;\n\n    > * {\n        vertical-align: super;\n        display: inline-block;\n    }\n"], ["\n    margin: 0 auto 1rem 0;\n    grid-column-start: 1;\n    grid-column-end: 4;\n    width: 100%;\n    text-align: right;\n    height: 17px;\n\n    > * {\n        vertical-align: super;\n        display: inline-block;\n    }\n"])));
 exports.ProductCardCheckboxContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    ", "\n\n    > label > div {\n        margin-right: 24px;\n\n        @media only screen and ", " {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n    }\n"], ["\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    ", "\n\n    > label > div {\n        margin-right: 24px;\n\n        @media only screen and ", " {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n    }\n"])), function (props) { return props.$hidden && "display: none;"; }, devices_1.devices.md);
-exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0.375rem;\n        width: calc(100% - 0.75rem);\n        height: calc(100% - 0.75rem);\n        object-fit: cover;\n        object-position: center center;\n        border-radius: 0.5rem;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0.375rem;\n        width: calc(100% - 0.75rem);\n        height: calc(100% - 0.75rem);\n        object-fit: cover;\n        object-position: center center;\n        border-radius: 0.5rem;\n    }\n"])));
-exports.ProductCardText = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
-exports.ProductCardTitle = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    min-height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: start;\n    font: ", ";\n\n    @media only screen and ", " {\n        font: var(--body-semi-bold-14-17);\n    }\n"], ["\n    min-height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: start;\n    font: ", ";\n\n    @media only screen and ", " {\n        font: var(--body-semi-bold-14-17);\n    }\n"])), function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md);
-exports.TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    user-select: initial !important;\n    pointer-events: initial !important;\n    padding-left: 1rem;\n"], ["\n    user-select: initial !important;\n    pointer-events: initial !important;\n    padding-left: 1rem;\n"])));
-exports.InputIcon = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
-exports.PopupText = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font: var(--caption-medium-12-15);\n\n    a {\n        color: var(--primary);\n    }\n"], ["\n    font: var(--caption-medium-12-15);\n\n    a {\n        color: var(--primary);\n    }\n"])));
-exports.ProductCardContent = styled_components_1.default.label(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin: 1.5rem auto 0 ", ";\n    grid-column-start: 1;\n    grid-column-end: 4;\n    width: ", ";\n    cursor: initial;\n\n    @media only screen and ", " {\n        margin: 1rem auto 0 0 !important;\n        width: 100% !important;\n    }\n"], ["\n    margin: 1.5rem auto 0 ", ";\n    grid-column-start: 1;\n    grid-column-end: 4;\n    width: ", ";\n    cursor: initial;\n\n    @media only screen and ", " {\n        margin: 1rem auto 0 0 !important;\n        width: 100% !important;\n    }\n"])), function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
-exports.HiddenInput = styled_components_1.default.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
-exports.ProductCardInner = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"], ["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"])), devices_1.devices.md, function (props) { return props.$size === "small" && "\n        padding: 1rem;\n\n        ".concat(exports.ProductCardCheckboxContent, " > label > div {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n\n        ").concat(exports.ProductCardTitle, " {\n            font: var(--body-semi-bold-14-17);\n        }\n\n        ").concat(exports.ProductCardContent, " {\n            margin: 1rem auto 0 0;\n        }\n    "); });
-exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: block;\n    max-width: 634px;\n\n    ", "\n"], ["\n    display: block;\n    max-width: 634px;\n\n    ", "\n"])), function (props) { return props.disabled ? "\n        user-select:none;\n        pointer-events:none;\n      " : "\n        cursor: pointer;\n    "; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+exports.ProductCardWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n"])), function (props) { return (props.$hasCheckbox ? 'auto auto 1fr' : 'auto 1fr'); });
+exports.ProductCardImg = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0.375rem;\n        width: calc(100% - 0.75rem);\n        height: calc(100% - 0.75rem);\n        object-fit: cover;\n        object-position: center center;\n        border-radius: 0.5rem;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0.375rem;\n        width: calc(100% - 0.75rem);\n        height: calc(100% - 0.75rem);\n        object-fit: cover;\n        object-position: center center;\n        border-radius: 0.5rem;\n    }\n"])));
+exports.ProductCardText = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
+exports.ProductCardTitleActionsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n"], ["\n    display: flex;\n    align-items: center;\n"])));
+exports.ProductCardTitle = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    min-height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: start;\n    font: ", ";\n\n    @media only screen and ", " {\n        font: var(--body-semi-bold-14-17);\n    }\n"], ["\n    min-height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: start;\n    font: ", ";\n\n    @media only screen and ", " {\n        font: var(--body-semi-bold-14-17);\n    }\n"])), function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md);
+exports.TooltipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    user-select: initial !important;\n    pointer-events: initial !important;\n    padding-left: 1rem;\n"], ["\n    user-select: initial !important;\n    pointer-events: initial !important;\n    padding-left: 1rem;\n"])));
+exports.DropdownWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    padding-left: 1rem;\n"], ["\n    padding-left: 1rem;\n"])));
+exports.DropdownToggleButton = styled_components_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border: 0;\n    background: none;\n    color: var(--primary);\n"], ["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border: 0;\n    background: none;\n    color: var(--primary);\n"])));
+exports.InputIcon = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
+exports.PopupText = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font: var(--caption-medium-12-15);\n\n    a {\n        color: var(--primary);\n    }\n"], ["\n    font: var(--caption-medium-12-15);\n\n    a {\n        color: var(--primary);\n    }\n"])));
+exports.ProductCardContent = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin: 1.5rem auto 0 ", ";\n    display: block;\n    width: ", ";\n    cursor: initial;\n\n    @media only screen and ", " {\n        margin: 1rem auto 0 0 !important;\n        width: 100% !important;\n    }\n"], ["\n    margin: 1.5rem auto 0 ", ";\n    display: block;\n    width: ", ";\n    cursor: initial;\n\n    @media only screen and ", " {\n        margin: 1rem auto 0 0 !important;\n        width: 100% !important;\n    }\n"])), function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
+exports.HiddenInput = styled_components_1.default.input(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+exports.ProductCardInner = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: white;\n    display: block;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"], ["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 24px;\n    background-color: white;\n    display: block;\n\n    @media only screen and ", " {\n        padding: 1rem;\n    }\n\n    ", "\n"])), devices_1.devices.md, function (props) { return props.$size === "small" && "\n        padding: 1rem;\n\n        ".concat(exports.ProductCardCheckboxContent, " > label > div {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n\n        ").concat(exports.ProductCardTitle, " {\n            font: var(--body-semi-bold-14-17);\n        }\n\n        ").concat(exports.ProductCardContent, " {\n            margin: 1rem auto 0 0;\n        }\n    "); });
+exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    max-width: 634px;\n\n    ", "\n"], ["\n    display: block;\n    max-width: 634px;\n\n    ", "\n"])), function (props) { return props.disabled ? "\n        user-select:none;\n        pointer-events:none;\n      " : "\n        cursor: pointer;\n    "; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

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

@@ -22,6 +22,17 @@ interface ProductCardCheckbox {
     infoTitle?: string;
     popupWidth?: string;
     image?: React.ReactNode;
+    /** Dropdown menu */
+    isShowDropdown?: boolean;
+    dropdownList?: Array<{
+        title?: string;
+        icon?: any;
+        slug?: string;
+        onClick?: (e?: any) => void;
+    }>;
+    dropdownWidth?: string;
+    dropdownRight?: string;
+    dropdownTop?: string;
 }
 export declare const ProductCardCheckboxDefault: ProductCardCheckbox;
 export interface ProductCardCheckboxStyledProps {
@@ -29,6 +40,7 @@ export interface ProductCardCheckboxStyledProps {
     $size?: SIZES;
     $isContentOffset?: boolean;
     $hasBadge?: boolean;
+    $hasCheckbox?: boolean;
 }
 export type ProductCardCheckboxProps = typeof ProductCardCheckboxDefault;
 export {};

package/dist/components/ProductCardCheckbox/props.js

@@ -22,4 +22,9 @@ exports.ProductCardCheckboxDefault = {
     infoText: null,
     infoTitle: null,
     popupWidth: "302px",
+    isShowDropdown: false,
+    dropdownList: undefined,
+    dropdownWidth: "170px",
+    dropdownRight: "-12px",
+    dropdownTop: "calc(100% + 10px)",
 };

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

@@ -24,6 +24,12 @@ declare const _default: {
         checked: {
             control: string;
         };
+        isShowDropdown: {
+            control: string;
+        };
+        dropdownWidth: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -196,3 +202,24 @@ export declare const WithContentOffset: {
         infoText: string;
     };
 };
+export declare const WithDropdown: {
+    args: {
+        isShowDropdown: boolean;
+        dropdownWidth: string;
+        checkboxId: string;
+        dropdownList: {
+            title: string;
+            onClick: () => void;
+        }[];
+        title: string;
+        content: string;
+        valid: boolean;
+        productCardOnChange: () => void;
+        image: React.JSX.Element;
+        hasCheckbox: boolean;
+        size: string;
+        hasBadge: boolean;
+        badgeVariant: string;
+        infoText: string;
+    };
+};

package/dist/components/ProductCardCheckbox/stories/ProductCardCheckbox.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.WithContentOffset = exports.Invalid = exports.WithInfoText = exports.Large = exports.Small = exports.WithoutImage = exports.WithoutBadge = exports.WithoutCheckbox = exports.Disabled = exports.Checked = exports.Default = void 0;
+exports.WithDropdown = exports.WithContentOffset = exports.Invalid = exports.WithInfoText = exports.Large = exports.Small = exports.WithoutImage = exports.WithoutBadge = exports.WithoutCheckbox = exports.Disabled = exports.Checked = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardCheckbox_1 = __importDefault(require("../ProductCardCheckbox"));
 var props_1 = require("../props");
@@ -44,6 +44,8 @@ exports.default = {
         hasCheckbox: { control: 'boolean' },
         hasBadge: { control: 'boolean' },
         checked: { control: 'boolean' },
+        isShowDropdown: { control: 'boolean' },
+        dropdownWidth: { control: 'text' },
     }
 };
 exports.Default = {
@@ -79,3 +81,9 @@ exports.Invalid = {
 exports.WithContentOffset = {
     args: __assign(__assign({}, defaultArgs), { isContentOffset: true, checkboxId: "checkbox_offset" }),
 };
+exports.WithDropdown = {
+    args: __assign(__assign({}, defaultArgs), { isShowDropdown: true, dropdownWidth: "220px", checkboxId: "checkbox_with_dropdown", dropdownList: [
+            { title: "Özel 1", onClick: function () { return console.log("dropdown 1"); } },
+            { title: "Özel 2", onClick: function () { return console.log("dropdown 2"); } },
+        ] }),
+};

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -32,8 +32,8 @@ var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({
 var OrderedListIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 6h10M10 12h10M10 18h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 5.5h1.5V9M4 9h3M4.5 14.5c.8 0 1.5.5 1.5 1.25S5.3 17 4.5 17H4v1.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
 var HeadingIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 5v14M18 5v14M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
 var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.RichTextEditorDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.RichTextEditorDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.RichTextEditorDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.RichTextEditorDefault.errorMessage : _g, className = _a.className, id = _a.id, _h = _a.minHeight, minHeight = _h === void 0 ? props_1.RichTextEditorDefault.minHeight : _h;
-    var _j = (0, react_1.useState)(false), focused = _j[0], setFocused = _j[1];
+    var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, _d = _a.description, description = _d === void 0 ? props_1.RichTextEditorDefault.description : _d, value = _a.value, _e = _a.defaultValue, defaultValue = _e === void 0 ? props_1.RichTextEditorDefault.defaultValue : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? props_1.RichTextEditorDefault.disabled : _f, _g = _a.hasError, hasError = _g === void 0 ? props_1.RichTextEditorDefault.hasError : _g, _h = _a.errorMessage, errorMessage = _h === void 0 ? props_1.RichTextEditorDefault.errorMessage : _h, className = _a.className, id = _a.id, _j = _a.minHeight, minHeight = _j === void 0 ? props_1.RichTextEditorDefault.minHeight : _j;
+    var _k = (0, react_1.useState)(false), focused = _k[0], setFocused = _k[1];
     var isControlled = value !== undefined;
     var editor = (0, react_2.useEditor)({
         immediatelyRender: false,
@@ -110,7 +110,7 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
     }); }, [editor, disabled]);
     if (!editor)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), description && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldDescription, { children: description }), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
 });
 RichTextEditor.displayName = 'RichTextEditor';
 exports.default = RichTextEditor;

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

@@ -22,6 +22,7 @@ export declare const EditorContentArea: import("styled-components/dist/types").I
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
     $minHeight?: string;
 }, never>>> & string;
+export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const VariableActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const VariableChipButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;

package/dist/components/RichTextEditor/RichTextEditor.styled.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
+exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.FieldDescription = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.RichTextEditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 exports.FieldLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
@@ -16,7 +16,8 @@ exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateO
 exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"])), function (props) { return (props.$active ? 'var(--dark)' : 'var(--grey-50)'); });
 exports.ToolbarDivider = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"], ["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"])));
 exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
-exports.ErrorMessage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"])));
-exports.VariableActions = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"])));
-exports.VariableChipButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+exports.FieldDescription = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
+exports.ErrorMessage = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"])));
+exports.VariableActions = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"])));
+exports.VariableChipButton = styled_components_1.default.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -6,6 +6,7 @@ export type RichTextVariable = {
 export interface RichTextEditorProps {
     label?: string;
     placeholder?: string;
+    description?: string;
     value?: string;
     defaultValue?: string;
     onChange?: (html: string) => void;
@@ -29,6 +30,7 @@ export interface RichTextEditorRef {
 export declare const RichTextEditorDefault: {
     label: string;
     placeholder: string;
+    description: string;
     defaultValue: string;
     disabled: boolean;
     hasError: boolean;

package/dist/components/RichTextEditor/props.js

@@ -4,6 +4,7 @@ exports.RichTextEditorDefault = void 0;
 exports.RichTextEditorDefault = {
     label: null,
     placeholder: 'Metin yaz…',
+    description: null,
     defaultValue: '',
     disabled: false,
     hasError: false,

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

@@ -11,6 +11,9 @@ declare const _default: {
         placeholder: {
             control: string;
         };
+        description: {
+            control: string;
+        };
         disabled: {
             control: string;
         };
@@ -48,6 +51,14 @@ export declare const Default: {
         minHeight: string;
     };
 };
+export declare const WithDescription: {
+    args: {
+        label: string;
+        placeholder: string;
+        description: string;
+        minHeight: string;
+    };
+};
 export declare const WithSampleContent: {
     name: string;
     args: {

package/dist/components/RichTextEditor/stories/RichTextEditor.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.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.Default = void 0;
+exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.WithDescription = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var RichTextEditor_1 = __importDefault(require("../RichTextEditor"));
@@ -32,6 +32,7 @@ exports.default = {
     argTypes: {
         label: { control: 'text' },
         placeholder: { control: 'text' },
+        description: { control: 'text' },
         disabled: { control: 'boolean' },
         hasError: { control: 'boolean' },
         errorMessage: { control: 'text' },
@@ -50,6 +51,14 @@ exports.Default = {
         minHeight: '220px',
     },
 };
+exports.WithDescription = {
+    args: {
+        label: 'Mail metni',
+        placeholder: 'Metin yaz…',
+        description: 'Bu metin, gönderilen e-postalarda ürün kartının altında görünür.',
+        minHeight: '220px',
+    },
+};
 exports.WithSampleContent = {
     name: 'Örnek içerik + değişken chip’leri',
     args: {

package/package.json

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