@veracity/vui 2.10.0 → 2.11.0

package/dist/cjs/onedesign-tokens/dist/js/rem/button.js

@@ -0,0 +1,88 @@
+"use strict";
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Mar 2023 12:31:05 GMT
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonTypeSecondaryFocusOutline = exports.buttonTypeSecondaryActiveTextColorLight = exports.buttonTypeSecondaryActiveTextColorDark = exports.buttonTypeSecondaryActiveBackgroundColorLight = exports.buttonTypeSecondaryActiveBackgroundColorDark = exports.buttonTypeSecondaryActiveBorderColorLight = exports.buttonTypeSecondaryActiveBorderColorDark = exports.buttonTypeSecondaryHoverTextColorLight = exports.buttonTypeSecondaryHoverTextColorDark = exports.buttonTypeSecondaryHoverBackgroundColorLight = exports.buttonTypeSecondaryHoverBackgroundColorDark = exports.buttonTypeSecondaryHoverBorderColorLight = exports.buttonTypeSecondaryHoverBorderColorDark = exports.buttonTypeSecondaryDefaultTextColorLight = exports.buttonTypeSecondaryDefaultTextColorDark = exports.buttonTypeSecondaryDefaultBackgroundColorLight = exports.buttonTypeSecondaryDefaultBackgroundColorDark = exports.buttonTypeSecondaryDefaultBorderColorLight = exports.buttonTypeSecondaryDefaultBorderColorDark = exports.buttonTypePrimaryFocusOutline = exports.buttonTypePrimaryActiveTextColorLight = exports.buttonTypePrimaryActiveTextColorDark = exports.buttonTypePrimaryActiveBackgroundColorLight = exports.buttonTypePrimaryActiveBackgroundColorDark = exports.buttonTypePrimaryActiveBorderColorLight = exports.buttonTypePrimaryActiveBorderColorDark = exports.buttonTypePrimaryHoverTextColorLight = exports.buttonTypePrimaryHoverTextColorDark = exports.buttonTypePrimaryHoverBackgroundColorLight = exports.buttonTypePrimaryHoverBackgroundColorDark = exports.buttonTypePrimaryHoverBorderColorLight = exports.buttonTypePrimaryHoverBorderColorDark = exports.buttonTypePrimaryDefaultTextColorLight = exports.buttonTypePrimaryDefaultTextColorDark = exports.buttonTypePrimaryDefaultBackgroundColorLight = exports.buttonTypePrimaryDefaultBackgroundColorDark = exports.buttonTypePrimaryDefaultBorderColorLight = exports.buttonTypePrimaryDefaultBorderColorDark = exports.buttonSizeDefaultPadding = exports.buttonSizeDefaultLineHeight = exports.buttonSizeDefaultFontSize = exports.buttonSizeSmallPadding = exports.buttonSizeSmallLineHeight = exports.buttonSizeSmallFontSize = exports.buttonSizeMediumPadding = exports.buttonSizeMediumLineHeight = exports.buttonSizeMediumFontSize = exports.buttonSizeLargePadding = exports.buttonSizeLargeLineHeight = exports.buttonSizeLargeFontSize = void 0;
+exports.buttonCursor = exports.buttonTransition = exports.buttonPadding = exports.buttonFontWeight = exports.buttonLineHeight = exports.buttonFontSize = exports.buttonFontFamily = exports.buttonBorderWidth = exports.buttonBorderStyle = exports.buttonDisabledOpacity = exports.buttonDisabledCursor = exports.buttonTypeTertiaryFocusOutline = exports.buttonTypeTertiaryActiveTextColorLight = exports.buttonTypeTertiaryActiveTextColorDark = exports.buttonTypeTertiaryActiveBackgroundColorLight = exports.buttonTypeTertiaryActiveBackgroundColorDark = exports.buttonTypeTertiaryActiveBorderColorLight = exports.buttonTypeTertiaryActiveBorderColorDark = exports.buttonTypeTertiaryHoverTextColorLight = exports.buttonTypeTertiaryHoverTextColorDark = exports.buttonTypeTertiaryHoverBackgroundColorLight = exports.buttonTypeTertiaryHoverBackgroundColorDark = exports.buttonTypeTertiaryHoverBorderColorLight = exports.buttonTypeTertiaryHoverBorderColorDark = exports.buttonTypeTertiaryDefaultTextColorLight = exports.buttonTypeTertiaryDefaultTextColorDark = exports.buttonTypeTertiaryDefaultBackgroundColorLight = exports.buttonTypeTertiaryDefaultBackgroundColorDark = exports.buttonTypeTertiaryDefaultBorderColorLight = exports.buttonTypeTertiaryDefaultBorderColorDark = void 0;
+exports.buttonSizeLargeFontSize = "1.125rem";
+exports.buttonSizeLargeLineHeight = "1.75rem";
+exports.buttonSizeLargePadding = "0.5rem 1rem";
+exports.buttonSizeMediumFontSize = "1rem";
+exports.buttonSizeMediumLineHeight = "1.5rem";
+exports.buttonSizeMediumPadding = "0.25rem calc(0.25rem * 3)";
+exports.buttonSizeSmallFontSize = "0.875rem";
+exports.buttonSizeSmallLineHeight = "1.25rem";
+exports.buttonSizeSmallPadding = "calc(0.25rem / 2) 0.5rem";
+exports.buttonSizeDefaultFontSize = "1rem";
+exports.buttonSizeDefaultLineHeight = "1.5rem";
+exports.buttonSizeDefaultPadding = "0.25rem calc(0.25rem * 3)";
+exports.buttonTypePrimaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryDefaultBackgroundColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypePrimaryDefaultBackgroundColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypePrimaryDefaultTextColorDark = "hsla(40, 3%, 100%, 1)";
+exports.buttonTypePrimaryDefaultTextColorLight = "hsla(223, 67%, 18%, 1)";
+exports.buttonTypePrimaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryHoverBackgroundColorDark = "hsla(218, 100%, 20%, 1)";
+exports.buttonTypePrimaryHoverBackgroundColorLight = "hsla(139, 100%, 70%, 1)";
+exports.buttonTypePrimaryHoverTextColorDark = "hsla(40, 3%, 100%, 1)";
+exports.buttonTypePrimaryHoverTextColorLight = "hsla(223, 67%, 18%, 1)";
+exports.buttonTypePrimaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryActiveBackgroundColorDark = "hsla(218, 100%, 35%, 1)";
+exports.buttonTypePrimaryActiveBackgroundColorLight = "hsla(139, 100%, 85%, 1)";
+exports.buttonTypePrimaryActiveTextColorDark = "hsla(40, 3%, 100%, 1)";
+exports.buttonTypePrimaryActiveTextColorLight = "hsla(223, 67%, 18%, 1)";
+exports.buttonTypePrimaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+exports.buttonTypeSecondaryDefaultBorderColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryDefaultBorderColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeSecondaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeSecondaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryHoverBorderColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryHoverBorderColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryHoverBackgroundColorDark = "hsla(196, 74%, 80%, 1)";
+exports.buttonTypeSecondaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+exports.buttonTypeSecondaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryActiveBorderColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryActiveBorderColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryActiveBackgroundColorDark = "hsla(196, 74%, 85%, 1)";
+exports.buttonTypeSecondaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+exports.buttonTypeSecondaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+exports.buttonTypeTertiaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeTertiaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeTertiaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryHoverBackgroundColorDark = "hsla(196, 74%, 80%, 1)";
+exports.buttonTypeTertiaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+exports.buttonTypeTertiaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeTertiaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeTertiaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryActiveBackgroundColorDark = "hsla(196, 74%, 85%, 1)";
+exports.buttonTypeTertiaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+exports.buttonTypeTertiaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeTertiaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeTertiaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+exports.buttonDisabledCursor = "default";
+exports.buttonDisabledOpacity = "0.5";
+exports.buttonBorderStyle = "solid";
+exports.buttonBorderWidth = "calc(0.125rem / 2)";
+exports.buttonFontFamily = "'Avenir Next', Arial, sans-serif";
+exports.buttonFontSize = "1rem";
+exports.buttonLineHeight = "1.5rem";
+exports.buttonFontWeight = "500";
+exports.buttonPadding = "calc(0.25rem * 1.5) calc(0.25rem * 3)";
+exports.buttonTransition = "all 0.15s ease-in-out";
+exports.buttonCursor = "pointer";

package/dist/cjs/sidemenu/sidemenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAK7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCAmEmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}
+{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCA6EmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}

package/dist/cjs/sidemenu/sidemenuItem.js

@@ -43,6 +43,7 @@ const box_1 = __importDefault(require("../box"));
 const button_1 = __importDefault(require("../button"));
 const core_1 = require("../core");
 const icon_1 = __importDefault(require("../icon"));
+const popover_1 = require("../popover");
 const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
 const context_1 = require("./context");
@@ -54,19 +55,23 @@ exports.SidemenuItem = (0, core_1.vui)((props, ref) => {
     const styles = (0, core_1.useStyleConfig)('Sidemenu', context_1.useSidemenuContext);
     const isDark = variant === 'dark';
     const hasChildrenExpanded = !!children && isExpandedInternal;
-    const innerContent = isExpandedInternal ? (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre" },
+    const innerContent = (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre" },
         react_1.default.createElement(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }),
-        react_1.default.createElement(t_1.default, { isTruncated: true, ml: 2 }, title))) : (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%" },
-        react_1.default.createElement(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize })));
+        react_1.default.createElement(t_1.default, { isTruncated: true, ml: 2 }, title)));
     const toggle = (e) => {
         e.preventDefault();
         e.stopPropagation();
         setDisplayChildren(!displayChildren);
     };
+    const buttonStyles = Object.assign(Object.assign(Object.assign({ alignItems: 'center', border: 'none', borderRadius: 0, borderLeft: '3px solid transparent', borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined, color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10', h: 'auto', justifyContent: 'space-between', onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: '100%' }, styles.item), { minH: size === 'lg' ? '56px' : '40px' }), rest);
     return (react_1.default.createElement(box_1.default, { flexDirection: "column", ref: ref, w: "100%" },
-        react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid transparent", borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined, borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10', h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%" }, styles.item, { minH: size === 'lg' ? '56px' : '40px' }, rest),
+        !hasChildrenExpanded && children ? (react_1.default.createElement(popover_1.Popover, { offset: [0, 0], placement: "right-start", trigger: "mouseenter" },
+            react_1.default.createElement(popover_1.Popover.Trigger, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu-item-popover', className) }, buttonStyles),
+                react_1.default.createElement(box_1.default, { borderLeft: `3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}` }, innerContent)),
+            react_1.default.createElement(popover_1.Popover.Content, { shadow: 'none' },
+                react_1.default.createElement(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%" }, children)))) : (react_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu-item', className) }, buttonStyles),
             innerContent,
-            hasChildrenExpanded && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' }))),
-        !!children && displayChildren && (react_1.default.createElement(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
+            hasChildrenExpanded && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' })))),
+        !!children && hasChildrenExpanded && displayChildren && (react_1.default.createElement(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
 });
 exports.default = exports.SidemenuItem;

package/dist/cjs/spinner/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,qDAiDlB,CAAA;AAEF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,qDAgDlB,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/cjs/spinner/spinner.js

@@ -44,8 +44,8 @@ exports.Spinner = (0, core_1.vui)((props, ref) => {
         h: isCustomSize ? size : undefined,
         w: isCustomSize ? size : undefined
     });
-    return (react_1.default.createElement(box_1.default, Object.assign({ center: true, className: (0, utils_1.cs)('vui-spinner', className), gap: 1, ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
+    return (react_1.default.createElement(box_1.default, Object.assign({ center: true, className: (0, utils_1.cs)('vui-spinner', className), gap: 1, ref: ref, transitionDuration: "fast" }, positionProps.container, styles.container, rest),
         react_1.default.createElement(exports.SpinnerCircle, Object.assign({ animation: `vui-spin ${speed} linear infinite`, className: "vui-spinnerCircle" }, styles.circle, circleProps)),
-        text && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-spinnerText" }, styles.text), text))));
+        !!text && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-spinnerText" }, styles.text), text))));
 });
 exports.default = exports.Spinner;

package/dist/cjs/spinner/spinner.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { ThemingProps } from '../theme';
 export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<'Spinner'>, 'size'> & {
@@ -12,7 +13,7 @@ export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProp
     /** Theme size or a number defining height and width. */
     size?: ThemingProps<'Spinner'>['size'] | number;
     /** Displays given text next to the spinner. */
-    text?: string;
+    text?: ReactNode;
     /** Text placement relative to the spinner. */
     textPosition?: 'bottom' | 'left' | 'right' | 'top';
     /** Thickness of the spinner circle in pixels. */

package/dist/cjs/spinner/spinner.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.types.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC3D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACtC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;IAC1C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IACnC,qDAAqD;IACrD,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC/C,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAClD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}
+{"version":3,"file":"spinner.types.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC3D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACtC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;IAC1C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IACnC,qDAAqD;IACrD,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC/C,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAClD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}

package/dist/cjs/spinner/theme.d.ts

@@ -1,5 +1,9 @@
 declare const _default: {
-    baseStyle: {};
+    baseStyle: {
+        container: {
+            padding: number;
+        };
+    };
     defaultProps: {
         size: string;
         variant: string;
@@ -34,14 +38,28 @@ declare const _default: {
                 w: number;
             };
         };
-        card: {
+        xl: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        xxl: {
             circle: {
                 borderWidth: number;
                 h: number;
                 w: number;
             };
         };
-        page: {
+        xxxl: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        xxxxl: {
             circle: {
                 borderWidth: number;
                 h: number;
@@ -50,7 +68,7 @@ declare const _default: {
         };
     };
     variants: {
-        lightBackground: {
+        light: {
             circle: {
                 borderColor: string;
                 borderTopColor: string;
@@ -59,7 +77,10 @@ declare const _default: {
                 color: string;
             };
         };
-        darkBackground: {
+        dark: {
+            container: {
+                bg: string;
+            };
             circle: {
                 borderColor: string;
                 borderTopColor: string;

package/dist/cjs/spinner/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/spinner/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/spinner/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,wBAMC"}

package/dist/cjs/spinner/theme.js

@@ -1,17 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const baseStyle = {};
+const baseStyle = {
+    container: {
+        padding: 1
+    }
+};
 const defaultProps = {
-    size: 'page',
-    variant: 'lightBackground'
+    size: 'xxxl',
+    variant: 'light'
 };
 const parts = ['container', 'circle', 'text'];
 const sizes = {
     xs: {
         circle: {
-            borderWidth: 1,
-            h: 16,
-            w: 16
+            borderWidth: 2,
+            h: 20,
+            w: 20
         }
     },
     sm: {
@@ -35,23 +39,37 @@ const sizes = {
             w: 40
         }
     },
-    card: {
+    xl: {
+        circle: {
+            borderWidth: 3,
+            h: 48,
+            w: 48
+        }
+    },
+    xxl: {
         circle: {
             borderWidth: 4,
             h: 60,
             w: 60
         }
     },
-    page: {
+    xxxl: {
         circle: {
             borderWidth: 5,
             h: 80,
             w: 80
         }
+    },
+    xxxxl: {
+        circle: {
+            borderWidth: 5,
+            h: 120,
+            w: 120
+        }
     }
 };
 const variants = {
-    lightBackground: {
+    light: {
         circle: {
             borderColor: 'seaBlue.80',
             borderTopColor: 'seaBlue.main'
@@ -60,13 +78,16 @@ const variants = {
             color: 'seaBlue.main'
         }
     },
-    darkBackground: {
+    dark: {
+        container: {
+            bg: 'darkBlue.main'
+        },
         circle: {
-            borderColor: 'digiGreen.30',
-            borderTopColor: 'digiGreen.78'
+            borderColor: 'hsl(139, 100%, 78%, 0.4)',
+            borderTopColor: 'digiGreen.main'
         },
         text: {
-            color: 'digiGreen.78'
+            color: 'digiGreen.main'
         }
     }
 };

package/dist/cjs/theme/components.d.ts

@@ -883,6 +883,7 @@ declare const _default: {
                         activeBorderColor: string;
                     };
                     link: {
+                        size: string;
                         color: string;
                         borderColor: string;
                         hoverColor: string;
@@ -950,6 +951,7 @@ declare const _default: {
                         activeBorderColor: string;
                     };
                     link: {
+                        size: string;
                         color: string;
                         borderColor: string;
                         hoverBg: string;
@@ -1714,6 +1716,69 @@ declare const _default: {
             };
         };
     };
+    Definition: {
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {
+            sm: {
+                container: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                dt: {
+                    fontSize: string;
+                    spaceX: number;
+                };
+                dd: {
+                    fontSize: string;
+                    spaceX: number;
+                };
+                icon: {
+                    size: string;
+                    mx: number;
+                    my: string;
+                };
+            };
+            md: {
+                container: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                dt: {
+                    fontSize: string;
+                    spaceX: number;
+                };
+                dd: {
+                    fontSize: string;
+                    spaceX: number;
+                };
+                icon: {
+                    size: string;
+                    mx: number;
+                    my: string;
+                };
+            };
+        };
+        variants: {
+            light: {
+                container: {
+                    bg: string;
+                    color: string;
+                    borderColor: string;
+                };
+            };
+            dark: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+        };
+    };
     Popover: {
         baseStyle: {};
         defaultProps: {};
@@ -1879,7 +1944,11 @@ declare const _default: {
         };
     };
     Spinner: {
-        baseStyle: {};
+        baseStyle: {
+            container: {
+                padding: number;
+            };
+        };
         defaultProps: {
             size: string;
             variant: string;
@@ -1914,14 +1983,28 @@ declare const _default: {
                     w: number;
                 };
             };
-            card: {
+            xl: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            xxl: {
                 circle: {
                     borderWidth: number;
                     h: number;
                     w: number;
                 };
             };
-            page: {
+            xxxl: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            xxxxl: {
                 circle: {
                     borderWidth: number;
                     h: number;
@@ -1930,7 +2013,7 @@ declare const _default: {
             };
         };
         variants: {
-            lightBackground: {
+            light: {
                 circle: {
                     borderColor: string;
                     borderTopColor: string;
@@ -1939,7 +2022,10 @@ declare const _default: {
                     color: string;
                 };
             };
-            darkBackground: {
+            dark: {
+                container: {
+                    bg: string;
+                };
                 circle: {
                     borderColor: string;
                     borderTopColor: string;

package/dist/cjs/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,wBA6CC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,wBA8CC"}