@veracity/vui 1.8.0-redesign.0 → 1.8.1

package/dist/esm/button/buttons.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { vui } from '../core';
 import Button from './button';
-export const AppButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "primaryDark", ...props })));
-export const BackButton = vui((props, ref) => (React.createElement(IconButton, { icon: "falArrowLeft", ref: ref, variant: "tertiaryDark", ...props })));
-export const CloseButton = vui((props, ref) => (React.createElement(IconButton, { icon: "falTimes", ref: ref, variant: "tertiaryDark", ...props })));
-export const CTAButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "solidGreen", ...props })));
-export const DangerButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "solidRed", ...props })));
-export const IconButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "tertiaryDark", ...props })));
-export const LineButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "secondaryDark", ...props })));
-export const TextButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "tertiaryDark", ...props })));
+export const AppButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "solid", ...props })));
+export const BackButton = vui((props, ref) => (React.createElement(IconButton, { colorScheme: "blue", icon: "falArrowLeft", ref: ref, variant: "text", ...props })));
+export const CloseButton = vui((props, ref) => (React.createElement(IconButton, { colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text", ...props })));
+export const CTAButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "green", ref: ref, variant: "solid", ...props })));
+export const DangerButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "red", ref: ref, variant: "solid", ...props })));
+export const IconButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "text", ...props })));
+export const LineButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "outlined", ...props })));
+export const TextButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "text", ...props })));

package/dist/esm/button/consts.js

@@ -1,13 +1,13 @@
 export const buttonStateMapping = {
     error: {
-        variant: 'solidRed',
+        colorScheme: 'red',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falTimesCircle'
         }
     },
     loading: {
-        variant: 'primaryDark',
+        colorScheme: 'blue',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
             name: 'fadSpinnerThird',
@@ -15,7 +15,7 @@ export const buttonStateMapping = {
         }
     },
     success: {
-        variant: 'solidGreen',
+        colorScheme: 'green',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falCheckCircle'

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

@@ -1,12 +1,49 @@
+import { Dict } from '../utils';
+declare function variantOutlined(props: Dict): {
+    container: {
+        borderColor: string;
+        hoverBorderColor: string;
+        focusRing: number;
+        hoverBg: string;
+        activeBg: string;
+        bg: string;
+        borderWidth: number;
+        color: string;
+    };
+};
+declare function variantSolid(props: Dict): {
+    container: {
+        hoverBg: string;
+        hoverBorderColor: string;
+        activeBg: string;
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+        color: string;
+    };
+};
+declare function variantText(props: Dict): {
+    container: {
+        hoverBg: string;
+        hoverBorderColor: string;
+        activeBg: string;
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+        color: string;
+        focusRing: number;
+    };
+};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
+        colorScheme: string;
         size: string;
         variant: string;
     };
     parts: string[];
     sizes: {
-        sm: {
+        xs: {
             container: {
                 fontSize: string;
                 h: number;
@@ -18,7 +55,7 @@ declare const _default: {
             };
             text: {};
         };
-        md: {
+        sm: {
             container: {
                 fontSize: string;
                 h: number;
@@ -30,7 +67,7 @@ declare const _default: {
             };
             text: {};
         };
-        lg: {
+        md: {
             container: {
                 fontSize: string;
                 h: number;
@@ -42,7 +79,7 @@ declare const _default: {
             };
             text: {};
         };
-        xl: {
+        lg: {
             container: {
                 fontSize: string;
                 h: number;
@@ -56,123 +93,9 @@ declare const _default: {
         };
     };
     variants: {
-        primaryDark: {
-            container: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                hoverColor: string;
-                activeBg: string;
-                activeBorderColor: string;
-                activeColor: string;
-            };
-        };
-        secondaryDark: {
-            container: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                hoverColor: string;
-                activeBg: string;
-                activeBorderColor: string;
-                activeColor: string;
-            };
-        };
-        tertiaryDark: {
-            container: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                hoverColor: string;
-                activeBg: string;
-                activeBorderColor: string;
-                activeColor: string;
-            };
-        };
-        solidGreen: {
-            container: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                disabledBg: string;
-                disabledBorderColor: string;
-                disabledColor: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                focusBg: string;
-                activeBg: string;
-                activeBorderColor: string;
-            };
-        };
-        solidRed: {
-            container: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                disabledBg: string;
-                disabledBorderColor: string;
-                disabledColor: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                focusBg: string;
-                activeBg: string;
-                activeBorderColor: string;
-            };
-        };
-        subtleBlue: {
-            container: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                disabledBg: string;
-                disabledBorderColor: string;
-                disabledColor: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                focusBg: string;
-                activeBg: string;
-                activeBorderColor: string;
-            };
-        };
-        subtleRed: {
-            container: {
-                bg: string;
-                borderColor: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                focusBg: string;
-                activeBg: string;
-                color: string;
-            };
-        };
-        subtleYellow: {
-            container: {
-                bg: string;
-                borderColor: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                focusBg: string;
-                activeBg: string;
-                color: string;
-            };
-        };
-        subtleGreen: {
-            container: {
-                bg: string;
-                borderColor: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                focusBg: string;
-                activeBg: string;
-                color: string;
-            };
-        };
+        outlined: typeof variantOutlined;
+        solid: typeof variantSolid;
+        text: typeof variantText;
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyMA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,eAAe,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;EAWnC;AAED,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;EAqBhC;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;EAsB/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqED,wBAMC"}

package/dist/esm/button/theme.js

@@ -1,11 +1,61 @@
+function variantOutlined(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        ...variantText(props)?.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,
@@ -17,7 +67,7 @@ const sizes = {
         },
         text: {}
     },
-    md: {
+    sm: {
         container: {
             fontSize: 'sm',
             h: 32,
@@ -29,7 +79,7 @@ const sizes = {
         },
         text: {}
     },
-    lg: {
+    md: {
         container: {
             fontSize: 'md',
             h: 40,
@@ -41,7 +91,7 @@ const sizes = {
         },
         text: {}
     },
-    xl: {
+    lg: {
         container: {
             fontSize: 'lg',
             h: 48,
@@ -55,136 +105,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
 };
 export default {
     baseStyle,

package/dist/esm/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/esm/buttonGroup/buttonGroup.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { styled, th, vui } from '../core';
-import { activeClassName, cs, filterUndefined } from '../utils';
+import { activeClassName, activeItemShade, cs, filterUndefined } from '../utils';
 import { ButtonGroupProvider } from './context';
 import { getInnerBorderColor } from './helpers';
 export const ButtonGroupBase = styled.divBox `
@@ -39,12 +39,12 @@ export const ButtonGroupBase = styled.divBox `
   }
 
   > *:disabled {
-    border-color: disabled .border;
+    border-color: disabled.border;
   }
 
   //
   > .${activeClassName} {
-    background-color: ${p => th.color('skyBlue.90')};
+    background-color: ${p => th.color(`${p.colorScheme}.${activeItemShade}`)};
   }
 `;
 /**
@@ -52,9 +52,9 @@ export const ButtonGroupBase = styled.divBox `
  * Exposes some props to the children via context.
  */
 export const ButtonGroup = vui((props, ref) => {
-    const { className, disabled, innerBorderColor, size, variant = 'secondaryDark', ...rest } = props;
-    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
+    const { className, colorScheme, disabled, innerBorderColor, size, variant, ...rest } = props;
+    const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
     return (React.createElement(ButtonGroupProvider, { value: context },
-        React.createElement(ButtonGroupBase, { className: cs('vui-buttonGroup', className), ...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }, ...rest })));
+        React.createElement(ButtonGroupBase, { className: cs('vui-buttonGroup', className), ...{ colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }, ...rest })));
 });
 export default ButtonGroup;

package/dist/esm/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/esm/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/esm/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/esm/buttonGroup/helpers.js

@@ -1,7 +1,8 @@
 /** Returns appropriate color for the border between the buttons. */
 export 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}`;
 }

package/dist/esm/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/esm/buttonToggleGroup/buttonToggleGroup.js

@@ -6,6 +6,6 @@ import { cs, dimmedBorderColor } from '../utils';
  */
 export const ButtonToggleGroup = (props) => {
     const { className, isDimmedBorder } = props;
-    return (React.createElement(ButtonGroup, { className: cs('vui-buttonToggleGroup', className), innerBorderColor: isDimmedBorder ? dimmedBorderColor : '', ...props }));
+    return (React.createElement(ButtonGroup, { className: cs('vui-buttonToggleGroup', className), colorScheme: "blue", innerBorderColor: isDimmedBorder ? dimmedBorderColor : '', variant: "outlined", ...props }));
 };
 export default ButtonToggleGroup;

package/dist/esm/checkbox/checkbox.js

@@ -5,7 +5,7 @@ import T from '../t';
 import { cs, filterUndefined } from '../utils';
 import { useCheckboxGroupContext } from './context';
 const CheckboxControl = styled.spanBox `
-  border-radius: none;
+  border-radius: sm;
   display: inline-flex;
   flex-shrink: 0;
   position: relative;

package/dist/esm/copyToClipboard/copyToClipboard.js

@@ -12,7 +12,7 @@ import { useCopyToClipboard } from './useCopyToClipboard';
  *
  */
 export const CopyToClipboard = vui((props, ref) => {
-    const { disabled, copyText, className, size = 'sm', variant = 'tertiaryDark', ...rest } = props;
+    const { disabled, copyText, className, size = 'xs', variant = 'text', ...rest } = props;
     const { copy, isCopyDisabled } = useCopyToClipboard(copyText);
     return (React.createElement(Button, { className: cs('vui-copy-to-clipboard', className), disabled: disabled || isCopyDisabled, icon: "falCopy", onClick: () => copy(), ref: ref, size: size, variant: variant, ...rest }));
 });

package/dist/esm/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/esm/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"}