@uzum-tech/ui 1.11.2 → 1.12.1

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

@@ -1,4 +1,11 @@
-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 TypographyVariantBase {
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    tag: keyof HTMLElementTagNameMap;
+}
+export type TypographyVariantOptions = Record<PropertyKey, Record<PropertyKey, TypographyVariantBase>>;
+export type TypographyVariantWeightsOptions = Record<PropertyKey, readonly string[]>;
 export interface TypographyVariantConfig {
     fontFamily: string;
     fontSize: string;
@@ -8,6 +15,100 @@ export interface TypographyVariantConfig {
     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>;
+export declare const defaultVariantOptions: {
+    readonly display: {
+        readonly l: {
+            readonly fontSize: "42px";
+            readonly lineHeight: "48px";
+            readonly letterSpacing: "-0.014em";
+            readonly tag: "h1";
+        };
+        readonly s: {
+            readonly fontSize: "36px";
+            readonly lineHeight: "44px";
+            readonly letterSpacing: "-0.013em";
+            readonly tag: "h1";
+        };
+    };
+    readonly heading: {
+        readonly l: {
+            readonly fontSize: "32px";
+            readonly lineHeight: "40px";
+            readonly letterSpacing: "-0.01em";
+            readonly tag: "h2";
+        };
+        readonly m: {
+            readonly fontSize: "28px";
+            readonly lineHeight: "36px";
+            readonly letterSpacing: "-0.009em";
+            readonly tag: "h2";
+        };
+        readonly s: {
+            readonly fontSize: "24px";
+            readonly lineHeight: "30px";
+            readonly letterSpacing: "-0.01em";
+            readonly tag: "h2";
+        };
+    };
+    readonly title: {
+        readonly l: {
+            readonly fontSize: "22px";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "-0.01em";
+            readonly tag: "h3";
+        };
+        readonly m: {
+            readonly fontSize: "20px";
+            readonly lineHeight: "30px";
+            readonly letterSpacing: "-0.009em";
+            readonly tag: "h3";
+        };
+        readonly s: {
+            readonly fontSize: "18px";
+            readonly lineHeight: "28px";
+            readonly letterSpacing: "0";
+            readonly tag: "h3";
+        };
+    };
+    readonly body: {
+        readonly l: {
+            readonly fontSize: "16px";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0.004em";
+            readonly tag: "p";
+        };
+        readonly m: {
+            readonly fontSize: "14px";
+            readonly lineHeight: "21px";
+            readonly letterSpacing: "0.006em";
+            readonly tag: "p";
+        };
+        readonly s: {
+            readonly fontSize: "12px";
+            readonly lineHeight: "16px";
+            readonly letterSpacing: "0.008em";
+            readonly tag: "p";
+        };
+    };
+};
+declare const variantWeights: {
+    readonly display: readonly ["", "medium", "semi-bold", "bold"];
+    readonly heading: readonly ["medium", "semi-bold", "bold"];
+    readonly title: readonly ["medium", "semi-bold", "bold"];
+    readonly body: readonly ["medium", "semi-bold", "bold"];
+};
+type VariantWeights = typeof variantWeights;
+type WeightSuffix<W> = W extends string ? (W extends '' ? '' : `-${W}`) : '';
+export type TypographyVariantFromOptions<Options extends TypographyVariantOptions> = {
+    [Category in keyof Options & keyof VariantWeights]: {
+        [Size in keyof Options[Category]]: `${string & Category}-${string & Size}${WeightSuffix<VariantWeights[Category][number]>}`;
+    }[keyof Options[Category]];
+}[keyof Options & keyof VariantWeights];
+export type TypographyDefaultVariant = TypographyVariantFromOptions<typeof defaultVariantOptions>;
+export type TypographyVariant = TypographyDefaultVariant | (string & {});
+export declare function mergeVariantOptions(variantOptions?: TypographyVariantOptions): TypographyVariantOptions;
+export declare function mergeVariantWeights(variantWeightsOptions?: Partial<Record<PropertyKey, readonly string[]>>): Record<PropertyKey, readonly string[]>;
+export declare function getVariantCssVars(variant: TypographyVariant | undefined, baseVars: Record<string, string>, fontFamilyVariant: string, variantOptions?: TypographyVariantOptions, variantWeightsOptions?: Partial<Record<PropertyKey, readonly string[]>>): Record<string, string>;
+export declare function getVariantTag(variant: TypographyVariant, variantOptions?: TypographyVariantOptions, variantWeightsOptions?: Partial<Record<PropertyKey, readonly string[]>>): keyof HTMLElementTagNameMap;
+export declare const variantToCssVars: Record<string, TypographyVariantConfig>;
+export {};

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.variantToCssVars = void 0;
+exports.variantToCssVars = exports.defaultVariantOptions = void 0;
+exports.mergeVariantOptions = mergeVariantOptions;
+exports.mergeVariantWeights = mergeVariantWeights;
 exports.getVariantCssVars = getVariantCssVars;
 exports.getVariantTag = getVariantTag;
 const fontFamily = 'var(--u-font-famliy-variant)';
-const baseStyles = {
+exports.defaultVariantOptions = {
     display: {
         l: {
             fontSize: '42px',
@@ -52,7 +54,12 @@ const baseStyles = {
             letterSpacing: '-0.009em',
             tag: 'h3'
         },
-        s: { fontSize: '18px', lineHeight: '28px', letterSpacing: '0', tag: 'h3' }
+        s: {
+            fontSize: '18px',
+            lineHeight: '28px',
+            letterSpacing: '0',
+            tag: 'h3'
+        }
     },
     body: {
         l: {
@@ -75,13 +82,21 @@ const baseStyles = {
         }
     }
 };
+const variantWeights = {
+    display: ['', 'medium', 'semi-bold', 'bold'],
+    heading: ['medium', 'semi-bold', 'bold'],
+    title: ['medium', 'semi-bold', 'bold'],
+    body: ['medium', 'semi-bold', 'bold']
+};
 const fontWeights = {
     medium: { weight: '500', style: 'medium' },
     'semi-bold': { weight: '600', style: 'semibold' },
-    bold: { weight: '700', style: 'bold' }
+    bold: { weight: '700', style: 'bold' },
+    '': { weight: '700', style: 'bold' }
 };
-function createVariant(category, size, weight) {
-    const base = baseStyles[category][size];
+function createVariant(options, category, size, weight) {
+    var _a, _b, _c;
+    const base = (_b = (_a = options === null || options === void 0 ? void 0 : options[category]) === null || _a === void 0 ? void 0 : _a[size]) !== null && _b !== void 0 ? _b : (_c = exports.defaultVariantOptions[category]) === null || _c === void 0 ? void 0 : _c[size];
     const { weight: fontWeight, style: fontStyle } = fontWeights[weight];
     return {
         fontFamily,
@@ -93,45 +108,74 @@ function createVariant(category, size, weight) {
         tag: base.tag
     };
 }
-function getVariantCssVars(variant, baseVars, fontFamilyVariant) {
-    if (!variant || !exports.variantToCssVars[variant]) {
+function mergeVariantOptions(variantOptions) {
+    if (!variantOptions)
+        return exports.defaultVariantOptions;
+    const mergedOptions = {};
+    const categories = new Set([
+        ...Object.keys(exports.defaultVariantOptions),
+        ...Object.keys(variantOptions)
+    ]);
+    categories.forEach((categoryKey) => {
+        const category = categoryKey;
+        mergedOptions[category] = Object.assign(Object.assign({}, (exports.defaultVariantOptions[category] || {})), (variantOptions[category] || {}));
+    });
+    return mergedOptions;
+}
+function mergeVariantWeights(variantWeightsOptions) {
+    if (!variantWeightsOptions)
+        return variantWeights;
+    const mergedWeights = {};
+    const categories = new Set([
+        ...Object.keys(variantWeights),
+        ...Object.keys(variantWeightsOptions)
+    ]);
+    categories.forEach((category) => {
+        const defaultWeights = variantWeights[category] || [];
+        const customWeights = variantWeightsOptions[category] || [];
+        const combined = [...defaultWeights];
+        customWeights.forEach((weight) => {
+            if (!combined.includes(weight)) {
+                combined.push(weight);
+            }
+        });
+        mergedWeights[category] = combined;
+    });
+    return mergedWeights;
+}
+function createVariantToCssVars(variantOptions, variantWeightsOptions) {
+    const configs = {};
+    const mergedWeights = mergeVariantWeights(variantWeightsOptions);
+    Object.entries(variantOptions).forEach(([category, sizes]) => {
+        const weights = mergedWeights[category] || [];
+        Object.keys(sizes).forEach((size) => {
+            weights.forEach((weight) => {
+                const variantKey = `${category}-${size}${weight ? `-${weight}` : ''}`;
+                configs[variantKey] = createVariant(variantOptions, category, size, weight);
+            });
+        });
+    });
+    return configs;
+}
+function resolveVariantConfigs(variantOptions, variantWeightsOptions) {
+    const hasCustomOptions = variantOptions && Object.keys(variantOptions).length > 0;
+    const hasCustomWeights = variantWeightsOptions && Object.keys(variantWeightsOptions).length > 0;
+    if (!hasCustomOptions && !hasCustomWeights) {
+        return exports.variantToCssVars;
+    }
+    return createVariantToCssVars(mergeVariantOptions(variantOptions), variantWeightsOptions);
+}
+function getVariantCssVars(variant, baseVars, fontFamilyVariant, variantOptions, variantWeightsOptions) {
+    const variantStyles = variant
+        ? resolveVariantConfigs(variantOptions, variantWeightsOptions)[variant]
+        : undefined;
+    if (!variantStyles) {
         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;
+function getVariantTag(variant, variantOptions, variantWeightsOptions) {
+    var _a;
+    return (_a = resolveVariantConfigs(variantOptions, variantWeightsOptions)[variant]) === null || _a === void 0 ? void 0 : _a.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')
-};
+exports.variantToCssVars = createVariantToCssVars(exports.defaultVariantOptions, variantWeights);

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

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

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

@@ -1,5 +1,5 @@
 import { Theme } from '../../../_mixins';
-import { ThemeCommonVars } from '../../../config-provider';
+import type { ThemeCommonVars } from '../../../config-provider';
 export declare const self: (vars: ThemeCommonVars) => {
     margin: string;
     aTextColor: string;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
-const styles_1 = require("../../../styles");
+const common_1 = require("../../../_styles/common");
 const self = (vars) => {
     const { borderRadiusSmall, brandPrimary500, elementsQuaternary, textPrimary, brandQuaternary500, staticRed, staticOrange, staticGreen, elementsTertiary, fontBodyMedium, lineHeightBodyMedium, codeBorder } = vars;
     return {
@@ -26,7 +26,7 @@ const self = (vars) => {
 exports.self = self;
 const typographyLight = {
     name: 'Typography',
-    common: styles_1.commonLight,
+    common: common_1.commonLight,
     self: exports.self
 };
 exports.default = typographyLight;

package/lib/_styles/common/dark.js

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
  });
 exports.default = derived;

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

@@ -16,6 +16,7 @@ declare const derived: {
     brandPrimary500: string;
     brandPrimary550: string;
     brandPrimary600: string;
+    brandSecondary400: string;
     brandSecondary500: string;
     brandSecondary300: string;
     brandSecondary600: string;

package/lib/_styles/common/light.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
 exports.default = derived;

package/lib/affix/src/Affix.d.ts

@@ -27,7 +27,7 @@ export declare const affixProps: {
         readonly default: undefined;
     };
 };
-export declare const affixPropKeys: ("top" | "bottom" | "position" | "target" | "listenTo" | "triggerTop" | "triggerBottom" | "offsetTop" | "offsetBottom")[];
+export declare const affixPropKeys: ("top" | "bottom" | "listenTo" | "triggerTop" | "triggerBottom" | "position" | "offsetTop" | "offsetBottom" | "target")[];
 export type AffixProps = ExtractPublicPropTypes<typeof affixProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly listenTo: PropType<string | ScrollTarget | (() => HTMLElement) | undefined>;
@@ -85,9 +85,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
 }>>, {
-    readonly position: "absolute" | "fix";
-    readonly target: (() => HTMLElement) | undefined;
+    readonly position: "fix" | "absolute";
     readonly offsetTop: number | undefined;
     readonly offsetBottom: number | undefined;
+    readonly target: (() => HTMLElement) | undefined;
 }, {}>;
 export default _default;

package/lib/alert/src/Alert.d.ts

@@ -929,11 +929,11 @@ declare const _default: import("vue").DefineComponent<{
         descriptionSpaceBanner: string;
     }, any>>>;
 }>>, {
-    type: "default" | "primary" | "info" | "success" | "warning" | "error";
+    type: "default" | "info" | "warning" | "error" | "success" | "primary";
     showIcon: boolean;
-    closable: boolean;
+    layoutType: "banner" | "alert";
     rounded: boolean;
-    layoutType: "alert" | "banner";
     actionsHorizontal: boolean;
+    closable: boolean;
 }, {}>;
 export default _default;

package/lib/anchor/src/AnchorAdapter.d.ts

@@ -280,15 +280,15 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly type: "block" | "rail";
     readonly top: number;
-    readonly position: "absolute" | "fix";
-    readonly target: (() => HTMLElement) | undefined;
-    readonly affix: boolean;
-    readonly offsetTop: number | undefined;
-    readonly offsetBottom: number | undefined;
     readonly showRail: boolean;
     readonly showBackground: boolean;
     readonly bound: number;
     readonly internalScrollable: boolean;
     readonly ignoreGap: boolean;
+    readonly position: "fix" | "absolute";
+    readonly offsetTop: number | undefined;
+    readonly offsetBottom: number | undefined;
+    readonly target: (() => HTMLElement) | undefined;
+    readonly affix: boolean;
 }, {}>;
 export default _default;

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -1608,12 +1608,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly loading: boolean;
     readonly bordered: boolean | undefined;
     readonly to: string | boolean | HTMLElement;
+    readonly clearable: boolean;
+    readonly defaultValue: string | null;
     readonly resetMenuOnOptionsChange: boolean;
     readonly placement: FollowerPlacement;
-    readonly defaultValue: string | null;
-    readonly clearable: boolean;
-    readonly options: AutoCompleteOptions;
     readonly blurAfterSelect: boolean;
     readonly clearAfterSelect: boolean;
+    readonly options: AutoCompleteOptions;
 }, {}>;
 export default _default;

package/lib/avatar/src/Avatar.d.ts

@@ -243,8 +243,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: boolean;
     readonly loading: boolean;
     readonly bordered: boolean;
-    readonly round: boolean;
     readonly circle: boolean;
+    readonly round: boolean;
     readonly lazy: boolean;
 }, {}>;
 export default _default;

package/lib/avatar-group/src/AvatarGroup.d.ts

@@ -240,7 +240,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     readonly loading: boolean;
-    readonly vertical: boolean;
     readonly options: AvatarGroupOption[];
+    readonly vertical: boolean;
 }, {}>;
 export default _default;

package/lib/back-top/src/BackTop.d.ts

@@ -253,7 +253,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly bottom: string | number;
     readonly to: string | HTMLElement;
     readonly show: boolean | undefined;
-    readonly 'onUpdate:show': Function;
     readonly visibilityHeight: number;
+    readonly 'onUpdate:show': Function;
 }, {}>;
 export default _default;

package/lib/badge/src/Badge.d.ts

@@ -232,7 +232,7 @@ declare const _default: import("vue").DefineComponent<{
         dotSize: string;
     }, any>>>;
 }>>, {
-    readonly type: "default" | "info" | "success" | "warning" | "error" | "prime";
+    readonly type: "default" | "info" | "warning" | "error" | "success" | "prime";
     readonly show: boolean;
     readonly dot: boolean;
     readonly showZero: boolean;

package/lib/button/src/Button.d.ts

@@ -2193,19 +2193,19 @@ declare const Button: import("vue").DefineComponent<{
     readonly loading: boolean;
     readonly bordered: boolean;
     readonly tag: keyof HTMLElementTagNameMap;
-    readonly tertiary: boolean;
-    readonly ghost: boolean;
+    readonly block: boolean;
+    readonly circle: boolean;
     readonly round: boolean;
     readonly strong: boolean;
-    readonly circle: boolean;
+    readonly tertiary: boolean;
     readonly text: boolean;
-    readonly focusable: boolean;
-    readonly dashed: boolean;
-    readonly block: boolean;
-    readonly secondary: boolean;
     readonly loadingSkeleton: boolean;
+    readonly ghost: boolean;
+    readonly secondary: boolean;
     readonly quaternary: boolean;
+    readonly focusable: boolean;
     readonly keyboard: boolean;
+    readonly dashed: boolean;
     readonly iconPlacement: "left" | "right";
     readonly attrType: "button" | "submit" | "reset";
     readonly nativeFocusBehavior: boolean;

package/lib/card/src/Card.d.ts

@@ -29,7 +29,7 @@ export declare const cardBaseProps: {
         readonly default: "div";
     };
 };
-export declare const cardBasePropKeys: ("title" | "bordered" | "tag" | "closable" | "role" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "hoverable" | "embedded" | "headerExtraStyle" | "segmented")[];
+export declare const cardBasePropKeys: ("title" | "bordered" | "tag" | "closable" | "onClose" | "contentStyle" | "headerStyle" | "headerExtraStyle" | "footerStyle" | "embedded" | "segmented" | "hoverable" | "role")[];
 export declare const cardProps: {
     size: {
         type: PropType<"small" | "medium" | "large" | "huge">;
@@ -568,10 +568,10 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     bordered: boolean;
     tag: keyof HTMLElementTagNameMap;
-    size: "small" | "medium" | "large" | "huge";
     closable: boolean;
-    hoverable: boolean;
+    size: "small" | "medium" | "large" | "huge";
     embedded: boolean;
     segmented: boolean | CardSegmented;
+    hoverable: boolean;
 }, {}>;
 export default _default;

package/lib/card-list/src/CardList.d.ts

@@ -251,9 +251,9 @@ declare const _default: import("vue").DefineComponent<{
         dropDownBgColor: string;
     }, any>>>;
 }>>, {
-    readonly cols: string | number;
+    readonly showDivider: boolean;
     readonly xGap: string | number;
     readonly yGap: string | number;
-    readonly showDivider: boolean;
+    readonly cols: string | number;
 }, {}>;
 export default _default;

package/lib/card-list/src/CardListItem.d.ts

@@ -76,8 +76,8 @@ declare const _default: import("vue").DefineComponent<{
         direction: "horizontal" | "vertical";
     }) => VNode>;
 }>>, {
+    readonly embedded: boolean;
     readonly direction: "vertical" | "horizontal";
     readonly dropdown: boolean;
-    readonly embedded: boolean;
 }, {}>;
 export default _default;

package/lib/carousel/src/Carousel.d.ts

@@ -325,23 +325,23 @@ declare const _default: import("vue").DefineComponent<{
         arrowColor: string;
     }, any>>>;
 }>>, {
-    draggable: boolean;
-    trigger: "hover" | "click";
-    direction: "vertical" | "horizontal";
-    loop: boolean;
-    showArrow: boolean;
     keyboard: boolean;
-    autoplay: boolean;
-    dotType: "line" | "dot";
     defaultIndex: number;
+    showArrow: boolean;
+    dotType: "dot" | "line";
     dotPlacement: "left" | "right" | "top" | "bottom";
     slidesPerView: number | "auto";
     spaceBetween: number;
     centeredSlides: boolean;
+    direction: "vertical" | "horizontal";
+    autoplay: boolean;
     interval: number;
-    effect: "card" | "slide" | "fade" | "custom";
+    loop: boolean;
+    effect: "slide" | "fade" | "card" | "custom";
     showDots: boolean;
+    trigger: "click" | "hover";
     transitionStyle: Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>;
+    draggable: boolean;
     touchable: boolean;
     mousewheel: boolean;
 }, {}>;

package/lib/carousel/src/CarouselDots.d.ts

@@ -64,9 +64,9 @@ declare const _default: import("vue").DefineComponent<{
     keyboard: BooleanConstructor;
 }>>, {
     total: number;
-    trigger: "hover" | "click";
     keyboard: boolean;
     currentIndex: number;
-    dotType: "line" | "never" | "dot";
+    dotType: "dot" | "line" | "never";
+    trigger: "click" | "hover";
 }, {}>;
 export default _default;

package/lib/cascader/src/Cascader.d.ts

@@ -3357,26 +3357,26 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: boolean | undefined;
     readonly bordered: boolean | undefined;
     readonly to: string | boolean | HTMLElement;
+    readonly clearable: boolean;
+    readonly defaultValue: Value | null;
+    readonly placement: FollowerPlacement;
+    readonly options: CascaderOption[];
     readonly show: boolean | undefined;
     readonly separator: string;
+    readonly allowCheckingNotLoaded: boolean;
     readonly multiple: boolean;
-    readonly labelField: string;
-    readonly virtualScroll: boolean;
-    readonly valueField: string;
-    readonly placement: FollowerPlacement;
-    readonly defaultValue: Value | null;
     readonly filterable: boolean;
-    readonly clearable: boolean;
-    readonly options: CascaderOption[];
+    readonly disabledField: string;
+    readonly expandTrigger: ExpandTrigger;
     readonly clearFilterAfterSelect: boolean;
     readonly remote: boolean;
-    readonly childrenField: string;
-    readonly expandTrigger: ExpandTrigger;
-    readonly allowCheckingNotLoaded: boolean;
     readonly cascade: boolean;
-    readonly checkStrategy: CheckStrategy;
-    readonly disabledField: string;
     readonly leafOnly: boolean;
     readonly showPath: boolean;
+    readonly virtualScroll: boolean;
+    readonly checkStrategy: CheckStrategy;
+    readonly valueField: string;
+    readonly labelField: string;
+    readonly childrenField: string;
 }, {}>;
 export default _default;