krl-alfred 2.18.17 → 2.18.18

package/dist/components/ActionButton/ActionButton.js

@@ -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)("div", __assign({ className: "actionInfoText" }, { children: infoText })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "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)("div", __assign({ className: "actionInner" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: img })), (0, jsx_runtime_1.jsx)("strong", { className: "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)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "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 }, { 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 })] })] })))] }))] })));
 };
 exports.default = ActionButton;

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

@@ -1,3 +1,17 @@
 /// <reference types="react" />
 import { ActionButtonStyledProps } from "./props";
 export declare const ActionButtonStyled: 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 ActionInfoText: 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 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 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;
+export declare const BottomContent: 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 Timer: 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 TimerBox: 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 TimerTitle: 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 TimerDescription: 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 TimerDots: 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 EmptySpacer: 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;

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

@@ -7,8 +7,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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    .actionInfoText{\n        background-color: var(--primary-opacity-5);\n        font: var(--caption-semi-bold-10-12);\n        color: var(--primary);\n        padding-top:1rem;\n        padding-bottom:0.5rem;\n        padding-left:1.5rem;\n        width: ", ";\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n    .dashedLine {\n        width: ", ";\n        position: relative;\n        width: 100%;\n        background: #fbf7ff; /* arka plan rengi */\n        overflow: hidden;\n        height:22px;\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\n    .actionInner{\n        border-radius: 0.5rem;\n        ", "\n        background-color: var(--primary-opacity-5);\n        padding: 1rem 1.5rem;\n        align-items: center;\n        justify-content: space-between;\n        color: var(--dark);\n        box-sizing: border-box;\n        cursor: pointer;\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        .top, .bottom {\n            display: grid;\n            grid-template-columns: ", ";\n            align-content: center;\n            align-items: center;\n        }\n\n        .top {\n            .icon {\n                margin-right: 1rem;\n\n                * {\n                    display: block !important;\n                }\n            }\n\n            .title {\n                display: block;\n                font: var(--body-bold-14-17);\n            }\n        }\n\n        .bottom {\n            margin-top: 0.5rem;\n\n            > div {\n                display: grid;\n                grid-template-columns: 1fr auto;\n                align-content: center;\n                align-items: center;\n                justify-content: space-between;\n\n                .timer {\n                    display: grid;\n                    grid-template-columns: repeat(5, auto);\n                    align-items: center;\n                    justify-content: start;\n\n                    .box {\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                        .timerTitle {\n                            font: var(--title-extra-bold-16-19);\n                        }\n\n                        .timerDescription {\n                            font: var(--caption-regular-10-12);\n                        }\n                    }\n\n                    .dots {\n                        margin: 0 4px;\n                        width: 4px;\n                        font: var(--caption-bold-12-15);\n                    }\n                }\n            }\n        }\n    }\n    \n"], ["\n    width: ", ";\n    .actionInfoText{\n        background-color: var(--primary-opacity-5);\n        font: var(--caption-semi-bold-10-12);\n        color: var(--primary);\n        padding-top:1rem;\n        padding-bottom:0.5rem;\n        padding-left:1.5rem;\n        width: ", ";\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n    .dashedLine {\n        width: ", ";\n        position: relative;\n        width: 100%;\n        background: #fbf7ff; /* arka plan rengi */\n        overflow: hidden;\n        height:22px;\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\n    .actionInner{\n        border-radius: 0.5rem;\n        ", "\n        background-color: var(--primary-opacity-5);\n        padding: 1rem 1.5rem;\n        align-items: center;\n        justify-content: space-between;\n        color: var(--dark);\n        box-sizing: border-box;\n        cursor: pointer;\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        .top, .bottom {\n            display: grid;\n            grid-template-columns: ", ";\n            align-content: center;\n            align-items: center;\n        }\n\n        .top {\n            .icon {\n                margin-right: 1rem;\n\n                * {\n                    display: block !important;\n                }\n            }\n\n            .title {\n                display: block;\n                font: var(--body-bold-14-17);\n            }\n        }\n\n        .bottom {\n            margin-top: 0.5rem;\n\n            > div {\n                display: grid;\n                grid-template-columns: 1fr auto;\n                align-content: center;\n                align-items: center;\n                justify-content: space-between;\n\n                .timer {\n                    display: grid;\n                    grid-template-columns: repeat(5, auto);\n                    align-items: center;\n                    justify-content: start;\n\n                    .box {\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                        .timerTitle {\n                            font: var(--title-extra-bold-16-19);\n                        }\n\n                        .timerDescription {\n                            font: var(--caption-regular-10-12);\n                        }\n                    }\n\n                    .dots {\n                        margin: 0 4px;\n                        width: 4px;\n                        font: var(--caption-bold-12-15);\n                    }\n                }\n            }\n        }\n    }\n    \n"])), function (props) { return props.$width; }, function (props) { return props.$width; }, function (props) { return props.$width; }, 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, function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
-var templateObject_1;
+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;

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

@@ -9,7 +9,7 @@ var ActionButton_1 = __importDefault(require("../ActionButton"));
 var iconList_1 = require("../../Icon/iconList");
 var date = new Date();
 date.setFullYear(new Date().getFullYear() + 1);
-var defaultImg = (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/actionTimeCircle.svg", height: "45px", width: "45px", alt: "test" });
+var defaultImg = (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/actionTimeCircle.svg", alt: "test" });
 exports.default = {
     title: 'Components/Action Button',
     component: ActionButton_1.default,

package/package.json

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