krl-alfred 2.20.7 → 2.21.1

package/dist/components/AddressCard/AddressCard.styled.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary-hover);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary-hover);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
 exports.Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: 1rem;\n    cursor: default;\n"], ["\n    margin-top: 1rem;\n    cursor: default;\n"])));
 var templateObject_1, templateObject_2;

package/dist/components/Badges/layouts/belt/belt.styled.js

@@ -10,7 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgesStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
-exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  filter: ", ";\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"], ["\n  filter: ", ";\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"])), function (props) { return props.$variant === "secondary" ? "drop-shadow(4px 4px 15px rgb(246,99,185,0.5))" : "drop-shadow(4px 4px 15px rgba(151,99,246,.5))"; }, function (props) { return props.$hasResponsive && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n          width: 60px;\n          height: 60px;\n        }\n      "); }, function (props) { return props.$size === "small" ? "60px" : "90px"; }, function (props) { return props.$size === "small" ? "15px" : "27px"; }, function (props) { return props.$size === "small" ? "-5px" : "-7px"; }, function (props) {
+exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  filter: ", ";\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"], ["\n  filter: ", ";\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"])), function (props) { return props.$variant === "secondary"
+    ? "drop-shadow(4px 4px 15px rgb(246,99,185,0.5))"
+    : "drop-shadow(4px 4px 15px color-mix(in srgb, var(--primary) 50%, transparent))"; }, function (props) { return props.$hasResponsive && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n          width: 60px;\n          height: 60px;\n        }\n      "); }, function (props) { return props.$size === "small" ? "60px" : "90px"; }, function (props) { return props.$size === "small" ? "15px" : "27px"; }, function (props) { return props.$size === "small" ? "-5px" : "-7px"; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "var(--caption-bold-10-12)";

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DescriptionCardProps } from "./props";
-declare const DescriptionCard: ({ title, titleSize, 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, middleTitle, subcategoryList, hasCategoryPadding, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
+declare const DescriptionCard: ({ title, titleSize, 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, hasCategoryPadding, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
 export default DescriptionCard;

package/dist/components/DescriptionCard/DescriptionCard.js

@@ -32,15 +32,15 @@ var SubcategoryRow = function (_a) {
     return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$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 })] }), (hasCategoryPadding || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryPadding": hasCategoryPadding, 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.headerButtonText, headerButtonText = _d === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _d, _e = _a.hasHeaderDropdown, hasHeaderDropdown = _e === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _e, _f = _a.hasHeaderBackButton, hasHeaderBackButton = _f === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _f, _g = _a.list, list = _g === void 0 ? props_1.DescriptionCardDefault.list : _g, _h = _a.hasBadge, hasBadge = _h === void 0 ? props_1.DescriptionCardDefault.hasBadge : _h, _j = _a.badgeText, badgeText = _j === void 0 ? props_1.DescriptionCardDefault.badgeText : _j, _k = _a.hasHeader, hasHeader = _k === void 0 ? props_1.DescriptionCardDefault.hasHeader : _k, _l = _a.hasHeaderBackground, hasHeaderBackground = _l === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _l, _m = _a.hasHeaderBorder, hasHeaderBorder = _m === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _m, _o = _a.hasRounded, hasRounded = _o === void 0 ? props_1.DescriptionCardDefault.hasRounded : _o, _p = _a.hasBorder, hasBorder = _p === void 0 ? props_1.DescriptionCardDefault.hasBorder : _p, _q = _a.headerImage, headerImage = _q === void 0 ? props_1.DescriptionCardDefault.headerImage : _q, _r = _a.headerRightContent, headerRightContent = _r === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _r, _s = _a.dropdownList, dropdownList = _s === void 0 ? props_1.DescriptionCardDefault.dropdownList : _s, _t = _a.dropdownWidth, dropdownWidth = _t === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _t, _u = _a.accordionList, accordionList = _u === void 0 ? props_1.DescriptionCardDefault.accordionList : _u, _v = _a.boxSize, boxSize = _v === void 0 ? props_1.DescriptionCardDefault.boxSize : _v, _w = _a.hasHeaderButton, hasHeaderButton = _w === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _w, _x = _a.headerButtonWidth, headerButtonWidth = _x === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _x, _y = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _y === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _y, _z = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _z === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _z, _0 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _0 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _0, _1 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _1 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _1, _2 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _2, _3 = _a.content, content = _3 === void 0 ? props_1.DescriptionCardDefault.content : _3, _4 = _a.middleTitle, middleTitle = _4 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _4, _5 = _a.subcategoryList, subcategoryList = _5 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _5, _6 = _a.hasCategoryPadding, hasCategoryPadding = _6 === void 0 ? props_1.DescriptionCardDefault.hasCategoryPadding : _6, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _7 = _a.customColumnSpan, customColumnSpan = _7 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _7;
+    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.headerDescription, headerDescription = _d === void 0 ? props_1.DescriptionCardDefault.headerDescription : _d, _e = _a.headerButtonText, headerButtonText = _e === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _e, _f = _a.hasHeaderDropdown, hasHeaderDropdown = _f === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _f, _g = _a.hasHeaderBackButton, hasHeaderBackButton = _g === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _g, _h = _a.list, list = _h === void 0 ? props_1.DescriptionCardDefault.list : _h, _j = _a.hasBadge, hasBadge = _j === void 0 ? props_1.DescriptionCardDefault.hasBadge : _j, _k = _a.badgeText, badgeText = _k === void 0 ? props_1.DescriptionCardDefault.badgeText : _k, _l = _a.hasHeader, hasHeader = _l === void 0 ? props_1.DescriptionCardDefault.hasHeader : _l, _m = _a.hasHeaderBackground, hasHeaderBackground = _m === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _m, _o = _a.hasHeaderBorder, hasHeaderBorder = _o === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _o, _p = _a.hasRounded, hasRounded = _p === void 0 ? props_1.DescriptionCardDefault.hasRounded : _p, _q = _a.hasBorder, hasBorder = _q === void 0 ? props_1.DescriptionCardDefault.hasBorder : _q, _r = _a.headerImage, headerImage = _r === void 0 ? props_1.DescriptionCardDefault.headerImage : _r, _s = _a.headerRightContent, headerRightContent = _s === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _s, _t = _a.dropdownList, dropdownList = _t === void 0 ? props_1.DescriptionCardDefault.dropdownList : _t, _u = _a.dropdownWidth, dropdownWidth = _u === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _u, _v = _a.accordionList, accordionList = _v === void 0 ? props_1.DescriptionCardDefault.accordionList : _v, _w = _a.boxSize, boxSize = _w === void 0 ? props_1.DescriptionCardDefault.boxSize : _w, _x = _a.hasHeaderButton, hasHeaderButton = _x === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _x, _y = _a.headerButtonWidth, headerButtonWidth = _y === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _y, _z = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _z === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _z, _0 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _0 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _0, _1 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _1 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _1, _2 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _2, _3 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _3, _4 = _a.content, content = _4 === void 0 ? props_1.DescriptionCardDefault.content : _4, _5 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _5 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _5, _6 = _a.middleTitle, middleTitle = _6 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _6, _7 = _a.subcategoryList, subcategoryList = _7 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _7, _8 = _a.hasCategoryPadding, hasCategoryPadding = _8 === void 0 ? props_1.DescriptionCardDefault.hasCategoryPadding : _8, _9 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _9 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _9, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _10 = _a.customColumnSpan, customColumnSpan = _10 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _10;
     var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
     var HeaderDropdownComponent = hasCategoryPadding ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
     var hasHeaderRightContent = !!headerRightContent;
     var isHeaderClickable = !!onHeaderClick;
-    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": !!middleTitle || hasCategoryPadding, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryPadding, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder }, { 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: onHeaderClick }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { 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 }) }))] }))] }), (middleTitle || hasCategoryPadding) && ((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({ "$hasCategoryPadding": hasCategoryPadding, "$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, { children: content }), (hasCategoryPadding || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryPadding": hasCategoryPadding }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryPadding: hasCategoryPadding }, key)); }) }))) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { 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: onHeaderClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { 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({ "$hasCategoryPadding": hasCategoryPadding, "$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 })), (hasCategoryPadding || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryPadding": hasCategoryPadding }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryPadding: hasCategoryPadding }, key)); }) }))) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { 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

@@ -22,6 +22,8 @@ export declare const HeaderRightStyled: import("styled-components/dist/types").I
 export declare const HeaderActionWrapperStyled: 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 HeaderRightContentStyled: 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 HeaderTitleWrapperStyled: 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 HeaderTitleTopStyled: 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 HeaderTitleDescriptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 export declare const HeaderTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderImageWrapperStyled: 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 BadgeWrapper: 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;

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

@@ -7,19 +7,21 @@ 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.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.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;
 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;\n"], ["\n    display: block;\n    padding: 0;\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    ", "\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    ", "\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.$hasCategoryPadding && "\n        padding: 0 1.5rem 0;\n\n        &:has(".concat(exports.CategoryContentWrapper, ":not(:empty)) {\n            padding-bottom: 1.5rem;\n        }\n    "); }, 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    padding: ", ";\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-bottom: ", ";\n    ", "\n    ", "\n"], ["\n    padding: ", ";\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-bottom: ", ";\n    ", "\n    ", "\n"])), function (props) {
+exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-bottom: ", ";\n    padding-bottom: 1rem;\n    ", "\n"], ["\n    padding: ", ";\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-bottom: ", ";\n    padding-bottom: 1rem;\n    ", "\n"])), function (props) {
     if (props.$hasCategoryPadding) {
         return props.$headerImage ? "1rem 0" : "1.5rem 0";
     }
     return props.$headerImage ? "1rem 1.5rem" : "1.5rem";
 }, function (props) {
+    if (props.$hasTwoColumnHeader)
+        return '1fr auto';
     if (props.$hasCategoryPadding)
         return exports.categoryRowGridColumns;
     if (props.$hasHeaderRightContent && !props.$hasMiddleTitle)
@@ -27,34 +29,36 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
     if (props.$hasMiddleTitle)
         return '1fr auto auto';
     return '1fr auto';
-}, 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.$hasHeaderBorder && "\n        padding-bottom: 1rem;\n    "; }, function (props) { return props.$hasCategoryPadding && "\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.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$hasCategoryPadding && "\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.$hasCategoryPadding || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; });
 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    align-items: center;\n    min-width: 0;\n    cursor: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
-exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font: ", ";\n    display: block;\n"], ["\n    font: ", ";\n    display: block;\n"])), function (props) { return props.$titleSize === 'lg'
+exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    cursor: ", ";\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
+exports.HeaderTitleTopStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n"])));
+exports.HeaderTitleDescriptionStyled = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin: 1rem 0 0;\n    font: var(--body-regular-14-17);\n    color: var(--dark);\n"], ["\n    margin: 1rem 0 0;\n    font: var(--body-regular-14-17);\n    color: var(--dark);\n"])));
+exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: ", ";\n    display: block;\n"], ["\n    font: ", ";\n    display: block;\n"])), function (props) { return props.$titleSize === 'lg'
     ? 'var(--headline-semi-bold-20-24)'
     : 'var(--headline-semi-bold-18-22)'; });
-exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
-exports.BadgeWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: block;\n    margin-left: 1.5rem;\n"], ["\n    display: block;\n    margin-left: 1.5rem;\n"])));
-exports.ContentWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __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.ListStyled = styled_components_1.default.ul(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-bottom-left-radius: inherit;\n    border-bottom-right-radius: inherit;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px 0px 0 0px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-bottom-left-radius: inherit;\n    border-bottom-right-radius: inherit;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px 0px 0 0px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"])), function (props) { return props.$boxSize; });
-exports.ListItemStyled = styled_components_1.default.li(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    padding: 1.5rem;\n    border-right: 1px solid var(--dark-opacity-10);\n    border-bottom: 1px solid var(--dark-opacity-10);\n    word-break: break-word;\n    grid-column: span ", ";\n\n    &:is(:last-child){\n        border-right: 0;\n    }\n"], ["\n    display: block;\n    padding: 1.5rem;\n    border-right: 1px solid var(--dark-opacity-10);\n    border-bottom: 1px solid var(--dark-opacity-10);\n    word-break: break-word;\n    grid-column: span ", ";\n\n    &:is(:last-child){\n        border-right: 0;\n    }\n"])), function (props) { var _a; return (_a = props.$columnSpan) !== null && _a !== void 0 ? _a : 1; });
-exports.DisplayTitleStyled = styled_components_1.default.strong(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--body-semi-bold-14-17);\n"], ["\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--body-semi-bold-14-17);\n"])));
-exports.DisplayValueStyled = styled_components_1.default.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    display: block;\n    margin-top: 0.5rem;\n    color: var(--dark);\n    font: var(--body-semi-bold-14-17);\n"], ["\n    display: block;\n    margin-top: 0.5rem;\n    color: var(--dark);\n    font: var(--body-semi-bold-14-17);\n"])));
-exports.SubMenu = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n    z-index: 5;\n    > ul{\n        margin: 0.5rem 0 0 0;\n    }\n"], ["\n    position: absolute;\n    right: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n    z-index: 5;\n    > ul{\n        margin: 0.5rem 0 0 0;\n    }\n"])));
-exports.AccordionListWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __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_23 || (templateObject_23 = __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_24 || (templateObject_24 = __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.SubcategoryListWrapper = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n    padding-top: ", ";\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n    padding-top: ", ";\n"])), function (props) { return props.$hasCategoryPadding ? "1rem" : "0"; }, function (props) { return props.$hasCategoryPadding ? "1rem" : "0"; });
-exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1rem 1.5rem;\n    border-radius: ", ";\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: ", ";\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.$hasCategoryPadding ? exports.categoryRowGridColumns : '1fr auto auto'; }, function (props) { return props.$hasCategoryPadding ? "0.5rem" : "0"; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$hasCategoryPadding && "\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_27 || (templateObject_27 = __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_28 || (templateObject_28 = __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_29 || (templateObject_29 = __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_30 || (templateObject_30 = __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_31 || (templateObject_31 = __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.$hasCategoryPadding ? 'flex-end' : 'flex-start'; });
-exports.AccordionItemBody = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __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;
+exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
+exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    margin-left: 1.5rem;\n"], ["\n    display: block;\n    margin-left: 1.5rem;\n"])));
+exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    padding: ", ";\n"], ["\n    display: block;\n    padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '1rem 0 1.5rem 0' : '0 1.5rem 1.5rem 1.5rem'; });
+exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-bottom-left-radius: inherit;\n    border-bottom-right-radius: inherit;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px 0px 0 0px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-bottom-left-radius: inherit;\n    border-bottom-right-radius: inherit;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px 0px 0 0px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"])), function (props) { return props.$boxSize; });
+exports.ListItemStyled = styled_components_1.default.li(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    display: block;\n    padding: 1.5rem;\n    border-right: 1px solid var(--dark-opacity-10);\n    border-bottom: 1px solid var(--dark-opacity-10);\n    word-break: break-word;\n    grid-column: span ", ";\n\n    &:is(:last-child){\n        border-right: 0;\n    }\n"], ["\n    display: block;\n    padding: 1.5rem;\n    border-right: 1px solid var(--dark-opacity-10);\n    border-bottom: 1px solid var(--dark-opacity-10);\n    word-break: break-word;\n    grid-column: span ", ";\n\n    &:is(:last-child){\n        border-right: 0;\n    }\n"])), function (props) { var _a; return (_a = props.$columnSpan) !== null && _a !== void 0 ? _a : 1; });
+exports.DisplayTitleStyled = styled_components_1.default.strong(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--body-semi-bold-14-17);\n"], ["\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--body-semi-bold-14-17);\n"])));
+exports.DisplayValueStyled = styled_components_1.default.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    display: block;\n    margin-top: 0.5rem;\n    color: var(--dark);\n    font: var(--body-semi-bold-14-17);\n"], ["\n    display: block;\n    margin-top: 0.5rem;\n    color: var(--dark);\n    font: var(--body-semi-bold-14-17);\n"])));
+exports.SubMenu = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n    z-index: 5;\n    > ul{\n        margin: 0.5rem 0 0 0;\n    }\n"], ["\n    position: absolute;\n    right: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n    z-index: 5;\n    > ul{\n        margin: 0.5rem 0 0 0;\n    }\n"])));
+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.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n    padding-top: ", ";\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n    padding-top: ", ";\n"])), function (props) { return props.$hasCategoryPadding ? "1rem" : "0"; }, function (props) { return props.$hasCategoryPadding ? "1rem" : "0"; });
+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: ", ";\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: ", ";\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.$hasCategoryPadding ? exports.categoryRowGridColumns : '1fr auto auto'; }, function (props) { return props.$hasCategoryPadding ? "0.5rem" : "0"; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$hasCategoryPadding && "\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.$hasCategoryPadding ? '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;

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

@@ -8,6 +8,7 @@ type TITLE_SIZE = typeof titleSizes[number];
 export interface DescriptionCard {
     title?: string;
     titleSize?: TITLE_SIZE;
+    headerDescription?: string;
     hasBadge?: boolean;
     hasHeader?: boolean;
     hasHeaderBackground?: boolean;
@@ -33,9 +34,12 @@ export interface DescriptionCard {
     headerPrimaryButtonIcon?: ICON;
     headerPrimaryButtonSize?: BUTTON_SIZE;
     content?: React.ReactNode;
+    hasNoContentSidePadding?: boolean;
     middleTitle?: string;
     subcategoryList?: SubcategoryItem[];
     hasCategoryPadding?: boolean;
+    /** Header grid'ini `1fr auto` (sol + sağ) olarak sabitler */
+    hasTwoColumnHeader?: boolean;
     headerButtonAction?(e: any): void;
     onHeaderBack?(): void;
     onHeaderClick?(e: React.MouseEvent): void;
@@ -58,6 +62,8 @@ export interface DescriptionCardStyledProps {
     $hasMiddleTitle?: boolean;
     $hasHeaderRightContent?: boolean;
     $hasCategoryPadding?: boolean;
+    $hasTwoColumnHeader?: boolean;
+    $hasNoContentSidePadding?: boolean;
     $titleSize?: TITLE_SIZE;
     $isClickable?: boolean;
     $customColumnSpan?: {

package/dist/components/DescriptionCard/props.js

@@ -7,6 +7,7 @@ exports.titleSizes = ['md', 'lg'];
 exports.DescriptionCardDefault = {
     title: "Header title",
     titleSize: "md",
+    headerDescription: null,
     hasBadge: false,
     hasHeader: true,
     hasHeaderBackground: false,
@@ -32,8 +33,10 @@ exports.DescriptionCardDefault = {
     headerPrimaryButtonIcon: null,
     headerPrimaryButtonSize: "xsmall",
     content: null,
+    hasNoContentSidePadding: false,
     middleTitle: null,
     subcategoryList: [],
     hasCategoryPadding: false,
+    hasTwoColumnHeader: false,
     customColumnSpan: {}
 };

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

@@ -1,12 +1,15 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ title, titleSize, 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, middleTitle, subcategoryList, hasCategoryPadding, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
+    component: ({ title, titleSize, 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, hasCategoryPadding, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
     tags: string[];
     argTypes: {
         title: {
             control: string;
         };
+        headerDescription: {
+            control: string;
+        };
         hasBadge: {
             control: string;
         };
@@ -28,6 +31,10 @@ declare const _default: {
         hasBorder: {
             control: string;
         };
+        hasTwoColumnHeader: {
+            control: string;
+            description: string;
+        };
         hasHeaderButton: {
             control: string;
         };
@@ -107,6 +114,40 @@ export declare const WithBadge: {
         headerImage: React.JSX.Element;
     };
 };
+export declare const WithHeaderDescription: {
+    args: {
+        headerDescription: string;
+        hasTwoColumnHeader: boolean;
+        title: string;
+        hasBadge: boolean;
+        badgeText: string;
+        hasHeaderDropdown: boolean;
+        headerButtonText: string;
+        list: {
+            display: string;
+            title: string;
+        }[];
+        hasHeader: boolean;
+        hasRounded: boolean;
+        hasBorder: boolean;
+        hasHeaderButton: boolean;
+        headerButtonWidth: any;
+        hasHeaderPrimaryButton: boolean;
+        headerPrimaryButtonText: string;
+        headerPrimaryButtonAction: () => void;
+        headerButtonAction: () => void;
+        boxSize: number;
+        customColumnSpan: {
+            0: number;
+        };
+        dropdownList: {
+            name: string;
+            component: ({ children }: any) => React.JSX.Element;
+        }[];
+        dropdownWidth: string;
+        headerImage: React.JSX.Element;
+    };
+};
 export declare const WithHeaderBackground: {
     args: {
         hasHeaderBackground: boolean;

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

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddProductToCategory = exports.CategoryStructure = exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithBadge = exports.Default = void 0;
+exports.AddProductToCategory = exports.CategoryStructure = exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithHeaderDescription = exports.WithBadge = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var DescriptionCard_1 = __importDefault(require("../DescriptionCard"));
@@ -62,6 +62,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         title: { control: 'text' },
+        headerDescription: { control: 'text' },
         hasBadge: { control: 'boolean' },
         badgeText: { control: 'text' },
         hasHeader: { control: 'boolean' },
@@ -69,6 +70,10 @@ exports.default = {
         hasHeaderBorder: { control: 'boolean' },
         hasRounded: { control: 'boolean' },
         hasBorder: { control: 'boolean' },
+        hasTwoColumnHeader: {
+            control: 'boolean',
+            description: "Header grid'ini `1fr auto` olarak sabitler",
+        },
         hasHeaderButton: { control: 'boolean' },
         hasHeaderDropdown: { control: 'boolean' },
         hasHeaderPrimaryButton: { control: 'boolean' },
@@ -81,6 +86,9 @@ exports.Default = {
 exports.WithBadge = {
     args: __assign(__assign({}, defaultArgs), { hasBadge: true, badgeText: "Yeni" }),
 };
+exports.WithHeaderDescription = {
+    args: __assign(__assign({}, defaultArgs), { headerDescription: "Bu alan başlığın altında gösterilen açıklama metnidir.", hasTwoColumnHeader: true }),
+};
 exports.WithHeaderBackground = {
     args: __assign(__assign({}, defaultArgs), { hasHeaderBackground: true }),
 };

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

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

package/dist/components/Icon/iconList/ArrowLeftXl.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 SvgArrowLeftXl = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M18.667 21.332L13.3337 15.9987L18.667 10.6654", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.667 21.332L13.3337 15.9987L18.667 10.6654", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.667 21.332L13.3337 15.9987L18.667 10.6654", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+exports.default = SvgArrowLeftXl;

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

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

package/dist/components/Icon/iconList/PlusMd.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 SvgPlusMd = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12.0016 8.33594V15.6623", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.6673 12H8.33398", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+exports.default = SvgPlusMd;

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

@@ -38,6 +38,9 @@ export namespace iconList {
     function ArrowLeftSquare({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
+    function ArrowLeftXl({ ...props }: {
+        [x: string]: any;
+    }): import("react").JSX.Element;
     function ArrowRight({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
@@ -485,6 +488,9 @@ export namespace iconList {
     function PlusCircle({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
+    function PlusMd({ ...props }: {
+        [x: string]: any;
+    }): import("react").JSX.Element;
     function PlusSmall({ ...props }: {
         [x: string]: any;
     }): import("react").JSX.Element;
@@ -802,6 +808,7 @@ import { default as ArrowLeftAnimate } from "./ArrowLeftAnimate";
 import { default as ArrowLeftBig } from "./ArrowLeftBig";
 import { default as ArrowLeftCircle } from "./ArrowLeftCircle";
 import { default as ArrowLeftSquare } from "./ArrowLeftSquare";
+import { default as ArrowLeftXl } from "./ArrowLeftXl";
 import { default as ArrowRight } from "./ArrowRight";
 import { default as ArrowRightAnimate } from "./ArrowRightAnimate";
 import { default as ArrowRightBig } from "./ArrowRightBig";
@@ -951,6 +958,7 @@ import { default as PauseMd } from "./PauseMd";
 import { default as PlayMd } from "./PlayMd";
 import { default as PlusBig } from "./PlusBig";
 import { default as PlusCircle } from "./PlusCircle";
+import { default as PlusMd } from "./PlusMd";
 import { default as PlusSmall } from "./PlusSmall";
 import { default as PlusSquare } from "./PlusSquare";
 import { default as PriceTag } from "./PriceTag";
@@ -1052,4 +1060,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, 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, 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, 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, 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 };