@veracity/vui 2.9.0-beta.3 → 2.10.0-beta.0

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,gBAoFtD,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,gBAmFtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/cjs/avatar/theme.js

@@ -141,7 +141,7 @@ const variants = {
         activeBg: 'hsl(178, 80%, 42%)'
     },
     solidTerracotta: {
-        bg: 'hsl(34, 100%, 35%)',
+        bg: 'hsl(34, 100%, 30%)',
         hoverBg: 'hsl(34, 100%, 40%)',
         borderColor: 'hsl(34, 100%, 35%)',
         color: 'white',

package/dist/cjs/button/button.js

@@ -146,7 +146,7 @@ exports.Button = (0, core_1.vui)((props, ref) => {
         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, `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),
+        react_1.default.createElement(exports.ButtonBase, Object.assign({ 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 || ariaLabel, 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/core/vuiProvider/globalStyle.d.ts.map

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

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

@@ -28,7 +28,6 @@ const fontFaces_1 = __importDefault(require("./fontFaces"));
  */
 exports.default = (0, styled_1.createGlobalStyle) `
   ${fontFaces_1.default}
-
   :root {
     ${generateCSSVariables}
   }
@@ -40,18 +39,23 @@ exports.default = (0, styled_1.createGlobalStyle) `
   }
 
   button,
+  .vui-avatar,
+  .vui-tag,
   .vui-switchTrack {
     --x-ring-color: transparent;
   }
 
   button:focus-visible,
   li:focus-visible,
+  .vui-avatar:focus-visible,
+  .vui-tag:focus-visible,
   .vui-switchTrack:focus-visible {
     --x-ring-color: var(--vui-colors-focusColor);
     outline: var(--vui-colors-focusColor) solid 3px;
     z-index: 1;
   }
 
+  //@formatter:off
   ${p => p.globalStyle &&
     (0, styled_1.css) `
       body {
@@ -69,6 +73,7 @@ exports.default = (0, styled_1.createGlobalStyle) `
       }
     `}
 
+  //@formatter:on
   @keyframes vui-bounce {
   ${animations_1.bounce}
   }

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

@@ -1 +1 @@
-{"version":3,"file":"headerAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAA6B,MAAM,uBAAuB,CAAA;AAGrF,+CAA+C;AAE/C,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAqDtD;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"headerAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAA6B,MAAM,uBAAuB,CAAA;AAGrF,+CAA+C;AAE/C,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAsDtD;AAED,eAAe,aAAa,CAAA"}

package/dist/cjs/header/headerAccount.js

@@ -57,7 +57,7 @@ function HeaderAccount(props) {
     const variant = (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.trigger) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : 'solidDarkBlue';
     const offsetX = isMobile ? 64 : 39;
     return (react_1.default.createElement(popover_1.default, Object.assign({ isLazy: false, offset: [offsetX, 16], placement: "bottom-end" }, rest),
-        react_1.default.createElement(popover_1.default.Trigger, Object.assign({ as: avatar_1.default, className: "vui-headerAccountTrigger", isInteractive: true, ml: 1, name: name, size: "lg", title: "Account", variant: variant }, styles.trigger, triggerProps)),
+        react_1.default.createElement(popover_1.default.Trigger, Object.assign({ as: avatar_1.default, className: "vui-headerAccountTrigger", isInteractive: true, ml: 1, name: name, role: "button", size: "lg", title: "Account", variant: variant }, styles.trigger, triggerProps)),
         react_1.default.createElement(popover_1.default.Content, Object.assign({ borderRadius: 0, className: "vui-headerAccountContent", column: true }, styles.content, { w: isMobile ? 280 : 320 }, contentProps),
             (0, utils_1.isJsx)(userInfo) ? userInfo : userInfo && react_1.default.createElement(headerAccountUserInfo_1.default, Object.assign({}, userInfo)),
             (0, utils_1.isJsx)(sections)

package/dist/cjs/header/headerAccountUserInfo.js

@@ -31,6 +31,6 @@ exports.HeaderAccountUserInfo = (0, core_1.vui)((props, ref) => {
         react_1.default.createElement(box_1.default, { column: true, rowGap: role ? 0 : 0.5 },
             displayName && (react_1.default.createElement(t_1.default, { fontSize: isApplication ? '12px' : 'inherit', weight: "demi" }, displayName)),
             companyName && react_1.default.createElement(t_1.default, { fontSize: isApplication ? '12px' : 'inherit' }, companyName),
-            role && (react_1.default.createElement(t_1.default, { color: "sandstone.55", fontSize: isApplication ? '12px' : 'inherit' }, role)))))));
+            role && (react_1.default.createElement(t_1.default, { color: "sandstone.45", fontSize: isApplication ? '12px' : 'inherit' }, role)))))));
 });
 exports.default = exports.HeaderAccountUserInfo;

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

@@ -1 +1 @@
-{"version":3,"file":"headerMobileToggle.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,WAAW,CAAA;AAMnD,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAmB7B,CAAA;AAEF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"headerMobileToggle.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,WAAW,CAAA;AAMnD,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAoB7B,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/cjs/header/headerMobileToggle.js

@@ -28,6 +28,6 @@ exports.HeaderMobileToggle = (0, core_1.vui)((props, ref) => {
     const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
     const iconName = isMobileOpen ? 'falTimes' : 'falBars';
-    return (react_1.default.createElement(button_1.IconButton, Object.assign({ className: (0, utils_1.cs)('vui-headerMobileToggle', className), icon: react_1.default.createElement(icon_1.default, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef) }, styles.mobileToggle, rest)));
+    return (react_1.default.createElement(button_1.IconButton, Object.assign({ className: (0, utils_1.cs)('vui-headerMobileToggle', className), icon: react_1.default.createElement(icon_1.default, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef), title: "mobileToggleButton" }, styles.mobileToggle, rest)));
 });
 exports.default = exports.HeaderMobileToggle;

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

@@ -1 +1 @@
-{"version":3,"file":"headerNotifications.d.ts","sourceRoot":"","sources":["../../../src/header/headerNotifications.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAoBzD,+FAA+F;AAC/F,eAAO,MAAM,mBAAmB,+DA8B9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerNotifications.d.ts","sourceRoot":"","sources":["../../../src/header/headerNotifications.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAoBzD,+FAA+F;AAC/F,eAAO,MAAM,mBAAmB,+DA6B9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}

package/dist/cjs/header/headerNotifications.js

@@ -43,7 +43,7 @@ exports.HeaderNotifications = (0, core_1.vui)((props, ref) => {
     const { children, className, count = 0, url } = props, rest = __rest(props, ["children", "className", "count", "url"]);
     const { links } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).notifications;
-    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerNotifications', className), href: url !== null && url !== void 0 ? url : links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, size: "lg", title: "Notifications", variant: "tertiaryDark" }, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerNotifications', className), href: url !== null && url !== void 0 ? url : links.notifications, minW: 0, position: "relative", px: "9px", ref: ref, size: "lg", title: "Notifications", variant: "tertiaryDark" }, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(button_1.default.Icon, { name: "falBell" }),
         count > 0 && react_1.default.createElement(Badge, null, count < 100 ? count : '99+')))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"headerServices.d.ts","sourceRoot":"","sources":["../../../src/header/headerServices.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAoBpD,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAqCxD;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"headerServices.d.ts","sourceRoot":"","sources":["../../../src/header/headerServices.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAoBpD,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAsCxD;AAED,eAAe,cAAc,CAAA"}

package/dist/cjs/header/headerServices.js

@@ -34,7 +34,7 @@ function HeaderServices(props) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
             react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [offsetX, 20], placement: "bottom-end", size: "lg" }, rest),
-                react_1.default.createElement(menu_1.default.Button, Object.assign({ className: "vui-services-trigger", icon: "falTh", title: "My services" }, styles.button, buttonProps)),
+                react_1.default.createElement(menu_1.default.Button, Object.assign({ className: "vui-services-trigger", icon: "falTh", size: "lg", title: "My services" }, styles.button, buttonProps)),
                 react_1.default.createElement(menu_1.default.List, Object.assign({ heading: "My Services", maxH: 400, right: 0, w: 320 }, styles.list),
                     react_1.default.createElement(ListContent, { links: links })))),
         react_1.default.createElement(core_1.RenderOnScreen, { maxWidth: "lg" },

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAQnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,cAAc,+HAE1B,CAAA;AAED,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAgJV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAQnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,cAAc,+HAE1B,CAAA;AAED,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAuJV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/cjs/input/input.js

@@ -105,8 +105,12 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     }, [value]);
     const filterAutoCompleteOptions = (i) => valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase());
     return (react_1.default.createElement(context_1.InputProvider, { value: context },
-        react_1.default.createElement(popover_1.Popover, { placement: "bottom-start" },
-            react_1.default.createElement(popover_1.Popover.Trigger, { as: exports.InputContainer },
+        react_1.default.createElement(popover_1.Popover, { options: {
+                aria: {
+                    expanded: !(autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.length)
+                }
+            }, placement: "bottom-start" },
+            react_1.default.createElement(popover_1.Popover.Trigger, { as: exports.InputContainer, className: (0, utils_1.cs)('vui-input-popoverTrigger') },
                 react_1.default.createElement(exports.InputBase, Object.assign({ className: (0, utils_1.cs)('vui-input', className), ref: ref }, styles.container, aliasedProps, rest),
                     itemLeft,
                     (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_a = children !== null && children !== void 0 ? children : input) !== null && _a !== void 0 ? _a : (react_1.default.createElement(inputInput_1.default, Object.assign({ ref: inputRef }, {

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

@@ -13,6 +13,8 @@ export type ListProps = SystemProps & ThemingProps<'List'> & {
     isInteractive?: boolean;
     /** Socket displaying a list of items. */
     items?: PropsOf<'li', ListItemProps>[] | JSX.Element;
+    /** Socket for the variant. The 'blue' variant is internal, used in the header. */
+    variant?: 'default' | 'ordered' | 'unordered' | 'blue';
 };
 export type ListItemLinkProps = PropsOf<'a', LinkProps> | object;
 export type ListItemProps = SystemProps & ThemingProps<'List'> & {

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

@@ -1 +1 @@
-{"version":3,"file":"list.types.d.ts","sourceRoot":"","sources":["../../../src/list/list.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,mDAAmD;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;CACrD,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,MAAM,CAAA;AAEhE,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,oDAAoD;IACpD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;CAC/B,CAAA"}
+{"version":3,"file":"list.types.d.ts","sourceRoot":"","sources":["../../../src/list/list.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,mDAAmD;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IACpD,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,CAAA;CACvD,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,MAAM,CAAA;AAEhE,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,oDAAoD;IACpD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;CAC/B,CAAA"}

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

@@ -80,6 +80,26 @@ declare const _default: {
     };
     variants: {
         default: {};
+        ordered: {
+            container: {
+                as: string;
+                listStyleType: string;
+                pl: number;
+            };
+            item: {
+                display: string;
+            };
+        };
+        unordered: {
+            container: {
+                as: string;
+                listStyleType: string;
+                pl: number;
+            };
+            item: {
+                display: string;
+            };
+        };
         blue: {
             heading: {
                 color: string;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/list/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/list/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,wBAMC"}

package/dist/cjs/list/theme.js

@@ -81,7 +81,27 @@ const sizes = {
 };
 const variants = {
     default: {},
-    // variant *blue* was introduced for the *header* component
+    ordered: {
+        container: {
+            as: 'ol',
+            listStyleType: 'decimal',
+            pl: 3
+        },
+        item: {
+            display: 'list-item'
+        }
+    },
+    unordered: {
+        container: {
+            as: 'ul',
+            listStyleType: 'disc',
+            pl: 3
+        },
+        item: {
+            display: 'list-item'
+        }
+    },
+    // internal; variant *blue* was introduced for the *header* component
     blue: {
         heading: {
             color: 'darkBlue.main'

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/popover/popover.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAK9C;;;GAGG;AACH,iBAAwB,OAAO,CAAC,KAAK,EAAE,YAAY,eAQlD;kBARuB,OAAO;;;;eAAP,OAAO"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/popover/popover.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAK9C;;;GAGG;AACH,iBAAwB,OAAO,CAAC,KAAK,EAAE,YAAY,eAOlD;kBAPuB,OAAO;;;;eAAP,OAAO"}

package/dist/cjs/popover/popover.js

@@ -25,8 +25,8 @@ const usePopover_1 = __importDefault(require("./usePopover"));
  * By default, renders provided content only when popover is opened (lazy).
  */
 function Popover(props) {
-    const { children, isLazy = true } = props, rest = __rest(props, ["children", "isLazy"]);
-    const popoverProps = (0, usePopover_1.default)(rest);
+    const { children, isLazy = true, options } = props, rest = __rest(props, ["children", "isLazy", "options"]);
+    const popoverProps = (0, usePopover_1.default)(Object.assign({ options }, rest));
     const { close, isOpen, open } = popoverProps;
     const context = (0, utils_1.filterUndefined)(Object.assign({ isLazy }, popoverProps));
     return react_1.default.createElement(context_1.PopoverProvider, { value: context }, (0, utils_1.runIfFn)(children, { close, isOpen, open }));

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

@@ -1,3 +1,4 @@
+import { TippyProps } from '@tippyjs/react';
 import { BoxProps } from '../box';
 import { SystemProps } from '../system';
 import { RenderProps } from '../utils';
@@ -9,6 +10,8 @@ export type PopoverProps = UsePopoverProps & {
     children?: PopoverRenderProps;
     /** Mounts provided content only when popover is opened for performance. @default true */
     isLazy?: boolean;
+    /** Object with any Tippy props. */
+    options?: Partial<TippyProps>;
 };
 export type PopoverRenderProps = RenderProps<{
     close: UsePopoverType['close'];

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

@@ -1 +1 @@
-{"version":3,"file":"popover.types.d.ts","sourceRoot":"","sources":["../../../src/popover/popover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAA;AAE1C,MAAM,MAAM,YAAY,GAAG,eAAe,GAAG;IAC3C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,yFAAyF;IACzF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAC3C,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC9B,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAA;IAChC,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;CAC7B,CAAC,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAA"}
+{"version":3,"file":"popover.types.d.ts","sourceRoot":"","sources":["../../../src/popover/popover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAA;AAE1C,MAAM,MAAM,YAAY,GAAG,eAAe,GAAG;IAC3C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,yFAAyF;IACzF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAC3C,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC9B,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAA;IAChC,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;CAC7B,CAAC,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAA"}

package/dist/cjs/popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.ts"],"names":[],"mappings":";AACA,OAAc,EAAE,QAAQ,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,GAAE,eAAoB;;;;;;;;;EA+G7D;AAED,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.ts"],"names":[],"mappings":";AACA,OAAc,EAAE,QAAQ,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,GAAE,eAAoB;;;;;;;;;EAiH7D;AAED,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA"}

package/dist/cjs/popover/usePopover.js

@@ -36,8 +36,8 @@ function usePopover(props = {}) {
     const isControlled = isOpenProp !== undefined;
     const tippyOptions = (0, react_1.useMemo)(() => {
         var _a, _b;
-        const _c = options !== null && options !== void 0 ? options : {}, { offset: optionsOffset, onHidden, onHide, onShow, plugins = [], popperOptions = {} } = _c, otherOptions = __rest(_c, ["offset", "onHidden", "onHide", "onShow", "plugins", "popperOptions"]);
-        return Object.assign({ arrow: false, duration: [200, 150], hideOnClick: !isControlled ? closeOnBlur : false, interactive: true, maxWidth: 'none', offset: (_a = optionsOffset !== null && optionsOffset !== void 0 ? optionsOffset : offset) !== null && _a !== void 0 ? _a : [0, 4], onHidden: instance => {
+        const _c = options !== null && options !== void 0 ? options : {}, { aria, offset: optionsOffset, onHidden, onHide, onShow, plugins = [], popperOptions = {} } = _c, otherOptions = __rest(_c, ["aria", "offset", "onHidden", "onHide", "onShow", "plugins", "popperOptions"]);
+        return Object.assign({ aria, arrow: false, duration: [200, 150], hideOnClick: !isControlled ? closeOnBlur : false, interactive: true, maxWidth: 'none', offset: (_a = optionsOffset !== null && optionsOffset !== void 0 ? optionsOffset : offset) !== null && _a !== void 0 ? _a : [0, 4], onHidden: instance => {
                 setIsOpen(false);
                 onHidden === null || onHidden === void 0 ? void 0 : onHidden(instance);
             }, onHide: instance => {

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

@@ -1 +1 @@
-{"version":3,"file":"progressCircular.d.ts","sourceRoot":"","sources":["../../../src/progressCircular/progressCircular.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,eAAO,MAAM,oBAAoB,+HAIhC,CAAA;AAWD,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,8DA6D3B,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"progressCircular.d.ts","sourceRoot":"","sources":["../../../src/progressCircular/progressCircular.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,eAAO,MAAM,oBAAoB,+HAIhC,CAAA;AAWD,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,8DA8D3B,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/cjs/progressCircular/progressCircular.js

@@ -70,7 +70,7 @@ exports.ProgressCircular = (0, core_1.vui)((props, ref) => {
     const angle = radius * 2 * Math.PI;
     const offset = angle - (progress / consts_1.maxValue) * angle;
     return (react_1.default.createElement(exports.ProgressCircularBase, Object.assign({ className: (0, utils_1.cs)('vui-progress-circular', className), ref: ref, w: styles.width }, rest),
-        react_1.default.createElement("svg", { "aria-valuemax": consts_1.maxValue, "aria-valuemin": 0, "aria-valuenow": progress, height: styles.width, version: "1.1", viewBox: "0 0 100 100", width: styles.width, xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("svg", { "aria-valuemax": consts_1.maxValue, "aria-valuemin": 0, "aria-valuenow": progress, height: styles.width, role: "meter", version: "1.1", viewBox: "0 0 100 100", width: styles.width, xmlns: "http://www.w3.org/2000/svg" },
             react_1.default.createElement(MainCircle, { cx: "50", cy: "50", r: radius, stroke: styles.stroke.main, strokeWidth: styles.strokeWidth }),
             react_1.default.createElement(ProgressCircle, { cx: "50", cy: "50", r: radius, stroke: styles.stroke.progress, strokeDasharray: `${angle} ${angle}`, strokeDashoffset: offset, strokeWidth: styles.strokeWidth })),
         react_1.default.createElement(box_1.Box, Object.assign({}, consts_1.absCenterStyles, { top: styles.top }), children ? (children) : showPercentage ? (react_1.default.createElement(t_1.T, { color: styles.color, fontSize: styles.fontSize },

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

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDA4FhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDA4GhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/radio/radio.js

@@ -117,7 +117,8 @@ exports.Radio = (0, core_1.vui)((props, ref) => {
     });
     return (react_1.default.createElement(exports.RadioBase, Object.assign({ className: (0, utils_1.cs)('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
         react_1.default.createElement(RadioControl, Object.assign({ bg: "white", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
-            react_1.default.createElement(RadioInput, Object.assign({ "aria-label": "input-radio", className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
+            checked !== undefined && (react_1.default.createElement(RadioInput, Object.assign({ "aria-label": "input-radio", className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked, disabled, id, name, required, value }, inputProps))),
+            checked === undefined && (react_1.default.createElement(RadioInput, Object.assign({ "aria-label": "input-radio", className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { defaultChecked, disabled, id, name, required, value }, inputProps))),
             react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.default = exports.Radio;

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAoB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO9D;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAiFxC;yBAjFe,MAAM;;;;;;;;;AAwFtB,eAAe,MAAM,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAoB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO9D;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAmFxC;yBAnFe,MAAM;;;;;;;;;AA0FtB,eAAe,MAAM,CAAA"}

package/dist/cjs/select/select.js

@@ -56,7 +56,7 @@ const useSelect_1 = __importDefault(require("./useSelect"));
  */
 function Select(props) {
     var _a;
-    const { children, defaultValue, disabled, isInvalid, isMultiple, maxHeight, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, showOptionsFilter, size, value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "isInvalid", "isMultiple", "maxHeight", "name", "onChange", "options", "placeholder", "readOnly", "selectButton", "showOptionsFilter", "size", "value", "variant"]);
+    const { children, defaultValue, disabled, isInvalid, isMultiple, maxHeight, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, selectButtonProps, showOptionsFilter, size, value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "isInvalid", "isMultiple", "maxHeight", "name", "onChange", "options", "placeholder", "readOnly", "selectButton", "selectButtonProps", "showOptionsFilter", "size", "value", "variant"]);
     const selectProps = (0, useSelect_1.default)({ defaultValue, isMultiple, onChange, value, options, children });
     if (utils_1.__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
         console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
@@ -82,7 +82,7 @@ function Select(props) {
     }, [query]);
     return (react_1.default.createElement(context_1.SelectProvider, { value: context },
         react_1.default.createElement(popover_1.Popover, Object.assign({ matchWidth: true }, rest),
-            react_1.default.createElement(react_1.default.Fragment, null, selectButton !== null && selectButton !== void 0 ? selectButton : react_1.default.createElement(selectButton_1.default, null),
+            react_1.default.createElement(react_1.default.Fragment, null, selectButton !== null && selectButton !== void 0 ? selectButton : react_1.default.createElement(selectButton_1.default, Object.assign({}, selectButtonProps)),
                 react_1.default.createElement(selectContent_1.default, null,
                     showOptionsFilter && (react_1.default.createElement(box_1.Box, { mr: 2 },
                         react_1.default.createElement(input_1.Input, { iconLeft: "culFilterAlt", m: 1, mt: 0, onChange: onQueryChange, placeholder: "Filter\u2026", size: "sm", value: query }))),

package/dist/cjs/select/useSelect.types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ButtonProps } from '../button';
 import { ChangeEvent } from '../utils';
 import { SelectOptionData, SelectValue } from './select.types';
 export type UseSelectProps = {
@@ -12,6 +13,8 @@ export type UseSelectProps = {
     options?: SelectOptionData[];
     /** Select children elements for dynamic handling */
     children?: ReactNode;
+    /** Props added to the select button */
+    selectButtonProps?: ButtonProps;
     /**
      * Callback triggered when an option is selected.
      *

package/dist/cjs/select/useSelect.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}
+{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,WAAW,CAAA;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}

package/dist/cjs/sidemenu/consts.d.ts

@@ -1,3 +1,2 @@
-export declare const border = "1px solid lightgray";
 export declare const expandedWidth = 64;
 //# sourceMappingURL=consts.d.ts.map

package/dist/cjs/sidemenu/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,eAAO,MAAM,aAAa,KAAK,CAAA"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,KAAK,CAAA"}

package/dist/cjs/sidemenu/consts.js

@@ -1,5 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.expandedWidth = exports.border = void 0;
-exports.border = '1px solid lightgray';
+exports.expandedWidth = void 0;
 exports.expandedWidth = 64;

package/dist/cjs/sidemenu/sidemenu.d.ts

@@ -3,7 +3,7 @@ import { SidemenuProps } from './sidemenu.types';
 import SidemenuItem from './sidemenuItem';
 import SidemenuTop from './sidemenuTop';
 export declare const SidemenuBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** [Beta] A collapsible side menu for navigation. */
+/** A collapsible side menu for navigation. */
 export declare const Sidemenu: VuiComponent<"div", SidemenuProps> & {
     Top: typeof SidemenuTop;
     Item: typeof SidemenuItem;

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,QAAQ;SAmCd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAsDd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}

package/dist/cjs/sidemenu/sidemenu.js

@@ -55,13 +55,14 @@ exports.SidemenuBase = core_1.styled.divBox `
   transition-duration: normal;
   overflow: hidden;
 `;
-/** [Beta] A collapsible side menu for navigation. */
+/** A collapsible side menu for navigation. */
 exports.Sidemenu = (0, core_1.vui)((props, ref) => {
     var _a;
-    const { children, className, items, isExpanded = false, width = 280 } = props, rest = __rest(props, ["children", "className", "items", "isExpanded", "width"]);
+    const { children, className, items, isExpanded = false, size, variant, width = 280 } = props, rest = __rest(props, ["children", "className", "items", "isExpanded", "size", "variant", "width"]);
     const styles = (0, core_1.useStyleConfig)('Sidemenu', props);
     const [isExpandedInternal, setIsExpandedInternal] = (0, react_1.useState)(isExpanded);
-    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ isExpandedInternal }), [isExpandedInternal]);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant, isExpandedInternal }), [size, variant, isExpandedInternal]);
+    const isDark = variant === 'dark';
     const aliasedProps = (0, utils_1.filterUndefined)({});
     (0, react_1.useEffect)(() => {
         setIsExpandedInternal(isExpanded);
@@ -71,12 +72,12 @@ exports.Sidemenu = (0, core_1.vui)((props, ref) => {
     const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`;
     const justifyContent = isExpandedInternal ? 'flex-end' : 'center';
     return (react_1.default.createElement(context_1.SidemenuProvider, { value: context },
-        react_1.default.createElement(exports.SidemenuBase, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu', className), ref: ref, w: w }, styles, aliasedProps, rest),
+        react_1.default.createElement(exports.SidemenuBase, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu', className), ref: ref, w: w }, styles.container, aliasedProps, rest),
             react_1.default.createElement(box_1.default, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", 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(sidemenuItem_1.default, Object.assign({ key: key }, item)))
                 : children),
-            react_1.default.createElement(box_1.default, { borderTop: consts_1.border, className: "vui-sidemenu-bottom", w: "100%" },
-                react_1.default.createElement(button_1.default, { borderRadius: 0, justifyContent: justifyContent, onClick: onToggle, variant: "tertiaryDark", w: "100%" },
+            react_1.default.createElement(box_1.default, Object.assign({ className: "vui-sidemenu-bottom", w: "100%" }, styles.bottom),
+                react_1.default.createElement(button_1.default, { borderRadius: 0, justifyContent: justifyContent, minH: size === 'lg' ? '56px' : '40px', onClick: onToggle, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%" },
                     react_1.default.createElement(icon_1.default, { name: icon }))))));
 });
 exports.Sidemenu.Top = sidemenuTop_1.default;

package/dist/cjs/sidemenu/sidemenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyB,YAAY,EAAE,MAAM,SAAS,CAAA;AAK7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCA8DmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}
+{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAK7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCAgEmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}

package/dist/cjs/sidemenu/sidemenuItem.js

@@ -50,7 +50,9 @@ const context_1 = require("./context");
 exports.SidemenuItem = (0, core_1.vui)((props, ref) => {
     const _a = (0, core_1.omitThemingProps)(props), { className, children, icon, iconSize = 'md', isActive, onClick, title } = _a, rest = __rest(_a, ["className", "children", "icon", "iconSize", "isActive", "onClick", "title"]);
     const [displayChildren, setDisplayChildren] = (0, react_1.useState)(true);
-    const { isExpandedInternal } = (0, context_1.useSidemenuContext)();
+    const { variant, size, isExpandedInternal } = (0, context_1.useSidemenuContext)();
+    const styles = (0, core_1.useStyleConfig)('Sidemenu', context_1.useSidemenuContext);
+    const isDark = variant === 'dark';
     const innerContent = isExpandedInternal ? (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre" },
         react_1.default.createElement(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }),
         react_1.default.createElement(t_1.default, { isTruncated: true, ml: 2 }, title))) : (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%" },
@@ -61,9 +63,9 @@ exports.SidemenuItem = (0, core_1.vui)((props, ref) => {
         setDisplayChildren(!displayChildren);
     };
     return (react_1.default.createElement(box_1.default, { flexDirection: "column", ref: ref, w: "100%" },
-        react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: "tertiaryDark", w: "100%" }, rest),
+        react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid transparent", borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined, borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%" }, styles.item, { minH: size === 'lg' ? '56px' : '40px' }, rest),
             innerContent,
-            !!children && isExpandedInternal && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: "tertiaryDark" }))),
+            !!children && isExpandedInternal && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' }))),
         !!children && displayChildren && (react_1.default.createElement(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
 });
 exports.default = exports.SidemenuItem;

package/dist/cjs/sidemenu/sidemenuTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuTop.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuTop.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,qBAAqB;AACrB,eAAO,MAAM,WAAW,UAAW,gBAAgB,uBAalD,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"sidemenuTop.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuTop.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,qBAAqB;AACrB,eAAO,MAAM,WAAW,UAAW,gBAAgB,uBAalD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/cjs/sidemenu/sidemenuTop.js

@@ -19,15 +19,15 @@ const react_1 = __importDefault(require("react"));
 const box_1 = require("../box");
 const core_1 = require("../core");
 const utils_1 = require("../utils");
-const consts_1 = require("./consts");
 const context_1 = require("./context");
 /** Top container. */
 const SidemenuTop = (props) => {
     const _a = (0, core_1.omitThemingProps)(props), { className, leftSlot, rightSlot } = _a, rest = __rest(_a, ["className", "leftSlot", "rightSlot"]);
+    const styles = (0, core_1.useStyleConfig)('Sidemenu', props);
     const { isExpandedInternal } = (0, context_1.useSidemenuContext)();
     if (!leftSlot && !rightSlot)
         return null;
-    return (react_1.default.createElement(box_1.Box, Object.assign({ borderBottom: consts_1.border, className: (0, utils_1.cs)('vui-sidemenu-top', className), mb: 1, w: "100%" }, rest),
+    return (react_1.default.createElement(box_1.Box, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu-top', className), mb: 1, w: "100%" }, styles.sidemenuTop, rest),
         !!leftSlot && leftSlot,
         !!rightSlot && isExpandedInternal && rightSlot));
 };

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

@@ -1,8 +1,47 @@
 declare const _default: {
     baseStyle: {};
-    defaultProps: {};
-    sizes: {};
-    variants: {};
+    defaultProps: {
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        md: {
+            item: {
+                minH: string;
+            };
+        };
+        lg: {
+            item: {
+                minH: string;
+            };
+        };
+    };
+    variants: {
+        light: {
+            container: {};
+            bottom: {
+                borderTop: string;
+            };
+            sidemenuTop: {
+                borderBottom: string;
+            };
+            item: {};
+        };
+        dark: {
+            container: {
+                bg: string;
+                color: string;
+            };
+            bottom: {
+                borderTop: string;
+            };
+            sidemenuTop: {
+                borderBottom: string;
+            };
+            item: {};
+        };
+    };
 };
 export default _default;
 //# sourceMappingURL=theme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/theme.ts"],"names":[],"mappings":";;;;;;AAQA,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,wBAMC"}