krl-alfred 2.23.13 → 2.23.15

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.js

@@ -24,7 +24,7 @@ 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, _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 _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.description, description = _d === void 0 ? props_1.ProductCardCheckboxDefault.description : _d, _e = _a.content, content = _e === void 0 ? props_1.ProductCardCheckboxDefault.content : _e, _f = _a.checkboxId, checkboxId = _f === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _f, _g = _a.size, size = _g === void 0 ? props_1.ProductCardCheckboxDefault.size : _g, _h = _a.productCardOnChange, productCardOnChange = _h === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _h, _j = _a.disabled, disabled = _j === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _j, _k = _a.value, value = _k === void 0 ? props_1.ProductCardCheckboxDefault.value : _k, _l = _a.name, name = _l === void 0 ? props_1.ProductCardCheckboxDefault.name : _l, _m = _a.isContentOffset, isContentOffset = _m === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _m, _o = _a.checked, checked = _o === void 0 ? props_1.ProductCardCheckboxDefault.checked : _o, _p = _a.image, image = _p === void 0 ? props_1.ProductCardCheckboxDefault.image : _p, _q = _a.hasBadge, hasBadge = _q === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _q, _r = _a.badgeText, badgeText = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _r, _s = _a.badgeVariant, badgeVariant = _s === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _s, _t = _a.infoText, infoText = _t === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _t, _u = _a.infoTitle, infoTitle = _u === void 0 ? props_1.ProductCardCheckboxDefault.infoTitle : _u, _v = _a.popupWidth, popupWidth = _v === void 0 ? props_1.ProductCardCheckboxDefault.popupWidth : _v, valid = _a.valid, _w = _a.isShowDropdown, isShowDropdown = _w === void 0 ? props_1.ProductCardCheckboxDefault.isShowDropdown : _w, _x = _a.dropdownList, dropdownList = _x === void 0 ? props_1.ProductCardCheckboxDefault.dropdownList : _x, _y = _a.dropdownWidth, dropdownWidth = _y === void 0 ? props_1.ProductCardCheckboxDefault.dropdownWidth : _y, _z = _a.dropdownRight, dropdownRight = _z === void 0 ? props_1.ProductCardCheckboxDefault.dropdownRight : _z, _0 = _a.dropdownTop, dropdownTop = _0 === void 0 ? props_1.ProductCardCheckboxDefault.dropdownTop : _0;
     var styledProps = {
         disabled: disabled,
         $isContentOffset: isContentOffset,
@@ -32,6 +32,6 @@ var ProductCardCheckbox = function (_a) {
         $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.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] })))] })) })));
+    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.jsxs)(ProductCardCheckbox_styled_1.ProductCardTitleWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardTitle, __assign({}, styledProps, { "$hasDescription": !!description }, { children: title })), description && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardDescription, { children: description }))] }), (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

@@ -1,22 +1,60 @@
 /// <reference types="react" />
 import { ProductCardCheckboxStyledProps } from "./props";
-export declare const BadgeWrapper: 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 ProductCardCheckboxContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
+export declare const BadgeWrapper: 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 ProductCardCheckboxContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, {
     $hidden?: boolean;
-}, 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;
-export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
-export declare const ProductCardInner: 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 ProductCardCheckboxStyled: 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;
+}>> & string;
+export declare const ProductCardWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardCheckboxStyledProps>> & string;
+export declare const ProductCardImg: 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 ProductCardText: 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 ProductCardTitleActionsWrapper: 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 ProductCardTitleWrapper: 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 ProductCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardCheckboxStyledProps & {
+    $hasDescription?: boolean;
+}>> & string;
+export declare const ProductCardDescription: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TooltipWrapper: 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 DropdownWrapper: 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 DropdownToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const InputIcon: 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 PopupText: 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 ProductCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardCheckboxStyledProps>> & string;
+export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const ProductCardInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardCheckboxStyledProps>> & string;
+export declare const ProductCardCheckboxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ProductCardCheckboxStyledProps>> & string;

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

@@ -7,23 +7,25 @@ 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.DropdownToggleButton = exports.DropdownWrapper = exports.TooltipWrapper = exports.ProductCardTitle = exports.ProductCardTitleActionsWrapper = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardWrapper = 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.ProductCardDescription = exports.ProductCardTitle = exports.ProductCardTitleWrapper = 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.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.ProductCardText = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-width: 0;\n    width: 100%;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-width: 0;\n    width: 100%;\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;
+exports.ProductCardTitleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 0;\n    flex: 1 1 auto;\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 0;\n    flex: 1 1 auto;\n"])));
+exports.ProductCardTitle = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    min-height: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: start;\n    font: ", ";\n\n    ", "\n\n    @media only screen and ", " {\n        font: var(--body-semi-bold-14-17);\n    }\n"], ["\n    min-height: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: start;\n    font: ", ";\n\n    ", "\n\n    @media only screen and ", " {\n        font: var(--body-semi-bold-14-17);\n    }\n"])), function (props) { return props.$hasDescription ? 'auto' : '64px'; }, function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, function (props) { return props.$hasDescription && "\n        display: block;\n        min-width: 0;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    "; }, devices_1.devices.md);
+exports.ProductCardDescription = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--grey-50);\n    font: var(--body-medium-13-16);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--grey-50);\n    font: var(--body-medium-13-16);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n"])));
+exports.TooltipWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __makeTemplateObject(["\n    padding-left: 1rem;\n"], ["\n    padding-left: 1rem;\n"])));
+exports.DropdownToggleButton = styled_components_1.default.span(templateObject_12 || (templateObject_12 = __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_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
+exports.PopupText = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __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_15 || (templateObject_15 = __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_16 || (templateObject_16 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+exports.ProductCardInner = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __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_18 || (templateObject_18 = __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, templateObject_17, templateObject_18;

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

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

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.test.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var ProductCardCheckbox_1 = __importDefault(require("./ProductCardCheckbox"));
+var renderCard = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(ProductCardCheckbox_1.default, __assign({ checkboxId: "test-card", title: "Etiyopya torres single" }, props)));
+};
+describe('ProductCardCheckbox', function () {
+    it('renders the title', function () {
+        renderCard();
+        expect(react_1.screen.getByText('Etiyopya torres single')).toBeInTheDocument();
+    });
+    it('does not render a description when none is provided', function () {
+        renderCard();
+        expect(react_1.screen.queryByText('SKU-001')).not.toBeInTheDocument();
+    });
+    it('renders the description right below the title when provided', function () {
+        renderCard({ description: 'SKU-001 - Çekirdek kahve' });
+        expect(react_1.screen.getByText('SKU-001 - Çekirdek kahve')).toBeInTheDocument();
+    });
+    it('renders description text as plain text, not raw HTML (XSS protection)', function () {
+        renderCard({ description: '<img src=x onerror="window.__pwned = true">' });
+        expect(document.querySelector('img')).not.toBeInTheDocument();
+        expect(react_1.screen.getByText('<img src=x onerror="window.__pwned = true">')).toBeInTheDocument();
+    });
+    it('calls productCardOnChange when the checkbox is toggled', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var productCardOnChange;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    productCardOnChange = jest.fn();
+                    renderCard({ productCardOnChange: productCardOnChange });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('checkbox'))];
+                case 1:
+                    _a.sent();
+                    expect(productCardOnChange).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -4,6 +4,8 @@ type SIZES = typeof sizes[number];
 interface ProductCardCheckbox {
     hasCheckbox?: boolean;
     title?: string;
+    /** Title'ın hemen altında (0.5rem boşlukla) gösterilir; verilirse title tek satır, description 2 satır ellipsis olur */
+    description?: string;
     content?: string;
     checkboxId?: string;
     size?: SIZES;

package/dist/components/ProductCardCheckbox/props.js

@@ -5,6 +5,7 @@ exports.sizes = ['small', 'large'];
 exports.ProductCardCheckboxDefault = {
     hasCheckbox: true,
     title: null,
+    description: null,
     content: null,
     checkboxId: null,
     size: exports.sizes[1],

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

@@ -24,12 +24,36 @@ declare const _default: {
         checked: {
             control: string;
         };
+        valid: {
+            control: string;
+        };
+        isContentOffset: {
+            control: string;
+        };
         isShowDropdown: {
             control: string;
         };
         dropdownWidth: {
             control: string;
         };
+        title: {
+            control: string;
+        };
+        description: {
+            control: string;
+        };
+        content: {
+            control: string;
+        };
+        infoText: {
+            control: string;
+        };
+        infoTitle: {
+            control: string;
+        };
+        productCardOnChange: {
+            action: string;
+        };
     };
 };
 export default _default;
@@ -43,9 +67,14 @@ export declare const Default: {
         hasCheckbox: boolean;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         checkboxId: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const Checked: {
@@ -60,8 +89,12 @@ export declare const Checked: {
         hasCheckbox: boolean;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const Disabled: {
@@ -76,8 +109,12 @@ export declare const Disabled: {
         hasCheckbox: boolean;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const WithoutCheckbox: {
@@ -91,8 +128,13 @@ export declare const WithoutCheckbox: {
         image: React.JSX.Element;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const WithoutBadge: {
@@ -106,8 +148,13 @@ export declare const WithoutBadge: {
         image: React.JSX.Element;
         hasCheckbox: boolean;
         size: string;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const WithoutImage: {
@@ -121,8 +168,33 @@ export declare const WithoutImage: {
         hasCheckbox: boolean;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
+        badgeVariant: string;
+        infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
+    };
+};
+export declare const WithoutContent: {
+    args: {
+        content: any;
+        checkboxId: string;
+        title: string;
+        valid: boolean;
+        productCardOnChange: () => void;
+        image: React.JSX.Element;
+        hasCheckbox: boolean;
+        size: string;
+        hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const Small: {
@@ -136,8 +208,13 @@ export declare const Small: {
         image: React.JSX.Element;
         hasCheckbox: boolean;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const Large: {
@@ -151,8 +228,13 @@ export declare const Large: {
         image: React.JSX.Element;
         hasCheckbox: boolean;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const WithInfoText: {
@@ -168,7 +250,12 @@ export declare const WithInfoText: {
         hasCheckbox: boolean;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const Invalid: {
@@ -182,8 +269,13 @@ export declare const Invalid: {
         hasCheckbox: boolean;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const WithContentOffset: {
@@ -198,8 +290,33 @@ export declare const WithContentOffset: {
         hasCheckbox: boolean;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isShowDropdown: boolean;
+    };
+};
+export declare const WithDescription: {
+    args: {
+        title: string;
+        description: string;
+        checkboxId: string;
+        content: string;
+        valid: boolean;
+        productCardOnChange: () => void;
+        image: React.JSX.Element;
+        hasCheckbox: boolean;
+        size: string;
+        hasBadge: boolean;
+        badgeText: string;
+        badgeVariant: string;
+        infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };
 export declare const WithDropdown: {
@@ -219,7 +336,80 @@ export declare const WithDropdown: {
         hasCheckbox: boolean;
         size: string;
         hasBadge: boolean;
+        badgeText: string;
         badgeVariant: string;
         infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+    };
+};
+export declare const Empty: {
+    args: {
+        title: any;
+        content: any;
+        image: any;
+        hasBadge: boolean;
+        infoText: any;
+        infoTitle: any;
+        checkboxId: string;
+        valid: boolean;
+        productCardOnChange: () => void;
+        hasCheckbox: boolean;
+        size: string;
+        badgeText: string;
+        badgeVariant: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
+    };
+};
+export declare const Complete: {
+    args: {
+        checked: boolean;
+        hasBadge: boolean;
+        badgeText: string;
+        badgeVariant: string;
+        description: string;
+        content: string;
+        infoText: string;
+        infoTitle: string;
+        isShowDropdown: boolean;
+        dropdownWidth: string;
+        checkboxId: string;
+        dropdownList: {
+            title: string;
+            onClick: () => void;
+        }[];
+        title: string;
+        valid: boolean;
+        productCardOnChange: () => void;
+        image: React.JSX.Element;
+        hasCheckbox: boolean;
+        size: string;
+        disabled: boolean;
+        isContentOffset: boolean;
+    };
+};
+export declare const Interactive: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        checkboxId: string;
+        hasBadge: boolean;
+        title: string;
+        content: string;
+        valid: boolean;
+        productCardOnChange: () => void;
+        image: React.JSX.Element;
+        hasCheckbox: boolean;
+        size: string;
+        badgeText: string;
+        badgeVariant: string;
+        infoText: string;
+        checked: boolean;
+        disabled: boolean;
+        isContentOffset: boolean;
+        isShowDropdown: boolean;
     };
 };