krl-alfred 2.23.19 → 2.23.21

package/dist/components/DescriptionCard/DescriptionCard.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DescriptionCardProps } from "./props";
-declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
+declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
 export default DescriptionCard;

package/dist/components/DescriptionCard/DescriptionCard.js

@@ -38,17 +38,18 @@ var SubcategoryRow = function (_a) {
     return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (hasCategoryLayout || item.status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: item.status })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
 };
 var DescriptionCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasHeader, hasHeader = _o === void 0 ? props_1.DescriptionCardDefault.hasHeader : _o, _p = _a.hasHeaderBackground, hasHeaderBackground = _p === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _p, _q = _a.hasHeaderBorder, hasHeaderBorder = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _q, _r = _a.hasRounded, hasRounded = _r === void 0 ? props_1.DescriptionCardDefault.hasRounded : _r, _s = _a.hasBorder, hasBorder = _s === void 0 ? props_1.DescriptionCardDefault.hasBorder : _s, _t = _a.headerImage, headerImage = _t === void 0 ? props_1.DescriptionCardDefault.headerImage : _t, _u = _a.headerRightContent, headerRightContent = _u === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _u, _v = _a.dropdownList, dropdownList = _v === void 0 ? props_1.DescriptionCardDefault.dropdownList : _v, _w = _a.dropdownWidth, dropdownWidth = _w === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _w, _x = _a.accordionList, accordionList = _x === void 0 ? props_1.DescriptionCardDefault.accordionList : _x, _y = _a.boxSize, boxSize = _y === void 0 ? props_1.DescriptionCardDefault.boxSize : _y, _z = _a.hasHeaderButton, hasHeaderButton = _z === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _z, _0 = _a.headerButtonWidth, headerButtonWidth = _0 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _0, _1 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _1 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _1, _2 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _2, _3 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _3, _4 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _4, _5 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _5, _6 = _a.content, content = _6 === void 0 ? props_1.DescriptionCardDefault.content : _6, _7 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _7 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _7, _8 = _a.middleTitle, middleTitle = _8 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _8, _9 = _a.status, status = _9 === void 0 ? props_1.DescriptionCardDefault.status : _9, _10 = _a.subcategoryList, subcategoryList = _10 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _10, _11 = _a.hasCategoryLayout, hasCategoryLayout = _11 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _11, _12 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _12 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _12, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _13 = _a.customColumnSpan, customColumnSpan = _13 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _13;
+    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasTitleBadgeBetween, hasTitleBadgeBetween = _o === void 0 ? props_1.DescriptionCardDefault.hasTitleBadgeBetween : _o, _p = _a.hasHeader, hasHeader = _p === void 0 ? props_1.DescriptionCardDefault.hasHeader : _p, _q = _a.hasHeaderBackground, hasHeaderBackground = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _q, _r = _a.hasHeaderBorder, hasHeaderBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _r, _s = _a.hasRounded, hasRounded = _s === void 0 ? props_1.DescriptionCardDefault.hasRounded : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.DescriptionCardDefault.hasBorder : _t, _u = _a.headerImage, headerImage = _u === void 0 ? props_1.DescriptionCardDefault.headerImage : _u, _v = _a.headerRightContent, headerRightContent = _v === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _v, _w = _a.dropdownList, dropdownList = _w === void 0 ? props_1.DescriptionCardDefault.dropdownList : _w, _x = _a.dropdownWidth, dropdownWidth = _x === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _x, _y = _a.accordionList, accordionList = _y === void 0 ? props_1.DescriptionCardDefault.accordionList : _y, _z = _a.boxSize, boxSize = _z === void 0 ? props_1.DescriptionCardDefault.boxSize : _z, _0 = _a.hasHeaderButton, hasHeaderButton = _0 === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _0, _1 = _a.headerButtonWidth, headerButtonWidth = _1 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _1, _2 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _2 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _2, _3 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _3, _4 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _4, _5 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _5, _6 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _6 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _6, _7 = _a.content, content = _7 === void 0 ? props_1.DescriptionCardDefault.content : _7, _8 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _8 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _8, _9 = _a.middleTitle, middleTitle = _9 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _9, _10 = _a.status, status = _10 === void 0 ? props_1.DescriptionCardDefault.status : _10, _11 = _a.subcategoryList, subcategoryList = _11 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _11, _12 = _a.hasCategoryLayout, hasCategoryLayout = _12 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _12, _13 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _13 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _13, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _14 = _a.customColumnSpan, customColumnSpan = _14 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _14;
     var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
     var HeaderDropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
     var hasHeaderRightContent = !!headerRightContent;
+    var hasHeaderRight = hasHeaderRightContent || hasHeaderPrimaryButton || hasHeaderButton;
     var isHeaderClickable = !!onHeaderClick && !hasHeaderBackButton;
     var handleBackTitleClick = onHeaderClick !== null && onHeaderClick !== void 0 ? onHeaderClick : (onHeaderBack ? function () { onHeaderBack(); } : undefined);
     var isBackTitleClickable = hasHeaderBackButton && !!handleBackTitleClick;
-    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryLayout, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder, "$hasHeaderDescription": Boolean(headerDescription), "$headerSize": headerSize, "$headerAlignItems": headerAlignItems }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasHeaderRight": hasHeaderRight, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryLayout, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder, "$hasHeaderDescription": Boolean(headerDescription), "$headerSize": headerSize, "$headerAlignItems": headerAlignItems }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
                                     e.stopPropagation();
                                     onHeaderBack === null || onHeaderBack === void 0 ? void 0 : onHeaderBack();
-                                }, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize, "$isClickable": isBackTitleClickable, onClick: isBackTitleClickable ? handleBackTitleClick : undefined }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), (hasCategoryLayout || middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: middleTitle }))), (hasCategoryLayout || status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: status })), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(HeaderDropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, __assign({ "$hasNoContentSidePadding": hasNoContentSidePadding }, { children: content })), hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) })) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize, "$hasHeader": hasHeader, "$hasAccordion": (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 }, { children: list.map(function (listItem, key) {
+                                }, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, __assign({ "$hasTitleBadgeBetween": hasTitleBadgeBetween }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize, "$isClickable": isBackTitleClickable, onClick: isBackTitleClickable ? handleBackTitleClick : undefined }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, __assign({ "$hasTitleBadgeBetween": hasTitleBadgeBetween }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) })))] })), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), (hasCategoryLayout || middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: middleTitle }))), (hasCategoryLayout || status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: status })), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, "$hasHeaderRight": hasHeaderRight, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(HeaderDropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, __assign({ "$hasNoContentSidePadding": hasNoContentSidePadding }, { children: content })), hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) })) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize, "$hasHeader": hasHeader, "$hasAccordion": (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 }, { children: list.map(function (listItem, key) {
                     var _a;
                     var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
                     return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.ListItemStyled, __assign({ "$columnSpan": span }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayTitleStyled, { children: listItem.title }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayValueStyled, { children: listItem.display || "-" })] }), key));

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

@@ -16,7 +16,7 @@ export declare const CategoryDropdownWrapper: import("styled-components/dist/typ
 }, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("styled-components").CSSProperties & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
         [key: `--${string}`]: string | number;
     });
 }> & string;
@@ -44,9 +44,9 @@ export declare const HeaderRightContentStyled: import("styled-components/dist/ty
 export declare const HeaderTitleWrapperStyled: 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;
 }, DescriptionCardStyledProps>> & string;
-export declare const HeaderTitleTopStyled: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+export declare const HeaderTitleTopStyled: 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;
-}> & string;
+}, DescriptionCardStyledProps>> & string;
 export declare const HeaderTitleDescriptionStyled: 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;

package/dist/components/DescriptionCard/DescriptionCard.styled.js

@@ -27,29 +27,31 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
         return '1rem 0';
     return reduceBottomPadding ? '1.5rem 0 1rem' : '1.5rem 0';
 }, function (props) { return props.$headerSize === 'medium' ? '88px' : 'auto'; }, function (props) {
+    var hasRight = props.$hasHeaderRight;
     if (props.$hasTwoColumnHeader)
-        return '1fr auto';
-    if (props.$hasCategoryLayout)
-        return exports.categoryRowGridColumns;
-    if (props.$hasHeaderRightContent && !props.$hasMiddleTitle)
-        return 'minmax(0, 1fr) auto';
+        return hasRight ? '1fr auto' : '1fr';
+    if (props.$hasCategoryLayout) {
+        return hasRight ? exports.categoryRowGridColumns : 'minmax(0, 1fr) 6.5rem 9.5rem';
+    }
     if (props.$hasMiddleTitle)
-        return '1fr 1fr auto';
-    return '1fr auto';
+        return hasRight ? '1fr 1fr auto' : '1fr 1fr';
+    if (hasRight)
+        return 'minmax(0, 1fr) auto';
+    return '1fr';
 }, function (props) { return props.$headerAlignItems || 'center'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$hasCategoryLayout && "\n        &:hover ".concat(exports.CategoryDropdownWrapper, ",\n        ").concat(exports.CategoryDropdownWrapper, ":hover,\n        ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n            opacity: 1;\n            visibility: visible;\n        }\n    "); });
 exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"])));
 exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"])));
-exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"])), function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; }, function (props) { return props.$hasCategoryLayout ? '100%' : 'auto'; });
+exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"], ["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"])), function (props) { return props.$hasHeaderRight ? 'flex' : 'none'; }, function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; }, function (props) { return props.$hasCategoryLayout ? '100%' : 'auto'; });
 exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 exports.HeaderRightContentStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    min-width: 0;\n"], ["\n    display: block;\n    min-width: 0;\n"])));
-exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    cursor: ", ";\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
-exports.HeaderTitleTopStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n"])));
+exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    cursor: ", ";\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    cursor: ", ";\n    width: 100%;\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
+exports.HeaderTitleTopStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    width: ", ";\n    justify-content: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    width: ", ";\n    justify-content: ", ";\n"])), function (props) { return props.$hasTitleBadgeBetween ? '100%' : 'auto'; }, function (props) { return props.$hasTitleBadgeBetween ? 'space-between' : 'flex-start'; });
 exports.HeaderTitleDescriptionStyled = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin: 1rem 0 0;\n    font: var(--body-regular-14-17);\n    color: var(--dark);\n"], ["\n    margin: 1rem 0 0;\n    font: var(--body-regular-14-17);\n    color: var(--dark);\n"])));
 exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: ", ";\n    display: inline-block;\n    cursor: ", ";\n"], ["\n    font: ", ";\n    display: inline-block;\n    cursor: ", ";\n"])), function (props) { return props.$titleSize === 'lg'
     ? 'var(--headline-semi-bold-20-24)'
     : 'var(--headline-semi-bold-18-22)'; }, function (props) { return props.$isClickable ? 'pointer' : 'inherit'; });
 exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
-exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    margin-left: 1.5rem;\n"], ["\n    display: block;\n    margin-left: 1.5rem;\n"])));
+exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    margin-left: ", ";\n    flex-shrink: 0;\n"], ["\n    display: block;\n    margin-left: ", ";\n    flex-shrink: 0;\n"])), function (props) { return props.$hasTitleBadgeBetween ? '0' : '1.5rem'; });
 exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    padding: ", ";\n"], ["\n    display: block;\n    padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '0' : '0 1.5rem'; });
 exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"])), function (props) { return props.$boxSize; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; });
 exports.ListItemStyled = styled_components_1.default.li(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    display: block;\n    padding: 1.5rem;\n    border-right: 1px solid var(--dark-opacity-10);\n    border-bottom: 1px solid var(--dark-opacity-10);\n    word-break: break-word;\n    grid-column: span ", ";\n\n    &:is(:last-child){\n        border-right: 0;\n    }\n"], ["\n    display: block;\n    padding: 1.5rem;\n    border-right: 1px solid var(--dark-opacity-10);\n    border-bottom: 1px solid var(--dark-opacity-10);\n    word-break: break-word;\n    grid-column: span ", ";\n\n    &:is(:last-child){\n        border-right: 0;\n    }\n"])), function (props) { var _a; return (_a = props.$columnSpan) !== null && _a !== void 0 ? _a : 1; });

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

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

package/dist/components/DescriptionCard/DescriptionCard.test.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var DescriptionCard_1 = __importDefault(require("./DescriptionCard"));
+var props_1 = require("./props");
+var renderDescriptionCard = function (props) {
+    var _a, _b;
+    if (props === void 0) { props = {}; }
+    var view = (0, react_1.render)((0, jsx_runtime_1.jsx)(DescriptionCard_1.default, __assign({}, props_1.DescriptionCardDefault, { list: [] }, props)));
+    var headerRightSection = (_b = (_a = view.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.lastElementChild;
+    return __assign({ headerRightSection: headerRightSection }, view);
+};
+describe('DescriptionCard', function () {
+    it('hides header right section when it has no content', function () {
+        var headerRightSection = renderDescriptionCard({
+            hasHeaderButton: false,
+            hasHeaderPrimaryButton: false,
+            headerRightContent: null,
+        }).headerRightSection;
+        expect(headerRightSection).toHaveStyle({ display: 'none' });
+    });
+    it('shows header right section when header button exists', function () {
+        var headerRightSection = renderDescriptionCard({
+            hasHeaderButton: true,
+        }).headerRightSection;
+        expect(headerRightSection).toHaveStyle({ display: 'flex' });
+    });
+    it('renders title and badge when hasTitleBadgeBetween is true', function () {
+        renderDescriptionCard({
+            title: 'Product Name',
+            hasBadge: true,
+            badgeText: 'Yeni',
+            hasTitleBadgeBetween: true,
+            headerImage: null,
+        });
+        expect(react_1.screen.getByText('Product Name')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Yeni')).toBeInTheDocument();
+    });
+});

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

@@ -24,6 +24,8 @@ export interface DescriptionCard {
     headerDescription?: string;
     hasBadge?: boolean;
     badgeText?: string;
+    /** true ise başlık solda, badge sağda space-between hizalanır */
+    hasTitleBadgeBetween?: boolean;
     /** Header alanını gösterir/gizler */
     hasHeader?: boolean;
     /** Header arka planı (var / yok) */
@@ -81,6 +83,8 @@ export interface DescriptionCardStyledProps {
     $hasHeaderPrimaryButton?: boolean;
     $hasMiddleTitle?: boolean;
     $hasHeaderRightContent?: boolean;
+    $hasHeaderRight?: boolean;
+    $hasTitleBadgeBetween?: boolean;
     $hasCategoryLayout?: boolean;
     $hasTwoColumnHeader?: boolean;
     $hasNoContentSidePadding?: boolean;

package/dist/components/DescriptionCard/props.js

@@ -14,6 +14,7 @@ exports.DescriptionCardDefault = {
     headerAlignItems: "center",
     headerDescription: null,
     hasBadge: false,
+    hasTitleBadgeBetween: false,
     hasHeader: true,
     hasHeaderBackground: false,
     hasHeaderBorder: false,

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

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
+    component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
     tags: string[];
     argTypes: {
         title: {
@@ -26,6 +26,10 @@ declare const _default: {
         hasBadge: {
             control: string;
         };
+        hasTitleBadgeBetween: {
+            control: string;
+            description: string;
+        };
         badgeText: {
             control: string;
         };
@@ -178,6 +182,52 @@ export declare const WithBadge: {
         hasTwoColumnHeader: boolean;
     };
 };
+export declare const WithTitleBadgeBetween: {
+    name: string;
+    args: {
+        headerImage: any;
+        list: any[];
+        hasBadge: boolean;
+        badgeText: string;
+        hasTitleBadgeBetween: boolean;
+        title: string;
+        titleSize: "md";
+        headerSize: "small";
+        headerAlignItems: "center";
+        hasHeaderDropdown: boolean;
+        hasHeaderBackButton: boolean;
+        headerButtonText: string;
+        hasHeader: boolean;
+        hasHeaderBackground: boolean;
+        hasHeaderBorder: boolean;
+        hasRounded: boolean;
+        hasBorder: boolean;
+        hasHeaderButton: boolean;
+        headerButtonWidth: any;
+        hasHeaderPrimaryButton: boolean;
+        headerPrimaryButtonText: string;
+        headerPrimaryButtonIcon: any;
+        headerPrimaryButtonSize: "xsmall";
+        headerPrimaryButtonAction: () => void;
+        headerButtonAction: () => void;
+        boxSize: number;
+        customColumnSpan: {
+            0: number;
+        };
+        dropdownList: {
+            name: string;
+            component: ({ children }: any) => React.JSX.Element;
+        }[];
+        dropdownWidth: string;
+        content: any;
+        hasNoContentSidePadding: boolean;
+        middleTitle: any;
+        status: any;
+        subcategoryList: any[];
+        hasCategoryLayout: boolean;
+        hasTwoColumnHeader: boolean;
+    };
+};
 export declare const WithHeaderDescription: {
     name: string;
     args: {

package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Complete = exports.HeaderAndContentOnly = exports.NoContentSidePadding = exports.WithPrimaryButtonIcon = exports.WithSubcategories = exports.StatusInactive = exports.WithMiddleTitleAndStatus = exports.WithHeaderRightContent = exports.WithHeaderBackButton = exports.HeaderAlignFlexStart = exports.TitleSizeLg = exports.AddProductToCategory = exports.CategoryStructure = exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithHeaderDescription = exports.WithBadge = exports.Default = void 0;
+exports.Complete = exports.HeaderAndContentOnly = exports.NoContentSidePadding = exports.WithPrimaryButtonIcon = exports.WithSubcategories = exports.StatusInactive = exports.WithMiddleTitleAndStatus = exports.WithHeaderRightContent = exports.WithHeaderBackButton = exports.HeaderAlignFlexStart = exports.TitleSizeLg = exports.AddProductToCategory = exports.CategoryStructure = exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithHeaderDescription = exports.WithTitleBadgeBetween = exports.WithBadge = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var DescriptionCard_1 = __importDefault(require("../DescriptionCard"));
@@ -90,6 +90,10 @@ exports.default = {
             description: 'Header dikey hizalama',
         },
         hasBadge: { control: 'boolean' },
+        hasTitleBadgeBetween: {
+            control: 'boolean',
+            description: 'Başlık solda, badge sağda space-between hizalama',
+        },
         badgeText: { control: 'text' },
         hasHeader: { control: 'boolean' },
         hasHeaderBackground: { control: 'boolean' },
@@ -121,6 +125,10 @@ exports.Default = {
 exports.WithBadge = {
     args: __assign(__assign({}, defaultArgs), { hasBadge: true, badgeText: "Yeni" }),
 };
+exports.WithTitleBadgeBetween = {
+    name: 'Title Badge Between',
+    args: __assign(__assign({}, defaultArgs), { headerImage: null, list: [], hasBadge: true, badgeText: "Yeni", hasTitleBadgeBetween: true }),
+};
 exports.WithHeaderDescription = {
     name: 'Header Description',
     args: __assign(__assign({}, defaultArgs), { headerImage: null, headerDescription: "Bu alan başlığın altında gösterilen açıklama metnidir.", hasTwoColumnHeader: true, hasHeaderBorder: true, headerSize: "medium" }),

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { InputProps } from "./props";
+import React from 'react';
+import { InputProps } from './props';
 declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -37,172 +37,85 @@ var Tooltip_1 = __importDefault(require("../Tooltip"));
 var react_datepicker_1 = __importDefault(require("react-datepicker"));
 var i18n_1 = __importDefault(require("../../i18n/i18n"));
 var locale_1 = require("date-fns/locale");
-var date_fns_1 = require("date-fns");
+var useDatePickerCalendar_1 = require("./hooks/useDatePickerCalendar");
+var datePicker_1 = require("./utils/datePicker");
 var Input = function (_a) {
     var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.id, id = _w === void 0 ? props_1.InputDefault.id : _w, _x = _a.isClearable, isClearable = _x === void 0 ? props_1.InputDefault.isClearable : _x, _y = _a.onClear, onClear = _y === void 0 ? props_1.InputDefault.onClear : _y, _z = _a.hasNumericFormat, hasNumericFormat = _z === void 0 ? props_1.InputDefault.hasNumericFormat : _z, _0 = _a.inline, inline = _0 === void 0 ? props_1.InputDefault.inline : _0, _1 = _a.minDate, minDate = _1 === void 0 ? props_1.InputDefault.minDate : _1, _2 = _a.maxDate, maxDate = _2 === void 0 ? props_1.InputDefault.maxDate : _2, _3 = _a.filterDate, filterDate = _3 === void 0 ? props_1.InputDefault.filterDate : _3, _4 = _a.onCalendarOpen, onCalendarOpen = _4 === void 0 ? props_1.InputDefault.onCalendarOpen : _4, _5 = _a.maxLength, maxLength = _5 === void 0 ? props_1.InputDefault.maxLength : _5, _6 = _a.showMaxLengthCounter, showMaxLengthCounter = _6 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _6, _7 = _a.description, description = _7 === void 0 ? props_1.InputDefault.description : _7, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
     var _8 = (0, react_1.useState)(type), inputType = _8[0], setInputType = _8[1];
     var _9 = (0, react_1.useState)(false), alert = _9[0], setAlert = _9[1];
     var _10 = (0, react_1.useState)(value), inputValue = _10[0], setInputValue = _10[1];
-    var _11 = (0, react_1.useState)(false), isCalendarOpen = _11[0], setIsCalendarOpen = _11[1];
-    var _12 = (0, react_1.useState)(function () {
-        if (!value)
-            return null;
-        // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
-        if (format && format.includes('dd') && format.includes('MM') && format.includes('yyyy')) {
-            try {
-                return (0, date_fns_1.parse)(value, format, new Date());
-            }
-            catch (_a) {
-                return new Date(value);
-            }
-        }
-        return new Date(value);
-    }), startDate = _12[0], setStartDate = _12[1];
+    var _11 = (0, react_1.useState)(function () { return (0, datePicker_1.parseDateValue)(value, format); }), startDate = _11[0], setStartDate = _11[1];
     var inputRef = (0, react_1.useRef)(null);
-    var datePickerRef = (0, react_1.useRef)(null);
-    var dateInputRef = (0, react_1.useRef)(null);
-    var dateBlurTimeoutRef = (0, react_1.useRef)([]);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
+    var _12 = (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+        disabled: disabled,
+        inline: inline,
+        onCalendarOpen: onCalendarOpen,
+        readOnly: readOnly,
+    }), calendarControlProps = _12.calendarControlProps, dateInputRef = _12.dateInputRef, datePickerRef = _12.datePickerRef, isCalendarOpen = _12.isCalendarOpen;
     (0, react_1.useEffect)(function () {
         setInputType(type);
     }, [type]);
     (0, react_1.useEffect)(function () {
         setInputValue(value);
-        if (!value) {
-            setStartDate(null);
-        }
-        else {
-            // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
-            if (format && format.includes('dd') && format.includes('MM') && format.includes('yyyy')) {
-                try {
-                    setStartDate((0, date_fns_1.parse)(value, format, new Date()));
-                }
-                catch (_a) {
-                    setStartDate(new Date(value));
-                }
-            }
-            else {
-                setStartDate(new Date(value));
-            }
-        }
-    }, [value, format]);
+        setStartDate((0, datePicker_1.parseDateValue)(value, format));
+    }, [format, value]);
     (0, react_1.useEffect)(function () {
-        if (alert) {
-            setTimeout(function () {
-                setAlert(false);
-            }, 2000);
-        }
+        if (!alert)
+            return;
+        var timeoutId = window.setTimeout(function () { return setAlert(false); }, 2000);
+        return function () { return window.clearTimeout(timeoutId); };
     }, [alert]);
     var toggleInputType = function () {
-        var newType = inputType === 'password' ? 'text' : 'password';
-        setInputType(newType);
+        setInputType(function (currentType) { return (currentType === 'password' ? 'text' : 'password'); });
     };
-    var copyToClipboard = function (e) {
+    var copyToClipboard = function () {
+        if (!inputRef.current)
+            return;
         inputRef.current.select();
         document.execCommand('copy');
         setAlert(true);
         inputRef.current.blur();
     };
-    var mergeInputRefs = function () {
-        var refs = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            refs[_i] = arguments[_i];
+    var handleDateChange = function (date) {
+        if (!date) {
+            setStartDate(null);
+            setInputValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
         }
-        return function (node) {
-            refs.forEach(function (ref) {
-                if (!ref)
-                    return;
-                if (typeof ref === "function") {
-                    ref(node);
-                }
-                else {
-                    ref.current = node;
-                }
-            });
-        };
+        var formattedValue = format ? (0, datePicker_1.formatDateValue)(date, format) : date.toISOString();
+        setStartDate(date);
+        setInputValue(formattedValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formattedValue);
     };
-    var clearScheduledDateBlur = function () {
-        dateBlurTimeoutRef.current.forEach(function (timeoutId) { return window.clearTimeout(timeoutId); });
-        dateBlurTimeoutRef.current = [];
-    };
-    var blurDateInputAfterSelect = (0, react_1.useCallback)(function () {
-        if (inline)
-            return;
-        clearScheduledDateBlur();
-        var blur = function () {
-            var _a, _b, _c, _d, _e, _f;
-            (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setBlur) === null || _b === void 0 ? void 0 : _b.call(_a);
-            (_c = dateInputRef.current) === null || _c === void 0 ? void 0 : _c.blur();
-            (_f = (_e = (_d = datePickerRef.current) === null || _d === void 0 ? void 0 : _d.input) === null || _e === void 0 ? void 0 : _e.blur) === null || _f === void 0 ? void 0 : _f.call(_e);
-        };
-        [0, 10, 50].forEach(function (delay) {
-            var timeoutId = window.setTimeout(blur, delay);
-            dateBlurTimeoutRef.current.push(timeoutId);
-        });
-    }, [inline]);
-    (0, react_1.useEffect)(function () { return function () { return clearScheduledDateBlur(); }; }, []);
     var CustomDateInput = (0, react_1.useMemo)(function () {
-        return (0, react_1.forwardRef)(function (props, ref) {
-            var displayValue = '';
-            if (props.value && format) {
-                try {
-                    var date = (0, date_fns_1.parse)(props.value, "yyyy-MM-dd", new Date());
-                    displayValue = (0, date_fns_1.format)(date, format);
-                }
-                catch (_a) {
-                    displayValue = inputValue || '';
-                }
-            }
-            else {
-                displayValue = inputValue || '';
-            }
-            return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: mergeInputRefs(ref, dateInputRef), "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen }, props, { value: displayValue })));
-        });
-    }, [format, hasCopyButton, hasError, infoText, inputValue, isCalendarOpen, isClearable, type]);
+        return (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: (0, datePicker_1.mergeInputRefs)(ref, dateInputRef), "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen, id: id }, props, { value: (0, datePicker_1.getDateDisplayValue)(props.value, format, inputValue) }))); });
+    }, [dateInputRef, format, hasCopyButton, hasError, id, infoText, inputValue, isCalendarOpen, isClearable, type]);
     var handleClearValue = function () {
-        setInputValue(null);
-        inputRef.current.value = null;
-        setStartDate(null);
-        onChange(null);
-        if (onClear)
-            onClear();
+        var _a, _b;
+        setInputValue('');
+        if (type === 'date') {
+            setStartDate(null);
+            (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.clear) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        else if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
     };
     var currentLength = (inputValue !== null && inputValue !== void 0 ? inputValue : '').length;
     var showCharCount = showMaxLengthCounter && maxLength != null;
     var showTopRow = Boolean(label || customLinkText || showCharCount);
-    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
-                        : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date) {
-                                    if (date) {
-                                        setStartDate(date);
-                                        // DatePicker'dan gelen Date objesini format'a göre formatla
-                                        var formattedValue = (0, date_fns_1.format)(date, format);
-                                        setInputValue(formattedValue);
-                                        onChange(formattedValue);
-                                    }
-                                    else {
-                                        setStartDate(null);
-                                        setInputValue(null);
-                                        onChange(null);
-                                    }
-                                }, onSelect: function () {
-                                    blurDateInputAfterSelect();
-                                }, selected: startDate, ref: datePickerRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), 
-                                //customInput={<InputStyled $hasError={hasError} id={id}/>}
-                                inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, onCalendarOpen: function () {
-                                    setIsCalendarOpen(true);
-                                    if (onCalendarOpen) {
-                                        onCalendarOpen();
-                                    }
-                                }, onCalendarClose: function () {
-                                    setIsCalendarOpen(false);
-                                    blurDateInputAfterSelect();
-                                }, onBlur: function () { return setIsCalendarOpen(false); }, renderCustomHeader: function (_a) {
-                                    var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
-                                    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
-                                } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
-                                onChange(e);
-                                setInputValue(e.currentTarget.value);
-                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] }));
+    var hasInputIcon = (isClearable && inputValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText;
+    return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
+                                var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
+                                return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { month: 'long' }), ",", ' ', monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { year: 'numeric' })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
+                            } }, calendarControlProps)) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(e);
+                            setInputValue(e.currentTarget.value);
+                        }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": hasInputIcon }, other))), isClearable && inputValue ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Copy" }) })))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));
 };
 exports.default = Input;

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

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

package/dist/components/Input/Input.test.js

@@ -0,0 +1,118 @@
+"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 Input_1 = __importDefault(require("./Input"));
+var props_1 = require("./props");
+jest.mock('react-i18next', function () { return ({
+    useTranslation: function () { return ({
+        t: function (key) { return key; },
+    }); },
+}); });
+var renderInput = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, props_1.InputDefault, { id: "input-test", label: "Label", onChange: jest.fn() }, props)));
+};
+describe('Input', function () {
+    it('renders label and placeholder', function () {
+        renderInput({ placeholder: 'Placeholder text' });
+        expect(react_1.screen.getByText('Label')).toBeInTheDocument();
+        expect(react_1.screen.getByPlaceholderText('Placeholder text')).toBeInTheDocument();
+    });
+    it('shows error message when hasError is true', function () {
+        renderInput({ hasError: true, errorMessage: 'Invalid value' });
+        expect(react_1.screen.getByText('Invalid value')).toBeInTheDocument();
+    });
+    it('toggles password visibility', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var container, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    container = renderInput({ type: 'password', placeholder: 'Password' }).container;
+                    input = react_1.screen.getByPlaceholderText('Password');
+                    expect(input).toHaveAttribute('type', 'password');
+                    return [4 /*yield*/, user_event_1.default.click(container.querySelector('.inputIcon'))];
+                case 1:
+                    _a.sent();
+                    expect(input).toHaveAttribute('type', 'text');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls onClear when clearable value is cleared', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClear, onChange, container;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClear = jest.fn();
+                    onChange = jest.fn();
+                    container = renderInput({
+                        isClearable: true,
+                        value: 'Clear me',
+                        onClear: onClear,
+                        onChange: onChange,
+                    }).container;
+                    return [4 /*yield*/, user_event_1.default.click(container.querySelector('.removeIcon'))];
+                case 1:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledWith(null);
+                    expect(onClear).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('renders with potentially unsafe infoText without crashing', function () {
+        expect(function () { return renderInput({ infoText: '<script>alert(1)</script>Info' }); }).not.toThrow();
+    });
+});

package/dist/components/Input/hooks/useDatePickerCalendar.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import DatePicker from 'react-datepicker';
+type UseDatePickerCalendarOptions = {
+    inline?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onCalendarOpen?: () => void;
+};
+export declare const useDatePickerCalendar: ({ inline, disabled, readOnly, onCalendarOpen, }: UseDatePickerCalendarOptions) => {
+    calendarControlProps: {
+        open?: undefined;
+        preventOpenOnFocus?: undefined;
+        shouldCloseOnSelect?: undefined;
+        usePointerEvent?: undefined;
+        onInputClick?: undefined;
+        onClickOutside?: undefined;
+        onCalendarOpen?: undefined;
+        onCalendarClose?: undefined;
+        onSelect?: undefined;
+    } | {
+        open: boolean;
+        preventOpenOnFocus: boolean;
+        shouldCloseOnSelect: boolean;
+        usePointerEvent: boolean;
+        onInputClick: () => void;
+        onClickOutside: () => void;
+        onCalendarOpen: () => void;
+        onCalendarClose: () => void;
+        onSelect: () => void;
+    };
+    closeCalendar: () => void;
+    dateInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    datePickerRef: import("react").MutableRefObject<DatePicker>;
+    isCalendarOpen: boolean;
+};
+export {};

package/dist/components/Input/hooks/useDatePickerCalendar.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatePickerCalendar = void 0;
+var react_1 = require("react");
+var datePicker_1 = require("../utils/datePicker");
+var useDatePickerCalendar = function (_a) {
+    var _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.readOnly, readOnly = _d === void 0 ? false : _d, onCalendarOpen = _a.onCalendarOpen;
+    var datePickerRef = (0, react_1.useRef)(null);
+    var dateInputRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(false), isCalendarOpen = _e[0], setIsCalendarOpen = _e[1];
+    var closeCalendar = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (inline)
+            return;
+        setIsCalendarOpen(false);
+        (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen) === null || _b === void 0 ? void 0 : _b.call(_a, false, true);
+    }, [inline]);
+    var openCalendar = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (inline || disabled || readOnly)
+            return;
+        setIsCalendarOpen(true);
+        (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen) === null || _b === void 0 ? void 0 : _b.call(_a, true);
+    }, [disabled, inline, readOnly]);
+    var toggleCalendar = (0, react_1.useCallback)(function () {
+        if (isCalendarOpen) {
+            closeCalendar();
+            return;
+        }
+        openCalendar();
+    }, [closeCalendar, isCalendarOpen, openCalendar]);
+    var handleCalendarOpen = (0, react_1.useCallback)(function () {
+        setIsCalendarOpen(true);
+        onCalendarOpen === null || onCalendarOpen === void 0 ? void 0 : onCalendarOpen();
+    }, [onCalendarOpen]);
+    var handleCalendarClose = (0, react_1.useCallback)(function () {
+        setIsCalendarOpen(false);
+    }, []);
+    var handleInputClick = (0, react_1.useCallback)(function () {
+        toggleCalendar();
+    }, [toggleCalendar]);
+    var handleClickOutside = (0, react_1.useCallback)(function () {
+        closeCalendar();
+    }, [closeCalendar]);
+    var handleDateSelect = (0, react_1.useCallback)(function () {
+        closeCalendar();
+    }, [closeCalendar]);
+    (0, react_1.useEffect)(function () {
+        if (inline || !isCalendarOpen)
+            return;
+        var handleOutsideInteraction = function (event) {
+            var target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (!(0, datePicker_1.isOutsideDatePicker)(target, dateInputRef.current))
+                return;
+            closeCalendar();
+        };
+        document.addEventListener('mousedown', handleOutsideInteraction);
+        document.addEventListener('touchstart', handleOutsideInteraction, { passive: true });
+        return function () {
+            document.removeEventListener('mousedown', handleOutsideInteraction);
+            document.removeEventListener('touchstart', handleOutsideInteraction);
+        };
+    }, [closeCalendar, inline, isCalendarOpen]);
+    var calendarControlProps = inline
+        ? {}
+        : {
+            open: isCalendarOpen,
+            preventOpenOnFocus: true,
+            shouldCloseOnSelect: true,
+            usePointerEvent: true,
+            onInputClick: handleInputClick,
+            onClickOutside: handleClickOutside,
+            onCalendarOpen: handleCalendarOpen,
+            onCalendarClose: handleCalendarClose,
+            onSelect: handleDateSelect,
+        };
+    return {
+        calendarControlProps: calendarControlProps,
+        closeCalendar: closeCalendar,
+        dateInputRef: dateInputRef,
+        datePickerRef: datePickerRef,
+        isCalendarOpen: isCalendarOpen,
+    };
+};
+exports.useDatePickerCalendar = useDatePickerCalendar;

package/dist/components/Input/hooks/useDatePickerCalendar.test.d.ts

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

package/dist/components/Input/hooks/useDatePickerCalendar.test.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var useDatePickerCalendar_1 = require("./useDatePickerCalendar");
+describe('useDatePickerCalendar', function () {
+    it('toggles calendar open state through input click handler', function () {
+        var setOpen = jest.fn();
+        var result = (0, react_1.renderHook)(function () {
+            return (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+                inline: false,
+            });
+        }).result;
+        (0, react_1.act)(function () {
+            var _a, _b;
+            result.current.datePickerRef.current = { setOpen: setOpen };
+            (_b = (_a = result.current.calendarControlProps).onInputClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+        expect(result.current.isCalendarOpen).toBe(true);
+        expect(setOpen).toHaveBeenCalledWith(true);
+        (0, react_1.act)(function () {
+            var _a, _b;
+            (_b = (_a = result.current.calendarControlProps).onInputClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+        expect(result.current.isCalendarOpen).toBe(false);
+        expect(setOpen).toHaveBeenCalledWith(false, true);
+    });
+    it('closes calendar on outside touch interaction', function () {
+        var setOpen = jest.fn();
+        var result = (0, react_1.renderHook)(function () {
+            return (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+                inline: false,
+            });
+        }).result;
+        (0, react_1.act)(function () {
+            var _a, _b;
+            result.current.datePickerRef.current = { setOpen: setOpen };
+            (_b = (_a = result.current.calendarControlProps).onCalendarOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+        expect(result.current.isCalendarOpen).toBe(true);
+        (0, react_1.act)(function () {
+            document.dispatchEvent(new Event('touchstart', { bubbles: true }));
+        });
+        expect(result.current.isCalendarOpen).toBe(false);
+        expect(setOpen).toHaveBeenCalledWith(false, true);
+    });
+});

package/dist/components/Input/utils/datePicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const isFormattedDatePattern: (formatStr?: string | null) => boolean;
+export declare const parseDateValue: (value?: string | null, formatStr?: string | null) => Date | null;
+export declare const formatDateValue: (date: Date, formatStr: string) => string;
+export declare const getDateDisplayValue: (rawValue: string | undefined, formatStr: string | null | undefined, fallbackValue?: string | null) => string;
+export declare const mergeInputRefs: (...refs: Array<React.Ref<HTMLInputElement> | null | undefined>) => (node: HTMLInputElement | null) => void;
+export declare const isOutsideDatePicker: (target: Node, inputNode: HTMLInputElement | null) => boolean;

package/dist/components/Input/utils/datePicker.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOutsideDatePicker = exports.mergeInputRefs = exports.getDateDisplayValue = exports.formatDateValue = exports.parseDateValue = exports.isFormattedDatePattern = void 0;
+var date_fns_1 = require("date-fns");
+var isFormattedDatePattern = function (formatStr) {
+    return Boolean((formatStr === null || formatStr === void 0 ? void 0 : formatStr.includes('dd')) && formatStr.includes('MM') && formatStr.includes('yyyy'));
+};
+exports.isFormattedDatePattern = isFormattedDatePattern;
+var parseDateValue = function (value, formatStr) {
+    if (!value)
+        return null;
+    if ((0, exports.isFormattedDatePattern)(formatStr)) {
+        var parsed_1 = (0, date_fns_1.parse)(value, formatStr, new Date());
+        return (0, date_fns_1.isValid)(parsed_1) ? parsed_1 : null;
+    }
+    var parsed = new Date(value);
+    return (0, date_fns_1.isValid)(parsed) ? parsed : null;
+};
+exports.parseDateValue = parseDateValue;
+var formatDateValue = function (date, formatStr) { return (0, date_fns_1.format)(date, formatStr); };
+exports.formatDateValue = formatDateValue;
+var getDateDisplayValue = function (rawValue, formatStr, fallbackValue) {
+    if (!rawValue)
+        return fallbackValue || '';
+    if (!formatStr)
+        return fallbackValue || rawValue;
+    try {
+        var date = (0, date_fns_1.parse)(rawValue, 'yyyy-MM-dd', new Date());
+        return (0, date_fns_1.isValid)(date) ? (0, date_fns_1.format)(date, formatStr) : (fallbackValue || '');
+    }
+    catch (_a) {
+        return fallbackValue || '';
+    }
+};
+exports.getDateDisplayValue = getDateDisplayValue;
+var mergeInputRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (node) {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else {
+                ref.current = node;
+            }
+        });
+    };
+};
+exports.mergeInputRefs = mergeInputRefs;
+var isOutsideDatePicker = function (target, inputNode) {
+    var wrapper = inputNode === null || inputNode === void 0 ? void 0 : inputNode.closest('.react-datepicker-wrapper');
+    var popper = document.querySelector('.react-datepicker-popper');
+    return !(wrapper === null || wrapper === void 0 ? void 0 : wrapper.contains(target)) && !(popper === null || popper === void 0 ? void 0 : popper.contains(target));
+};
+exports.isOutsideDatePicker = isOutsideDatePicker;

package/dist/components/Input/utils/datePicker.test.d.ts

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

package/dist/components/Input/utils/datePicker.test.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var datePicker_1 = require("./datePicker");
+describe('datePicker utils', function () {
+    it('parses dd.MM.yyyy formatted values', function () {
+        var date = (0, datePicker_1.parseDateValue)('11.08.2026', 'dd.MM.yyyy');
+        expect(date === null || date === void 0 ? void 0 : date.getFullYear()).toBe(2026);
+        expect(date === null || date === void 0 ? void 0 : date.getMonth()).toBe(7);
+        expect(date === null || date === void 0 ? void 0 : date.getDate()).toBe(11);
+    });
+    it('returns null for invalid formatted values', function () {
+        expect((0, datePicker_1.parseDateValue)('not-a-date', 'dd.MM.yyyy')).toBeNull();
+    });
+    it('formats yyyy-MM-dd values for display', function () {
+        expect((0, datePicker_1.getDateDisplayValue)('2026-08-11', 'dd.MM.yyyy')).toBe('11.08.2026');
+    });
+});

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

@@ -80,15 +80,11 @@ export declare const InsuranceQuantity: import("styled-components/dist/types").I
 export declare const InsuranceActions: 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 InsuranceType2RadioInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+export declare const InsuranceType2RadioInput: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
-}, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLInputElement>;
-}>, "type"> & Partial<Pick<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+}, "type"> & Partial<Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
-}, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLInputElement>;
-}>, "type">>> & string;
+}, "type">>> & string;
 export declare const InsuranceType2TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
 }> & string;

package/package.json

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