@veracity/vui 1.7.0-beta.3 → 1.7.0-redesign.1

package/dist/cjs/theme/foundations/index.d.ts

@@ -12,6 +12,297 @@ declare const _default: {
     };
     borders: {};
     colors: {
+        buttonTypePrimaryDefaultBorderColorDark: string;
+        buttonTypePrimaryDefaultBackgroundColorDark: string;
+        buttonTypePrimaryDefaultTextColorDark: string;
+        buttonTypePrimaryHoverBackgroundColorDark: string;
+        buttonTypePrimaryHoverBorderColorDark: string;
+        buttonTypePrimaryHoverTextColorDark: string;
+        buttonTypePrimaryActiveBackgroundColorDark: string;
+        buttonTypePrimaryActiveBorderColorDark: string;
+        buttonTypePrimaryActiveTextColorDark: string;
+        buttonTypePrimaryDefaultBorderColorLight: string;
+        buttonTypePrimaryDefaultBackgroundColorLight: string;
+        buttonTypePrimaryDefaultTextColorLight: string;
+        buttonTypePrimaryFocusOutline: string;
+        buttonTypePrimaryHoverBackgroundColorLight: string;
+        buttonTypePrimaryHoverBorderColorLight: string;
+        buttonTypePrimaryHoverTextColorLight: string;
+        buttonTypePrimaryActiveBackgroundColorLight: string;
+        buttonTypePrimaryActiveBorderColorLight: string;
+        buttonTypePrimaryActiveTextColorLight: string;
+        buttonTypeSecondaryDefaultBorderColorDark: string;
+        buttonTypeSecondaryDefaultBackgroundColorDark: string;
+        buttonTypeSecondaryDefaultTextColorDark: string;
+        buttonTypeSecondaryFocusOutline: string;
+        buttonTypeSecondaryHoverBackgroundColorDark: string;
+        buttonTypeSecondaryHoverBorderColorDark: string;
+        buttonTypeSecondaryHoverTextColorDark: string;
+        buttonTypeSecondaryActiveBackgroundColorDark: string;
+        buttonTypeSecondaryActiveBorderColorDark: string;
+        buttonTypeSecondaryActiveTextColorDark: string;
+        buttonTypeSecondaryDefaultBorderColorLight: string;
+        buttonTypeSecondaryDefaultBackgroundColorLight: string;
+        buttonTypeSecondaryDefaultTextColorLight: string;
+        buttonTypeSecondaryHoverBackgroundColorLight: string;
+        buttonTypeSecondaryHoverBorderColorLight: string;
+        buttonTypeSecondaryHoverTextColorLight: string;
+        buttonTypeSecondaryActiveBackgroundColorLight: string;
+        buttonTypeSecondaryActiveBorderColorLight: string;
+        buttonTypeSecondaryActiveTextColorLight: string;
+        buttonTypeTertiaryDefaultBorderColorDark: string;
+        buttonTypeTertiaryDefaultBackgroundColorDark: string;
+        buttonTypeTertiaryDefaultTextColorDark: string;
+        buttonTypeTertiaryHoverBackgroundColorDark: string;
+        buttonTypeTertiaryHoverBorderColorDark: string;
+        buttonTypeTertiaryHoverTextColorDark: string;
+        buttonTypeTertiaryFocusOutline: string;
+        buttonTypeTertiaryActiveBackgroundColorDark: string;
+        buttonTypeTertiaryActiveBorderColorDark: string;
+        buttonTypeTertiaryActiveTextColorDark: string;
+        buttonTypeTertiaryDefaultBorderColorLight: string;
+        buttonTypeTertiaryDefaultBackgroundColorLight: string;
+        buttonTypeTertiaryDefaultTextColorLight: string;
+        buttonTypeTertiaryHoverBackgroundColorLight: string;
+        buttonTypeTertiaryHoverBorderColorLight: string;
+        buttonTypeTertiaryHoverTextColorLight: string;
+        buttonTypeTertiaryActiveBackgroundColorLight: string;
+        buttonTypeTertiaryActiveBorderColorLight: string;
+        buttonTypeTertiaryActiveTextColorLight: string;
+        buttonDisabledCursor: string;
+        buttonDisabledOpacity: string;
+        darkBlue: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            18: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        digiGreen: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            78: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        earth: {
+            95: string;
+            89: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        energyRed: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            54: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        focusColor: string;
+        landGreen: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            41: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        sandstone: {
+            95: string;
+            90: string;
+            85: string;
+            79: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        seaBlue: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            28: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        skyBlue: {
+            97: string;
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            77: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        sunflower: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            73: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        terracotta: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            55: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
+        warmGrey: {
+            95: string;
+            90: string;
+            85: string;
+            80: string;
+            75: string;
+            70: string;
+            65: string;
+            60: string;
+            56: string;
+            50: string;
+            45: string;
+            40: string;
+            35: string;
+            30: string;
+            25: string;
+            20: string;
+            15: string;
+            10: string;
+            5: string;
+        };
         blue: {
             10: string;
             20: string;
@@ -121,7 +412,6 @@ declare const _default: {
         regular: string;
         medium: string;
         demi: string;
-        bold: string;
     };
     gridTemplateColumns: {
         1: string;
@@ -150,6 +440,7 @@ declare const _default: {
         sm: number;
         md: number;
         lg: number;
+        xl: number;
         round: number;
     };
     ringWidths: {};

package/dist/cjs/theme/foundations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}

package/dist/cjs/theme/foundations/radii.d.ts

@@ -1,8 +1,13 @@
 declare const _default: {
     none: number;
+    /** sm radius. @deprecated */
     sm: number;
+    /** md radius. @deprecated */
     md: number;
+    /** lg radius. @deprecated */
     lg: number;
+    /** xl radius. @deprecated */
+    xl: number;
     round: number;
 };
 export default _default;

package/dist/cjs/theme/foundations/radii.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/radii.ts"],"names":[],"mappings":";;;;;;;AAAA,wBAMC"}
+{"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/radii.ts"],"names":[],"mappings":";;IAEE,6BAA6B;;IAE7B,6BAA6B;;IAE7B,6BAA6B;;IAE7B,6BAA6B;;;;AAR/B,wBAWC"}

package/dist/cjs/theme/foundations/radii.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     none: 0,
-    sm: 4,
-    md: 6,
-    lg: 10,
+    /** sm radius. @deprecated */
+    sm: 0,
+    /** md radius. @deprecated */
+    md: 2,
+    /** lg radius. @deprecated */
+    lg: 4,
+    /** xl radius. @deprecated */
+    xl: 6,
     round: 9999
 };

package/dist/cjs/toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;0BAKU,YAAY,KAAG,IAAI;oBAFzB,MAAM;qBAoCL,SAAS,aAAY,aAAa;wBAE/B,SAAS,aAAY,aAAa;wBAElC,SAAS,aAAY,aAAa;sBAEpC,SAAS,aAAY,aAAa;wBAEhC,SAAS,aAAY,aAAa;CAI9D,CAAA"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;0BAKU,YAAY,KAAG,IAAI;oBAFzB,MAAM;qBAqCL,SAAS,aAAY,aAAa;wBAE/B,SAAS,aAAY,aAAa;wBAElC,SAAS,aAAY,aAAa;sBAEpC,SAAS,aAAY,aAAa;wBAEhC,SAAS,aAAY,aAAa;CAI9D,CAAA"}

package/dist/cjs/toast/useToast.js

@@ -32,7 +32,7 @@ const useToast = () => {
         const onClose = () => hideToast(id);
         const toast = {
             id,
-            component: (react_1.default.createElement(notification_1.Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: onClose, shadow: 1, status: status, text: text, title: title, w: 1 }))
+            component: (react_1.default.createElement(notification_1.Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: onClose, shadow: 3, status: status, text: text, title: title, verticalAlign: "center", w: 1 }))
         };
         addToast(toast);
         if (duration && duration !== 'sticky')

package/dist/cjs/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,eA0HnB"}
+{"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"}

package/dist/cjs/tutorial/tutorialCard.js

@@ -51,15 +51,15 @@ function TutorialCard({ className, description, title, readMoreLink, steps: prop
     return (react_1.default.createElement(index_1.Card, { bg: "blue.100", className: className, color: "white", column: true, justifyContent: "space-between", minH: 200, w: 450 },
         react_1.default.createElement(index_1.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_1.default.createElement(index_1.H3, null, title),
-            !isFinalStep && (react_1.default.createElement(index_1.Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "text" }))),
+            !isFinalStep && (react_1.default.createElement(index_1.Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryDark" }))),
         react_1.default.createElement(index_1.Box, { column: true, flex: 5, hidden: started, mx: 2 },
             react_1.default.createElement(index_1.T, { flexGrow: 1 }, description),
             react_1.default.createElement(index_1.Box, { alignItems: "center", flexDirection: "row-reverse", row: true },
                 react_1.default.createElement(index_1.Button, { bg: "white", color: "prussian.80", float: "right", mb: 0, onClick: () => setStarted(true), pb: 0 }, "Let's get started!"))),
         react_1.default.createElement(index_1.Box, { flex: 5, hidden: !started, mx: 2, row: true }, (_a = steps === null || steps === void 0 ? void 0 : steps.map) === null || _a === void 0 ? void 0 : _a.call(steps, s => (react_1.default.createElement(tutorialStep_1.TutorialStep, { active: s.key === activeStep, description: s.step.description, key: s.step.title, readMoreLink: s.step.readMoreLink, title: s.step.title })))),
         react_1.default.createElement(index_1.Box, { alignItems: "center", flex: 0, flexGrow: 0, hidden: !started, justifyContent: "space-between", m: 2, mt: 0, row: true, style: { WebkitFlexGrow: '0' } },
-            react_1.default.createElement(index_1.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: "text", w: "80" }),
+            react_1.default.createElement(index_1.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_1.default.createElement(index_1.Box, { className: "vuiTutorialStepDots" }, (_b = steps === null || steps === void 0 ? void 0 : steps.map) === null || _b === void 0 ? void 0 : _b.call(steps, s => (react_1.default.createElement(index_1.Icon, { color: s.key === activeStep ? 'white' : 'grey.70', key: s.key, name: "cusDotFull" })))),
-            isFinalStep ? (react_1.default.createElement(index_1.Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (react_1.default.createElement(index_1.Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "text", w: "80" })))));
+            isFinalStep ? (react_1.default.createElement(index_1.Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (react_1.default.createElement(index_1.Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "tertiaryDark", w: "80" })))));
 }
 exports.TutorialCard = TutorialCard;

package/dist/esm/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import { AccordionProps } from './accordion.types';
 export declare const AccordionBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** Allows to show and hide sections of related content on a page. */
+/** [BETA] Allows to show and hide sections of related content on a page. */
 export declare const Accordion: import("../core").VuiComponent<"div", AccordionProps>;
 export default Accordion;
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAKtE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS,uDA6BpB,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAItE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,4EAA4E;AAC5E,eAAO,MAAM,SAAS,uDAmBpB,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/esm/accordion/accordion.js

@@ -3,22 +3,22 @@ import { styled, useStyleConfig, vui } from '../core';
 import List from '../list';
 import { cs, filterUndefined } from '../utils';
 import AccordionItem from './accordionItem';
-import AccordionItemHorizontal from './accordionItemHorizontal';
 import { AccordionProvider } from './context';
 export const AccordionBase = styled.divBox `
   display: flex;
   min-width: 0;
   transition-duration: normal;
 `;
-/** Allows to show and hide sections of related content on a page. */
+/** [BETA] Allows to show and hide sections of related content on a page. */
 export const Accordion = vui((props, ref) => {
-    const { children, className, itemTitleHoverBg = 'blue.10', items, orientation = 'vertical', size, ...rest } = props;
+    const { children, className, items, size, ...rest } = props;
     const styles = useStyleConfig('Accordion', props);
     const context = useMemo(() => filterUndefined({ size }), [size]);
     const aliasedProps = filterUndefined({});
     return (React.createElement(AccordionProvider, { value: context },
-        React.createElement(AccordionBase, { className: cs('vui-accordion', className), ref: ref, ...styles, ...aliasedProps, ...rest }, orientation === 'vertical' ? (React.createElement(List, { w: "100%" }, items
-            ? items?.map?.((item, key) => (React.createElement(AccordionItem, { itemTitleHoverBg: itemTitleHoverBg, key: key, ...item })))
-            : children)) : items ? (items?.map?.((item, key) => (React.createElement(AccordionItemHorizontal, { itemTitleHoverBg: itemTitleHoverBg, key: key, ...item })))) : (children))));
+        React.createElement(AccordionBase, { className: cs('vui-accordion', className), ref: ref, ...styles, ...aliasedProps, ...rest },
+            React.createElement(List, { w: "100%" }, items
+                ? items?.map?.((item, key) => React.createElement(AccordionItem, { key: key, ...item }))
+                : children))));
 });
 export default Accordion;

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

@@ -2,12 +2,7 @@ import { ReactNode } from 'react';
 import { ListItemProps } from '../list';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type Orientation = 'vertical' | 'horizontal';
 export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
-    /** Items orientation @default 'vertical' */
-    orientation?: Orientation;
-    /** Hover color for the item title @default "blue.10" */
-    itemTitleHoverBg?: string;
     items?: AccordionItemProps[];
 };
 export declare type AccordionItemId = string | number;
@@ -16,25 +11,15 @@ export declare type AccordionOnToggleEvent = {
     collapsed: boolean;
 };
 export declare type AccordionItemProps = ListItemProps & {
-    /** Unique ID */
     id: AccordionItemId;
-    /** Custom class name */
     className?: string;
-    /** Content */
     children?: ReactNode;
-    /** Alternative way to provide content */
     content?: ReactNode;
-    /** Collapsed state */
     collapsed?: boolean;
-    /** Hover color for the item title @default "blue.10" */
-    itemTitleHoverBg?: string;
-    /** Title */
     title?: string | ReactNode;
-    /** Collapse change state */
     onToggle?: (event: AccordionOnToggleEvent) => void;
 };
 export declare type AccordionItemArrowProps = {
     collapsed?: boolean;
-    orientation?: Orientation;
 };
 //# sourceMappingURL=accordion.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAA;AAEnD,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAE/C,EAAE,EAAE,eAAe,CAAA;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,OAAO,CAAC,EAAE,SAAS,CAAA;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAE1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA"}

package/dist/esm/accordion/accordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBA6DtD,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBA2CtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/esm/accordion/accordionItem.js

@@ -7,7 +7,7 @@ import AccordionItemArrow from './accordionItemArrow';
 import { useAccordionContext } from './context';
 /** An accordion item. */
 export const AccordionItem = (props) => {
-    const { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle, ...rest } = omitThemingProps(props);
+    const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props);
     const [collapsedInternal, setIsCollapsedInternal] = useState(false);
     const styles = useStyleConfig('Accordion', useAccordionContext());
     useEffect(() => {
@@ -19,11 +19,11 @@ export const AccordionItem = (props) => {
             setIsCollapsedInternal(!collapsedInternal);
         }
     };
-    return (React.createElement(ListItem, { borderBottom: "1px solid grey.40", className: cs('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%", ...rest },
-        React.createElement(Box, { cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: itemTitleHoverBg, justifyContent: "space-between", onClick: toggle, px: 2, w: "100%", ...styles.item },
+    return (React.createElement(ListItem, { borderBottom: "1px solid grey.40", className: cs('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", hoverBg: "blue.10", id: `${id}`, w: "100%", ...styles.item, ...rest },
+        React.createElement(Box, { cursor: disabled ? 'not-allowed' : 'pointer', justifyContent: "space-between", onClick: toggle, w: "100%" },
             React.createElement(Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit' }, title),
             React.createElement(Box, null,
                 React.createElement(AccordionItemArrow, { collapsed: collapsedInternal }))),
-        !collapsedInternal && (React.createElement(Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%" }, children ?? content))));
+        !collapsedInternal && (React.createElement(Box, { mb: 2, mt: 2, w: "100%" }, children ?? content))));
 };
 export default AccordionItem;

package/dist/esm/accordion/accordionItemArrow.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AccordionItemArrowProps } from './accordion.types';
-declare const _default: React.MemoExoticComponent<({ collapsed, orientation }: AccordionItemArrowProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<(props: AccordionItemArrowProps) => JSX.Element>;
 export default _default;
 //# sourceMappingURL=accordionItemArrow.d.ts.map

package/dist/esm/accordion/accordionItemArrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAiB3D,wBAA6C"}
+{"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAO3D,wBAA6C"}

package/dist/esm/accordion/accordionItemArrow.js

@@ -1,14 +1,7 @@
 import React from 'react';
 import Icon from '../icon';
-const names = {
-    horizontal: {
-        collapsed: 'falChevronRight',
-        expanded: 'falChevronLeft'
-    },
-    vertical: {
-        collapsed: 'falChevronDown',
-        expanded: 'falChevronUp'
-    }
+const AccordionItemArrow = (props) => {
+    const { collapsed } = props;
+    return React.createElement(Icon, { name: collapsed ? 'falChevronDown' : 'falChevronUp', size: "xs" });
 };
-const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }) => (React.createElement(Icon, { name: names[orientation][collapsed ? 'collapsed' : 'expanded'], size: "xs" }));
 export default React.memo(AccordionItemArrow);

package/dist/esm/accordion/index.d.ts

@@ -1,6 +1,5 @@
 export * from './accordion';
 export * from './accordionItem';
-export * from './accordionItemHorizontal';
 export { default } from './accordion';
 export * from './accordion.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,2BAA2B,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,cAAc,mBAAmB,CAAA"}

package/dist/esm/accordion/index.js

@@ -1,5 +1,4 @@
 export * from './accordion';
 export * from './accordionItem';
-export * from './accordionItemHorizontal';
 export { default } from './accordion';
 export * from './accordion.types';

package/dist/esm/avatar/avatar.js

@@ -23,7 +23,7 @@ export const AvatarBase = styled.spanBox `
 export const Avatar = vui((props, ref) => {
     const { children, className, getInitials = defaultGetInitials, icon, isInteractive = props.onClick !== undefined, isSquare, name = '', src, ...rest } = omitThemingProps(props);
     const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props);
-    const borderRadius = isSquare ? 'lg' : '50%';
+    const borderRadius = isSquare ? 'none' : '50%';
     const initials = getInitials(name);
     const interactiveProps = isInteractive
         ? {

package/dist/esm/badge/badge.d.ts

@@ -0,0 +1,9 @@
+import { BadgeProps } from './badge.types';
+/**
+ * Badges are round, non-interactive tags.
+ *
+ * These components are used for displaying information only; they might be used as a “counter” for push notifications.
+ */
+export declare const Badge: import("../core").VuiComponent<"span", BadgeProps>;
+export default Badge;
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/badge/badge.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C;;;;GAIG;AAEH,eAAO,MAAM,KAAK,oDAmBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/esm/badge/badge.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { vui } from '../core';
+import { Tag } from '../tag';
+import theme from './theme';
+/**
+ * Badges are round, non-interactive tags.
+ *
+ * These components are used for displaying information only; they might be used as a “counter” for push notifications.
+ */
+export const Badge = vui(props => {
+    const { variant, ...rest } = props;
+    const { variants } = theme ?? {};
+    const bg = variants[variant ?? 'subtleSandstone'].container.bg;
+    const color = variants[variant ?? 'subtleSandstone'].container.color;
+    return (React.createElement(Tag, { bg: bg, className: "vui-badge", color: color, isInteractive: false, isRound: true, minW: "20px", ...rest, onDelete: undefined }));
+});
+export default Badge;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IconProp } from '../icon';
+import { SystemProps } from '../system';
+import { TagInnerProps } from '../tag';
+import { ThemingProps } from '../theme';
+export declare type BadgeInnerProps = {
+    /** Icon that replaces any other content. */
+    icon?: IconProp | JSX.Element;
+    /** Socket displaying icon on the left side. */
+    iconLeft?: IconProp | JSX.Element;
+    /** Socket displaying icon on the right side. */
+    iconRight?: IconProp | JSX.Element;
+    /** Socket displaying text as alternative to children. */
+    text?: React.ReactNode;
+};
+export declare type BadgeProps = SystemProps & ThemingProps<'Badge'> & TagInnerProps & BadgeInnerProps;
+//# sourceMappingURL=badge.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../../src/badge/badge.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,eAAe,GAAG;IAC5B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,oBAAY,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,aAAa,GAAG,eAAe,CAAA"}

package/dist/esm/badge/index.d.ts

@@ -0,0 +1,3 @@
+export * from './badge';
+export { default } from './badge';
+//# sourceMappingURL=index.d.ts.map