@veracity/vui 2.8.4 → 2.9.0-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,uBAAuB,MAAM,2BAA2B,CAAA;AAG/D,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS;UA8Bd,oBAAoB;oBACV,8BAA8B;CAC/C,CAAA;AAKD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,uBAAuB,MAAM,2BAA2B,CAAA;AAG/D,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS;UAuCd,oBAAoB;oBACV,8BAA8B;CAC/C,CAAA;AAKD,eAAe,SAAS,CAAA"}

package/dist/cjs/accordion/accordion.js

@@ -53,14 +53,18 @@ exports.AccordionBase = core_1.styled.divBox `
 /** Allows to show and hide sections of related content on a page. */
 exports.Accordion = (0, core_1.vui)((props, ref) => {
     var _a, _b;
-    const { children, className, itemTitleHoverBg = 'blue.10', items, orientation = 'vertical', size } = props, rest = __rest(props, ["children", "className", "itemTitleHoverBg", "items", "orientation", "size"]);
+    const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant } = props, rest = __rest(props, ["children", "className", "items", "orientation", "iconPosition", "size", "variant"]);
     const styles = (0, core_1.useStyleConfig)('Accordion', props);
-    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size }), [size]);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant }), [size, variant]);
     const aliasedProps = (0, utils_1.filterUndefined)({});
+    const isVertical = orientation === 'vertical';
     return (react_1.default.createElement(context_1.AccordionProvider, { value: context },
-        react_1.default.createElement(exports.AccordionBase, Object.assign({ className: (0, utils_1.cs)('vui-accordion', className), ref: ref }, styles, aliasedProps, rest), orientation === 'vertical' ? (react_1.default.createElement(list_1.default, { w: "100%" }, items
-            ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => (react_1.default.createElement(accordionItem_1.default, Object.assign({ itemTitleHoverBg: itemTitleHoverBg, key: key }, item))))
-            : children)) : items ? ((_b = items === null || items === void 0 ? void 0 : items.map) === null || _b === void 0 ? void 0 : _b.call(items, (item, key) => (react_1.default.createElement(accordionItemHorizontal_1.default, Object.assign({ itemTitleHoverBg: itemTitleHoverBg, key: key }, item))))) : (children))));
+        react_1.default.createElement(exports.AccordionBase, Object.assign({ borderLeft: isVertical
+                ? undefined
+                : `1px solid transparent
+        `, borderTop: isVertical ? `1px solid transparent` : undefined, className: (0, utils_1.cs)('vui-accordion', className), ref: ref }, styles.container, aliasedProps, rest), isVertical ? (react_1.default.createElement(list_1.default, { w: "100%" }, items
+            ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => (react_1.default.createElement(accordionItem_1.default, Object.assign({ iconPosition: iconPosition, key: key }, item))))
+            : children)) : items ? ((_b = items === null || items === void 0 ? void 0 : items.map) === null || _b === void 0 ? void 0 : _b.call(items, (item, key) => react_1.default.createElement(accordionItemHorizontal_1.default, Object.assign({ key: key }, item)))) : (children))));
 });
 exports.Accordion.Item = accordionItem_1.default;
 exports.Accordion.ItemHorizontal = accordionItemHorizontal_1.default;

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

@@ -2,21 +2,22 @@ import { ReactNode } from 'react';
 import { ListItemProps } from '../list';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type AccordionOrientation = 'vertical' | 'horizontal';
-export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
-    /** Items AccordionOrientation @default 'vertical' */
+export type AccordionOrientation = 'vertical' | 'horizontal';
+export type AccordionIconPosition = 'end' | 'start';
+export type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
+    /** Items AccordionOrientation @default "vertical" */
     orientation?: AccordionOrientation;
-    /** Hover color for the item title @default "blue.10" */
-    itemTitleHoverBg?: string;
     /** Collection of Accordion items */
     items?: AccordionItemProps[];
+    /** Icon position for vertical orientation @default "end" */
+    iconPosition?: AccordionIconPosition;
 };
-export declare type AccordionItemId = string | number;
-export declare type AccordionOnToggleEvent = {
+export type AccordionItemId = string | number;
+export type AccordionOnToggleEvent = {
     id: AccordionItemId;
     collapsed: boolean;
 };
-export declare type AccordionItemProps = ListItemProps & {
+export type AccordionItemProps = ListItemProps & {
     /** Unique ID */
     id: AccordionItemId;
     /** Custom class name */
@@ -29,15 +30,16 @@ export declare type AccordionItemProps = ListItemProps & {
     contentPx?: string | number;
     /** Collapsed state */
     collapsed?: boolean;
-    /** Hover color for the item title @default "blue.10" */
-    itemTitleHoverBg?: string;
+    /** The icon position @default "end" */
+    iconPosition?: AccordionIconPosition;
     /** Title */
     title?: string | ReactNode;
     /** Collapse change state */
     onToggle?: (event: AccordionOnToggleEvent) => void;
 };
-export declare type AccordionItemArrowProps = {
+export type AccordionItemArrowProps = {
     collapsed?: boolean;
     orientation?: AccordionOrientation;
+    color?: string;
 };
 //# sourceMappingURL=accordion.types.d.ts.map

package/dist/cjs/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,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE5D,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,oCAAoC;IACpC,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,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,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,oBAAoB,CAAA;CACnC,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,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAC5D,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,OAAO,CAAA;AAEnD,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,oCAAoC;IACpC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC,CAAA;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,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,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,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,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

package/dist/cjs/accordion/accordionItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AccordionItemProps } from './accordion.types';
 /** An accordion item. */
 export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;

package/dist/cjs/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,gBAoFtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/cjs/accordion/accordionItem.js

@@ -47,7 +47,7 @@ const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
 const context_1 = require("./context");
 /** An accordion item. */
 const AccordionItem = (props) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "itemTitleHoverBg", "title", "onToggle"]);
+    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, iconPosition = 'end', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "iconPosition", "title", "onToggle"]);
     const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
     const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
     (0, react_1.useEffect)(() => {
@@ -59,11 +59,19 @@ const AccordionItem = (props) => {
             setIsCollapsedInternal(!collapsedInternal);
         }
     };
-    return (react_1.default.createElement(list_1.ListItem, Object.assign({ borderBottom: "1px solid grey.40", className: (0, utils_1.cs)('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%" }, rest),
-        react_1.default.createElement(box_1.Box, Object.assign({ cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: itemTitleHoverBg, justifyContent: "space-between", onClick: toggle, px: 2, w: "100%" }, styles.item),
-            react_1.default.createElement(box_1.Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit' }, title),
-            react_1.default.createElement(box_1.Box, null,
-                react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal }))),
+    const isIconStart = iconPosition === 'start';
+    const isIconEnd = iconPosition === 'end';
+    return (react_1.default.createElement(list_1.ListItem, Object.assign({ borderBottom: "1px solid transparent", borderColor: styles.item.borderColor, className: (0, utils_1.cs)('vui-accordion-item', className), color: "yellow", disabled: disabled, disabledBg: styles.item.disabledBg, disabledColor: styles.item.disabledColor, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%" }, rest),
+        react_1.default.createElement(box_1.Box, Object.assign({ color: "yellow", cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled
+                ? 'transparent'
+                : collapsedInternal
+                    ? styles.item.itemTitleHoverBg
+                    : styles.item.expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%" }, styles.item),
+            isIconStart && (react_1.default.createElement(box_1.Box, null,
+                react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color }))),
+            react_1.default.createElement(box_1.Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit', ml: isIconStart ? 2 : 0 }, title),
+            isIconEnd && (react_1.default.createElement(box_1.Box, null,
+                react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color })))),
         !collapsedInternal && (react_1.default.createElement(box_1.Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%" }, children !== null && children !== void 0 ? children : content))));
 };
 exports.AccordionItem = AccordionItem;

package/dist/cjs/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<({ collapsed, color, orientation }: AccordionItemArrowProps) => JSX.Element>;
 export default _default;
 //# sourceMappingURL=accordionItemArrow.d.ts.map

package/dist/cjs/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;;AAqB3D,wBAA6C"}

package/dist/cjs/accordion/accordionItemArrow.js

@@ -15,5 +15,5 @@ const names = {
         expanded: 'falChevronUp'
     }
 };
-const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }) => (react_1.default.createElement(icon_1.default, { name: names[orientation][collapsed ? 'collapsed' : 'expanded'], size: "xs" }));
+const AccordionItemArrow = ({ collapsed, color = 'sandstone.10', orientation = 'vertical' }) => (react_1.default.createElement(icon_1.default, { name: names[orientation][collapsed ? 'collapsed' : 'expanded'], pathFill: color, size: "sm" }));
 exports.default = react_1.default.memo(AccordionItemArrow);

package/dist/cjs/accordion/accordionItemHorizontal.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AccordionItemProps } from './accordion.types';
 /** An accordion item (horizontal AccordionOrientation). */
 export declare const AccordionItemHorizontal: (props: AccordionItemProps) => JSX.Element;

package/dist/cjs/accordion/accordionItemHorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,2DAA2D;AAC3D,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAsFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,2DAA2D;AAC3D,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAiFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/cjs/accordion/accordionItemHorizontal.js

@@ -46,7 +46,7 @@ const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
 const context_1 = require("./context");
 /** An accordion item (horizontal AccordionOrientation). */
 const AccordionItemHorizontal = (props) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, contentPx, itemTitleHoverBg = 'blue.10', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "contentPx", "itemTitleHoverBg", "title", "onToggle"]);
+    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, contentPx, title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "contentPx", "title", "onToggle"]);
     const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
     const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
     (0, react_1.useEffect)(() => {
@@ -61,8 +61,12 @@ const AccordionItemHorizontal = (props) => {
     const cursor = disabled ? 'not-allowed' : 'pointer';
     const fontWeight = typeof title === 'string' ? '500' : 'inherit';
     const expandedContentPx = contentPx ? contentPx : styles.item.pt;
-    return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid grey.40", className: (0, utils_1.cs)('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, p: 0, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined }, rest),
-        react_1.default.createElement(box_1.default, Object.assign({}, styles.item, { cursor: cursor, hoverBg: itemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" }),
+    return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid transparent", className: (0, utils_1.cs)('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined }, styles.item, { p: 0 }, rest),
+        react_1.default.createElement(box_1.default, { cursor: cursor, hoverBg: disabled
+                ? 'transparent'
+                : collapsedInternal
+                    ? styles.item.itemTitleHoverBg
+                    : styles.item.expandedItemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" },
             !collapsedInternal && react_1.default.createElement(box_1.default, { fontWeight: fontWeight }, title),
             react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, orientation: "horizontal" })),
         !collapsedInternal ? (react_1.default.createElement(box_1.default, { p: styles.item.pt, pt: 0, px: expandedContentPx, transitionDuration: "0ms", w: 1 }, children !== null && children !== void 0 ? children : content)) : (react_1.default.createElement(box_1.default, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));

package/dist/cjs/accordion/theme.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     baseStyle: {};
     defaultProps: {
         size: string;
+        variant: string;
     };
     sizes: {
         sm: {
@@ -23,7 +24,38 @@ declare const _default: {
             };
         };
     };
-    variants: {};
+    variants: {
+        light: {
+            container: {
+                bg: string;
+                borderColor: string;
+            };
+            item: {
+                borderColor: string;
+                itemTitleHoverBg: string;
+                expandedItemTitleHoverBg: string;
+            };
+            icon: {
+                color: string;
+            };
+        };
+        dark: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+            item: {
+                borderColor: string;
+                disabledBg: string;
+                itemTitleHoverBg: string;
+                expandedItemTitleHoverBg: string;
+            };
+            icon: {
+                color: string;
+            };
+        };
+    };
 };
 export default _default;
 //# sourceMappingURL=theme.d.ts.map

package/dist/cjs/accordion/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/accordion/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/accordion/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,wBAKC"}

package/dist/cjs/accordion/theme.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const baseStyle = {};
 const defaultProps = {
-    size: 'md'
+    size: 'md',
+    variant: 'light'
 };
 const sizes = {
     sm: {
@@ -24,7 +25,38 @@ const sizes = {
         }
     }
 };
-const variants = {};
+const variants = {
+    light: {
+        container: {
+            bg: 'white',
+            borderColor: 'sandstone.main'
+        },
+        item: {
+            borderColor: 'sandstone.main',
+            itemTitleHoverBg: 'skyBlue.95',
+            expandedItemTitleHoverBg: 'skyBlue.90'
+        },
+        icon: {
+            color: 'sandstone.10'
+        }
+    },
+    dark: {
+        container: {
+            bg: 'darkBlue.main',
+            borderColor: 'white',
+            color: 'white'
+        },
+        item: {
+            borderColor: 'white',
+            disabledBg: 'transparent',
+            itemTitleHoverBg: 'seaBlue.35',
+            expandedItemTitleHoverBg: 'seaBlue.25'
+        },
+        icon: {
+            color: 'digiGreen.main'
+        }
+    }
+};
 exports.default = {
     baseStyle,
     defaultProps,

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

@@ -1,7 +1,7 @@
 import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type AvatarProps = SystemProps & ThemingProps<'Avatar'> & {
+export type AvatarProps = SystemProps & ThemingProps<'Avatar'> & {
     /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     /** Displays avatar in disabled state with appropriate styling. */

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.types.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
+{"version":3,"file":"avatar.types.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}

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

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

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

@@ -1 +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"}
+{"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,MAAM,MAAM,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,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,aAAa,GAAG,eAAe,CAAA"}

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

@@ -1,6 +1,6 @@
 import { BordersProps, EffectsProps, FlexboxesProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type BoxProps = SystemProps & ThemingProps<'Box'> & {
+export type BoxProps = SystemProps & ThemingProps<'Box'> & {
     /** Alias for alignItems prop. @deprecated */
     align?: FlexboxesProps['alignItems'];
     /** Centers the content vertically and horizontally. */

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

@@ -1 +1 @@
-{"version":3,"file":"box.types.d.ts","sourceRoot":"","sources":["../../../src/box/box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,QAAQ,GAAG,WAAW,GAChC,YAAY,CAAC,KAAK,CAAC,GAAG;IACpB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IACpC,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,4CAA4C;IAC5C,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrC,iDAAiD;IACjD,WAAW,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;IAC5C,iDAAiD;IACjD,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC1C,+CAA+C;IAC/C,MAAM,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IAClC,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA"}
+{"version":3,"file":"box.types.d.ts","sourceRoot":"","sources":["../../../src/box/box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,CAAC,KAAK,CAAC,GAAG;IACpB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IACpC,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,4CAA4C;IAC5C,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrC,iDAAiD;IACjD,WAAW,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;IAC5C,iDAAiD;IACjD,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC1C,+CAA+C;IAC/C,MAAM,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IAClC,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA"}

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

@@ -2,14 +2,14 @@ import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type BreadcrumbsProps = SystemProps & ThemingProps<'Breadcrumbs'>;
-export declare type BreadcrumbsItemProps = BoxProps & {
+export type BreadcrumbsProps = SystemProps & ThemingProps<'Breadcrumbs'>;
+export type BreadcrumbsItemProps = BoxProps & {
     /** Custom class name */
     className?: string;
     /** Content */
     children?: ReactNode;
 };
-export declare type BreadcrumbsSeparatorProps = BoxProps & {
+export type BreadcrumbsSeparatorProps = BoxProps & {
     /** Custom class name */
     className?: string;
     /** Content */

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GAAG,YAAY,CAAC,aAAa,CAAC,CAAA;AAExE,oBAAY,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,oBAAY,yBAAyB,GAAG,QAAQ,GAAG;IACjD,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA"}
+{"version":3,"file":"breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,YAAY,CAAC,aAAa,CAAC,CAAA;AAExE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG;IACjD,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA"}

package/dist/cjs/breadcrumbs/breadcrumbsSeparator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BreadcrumbsSeparatorProps } from './breadcrumbs.types';
 /** Breadcrumbs separator. */
 export declare const BreadcrumbsSeparator: ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => JSX.Element;

package/dist/cjs/breadcrumbs/breadcrumbsSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbsSeparator.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsSeparator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAA;AAG/D,6BAA6B;AAC7B,eAAO,MAAM,oBAAoB,8CAA+C,yBAAyB,gBAQxG,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"breadcrumbsSeparator.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsSeparator.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAA;AAG/D,6BAA6B;AAC7B,eAAO,MAAM,oBAAoB,8CAA+C,yBAAyB,gBAQxG,CAAA;AAED,eAAe,oBAAoB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAYtB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/cjs/button/button.js

@@ -59,7 +59,6 @@ const StateWrapper = core_1.styled.span `
 `;
 exports.ButtonBase = core_1.styled.buttonBox `
   align-items: center;
-  border-radius: none;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: medium;
@@ -79,19 +78,19 @@ exports.ButtonBase = core_1.styled.buttonBox `
  * Exposes some props to the children via context.
  */
 exports.Button = (0, core_1.vui)((props, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const buttonGroupProps = (0, context_1.useButtonGroupContext)();
     const mergedProps = Object.assign(Object.assign({}, buttonGroupProps), props);
     const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = 'falAngleDown', icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
     isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, title, variant: variantProp } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "dropDownIcon", "icon", "iconLeft", "iconRight", "isActive", "isDropDown", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "title", "variant"]);
     const hasState = Boolean(state) && state !== 'idle';
     const states = Object.assign(Object.assign({}, consts_1.buttonStateMapping), stateMapping);
-    const _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, { iconProps: stateIconProps } = _e, stateProps = __rest(_e, ["iconProps"]);
+    const _f = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, { iconProps: stateIconProps } = _f, stateProps = __rest(_f, ["iconProps"]);
     const variant = (0, utils_1.filterUndefined)({
         variant: (_c = (_b = states[state]) === null || _b === void 0 ? void 0 : _b.variant) !== null && _c !== void 0 ? _c : variantProp
     });
     const styles = (0, core_1.useStyleConfig)('Button', Object.assign(Object.assign({}, mergedProps), variant));
-    const _f = styles.container, { borderWidth, h, spaceX = 0 } = _f, buttonStyles = __rest(_f, ["borderWidth", "h", "spaceX"]);
+    const _g = styles.container, { borderWidth, h, spaceX = 0 } = _g, buttonStyles = __rest(_g, ["borderWidth", "h", "spaceX"]);
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ disabled, size, variant }), [disabled, size, variant]);
     const Content = hasState ? ContentWrapper : react_1.default.Fragment;
     // Apply more space for text and less space for icons
@@ -139,14 +138,14 @@ exports.Button = (0, core_1.vui)((props, ref) => {
         }
         : {};
     const aliasedProps = (0, utils_1.filterUndefined)({
-        borderRadius: isRound ? h / 2 : 0,
+        borderRadius: isRound ? h / 2 : ((_e = styles === null || styles === void 0 ? void 0 : styles.container) === null || _e === void 0 ? void 0 : _e.borderRadius) || 0,
         boxShadow: isElevated ? '2' : undefined,
         minW: icon ? 0 : undefined,
         pointerEvents: hasState ? 'none' : undefined,
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
-        react_1.default.createElement(exports.ButtonBase, Object.assign({ "aria-label": ariaLabel, borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
+        react_1.default.createElement(exports.ButtonBase, Object.assign({ "aria-label": ariaLabel, borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName, `vui-button-variant-${variantProp}`), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
             hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: (e) => e.stopPropagation() }, stateProps),
                 react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
             react_1.default.createElement(Content, null,

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

@@ -3,7 +3,7 @@ import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { AnyString } from '../utils';
-export declare type ButtonProps = SystemProps & ThemingProps<'Button'> & {
+export type ButtonProps = SystemProps & ThemingProps<'Button'> & {
     /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: string;
     /** Icon for the drop-down element. @default falAngleDown */
@@ -35,11 +35,11 @@ export declare type ButtonProps = SystemProps & ThemingProps<'Button'> & {
     /** Socket placing text as alternative to children. */
     text?: React.ReactNode;
 };
-export declare type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString;
-export declare type ButtonStateMapping = Record<string, SystemProps & {
+export type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString;
+export type ButtonStateMapping = Record<string, SystemProps & {
     variant: ButtonProps['variant'];
     iconProps: IconProps;
 }>;
 /** Narrower prop definition for IconButton component */
-export declare type IconButtonProps = Omit<ButtonProps, 'iconLeft' | 'iconRight' | 'text'>;
+export type IconButtonProps = Omit<ButtonProps, 'iconLeft' | 'iconRight' | 'text'>;
 //# sourceMappingURL=button.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,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,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAEH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,oBAAY,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG;IAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAAC,CAAA;AAExH,wDAAwD;AACxD,oBAAY,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,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,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG;IAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAAC,CAAA;AAExH,wDAAwD;AACxD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}

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

@@ -257,6 +257,21 @@ declare const _default: {
                 color: string;
             };
         };
+        buttonGroupRounded: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                hoverColor: string;
+                activeBg: string;
+                activeBorderColor: string;
+                activeColor: string;
+                borderRadius: string;
+                marginRight: string;
+            };
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+RA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgTA,wBAMC"}

package/dist/cjs/button/theme.js

@@ -271,6 +271,22 @@ const variants = {
             activeBg: 'landGreen.85',
             color: 'landGreen.30'
         }
+    },
+    // buttonGroupRounded is an internal variant, used in buttonGroup;
+    buttonGroupRounded: {
+        container: {
+            bg: 'white',
+            borderColor: 'sandstone.79',
+            color: 'sandstone.10',
+            hoverBg: 'seaBlue.20',
+            hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
+            hoverColor: 'white',
+            activeBg: 'seaBlue.35',
+            activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
+            activeColor: 'white',
+            borderRadius: 'round',
+            marginRight: '22px'
+        }
     }
 };
 exports.default = {

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

@@ -1,6 +1,5 @@
 import { ButtonGroupProps } from './buttonGroup.types';
 export declare const ButtonGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & {
-    colorScheme?: string | undefined;
     innerBorderColor: string;
 }, never>;
 /**

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;SAuC5F,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;sBAAqC,MAAM;SAgDtE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDAsBtB,CAAA;AAEF,eAAe,WAAW,CAAA"}