@veracity/vui 1.8.0-redesign.0 → 1.8.1

package/dist/cjs/button/theme.js

@@ -1,13 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+function variantOutlined(props) {
+    var _a;
+    const { colorScheme: c } = props;
+    const container = Object.assign(Object.assign({}, (_a = variantText(props)) === null || _a === void 0 ? void 0 : _a.container), { borderColor: `${c}.80`, hoverBorderColor: `${c}.80`, focusRing: 3 });
+    return { container };
+}
+function variantSolid(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.90`,
+        hoverBorderColor: `${c}.90`,
+        activeBg: `${c}.100`,
+        bg: `${c}.80`,
+        borderColor: `${c}.80`,
+        borderWidth: 1,
+        color: 'white'
+    };
+    // Special cases
+    if (c === 'prussian') {
+        container.activeBg = 'prussian.50';
+        container.hoverBg = 'prussian.60';
+        container.hoverBorderColor = 'prussian.60';
+    }
+    return { container };
+}
+function variantText(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.20`,
+        hoverBorderColor: `${c}.20`,
+        activeBg: `${c}.30`,
+        bg: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: 1,
+        color: `${c}.80`,
+        focusRing: 2
+    };
+    // Special cases
+    if (c === 'prussian') {
+        container.activeBg = 'blue.30';
+        container.hoverBg = 'blue.20';
+        container.hoverBorderColor = 'blue.20';
+    }
+    return { container };
+}
 const baseStyle = {};
 const defaultProps = {
+    colorScheme: 'prussian',
     size: 'md',
-    variant: 'primaryDark'
+    variant: 'solid'
 };
 const parts = ['container', 'icon', 'text'];
 const sizes = {
-    sm: {
+    xs: {
         container: {
             fontSize: 'sm',
             h: 24,
@@ -19,7 +65,7 @@ const sizes = {
         },
         text: {}
     },
-    md: {
+    sm: {
         container: {
             fontSize: 'sm',
             h: 32,
@@ -31,7 +77,7 @@ const sizes = {
         },
         text: {}
     },
-    lg: {
+    md: {
         container: {
             fontSize: 'md',
             h: 40,
@@ -43,7 +89,7 @@ const sizes = {
         },
         text: {}
     },
-    xl: {
+    lg: {
         container: {
             fontSize: 'lg',
             h: 48,
@@ -57,136 +103,9 @@ const sizes = {
     }
 };
 const variants = {
-    primaryDark: {
-        container: {
-            bg: 'buttonTypePrimaryDefaultBackgroundColorDark',
-            borderColor: 'buttonTypePrimaryDefaultBorderColorDark',
-            color: 'buttonTypePrimaryDefaultTextColorDark',
-            hoverBg: 'buttonTypePrimaryHoverBackgroundColorDark',
-            hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
-            hoverColor: 'buttonTypePrimaryHoverTextColorDark',
-            activeBg: 'buttonTypePrimaryActiveBackgroundColorDark',
-            activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
-            activeColor: 'buttonTypePrimaryActiveTextColorDark'
-        }
-    },
-    secondaryDark: {
-        container: {
-            bg: 'buttonTypeSecondaryDefaultBackgroundColorDark',
-            borderColor: 'buttonTypeSecondaryDefaultBorderColorDark',
-            color: 'buttonTypeSecondaryDefaultTextColorDark',
-            // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
-            // hover will change from 90 to 85
-            hoverBg: 'buttonTypeSecondaryHoverBackgroundColorDark',
-            hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorDark',
-            hoverColor: 'buttonTypeSecondaryHoverTextColorDark',
-            // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
-            // active will change from 95% to 90%
-            activeBg: 'buttonTypeSecondaryActiveBackgroundColorDark',
-            activeBorderColor: 'buttonTypeSecondaryActiveBorderColorDark',
-            activeColor: 'buttonTypeSecondaryActiveTextColorDark'
-        }
-    },
-    tertiaryDark: {
-        container: {
-            bg: 'buttonTypeTertiaryDefaultBackgroundColorDark',
-            borderColor: 'buttonTypeTertiaryDefaultBorderColorDark',
-            color: 'buttonTypeTertiaryDefaultTextColorDark',
-            hoverBg: 'buttonTypeTertiaryHoverBackgroundColorDark',
-            hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorDark',
-            hoverColor: 'buttonTypeTertiaryHoverTextColorDark',
-            activeBg: 'buttonTypeTertiaryActiveBackgroundColorDark',
-            activeBorderColor: 'buttonTypeTertiaryActiveBorderColorDark',
-            activeColor: 'buttonTypeTertiaryActiveTextColorDark'
-        }
-    },
-    solidGreen: {
-        container: {
-            bg: 'landGreen.35',
-            borderColor: 'landGreen.35',
-            color: 'white',
-            disabledBg: 'landGreen.70',
-            disabledBorderColor: 'landGreen.70',
-            disabledColor: 'white',
-            hoverBg: 'landGreen.25',
-            hoverBorderColor: 'landGreen.25',
-            focusBg: 'landGreen.35',
-            activeBg: 'landGreen.41',
-            activeBorderColor: 'landGreen.41'
-        }
-    },
-    solidRed: {
-        container: {
-            bg: 'energyRed.45',
-            borderColor: 'energyRed.45',
-            color: 'white',
-            disabledBg: 'energyRed.80',
-            disabledBorderColor: 'energyRed.80',
-            disabledColor: 'white',
-            // proper order is important next: hover >  focus >  active
-            hoverBg: 'energyRed.35',
-            hoverBorderColor: 'energyRed.35',
-            focusBg: 'energyRed.45',
-            activeBg: 'energyRed.50',
-            activeBorderColor: 'energyRed.50'
-        }
-    },
-    // subtleBlue is an internal variant, used in notification; based on primaryDark
-    subtleBlue: {
-        container: {
-            bg: 'transparent',
-            borderColor: 'transparent',
-            color: 'seaBlue.28',
-            disabledBg: 'white',
-            disabledBorderColor: 'darkBlue.75',
-            disabledColor: 'darkBlue.75',
-            // proper order is important next: hover >  focus >  active
-            hoverBg: 'skyBlue.90',
-            hoverBorderColor: 'skyBlue.90',
-            focusBg: 'transparent',
-            activeBg: 'skyBlue.85',
-            activeBorderColor: 'skyBlue.85'
-        }
-    },
-    // subtleRed is an internal variant, used in notification; based on primaryDark
-    subtleRed: {
-        container: {
-            bg: 'transparent',
-            borderColor: 'transparent',
-            // proper order is important next: hover >  focus >  active
-            hoverBg: 'energyRed.90',
-            hoverBorderColor: 'energyRed.90',
-            focusBg: 'transparent',
-            activeBg: 'energyRed.85',
-            color: 'energyRed.45'
-        }
-    },
-    // subtleYellow is an internal variant, used in notification; based on primaryDark
-    subtleYellow: {
-        container: {
-            bg: 'transparent',
-            borderColor: 'transparent',
-            // proper order is important next: hover >  focus >  active
-            hoverBg: 'sunflower.70',
-            hoverBorderColor: 'sunflower.70',
-            focusBg: 'transparent',
-            activeBg: 'sunflower.65',
-            color: 'sunflower.15'
-        }
-    },
-    // subtleGreen is an internal variant, used in notification; based on primaryDark
-    subtleGreen: {
-        container: {
-            bg: 'transparent',
-            borderColor: 'transparent',
-            // proper order is important next: hover >  focus >  active
-            hoverBg: 'landGreen.90',
-            hoverBorderColor: 'landGreen.90',
-            focusBg: 'transparent',
-            activeBg: 'landGreen.85',
-            color: 'landGreen.30'
-        }
-    }
+    outlined: variantOutlined,
+    solid: variantSolid,
+    text: variantText
 };
 exports.default = {
     baseStyle,

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

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SA2C5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDActB,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SA2C5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDAiBtB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/cjs/buttonGroup/buttonGroup.js

@@ -76,12 +76,12 @@ exports.ButtonGroupBase = core_1.styled.divBox `
   }
 
   > *:disabled {
-    border-color: disabled .border;
+    border-color: disabled.border;
   }
 
   //
   > .${utils_1.activeClassName} {
-    background-color: ${p => core_1.th.color('skyBlue.90')};
+    background-color: ${p => core_1.th.color(`${p.colorScheme}.${utils_1.activeItemShade}`)};
   }
 `;
 /**
@@ -89,9 +89,9 @@ exports.ButtonGroupBase = core_1.styled.divBox `
  * Exposes some props to the children via context.
  */
 exports.ButtonGroup = (0, core_1.vui)((props, ref) => {
-    const { className, disabled, innerBorderColor, size, variant = 'secondaryDark' } = props, rest = __rest(props, ["className", "disabled", "innerBorderColor", "size", "variant"]);
-    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ disabled, size, variant }), [disabled, size, variant]);
+    const { className, colorScheme, disabled, innerBorderColor, size, variant } = props, rest = __rest(props, ["className", "colorScheme", "disabled", "innerBorderColor", "size", "variant"]);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
     return (react_1.default.createElement(context_1.ButtonGroupProvider, { value: context },
-        react_1.default.createElement(exports.ButtonGroupBase, Object.assign({ className: (0, utils_1.cs)('vui-buttonGroup', className) }, { innerBorderColor: innerBorderColor ? innerBorderColor : (0, helpers_1.getInnerBorderColor)(props), ref }, rest))));
+        react_1.default.createElement(exports.ButtonGroupBase, Object.assign({ className: (0, utils_1.cs)('vui-buttonGroup', className) }, { colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : (0, helpers_1.getInnerBorderColor)(props), ref }, rest))));
 });
 exports.default = exports.ButtonGroup;

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

@@ -1,8 +1,9 @@
+import { ButtonColorScheme } from '../button/button.types';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export declare type ButtonGroupProps = SystemProps & ThemingProps<'ButtonGroup'> & {
-    /** Available theme colors for this component. @deprecated */
-    colorScheme?: string;
+    /** Available theme colors for this component. */
+    colorScheme?: ButtonColorScheme;
     /** Makes all wrapped buttons disabled. */
     disabled?: boolean;
     /** Border color between the buttons. */

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

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GACxC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"buttonGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GACxC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,iDAAiD;IACjD,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA"}

package/dist/cjs/buttonGroup/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAMnE"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAQnE"}

package/dist/cjs/buttonGroup/helpers.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInnerBorderColor = void 0;
 /** Returns appropriate color for the border between the buttons. */
 function getInnerBorderColor(props) {
-    const { disabled, variant } = props;
+    const { colorScheme = 'prussian', disabled, variant = 'solid' } = props;
     if (disabled)
         return 'disabled.border';
-    return `${variant}`;
+    const shade = variant === 'solid' ? '100' : '80';
+    return `${colorScheme}.${shade}`;
 }
 exports.getInnerBorderColor = getInnerBorderColor;

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

@@ -1 +1 @@
-{"version":3,"file":"buttonToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,gBAU9D,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"buttonToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,gBAY9D,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/cjs/buttonToggleGroup/buttonToggleGroup.js

@@ -12,7 +12,7 @@ const utils_1 = require("../utils");
  */
 const ButtonToggleGroup = (props) => {
     const { className, isDimmedBorder } = props;
-    return (react_1.default.createElement(buttonGroup_1.default, Object.assign({ className: (0, utils_1.cs)('vui-buttonToggleGroup', className), innerBorderColor: isDimmedBorder ? utils_1.dimmedBorderColor : '' }, props)));
+    return (react_1.default.createElement(buttonGroup_1.default, Object.assign({ className: (0, utils_1.cs)('vui-buttonToggleGroup', className), colorScheme: "blue", innerBorderColor: isDimmedBorder ? utils_1.dimmedBorderColor : '', variant: "outlined" }, props)));
 };
 exports.ButtonToggleGroup = ButtonToggleGroup;
 exports.default = exports.ButtonToggleGroup;

package/dist/cjs/checkbox/checkbox.js

@@ -45,7 +45,7 @@ const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
 const context_1 = require("./context");
 const CheckboxControl = core_1.styled.spanBox `
-  border-radius: none;
+  border-radius: sm;
   display: inline-flex;
   flex-shrink: 0;
   position: relative;

package/dist/cjs/copyToClipboard/copyToClipboard.js

@@ -29,7 +29,7 @@ const useCopyToClipboard_1 = require("./useCopyToClipboard");
  *
  */
 exports.CopyToClipboard = (0, core_1.vui)((props, ref) => {
-    const { disabled, copyText, className, size = 'sm', variant = 'tertiaryDark' } = props, rest = __rest(props, ["disabled", "copyText", "className", "size", "variant"]);
+    const { disabled, copyText, className, size = 'xs', variant = 'text' } = props, rest = __rest(props, ["disabled", "copyText", "className", "size", "variant"]);
     const { copy, isCopyDisabled } = (0, useCopyToClipboard_1.useCopyToClipboard)(copyText);
     return (react_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-copy-to-clipboard', className), disabled: disabled || isCopyDisabled, icon: "falCopy", onClick: () => copy(), ref: ref, size: size, variant: variant }, rest)));
 });

package/dist/cjs/core/media.d.ts

@@ -1,3 +1,4 @@
+import { useViewportWidth } from '@xstyled/styled-components';
 import { FC } from 'react';
 import { StyledProps } from 'styled-components';
 import { Screen } from '../theme';
@@ -5,10 +6,10 @@ import { AnyNumber, AnyString } from '../utils';
 import { ChildrenProp } from './types';
 declare type ScreenWidth = Screen | AnyNumber | AnyString;
 export declare type RenderOnScreenProps = {
-    /** Changes direction to below the breakpoint. */
-    isDown?: boolean;
     /** Breakpoint to compare viewport width against. */
-    screen?: Screen;
+    maxWidth?: Screen;
+    /** Breakpoint to compare viewport width against. */
+    minWidth?: Screen;
 };
 /** Returns CSS media string with appropriate min-width and max-width values. */
 export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
@@ -16,25 +17,17 @@ export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth
 export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
 /** Returns CSS media string with appropriate min-width value. */
 export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export declare const RenderOnDesktop: FC<RenderOnScreenProps & ChildrenProp>;
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export declare const RenderOnMobile: FC<RenderOnScreenProps & ChildrenProp>;
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
 export declare const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>;
-/** Returns true if current viewport width is between provided min and max widths. */
-export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
 /** Returns true if current viewport width is smaller than provided width. */
 export declare function useDown(width: ScreenWidth): boolean;
-/** Returns viewport width and provided screen width as a number. */
-export declare function useMedia(width: ScreenWidth): {
-    value: number;
-    viewportWidth: number | null;
-};
 /** Returns true if current viewport width is larger than or equal to provided width. */
 export declare function useUp(width: ScreenWidth): boolean;
-export {};
+/** Returns true if current viewport width is between provided min and max widths. */
+export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
+/** Return the width of the viewport. */
+export { useViewportWidth };
 //# sourceMappingURL=media.d.ts.map

package/dist/cjs/core/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD,wGAAwG;AACxG,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAA0C,CAAA;AAE7G,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAAiD,CAAA;AAEnH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAGjE,CAAA;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW;;;EAO1C;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAejE,CAAA;AAyBD,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,wCAAwC;AACxC,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/cjs/core/media.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUp = exports.useMedia = exports.useDown = exports.useBetween = exports.RenderOnScreen = exports.RenderOnMobile = exports.RenderOnDesktop = exports.mediaUp = exports.mediaDown = exports.mediaBetween = void 0;
+exports.useViewportWidth = exports.useBetween = exports.useUp = exports.useDown = exports.RenderOnScreen = exports.mediaUp = exports.mediaDown = exports.mediaBetween = void 0;
 const styled_components_1 = require("@xstyled/styled-components");
+Object.defineProperty(exports, "useViewportWidth", { enumerable: true, get: function () { return styled_components_1.useViewportWidth; } });
 const react_1 = __importDefault(require("react"));
 const theme_1 = require("./theme");
 /** Returns CSS media string with appropriate min-width and max-width values. */
@@ -18,34 +19,36 @@ exports.mediaDown = mediaDown;
 /** Returns CSS media string with appropriate min-width value. */
 const mediaUp = (width) => (props) => `@media (min-width: ${theme_1.th.screen(width)(props)})`;
 exports.mediaUp = mediaUp;
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-const RenderOnDesktop = props => react_1.default.createElement(exports.RenderOnScreen, Object.assign({}, props));
-exports.RenderOnDesktop = RenderOnDesktop;
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-const RenderOnMobile = props => react_1.default.createElement(exports.RenderOnScreen, Object.assign({ isDown: true }, props));
-exports.RenderOnMobile = RenderOnMobile;
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
-const RenderOnScreen = ({ children, isDown, screen = 'md' }) => {
-    const mediaFn = isDown ? useDown : useUp;
-    return mediaFn(screen) ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+const RenderOnScreen = ({ children, maxWidth, minWidth }) => {
+    if (minWidth && maxWidth) {
+        return (react_1.default.createElement(RenderBetween, { maxWidth: maxWidth, minWidth: minWidth }, children));
+    }
+    if (minWidth) {
+        return react_1.default.createElement(RenderOver, { width: minWidth }, children);
+    }
+    if (maxWidth) {
+        return react_1.default.createElement(RenderUnder, { width: maxWidth }, children);
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
 };
 exports.RenderOnScreen = RenderOnScreen;
-/** Returns true if current viewport width is between provided min and max widths. */
-function useBetween(minWidth, maxWidth) {
-    const isDown = useDown(maxWidth);
-    const isUp = useUp(minWidth);
-    return isDown && isUp;
-}
-exports.useBetween = useBetween;
-/** Returns true if current viewport width is smaller than provided width. */
-function useDown(width) {
-    const { value, viewportWidth } = useMedia(width);
-    return viewportWidth !== null && value !== null && viewportWidth < value;
-}
-exports.useDown = useDown;
+const RenderBetween = ({ children, maxWidth, minWidth }) => {
+    const isBetween = useBetween(minWidth, maxWidth);
+    return isBetween ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+};
+const RenderOver = ({ children, width }) => {
+    const isOver = useUp(width);
+    return isOver ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+};
+const RenderUnder = ({ children, width }) => {
+    const isUnder = useDown(width);
+    return isUnder ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+};
+/** /!\ No need to export it, keep it internal */
 /** Returns viewport width and provided screen width as a number. */
 function useMedia(width) {
     const theme = (0, theme_1.useTheme)();
@@ -54,10 +57,22 @@ function useMedia(width) {
     const value = Number(valueString.replace('px', ''));
     return { value, viewportWidth };
 }
-exports.useMedia = useMedia;
+/** Returns true if current viewport width is smaller than provided width. */
+function useDown(width) {
+    const { value, viewportWidth } = useMedia(width);
+    return viewportWidth !== null && value !== null && viewportWidth < value;
+}
+exports.useDown = useDown;
 /** Returns true if current viewport width is larger than or equal to provided width. */
 function useUp(width) {
     const { value, viewportWidth } = useMedia(width);
     return viewportWidth !== null && value !== null && viewportWidth >= value;
 }
 exports.useUp = useUp;
+/** Returns true if current viewport width is between provided min and max widths. */
+function useBetween(minWidth, maxWidth) {
+    const isDown = useDown(maxWidth);
+    const isUp = useUp(minWidth);
+    return isDown && isUp;
+}
+exports.useBetween = useBetween;

package/dist/cjs/core/vuiProvider/globalStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globalStyle.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/globalStyle.tsx"],"names":[],"mappings":"AAMA,aAAK,gBAAgB,GAAG;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;;AACH,wBA2EC"}
+{"version":3,"file":"globalStyle.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/globalStyle.tsx"],"names":[],"mappings":"AAMA,aAAK,gBAAgB,GAAG;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;;AACH,wBA0DC"}

package/dist/cjs/core/vuiProvider/globalStyle.js

@@ -27,79 +27,62 @@ const fontFaces_1 = __importDefault(require("./fontFaces"));
  * - CSS variables for each theme value
  */
 exports.default = (0, styled_1.createGlobalStyle) `
-  ${fontFaces_1.default}
-  :root {
-    ${generateCSSVariables}
-  }
+	${fontFaces_1.default}
 
-  * {
-    --x-ring-color: var(--vui-colors-focusColor);
-    // Fixes a box-shadow issue between some parent and child components
-    --x-shadow: 0 0 0 0 transparent;
-  }
+	:root {
+		${generateCSSVariables}
+	}
 
-  button {
-    --x-ring-color: transparent;
-  }
+	* {
+		--x-ring-color: var(--vui-colors-blue-50);
+		// Fixes a box-shadow issue between some parent and child components
+		--x-shadow: 0 0 0 0 transparent;
+	}
 
-  button:focus-visible, li:focus-visible {
-    --x-ring-color: var(--vui-colors-focusColor);
-    outline: var(--vui-colors-focusColor) solid 3px;
-    z-index: 1;
-  }
-
-  ${p => p.globalStyle &&
+	${p => p.globalStyle &&
     (0, styled_1.css) `
       body {
-        color: sandstone 0.1;
+        color: prussian.80;
         font-family: avenir;
         font-size: md;
       }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5 {
-        color: darkBlue 0.18;
-      }
     `}
 
-  @keyframes vui-bounce {
-  ${animations_1.bounce}
-  }
+	@keyframes vui-bounce {
+		${animations_1.bounce}
+	}
 
-  @keyframes vui-fadeDown {
-  ${animations_1.fadeDown}
-  }
+	@keyframes vui-fadeDown {
+		${animations_1.fadeDown}
+	}
 
-  @keyframes vui-fadeIn {
-  ${animations_1.fadeIn}
-  }
+	@keyframes vui-fadeIn {
+		${animations_1.fadeIn}
+	}
 
-  @keyframes vui-fadeLeft {
-  ${animations_1.fadeLeft}
-  }
+	@keyframes vui-fadeLeft {
+		${animations_1.fadeLeft}
+	}
 
-  @keyframes vui-fadeOut {
-  ${animations_1.fadeOut}
-  }
+	@keyframes vui-fadeOut {
+		${animations_1.fadeOut}
+	}
 
-  @keyframes vui-fadeRight {
-  ${animations_1.fadeRight}
-  }
+	@keyframes vui-fadeRight {
+		${animations_1.fadeRight}
+	}
 
-  @keyframes vui-fadeUp {
-  ${animations_1.fadeUp}
-  }
+	@keyframes vui-fadeUp {
+		${animations_1.fadeUp}
+	}
 
-  @keyframes vui-pulse {
-  ${animations_1.pulse}
-  }
+	@keyframes vui-pulse {
+		${animations_1.pulse}
+	}
 
-  @keyframes vui-spin {
-  ${animations_1.spin}
-  }
+	@keyframes vui-spin {
+		${animations_1.spin}
+	}
 `;
 /** Recursively maps through all theme styles and generates a set of CSS properties. */
 function generateCSSVariables() {

package/dist/cjs/footer/footerTrademark.js

@@ -30,7 +30,7 @@ exports.FooterTrademark = (0, core_1.vui)((props, ref) => {
     const styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
     return (react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-footerTrademark', className), ref: ref, w: "100%", wrap: true }, styles.trademark, rest),
         react_1.default.createElement(footerColumn_1.default, { centerV: true, flex: { xs: '0 0 100%', md: '0 0 25%' } },
-            react_1.default.createElement(link_1.default, { fontWeight: "demi", href: linkedIn !== null && linkedIn !== void 0 ? linkedIn : defaultLinkedInUrl, iconLeft: react_1.default.createElement(link_1.default.Icon, { mr: 1, name: "fabLinkedin", size: "sm" }), isExternal: true, variant: "white" }, "Follow us")),
+            react_1.default.createElement(link_1.default, { colorScheme: "white", fontWeight: "demi", href: linkedIn !== null && linkedIn !== void 0 ? linkedIn : defaultLinkedInUrl, iconLeft: react_1.default.createElement(link_1.default.Icon, { mr: 1, name: "fabLinkedin", size: "sm" }), isExternal: true }, "Follow us")),
         react_1.default.createElement(footerColumn_1.default, { centerV: true, flex: { xs: '0 0 100%', md: '0 0 75%' } },
             react_1.default.createElement(t_1.default, { size: "xs" },
                 react_1.default.createElement(t_1.default, { size: "xs", weight: "demi" }, "Veracity by DNV"),

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyD,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAED,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA0CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAiBD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAED,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA0CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAiBD,eAAe,MAAM,CAAA"}

package/dist/cjs/header/header.js

@@ -74,8 +74,8 @@ exports.Header = (0, core_1.vui)((props, ref) => {
     (0, utils_1.useClickOutside)([mobileContentRef, mobileToggleRef], () => {
         setIsMobileOpen(false);
     });
-    const isDesktop = (0, core_1.useUp)('md');
-    const isMobile = (0, core_1.useDown)('md');
+    const isDesktop = (0, core_1.useUp)('lg');
+    const isMobile = !isDesktop;
     const context = {
         headerHeight,
         isDesktop,