@uzum-tech/ui 0.1.1 → 1.0.0

package/lib/select/src/Select.js

@@ -75,7 +75,7 @@ exports.selectProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, status: String, showCheckmark: {
         type: Boolean,
         default: true
-    }, 
+    }, round: Boolean, counter: Boolean, secondary: Boolean, 
     /** deprecated */
     onChange: [Function, Array], items: Array });
 exports.default = (0, vue_1.defineComponent)({
@@ -670,7 +670,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(_internal_1.UInternalSelection, { ref: "triggerRef", inlineThemeDisabled: this.inlineThemeDisabled, status: this.mergedStatus, inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, active: this.activeWithoutMenuOpen || this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, labelField: this.labelField, valueField: this.valueField, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, loadingSkeleton: this.loadingSkeleton, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeydown, onPatternBlur: this.onTriggerInputBlur, onPatternFocus: this.onTriggerInputFocus, onResize: this.handleTriggerOrMenuResize, ignoreComposition: this.ignoreComposition }, {
+                        default: () => ((0, vue_1.h)(_internal_1.UInternalSelection, { ref: "triggerRef", inlineThemeDisabled: this.inlineThemeDisabled, status: this.mergedStatus, inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, active: this.activeWithoutMenuOpen || this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, labelField: this.labelField, valueField: this.valueField, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, loadingSkeleton: this.loadingSkeleton, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeydown, onPatternBlur: this.onTriggerInputBlur, onPatternFocus: this.onTriggerInputFocus, onResize: this.handleTriggerOrMenuResize, ignoreComposition: this.ignoreComposition, round: this.round, counter: this.counter, secondary: this.secondary }, {
                             arrow: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
                         }))
                     }),

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

@@ -34,7 +34,6 @@ export type Value = ValueAtom | string[] | number[] | ValueAtom[];
 export type OnUpdateValue = (value: string & number & ValueAtom & string[] & number[] & ValueAtom[] & (ValueAtom | null) & (string[] | null) & (number[] | null) & (ValueAtom[] | null), option: SelectBaseOption & null & SelectBaseOption[]) => void;
 export type OnUpdateValueImpl = (value: ValueAtom | string[] | number[] | ValueAtom[] | (ValueAtom | null) | (string[] | null) | (number[] | null) | (ValueAtom[] | null), option: SelectBaseOption | null | SelectBaseOption[]) => void;
 export type SelectTreeMate = TreeMate<SelectBaseOption, SelectGroupOption, SelectIgnoredOption>;
-export type Size = 'tiny' | 'small' | 'medium' | 'large';
 export type SelectOption = SelectBaseOption<string | number>;
 export type SelectGroupOption = (SelectGroupOptionBase & {
     /** @deprecated should use key and label instead */

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

@@ -6,15 +6,41 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
     menuBoxShadow: string;
 }, {
     InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSizeTiny: string;
+        clearSizeSmall: string;
+        clearSizeMedium: string;
+        clearSizeLarge: string;
+        clearSizeHuge: string;
+        arrowSizeTiny: string;
+        arrowSizeSmall: string;
+        arrowSizeMedium: string;
+        arrowSizeLarge: string;
+        arrowSizeHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
+        lineHeightTiny: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        lineHeightHuge: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        borderRadius: string;
+        heightHuge: string;
+        borderRadiusTiny: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        borderRadiusHuge: string;
         textColor: string;
         textColorDisabled: string;
         placeholderColor: string;
@@ -56,35 +82,68 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         clearColor: string;
         clearColorHover: string;
         clearColorPressed: string;
-        paddingSingle: string;
-        paddingMultiple: string;
-        clearSize: string;
-        arrowSize: string;
+        caretColorSecondary: string;
+        filterCounterTextColor: string;
+        filterCounterSeparatorColor: string;
+        filterCounterTextColorDisabled: string;
+        filterCounterSeparatorColorDisabled: string;
+        arrowColorSecondary: string;
+        clearColorSecondary: string;
+        colorSecondary: string;
+        textColorSecondary: string;
+        borderSecondary: string;
+        arrowColorDisabledSecondary: string;
+        clearColorDisabledSecondary: string;
+        colorDisabledSecondary: string;
+        textColorDisabledSecondary: string;
+        borderDisabledSecondary: string;
+        arrowColorHoverSecondary: string;
+        clearColorHoverSecondary: string;
+        colorHoverSecondary: string;
+        textColorHoverSecondary: string;
+        borderHoverSecondary: string;
+        arrowColorFocusSecondary: string;
+        clearColorFocusSecondary: string;
+        colorFocusSecondary: string;
+        textColorFocusSecondary: string;
+        borderFocusSecondary: string;
+        arrowColorActiveSecondary: string;
+        clearColorActiveSecondary: string;
+        colorActiveSecondary: string;
+        textColorActiveSecondary: string;
+        borderActiveSecondary: string;
     }, {
         Popover: import("../../_mixins").Theme<"Popover", {
-            fontSize: string;
-            borderRadius: string;
-            color: string;
-            dividerColor: string;
-            textColor: string;
-            boxShadow: string;
             space: string;
             spaceArrow: string;
             arrowOffset: string;
             arrowOffsetVertical: string;
             arrowHeight: string;
             padding: string;
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
         }, any>;
     }>;
     InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+        height: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        optionPaddingSmall: string;
+        optionPaddingMedium: string;
+        optionPaddingLarge: string;
+        loadingSize: string;
         optionFontSizeSmall: string;
         optionFontSizeMedium: string;
         optionFontSizeLarge: string;
-        optionFontSizeHuge: string;
         optionHeightSmall: string;
         optionHeightMedium: string;
         optionHeightLarge: string;
-        optionHeightHuge: string;
+        optionBorderRadius: string;
         borderRadius: string;
         color: string;
         groupHeaderTextColor: string;
@@ -101,22 +160,16 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         optionColorActivePending: string;
         actionTextColor: string;
         loadingColor: string;
-        height: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        paddingHuge: string;
-        optionPaddingSmall: string;
-        optionPaddingMedium: string;
-        optionPaddingLarge: string;
-        optionPaddingHuge: string;
-        loadingSize: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
             colorHover: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -124,10 +177,6 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
             textColor: string;
             iconColor: string;
             extraTextColor: string;
-            iconSizeSmall: string;
-            iconSizeMedium: string;
-            iconSizeLarge: string;
-            iconSizeHuge: string;
         }, any>;
     }>;
 }>;

package/lib/select/styles/light.js

@@ -6,9 +6,9 @@ const styles_2 = require("../../_internal/select-menu/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 function self(vars) {
-    const { boxShadow2 } = vars;
+    const { shadowDepth2 } = vars;
     return {
-        menuBoxShadow: boxShadow2
+        menuBoxShadow: shadowDepth2
     };
 }
 exports.self = self;

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

@@ -16,7 +16,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('skeleton', `
  --u-color-start .3s var(--u-bezier),
  --u-color-end .3s var(--u-bezier),
  background-color .3s var(--u-bezier);
- animation: 2s skeleton-loading infinite cubic-bezier(0.36, 0, 0.64, 1);
+ animation: 6s skeleton-loading infinite cubic-bezier(0.36, 0, 0.64, 1);
  background-color: var(--u-color-start);
  `), (0, cssr_1.c)('@keyframes skeleton-loading', `
  0% {

package/lib/skeleton/styles/dark.js

@@ -2,18 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.skeletonDark = void 0;
 const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
 exports.skeletonDark = {
     name: 'Skeleton',
     common: common_1.commonDark,
-    self(vars) {
-        const { heightSmall, heightMedium, heightLarge, borderRadius } = vars;
-        return {
-            color: 'rgba(255, 255, 255, 0.12)',
-            colorEnd: 'rgba(255, 255, 255, 0.18)',
-            borderRadius,
-            heightSmall,
-            heightMedium,
-            heightLarge
-        };
-    }
+    self: light_1.self
 };

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

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { type Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
     color: string;
     colorEnd: string;
     borderRadius: string;
@@ -11,4 +11,3 @@ declare const self: (vars: ThemeCommonVars) => {
 export type SkeletonThemeVars = ReturnType<typeof self>;
 export declare const skeletonLight: Theme<'Skeleton', SkeletonThemeVars>;
 export type SkeletonTheme = typeof skeletonLight;
-export {};

package/lib/skeleton/styles/light.js

@@ -1,20 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.skeletonLight = void 0;
+exports.skeletonLight = exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { heightSmall, heightMedium, heightLarge, borderRadius } = vars;
+    const { heightSmall, heightMedium, heightLarge, borderRadius, elementsQuaternary, elementsTertiary } = vars;
     return {
-        color: '#eee',
-        colorEnd: '#ddd',
+        color: elementsQuaternary,
+        colorEnd: elementsTertiary,
         borderRadius,
         heightSmall,
         heightMedium,
         heightLarge
     };
 };
+exports.self = self;
 exports.skeletonLight = {
     name: 'Skeleton',
     common: common_1.commonLight,
-    self
+    self: exports.self
 };

package/lib/slider/src/Slider.d.ts

@@ -53,6 +53,12 @@ export declare const sliderProps: {
     readonly 'onUpdate:value': PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Slider", {
+        railHeight: string;
+        railWidthVertical: string;
+        handleSize: string;
+        dotHeight: string;
+        dotWidth: string;
+        dotBorderRadius: string;
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -75,14 +81,14 @@ export declare const sliderProps: {
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         railHeight: string;
         railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
         dotBorderRadius: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -105,14 +111,14 @@ export declare const sliderProps: {
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         railHeight: string;
         railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
         dotBorderRadius: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -135,12 +141,6 @@ export declare const sliderProps: {
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
-        railHeight: string;
-        railWidthVertical: string;
-        handleSize: string;
-        dotHeight: string;
-        dotWidth: string;
-        dotBorderRadius: string;
     }, any>>>;
 };
 export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>;
@@ -191,6 +191,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:value': PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Slider", {
+        railHeight: string;
+        railWidthVertical: string;
+        handleSize: string;
+        dotHeight: string;
+        dotWidth: string;
+        dotBorderRadius: string;
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -213,14 +219,14 @@ declare const _default: import("vue").DefineComponent<{
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         railHeight: string;
         railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
         dotBorderRadius: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -243,14 +249,14 @@ declare const _default: import("vue").DefineComponent<{
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         railHeight: string;
         railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
         dotBorderRadius: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -273,12 +279,6 @@ declare const _default: import("vue").DefineComponent<{
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
-        railHeight: string;
-        railWidthVertical: string;
-        handleSize: string;
-        dotHeight: string;
-        dotWidth: string;
-        dotBorderRadius: string;
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
@@ -404,6 +404,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:value': PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Slider", {
+        railHeight: string;
+        railWidthVertical: string;
+        handleSize: string;
+        dotHeight: string;
+        dotWidth: string;
+        dotBorderRadius: string;
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -426,14 +432,14 @@ declare const _default: import("vue").DefineComponent<{
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         railHeight: string;
         railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
         dotBorderRadius: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -456,14 +462,14 @@ declare const _default: import("vue").DefineComponent<{
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         railHeight: string;
         railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
         dotBorderRadius: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
         railColor: string;
@@ -486,12 +492,6 @@ declare const _default: import("vue").DefineComponent<{
         dotBorder: string;
         dotBorderActive: string;
         dotBoxShadow: string;
-        railHeight: string;
-        railWidthVertical: string;
-        handleSize: string;
-        dotHeight: string;
-        dotWidth: string;
-        dotBorderRadius: string;
     }, any>>>;
 }>>, {
     readonly range: boolean;

package/lib/slider/styles/dark.js

@@ -1,17 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
 const sliderDark = {
     name: 'Slider',
     common: common_1.commonDark,
-    self(vars) {
-        const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)';
-        const { railColor, modalColor, primaryColorSuppl, popoverColor, textColor2, cardColor, borderRadius, fontSize, opacityDisabled } = vars;
-        return Object.assign(Object.assign({}, _common_1.default), { fontSize, markFontSize: fontSize, railColor, railColorHover: railColor, fillColor: primaryColorSuppl, fillColorHover: primaryColorSuppl, opacityDisabled, handleColor: '#FFF', dotColor: cardColor, dotColorModal: modalColor, dotColorPopover: popoverColor, handleBoxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowHover: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowActive: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowFocus: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', indicatorColor: popoverColor, indicatorBoxShadow: boxShadow, indicatorTextColor: textColor2, indicatorBorderRadius: borderRadius, dotBorder: `2px solid ${railColor}`, dotBorderActive: `2px solid ${primaryColorSuppl}`, dotBoxShadow: '' });
-    }
+    self: light_1.self
 };
 exports.default = sliderDark;

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

@@ -1,6 +1,12 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { type Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
+    railHeight: string;
+    railWidthVertical: string;
+    handleSize: string;
+    dotHeight: string;
+    dotWidth: string;
+    dotBorderRadius: string;
     fontSize: string;
     markFontSize: string;
     railColor: string;
@@ -23,12 +29,6 @@ declare const self: (vars: ThemeCommonVars) => {
     dotBorder: string;
     dotBorderActive: string;
     dotBoxShadow: string;
-    railHeight: string;
-    railWidthVertical: string;
-    handleSize: string;
-    dotHeight: string;
-    dotWidth: string;
-    dotBorderRadius: string;
 };
 export type SliderThemeVars = ReturnType<typeof self>;
 declare const sliderLight: Theme<'Slider', SliderThemeVars>;

package/lib/slider/styles/light.js

@@ -1,19 +1,44 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const _common_1 = __importDefault(require("./_common"));
+exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const indicatorColor = 'rgba(0, 0, 0, .85)';
-    const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)';
-    const { railColor, primaryColor, baseColor, cardColor, modalColor, popoverColor, borderRadius, fontSize, opacityDisabled } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { fontSize, markFontSize: fontSize, railColor, railColorHover: railColor, fillColor: primaryColor, fillColorHover: primaryColor, opacityDisabled, handleColor: '#FFF', dotColor: cardColor, dotColorModal: modalColor, dotColorPopover: popoverColor, handleBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowHover: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowActive: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowFocus: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', indicatorColor, indicatorBoxShadow: boxShadow, indicatorTextColor: baseColor, indicatorBorderRadius: borderRadius, dotBorder: `2px solid ${railColor}`, dotBorderActive: `2px solid ${primaryColor}`, dotBoxShadow: '' });
+    const { borderRadius, opacityDisabled, elementsPrimary, textQuaternary, brandPrimary500, elementsSecondary, fontBodyMedium, elementsQuaternary, elementsQuinary, brandPrimary400 } = vars;
+    return {
+        railHeight: '4px',
+        railWidthVertical: '4px',
+        handleSize: '18px',
+        dotHeight: '8px',
+        dotWidth: '8px',
+        dotBorderRadius: '4px',
+        fontSize: fontBodyMedium,
+        markFontSize: fontBodyMedium,
+        railColor: elementsQuaternary,
+        railColorHover: elementsQuinary,
+        fillColor: brandPrimary500,
+        fillColorHover: brandPrimary400,
+        opacityDisabled,
+        handleColor: elementsSecondary,
+        dotColor: elementsSecondary,
+        dotColorModal: elementsSecondary,
+        dotColorPopover: elementsSecondary,
+        handleBoxShadow: `inset 0 0 0 2px ${elementsQuaternary}`,
+        handleBoxShadowHover: `inset 0 0 0 2px ${elementsQuinary}`,
+        handleBoxShadowActive: `inset 0 0 0 2px ${elementsQuinary}`,
+        handleBoxShadowFocus: `inset 0 0 0 2px ${elementsQuinary}`,
+        indicatorColor: elementsPrimary,
+        indicatorBoxShadow: '',
+        indicatorTextColor: textQuaternary,
+        indicatorBorderRadius: borderRadius,
+        dotBorder: `2px solid ${elementsQuaternary}`,
+        dotBorderActive: `2px solid ${brandPrimary500}`,
+        dotBoxShadow: ''
+    };
 };
+exports.self = self;
 const sliderLight = {
     name: 'Slider',
     common: common_1.commonLight,
-    self
+    self: exports.self
 };
 exports.default = sliderLight;

package/lib/spin/styles/light.js

@@ -3,22 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { opacityDisabled, 
-    // heightTiny,
-    // heightSmall,
-    // heightMedium,
-    // heightLarge,
-    // heightHuge,
-    tertiaryColor, primaryColor, fontSize } = vars;
+    const { opacityDisabled, elementsPrimary, brandPrimary500, fontBodyMedium, fontBodySmall, fontBodyLarge, fontHeadingSmall, fontHeadingMedium, fontHeadingLarge } = vars;
     return {
-        tertiaryColor,
-        primaryColor,
-        fontSize,
-        sizeTiny: '12px',
-        sizeSmall: '16px',
-        sizeMedium: '24px',
-        sizeLarge: '32px',
-        sizeHuge: '36px',
+        tertiaryColor: elementsPrimary,
+        primaryColor: brandPrimary500,
+        fontSize: fontBodyMedium,
+        sizeTiny: fontBodySmall,
+        sizeSmall: fontBodyLarge,
+        sizeMedium: fontHeadingSmall,
+        sizeLarge: fontHeadingMedium,
+        sizeHuge: fontHeadingLarge,
         opacitySpinning: opacityDisabled
     };
 };

package/lib/statistic/styles/light.js

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { textColor2, textColor3, fontSize, fontWeight } = vars;
+    const { fontBodyMedium, fontHeadingSmall, textTertiary, textPrimary, fontWeight } = vars;
     return {
-        labelFontSize: fontSize,
+        labelFontSize: fontBodyMedium,
         labelFontWeight: fontWeight,
         valueFontWeight: fontWeight,
-        valueFontSize: '24px',
-        labelTextColor: textColor3,
-        valuePrefixTextColor: textColor2,
-        valueSuffixTextColor: textColor2,
-        valueTextColor: textColor2
+        valueFontSize: fontHeadingSmall,
+        labelTextColor: textTertiary,
+        valuePrefixTextColor: textPrimary,
+        valueSuffixTextColor: textPrimary,
+        valueTextColor: textPrimary
     };
 };
 exports.self = self;

package/lib/status/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UStatus, statusProps } from './src/Status';
+export type { StatusProps } from './src/Status';

package/lib/status/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statusProps = exports.UStatus = void 0;
+var Status_1 = require("./src/Status");
+Object.defineProperty(exports, "UStatus", { enumerable: true, get: function () { return __importDefault(Status_1).default; } });
+Object.defineProperty(exports, "statusProps", { enumerable: true, get: function () { return Status_1.statusProps; } });