krl-alfred 2.23.6 → 2.23.7

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, 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, 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

@@ -22,6 +22,12 @@ var OptionMenu_1 = __importDefault(require("../OptionMenu"));
 var AccordionItem_1 = __importDefault(require("./AccordionItem"));
 var Button_1 = __importDefault(require("./../Button"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
+var CategoryStatusCell = function (_a) {
+    var status = _a.status;
+    if (!(status === null || status === void 0 ? void 0 : status.label))
+        return (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.StatusWrapperStyled, {});
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.StatusWrapperStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.StatusDotStyled, { "$statusVariant": status.variant || 'active' }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.StatusLabelStyled, { children: status.label })] }));
+};
 var SubcategoryRow = function (_a) {
     var _b, _c, _d, _e, _f;
     var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout;
@@ -29,10 +35,10 @@ var SubcategoryRow = function (_a) {
     var buttonText = (_c = item.buttonText) !== null && _c !== void 0 ? _c : defaultButtonText;
     var DropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
     var isClickable = !!item.onClick;
-    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 })), (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 }) }))] })) }))] })));
+    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.subcategoryList, subcategoryList = _9 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _9, _10 = _a.hasCategoryLayout, hasCategoryLayout = _10 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _10, _11 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _11 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _11, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _12 = _a.customColumnSpan, customColumnSpan = _12 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _12;
+    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 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;
@@ -42,7 +48,7 @@ var DescriptionCard = function (_a) {
     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) {
                                     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 }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (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 })), (hasCategoryLayout || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((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, { 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) {
                     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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { AccordionListStyledProps, DescriptionCardStyledProps } from "./props";
-export declare const categoryRowGridColumns = "minmax(0, 1fr) auto minmax(0, 1fr)";
+export declare const categoryRowGridColumns = "minmax(0, 1fr) 6.5rem 9.5rem 130px";
+export declare const subcategoryRowGridColumns = "minmax(0, 1fr) 6.5rem 130px 130px";
 export declare const CategoryContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const CategoryDropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>, "as" | "forwardedAs"> & {
@@ -47,5 +48,8 @@ export declare const SubcategoryNameWrapper: import("styled-components/dist/type
 export declare const SubcategoryIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const SubcategoryNameStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const RowMiddleTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const StatusWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const StatusDotStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
+export declare const StatusLabelStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const SubcategoryActionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const AccordionItemBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never>>> & string;

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

@@ -7,14 +7,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionItemBody = exports.SubcategoryActionWrapper = exports.RowMiddleTitleStyled = exports.SubcategoryNameStyled = exports.SubcategoryIconWrapper = exports.SubcategoryNameWrapper = exports.SubcategoryRowStyled = exports.SubcategoryListWrapper = exports.HeaderMiddleTitleStyled = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DisplayValueStyled = exports.DisplayTitleStyled = exports.ListItemStyled = exports.ListStyled = exports.ContentWrapper = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.HeaderTitleDescriptionStyled = exports.HeaderTitleTopStyled = exports.HeaderTitleWrapperStyled = exports.HeaderRightContentStyled = exports.HeaderActionWrapperStyled = exports.HeaderRightStyled = exports.HeaderBackButtonStyled = exports.HeaderLeftStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = exports.CategoryDropdownWrapper = exports.DropdownWrapper = exports.CategoryContentWrapper = exports.categoryRowGridColumns = void 0;
+exports.AccordionItemBody = exports.SubcategoryActionWrapper = exports.StatusLabelStyled = exports.StatusDotStyled = exports.StatusWrapperStyled = exports.RowMiddleTitleStyled = exports.SubcategoryNameStyled = exports.SubcategoryIconWrapper = exports.SubcategoryNameWrapper = exports.SubcategoryRowStyled = exports.SubcategoryListWrapper = exports.HeaderMiddleTitleStyled = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DisplayValueStyled = exports.DisplayTitleStyled = exports.ListItemStyled = exports.ListStyled = exports.ContentWrapper = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.HeaderTitleDescriptionStyled = exports.HeaderTitleTopStyled = exports.HeaderTitleWrapperStyled = exports.HeaderRightContentStyled = exports.HeaderActionWrapperStyled = exports.HeaderRightStyled = exports.HeaderBackButtonStyled = exports.HeaderLeftStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = exports.CategoryDropdownWrapper = exports.DropdownWrapper = exports.CategoryContentWrapper = exports.subcategoryRowGridColumns = exports.categoryRowGridColumns = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.categoryRowGridColumns = 'minmax(0, 1fr) auto minmax(0, 1fr)';
-exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    padding: 0 1.5rem 1.5rem 1.5rem;\n"], ["\n    display: block;\n    padding: 0 1.5rem 1.5rem 1.5rem;\n"])));
+exports.categoryRowGridColumns = 'minmax(0, 1fr) 6.5rem 9.5rem 130px';
+exports.subcategoryRowGridColumns = 'minmax(0, 1fr) 6.5rem 130px 130px';
+exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    padding: 0 1.5rem 1.5rem;\n"], ["\n    display: block;\n    padding: 0 1.5rem 1.5rem;\n"])));
 exports.DropdownWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n\n    &:hover{\n        > div{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.2s;\n        }\n        button{\n            svg{\n                transform: rotate(180deg);\n            }\n        }\n    }\n"], ["\n    display: block;\n    position: relative;\n\n    &:hover{\n        > div{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.2s;\n        }\n        button{\n            svg{\n                transform: rotate(180deg);\n            }\n        }\n    }\n"])));
 exports.CategoryDropdownWrapper = (0, styled_components_1.default)(exports.DropdownWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"], ["\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"])));
 exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    padding: 0;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: ", ";\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n        z-index: 2;\n    }\n"], ["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    padding: 0;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: ", ";\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n        z-index: 2;\n    }\n"])), function (props) { return props.$hasRounded ? "0.5rem" : "0"; }, function (props) { return props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
-exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: ", ";\n    padding: ", ";\n    min-height: ", ";\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: ", ";\n    gap: 1.5rem;\n    background-color: ", ";\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n    border-bottom: ", ";\n    ", "\n"], ["\n    margin: ", ";\n    padding: ", ";\n    min-height: ", ";\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: ", ";\n    gap: 1.5rem;\n    background-color: ", ";\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n    border-bottom: ", ";\n    ", "\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
+exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: ", ";\n    padding: ", ";\n    min-height: ", ";\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: ", ";\n    gap: ", ";\n    background-color: ", ";\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n    border-bottom: ", ";\n    ", "\n"], ["\n    margin: ", ";\n    padding: ", ";\n    min-height: ", ";\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: ", ";\n    gap: ", ";\n    background-color: ", ";\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n    border-bottom: ", ";\n    ", "\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
     var hasImage = Boolean(props.$headerImage);
     var reduceBottomPadding = props.$hasHeaderDescription && props.$hasHeaderBorder;
     if (props.$hasHeaderBackground) {
@@ -35,10 +36,10 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
     if (props.$hasMiddleTitle)
         return '1fr 1fr auto';
     return '1fr auto';
-}, function (props) { return props.$headerAlignItems || 'center'; }, 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    "); });
+}, 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\n    > div + div {\n        margin-left: 1rem;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"])), function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; });
+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.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'; });
@@ -58,13 +59,18 @@ exports.SubMenu = styled_components_1.default.div(templateObject_22 || (template
 exports.AccordionListWrapper = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n\n"], ["\n\n"])));
 exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    + div{\n        border-top: 1px solid var(--dark-opacity-10);\n        margin-top: -1px;\n    }\n"], ["\n    + div{\n        border-top: 1px solid var(--dark-opacity-10);\n        margin-top: -1px;\n    }\n"])));
 exports.AccordionItemHeader = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--primary);\n    padding: 1.5rem;\n    cursor: pointer;\n    border-bottom: ", ";\n    strong{\n        font: var(--body-bold-14-17);\n        display: block;\n        color: inherit;\n    }\n    .icon{\n        *{\n            display: block;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--primary);\n    padding: 1.5rem;\n    cursor: pointer;\n    border-bottom: ", ";\n    strong{\n        font: var(--body-bold-14-17);\n        display: block;\n        color: inherit;\n    }\n    .icon{\n        *{\n            display: block;\n        }\n    }\n"])), function (props) { return props.$show ? "1px solid var(--dark-opacity-10)" : "none"; });
-exports.HeaderMiddleTitleStyled = styled_components_1.default.span(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    cursor: ", ";\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
+exports.HeaderMiddleTitleStyled = styled_components_1.default.span(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n    cursor: ", ";\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n    cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
 exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding-top: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding-top: 1rem;\n"])));
-exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1rem 1.5rem;\n    border-radius: 0.5rem;\n    transition: all 0.15s ease-in-out;\n    cursor: ", ";\n\n    &:hover {\n        box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n    }\n\n    ", "\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1rem 1.5rem;\n    border-radius: 0.5rem;\n    transition: all 0.15s ease-in-out;\n    cursor: ", ";\n\n    &:hover {\n        box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n    }\n\n    ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.categoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, 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.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border-radius: 0.5rem;\n    transition: all 0.15s ease-in-out;\n    cursor: ", ";\n\n    &:hover {\n        box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n    }\n\n    ", "\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border-radius: 0.5rem;\n    transition: all 0.15s ease-in-out;\n    cursor: ", ";\n\n    &:hover {\n        box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n    }\n\n    ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.subcategoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, 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.SubcategoryNameWrapper = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    min-width: 0;\n"])));
 exports.SubcategoryIconWrapper = styled_components_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--dark-opacity-50);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--dark-opacity-50);\n"])));
 exports.SubcategoryNameStyled = styled_components_1.default.span(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark);\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark);\n"])));
-exports.RowMiddleTitleStyled = styled_components_1.default.span(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n"])));
-exports.SubcategoryActionWrapper = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    cursor: default;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    cursor: default;\n"])), function (props) { return props.$hasCategoryLayout ? 'flex-end' : 'flex-start'; });
-exports.AccordionItemBody = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34;
+exports.RowMiddleTitleStyled = styled_components_1.default.span(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n"])));
+exports.StatusWrapperStyled = styled_components_1.default.span(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    white-space: nowrap;\n    min-width: 0;\n"], ["\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    white-space: nowrap;\n    min-width: 0;\n"])));
+exports.StatusDotStyled = styled_components_1.default.span(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    display: inline-block;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    background-color: ", ";\n"], ["\n    display: inline-block;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    background-color: ", ";\n"])), function (props) { return props.$statusVariant === 'inactive'
+    ? 'var(--dark-opacity-25)'
+    : 'var(--primary)'; });
+exports.StatusLabelStyled = styled_components_1.default.span(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n"])));
+exports.SubcategoryActionWrapper = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    cursor: default;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    cursor: default;\n"])), function (props) { return props.$hasCategoryLayout ? 'flex-end' : 'flex-start'; });
+exports.AccordionItemBody = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37;

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

@@ -9,6 +9,12 @@ export declare const headerSizes: readonly ["small", "medium"];
 type HEADER_SIZE = typeof headerSizes[number];
 export declare const headerAlignItems: readonly ["center", "flex-start"];
 type HEADER_ALIGN_ITEMS = typeof headerAlignItems[number];
+export declare const categoryStatusVariants: readonly ["active", "inactive"];
+type CATEGORY_STATUS_VARIANT = typeof categoryStatusVariants[number];
+export interface CategoryStatus {
+    label: string;
+    variant?: CATEGORY_STATUS_VARIANT;
+}
 export interface DescriptionCard {
     title?: string;
     titleSize?: TITLE_SIZE;
@@ -46,8 +52,10 @@ export interface DescriptionCard {
     content?: React.ReactNode;
     hasNoContentSidePadding?: boolean;
     middleTitle?: string;
+    /** Kategori durumu (Aktif / Pasif vb.) */
+    status?: CategoryStatus;
     subcategoryList?: SubcategoryItem[];
-    /** Kategori listesi layout'u (3 kolon grid, hover dropdown vb.) */
+    /** Kategori listesi layout'u (4 kolon grid, hover dropdown vb.) */
     hasCategoryLayout?: boolean;
     /** Header grid'ini `1fr auto` (sol + sağ) olarak sabitler */
     hasTwoColumnHeader?: boolean;
@@ -81,6 +89,7 @@ export interface DescriptionCardStyledProps {
     $headerAlignItems?: HEADER_ALIGN_ITEMS;
     $isClickable?: boolean;
     $hasAccordion?: boolean;
+    $statusVariant?: CATEGORY_STATUS_VARIANT;
     $customColumnSpan?: {
         [index: number]: number;
     };
@@ -92,6 +101,7 @@ export interface AccordionList {
 export interface SubcategoryItem {
     name: string;
     middleTitle?: string;
+    status?: CategoryStatus;
     hasButton?: boolean;
     hasDropdown?: boolean;
     buttonText?: string;

package/dist/components/DescriptionCard/props.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DescriptionCardDefault = exports.headerAlignItems = exports.headerSizes = exports.titleSizes = exports.iconNames = void 0;
+exports.DescriptionCardDefault = exports.categoryStatusVariants = exports.headerAlignItems = exports.headerSizes = exports.titleSizes = exports.iconNames = void 0;
 var iconList_1 = require("../Icon/iconList");
 exports.iconNames = Object.keys(iconList_1.iconList);
 exports.titleSizes = ['md', 'lg'];
 exports.headerSizes = ['small', 'medium'];
 exports.headerAlignItems = ['center', 'flex-start'];
+exports.categoryStatusVariants = ['active', 'inactive'];
 exports.DescriptionCardDefault = {
     title: "Header title",
     titleSize: "md",
@@ -39,6 +40,7 @@ exports.DescriptionCardDefault = {
     content: null,
     hasNoContentSidePadding: false,
     middleTitle: null,
+    status: null,
     subcategoryList: [],
     hasCategoryLayout: false,
     hasTwoColumnHeader: 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, 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, 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: {

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

@@ -23,6 +23,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var DescriptionCard_1 = __importDefault(require("../DescriptionCard"));
 var descriptionList_json_1 = __importDefault(require("./../../../jsons/descriptionList.json"));
+var DescriptionCard_styled_1 = require("../DescriptionCard.styled");
 var defaultHeaderImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
 var defaultDropdownList = [
     { name: "test", component: function (_a) {
@@ -215,14 +216,16 @@ var categoryDropdownList = [
     { name: "Yeni ürün ekle" },
     { name: "Sil" },
 ];
-var CategoryListHeader = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n    gap: 1.5rem;\n    padding: 0 1.5rem 0.75rem;\n    font: var(--body-semi-bold-14-17);\n    color: var(--dark-opacity-50);\n"], ["\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n    gap: 1.5rem;\n    padding: 0 1.5rem 0.75rem;\n    font: var(--body-semi-bold-14-17);\n    color: var(--dark-opacity-50);\n"])));
+var CategoryListHeader = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    gap: 3.5rem;\n    padding: 0 1.5rem 0.75rem;\n    font: var(--body-semi-bold-14-17);\n    color: var(--dark-opacity-50);\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    gap: 3.5rem;\n    padding: 0 1.5rem 0.75rem;\n    font: var(--body-semi-bold-14-17);\n    color: var(--dark-opacity-50);\n"])), DescriptionCard_styled_1.categoryRowGridColumns);
 var CategoryListHeaderCount = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    white-space: nowrap;\n"], ["\n    white-space: nowrap;\n"])));
-var CategoryListHeaderAction = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: block;\n    text-align: right;\n"], ["\n    display: block;\n    text-align: right;\n"])));
+var CategoryListHeaderStatus = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    white-space: nowrap;\n"], ["\n    white-space: nowrap;\n"])));
+var CategoryListHeaderAction = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: block;\n    width: 100%;\n"], ["\n    display: block;\n    width: 100%;\n"])));
 exports.CategoryStructure = {
-    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "900px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00C7ekirdek kahve", middleTitle: "10 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: [
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "900px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderStatus, { children: "Kategori durumu" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00C7ekirdek kahve", middleTitle: "10 \u00FCr\u00FCn", status: { label: "Aktif", variant: "active" }, hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: [
                     {
                         name: "Blend",
                         middleTitle: "7 ürün",
+                        status: { label: "Aktif", variant: "active" },
                         hasDropdown: true,
                         dropdownList: categoryDropdownList,
                         dropdownWidth: "200px",
@@ -232,25 +235,27 @@ exports.CategoryStructure = {
                     {
                         name: "Single orjin",
                         middleTitle: "3 ürün",
+                        status: { label: "Pasif", variant: "inactive" },
                         hasDropdown: true,
                         dropdownList: categoryDropdownList,
                         dropdownWidth: "200px",
                         buttonAction: function () { return console.log("subcategory edit"); },
                         onClick: function () { return console.log("subcategory navigate"); },
                     },
-                ] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00D6\u011F\u00FCt\u00FClm\u00FC\u015F kahve", middleTitle: "7 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: [
+                ] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00D6\u011F\u00FCt\u00FClm\u00FC\u015F kahve", middleTitle: "7 \u00FCr\u00FCn", status: { label: "Aktif", variant: "active" }, hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: [
                     {
                         name: "Terra",
                         middleTitle: "1 ürün",
+                        status: { label: "Aktif", variant: "active" },
                         hasDropdown: true,
                         dropdownList: categoryDropdownList,
                         dropdownWidth: "200px",
                         buttonAction: function () { return console.log("subcategory edit"); },
                         onClick: function () { return console.log("subcategory navigate"); },
                     },
-                ] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Espresso", middleTitle: "1 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [] })] }))); },
+                ] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Espresso", middleTitle: "1 \u00FCr\u00FCn", status: { label: "Pasif", variant: "inactive" }, hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [] })] }))); },
 };
 exports.AddProductToCategory = {
     render: function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Bu kategoriye \u00FCr\u00FCn ekle", titleSize: "lg", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderBackButton: true, headerSize: "medium", onHeaderBack: function () { return console.log("back clicked"); }, list: [] }) }))); },
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/Icon/iconList/ShowSm.d.ts

@@ -0,0 +1,3 @@
+export default SvgShowSm;
+declare function SvgShowSm(props: any): React.JSX.Element;
+import * as React from "react";

package/dist/components/Icon/iconList/ShowSm.js

@@ -0,0 +1,40 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgShowSm = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.1079 8.03378C10.1079 9.19778 9.16391 10.1411 7.99991 10.1411C6.83591 10.1411 5.89258 9.19778 5.89258 8.03378C5.89258 6.86911 6.83591 5.92578 7.99991 5.92578C9.16391 5.92578 10.1079 6.86911 10.1079 8.03378Z", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.99932 12.904C10.538 12.904 12.86 11.0786 14.1673 8.03597C12.86 4.9933 10.538 3.16797 7.99932 3.16797H8.00198C5.46332 3.16797 3.14132 4.9933 1.83398 8.03597C3.14132 11.0786 5.46332 12.904 8.00198 12.904H7.99932Z", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+exports.default = SvgShowSm;

package/dist/components/Icon/iconList/index.d.ts

@@ -563,6 +563,9 @@ export namespace iconList {
     function Show({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
+    function ShowSm({ ...props }: {
+        [x: string]: any;
+    }): import("react").JSX.Element;
     function ShufflePlay({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
@@ -986,6 +989,7 @@ import { default as ShieldDone } from "./ShieldDone";
 import { default as ShieldDoneLg } from "./ShieldDoneLg";
 import { default as ShieldFail } from "./ShieldFail";
 import { default as Show } from "./Show";
+import { default as ShowSm } from "./ShowSm";
 import { default as ShufflePlay } from "./ShufflePlay";
 import { default as SignLanguage } from "./SignLanguage";
 import { default as Star } from "./Star";
@@ -1064,4 +1068,4 @@ import { default as UserPlusLg } from "./UserPlusLg";
 import { default as Wphk } from "./Wphk";
 import { default as Youtubehk } from "./Youtubehk";
 import { default as Youtubewithfooter } from "./Youtubewithfooter";
-export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowLeftXl, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Closemini, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusMd, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Subcategory, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickMd, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };
+export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowLeftXl, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Closemini, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusMd, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShowSm, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Subcategory, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickMd, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };

package/dist/components/Icon/iconList/index.js

@@ -28,9 +28,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.BagCircleFilled = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeft = exports.ArrowSmallDownStroke = exports.ArrowSmallDown = exports.ArrowSharemini = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowLeftXl = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGoSmall = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.Announcement = exports.Activity = void 0;
 exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ElSatis = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.DownloadMini = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.CreditCard = exports.Copy = exports.Completed = exports.Coffee = exports.Closemini = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkMd = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = void 0;
 exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.MoneyBig = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.ForwardMd = exports.Folder = exports.Flash = exports.FilterUp = void 0;
-exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Subcategory = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusMd = exports.PlusCircle = exports.PlusBig = exports.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = void 0;
-exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.TickMd = exports.Tick = void 0;
-exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = void 0;
+exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Subcategory = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.ShowSm = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusMd = exports.PlusCircle = exports.PlusBig = exports.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = void 0;
+exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.TickMd = exports.Tick = exports.ThumbCircleFilled = void 0;
+exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Activity_1 = __importDefault(require("./Activity"));
 Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -408,6 +408,8 @@ var ShieldFail_1 = __importDefault(require("./ShieldFail"));
 Object.defineProperty(exports, "ShieldFail", { enumerable: true, get: function () { return ShieldFail_1.default; } });
 var Show_1 = __importDefault(require("./Show"));
 Object.defineProperty(exports, "Show", { enumerable: true, get: function () { return Show_1.default; } });
+var ShowSm_1 = __importDefault(require("./ShowSm"));
+Object.defineProperty(exports, "ShowSm", { enumerable: true, get: function () { return ShowSm_1.default; } });
 var ShufflePlay_1 = __importDefault(require("./ShufflePlay"));
 Object.defineProperty(exports, "ShufflePlay", { enumerable: true, get: function () { return ShufflePlay_1.default; } });
 var SignLanguage_1 = __importDefault(require("./SignLanguage"));
@@ -1317,6 +1319,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Show_1.default, __assign({}, props));
     },
+    ShowSm: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(ShowSm_1.default, __assign({}, props));
+    },
     ShufflePlay: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(ShufflePlay_1.default, __assign({}, props));

package/dist/components/Input/Input.styled.js

@@ -16,7 +16,7 @@ exports.FieldTopActions = styled_components_1.default.div(templateObject_4 || (t
 exports.FieldLabel = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
 exports.CharCount = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"])));
 exports.FieldDescription = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
-exports.InputStyled = styled_components_1.default.input(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"])), function (props) {
+exports.InputStyled = styled_components_1.default.input(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"])), function (props) {
     if (props.disabled)
         return 'var(--dark-opacity-5)';
     if (props.$isCalendarOpen || props.$hasError)
@@ -31,6 +31,12 @@ exports.InputStyled = styled_components_1.default.input(templateObject_8 || (tem
     if (props.$isCalendarOpen || props.$hasError)
         return '18.5px 23px';
     return '19.5px 24px';
-}, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
+}, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) {
+    if (props.disabled)
+        return 'var(--dark-opacity-25)';
+    if (props.$hasError)
+        return 'var(--red)';
+    return 'var(--dark-opacity-50)';
+}, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
 exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: white;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: white;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;