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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/theme/foundations/radii.js

@@ -1,7 +1,12 @@
 export 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/esm/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/esm/toast/useToast.js

@@ -26,7 +26,7 @@ export const useToast = () => {
         const onClose = () => hideToast(id);
         const toast = {
             id,
-            component: (React.createElement(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.createElement(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/esm/tutorial/tutorialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,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/esm/tutorial/tutorialCard.js

@@ -24,14 +24,14 @@ export function TutorialCard({ className, description, title, readMoreLink, step
     return (React.createElement(Card, { bg: "blue.100", className: className, color: "white", column: true, justifyContent: "space-between", minH: 200, w: 450 },
         React.createElement(Box, { alignContent: "center", alignItems: "center", display: "flex", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", m: 2, mb: 1, minH: "48px", row: true, style: { WebkitFlexGrow: '0' } },
             React.createElement(H3, null, title),
-            !isFinalStep && (React.createElement(Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "text" }))),
+            !isFinalStep && (React.createElement(Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryDark" }))),
         React.createElement(Box, { column: true, flex: 5, hidden: started, mx: 2 },
             React.createElement(T, { flexGrow: 1 }, description),
             React.createElement(Box, { alignItems: "center", flexDirection: "row-reverse", row: true },
                 React.createElement(Button, { bg: "white", color: "prussian.80", float: "right", mb: 0, onClick: () => setStarted(true), pb: 0 }, "Let's get started!"))),
         React.createElement(Box, { flex: 5, hidden: !started, mx: 2, row: true }, steps?.map?.(s => (React.createElement(TutorialStep, { active: s.key === activeStep, description: s.step.description, key: s.step.title, readMoreLink: s.step.readMoreLink, title: s.step.title })))),
         React.createElement(Box, { alignItems: "center", flex: 0, flexGrow: 0, hidden: !started, justifyContent: "space-between", m: 2, mt: 0, row: true, style: { WebkitFlexGrow: '0' } },
-            React.createElement(Button, { color: "white", disabled: isStartStep, disabledBg: "blue.100", disabledBorderColor: "blue.100", disabledColor: "prussian.80", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowLeft", onClick: decrementStep, scale: 2, transition: "none", variant: "text", w: "80" }),
+            React.createElement(Button, { color: "white", disabled: isStartStep, disabledBg: "blue.100", disabledBorderColor: "blue.100", disabledColor: "prussian.80", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowLeft", onClick: decrementStep, scale: 2, transition: "none", variant: "tertiaryDark", w: "80" }),
             React.createElement(Box, { className: "vuiTutorialStepDots" }, steps?.map?.(s => (React.createElement(Icon, { color: s.key === activeStep ? 'white' : 'grey.70', key: s.key, name: "cusDotFull" })))),
-            isFinalStep ? (React.createElement(Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (React.createElement(Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "text", w: "80" })))));
+            isFinalStep ? (React.createElement(Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (React.createElement(Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "tertiaryDark", w: "80" })))));
 }

package/package.json

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

package/src/accordion/accordion.tsx

@@ -5,7 +5,6 @@ import List from '../list'
 import { cs, filterUndefined } from '../utils'
 import { AccordionItemProps, AccordionProps } from './accordion.types'
 import AccordionItem from './accordionItem'
-import AccordionItemHorizontal from './accordionItemHorizontal'
 import { AccordionProvider } from './context'
 
 export const AccordionBase = styled.divBox`
@@ -14,9 +13,9 @@ export const AccordionBase = styled.divBox`
   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<'div', AccordionProps>((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])
@@ -26,21 +25,11 @@ export const Accordion = vui<'div', AccordionProps>((props, ref) => {
   return (
     <AccordionProvider value={context}>
       <AccordionBase className={cs('vui-accordion', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
-        {orientation === 'vertical' ? (
-          <List w="100%">
-            {items
-              ? items?.map?.((item: AccordionItemProps, key: number) => (
-                  <AccordionItem itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
-                ))
-              : children}
-          </List>
-        ) : items ? (
-          items?.map?.((item: AccordionItemProps, key: number) => (
-            <AccordionItemHorizontal itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
-          ))
-        ) : (
-          children
-        )}
+        <List w="100%">
+          {items
+            ? items?.map?.((item: AccordionItemProps, key: number) => <AccordionItem key={key} {...item} />)
+            : children}
+        </List>
       </AccordionBase>
     </AccordionProvider>
   )

package/src/accordion/accordion.types.ts

@@ -4,14 +4,8 @@ import { ListItemProps } from '../list'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
-export type Orientation = 'vertical' | 'horizontal'
-
 export type AccordionProps = SystemProps &
   ThemingProps<'Accordion'> & {
-    /** Items orientation @default 'vertical' */
-    orientation?: Orientation
-    /** Hover color for the item title @default "blue.10" */
-    itemTitleHoverBg?: string
     items?: AccordionItemProps[]
   }
 
@@ -23,25 +17,22 @@ export type AccordionOnToggleEvent = {
 }
 
 export type AccordionItemProps = ListItemProps & {
-  /** Unique ID */
+  // Unique ID
   id: AccordionItemId
-  /** Custom class name */
+  // Custom class name
   className?: string
-  /** Content */
+  // Content
   children?: ReactNode
-  /** Alternative way to provide content */
+  // Alternative way to provide content
   content?: ReactNode
-  /** Collapsed state */
+  // Collapsed state
   collapsed?: boolean
-  /** Hover color for the item title @default "blue.10" */
-  itemTitleHoverBg?: string
-  /** Title */
+  // Title
   title?: string | ReactNode
-  /** Collapse change state */
+  // Collapse change state
   onToggle?: (event: AccordionOnToggleEvent) => void
 }
 
 export type AccordionItemArrowProps = {
   collapsed?: boolean
-  orientation?: Orientation
 }

package/src/accordion/accordionItem.tsx

@@ -10,18 +10,7 @@ import { useAccordionContext } from './context'
 
 /** An accordion item. */
 export const AccordionItem = (props: AccordionItemProps) => {
-  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<boolean>(false)
 
   const styles = useStyleConfig('Accordion', useAccordionContext())
@@ -44,27 +33,20 @@ export const AccordionItem = (props: AccordionItemProps) => {
       disabled={disabled}
       flexDirection="column"
       h="auto"
+      hoverBg="blue.10"
       id={`${id}`}
-      p={0}
       w="100%"
+      {...styles.item}
       {...rest}
     >
-      <Box
-        cursor={disabled ? 'not-allowed' : 'pointer'}
-        hoverBg={itemTitleHoverBg}
-        justifyContent="space-between"
-        onClick={toggle}
-        px={2}
-        w="100%"
-        {...styles.item}
-      >
+      <Box cursor={disabled ? 'not-allowed' : 'pointer'} justifyContent="space-between" onClick={toggle} w="100%">
         <Box fontWeight={typeof title === 'string' ? '500' : 'inherit'}>{title}</Box>
         <Box>
           <AccordionItemArrow collapsed={collapsedInternal} />
         </Box>
       </Box>
       {!collapsedInternal && (
-        <Box mb={2} mt={2} px={2} py={1} w="100%">
+        <Box mb={2} mt={2} w="100%">
           {children ?? content}
         </Box>
       )}

package/src/accordion/accordionItemArrow.tsx

@@ -3,19 +3,9 @@ import React from 'react'
 import Icon from '../icon'
 import { AccordionItemArrowProps } from './accordion.types'
 
-const names = {
-  horizontal: {
-    collapsed: 'falChevronRight',
-    expanded: 'falChevronLeft'
-  },
-  vertical: {
-    collapsed: 'falChevronDown',
-    expanded: 'falChevronUp'
-  }
+const AccordionItemArrow = (props: AccordionItemArrowProps) => {
+  const { collapsed } = props
+  return <Icon name={collapsed ? 'falChevronDown' : 'falChevronUp'} size="xs" />
 }
 
-const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }: AccordionItemArrowProps) => (
-  <Icon name={names[orientation][collapsed ? 'collapsed' : 'expanded']} size="xs" />
-)
-
 export default React.memo(AccordionItemArrow)

package/src/accordion/index.ts

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

package/src/avatar/avatar.tsx

@@ -38,7 +38,7 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
   } = 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/src/badge/badge.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { vui } from '../core'
+import { Tag, TagProps } from '../tag'
+import { Dict } from '../utils'
+import { BadgeProps } from './badge.types'
+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<'span', BadgeProps>(props => {
+  const { variant, ...rest } = props as TagProps
+  const { variants } = (theme as Dict) ?? {}
+
+  const bg = variants[variant ?? 'subtleSandstone'].container.bg
+  const color = variants[variant ?? 'subtleSandstone'].container.color
+
+  return (
+    <Tag
+      bg={bg}
+      className="vui-badge"
+      color={color}
+      isInteractive={false}
+      isRound
+      minW="20px"
+      {...rest}
+      onDelete={undefined}
+    />
+  )
+})
+
+export default Badge

package/src/badge/badge.types.ts

@@ -0,0 +1,17 @@
+import { IconProp } from '../icon'
+import { SystemProps } from '../system'
+import { TagInnerProps } from '../tag'
+import { ThemingProps } from '../theme'
+
+export 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 type BadgeProps = SystemProps & ThemingProps<'Badge'> & TagInnerProps & BadgeInnerProps

package/src/badge/index.ts

@@ -0,0 +1,2 @@
+export * from './badge'
+export { default } from './badge'