@veracity/vui 1.8.0-beta.0 → 1.8.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAKtE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS,uDA6BpB,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/accordion/accordion.js

@@ -62,4 +62,6 @@ exports.Accordion = (0, core_1.vui)((props, ref) => {
             ? (_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))));
 });
+exports.Accordion.Item = accordionItem_1.default;
+exports.Accordion.ItemHorizontal = accordionItemHorizontal_1.default;
 exports.default = exports.Accordion;

package/dist/cjs/core/media.d.ts

@@ -1,3 +1,4 @@
+import { useViewportWidth } from '@xstyled/styled-components';
 import { FC } from 'react';
 import { StyledProps } from 'styled-components';
 import { Screen } from '../theme';
@@ -5,10 +6,10 @@ import { AnyNumber, AnyString } from '../utils';
 import { ChildrenProp } from './types';
 declare type ScreenWidth = Screen | AnyNumber | AnyString;
 export declare type RenderOnScreenProps = {
-    /** Changes direction to below the breakpoint. */
-    isDown?: boolean;
     /** Breakpoint to compare viewport width against. */
-    screen?: Screen;
+    maxWidth?: Screen;
+    /** Breakpoint to compare viewport width against. */
+    minWidth?: Screen;
 };
 /** Returns CSS media string with appropriate min-width and max-width values. */
 export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
@@ -16,25 +17,17 @@ export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth
 export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
 /** Returns CSS media string with appropriate min-width value. */
 export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export declare const RenderOnDesktop: FC<RenderOnScreenProps & ChildrenProp>;
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export declare const RenderOnMobile: FC<RenderOnScreenProps & ChildrenProp>;
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
 export declare const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>;
-/** Returns true if current viewport width is between provided min and max widths. */
-export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
 /** Returns true if current viewport width is smaller than provided width. */
 export declare function useDown(width: ScreenWidth): boolean;
-/** Returns viewport width and provided screen width as a number. */
-export declare function useMedia(width: ScreenWidth): {
-    value: number;
-    viewportWidth: number | null;
-};
 /** Returns true if current viewport width is larger than or equal to provided width. */
 export declare function useUp(width: ScreenWidth): boolean;
-export {};
+/** Returns true if current viewport width is between provided min and max widths. */
+export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
+/** Return the width of the viewport. */
+export { useViewportWidth };
 //# sourceMappingURL=media.d.ts.map

package/dist/cjs/core/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD,wGAAwG;AACxG,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAA0C,CAAA;AAE7G,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAAiD,CAAA;AAEnH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAGjE,CAAA;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW;;;EAO1C;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAejE,CAAA;AAyBD,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,wCAAwC;AACxC,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/cjs/core/media.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUp = exports.useMedia = exports.useDown = exports.useBetween = exports.RenderOnScreen = exports.RenderOnMobile = exports.RenderOnDesktop = exports.mediaUp = exports.mediaDown = exports.mediaBetween = void 0;
+exports.useViewportWidth = exports.useBetween = exports.useUp = exports.useDown = exports.RenderOnScreen = exports.mediaUp = exports.mediaDown = exports.mediaBetween = void 0;
 const styled_components_1 = require("@xstyled/styled-components");
+Object.defineProperty(exports, "useViewportWidth", { enumerable: true, get: function () { return styled_components_1.useViewportWidth; } });
 const react_1 = __importDefault(require("react"));
 const theme_1 = require("./theme");
 /** Returns CSS media string with appropriate min-width and max-width values. */
@@ -18,34 +19,36 @@ exports.mediaDown = mediaDown;
 /** Returns CSS media string with appropriate min-width value. */
 const mediaUp = (width) => (props) => `@media (min-width: ${theme_1.th.screen(width)(props)})`;
 exports.mediaUp = mediaUp;
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-const RenderOnDesktop = props => react_1.default.createElement(exports.RenderOnScreen, Object.assign({}, props));
-exports.RenderOnDesktop = RenderOnDesktop;
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-const RenderOnMobile = props => react_1.default.createElement(exports.RenderOnScreen, Object.assign({ isDown: true }, props));
-exports.RenderOnMobile = RenderOnMobile;
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
-const RenderOnScreen = ({ children, isDown, screen = 'md' }) => {
-    const mediaFn = isDown ? useDown : useUp;
-    return mediaFn(screen) ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+const RenderOnScreen = ({ children, maxWidth, minWidth }) => {
+    if (minWidth && maxWidth) {
+        return (react_1.default.createElement(RenderBetween, { maxWidth: maxWidth, minWidth: minWidth }, children));
+    }
+    if (minWidth) {
+        return react_1.default.createElement(RenderOver, { width: minWidth }, children);
+    }
+    if (maxWidth) {
+        return react_1.default.createElement(RenderUnder, { width: maxWidth }, children);
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
 };
 exports.RenderOnScreen = RenderOnScreen;
-/** Returns true if current viewport width is between provided min and max widths. */
-function useBetween(minWidth, maxWidth) {
-    const isDown = useDown(maxWidth);
-    const isUp = useUp(minWidth);
-    return isDown && isUp;
-}
-exports.useBetween = useBetween;
-/** Returns true if current viewport width is smaller than provided width. */
-function useDown(width) {
-    const { value, viewportWidth } = useMedia(width);
-    return viewportWidth !== null && value !== null && viewportWidth < value;
-}
-exports.useDown = useDown;
+const RenderBetween = ({ children, maxWidth, minWidth }) => {
+    const isBetween = useBetween(minWidth, maxWidth);
+    return isBetween ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+};
+const RenderOver = ({ children, width }) => {
+    const isOver = useUp(width);
+    return isOver ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+};
+const RenderUnder = ({ children, width }) => {
+    const isUnder = useDown(width);
+    return isUnder ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+};
+/** /!\ No need to export it, keep it internal */
 /** Returns viewport width and provided screen width as a number. */
 function useMedia(width) {
     const theme = (0, theme_1.useTheme)();
@@ -54,10 +57,22 @@ function useMedia(width) {
     const value = Number(valueString.replace('px', ''));
     return { value, viewportWidth };
 }
-exports.useMedia = useMedia;
+/** Returns true if current viewport width is smaller than provided width. */
+function useDown(width) {
+    const { value, viewportWidth } = useMedia(width);
+    return viewportWidth !== null && value !== null && viewportWidth < value;
+}
+exports.useDown = useDown;
 /** Returns true if current viewport width is larger than or equal to provided width. */
 function useUp(width) {
     const { value, viewportWidth } = useMedia(width);
     return viewportWidth !== null && value !== null && viewportWidth >= value;
 }
 exports.useUp = useUp;
+/** Returns true if current viewport width is between provided min and max widths. */
+function useBetween(minWidth, maxWidth) {
+    const isDown = useDown(maxWidth);
+    const isUp = useUp(minWidth);
+    return isDown && isUp;
+}
+exports.useBetween = useBetween;

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyD,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAED,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA0CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAiBD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAED,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA0CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAiBD,eAAe,MAAM,CAAA"}

package/dist/cjs/header/header.js

@@ -74,8 +74,8 @@ exports.Header = (0, core_1.vui)((props, ref) => {
     (0, utils_1.useClickOutside)([mobileContentRef, mobileToggleRef], () => {
         setIsMobileOpen(false);
     });
-    const isDesktop = (0, core_1.useUp)('md');
-    const isMobile = (0, core_1.useDown)('md');
+    const isDesktop = (0, core_1.useUp)('lg');
+    const isMobile = !isDesktop;
     const context = {
         headerHeight,
         isDesktop,

package/dist/cjs/header/headerServices.js

@@ -31,12 +31,12 @@ function HeaderServices(props) {
     const { buttonProps, links = [] } = props, rest = __rest(props, ["buttonProps", "links"]);
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.RenderOnDesktop, null,
+        react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
             react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [0, 8], placement: "bottom-end", size: "lg" }, rest),
                 react_1.default.createElement(menu_1.default.Button, Object.assign({ colorScheme: "prussian", icon: "falTh", ml: 1, title: "My services" }, styles.button, buttonProps)),
                 react_1.default.createElement(menu_1.default.List, Object.assign({ heading: "My Services", maxH: 400, w: 320 }, styles.list),
                     react_1.default.createElement(ListContent, { links: links })))),
-        react_1.default.createElement(core_1.RenderOnMobile, null,
+        react_1.default.createElement(core_1.RenderOnScreen, { maxWidth: "lg" },
             react_1.default.createElement(list_1.default, Object.assign({ borderBottom: "1px solid grey.40", heading: "My Services" }, styles.list),
                 react_1.default.createElement(ListContent, { links: links })))));
 }

package/dist/cjs/header/loggedInHeader.js

@@ -26,15 +26,15 @@ exports.LoggedInHeader = (0, core_1.vui)((props, ref) => {
     return (react_1.default.createElement(header_1.default, Object.assign({ className: (0, utils_1.cs)('vui-loggedInHeader', className), ref: ref }, rest),
         react_1.default.createElement(header_1.default.Content, null,
             (0, utils_1.isJsx)(logo) ? logo : react_1.default.createElement(header_1.default.Logo, Object.assign({}, logo)),
-            react_1.default.createElement(core_1.RenderOnDesktop, null, children),
+            react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" }, children),
             react_1.default.createElement(box_1.default, { ml: "auto" }),
-            react_1.default.createElement(core_1.RenderOnDesktop, null,
+            react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
                 (0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }),
                 mainLinks !== undefined && react_1.default.createElement(header_1.default.Divider, { mx: 1 }),
                 (0, utils_1.isJsx)(services) ? services : react_1.default.createElement(header_1.default.Services, Object.assign({}, services))),
             (0, utils_1.isJsx)(notifications) ? notifications : react_1.default.createElement(header_1.default.Notifications, Object.assign({}, notifications)),
             (0, utils_1.isJsx)(account) ? account : react_1.default.createElement(header_1.default.Account, Object.assign({}, account)),
-            react_1.default.createElement(core_1.RenderOnMobile, null,
+            react_1.default.createElement(core_1.RenderOnScreen, { maxWidth: "lg" },
                 (account !== undefined || notifications !== undefined) && react_1.default.createElement(header_1.default.Divider, { ml: 2 }),
                 react_1.default.createElement(header_1.default.MobileToggle, null),
                 react_1.default.createElement(header_1.default.MobileContent, null,

package/dist/cjs/header/loggedOutHeader.js

@@ -26,14 +26,14 @@ exports.LoggedOutHeader = (0, core_1.vui)((props, ref) => {
     return (react_1.default.createElement(header_1.default, Object.assign({ className: (0, utils_1.cs)('vui-loggedOutHeader', className), ref: ref }, rest),
         react_1.default.createElement(header_1.default.Content, null,
             (0, utils_1.isJsx)(logo) ? logo : react_1.default.createElement(header_1.default.Logo, Object.assign({}, logo)),
-            react_1.default.createElement(core_1.RenderOnDesktop, null, children),
+            react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" }, children),
             react_1.default.createElement(box_1.default, { ml: "auto" }),
-            react_1.default.createElement(core_1.RenderOnDesktop, null,
+            react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
                 (0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }),
                 mainLinks !== undefined && react_1.default.createElement(header_1.default.Divider, { ml: 1, mr: 3 }),
                 (0, utils_1.isJsx)(signIn) ? signIn : react_1.default.createElement(header_1.default.SignIn, Object.assign({}, signIn)),
                 (0, utils_1.isJsx)(createAccount) ? createAccount : react_1.default.createElement(header_1.default.CreateAccount, Object.assign({}, createAccount))),
-            react_1.default.createElement(core_1.RenderOnMobile, null,
+            react_1.default.createElement(core_1.RenderOnScreen, { maxWidth: "lg" },
                 (0, utils_1.isJsx)(signIn) ? signIn : react_1.default.createElement(header_1.default.SignIn, Object.assign({}, signIn)),
                 react_1.default.createElement(header_1.default.Divider, { ml: 2 }),
                 react_1.default.createElement(header_1.default.MobileToggle, null),

package/dist/cjs/select/select.js

@@ -49,7 +49,7 @@ function Select(props) {
         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(selectContent_1.default, null,
-                    react_1.default.createElement(selectGroup_1.default, null, children !== null && children !== void 0 ? children : (_a = options === null || options === void 0 ? void 0 : options.map) === null || _a === void 0 ? void 0 : _a.call(options, option => react_1.default.createElement(selectOption_1.default, Object.assign({ key: option.value, title: option.text }, option)))))))));
+                    react_1.default.createElement(selectGroup_1.default, { tabIndex: 1000 }, children !== null && children !== void 0 ? children : (_a = options === null || options === void 0 ? void 0 : options.map) === null || _a === void 0 ? void 0 : _a.call(options, option => react_1.default.createElement(selectOption_1.default, Object.assign({ key: option.value, title: option.text }, option)))))))));
 }
 exports.Select = Select;
 Select.Button = selectButton_1.default;

package/dist/cjs/select/theme.js

@@ -21,16 +21,16 @@ const sizes = {
 const variants = {
     outlined: {
         button: {
-            hoverBg: 'transparent',
-            activeBg: 'transparent',
+            hoverBg: 'white',
+            activeBg: 'white',
             borderColor: 'grey.60',
             hoverBorderColor: 'grey.60'
         }
     },
     text: {
         button: {
-            hoverBg: 'transparent',
-            activeBg: 'transparent',
+            hoverBg: 'white',
+            activeBg: 'white',
             borderColor: 'transparent',
             hoverBorderColor: 'transparent'
         }

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

@@ -159,6 +159,7 @@ declare const defaultTheme: {
         md: number;
         lg: number;
         xl: number;
+        '2xl': number;
     };
     shadows: {
         '0': string;

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

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

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

@@ -159,6 +159,7 @@ declare const _default: {
         md: number;
         lg: number;
         xl: number;
+        '2xl': number;
     };
     shadows: {
         '0': string;

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

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

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

@@ -4,6 +4,7 @@ declare const _default: {
     md: number;
     lg: number;
     xl: number;
+    '2xl': number;
 };
 export default _default;
 //# sourceMappingURL=screens.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/screens.ts"],"names":[],"mappings":";;;;;;;AAAA,wBAMC"}
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/screens.ts"],"names":[],"mappings":";;;;;;;;AACA,wBAOC"}

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

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+// Pixel values inspired by https://tailwindcss.com/docs/screens
 exports.default = {
     xs: 0,
-    sm: 600,
-    md: 960,
-    lg: 1280,
-    xl: 1920
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAKtE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS,uDA6BpB,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"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"}

package/dist/esm/accordion/accordion.js

@@ -21,4 +21,6 @@ export const Accordion = vui((props, ref) => {
             ? items?.map?.((item, key) => (React.createElement(AccordionItem, { itemTitleHoverBg: itemTitleHoverBg, key: key, ...item })))
             : children)) : items ? (items?.map?.((item, key) => (React.createElement(AccordionItemHorizontal, { itemTitleHoverBg: itemTitleHoverBg, key: key, ...item })))) : (children))));
 });
+Accordion.Item = AccordionItem;
+Accordion.ItemHorizontal = AccordionItemHorizontal;
 export default Accordion;

package/dist/esm/core/media.d.ts

@@ -1,3 +1,4 @@
+import { useViewportWidth } from '@xstyled/styled-components';
 import { FC } from 'react';
 import { StyledProps } from 'styled-components';
 import { Screen } from '../theme';
@@ -5,10 +6,10 @@ import { AnyNumber, AnyString } from '../utils';
 import { ChildrenProp } from './types';
 declare type ScreenWidth = Screen | AnyNumber | AnyString;
 export declare type RenderOnScreenProps = {
-    /** Changes direction to below the breakpoint. */
-    isDown?: boolean;
     /** Breakpoint to compare viewport width against. */
-    screen?: Screen;
+    maxWidth?: Screen;
+    /** Breakpoint to compare viewport width against. */
+    minWidth?: Screen;
 };
 /** Returns CSS media string with appropriate min-width and max-width values. */
 export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
@@ -16,25 +17,17 @@ export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth
 export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
 /** Returns CSS media string with appropriate min-width value. */
 export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export declare const RenderOnDesktop: FC<RenderOnScreenProps & ChildrenProp>;
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export declare const RenderOnMobile: FC<RenderOnScreenProps & ChildrenProp>;
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
 export declare const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>;
-/** Returns true if current viewport width is between provided min and max widths. */
-export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
 /** Returns true if current viewport width is smaller than provided width. */
 export declare function useDown(width: ScreenWidth): boolean;
-/** Returns viewport width and provided screen width as a number. */
-export declare function useMedia(width: ScreenWidth): {
-    value: number;
-    viewportWidth: number | null;
-};
 /** Returns true if current viewport width is larger than or equal to provided width. */
 export declare function useUp(width: ScreenWidth): boolean;
-export {};
+/** Returns true if current viewport width is between provided min and max widths. */
+export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
+/** Return the width of the viewport. */
+export { useViewportWidth };
 //# sourceMappingURL=media.d.ts.map

package/dist/esm/core/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD,wGAAwG;AACxG,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAA0C,CAAA;AAE7G,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAAiD,CAAA;AAEnH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAGjE,CAAA;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW;;;EAO1C;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAejE,CAAA;AAyBD,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,wCAAwC;AACxC,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/core/media.js

@@ -9,39 +9,58 @@ export const mediaDown = (width) => (props) => {
 };
 /** Returns CSS media string with appropriate min-width value. */
 export const mediaUp = (width) => (props) => `@media (min-width: ${th.screen(width)(props)})`;
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export const RenderOnDesktop = props => React.createElement(RenderOnScreen, { ...props });
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export const RenderOnMobile = props => React.createElement(RenderOnScreen, { isDown: true, ...props });
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
-export const RenderOnScreen = ({ children, isDown, screen = 'md' }) => {
-    const mediaFn = isDown ? useDown : useUp;
-    return mediaFn(screen) ? React.createElement(React.Fragment, null, children) : null;
+export const RenderOnScreen = ({ children, maxWidth, minWidth }) => {
+    if (minWidth && maxWidth) {
+        return (React.createElement(RenderBetween, { maxWidth: maxWidth, minWidth: minWidth }, children));
+    }
+    if (minWidth) {
+        return React.createElement(RenderOver, { width: minWidth }, children);
+    }
+    if (maxWidth) {
+        return React.createElement(RenderUnder, { width: maxWidth }, children);
+    }
+    return React.createElement(React.Fragment, null, children);
 };
-/** Returns true if current viewport width is between provided min and max widths. */
-export function useBetween(minWidth, maxWidth) {
-    const isDown = useDown(maxWidth);
-    const isUp = useUp(minWidth);
-    return isDown && isUp;
-}
-/** Returns true if current viewport width is smaller than provided width. */
-export function useDown(width) {
-    const { value, viewportWidth } = useMedia(width);
-    return viewportWidth !== null && value !== null && viewportWidth < value;
-}
+const RenderBetween = ({ children, maxWidth, minWidth }) => {
+    const isBetween = useBetween(minWidth, maxWidth);
+    return isBetween ? React.createElement(React.Fragment, null, children) : null;
+};
+const RenderOver = ({ children, width }) => {
+    const isOver = useUp(width);
+    return isOver ? React.createElement(React.Fragment, null, children) : null;
+};
+const RenderUnder = ({ children, width }) => {
+    const isUnder = useDown(width);
+    return isUnder ? React.createElement(React.Fragment, null, children) : null;
+};
+/** /!\ No need to export it, keep it internal */
 /** Returns viewport width and provided screen width as a number. */
-export function useMedia(width) {
+function useMedia(width) {
     const theme = useTheme();
     const viewportWidth = useViewportWidth();
     const valueString = th.screen(width)({ theme });
     const value = Number(valueString.replace('px', ''));
     return { value, viewportWidth };
 }
+/** Returns true if current viewport width is smaller than provided width. */
+export function useDown(width) {
+    const { value, viewportWidth } = useMedia(width);
+    return viewportWidth !== null && value !== null && viewportWidth < value;
+}
 /** Returns true if current viewport width is larger than or equal to provided width. */
 export function useUp(width) {
     const { value, viewportWidth } = useMedia(width);
     return viewportWidth !== null && value !== null && viewportWidth >= value;
 }
+/** Returns true if current viewport width is between provided min and max widths. */
+export function useBetween(minWidth, maxWidth) {
+    const isDown = useDown(maxWidth);
+    const isUp = useUp(minWidth);
+    return isDown && isUp;
+}
+/** Return the width of the viewport. */
+export { useViewportWidth };

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyD,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAED,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA0CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAiBD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAED,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA0CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAiBD,eAAe,MAAM,CAAA"}

package/dist/esm/header/header.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { styled, useDown, useLinks, useStyleConfig, useUp, vui } from '../core';
+import { styled, useLinks, useStyleConfig, useUp, vui } from '../core';
 import { cs, useClickOutside } from '../utils';
 import { HeaderProvider } from './context';
 import HeaderAccount from './headerAccount';
@@ -34,8 +34,8 @@ export const Header = vui((props, ref) => {
     useClickOutside([mobileContentRef, mobileToggleRef], () => {
         setIsMobileOpen(false);
     });
-    const isDesktop = useUp('md');
-    const isMobile = useDown('md');
+    const isDesktop = useUp('lg');
+    const isMobile = !isDesktop;
     const context = {
         headerHeight,
         isDesktop,

package/dist/esm/header/headerServices.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RenderOnDesktop, RenderOnMobile, useStyleConfig } from '../core';
+import { RenderOnScreen, useStyleConfig } from '../core';
 import List from '../list';
 import Menu from '../menu';
 import { useHeaderContext } from './context';
@@ -14,12 +14,12 @@ export function HeaderServices(props) {
     const { buttonProps, links = [], ...rest } = props;
     const styles = useStyleConfig('Header', useHeaderContext()).services;
     return (React.createElement(React.Fragment, null,
-        React.createElement(RenderOnDesktop, null,
+        React.createElement(RenderOnScreen, { minWidth: "lg" },
             React.createElement(Menu, { isLazy: false, offset: [0, 8], placement: "bottom-end", size: "lg", ...rest },
                 React.createElement(Menu.Button, { colorScheme: "prussian", icon: "falTh", ml: 1, title: "My services", ...styles.button, ...buttonProps }),
                 React.createElement(Menu.List, { heading: "My Services", maxH: 400, w: 320, ...styles.list },
                     React.createElement(ListContent, { links: links })))),
-        React.createElement(RenderOnMobile, null,
+        React.createElement(RenderOnScreen, { maxWidth: "lg" },
             React.createElement(List, { borderBottom: "1px solid grey.40", heading: "My Services", ...styles.list },
                 React.createElement(ListContent, { links: links })))));
 }

package/dist/esm/header/loggedInHeader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Box from '../box';
-import { RenderOnDesktop, RenderOnMobile, vui } from '../core';
+import { RenderOnScreen, vui } from '../core';
 import { cs, isJsx } from '../utils';
 import Header from './header';
 /** Displays Header content appropriate for logged in users, such as services, notifications or account information. */
@@ -9,15 +9,15 @@ export const LoggedInHeader = vui((props, ref) => {
     return (React.createElement(Header, { className: cs('vui-loggedInHeader', className), ref: ref, ...rest },
         React.createElement(Header.Content, null,
             isJsx(logo) ? logo : React.createElement(Header.Logo, { ...logo }),
-            React.createElement(RenderOnDesktop, null, children),
+            React.createElement(RenderOnScreen, { minWidth: "lg" }, children),
             React.createElement(Box, { ml: "auto" }),
-            React.createElement(RenderOnDesktop, null,
+            React.createElement(RenderOnScreen, { minWidth: "lg" },
                 isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
                 mainLinks !== undefined && React.createElement(Header.Divider, { mx: 1 }),
                 isJsx(services) ? services : React.createElement(Header.Services, { ...services })),
             isJsx(notifications) ? notifications : React.createElement(Header.Notifications, { ...notifications }),
             isJsx(account) ? account : React.createElement(Header.Account, { ...account }),
-            React.createElement(RenderOnMobile, null,
+            React.createElement(RenderOnScreen, { maxWidth: "lg" },
                 (account !== undefined || notifications !== undefined) && React.createElement(Header.Divider, { ml: 2 }),
                 React.createElement(Header.MobileToggle, null),
                 React.createElement(Header.MobileContent, null,

package/dist/esm/header/loggedOutHeader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Box from '../box';
-import { RenderOnDesktop, RenderOnMobile, vui } from '../core';
+import { RenderOnScreen, vui } from '../core';
 import { cs, isJsx } from '../utils';
 import Header from './header';
 /** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
@@ -9,14 +9,14 @@ export const LoggedOutHeader = vui((props, ref) => {
     return (React.createElement(Header, { className: cs('vui-loggedOutHeader', className), ref: ref, ...rest },
         React.createElement(Header.Content, null,
             isJsx(logo) ? logo : React.createElement(Header.Logo, { ...logo }),
-            React.createElement(RenderOnDesktop, null, children),
+            React.createElement(RenderOnScreen, { minWidth: "lg" }, children),
             React.createElement(Box, { ml: "auto" }),
-            React.createElement(RenderOnDesktop, null,
+            React.createElement(RenderOnScreen, { minWidth: "lg" },
                 isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
                 mainLinks !== undefined && React.createElement(Header.Divider, { ml: 1, mr: 3 }),
                 isJsx(signIn) ? signIn : React.createElement(Header.SignIn, { ...signIn }),
                 isJsx(createAccount) ? createAccount : React.createElement(Header.CreateAccount, { ...createAccount })),
-            React.createElement(RenderOnMobile, null,
+            React.createElement(RenderOnScreen, { maxWidth: "lg" },
                 isJsx(signIn) ? signIn : React.createElement(Header.SignIn, { ...signIn }),
                 React.createElement(Header.Divider, { ml: 2 }),
                 React.createElement(Header.MobileToggle, null),

package/dist/esm/select/select.js

@@ -35,7 +35,7 @@ export function Select(props) {
             React.createElement(React.Fragment, null,
                 selectButton ?? React.createElement(SelectButton, null),
                 React.createElement(SelectContent, null,
-                    React.createElement(SelectGroup, null, children ??
+                    React.createElement(SelectGroup, { tabIndex: 1000 }, children ??
                         options?.map?.(option => React.createElement(SelectOption, { key: option.value, title: option.text, ...option }))))))));
 }
 Select.Button = SelectButton;

package/dist/esm/select/theme.js

@@ -19,16 +19,16 @@ const sizes = {
 const variants = {
     outlined: {
         button: {
-            hoverBg: 'transparent',
-            activeBg: 'transparent',
+            hoverBg: 'white',
+            activeBg: 'white',
             borderColor: 'grey.60',
             hoverBorderColor: 'grey.60'
         }
     },
     text: {
         button: {
-            hoverBg: 'transparent',
-            activeBg: 'transparent',
+            hoverBg: 'white',
+            activeBg: 'white',
             borderColor: 'transparent',
             hoverBorderColor: 'transparent'
         }

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

@@ -159,6 +159,7 @@ declare const defaultTheme: {
         md: number;
         lg: number;
         xl: number;
+        '2xl': number;
     };
     shadows: {
         '0': string;

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

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

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

@@ -159,6 +159,7 @@ declare const _default: {
         md: number;
         lg: number;
         xl: number;
+        '2xl': number;
     };
     shadows: {
         '0': string;

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

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

package/dist/esm/theme/foundations/screens.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     md: number;
     lg: number;
     xl: number;
+    '2xl': number;
 };
 export default _default;
 //# sourceMappingURL=screens.d.ts.map

package/dist/esm/theme/foundations/screens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/screens.ts"],"names":[],"mappings":";;;;;;;AAAA,wBAMC"}
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/screens.ts"],"names":[],"mappings":";;;;;;;;AACA,wBAOC"}

package/dist/esm/theme/foundations/screens.js

@@ -1,7 +1,9 @@
+// Pixel values inspired by https://tailwindcss.com/docs/screens
 export default {
     xs: 0,
-    sm: 600,
-    md: 960,
-    lg: 1280,
-    xl: 1920
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536
 };

package/package.json

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

package/src/accordion/accordion.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 
-import { styled, useStyleConfig, vui } from '../core'
+import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import List from '../list'
 import { cs, filterUndefined } from '../utils'
 import { AccordionItemProps, AccordionProps } from './accordion.types'
@@ -44,6 +44,12 @@ export const Accordion = vui<'div', AccordionProps>((props, ref) => {
       </AccordionBase>
     </AccordionProvider>
   )
-})
+}) as VuiComponent<'div', AccordionProps> & {
+  Item: typeof AccordionItem
+  ItemHorizontal: typeof AccordionItemHorizontal
+}
+
+Accordion.Item = AccordionItem
+Accordion.ItemHorizontal = AccordionItemHorizontal
 
 export default Accordion

package/src/core/media.tsx

@@ -10,10 +10,10 @@ import { ChildrenProp } from './types'
 type ScreenWidth = Screen | AnyNumber | AnyString
 
 export type RenderOnScreenProps = {
-  /** Changes direction to below the breakpoint. */
-  isDown?: boolean
   /** Breakpoint to compare viewport width against. */
-  screen?: Screen
+  maxWidth?: Screen
+  /** Breakpoint to compare viewport width against. */
+  minWidth?: Screen
 }
 
 /** Returns CSS media string with appropriate min-width and max-width values. */
@@ -29,38 +29,42 @@ export const mediaDown = (width: ScreenWidth) => (props: StyledProps<unknown>) =
 export const mediaUp = (width: ScreenWidth) => (props: StyledProps<unknown>) =>
   `@media (min-width: ${th.screen(width)(props)})`
 
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export const RenderOnDesktop: FC<RenderOnScreenProps & ChildrenProp> = props => <RenderOnScreen {...props} />
-
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export const RenderOnMobile: FC<RenderOnScreenProps & ChildrenProp> = props => <RenderOnScreen isDown {...props} />
-
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
-export const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp> = ({ children, isDown, screen = 'md' }) => {
-  const mediaFn = isDown ? useDown : useUp
-  return mediaFn(screen) ? <>{children}</> : null
+export const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp> = ({ children, maxWidth, minWidth }) => {
+  if (minWidth && maxWidth) {
+    return (
+      <RenderBetween maxWidth={maxWidth} minWidth={minWidth}>
+        {children}
+      </RenderBetween>
+    )
+  }
+  if (minWidth) {
+    return <RenderOver width={minWidth}>{children}</RenderOver>
+  }
+  if (maxWidth) {
+    return <RenderUnder width={maxWidth}>{children}</RenderUnder>
+  }
+  return <>{children}</>
 }
-
-/** Returns true if current viewport width is between provided min and max widths. */
-export function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth) {
-  const isDown = useDown(maxWidth)
-  const isUp = useUp(minWidth)
-
-  return isDown && isUp
+const RenderBetween: FC<{ maxWidth: Screen; minWidth: Screen } & ChildrenProp> = ({ children, maxWidth, minWidth }) => {
+  const isBetween = useBetween(minWidth, maxWidth)
+  return isBetween ? <>{children}</> : null
 }
-
-/** Returns true if current viewport width is smaller than provided width. */
-export function useDown(width: ScreenWidth) {
-  const { value, viewportWidth } = useMedia(width)
-
-  return viewportWidth !== null && value !== null && viewportWidth < value
+const RenderOver: FC<{ width: Screen } & ChildrenProp> = ({ children, width }) => {
+  const isOver = useUp(width)
+  return isOver ? <>{children}</> : null
+}
+const RenderUnder: FC<{ width: Screen } & ChildrenProp> = ({ children, width }) => {
+  const isUnder = useDown(width)
+  return isUnder ? <>{children}</> : null
 }
 
+/** /!\ No need to export it, keep it internal */
 /** Returns viewport width and provided screen width as a number. */
-export function useMedia(width: ScreenWidth) {
+function useMedia(width: ScreenWidth) {
   const theme = useTheme()
   const viewportWidth = useViewportWidth()
   const valueString = th.screen(width)({ theme }) as string
@@ -69,9 +73,27 @@ export function useMedia(width: ScreenWidth) {
   return { value, viewportWidth }
 }
 
+/** Returns true if current viewport width is smaller than provided width. */
+export function useDown(width: ScreenWidth) {
+  const { value, viewportWidth } = useMedia(width)
+
+  return viewportWidth !== null && value !== null && viewportWidth < value
+}
+
 /** Returns true if current viewport width is larger than or equal to provided width. */
 export function useUp(width: ScreenWidth) {
   const { value, viewportWidth } = useMedia(width)
 
   return viewportWidth !== null && value !== null && viewportWidth >= value
 }
+
+/** Returns true if current viewport width is between provided min and max widths. */
+export function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth) {
+  const isDown = useDown(maxWidth)
+  const isUp = useUp(minWidth)
+
+  return isDown && isUp
+}
+
+/** Return the width of the viewport. */
+export { useViewportWidth }

package/src/header/header.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react'
 
-import { styled, useDown, useLinks, useStyleConfig, useUp, vui, VuiComponent } from '../core'
+import { styled, useLinks, useStyleConfig, useUp, vui, VuiComponent } from '../core'
 import { cs, useClickOutside } from '../utils'
 import { HeaderProvider } from './context'
 import { HeaderProps } from './header.types'
@@ -41,8 +41,8 @@ export const Header = vui<'header', HeaderProps>((props, ref) => {
     setIsMobileOpen(false)
   })
 
-  const isDesktop = useUp('md')
-  const isMobile = useDown('md')
+  const isDesktop = useUp('lg')
+  const isMobile = !isDesktop
 
   const context = {
     headerHeight,

package/src/header/headerServices.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { RenderOnDesktop, RenderOnMobile, useStyleConfig } from '../core'
+import { RenderOnScreen, useStyleConfig } from '../core'
 import List from '../list'
 import Menu from '../menu'
 import { useHeaderContext } from './context'
@@ -31,7 +31,7 @@ export function HeaderServices(props: HeaderServicesProps) {
 
   return (
     <>
-      <RenderOnDesktop>
+      <RenderOnScreen minWidth="lg">
         <Menu isLazy={false} offset={[0, 8]} placement="bottom-end" size="lg" {...rest}>
           <Menu.Button
             colorScheme="prussian"
@@ -46,13 +46,13 @@ export function HeaderServices(props: HeaderServicesProps) {
             <ListContent links={links} />
           </Menu.List>
         </Menu>
-      </RenderOnDesktop>
+      </RenderOnScreen>
 
-      <RenderOnMobile>
+      <RenderOnScreen maxWidth="lg">
         <List borderBottom="1px solid grey.40" heading="My Services" {...styles.list}>
           <ListContent links={links} />
         </List>
-      </RenderOnMobile>
+      </RenderOnScreen>
     </>
   )
 }

package/src/header/loggedInHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Box from '../box'
-import { RenderOnDesktop, RenderOnMobile, vui } from '../core'
+import { RenderOnScreen, vui } from '../core'
 import { cs, isJsx } from '../utils'
 import Header from './header'
 import { LoggedInHeaderProps } from './header.types'
@@ -15,23 +15,23 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
       <Header.Content>
         {isJsx(logo) ? logo : <Header.Logo {...logo} />}
 
-        <RenderOnDesktop>{children}</RenderOnDesktop>
+        <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>
 
         <Box ml="auto" />
 
-        <RenderOnDesktop>
+        <RenderOnScreen minWidth="lg">
           {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
 
           {mainLinks !== undefined && <Header.Divider mx={1} />}
 
           {isJsx(services) ? services : <Header.Services {...services} />}
-        </RenderOnDesktop>
+        </RenderOnScreen>
 
         {isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
 
         {isJsx(account) ? account : <Header.Account {...account} />}
 
-        <RenderOnMobile>
+        <RenderOnScreen maxWidth="lg">
           {(account !== undefined || notifications !== undefined) && <Header.Divider ml={2} />}
 
           <Header.MobileToggle />
@@ -43,7 +43,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
 
             {isJsx(services) ? services : <Header.Services {...services} />}
           </Header.MobileContent>
-        </RenderOnMobile>
+        </RenderOnScreen>
       </Header.Content>
     </Header>
   )

package/src/header/loggedOutHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Box from '../box'
-import { RenderOnDesktop, RenderOnMobile, vui } from '../core'
+import { RenderOnScreen, vui } from '../core'
 import { cs, isJsx } from '../utils'
 import Header from './header'
 import { LoggedOutHeaderProps } from './header.types'
@@ -15,11 +15,11 @@ export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) =>
       <Header.Content>
         {isJsx(logo) ? logo : <Header.Logo {...logo} />}
 
-        <RenderOnDesktop>{children}</RenderOnDesktop>
+        <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>
 
         <Box ml="auto" />
 
-        <RenderOnDesktop>
+        <RenderOnScreen minWidth="lg">
           {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
 
           {mainLinks !== undefined && <Header.Divider ml={1} mr={3} />}
@@ -27,9 +27,9 @@ export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) =>
           {isJsx(signIn) ? signIn : <Header.SignIn {...signIn} />}
 
           {isJsx(createAccount) ? createAccount : <Header.CreateAccount {...createAccount} />}
-        </RenderOnDesktop>
+        </RenderOnScreen>
 
-        <RenderOnMobile>
+        <RenderOnScreen maxWidth="lg">
           {isJsx(signIn) ? signIn : <Header.SignIn {...signIn} />}
 
           <Header.Divider ml={2} />
@@ -43,7 +43,7 @@ export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) =>
 
             {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
           </Header.MobileContent>
-        </RenderOnMobile>
+        </RenderOnScreen>
       </Header.Content>
     </Header>
   )

package/src/select/select.tsx

@@ -59,7 +59,7 @@ export function Select(props: SelectProps) {
         <>
           {selectButton ?? <SelectButton />}
           <SelectContent>
-            <SelectGroup>
+            <SelectGroup tabIndex={1000}>
               {children ??
                 options?.map?.(option => <SelectOption key={option.value} title={option.text} {...option} />)}
             </SelectGroup>

package/src/select/theme.ts

@@ -23,16 +23,16 @@ const sizes = {
 const variants = {
   outlined: {
     button: {
-      hoverBg: 'transparent',
-      activeBg: 'transparent',
+      hoverBg: 'white',
+      activeBg: 'white',
       borderColor: 'grey.60',
       hoverBorderColor: 'grey.60'
     }
   },
   text: {
     button: {
-      hoverBg: 'transparent',
-      activeBg: 'transparent',
+      hoverBg: 'white',
+      activeBg: 'white',
       borderColor: 'transparent',
       hoverBorderColor: 'transparent'
     }

package/src/theme/foundations/screens.ts

@@ -1,7 +1,9 @@
+// Pixel values inspired by https://tailwindcss.com/docs/screens
 export default {
   xs: 0,
-  sm: 600,
-  md: 960,
-  lg: 1280,
-  xl: 1920
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536
 }