@uzum-tech/ui 1.4.1 → 1.5.0

package/lib/_internal/typography/src/text.d.ts

@@ -0,0 +1,246 @@
+import { type PropType, ExtractPublicPropTypes } from 'vue';
+import { TypographyVariant } from './variants';
+export declare const internalTextProps: {
+    readonly variant: {
+        readonly type: PropType<TypographyVariant>;
+        readonly default: undefined;
+    };
+    readonly tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: undefined;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: PropType<"default" | "success" | "info" | "warning" | "error">;
+        readonly default: "default";
+    };
+    readonly strong: BooleanConstructor;
+    readonly italic: BooleanConstructor;
+    readonly underline: BooleanConstructor;
+    readonly strikethrough: BooleanConstructor;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+};
+export type InternalTextProps = ExtractPublicPropTypes<typeof internalTextProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly variant: {
+        readonly type: PropType<TypographyVariant>;
+        readonly default: undefined;
+    };
+    readonly tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: undefined;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: PropType<"default" | "success" | "info" | "warning" | "error">;
+        readonly default: "default";
+    };
+    readonly strong: BooleanConstructor;
+    readonly italic: BooleanConstructor;
+    readonly underline: BooleanConstructor;
+    readonly strikethrough: BooleanConstructor;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    tagToRender: keyof HTMLElementTagNameMap;
+    cssVars: import("vue").ComputedRef<Record<string, 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 variant: {
+        readonly type: PropType<TypographyVariant>;
+        readonly default: undefined;
+    };
+    readonly tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: undefined;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: PropType<"default" | "success" | "info" | "warning" | "error">;
+        readonly default: "default";
+    };
+    readonly strong: BooleanConstructor;
+    readonly italic: BooleanConstructor;
+    readonly underline: BooleanConstructor;
+    readonly strikethrough: BooleanConstructor;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+}>>, {
+    readonly type: "default" | "info" | "success" | "warning" | "error";
+    readonly tag: keyof HTMLElementTagNameMap;
+    readonly strong: boolean;
+    readonly text: string;
+    readonly italic: boolean;
+    readonly underline: boolean;
+    readonly strikethrough: boolean;
+    readonly variant: TypographyVariant;
+}, {}>;
+export default _default;

package/lib/_internal/typography/src/text.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.internalTextProps = void 0;
+const vue_1 = require("vue");
+const styles_1 = require("../styles");
+const text_cssr_1 = __importDefault(require("./styles/text.cssr"));
+const variants_1 = require("./variants");
+const _mixins_1 = require("../../../_mixins");
+const cssr_1 = require("../../../_utils/cssr");
+exports.internalTextProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { variant: {
+        type: String,
+        default: undefined
+    }, tag: {
+        type: String,
+        default: undefined
+    }, text: {
+        type: String,
+        default: undefined
+    }, type: {
+        type: String,
+        default: 'default'
+    }, strong: Boolean, italic: Boolean, underline: Boolean, strikethrough: Boolean });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'InternalUText',
+    props: exports.internalTextProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Typography', '-text', text_cssr_1.default, styles_1.typographyLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { variant } = props;
+            const textColorKey = props.type === 'default'
+                ? 'textColor'
+                : (0, cssr_1.createKey)('textColor', props.type);
+            const { common: { fontWeightStrong, fontFamilyMono, cubicBezierEaseInOut, fontFamilyWixMadeforDisplay }, self: { aTextColor, codeTextColor, codeBorderRadius, codeColor, codeBorder, [textColorKey]: textColor, fontSize, lineHeight, margin, blockquotePrefixColor } } = themeRef.value;
+            const baseVars = {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-a-text-color': aTextColor,
+                '--u-text-color': textColor,
+                '--u-font-weight-strong': fontWeightStrong,
+                '--u-font-famliy-mono': fontFamilyMono,
+                '--u-code-border-radius': codeBorderRadius,
+                '--u-code-text-color': codeTextColor,
+                '--u-code-color': codeColor,
+                '--u-code-border': codeBorder,
+                '--u-font-size': fontSize,
+                '--u-line-height': lineHeight,
+                '--u-margin': margin,
+                '--u-prefix-color': blockquotePrefixColor
+            };
+            return (0, variants_1.getVariantCssVars)(variant, baseVars, fontFamilyWixMadeforDisplay);
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('text', (0, vue_1.computed)(() => `${(props === null || props === void 0 ? void 0 : props.variant) || ''}${(props === null || props === void 0 ? void 0 : props.tag) || ''}`), cssVarsRef, props)
+            : undefined;
+        const tagToRender = props.tag || (props.variant && (0, variants_1.getVariantTag)(props.variant)) || 'span';
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            tagToRender,
+            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() {
+        var _a, _b, _c;
+        const { mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const textClass = [
+            `${mergedClsPrefix}-text`,
+            this.themeClass,
+            {
+                [`${mergedClsPrefix}-text--variant`]: this.variant,
+                [`${mergedClsPrefix}-text--strong`]: this.strong,
+                [`${mergedClsPrefix}-text--italic`]: this.italic,
+                [`${mergedClsPrefix}-text--underline`]: this.underline,
+                [`${mergedClsPrefix}-text--strikethrough`]: this.strikethrough
+            }
+        ];
+        const children = this.text || ((_c = (_b = this.$slots).default) === null || _c === void 0 ? void 0 : _c.call(_b));
+        return (0, vue_1.h)(this.tagToRender, { class: textClass, style: this.cssVars }, children);
+    }
+});

package/lib/_internal/typography/src/variants.d.ts

@@ -0,0 +1,13 @@
+export type TypographyVariant = 'display-l' | 'display-s' | 'heading-l-semi-bold' | 'heading-l-bold' | 'heading-m-semi-bold' | 'heading-m-bold' | 'heading-s-semi-bold' | 'heading-s-bold' | 'title-l-medium' | 'title-l-semi-bold' | 'title-l-bold' | 'title-m-medium' | 'title-m-semi-bold' | 'title-m-bold' | 'title-s-medium' | 'title-s-semi-bold' | 'title-s-bold' | 'body-l-medium' | 'body-l-semi-bold' | 'body-l-bold' | 'body-m-medium' | 'body-m-semi-bold' | 'body-m-bold' | 'body-s-medium' | 'body-s-semi-bold' | 'body-s-bold';
+export interface TypographyVariantConfig {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    fontStyle: string;
+    lineHeight: string;
+    letterSpacing: string;
+    tag: keyof HTMLElementTagNameMap;
+}
+export declare function getVariantCssVars(variant: TypographyVariant | undefined, baseVars: Record<string, string>, fontFamilyVariant: string): Record<string, string>;
+export declare function getVariantTag(variant: TypographyVariant): keyof HTMLElementTagNameMap;
+export declare const variantToCssVars: Record<TypographyVariant, TypographyVariantConfig>;

package/lib/_internal/typography/src/variants.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.variantToCssVars = void 0;
+exports.getVariantCssVars = getVariantCssVars;
+exports.getVariantTag = getVariantTag;
+const fontFamily = 'var(--u-font-famliy-variant)';
+const baseStyles = {
+    display: {
+        l: {
+            fontSize: '42px',
+            lineHeight: '48px',
+            letterSpacing: '-0.014em',
+            tag: 'h1'
+        },
+        s: {
+            fontSize: '36px',
+            lineHeight: '44px',
+            letterSpacing: '-0.013em',
+            tag: 'h1'
+        }
+    },
+    heading: {
+        l: {
+            fontSize: '32px',
+            lineHeight: '40px',
+            letterSpacing: '-0.01em',
+            tag: 'h2'
+        },
+        m: {
+            fontSize: '28px',
+            lineHeight: '36px',
+            letterSpacing: '-0.009em',
+            tag: 'h2'
+        },
+        s: {
+            fontSize: '24px',
+            lineHeight: '30px',
+            letterSpacing: '-0.01em',
+            tag: 'h2'
+        }
+    },
+    title: {
+        l: {
+            fontSize: '22px',
+            lineHeight: '32px',
+            letterSpacing: '-0.01em',
+            tag: 'h3'
+        },
+        m: {
+            fontSize: '20px',
+            lineHeight: '30px',
+            letterSpacing: '-0.009em',
+            tag: 'h3'
+        },
+        s: { fontSize: '18px', lineHeight: '28px', letterSpacing: '0', tag: 'h3' }
+    },
+    body: {
+        l: {
+            fontSize: '16px',
+            lineHeight: '24px',
+            letterSpacing: '0.004em',
+            tag: 'p'
+        },
+        m: {
+            fontSize: '14px',
+            lineHeight: '21px',
+            letterSpacing: '0.006em',
+            tag: 'p'
+        },
+        s: {
+            fontSize: '12px',
+            lineHeight: '16px',
+            letterSpacing: '0.008em',
+            tag: 'p'
+        }
+    }
+};
+const fontWeights = {
+    medium: { weight: '500', style: 'medium' },
+    'semi-bold': { weight: '600', style: 'semibold' },
+    bold: { weight: '700', style: 'bold' }
+};
+function createVariant(category, size, weight) {
+    const base = baseStyles[category][size];
+    const { weight: fontWeight, style: fontStyle } = fontWeights[weight];
+    return {
+        fontFamily,
+        fontSize: base.fontSize,
+        fontWeight,
+        fontStyle,
+        lineHeight: base.lineHeight,
+        letterSpacing: base.letterSpacing,
+        tag: base.tag
+    };
+}
+function getVariantCssVars(variant, baseVars, fontFamilyVariant) {
+    if (!variant || !exports.variantToCssVars[variant]) {
+        return baseVars;
+    }
+    const variantStyles = exports.variantToCssVars[variant];
+    return Object.assign(Object.assign({}, baseVars), { '--u-font-famliy-variant': fontFamilyVariant, '--u-variant-font-size': variantStyles.fontSize, '--u-variant-font-weight': variantStyles.fontWeight, '--u-variant-line-height': variantStyles.lineHeight, '--u-variant-font-family': variantStyles.fontFamily, '--u-variant-font-style': variantStyles.fontStyle, '--u-variant-letter-spacing': variantStyles.letterSpacing });
+}
+function getVariantTag(variant) {
+    return exports.variantToCssVars[variant].tag;
+}
+exports.variantToCssVars = {
+    // Display variants
+    'display-l': createVariant('display', 'l', 'bold'),
+    'display-s': createVariant('display', 's', 'bold'),
+    // Heading variants
+    'heading-l-semi-bold': createVariant('heading', 'l', 'semi-bold'),
+    'heading-l-bold': createVariant('heading', 'l', 'bold'),
+    'heading-m-semi-bold': createVariant('heading', 'm', 'semi-bold'),
+    'heading-m-bold': createVariant('heading', 'm', 'bold'),
+    'heading-s-semi-bold': createVariant('heading', 's', 'semi-bold'),
+    'heading-s-bold': createVariant('heading', 's', 'bold'),
+    // Title variants
+    'title-l-medium': createVariant('title', 'l', 'medium'),
+    'title-l-semi-bold': createVariant('title', 'l', 'semi-bold'),
+    'title-l-bold': createVariant('title', 'l', 'bold'),
+    'title-m-medium': createVariant('title', 'm', 'medium'),
+    'title-m-semi-bold': createVariant('title', 'm', 'semi-bold'),
+    'title-m-bold': createVariant('title', 'm', 'bold'),
+    'title-s-medium': createVariant('title', 's', 'medium'),
+    'title-s-semi-bold': createVariant('title', 's', 'semi-bold'),
+    'title-s-bold': createVariant('title', 's', 'bold'),
+    // Body variants
+    'body-l-medium': createVariant('body', 'l', 'medium'),
+    'body-l-semi-bold': createVariant('body', 'l', 'semi-bold'),
+    'body-l-bold': createVariant('body', 'l', 'bold'),
+    'body-m-medium': createVariant('body', 'm', 'medium'),
+    'body-m-semi-bold': createVariant('body', 'm', 'semi-bold'),
+    'body-m-bold': createVariant('body', 'm', 'bold'),
+    'body-s-medium': createVariant('body', 's', 'medium'),
+    'body-s-semi-bold': createVariant('body', 's', 'semi-bold'),
+    'body-s-bold': createVariant('body', 's', 'bold')
+};

package/lib/_internal/typography/styles/dark.d.ts

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

package/lib/_internal/typography/styles/dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles_1 = require("../../../styles");
+const light_1 = require("./light");
+const typographyDark = {
+    name: 'Typography',
+    common: styles_1.commonDark,
+    self: light_1.self
+};
+exports.default = typographyDark;

package/lib/_internal/typography/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as typographyDark } from './dark';
+export { default as typographyLight } from './light';
+export type { TypographyThemeVars, TypographyTheme } from './light';

package/lib/_internal/typography/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.typographyLight = exports.typographyDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "typographyDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "typographyLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/_internal/typography/styles/light.d.ts

@@ -0,0 +1,24 @@
+import { Theme } from '../../../_mixins';
+import { ThemeCommonVars } from '../../../config-provider';
+export declare const self: (vars: ThemeCommonVars) => {
+    margin: string;
+    aTextColor: string;
+    blockquoteTextColor: string;
+    blockquotePrefixColor: string;
+    codeBorderRadius: string;
+    fontSize: string;
+    lineHeight: string;
+    textColor: string;
+    textColorPrimary: string;
+    textColorInfo: string;
+    textColorSuccess: string;
+    textColorWarning: string;
+    textColorError: string;
+    codeTextColor: string;
+    codeColor: string;
+    codeBorder: string;
+};
+export type TypographyThemeVars = ReturnType<typeof self>;
+declare const typographyLight: Theme<'Typography', TypographyThemeVars>;
+export default typographyLight;
+export type TypographyTheme = typeof typographyLight;

package/lib/_internal/typography/styles/light.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const styles_1 = require("../../../styles");
+const self = (vars) => {
+    const { borderRadiusSmall, brandPrimary500, elementsQuaternary, textPrimary, brandQuaternary500, staticRed, staticOrange, staticGreen, elementsTertiary, fontBodyMedium, lineHeightBodyMedium, codeBorder } = vars;
+    return {
+        margin: '16px 0 16px 0',
+        aTextColor: brandPrimary500,
+        blockquoteTextColor: textPrimary,
+        blockquotePrefixColor: elementsQuaternary,
+        codeBorderRadius: borderRadiusSmall,
+        fontSize: fontBodyMedium,
+        lineHeight: lineHeightBodyMedium,
+        textColor: textPrimary,
+        textColorPrimary: brandPrimary500,
+        textColorInfo: brandQuaternary500,
+        textColorSuccess: staticGreen,
+        textColorWarning: staticOrange,
+        textColorError: staticRed,
+        codeTextColor: textPrimary,
+        codeColor: elementsTertiary,
+        codeBorder
+    };
+};
+exports.self = self;
+const typographyLight = {
+    name: 'Typography',
+    common: styles_1.commonLight,
+    self: exports.self
+};
+exports.default = typographyLight;

package/lib/_styles/common/_common.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     fontFamily: string;
     fontFamilyMono: string;
+    fontFamilyWixMadeforDisplay: string;
     cubicBezierEaseInOut: string;
     cubicBezierEaseOut: string;
     cubicBezierEaseIn: string;
@@ -49,5 +50,6 @@ declare const _default: {
     closeLarge: string;
     closeHuge: string;
     closeBorderRadius: string;
+    codeBorder: string;
 };
 export default _default;

package/lib/_styles/common/_common.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     fontFamily: 'v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontFamilyMono: 'v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace',
+    fontFamilyWixMadeforDisplay: '"Wix Madefor Display", v-sans, system-ui, sans-serif',
     cubicBezierEaseInOut: 'cubic-bezier(.4, 0, .2, 1)',
     cubicBezierEaseOut: 'cubic-bezier(0, 0, .2, 1)',
     cubicBezierEaseIn: 'cubic-bezier(.4, 0, 1, 1)',
@@ -50,5 +51,6 @@ exports.default = {
     closeMedium: '32px',
     closeLarge: '56px',
     closeHuge: '96px',
-    closeBorderRadius: '100%'
+    closeBorderRadius: '100%',
+    codeBorder: '1px solid #0000'
 };

package/lib/_styles/common/light.d.ts

@@ -60,6 +60,7 @@ declare const derived: {
     shadowDepth: string;
     fontFamily: string;
     fontFamilyMono: string;
+    fontFamilyWixMadeforDisplay: string;
     cubicBezierEaseInOut: string;
     cubicBezierEaseOut: string;
     cubicBezierEaseIn: string;
@@ -108,6 +109,7 @@ declare const derived: {
     closeLarge: string;
     closeHuge: string;
     closeBorderRadius: string;
+    codeBorder: string;
     name: "common";
 };
 export default derived;

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

@@ -0,0 +1,4 @@
+export { default as UActionCard } from './src/ActionCard';
+export type { ActionCardProps } from './src/ActionCard';
+export { actionCardLight, actionCardDark } from './styles';
+export type { ActionCardTheme, ActionCardThemeVars } from './styles';

package/lib/action-card/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actionCardDark = exports.actionCardLight = exports.UActionCard = void 0;
+var ActionCard_1 = require("./src/ActionCard");
+Object.defineProperty(exports, "UActionCard", { enumerable: true, get: function () { return __importDefault(ActionCard_1).default; } });
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "actionCardLight", { enumerable: true, get: function () { return styles_1.actionCardLight; } });
+Object.defineProperty(exports, "actionCardDark", { enumerable: true, get: function () { return styles_1.actionCardDark; } });