@veracity/vui 2.5.0-beta.0 → 2.5.0

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.0",
+  "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.tsx

@@ -5,6 +5,7 @@ import Icon from '../icon'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
 import { CheckboxProps, CheckboxStyleProps } from './checkbox.types'
+import { checkboxColors } from './consts'
 import { useCheckboxGroupContext } from './context'
 
 const CheckboxControl = styled.spanBox`
@@ -39,11 +40,11 @@ export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
   }
 
   &[aria-disabled='true'] {
-    color: disabled.color;
+    color: ${checkboxColors.disabled};
     cursor: not-allowed;
 
     .vui-checkboxControl {
-      color: disabled.color;
+      color: ${checkboxColors.disabled};
     }
   }
 `
@@ -80,11 +81,10 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
   const styles = useStyleConfig('Checkbox', mergedProps)
   const { color: controlColor, hoverColor, ...controlStyles } = styles.control
 
-  const isFilled = isChecked || isIndeterminate
   const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
   const controlMr = children || label ? 1 : 0
-  const color = isFilled ? controlColor : 'grey.60'
-  const controlHoverColor = isFilled ? hoverColor : 'grey.90'
+  const color = controlColor ? controlColor : checkboxColors.main
+  const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover
 
   useEffect(() => {
     checked !== undefined && setIsChecked(checked)

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
-    /** Available theme colors for this component. @default blue */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'prussian'
     /** Disables checkbox and related elements with the right styling. */
     disabled?: boolean

package/src/checkbox/checkboxGroup.tsx

@@ -15,24 +15,11 @@ export const CheckboxGroupBase = styled.divBox`
  * Exposes some props to the children via context.
  */
 export const CheckboxGroup = vui<'div', CheckboxGroupProps>((props, ref) => {
-  const {
-    className,
-    colorScheme,
-    defaultValue,
-    disabled,
-    isRow,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    size,
-    variant,
-    ...rest
-  } = props
+  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, variant, ...rest } = props
 
   const context = useMemo(
-    () => filterUndefined({ colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),
-    [colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant]
+    () => filterUndefined({ defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),
+    [defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant]
   )
 
   const aliasedProps = filterUndefined({

package/src/checkbox/checkboxGroup.types.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type CheckboxGroupProps = SystemProps &
   ThemingProps<'Checkbox'> & {
-    /** 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/checkbox/consts.ts

@@ -0,0 +1,5 @@
+export const checkboxColors = {
+  main: 'seaBlue.main',
+  hover: 'seaBlue.40',
+  disabled: 'sandstone.main'
+}

package/src/checkbox/theme.ts

@@ -1,28 +1,14 @@
-import { Dict } from '../utils'
+import { checkboxColors } from './consts'
 
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const control = {
-    color: `${c}.80`,
-    hoverColor: `${c}.90`
-  }
-
-  if (c === 'prussian') {
-    control.hoverColor = 'prussian.70'
-  }
-
-  return {
-    control
+const baseStyle = {
+  control: {
+    color: checkboxColors.main,
+    hoverColor: checkboxColors.hover
   }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
-  size: 'md',
-  variant: 'default'
+  size: 'md'
 }
 
 const parts = ['container', 'control', 'label']
@@ -57,9 +43,7 @@ const sizes = {
   }
 }
 
-const variants = {
-  default: variantDefault
-}
+const variants = {}
 
 export default {
   baseStyle,

package/src/core/consts.ts

@@ -1,6 +1,7 @@
 export const cdnUrl = 'https://cdn.veracity.com'
 export const cdnStagUrl = 'https://cdnstag.veracity.com'
 export const cdnTestUrl = 'https://cdntest.veracity.com'
+export const cdnFontsPath = '/common/fonts'
 
 export const cdnUrls = {
   Prod: cdnUrl,

package/src/core/vuiProvider/fontFaces.ts

@@ -1,27 +1,68 @@
-import { cdnUrl } from '../'
+import { cdnFontsPath, cdnUrl } from '../'
+
+const baseUrl = cdnUrl + cdnFontsPath
 
 export default `
 	@font-face {
 		font-family: 'Avenir Next';
-		src: url('${cdnUrl}/common/fonts/avenir-regular-lat-ext.woff');
+		src: url('${baseUrl}/avenir-regular-lat-ext.woff');
 		font-weight: 400;
 	}
 
 	@font-face {
 		font-family: 'Avenir Next';
-		src: url('${cdnUrl}/common/fonts/avenir-medium-lat-ext.woff');
+		src: url('${baseUrl}/avenir-medium-lat-ext.woff');
 		font-weight: 500;
 	}
 
 	@font-face {
 		font-family: 'Avenir Next';
-		src: url('${cdnUrl}/common/fonts/avenir-demi-lat-ext.woff');
+		src: url('${baseUrl}/avenir-demi-lat-ext.woff');
 		font-weight: 600;
 	}
 
 	@font-face {
 		font-family: 'Avenir Next';
-		src: url('${cdnUrl}/common/fonts/avenir-bold-lat-ext.woff');
+		src: url('${baseUrl}/avenir-bold-lat-ext.woff');
+		font-weight: 700;
+	}
+
+	@font-face {
+		font-family: 'DNV Display Light';
+		src: url('${baseUrl}/dnv-display-light.woff');
 		font-weight: 700;
 	}
+
+	@font-face {
+		font-family: 'DNV Display';
+		src: url('${baseUrl}/dnv-display-light.woff');
+		font-weight: 200;
+		font-style: normal;
+	}
+
+	@font-face {
+		font-family: 'DNV Display';
+		src: url('${baseUrl}/dnv-display-regular.woff');
+		font-weight: bold;
+	}
+
+	@font-face {
+		font-family: 'DNV Display';
+		src: url('${baseUrl}/dnv-display-regular.woff');
+		font-weight: 400;
+		font-style: normal;
+	}
+
+	@font-face {
+		font-family: 'DNV Display Medium';
+		src: url('${baseUrl}/dnv-display-medium.woff');
+		font-weight: bold;
+	}
+
+	@font-face {
+		font-family: 'DNV Display';
+		src: url('${baseUrl}/dnv-display-medium.woff');
+		font-weight: 500;
+		font-style: normal;
+	}
 `

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/index.ts

@@ -34,6 +34,7 @@ export * from './panel'
 export * from './popover'
 export * from './portal'
 export * from './progress'
+export * from './progressCircular'
 export * from './radio'
 export * from './select'
 export * from './sidemenu'

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

@@ -11,19 +11,23 @@ export const ProgressBase = styled.divBox`
 `
 
 const minPercentageDisplay = 3
+const maxValue = 100
 
-/** Indicates a process progress. */
+/** [Beta] Indicates a process progress. */
 export const Progress = vui<'div', ProgressProps>((props, ref) => {
-  const { className, size = 'md', value = 0, max = 100, showPercentage, ...rest } = props
+  const { className, value = 0, showPercentage, ...rest } = props
 
   const [width, setWidth] = useState(0)
 
   const styles = useStyleConfig('Progress', props)
 
   useEffect(() => {
-    const w = !value ? 0 : Math.ceil((value / max) * 100)
-    setWidth(w > 100 ? 100 : w)
-  }, [value, max])
+    const w = !value ? 0 : Math.ceil(value)
+    setWidth(w > maxValue ? maxValue : w)
+  }, [value])
+
+  const bg = rest.bg || styles.bg
+  const color = rest.color || styles.color
 
   return (
     <ProgressBase
@@ -31,12 +35,12 @@ export const Progress = vui<'div', ProgressProps>((props, ref) => {
       ref={ref}
       {...styles.container}
       {...rest}
-      bg="grey.10"
+      bg={bg}
       borderRadius="sm"
       h={1}
     >
       <Box
-        bg="seaBlue.main"
+        bg={color}
         borderRadius="sm"
         position="relative"
         textAlign="right"

package/src/progress/progress.types.ts

@@ -4,6 +4,5 @@ import { ThemingProps } from '../theme'
 export type ProgressProps = SystemProps &
   ThemingProps<'Progress'> & {
     value?: number
-    max?: number
     showPercentage?: boolean
   }

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/consts.ts

@@ -0,0 +1,13 @@
+export const absCenterStyles = {
+  position: 'absolute',
+  w: '100%',
+  left: 0,
+  right: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 100
+}
+
+export const labelBottom = -16
+
+export const maxValue = 100

package/src/progressCircular/index.ts

@@ -0,0 +1,3 @@
+export * from './progressCircular'
+export { default } from './progressCircular'
+export * from './progressCircular.types'