@uzum-tech/ui 1.4.1 → 1.5.0

package/lib/action-card/src/ActionCard.d.ts

@@ -0,0 +1,313 @@
+import { type PropType } from 'vue';
+import { type ExtractPublicPropTypes, type MaybeArray } from '../../_utils';
+export declare const actionCardProps: {
+    readonly title: StringConstructor;
+    readonly description: StringConstructor;
+    readonly icon: PropType<string | (() => any)>;
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly tag: {
+        readonly type: PropType<"button" | "a" | "div">;
+        readonly default: "div";
+    };
+    readonly descriptionLineClamp: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+};
+export type ActionCardProps = ExtractPublicPropTypes<typeof actionCardProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly title: StringConstructor;
+    readonly description: StringConstructor;
+    readonly icon: PropType<string | (() => any)>;
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly tag: {
+        readonly type: PropType<"button" | "a" | "div">;
+        readonly default: "div";
+    };
+    readonly descriptionLineClamp: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    mergedClassNames: import("vue").ComputedRef<(string | {
+        [x: string]: boolean;
+    } | undefined)[]>;
+    handleClick: (e: MouseEvent) => void;
+    cssVars: import("vue").ComputedRef<{
+        '--u-bezier': string;
+        '--u-border-radius': string;
+        '--u-padding': string;
+        '--u-background-color': string;
+        '--u-hover-background-color': string;
+        '--u-pressed-background-color': string;
+        '--u-icon-size': string;
+        '--u-icon-color': string;
+        '--u-icon-margin-bottom': string;
+        '--u-title-font-size': string;
+        '--u-title-font-weight': string;
+        '--u-title-line-height': string;
+        '--u-title-color': string;
+        '--u-disabled-color': string;
+        '--u-text-gap': string;
+        '--u-description-font-size': string;
+        '--u-description-font-weight': string;
+        '--u-description-line-height': string;
+        '--u-description-color': string;
+        '--u-min-height': string;
+        '--u-max-height': string;
+        '--u-width': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly title: StringConstructor;
+    readonly description: StringConstructor;
+    readonly icon: PropType<string | (() => any)>;
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly tag: {
+        readonly type: PropType<"button" | "a" | "div">;
+        readonly default: "div";
+    };
+    readonly descriptionLineClamp: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+}>>, {
+    readonly disabled: boolean;
+    readonly loading: boolean;
+    readonly tag: "a" | "div" | "button";
+    readonly descriptionLineClamp: number;
+}, {}>;
+export default _default;

package/lib/action-card/src/ActionCard.js

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actionCardProps = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const _internal_1 = require("../../_internal");
+const styles_1 = require("../styles");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const ellipsis_1 = require("../../ellipsis");
+exports.actionCardProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, description: String, icon: [String, Object], disabled: {
+        type: Boolean,
+        default: false
+    }, loading: {
+        type: Boolean,
+        default: false
+    }, onClick: [Function, Array], tag: {
+        type: String,
+        default: 'div'
+    }, descriptionLineClamp: {
+        type: Number,
+        default: 1
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'ActionCard',
+    props: exports.actionCardProps,
+    setup(props) {
+        const { inlineThemeDisabled, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('ActionCard', '-action-card', index_cssr_1.default, styles_1.actionCardLight, props, mergedClsPrefixRef);
+        const handleClick = (e) => {
+            if (props.disabled || props.loading)
+                return;
+            const { onClick } = props;
+            if (onClick)
+                (0, _utils_1.call)(onClick, e);
+        };
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { borderRadius, padding, backgroundColor, hoverBackgroundColor, pressedBackgroundColor, iconSize, iconColor, iconMarginBottom, titleFontSize, titleFontWeight, titleLineHeight, titleColor, textGap, descriptionFontSize, descriptionFontWeight, descriptionLineHeight, descriptionColor, disabledColor, minHeight, maxHeight, width }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-border-radius': borderRadius,
+                '--u-padding': padding,
+                '--u-background-color': backgroundColor,
+                '--u-hover-background-color': hoverBackgroundColor,
+                '--u-pressed-background-color': pressedBackgroundColor,
+                '--u-icon-size': iconSize,
+                '--u-icon-color': iconColor,
+                '--u-icon-margin-bottom': iconMarginBottom,
+                '--u-title-font-size': titleFontSize,
+                '--u-title-font-weight': titleFontWeight,
+                '--u-title-line-height': titleLineHeight,
+                '--u-title-color': titleColor,
+                '--u-disabled-color': disabledColor,
+                '--u-text-gap': textGap,
+                '--u-description-font-size': descriptionFontSize,
+                '--u-description-font-weight': descriptionFontWeight,
+                '--u-description-line-height': descriptionLineHeight,
+                '--u-description-color': descriptionColor,
+                '--u-min-height': minHeight,
+                '--u-max-height': maxHeight,
+                '--u-width': width
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('action-card', undefined, cssVarsRef, props)
+            : undefined;
+        const mergedClassNames = (0, vue_1.computed)(() => {
+            return [
+                `${mergedClsPrefixRef.value}-action-card`,
+                themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value,
+                {
+                    [`${mergedClsPrefixRef.value}-action-card--disabled`]: props.disabled,
+                    [`${mergedClsPrefixRef.value}-action-card--loading`]: props.loading,
+                    [`${mergedClsPrefixRef.value}-action-card--height-auto`]: props.descriptionLineClamp > 1
+                }
+            ];
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedClassNames,
+            handleClick,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { mergedClsPrefix, mergedClassNames, handleClick, title, description, icon, loading, disabled, tag: Component, onRender, descriptionLineClamp } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)(Component, { class: mergedClassNames, onClick: handleClick, role: "button", tabindex: disabled || loading ? -1 : 0, style: this.cssVars },
+            loading && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-action-card__skeleton` },
+                icon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-action-card__skeleton-icon` },
+                    (0, vue_1.h)(_internal_1.UBaseSkeleton, { circle: true, width: "var(--u-icon-size)", height: "var(--u-icon-size)" }))),
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-action-card__skeleton-text` },
+                    (0, vue_1.h)(_internal_1.UBaseSkeleton, { height: "var(--u-title-line-height)", width: "60%" }),
+                    description && ((0, vue_1.h)(vue_1.Fragment, null, Array.from({ length: descriptionLineClamp }).map((_, i) => ((0, vue_1.h)(_internal_1.UBaseSkeleton, { key: i, height: "var(--u-description-line-height)", width: "80%" })))))))),
+            !loading && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-action-card__content` },
+                icon && !loading && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-action-card__icon` }, typeof icon === 'function' ? icon() : icon)),
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-action-card__text` },
+                    title && !loading && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-action-card__title` }, title)),
+                    description && !loading && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-action-card__description` },
+                        (0, vue_1.h)(ellipsis_1.UEllipsis, { lineClamp: descriptionLineClamp }, description))))))));
+    }
+});

package/lib/action-card/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/action-card/src/styles/index.cssr.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --u-bezier
+// --u-width
+// --u-min-height
+// --u-max-height
+// --u-border-radius
+// --u-padding
+// --u-background-color
+// --u-hover-background-color
+// --u-pressed-background-color
+// --u-icon-size
+// --u-icon-color
+// --u-icon-margin-bottom
+// --u-title-font-size
+// --u-title-font-weight
+// --u-title-line-height
+// --u-title-color
+// --u-text-gap
+// --u-description-font-size
+// --u-description-font-weight
+// --u-description-line-height
+// --u-description-color
+// --u-disabled-color
+exports.default = (0, cssr_1.cB)('action-card', `
+ position: relative;
+ width: var(--u-width);
+ min-height: var(--u-min-height);
+ max-height: var(--u-max-height);
+ border-radius: var(--u-border-radius);
+ padding: var(--u-padding);
+ background-color: var(--u-background-color);
+ cursor: pointer;
+ transition: background-color var(--u-bezier);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: hidden;
+ user-select: none;
+ box-sizing: border-box;
+ border: none;
+ display: inline-flex;
+ text-align: left;
+ text-decoration: none;
+ 
+ font-style: inherit;
+ font-variant-ligatures: inherit;
+ font-weight: inherit;
+ font-size: inherit;
+ font-family: inherit;
+ text-rendering: inherit;
+ color: inherit;
+ text-align: inherit;
+`, [(0, cssr_1.cM)('height-auto', `
+ max-height: none;
+ `), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed;
+ color: var(--u-disabled-color);
+ `, [(0, cssr_1.cE)('icon', `
+ color: var(--u-disabled-color);
+ `), (0, cssr_1.cE)('title', `
+ color: var(--u-disabled-color);
+ `), (0, cssr_1.cE)('description', `
+ color: var(--u-disabled-color);
+ `)]), (0, cssr_1.cM)('loading', `
+ cursor: default;
+ `), (0, cssr_1.cE)('skeleton', `
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ flex: 1;
+ `), (0, cssr_1.cE)('skeleton-icon', `
+ margin-bottom: var(--u-icon-margin-bottom);
+ flex-shrink: 0;
+ `), (0, cssr_1.cE)('skeleton-text', `
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ justify-content: end;
+ gap: var(--u-text-gap);
+ `), (0, cssr_1.cE)('content', `
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ flex: 1;
+ `), (0, cssr_1.cE)('icon', `
+ height: var(--u-icon-size);
+ width: var(--u-icon-size);
+ font-size: var(--u-icon-size);
+ color: var(--u-icon-color);
+ margin-bottom: var(--u-icon-margin-bottom);
+ flex-shrink: 0;
+ `), (0, cssr_1.cE)('text', `
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ gap: var(--u-text-gap);
+ justify-content: end;
+ `), (0, cssr_1.cE)('title', `
+ font-size: var(--u-title-font-size);
+ font-weight: var(--u-title-font-weight);
+ line-height: var(--u-title-line-height);
+ color: var(--u-title-color);
+ `), (0, cssr_1.cE)('description', `
+ font-size: var(--u-description-font-size);
+ font-weight: var(--u-description-font-weight);
+ line-height: var(--u-description-line-height);
+ color: var(--u-description-color);
+ `), (0, cssr_1.c)('&:hover:not(.u-action-card--disabled):not(.u-action-card--loading)', `
+ background-color: var(--u-hover-background-color);
+ `), (0, cssr_1.c)('&:active:not(.u-action-card--disabled):not(.u-action-card--loading)', `
+ background-color: var(--u-pressed-background-color);
+ `)]);

package/lib/action-card/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { ActionCardTheme } from './light';
+declare const actionCardDark: ActionCardTheme;
+export default actionCardDark;

package/lib/action-card/styles/dark.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
+const actionCardDark = {
+    name: 'ActionCard',
+    common: common_1.commonDark,
+    self: (vars) => {
+        const lightVars = (0, light_1.self)(vars);
+        return Object.assign({}, lightVars);
+    }
+};
+exports.default = actionCardDark;

package/lib/action-card/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as actionCardDark } from './dark';
+export { default as actionCardLight } from './light';
+export type { ActionCardTheme, ActionCardThemeVars } from './light';

package/lib/action-card/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actionCardLight = exports.actionCardDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "actionCardDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "actionCardLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/action-card/styles/light.d.ts

@@ -0,0 +1,29 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import type { Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    minHeight: string;
+    maxHeight: string;
+    width: string;
+    borderRadius: string;
+    padding: string;
+    backgroundColor: string;
+    hoverBackgroundColor: string;
+    pressedBackgroundColor: string;
+    iconSize: string;
+    iconColor: string;
+    iconMarginBottom: string;
+    titleFontSize: string;
+    titleFontWeight: string;
+    titleLineHeight: string;
+    titleColor: string;
+    textGap: string;
+    descriptionFontSize: string;
+    descriptionFontWeight: string;
+    descriptionLineHeight: string;
+    descriptionColor: string;
+    disabledColor: string;
+};
+export type ActionCardThemeVars = ReturnType<typeof self>;
+declare const actionCardLight: Theme<'ActionCard', ActionCardThemeVars>;
+export default actionCardLight;
+export type ActionCardTheme = typeof actionCardLight;

package/lib/action-card/styles/light.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const common_1 = require("../../_styles/common");
+const self = (vars) => {
+    const { borderRadiusLarge, elementsQuaternary, elementsTertiary, elementsQuinary, textTertiary, textPrimary, textSecondary, fontWeightStrong, lineHeightBodyLarge, iconSmall, fontBodyLarge, fontWeight } = vars;
+    return {
+        minHeight: '148px',
+        maxHeight: '148px',
+        width: '288px',
+        borderRadius: borderRadiusLarge,
+        padding: '24px',
+        backgroundColor: elementsTertiary,
+        hoverBackgroundColor: elementsQuaternary,
+        pressedBackgroundColor: elementsQuinary,
+        iconSize: iconSmall,
+        iconColor: textPrimary,
+        iconMarginBottom: '24px',
+        titleFontSize: fontBodyLarge,
+        titleFontWeight: fontWeightStrong,
+        titleLineHeight: lineHeightBodyLarge,
+        titleColor: textPrimary,
+        textGap: '4px',
+        descriptionFontSize: fontBodyLarge,
+        descriptionFontWeight: fontWeight,
+        descriptionLineHeight: lineHeightBodyLarge,
+        descriptionColor: textSecondary,
+        disabledColor: textTertiary
+    };
+};
+exports.self = self;
+const actionCardLight = {
+    name: 'ActionCard',
+    common: common_1.commonLight,
+    self: exports.self
+};
+exports.default = actionCardLight;