@uzum-tech/ui 1.4.2 → 1.5.0

package/lib/steps/src/Steps.js

@@ -7,6 +7,7 @@ exports.stepsInjectionKey = exports.stepsProps = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
+const interface_1 = require("./interface");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 function stepWithIndex(step, i) {
@@ -51,11 +52,13 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
+        var _a, _b;
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-steps`,
+                `${mergedClsPrefix}-steps--${this.variant}-variant`,
                 this.rtlEnabled && `${mergedClsPrefix}-steps--rtl`,
-                (this.vertical || this.variant === 'history') &&
+                ((_b = (_a = interface_1.variantConfigs[this.variant]) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : this.vertical) &&
                     `${mergedClsPrefix}-steps--vertical`
             ] }, stepsWithIndex((0, _utils_1.flatten)((0, _utils_1.getSlot)(this)))));
     }

package/lib/steps/src/interface.d.ts

@@ -1,13 +1,21 @@
 import { VNodeChild } from 'vue';
 import { MaybeArray } from '../../_utils';
 export type StepsStatus = 'process' | 'finish' | 'error' | 'wait';
-export type StepsVariant = 'default' | 'history';
+export type StepsVariant = 'default' | 'history' | 'outline' | 'dotted';
 export type OnUpdateValue = MaybeArray<(current: number) => void>;
+export interface VariantConfig {
+    rendersSplitor?: boolean;
+    vertical?: boolean;
+    showDescription?: boolean;
+}
+export declare const defaultVariantConfig: Required<VariantConfig>;
+export declare const variantConfigs: Partial<Record<StepsVariant, VariantConfig>>;
 export type IconRenderer = {
     [K in StepsVariant]: Record<string, () => VNodeChild | null>;
 };
 export interface VariantBehaviors {
     variant: StepsVariant;
-    isVerticalOrHistory: boolean;
+    isVertical: boolean;
     shouldRenderSplitor: boolean;
+    showDescription: boolean;
 }

package/lib/steps/src/interface.js

@@ -1,2 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.variantConfigs = exports.defaultVariantConfig = void 0;
+exports.defaultVariantConfig = {
+    rendersSplitor: true,
+    vertical: false,
+    showDescription: true
+};
+exports.variantConfigs = {
+    history: { vertical: true, rendersSplitor: true },
+    outline: { rendersSplitor: false, showDescription: false },
+    dotted: { rendersSplitor: true, showDescription: true }
+};

package/lib/steps/src/styles/index.cssr.js

@@ -19,16 +19,117 @@ const icon_switch_cssr_1 = require("../../../_styles/transitions/icon-switch.css
 // --u-step-header-font-size
 // --u-step-header-font-weight
 // --u-step-icon-color
+// --u-indicator-border-radius--outline
+// --u-indicator-border-radius-finish--outline
+// --u-indicator-background-finish--outline
+// --u-indicator-icon-color--outline
+// --u-indicator-icon-color-finish--outline
+// --u-indicator-icon-size--outline
+// --u-indicator-index-font-size--outline
+// --u-step-header-font-size--dotted
+// --u-description-text-color--dotted
+// --u-indicator-color--dotted
+// --u-splitor-color--dotted
+// --u-splitor-color-finish--dotted
+// --u-indicator-size--dotted
+// --u-indicator-color-finish--dotted
 exports.default = (0, cssr_1.cB)('steps', `
  width: 100%;
  display: flex;
-`, [(0, cssr_1.cB)('step', `
+`, [(0, cssr_1.cM)('outline-variant', `
+ gap: 16px;
+ width: fit-content;
+ `), (0, cssr_1.cB)('step', `
  position: relative;
  display: flex;
  flex: 1;
  `, [(0, cssr_1.cM)('disabled', 'cursor: not-allowed'), (0, cssr_1.cM)('clickable', `
  cursor: pointer;
- `), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cB)('step-splitor', 'display: none;')])]), (0, cssr_1.cB)('step-splitor', `
+ `), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cB)('step-splitor', 'display: none;')]), (0, cssr_1.cM)('outline-variant', [(0, cssr_1.c)('&', `
+ box-shadow: 0 0 0 2px var(--u-splitor-color);
+ display: flex;
+ height: var(--u-step-height);
+ padding: 0 12px 0 8px;
+ align-items: center;
+ gap: 12px; 
+ border-radius: var(--u-indicator-border-radius--outline);
+ `), (0, cssr_1.cB)('step-content-header', `
+ margin: 0px;
+ `), (0, cssr_1.c)('>', [(0, cssr_1.cB)('step-indicator', `
+ box-shadow: none;
+ border: none;
+ `, [(0, cssr_1.cB)('step-indicator-slot', `
+ `, [(0, cssr_1.cE)('index', `
+ font-size: var(--u-indicator-index-font-size--outline);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `), (0, cssr_1.cB)('base-icon', `
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `)])])]), (0, cssr_1.cM)('process-status', [(0, cssr_1.cB)('step-indicator', `
+ background-color: var(--u-indicator-icon-color--outline);
+ `, [(0, cssr_1.cB)('step-indicator-slot', [(0, cssr_1.cE)('index', `
+ color: var(--u-indicator-text-color--outline);
+ `), (0, cssr_1.cB)('base-icon', `
+ color: var(--u-indicator-icon-color--outline);
+ `)])])]), (0, cssr_1.cM)('finish-status', [`
+ box-shadow: 0 0 0 2px var(--u-indicator-border-color-finish--outline);
+ `, (0, cssr_1.c)('>', [(0, cssr_1.cB)('step-indicator', `
+ border-radius: var(--u-indicator-border-radius-finish--outline);
+ background-color: var(--u-indicator-background-finish--outline);
+ `, [(0, cssr_1.cB)('step-indicator-slot', `
+ height: var(--u-indicator-icon-size--outline);
+ width: var(--u-indicator-icon-size--outline);
+ font-size: var(--u-indicator-icon-size--outline);
+ line-height: var(--u-indicator-icon-size--outline);
+ `, [(0, cssr_1.cB)('base-icon', `
+ color: var(--u-indicator-icon-color-finish--outline);
+ `)])])])])]), (0, cssr_1.cM)('dotted-variant', [(0, cssr_1.c)('&', `
+ align-items: baseline;
+ `, [(0, cssr_1.cM)('process-status', [(0, cssr_1.cB)('step-indicator', [(0, cssr_1.cB)('step-indicator-slot', `
+ background-color: var(--u-indicator-color);
+ `), (0, cssr_1.cB)('step-splitor', `
+ background-color: var(--u-indicator-color);
+ `)])]), (0, cssr_1.cM)('finish-status', [(0, cssr_1.cB)('step-indicator', [(0, cssr_1.cB)('step-indicator-slot', `
+ background-color: var(--u-indicator-color-finish--dotted);
+ `), (0, cssr_1.cB)('step-splitor', `
+ background-color: var(--u-splitor-color-finish--dotted);
+ `)])]), (0, cssr_1.cM)('error-status', [(0, cssr_1.cB)('step-indicator', [(0, cssr_1.cB)('step-indicator-slot', `
+ background-color: var(--u-indicator-color);
+ `), (0, cssr_1.cB)('step-splitor', `
+ background-color: var(--u-splitor-color);
+ `)])])]), (0, cssr_1.cB)('step', `
+ align-items: baseline;
+ `), (0, cssr_1.cB)('step-indicator', `
+ background-color: transparent;
+ box-shadow: none;
+ width: var(--u-indicator-size--dotted);
+ height: var(--u-indicator-size--dotted);
+ `, [(0, cssr_1.cB)('step-indicator-slot', `
+ background-color: var(--u-indicator-color--dotted);
+ border-radius: 50%;
+ height: 10px;
+ width: 10px;
+ `)]), (0, cssr_1.cB)('step-content', `
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ margin-left: 6px;
+ `, [(0, cssr_1.cB)('step-content-header', `
+ margin: 0;
+ font-size: var(--u-step-header-font-size--dotted);
+ font-weight: 500;
+ `), (0, cssr_1.cE)('description', `
+ margin-left: 0;
+ color: var(--u-description-text-color--dotted);
+ font-size: var(--u-step-header-font-size--dotted);
+ font-weight: 500;
+ line-height: 24px;
+ `)])])]), (0, cssr_1.cB)('step-splitor', `
  background-color: var(--u-splitor-color);
  margin-top: calc(var(--u-step-header-font-size) / 2);
  height: 6px;
@@ -142,4 +243,15 @@ exports.default = (0, cssr_1.cB)('steps', `
  margin: 0 !important;
  left: calc(var(--u-indicator-size) / 2);
  height: calc(100% - var(--u-indicator-size));
- `)])]), (0, cssr_1.cB)('step-content', [(0, cssr_1.cE)('description', 'margin-top: 8px;')])])])])])]);
+ `)])]), (0, cssr_1.cB)('step-content', [(0, cssr_1.cE)('description', 'margin-top: 8px;')])])])]), (0, cssr_1.cM)('outline-variant', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('step', `
+ margin: 0;
+ padding: 0 12px 0 8px;
+ height: var(--u-step-height);
+ flex: auto;
+ `)])]), (0, cssr_1.cM)('dotted-variant', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('step', [(0, cssr_1.cB)('step-splitor', `
+ background-color: var(--u-splitor-color--dotted);
+ bottom: -8px;
+ width: 2px;
+ left: calc(var(--u-indicator-size--dotted) / 2 - 1px);
+ height: calc(100% - var(--u-indicator-size--dotted)/2 - 10px);
+ `)])])])])]);

package/lib/steps/styles/light.d.ts

@@ -3,16 +3,21 @@ import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
     stepHeaderFontSizeSmall: string;
     stepHeaderFontSizeMedium: string;
+    stepHeaderFontSizeLarge: string;
     indicatorIndexFontSizeSmall: string;
     indicatorIndexFontSizeMedium: string;
     indicatorSizeSmall: string;
     indicatorSizeMedium: string;
+    indicatorSizeDotted: string;
     indicatorIconSizeSmall: string;
     indicatorIconSizeMedium: string;
+    indicatorIconSizeOutline: string;
     indicatorIconColorProcess: string;
     indicatorIconColorWait: string;
     indicatorIconColorFinish: string;
     indicatorIconColorError: string;
+    indicatorIconColorOutline: string;
+    indicatorIconColorFinishDotted: string;
     stepHeaderFontWeight: string;
     indicatorTextColorProcess: string;
     indicatorTextColorWait: string;
@@ -22,22 +27,31 @@ export declare const self: (vars: ThemeCommonVars) => {
     indicatorBorderColorWait: string;
     indicatorBorderColorFinish: string;
     indicatorBorderColorError: string;
+    indicatorBorderColorFinishOutline: string;
+    indicatorBorderRadiusOutline: string;
+    indicatorBorderRadiusFinishOutline: string;
     indicatorColorProcess: string;
     indicatorColorWait: string;
     indicatorColorFinish: string;
     indicatorColorError: string;
+    indicatorColorDotted: string;
+    indicatorBackgroundFinishOutline: string;
     splitorColorProcess: string;
     splitorColorWait: string;
     splitorColorFinish: string;
     splitorColorError: string;
+    splitorColorFinishDotted: string;
+    splitorColorDotted: string;
     headerTextColorProcess: string;
     headerTextColorWait: string;
     headerTextColorFinish: string;
     headerTextColorError: string;
     descriptionTextColorProcess: string;
     descriptionTextColorWait: string;
+    descriptionTextColorDotted: string;
     descriptionTextColorFinish: string;
     descriptionTextColorError: string;
+    stepHeight: string;
 };
 export type StepsThemeVars = ReturnType<typeof self>;
 declare const stepsLight: Theme<'Steps', StepsThemeVars>;

package/lib/steps/styles/light.js

@@ -3,20 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { fontWeightStrong, fontBodySmall, fontBodyMedium, fontBodyLarge, textPrimary, brandPrimary500, staticRed, elementsTertiary, brandPrimary300, textSecondary, staticWhite, staticGreen } = vars;
+    const { fontWeightStrong, fontBodySmall, fontBodyMedium, fontBodyLarge, textPrimary, brandPrimary500, staticRed, elementsTertiary, brandPrimary300, textSecondary, staticWhite, staticGreen, brandPrimary50, elementsQuaternary, borderRadius, heightSmall, borderRadiusSmall } = vars;
     return {
         stepHeaderFontSizeSmall: fontBodySmall,
         stepHeaderFontSizeMedium: fontBodyMedium,
+        stepHeaderFontSizeLarge: fontBodyLarge,
         indicatorIndexFontSizeSmall: fontBodyMedium,
         indicatorIndexFontSizeMedium: fontBodyLarge,
         indicatorSizeSmall: '22px',
         indicatorSizeMedium: '28px',
+        indicatorSizeDotted: '24px',
         indicatorIconSizeSmall: '14px',
         indicatorIconSizeMedium: '18px',
+        indicatorIconSizeOutline: '12px',
         indicatorIconColorProcess: textPrimary,
         indicatorIconColorWait: textSecondary,
         indicatorIconColorFinish: staticGreen,
         indicatorIconColorError: staticRed,
+        indicatorIconColorOutline: elementsTertiary,
+        indicatorIconColorFinishDotted: brandPrimary500,
         stepHeaderFontWeight: fontWeightStrong,
         indicatorTextColorProcess: staticWhite,
         indicatorTextColorWait: textSecondary,
@@ -26,22 +31,31 @@ const self = (vars) => {
         indicatorBorderColorWait: elementsTertiary,
         indicatorBorderColorFinish: brandPrimary300,
         indicatorBorderColorError: staticRed,
+        indicatorBorderColorFinishOutline: elementsQuaternary,
+        indicatorBorderRadiusOutline: borderRadius,
+        indicatorBorderRadiusFinishOutline: borderRadiusSmall,
         indicatorColorProcess: brandPrimary500,
         indicatorColorWait: elementsTertiary,
         indicatorColorFinish: brandPrimary300,
         indicatorColorError: staticRed,
+        indicatorColorDotted: brandPrimary50,
+        indicatorBackgroundFinishOutline: brandPrimary50,
         splitorColorProcess: brandPrimary500,
         splitorColorWait: elementsTertiary,
         splitorColorFinish: brandPrimary300,
         splitorColorError: staticRed,
+        splitorColorFinishDotted: brandPrimary500,
+        splitorColorDotted: brandPrimary50,
         headerTextColorProcess: textPrimary,
         headerTextColorWait: textSecondary,
         headerTextColorFinish: textPrimary,
         headerTextColorError: staticRed,
         descriptionTextColorProcess: textPrimary,
         descriptionTextColorWait: textSecondary,
+        descriptionTextColorDotted: textSecondary,
         descriptionTextColorFinish: textPrimary,
-        descriptionTextColorError: staticRed
+        descriptionTextColorError: staticRed,
+        stepHeight: heightSmall
     };
 };
 exports.self = self;

package/lib/theme-editor/src/ThemeEditor.d.ts

@@ -72,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         shadowDepth: string;
         fontFamily: string;
         fontFamilyMono: string;
+        fontFamilyWixMadeforDisplay: string;
         cubicBezierEaseInOut: string;
         cubicBezierEaseOut: string;
         cubicBezierEaseIn: string;
@@ -120,6 +121,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         closeLarge: string;
         closeHuge: string;
         closeBorderRadius: string;
+        codeBorder: string;
         name: "common";
     }>;
     theme: import("vue").ComputedRef<GlobalThemeOverrides>;

package/lib/themes/dark.js

@@ -88,10 +88,12 @@ const styles_83 = require("../watermark/styles");
 const styles_84 = require("../toggle-button/styles");
 const styles_85 = require("../_internal/account-option/styles");
 const styles_86 = require("../flex/styles");
+const styles_87 = require("../action-card/styles");
 exports.darkTheme = {
     name: 'dark',
     common: common_1.commonDark,
     AccountOption: styles_85.accountOptionDark,
+    ActionCard: styles_87.actionCardDark,
     Alert: styles_1.alertDark,
     Anchor: styles_2.anchorDark,
     AutoComplete: styles_3.autoCompleteDark,

package/lib/themes/light.js

@@ -90,10 +90,12 @@ const styles_83 = require("../watermark/styles");
 const styles_84 = require("../toggle-button/styles");
 const styles_85 = require("../_internal/account-option/styles");
 const styles_86 = require("../flex/styles");
+const styles_87 = require("../action-card/styles");
 exports.lightTheme = {
     name: 'light',
     common: common_1.commonLight,
     AccountOption: styles_85.accountOptionLight,
+    ActionCard: styles_87.actionCardLight,
     Alert: styles_1.alertLight,
     Anchor: styles_2.anchorLight,
     AutoComplete: styles_3.autoCompleteLight,

package/lib/toggle-button/src/ToggleButton.d.ts

@@ -17,6 +17,10 @@ export declare const toggleButtonProps: {
         type: PropType<"default" | "primary">;
         default: string;
     };
+    iconPosition: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
     size: PropType<"small" | "medium" | "large">;
     checked: {
         type: PropType<boolean | string | number | undefined>;
@@ -183,6 +187,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"default" | "primary">;
         default: string;
     };
+    iconPosition: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
     size: PropType<"small" | "medium" | "large">;
     checked: {
         type: PropType<boolean | string | number | undefined>;
@@ -391,6 +399,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"default" | "primary">;
         default: string;
     };
+    iconPosition: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
     size: PropType<"small" | "medium" | "large">;
     checked: {
         type: PropType<boolean | string | number | undefined>;
@@ -547,5 +559,6 @@ declare const _default: import("vue").DefineComponent<{
     checkedValue: string | number | boolean;
     uncheckedValue: string | number | boolean;
     viewType: "default" | "primary";
+    iconPosition: "top" | "bottom";
 }, {}>;
 export default _default;

package/lib/toggle-button/src/ToggleButton.js

@@ -20,6 +20,9 @@ exports.toggleButtonProps = Object.assign(Object.assign(Object.assign({}, _mixin
     }, viewType: {
         type: String,
         default: 'default'
+    }, iconPosition: {
+        type: String,
+        default: 'top'
     } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'ToggleButton',
@@ -103,9 +106,9 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         var _a, _b, _c;
-        const { $slots, mergedClsPrefix, onRender, description, title, footer, mergedChecked, isCheckbox, mergedDisabled } = this;
+        const { $slots, mergedClsPrefix, onRender, description, title, footer, mergedChecked, isCheckbox, mergedDisabled, iconPosition } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
-        const iconNode = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-toggle-button__icon` }, (0, _utils_1.resolveSlot)($slots.icon, () => [
+        const iconNode = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-toggle-button__icon ${mergedClsPrefix}-toggle-button__icon--position-${iconPosition}` }, (0, _utils_1.resolveSlot)($slots.icon, () => [
             (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(Checkmark_1.default, null) })
         ])));
         const titleNode = (title || $slots.header) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-toggle-button__title` }, ((_a = $slots.header) === null || _a === void 0 ? void 0 : _a.call($slots)) || title));

package/lib/toggle-button/src/styles/toggle-button.cssr.js

@@ -54,6 +54,9 @@ exports.default = (0, cssr_1.cB)('toggle-button', `
  font-size: var(--u-icon-size);
  `), (0, cssr_1.cB)('icon', `
  font-size: var(--u-icon-size);
+ `), (0, cssr_1.cM)('position-bottom', `
+ bottom: 0;
+ top: auto;
  `)]), (0, cssr_1.cE)('input', `
  opacity: 0;
  pointer-events: none;

package/lib/typography/src/a.d.ts

@@ -26,6 +26,7 @@ export declare const aProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -47,6 +48,8 @@ export declare const aProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -92,6 +95,7 @@ export declare const aProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -113,6 +117,8 @@ export declare const aProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -158,6 +164,7 @@ export declare const aProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -179,6 +186,8 @@ export declare const aProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -227,6 +236,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -248,6 +258,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -293,6 +305,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -314,6 +327,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -359,6 +374,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -380,6 +396,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -434,6 +452,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -455,6 +474,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -500,6 +521,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -521,6 +543,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -566,6 +590,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -587,6 +612,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;

package/lib/typography/src/a.js

@@ -13,6 +13,9 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'A',
     props: exports.aProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.warn)('a', 'A component is deprecated, you should use `UText` instead.');
+        }
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Typography', '-a', a_cssr_1.default, styles_1.typographyLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {