@veracity/vui 2.5.0-beta.1 → 2.5.0

package/dist/esm/theme/defaultTheme.d.ts

@@ -1838,6 +1838,7 @@ declare const defaultTheme: {
             baseStyle: {};
             defaultProps: {
                 size: string;
+                variant: string;
             };
             sizes: {
                 sm: {
@@ -1877,12 +1878,28 @@ declare const defaultTheme: {
                     };
                 };
             };
-            variants: {};
+            variants: {
+                primary: {
+                    bg: string;
+                    color: string;
+                };
+                green: {
+                    bg: string;
+                    color: string;
+                };
+                red: {
+                    bg: string;
+                    color: string;
+                };
+            };
         };
         ProgressCircular: {
-            baseStyle: {};
+            baseStyle: {
+                color: string;
+            };
             defaultProps: {
                 size: string;
+                variant: string;
             };
             sizes: {
                 sm: {
@@ -1910,7 +1927,26 @@ declare const defaultTheme: {
                     fontSize: number;
                 };
             };
-            variants: {};
+            variants: {
+                primary: {
+                    stroke: {
+                        main: string;
+                        progress: string;
+                    };
+                };
+                green: {
+                    stroke: {
+                        main: string;
+                        progress: string;
+                    };
+                };
+                red: {
+                    stroke: {
+                        main: string;
+                        progress: string;
+                    };
+                };
+            };
         };
         Popover: {
             baseStyle: {};
@@ -2110,9 +2146,17 @@ declare const defaultTheme: {
             };
         };
         Switch: {
-            baseStyle: {};
+            baseStyle: {
+                button: {
+                    thumb: {
+                        bg: string;
+                    };
+                    track: {
+                        ring: number;
+                    };
+                };
+            };
             defaultProps: {
-                colorScheme: string;
                 size: string;
                 variant: string;
             };
@@ -2168,14 +2212,24 @@ declare const defaultTheme: {
                 };
             };
             variants: {
-                contained: (props: import("..").Dict<any>) => {
+                primary: {
                     button: {
-                        thumb: {
+                        track: {
+                            bg: string;
+                        };
+                    };
+                };
+                green: {
+                    button: {
+                        track: {
                             bg: string;
                         };
+                    };
+                };
+                red: {
+                    button: {
                         track: {
                             bg: string;
-                            ring: number;
                         };
                     };
                 };
@@ -2533,20 +2587,39 @@ declare const defaultTheme: {
             };
         };
         Textarea: {
-            baseStyle: {};
+            baseStyle: {
+                textarea: {
+                    focusWithinRing: number;
+                    color: string;
+                };
+                input: {
+                    color: {
+                        placeholder: string;
+                    };
+                };
+            };
             defaultProps: {
-                colorScheme: string;
                 variant: string;
             };
             parts: string[];
             sizes: {};
             variants: {
-                default: (props: import("..").Dict<any>) => {
-                    container: {};
+                grey: {
+                    textarea: {
+                        borderColor: string;
+                        focusWithinRingColor: string;
+                    };
+                };
+                green: {
+                    textarea: {
+                        borderColor: string;
+                        focusWithinRingColor: string;
+                    };
+                };
+                red: {
                     textarea: {
                         borderColor: string;
-                        focusRing: number;
-                        focusRingColor: string;
+                        focusWithinRingColor: string;
                     };
                 };
             };

package/dist/esm/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/tutorial/consts.d.ts

@@ -0,0 +1,6 @@
+export declare const tutorialColors: {
+    bg: string;
+    buttonColor: string;
+    color: string;
+};
+//# sourceMappingURL=consts.d.ts.map

package/dist/esm/tutorial/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/tutorial/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;CAI1B,CAAA"}

package/dist/esm/tutorial/consts.js

@@ -0,0 +1,5 @@
+export const tutorialColors = {
+    bg: 'darkBlue.main',
+    buttonColor: 'digiGreen.main',
+    color: 'white'
+};

package/dist/esm/tutorial/tutorial.d.ts

@@ -1,4 +1,4 @@
 import { TutorialProps } from './tutorial.types';
 /** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
-export declare function Tutorial({ children, className, description, onDismiss, onFinish, readMoreLink, steps, title, id, placement }: TutorialProps): JSX.Element;
+export declare function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, id, placement, showSkipButton }: TutorialProps): JSX.Element;
 //# sourceMappingURL=tutorial.d.ts.map

package/dist/esm/tutorial/tutorial.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAI5D,+FAA+F;AAC/F,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,KAAK,EACL,EAAE,EACF,SAAmB,EACpB,EAAE,aAAa,eAuCf"}
+{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAI5D,+FAA+F;AAC/F,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,EAAE,EACF,SAAmB,EACnB,cAAc,EACf,EAAE,aAAa,eAwCf"}

package/dist/esm/tutorial/tutorial.js

@@ -4,7 +4,7 @@ import { cs } from '../utils';
 import { TutorialCard } from './tutorialCard';
 import { useTutorial } from './useTutorial';
 /** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
-export function Tutorial({ children, className, description, onDismiss, onFinish, readMoreLink, steps, title, id, placement = 'right' }) {
+export function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, id, placement = 'right', showSkipButton }) {
     const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id);
     const onClose = (e) => {
         setIsVisible(false);
@@ -14,7 +14,7 @@ export function Tutorial({ children, className, description, onDismiss, onFinish
             onFinish?.();
         saveDisplayed(e);
     };
-    return (React.createElement(Tippy, { content: React.createElement(TutorialCard, { className: cs('vui-tutorial', className), description: description, onDismiss: () => onClose('dismissed'), onFinish: () => onClose('finished'), readMoreLink: readMoreLink, steps: steps, title: title }), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
+    return (React.createElement(Tippy, { content: React.createElement(TutorialCard, { actionLabel: actionLabel, className: cs('vui-tutorial', className), onAction: onAction, onDismiss: () => onClose('dismissed'), onFinish: () => onClose('finished'), showSkipButton: showSkipButton, steps: steps, title: title }), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
             modifiers: [
                 {
                     name: 'flip',

package/dist/esm/tutorial/tutorial.types.d.ts

@@ -3,56 +3,64 @@ import { Placement } from 'tippy.js';
 export declare type TutorialDataStep = {
     /** title of step */
     title: string;
-    /** description of step */
-    description: string;
-    /** Read more link */
+    /** Content */
+    content?: string;
+    /** Link to page where they can read more */
     readMoreLink?: string;
 };
 export declare type TutorialProps = {
+    /** Label for the action button @default `Action` */
+    actionLabel?: string;
     /** Target element for the tutorial */
     children: React.ReactNode;
     /** Custom class name */
     className?: string;
     /** An id for further handling with localStorage */
     id: string;
-    /** A general tutorial description */
-    description?: string;
+    /** Invoked once the action button clicked. */
+    onAction?: () => void;
     /** Invoked once the dismiss button clicked. */
     onDismiss?: () => void;
     /** Invoked once the finish button clicked. */
     onFinish?: () => void;
     /** Popover placement */
     placement?: Placement;
-    /** Link to page where user can read more */
-    readMoreLink?: string;
     /** An array of steps */
     steps: TutorialDataStep[];
-    /** A general tutorial title */
+    /** Show the Skip button */
+    showSkipButton?: boolean;
+    /** General tutorial title */
     title: string;
+    /** Link to page where they can read more */
+    readMoreLink?: string;
 };
 export declare type TutorialCardProps = {
+    /** Label for the action button @default `Action` */
+    actionLabel?: string;
     /** Custom class name */
     className?: string;
     /** The card title */
     title: string;
     /** Steps of the card */
     steps: TutorialDataStep[];
+    /** Invoked once the action button clicked. */
+    onAction?: () => void;
     /** Callback for the dismiss button click. */
     onDismiss?: () => void;
     /** Callback for the finish button click. */
     onFinish?: () => void;
-    /** Description of feature */
-    description?: string;
     /** Link to page where they can read more */
     readMoreLink?: string;
+    /** Show the Skip button */
+    showSkipButton?: boolean;
 };
 export declare type TutorialStepProps = {
     /** If the step is active or not */
     active: boolean;
     /** Title of step */
     title: string;
-    /** Description of step */
-    description: string;
+    /** Step content */
+    content?: string;
     /** Link to page where user can read more */
     readMoreLink?: string;
 };

package/dist/esm/tutorial/tutorial.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial.types.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,gBAAgB,GAAG;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,0BAA0B;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,oBAAY,aAAa,GAAG;IAC1B,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAA;IACV,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,oBAAY,iBAAiB,GAAG;IAC9B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,oBAAY,iBAAiB,GAAG;IAC9B,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,0BAA0B;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,oBAAY,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,gBAAgB,CAAA;CACvB,CAAA;AAED,oBAAY,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}
+{"version":3,"file":"tutorial.types.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,gBAAgB,GAAG;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,oBAAY,aAAa,GAAG;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAA;IACV,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,oBAAY,iBAAiB,GAAG;IAC9B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,oBAAY,iBAAiB,GAAG;IAC9B,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,oBAAY,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,gBAAgB,CAAA;CACvB,CAAA;AAED,oBAAY,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}

package/dist/esm/tutorial/tutorialCard.d.ts

@@ -1,3 +1,3 @@
 import { TutorialCardProps } from './tutorial.types';
-export declare function TutorialCard({ className, description, title, readMoreLink, steps: propsSteps, onDismiss, onFinish }: TutorialCardProps): JSX.Element;
+export declare function TutorialCard({ actionLabel, className, title, readMoreLink, steps: propsSteps, showSkipButton, onAction, onDismiss, onFinish }: TutorialCardProps): JSX.Element;
 //# sourceMappingURL=tutorialCard.d.ts.map

package/dist/esm/tutorial/tutorialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAiInB"}
+{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAqHnB"}

package/dist/esm/tutorial/tutorialCard.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Box, Button, Card, H3, Icon, T } from '../index';
+import { Box, Button, Card, H4, Icon } from '../index';
+import { tutorialColors } from './consts';
 import { TutorialStep } from './tutorialStep';
-export function TutorialCard({ className, description, title, readMoreLink, steps: propsSteps = [], onDismiss, onFinish }) {
-    const [started, setStarted] = useState(false);
+export function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink, steps: propsSteps = [], showSkipButton, onAction, onDismiss, onFinish }) {
     const [steps, setSteps] = useState([]);
     const [activeStep, setActiveStep] = useState(0);
     useEffect(() => {
@@ -10,7 +10,7 @@ export function TutorialCard({ className, description, title, readMoreLink, step
             const s = propsSteps.map((step, key) => ({ active: false, step, key }));
             const finalStep = {
                 title: `Completed!`,
-                description: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`
+                content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`
             };
             if (readMoreLink)
                 finalStep.readMoreLink = readMoreLink;
@@ -19,19 +19,20 @@ export function TutorialCard({ className, description, title, readMoreLink, step
     }, [title, propsSteps]);
     const isStartStep = activeStep === 0;
     const isFinalStep = activeStep === propsSteps.length;
-    const decrementStep = () => setActiveStep(activeStep - 1);
-    const incrementStep = () => setActiveStep(activeStep + 1);
-    return (React.createElement(Card, { bg: "blue.100", className: className, color: "white", column: true, justifyContent: "space-between", minH: 200, w: 450 },
-        React.createElement(Box, { alignContent: "center", alignItems: "center", display: "flex", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", m: 2, mb: 1, minH: "48px", row: true, style: { WebkitFlexGrow: '0' } },
-            React.createElement(H3, null, title),
-            !isFinalStep && (React.createElement(Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryDark" }))),
-        React.createElement(Box, { column: true, flex: 5, hidden: started, mx: 2 },
-            React.createElement(T, { flexGrow: 1 }, description),
-            React.createElement(Box, { alignItems: "center", flexDirection: "row-reverse", row: true },
-                React.createElement(Button, { bg: "white", color: "prussian.80", float: "right", mb: 0, onClick: () => setStarted(true), pb: 0 }, "Let's get started!"))),
-        React.createElement(Box, { flex: 5, hidden: !started, mx: 2, row: true }, steps?.map?.(s => (React.createElement(TutorialStep, { active: s.key === activeStep, description: s.step.description, key: s.step.title, readMoreLink: s.step.readMoreLink, title: s.step.title })))),
-        React.createElement(Box, { alignItems: "center", flex: 0, flexGrow: 0, hidden: !started, justifyContent: "space-between", m: 2, mt: 0, row: true, style: { WebkitFlexGrow: '0' } },
-            React.createElement(Button, { color: "white", disabled: isStartStep, disabledBg: "blue.100", disabledBorderColor: "blue.100", disabledColor: "prussian.80", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowLeft", onClick: decrementStep, scale: 2, transition: "none", variant: "tertiaryDark", w: "80" }),
-            React.createElement(Box, { className: "vuiTutorialStepDots" }, steps?.map?.(s => (React.createElement(Icon, { color: s.key === activeStep ? 'white' : 'grey.70', key: s.key, name: "cusDotFull" })))),
-            isFinalStep ? (React.createElement(Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (React.createElement(Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "tertiaryDark", w: "80" })))));
+    return (React.createElement(Card, { bg: tutorialColors.bg, className: className, color: tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580 },
+        React.createElement(Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' } },
+            React.createElement(H4, { color: tutorialColors.color }, title),
+            !isFinalStep && React.createElement(Button, { icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" })),
+        React.createElement(Box, { flex: 5, row: true }, steps?.map?.(s => (React.createElement(TutorialStep, { active: s.key === activeStep, content: s.step.content, key: s.step.title, readMoreLink: s.step.readMoreLink, title: s.step.title })))),
+        React.createElement(Box, { alignItems: "center", justifyContent: "space-between", mt: 0 },
+            React.createElement(Box, { alignItems: "center", justifyContent: "space-between", w: "-webkit-fill-available" },
+                React.createElement(Button, { color: tutorialColors.buttonColor, disabled: isStartStep, icon: "falArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }),
+                React.createElement(Box, { className: "vuiTutorialStepDots" }, steps?.map?.(s => (React.createElement(Icon, { color: s.key === activeStep ? tutorialColors.color : 'darkBlue.30', cursor: "pointer", hoverColor: tutorialColors.buttonColor, key: s.key, name: "cusDotFull", onClick: () => setActiveStep(s.key) })))),
+                React.createElement(Button, { color: tutorialColors.buttonColor, disabled: isFinalStep, icon: "falArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })),
+            (showSkipButton || isFinalStep || !!onAction) && (React.createElement(Box, { alignItems: "center", justifyContent: "space-between" },
+                showSkipButton && !isFinalStep && (React.createElement(Button, { mr: 2, onClick: onDismiss, variant: "primaryLight" }, "Skip")),
+                isFinalStep && (React.createElement(Button, { mr: 2, onClick: onFinish, variant: "primaryLight" }, "Finish")),
+                !!onAction && (React.createElement(Button, { mr: 6, onClick: onAction, variant: "primaryLight" },
+                    actionLabel,
+                    onAction)))))));
 }

package/dist/esm/tutorial/tutorialStep.d.ts

@@ -1,3 +1,3 @@
 import { TutorialStepProps } from './tutorial.types';
-export declare const TutorialStep: ({ active, description, readMoreLink, title }: TutorialStepProps) => JSX.Element;
+export declare const TutorialStep: ({ active, content, title }: TutorialStepProps) => JSX.Element;
 //# sourceMappingURL=tutorialStep.d.ts.map

package/dist/esm/tutorial/tutorialStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialStep.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,eAAO,MAAM,YAAY,iDAAkD,iBAAiB,gBAc3F,CAAA"}
+{"version":3,"file":"tutorialStep.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,eAAO,MAAM,YAAY,+BAAgC,iBAAiB,gBAOzE,CAAA"}

package/dist/esm/tutorial/tutorialStep.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { H5, P, v } from '../index';
-export const TutorialStep = ({ active, description, readMoreLink, title }) => (React.createElement(v.div, { className: "vui-tutorialStep", hidden: !active, pb: 2 },
-    React.createElement(H5, { fontWeight: "medium", mb: 1 }, title),
-    React.createElement(P, null, description),
-    !!readMoreLink && (React.createElement(P, null,
-        React.createElement(v.a, { href: readMoreLink, textDecoration: "underline" }, readMoreLink)))));
+import { Box, H5, v } from '../index';
+import { tutorialColors } from './consts';
+export const TutorialStep = ({ active, content, title }) => (React.createElement(v.div, { className: "vui-tutorialStep", hidden: !active, pb: 2 },
+    React.createElement(H5, { color: tutorialColors.color, fontWeight: "medium", mb: 1 }, title),
+    React.createElement(Box, null, content)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.5.0-beta.1",
+  "version": "2.5.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/checkbox/checkbox.types.ts

@@ -9,7 +9,7 @@ export type CheckboxProps = SystemProps &
   ThemingProps<'Checkbox'> & {
     /** Provides value to checkbox in controlled mode. */
     checked?: boolean
-    /** @deprecated Available theme colors for this component. */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'prussian'
     /** Disables checkbox and related elements with the right styling. */
     disabled?: boolean

package/src/checkbox/checkboxGroup.types.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type CheckboxGroupProps = SystemProps &
   ThemingProps<'Checkbox'> & {
-    /** @deprecated Available theme colors for this component. */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'prussian'
     /** Passes the prop to each checkbox. */
     disabled?: boolean

package/src/core/vuiProvider/globalStyle.tsx

@@ -28,11 +28,14 @@ export default createGlobalStyle<GlobalStyleProps>`
     --x-shadow: 0 0 0 0 transparent;
   }
 
-  button {
+  button,
+  .vui-switchTrack {
     --x-ring-color: transparent;
   }
 
-  button:focus-visible, li:focus-visible {
+  button:focus-visible,
+  li:focus-visible,
+  .vui-switchTrack:focus-visible {
     --x-ring-color: var(--vui-colors-focusColor);
     outline: var(--vui-colors-focusColor) solid 3px;
     z-index: 1;

package/src/icons/baseIcons/fal/falClockRotateLeft.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M16 0C24.8125 0 32 7.1875 32 16C32 24.875 24.8125 32 16 32C10.75 32 6.0625 29.5 3.1875 25.625C2.8125 25.1875 2.9375 24.5625 3.375 24.25C3.8125 23.875 4.4375 24 4.75 24.4375C7.3125 27.8125 11.375 30 16 30C23.6875 30 30 23.75 30 16C30 8.3125 23.6875 2 16 2C10.375 2 5.5625 5.3125 3.3125 10H9C9.5 10 10 10.5 10 11C10 11.5625 9.5 12 9 12H1C0.4375 12 0 11.5625 0 11V3C0 2.5 0.4375 2 1 2C1.5 2 2 2.5 2 3V8.25C4.6875 3.375 9.9375 0 16 0ZM16 8C16.5 8 17 8.5 17 9V15.625L21.6875 20.3125C22.0625 20.6875 22.0625 21.375 21.6875 21.75C21.3125 22.125 20.625 22.125 20.25 21.75L15.25 16.75C15.0625 16.5625 14.9375 16.3125 14.9375 16V9C14.9375 8.5 15.4375 8 15.9375 8H16Z'],
+  name: 'falClockRotateLeft'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -174,6 +174,7 @@ export { default as falChevronLeft } from './fal/falChevronLeft'
 export { default as falChevronRight } from './fal/falChevronRight'
 export { default as falChevronUp } from './fal/falChevronUp'
 export { default as falCircle } from './fal/falCircle'
+export { default as falClockRotateLeft } from './fal/falClockRotateLeft'
 export { default as falCloud } from './fal/falCloud'
 export { default as falCloudShowersHeavy } from './fal/falCloudShowersHeavy'
 export { default as falCloudSnow } from './fal/falCloudSnow'

package/src/icons/baseIcons/types.ts

@@ -175,6 +175,7 @@ export type BaseIcon =
   | 'falChevronRight'
   | 'falChevronUp'
   | 'falCircle'
+  | 'falClockRotateLeft'
   | 'falCloud'
   | 'falCloudShowersHeavy'
   | 'falCloudSnow'

package/src/input/inputInput.tsx

@@ -16,13 +16,8 @@ export const InputInputBase = styled.input`
   outline: none;
   padding: 0 1;
 
-  &::placeholder {
-    color: grey.60;
-  }
-
   &[aria-disabled='true'],
   &[aria-disabled='true']::placeholder {
-    color: disabled.color;
     cursor: not-allowed;
   }
 `

package/src/panel/theme.ts

@@ -12,7 +12,7 @@ const variants = {
   },
   outlined: {
     border: 1,
-    borderColor: 'grey.40'
+    borderColor: 'sandstone.main'
   }
 }
 

package/src/progress/progress.tsx

@@ -26,8 +26,8 @@ export const Progress = vui<'div', ProgressProps>((props, ref) => {
     setWidth(w > maxValue ? maxValue : w)
   }, [value])
 
-  const bg = rest.bg || 'darkBlue.95'
-  const color = rest.color || 'darkBlue.main'
+  const bg = rest.bg || styles.bg
+  const color = rest.color || styles.color
 
   return (
     <ProgressBase

package/src/progress/theme.ts

@@ -1,7 +1,8 @@
 const baseStyle = {}
 
 const defaultProps = {
-  size: 'md'
+  size: 'md',
+  variant: 'primary'
 }
 
 const sizes = {
@@ -43,7 +44,20 @@ const sizes = {
   }
 }
 
-const variants = {}
+const variants = {
+  primary: {
+    bg: 'darkBlue.95',
+    color: 'darkBlue.main'
+  },
+  green: {
+    bg: 'landGreen.95',
+    color: 'landGreen.main'
+  },
+  red: {
+    bg: 'energyRed.95',
+    color: 'energyRed.main'
+  }
+}
 
 export default {
   baseStyle,

package/src/progressCircular/progressCircular.tsx

@@ -12,13 +12,11 @@ export const ProgressCircularBase = styled.divBox`
   position: relative;
   width: 100%;
 `
-const Circle = styled.circle`
+const MainCircle = styled.circle`
   fill: transparent;
-  stroke: hsl(223, 67%, 95%);
 `
 
-const ProgressCircle = styled(Circle)`
-  stroke: hsl(223, 67%, 18%);
+const ProgressCircle = styled(MainCircle)`
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
   transition: stroke-dashoffset 0.5s ease-out;
@@ -57,22 +55,31 @@ export const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) =
         width={styles.width}
         xmlns="http://www.w3.org/2000/svg"
       >
-        <Circle cx="50" cy="50" r={radius} strokeWidth={styles.strokeWidth} />
+        <MainCircle cx="50" cy="50" r={radius} stroke={styles.stroke.main} strokeWidth={styles.strokeWidth} />
         <ProgressCircle
           cx="50"
           cy="50"
           r={radius}
+          stroke={styles.stroke.progress}
           strokeDasharray={`${angle} ${angle}`}
           strokeDashoffset={offset}
           strokeWidth={styles.strokeWidth}
         />
       </svg>
       <Box {...(absCenterStyles as BoxProps)} top={styles.top}>
-        {children ? children : showPercentage ? <T fontSize={styles.fontSize}>{progress}%</T> : null}
+        {children ? (
+          children
+        ) : showPercentage ? (
+          <T color={styles.color} fontSize={styles.fontSize}>
+            {progress}%
+          </T>
+        ) : null}
       </Box>
       {!!label && (
         <Box {...(absCenterStyles as BoxProps)} bottom={labelBottom}>
-          <T fontSize={styles.fontSize}>{label}</T>
+          <T color={styles.color} fontSize={styles.fontSize}>
+            {label}
+          </T>
         </Box>
       )}
     </ProgressCircularBase>