krl-alfred 2.20.1 → 2.20.3

package/dist/components/ActionButton/ActionButton.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ActionButtonProps } from "./props";
-declare const ActionButton: ({ width, title, date, img, isMonthVisible, hasTimer, isLoading, hasInfo, infoText, ...other }: ActionButtonProps) => React.JSX.Element;
+declare const ActionButton: ({ width, title, date, img, isMonthVisible, hasTimer, isLoading, hasInfo, infoText, description, alignButtonWithTitle, ...other }: ActionButtonProps) => React.JSX.Element;
 export default ActionButton;

package/dist/components/ActionButton/ActionButton.js

@@ -33,12 +33,12 @@ var Button_1 = __importDefault(require("../Button"));
 var date_fns_1 = require("date-fns");
 var react_i18next_1 = require("react-i18next");
 var ActionButton = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.img, img = _e === void 0 ? props_1.ActionButtonDefault.img : _e, _f = _a.isMonthVisible, isMonthVisible = _f === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _f, _g = _a.hasTimer, hasTimer = _g === void 0 ? props_1.ActionButtonDefault.hasTimer : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.ActionButtonDefault.isLoading : _h, _j = _a.hasInfo, hasInfo = _j === void 0 ? props_1.ActionButtonDefault.hasInfo : _j, _k = _a.infoText, infoText = _k === void 0 ? props_1.ActionButtonDefault.infoText : _k, other = __rest(_a, ["width", "title", "date", "img", "isMonthVisible", "hasTimer", "isLoading", "hasInfo", "infoText"]);
+    var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.img, img = _e === void 0 ? props_1.ActionButtonDefault.img : _e, _f = _a.isMonthVisible, isMonthVisible = _f === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _f, _g = _a.hasTimer, hasTimer = _g === void 0 ? props_1.ActionButtonDefault.hasTimer : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.ActionButtonDefault.isLoading : _h, _j = _a.hasInfo, hasInfo = _j === void 0 ? props_1.ActionButtonDefault.hasInfo : _j, _k = _a.infoText, infoText = _k === void 0 ? props_1.ActionButtonDefault.infoText : _k, _l = _a.description, description = _l === void 0 ? props_1.ActionButtonDefault.description : _l, _m = _a.alignButtonWithTitle, alignButtonWithTitle = _m === void 0 ? props_1.ActionButtonDefault.alignButtonWithTitle : _m, other = __rest(_a, ["width", "title", "date", "img", "isMonthVisible", "hasTimer", "isLoading", "hasInfo", "infoText", "description", "alignButtonWithTitle"]);
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _l = (0, react_1.useState)(0), months = _l[0], setMonths = _l[1];
-    var _m = (0, react_1.useState)(0), days = _m[0], setDays = _m[1];
-    var _o = (0, react_1.useState)(0), minutes = _o[0], setMinutes = _o[1];
-    var _p = (0, react_1.useState)(0), hours = _p[0], setHours = _p[1];
+    var _o = (0, react_1.useState)(0), months = _o[0], setMonths = _o[1];
+    var _p = (0, react_1.useState)(0), days = _p[0], setDays = _p[1];
+    var _q = (0, react_1.useState)(0), minutes = _q[0], setMinutes = _q[1];
+    var _r = (0, react_1.useState)(0), hours = _r[0], setHours = _r[1];
     //const [secounds,setSecounds] = useState(0);
     var deadline = new Date(date).getTime();
     var count = function () {
@@ -59,6 +59,6 @@ var ActionButton = function (_a) {
     (0, react_1.useEffect)(function () {
         count();
     }, [date]);
-    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width, "$hasTimer": hasTimer, "$hasInfo": hasInfo }, other, { children: [hasInfo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.ActionInfoText, { children: infoText }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.DashedLine, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 335 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.0009 0C12.653 0 15.1966 1.05357 17.0719 2.92893C18.9473 4.8043 20.0009 7.34783 20.0009 10C20.0009 12.6522 18.9473 15.1957 17.0719 17.0711C15.1966 18.9464 12.653 20 10.0009 20L10.0009 10V0Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.0009 9.5L306.999 10.4925", stroke: "white", "stroke-width": "6", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-dasharray": "12 12" }), (0, jsx_runtime_1.jsx)("path", { d: "M324.999 20C322.347 20 319.804 18.9464 317.928 17.0711C316.053 15.1957 314.999 12.6522 314.999 10C314.999 7.34784 316.053 4.8043 317.928 2.92893C319.804 1.05357 322.347 -3.16267e-08 324.999 0V10V20Z", fill: "white" })] })) })] })), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionInner, __assign({ "$hasInfo": hasInfo }, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Top, __assign({ "$hasTimer": hasTimer }, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.IconWrapper, { children: img }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), !hasTimer && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" }))] })), hasTimer && ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Bottom, __assign({ "$hasTimer": hasTimer }, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.EmptySpacer, {}), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.BottomContent, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Timer, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: months }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('month') })] }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" })] })), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: days.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('day') })] }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" }), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: hours.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('hour') })] }), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" }), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: minutes.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('minute') })] })] }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading })] })] })))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width, "$hasTimer": hasTimer, "$hasInfo": hasInfo }, other, { children: [hasInfo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.ActionInfoText, { children: infoText }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.DashedLine, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 335 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.0009 0C12.653 0 15.1966 1.05357 17.0719 2.92893C18.9473 4.8043 20.0009 7.34783 20.0009 10C20.0009 12.6522 18.9473 15.1957 17.0719 17.0711C15.1966 18.9464 12.653 20 10.0009 20L10.0009 10V0Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.0009 9.5L306.999 10.4925", stroke: "white", "stroke-width": "6", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-dasharray": "12 12" }), (0, jsx_runtime_1.jsx)("path", { d: "M324.999 20C322.347 20 319.804 18.9464 317.928 17.0711C316.053 15.1957 314.999 12.6522 314.999 10C314.999 7.34784 316.053 4.8043 317.928 2.92893C319.804 1.05357 322.347 -3.16267e-08 324.999 0V10V20Z", fill: "white" })] })) })] })), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionInner, __assign({ "$hasInfo": hasInfo }, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Top, __assign({ "$hasTimer": hasTimer, "$alignButtonWithTitle": alignButtonWithTitle }, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.IconWrapper, { children: img }), alignButtonWithTitle ? ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TitleRow, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), !hasTimer && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading }))] }))] })), description && (0, jsx_runtime_1.jsx)(ActionButton_styled_1.Description, { children: description }), hasTimer && ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Bottom, __assign({ "$hasTimer": hasTimer }, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.EmptySpacer, {}), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.BottomContent, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Timer, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: months }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('month') })] }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" })] })), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: days.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('day') })] }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" }), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: hours.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('hour') })] }), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" }), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: minutes.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('minute') })] })] }))] }), !alignButtonWithTitle && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading }))] })] })))] }))] })));
 };
 exports.default = ActionButton;

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

@@ -5,6 +5,8 @@ export declare const ActionInfoText: import("styled-components/dist/types").ISty
 export declare const DashedLine: 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 ActionInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never>>> & string;
 export declare const Top: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never>>> & string;
+export declare const TitleRow: 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 Description: 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 Bottom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never>>> & string;
 export declare const IconWrapper: 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 Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/components/ActionButton/ActionButton.styled.js

@@ -7,22 +7,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmptySpacer = exports.TimerDots = exports.TimerDescription = exports.TimerTitle = exports.TimerBox = exports.Timer = exports.BottomContent = exports.Title = exports.IconWrapper = exports.Bottom = exports.Top = exports.ActionInner = exports.DashedLine = exports.ActionInfoText = exports.ActionButtonStyled = void 0;
+exports.EmptySpacer = exports.TimerDots = exports.TimerDescription = exports.TimerTitle = exports.TimerBox = exports.Timer = exports.BottomContent = exports.Title = exports.IconWrapper = exports.Bottom = exports.Description = exports.TitleRow = exports.Top = exports.ActionInner = exports.DashedLine = exports.ActionInfoText = exports.ActionButtonStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n\n"], ["\n    width: ", ";\n\n"])), function (props) { return props.$width; });
 exports.ActionInfoText = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: var(--primary-opacity-5);\n    font: var(--caption-semi-bold-10-12);\n    color: var(--primary);\n    padding: 1.5rem 0 0.5rem 1.5rem;\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n"], ["\n    background-color: var(--primary-opacity-5);\n    font: var(--caption-semi-bold-10-12);\n    color: var(--primary);\n    padding: 1.5rem 0 0.5rem 1.5rem;\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n"])));
 exports.DashedLine = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    background: #fbf7ff;\n    overflow: hidden;\n    height: 22px;\n\n    svg {\n        height: 22px;\n        position: absolute;\n        top: 0;\n        transform: translateX(-50%);\n        left: 50%;\n        width: calc(100% + 22px);\n    }\n"], ["\n    position: relative;\n    width: 100%;\n    background: #fbf7ff;\n    overflow: hidden;\n    height: 22px;\n\n    svg {\n        height: 22px;\n        position: absolute;\n        top: 0;\n        transform: translateX(-50%);\n        left: 50%;\n        width: calc(100% + 22px);\n    }\n"])));
 exports.ActionInner = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1.5rem;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--dark);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ", "\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n"], ["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1.5rem;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--dark);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ", "\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n"])), function (props) { return props.$hasInfo ? "\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n        padding-top: 0.5rem;\n    " : ""; }, devices_1.devices.mdUp, devices_1.devices.md);
-exports.Top = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"])), function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
-exports.Bottom = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: 0.5rem;\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"], ["\n    margin-top: 0.5rem;\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"])), function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
-exports.IconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-right: 1rem;\n\n    * {\n        display: block !important;\n    }\n"], ["\n    margin-right: 1rem;\n\n    * {\n        display: block !important;\n    }\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: block;\n    font: var(--body-bold-14-17);\n"], ["\n    display: block;\n    font: var(--body-bold-14-17);\n"])));
-exports.BottomContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"])));
-exports.Timer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"], ["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"])));
-exports.TimerBox = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
-exports.TimerTitle = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font: var(--title-extra-bold-16-19);\n"], ["\n    font: var(--title-extra-bold-16-19);\n"])));
-exports.TimerDescription = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    font: var(--caption-regular-10-12);\n"], ["\n    font: var(--caption-regular-10-12);\n"])));
-exports.TimerDots = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"])));
-exports.EmptySpacer = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
-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;
+exports.Top = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"])), function (props) { return props.$alignButtonWithTitle ? "61px 1fr" : props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
+exports.TitleRow = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    min-width: 0;\n"])));
+exports.Description = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: block;\n    margin-top: 1rem;\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"], ["\n    display: block;\n    margin-top: 1rem;\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"])));
+exports.Bottom = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-top: 0.5rem;\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"], ["\n    margin-top: 0.5rem;\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"])), function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
+exports.IconWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-right: 1rem;\n\n    * {\n        display: block !important;\n    }\n"], ["\n    margin-right: 1rem;\n\n    * {\n        display: block !important;\n    }\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    font: var(--body-bold-14-17);\n"], ["\n    display: block;\n    font: var(--body-bold-14-17);\n"])));
+exports.BottomContent = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"])));
+exports.Timer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"], ["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"])));
+exports.TimerBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
+exports.TimerTitle = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: var(--title-extra-bold-16-19);\n"], ["\n    font: var(--title-extra-bold-16-19);\n"])));
+exports.TimerDescription = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    font: var(--caption-regular-10-12);\n"], ["\n    font: var(--caption-regular-10-12);\n"])));
+exports.TimerDots = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"])));
+exports.EmptySpacer = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])));
+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;

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

@@ -2,6 +2,8 @@ import React from "react";
 export interface ActionButton {
     width?: string;
     title?: string;
+    description?: React.ReactNode;
+    alignButtonWithTitle?: boolean;
     date?: Date;
     img?: React.ReactNode;
     isMonthVisible?: boolean;
@@ -9,11 +11,13 @@ export interface ActionButton {
     isLoading?: boolean;
     hasInfo?: boolean;
     infoText?: string;
+    onClick?(e: React.MouseEvent<HTMLDivElement>): void;
 }
 export declare const ActionButtonDefault: ActionButton;
 export interface ActionButtonStyledProps {
     $width?: string;
     $hasTimer?: boolean;
     $hasInfo?: boolean;
+    $alignButtonWithTitle?: boolean;
 }
-export type ActionButtonProps = typeof ActionButtonDefault;
+export type ActionButtonProps = ActionButton;

package/dist/components/ActionButton/props.js

@@ -4,6 +4,8 @@ exports.ActionButtonDefault = void 0;
 exports.ActionButtonDefault = {
     width: '100%',
     title: 'title',
+    description: null,
+    alignButtonWithTitle: false,
     date: new Date(),
     img: "",
     isMonthVisible: false,

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

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ width, title, date, img, isMonthVisible, hasTimer, isLoading, hasInfo, infoText, ...other }: import("../props").ActionButton) => React.JSX.Element;
+    component: ({ width, title, date, img, isMonthVisible, hasTimer, isLoading, hasInfo, infoText, description, alignButtonWithTitle, ...other }: import("../props").ActionButton) => React.JSX.Element;
     tags: string[];
     argTypes: {
         onClick: {
@@ -140,3 +140,18 @@ export declare const WithoutTimerWithInfo: {
         infoText: string;
     };
 };
+export declare const WithDescription: {
+    args: {
+        width: string;
+        title: string;
+        description: string;
+        alignButtonWithTitle: boolean;
+        hasTimer: boolean;
+        img: React.JSX.Element;
+        onClick: (e: any) => void;
+        hasInfo: boolean;
+    };
+};
+export declare const StoreSettings: {
+    render: () => React.JSX.Element;
+};

package/dist/components/ActionButton/stories/ActionButton.stories.js

@@ -1,9 +1,20 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithoutTimerWithInfo = exports.WithoutTimer = exports.WithTimerLoadingWithInfo = exports.WithTimerLoading = exports.WithTimerWithMonthAndInfo = exports.WithTimerWithMonth = exports.WithTimerWithInfo = exports.WithTimerNoInfo = exports.Default = void 0;
+exports.StoreSettings = exports.WithDescription = exports.WithoutTimerWithInfo = exports.WithoutTimer = exports.WithTimerLoadingWithInfo = exports.WithTimerLoading = exports.WithTimerWithMonthAndInfo = exports.WithTimerWithMonth = exports.WithTimerWithInfo = exports.WithTimerNoInfo = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ActionButton_1 = __importDefault(require("../ActionButton"));
 var iconList_1 = require("../../Icon/iconList");
@@ -145,3 +156,29 @@ exports.WithoutTimerWithInfo = {
         infoText: "Bilgilendirme metni buraya gelir",
     },
 };
+exports.WithDescription = {
+    args: {
+        width: '100%',
+        title: 'Kargo ayarları',
+        description: 'Tüm ürünlerinde mi kargo var, yoksa ürün bazlı mı? Kargo ücreti ve teslimat sürelerini buradan yönet.',
+        alignButtonWithTitle: true,
+        hasTimer: false,
+        img: defaultImg,
+        onClick: function (e) { return console.log(e); },
+        hasInfo: false,
+    },
+};
+exports.StoreSettings = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+            width: '100%',
+            maxWidth: '900px',
+            padding: '1.5rem',
+            border: '1px solid var(--dark-opacity-10)',
+            borderRadius: '0.5rem',
+            background: 'white',
+        } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ style: { display: 'block', marginBottom: '1.5rem', font: 'var(--headline-semi-bold-18-22)' } }, { children: "Ma\u011Faza ayarlar\u0131" })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                    gap: '1rem',
+                } }, { children: [(0, jsx_runtime_1.jsx)(ActionButton_1.default, { title: "Kargo ayarlar\u0131", description: "T\u00FCm \u00FCr\u00FCnlerinde mi kargo var, yoksa \u00FCr\u00FCn bazl\u0131 m\u0131? Kargo \u00FCcreti ve teslimat s\u00FCrelerini buradan y\u00F6net.", alignButtonWithTitle: true, hasTimer: false, img: defaultImg, onClick: function () { return console.log('Kargo ayarları'); } }), (0, jsx_runtime_1.jsx)(ActionButton_1.default, { title: "\u00D6deme ayarlar\u0131", description: "\u00D6deme y\u00F6ntemlerini, taksit se\u00E7eneklerini ve fatura bilgilerini bu alandan d\u00FCzenleyebilirsin.", alignButtonWithTitle: true, hasTimer: false, img: defaultImg, onClick: function () { return console.log('Ödeme ayarları'); } }), (0, jsx_runtime_1.jsx)(ActionButton_1.default, { title: "Abonelik kurallar\u0131", description: "Abonelik planlar\u0131n\u0131, iptal ko\u015Fullar\u0131n\u0131 ve yenileme kurallar\u0131n\u0131 buradan y\u00F6net.", alignButtonWithTitle: true, hasTimer: false, img: defaultImg, onClick: function () { return console.log('Abonelik kuralları'); } }), (0, jsx_runtime_1.jsx)(ActionButton_1.default, { title: "Ma\u011Faza bilgileri", description: "Ma\u011Faza ad\u0131, ileti\u015Fim bilgileri ve g\u00F6r\u00FCn\u00FCr ma\u011Faza detaylar\u0131n\u0131 g\u00FCncelle.", alignButtonWithTitle: true, hasTimer: false, img: defaultImg, onClick: function () { return console.log('Mağaza bilgileri'); } })] }))] }))); },
+};

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        margin-bottom: 1.5rem;\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        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        margin-bottom: 1.5rem;\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        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-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.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/DescriptionCard/DescriptionCard.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DescriptionCardProps } from "./props";
-declare const DescriptionCard: ({ title, headerButtonText, hasHeaderDropdown, list, hasBadge, badgeText, hasHeader, hasRounded, hasBorder, headerImage, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerButtonAction, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
+declare const DescriptionCard: ({ title, headerButtonText, hasHeaderDropdown, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, headerButtonAction, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
 export default DescriptionCard;

package/dist/components/DescriptionCard/DescriptionCard.js

@@ -22,14 +22,12 @@ var OptionMenu_1 = __importDefault(require("../OptionMenu"));
 var AccordionItem_1 = __importDefault(require("./AccordionItem"));
 var Button_1 = __importDefault(require("./../Button"));
 var DescriptionCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.headerButtonText, headerButtonText = _c === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _c, _d = _a.hasHeaderDropdown, hasHeaderDropdown = _d === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _d, _e = _a.list, list = _e === void 0 ? props_1.DescriptionCardDefault.list : _e, _f = _a.hasBadge, hasBadge = _f === void 0 ? props_1.DescriptionCardDefault.hasBadge : _f, _g = _a.badgeText, badgeText = _g === void 0 ? props_1.DescriptionCardDefault.badgeText : _g, _h = _a.hasHeader, hasHeader = _h === void 0 ? props_1.DescriptionCardDefault.hasHeader : _h, _j = _a.hasRounded, hasRounded = _j === void 0 ? props_1.DescriptionCardDefault.hasRounded : _j, _k = _a.hasBorder, hasBorder = _k === void 0 ? props_1.DescriptionCardDefault.hasBorder : _k, _l = _a.headerImage, headerImage = _l === void 0 ? props_1.DescriptionCardDefault.headerImage : _l, _m = _a.dropdownList, dropdownList = _m === void 0 ? props_1.DescriptionCardDefault.dropdownList : _m, _o = _a.dropdownWidth, dropdownWidth = _o === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _o, _p = _a.accordionList, accordionList = _p === void 0 ? props_1.DescriptionCardDefault.accordionList : _p, _q = _a.boxSize, boxSize = _q === void 0 ? props_1.DescriptionCardDefault.boxSize : _q, _r = _a.hasHeaderButton, hasHeaderButton = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _r, _s = _a.headerButtonWidth, headerButtonWidth = _s === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _s, _t = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _t === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _t, _u = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _u === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _u, _v = _a.headerPrimaryButtonText, headerPrimaryButtonText = _v === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _v, headerButtonAction = _a.headerButtonAction, _w = _a.customColumnSpan, customColumnSpan = _w === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _w;
-    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({ "$headerImage": headerImage }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { 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 }) }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightFrame" }, { children: [hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: "xsmall", variant: "primary" }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { 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 }) }))] }))] }))] }))), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { children: list.map(function (listItem, key) {
+    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.headerButtonText, headerButtonText = _c === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _c, _d = _a.hasHeaderDropdown, hasHeaderDropdown = _d === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _d, _e = _a.list, list = _e === void 0 ? props_1.DescriptionCardDefault.list : _e, _f = _a.hasBadge, hasBadge = _f === void 0 ? props_1.DescriptionCardDefault.hasBadge : _f, _g = _a.badgeText, badgeText = _g === void 0 ? props_1.DescriptionCardDefault.badgeText : _g, _h = _a.hasHeader, hasHeader = _h === void 0 ? props_1.DescriptionCardDefault.hasHeader : _h, _j = _a.hasHeaderBackground, hasHeaderBackground = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _j, _k = _a.hasHeaderBorder, hasHeaderBorder = _k === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _k, _l = _a.hasRounded, hasRounded = _l === void 0 ? props_1.DescriptionCardDefault.hasRounded : _l, _m = _a.hasBorder, hasBorder = _m === void 0 ? props_1.DescriptionCardDefault.hasBorder : _m, _o = _a.headerImage, headerImage = _o === void 0 ? props_1.DescriptionCardDefault.headerImage : _o, _p = _a.dropdownList, dropdownList = _p === void 0 ? props_1.DescriptionCardDefault.dropdownList : _p, _q = _a.dropdownWidth, dropdownWidth = _q === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _q, _r = _a.accordionList, accordionList = _r === void 0 ? props_1.DescriptionCardDefault.accordionList : _r, _s = _a.boxSize, boxSize = _s === void 0 ? props_1.DescriptionCardDefault.boxSize : _s, _t = _a.hasHeaderButton, hasHeaderButton = _t === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _t, _u = _a.headerButtonWidth, headerButtonWidth = _u === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _u, _v = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _v === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _v, _w = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _w === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _w, _x = _a.headerPrimaryButtonText, headerPrimaryButtonText = _x === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _x, _y = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _y === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _y, _z = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _z === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _z, _0 = _a.content, content = _0 === void 0 ? props_1.DescriptionCardDefault.content : _0, headerButtonAction = _a.headerButtonAction, _1 = _a.customColumnSpan, customColumnSpan = _1 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _1;
+    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({ "$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 })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { 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 }) }))] }), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, { children: [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)(DescriptionCard_styled_1.DropdownWrapper, { 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 }), 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)("li", __assign({ style: {
-                            gridColumn: "span ".concat(span)
-                        } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "displayTitle" }, { children: listItem.title })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "displayValue" }, { children: listItem.display || "-" }))] }), key));
-                }) })), (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionListWrapper, { children: accordionList === null || accordionList === void 0 ? void 0 : accordionList.map(function (item, key) {
+                    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));
+                }) }))), (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionListWrapper, { children: accordionList === null || accordionList === void 0 ? void 0 : accordionList.map(function (item, key) {
                     return (0, jsx_runtime_1.jsx)(AccordionItem_1.default, { data: item }, key);
                 }) }))] })));
 };

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

@@ -2,10 +2,21 @@
 import { AccordionListStyledProps, DescriptionCardStyledProps } from "./props";
 export declare const DescriptionCardStyled: 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 DescriptionCardHeaderStyled: 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 HeaderLeftStyled: 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 HeaderRightStyled: 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 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 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;
+export declare const ContentWrapper: 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 ListStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
+export declare const ListItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$columnSpan"> & {
+    $columnSpan?: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$columnSpan"> & {
+    $columnSpan?: number;
+}, never>>> & string;
+export declare const DisplayTitleStyled: 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 DisplayValueStyled: 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 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 SubMenu: 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 AccordionListWrapper: 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,18 +7,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionItemBody = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DropdownWrapper = exports.ListStyled = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = void 0;
+exports.AccordionItemBody = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DropdownWrapper = exports.DisplayValueStyled = exports.DisplayTitleStyled = exports.ListItemStyled = exports.ListStyled = exports.ContentWrapper = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.HeaderActionWrapperStyled = exports.HeaderRightStyled = exports.HeaderLeftStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    overflow: hidden;\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    overflow: hidden;\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_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--dark-opacity-10);\n    > div{\n        display: flex;\n        align-items: center;\n        justify-content: start;\n        &:last-child{\n            > div{\n                margin-left: 1rem;\n            }\n        }\n    }\n"], ["\n    padding: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--dark-opacity-10);\n    > div{\n        display: flex;\n        align-items: center;\n        justify-content: start;\n        &:last-child{\n            > div{\n                margin-left: 1rem;\n            }\n        }\n    }\n"])), function (props) { return props.$headerImage ? "1rem 1.5rem" : "1.5rem"; });
-exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--headline-semi-bold-18-22);\n    display: block;\n"], ["\n    font: var(--headline-semi-bold-18-22);\n    display: block;\n"])));
-exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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    *{\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    *{\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_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    margin-left: 1.5rem;\n"], ["\n    display: block;\n    margin-left: 1.5rem;\n"])));
-exports.ListStyled = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px -1px 0 -1px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n    li{\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        &:is(:last-child){\n            border-right: 0;\n        }\n        .displayTitle{\n            display: block;\n            color: var(--dark-opacity-50);\n            font: var(--body-semi-bold-14-17);\n        }\n        .displayValue{\n            display: block;\n            margin-top: 0.5rem;\n            color: var(--dark);\n            font: var(--body-semi-bold-14-17);\n        }\n    }\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px -1px 0 -1px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n    li{\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        &:is(:last-child){\n            border-right: 0;\n        }\n        .displayTitle{\n            display: block;\n            color: var(--dark-opacity-50);\n            font: var(--body-semi-bold-14-17);\n        }\n        .displayValue{\n            display: block;\n            margin-top: 0.5rem;\n            color: var(--dark);\n            font: var(--body-semi-bold-14-17);\n        }\n    }\n"])), function (props) { return props.$boxSize; });
-exports.DropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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.SubMenu = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __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.AccordionItemBody = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __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;
+exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    border-bottom: ", ";\n    ", "\n"], ["\n    padding: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    border-bottom: ", ";\n    ", "\n"])), function (props) { return props.$headerImage ? "1rem 1.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.$hasHeaderBorder && "\n        padding-bottom: 1rem;\n    "; });
+exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"])));
+exports.HeaderRightStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"])));
+exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font: var(--headline-semi-bold-18-22);\n    display: block;\n"], ["\n    font: var(--headline-semi-bold-18-22);\n    display: block;\n"])));
+exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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_10 || (templateObject_10 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px -1px 0 -1px;\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    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px -1px 0 -1px;\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_11 || (templateObject_11 = __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_12 || (templateObject_12 = __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_13 || (templateObject_13 = __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.DropdownWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __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.SubMenu = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __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_16 || (templateObject_16 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __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_18 || (templateObject_18 = __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.AccordionItemBody = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __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;

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

@@ -1,8 +1,14 @@
 import React from "react";
+import { sizes as buttonSizes } from "../Button/props";
+export declare const iconNames: string[];
+type ICON = typeof iconNames[any];
+type BUTTON_SIZE = typeof buttonSizes[number];
 export interface DescriptionCard {
     title?: string;
     hasBadge?: boolean;
     hasHeader?: boolean;
+    hasHeaderBackground?: boolean;
+    hasHeaderBorder?: boolean;
     hasRounded?: boolean;
     hasBorder?: boolean;
     badgeText?: string;
@@ -19,6 +25,9 @@ export interface DescriptionCard {
     hasHeaderButton?: boolean;
     hasHeaderPrimaryButton?: boolean;
     headerPrimaryButtonText?: string;
+    headerPrimaryButtonIcon?: ICON;
+    headerPrimaryButtonSize?: BUTTON_SIZE;
+    content?: React.ReactNode;
     headerButtonAction?(e: any): void;
     headerPrimaryButtonAction?(e: any): void;
     customColumnSpan?: {
@@ -27,6 +36,8 @@ export interface DescriptionCard {
 }
 export interface DescriptionCardStyledProps {
     $hasHeader?: boolean;
+    $hasHeaderBackground?: boolean;
+    $hasHeaderBorder?: boolean;
     $hasRounded?: boolean;
     $hasBorder?: boolean;
     $headerImage?: React.ReactNode;
@@ -50,3 +61,4 @@ export interface AccordionListStyledProps {
 }
 export declare const DescriptionCardDefault: DescriptionCard;
 export type DescriptionCardProps = typeof DescriptionCardDefault;
+export {};

package/dist/components/DescriptionCard/props.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DescriptionCardDefault = void 0;
+exports.DescriptionCardDefault = exports.iconNames = void 0;
+var iconList_1 = require("../Icon/iconList");
+exports.iconNames = Object.keys(iconList_1.iconList);
 exports.DescriptionCardDefault = {
     title: "Header title",
     hasBadge: false,
     hasHeader: true,
+    hasHeaderBackground: false,
+    hasHeaderBorder: true,
     hasRounded: true,
     hasBorder: true,
     badgeText: null,
@@ -21,5 +25,8 @@ exports.DescriptionCardDefault = {
     hasHeaderPrimaryButton: false,
     headerPrimaryButtonAction: null,
     headerPrimaryButtonText: "Header Primary Button Text",
+    headerPrimaryButtonIcon: null,
+    headerPrimaryButtonSize: "xsmall",
+    content: null,
     customColumnSpan: {}
 };