@easypost/easy-ui 1.0.0-alpha.8 → 1.0.0-alpha.80

package/ProductLayout/index.js

@@ -0,0 +1,278 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Menu = require("../__chunks__/Menu-OacI_98l.js");
+const Button = require("../__chunks__/Button-DUZZ9HoT.js");
+const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const Text = require("../__chunks__/Text-B1xglKFU.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-CnIn7VBo.js");
+const utilities_css = require("../utilities/css.js");
+const HelpMenu = require("../__chunks__/HelpMenu-LZ_ky28u.js");
+const tokens = require("../__chunks__/tokens-oBdmeeGv.js");
+const useModalOverlay = require("../__chunks__/useModalOverlay-E3JkPreO.js");
+const Overlay = require("../__chunks__/Overlay-88Ee_QUh.js");
+const useDialog = require("../__chunks__/useDialog-D_2QCyti.js");
+const TabNav = require("../__chunks__/TabNav-DTnHIUFZ.js");
+const useOverlayTrigger = require("../__chunks__/useOverlayTrigger-DSYyww_1.js");
+const ProductLayout$1 = "_ProductLayout_1orpb_4";
+const body = "_body_1orpb_10";
+const styles$4 = {
+  ProductLayout: ProductLayout$1,
+  body
+};
+function ProductLayoutContent(props) {
+  const { children } = props;
+  return React.createElement("main", {
+    className: styles$4.content
+  }, children);
+}
+const productLayoutMediaQuery = `(min-width: ${tokens.ezuiTokens["breakpoint.lg"]})`;
+const largeScreen$1 = "_largeScreen_1tr81_4";
+const smallScreen$1 = "_smallScreen_1tr81_13";
+const styles$3 = {
+  largeScreen: largeScreen$1,
+  smallScreen: smallScreen$1
+};
+function LayoutScreenSizeRenderer(props) {
+  const { onChange = () => {
+  }, renderOnLargeScreen, renderOnSmallScreen } = props;
+  React.useEffect(() => {
+    const mediaQueries = window.matchMedia(productLayoutMediaQuery);
+    const handleChange = (mediaQueryList) => {
+      onChange(mediaQueryList.matches);
+    };
+    mediaQueries.addEventListener("change", handleChange);
+    return () => {
+      mediaQueries.removeEventListener("change", handleChange);
+    };
+  }, [onChange]);
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: styles$3.largeScreen
+  }, renderOnLargeScreen()), React.createElement("div", {
+    className: styles$3.smallScreen
+  }, renderOnSmallScreen()));
+}
+const ProductLayoutContext = React.createContext(null);
+const useProductLayout = () => {
+  const productLayoutContext = React.useContext(ProductLayoutContext);
+  if (!productLayoutContext) {
+    throw new Error("useProductLayout must be used within a ProductLayout");
+  }
+  return productLayoutContext;
+};
+const ProductLayoutHeader$1 = "_ProductLayoutHeader_efq4l_4";
+const largeScreen = "_largeScreen_efq4l_8";
+const smallScreen = "_smallScreen_efq4l_13";
+const smallScreenTopBar = "_smallScreenTopBar_efq4l_18";
+const logoMenu = "_logoMenu_efq4l_23";
+const logoMenuBtn = "_logoMenuBtn_efq4l_29";
+const divider = "_divider_efq4l_34";
+const actions = "_actions_efq4l_40";
+const styles$2 = {
+  ProductLayoutHeader: ProductLayoutHeader$1,
+  largeScreen,
+  smallScreen,
+  smallScreenTopBar,
+  logoMenu,
+  logoMenuBtn,
+  divider,
+  actions
+};
+function ProductLayoutHeader(props) {
+  return React.createElement("header", null, React.createElement(LayoutScreenSizeRenderer, {
+    renderOnLargeScreen: () => React.createElement(LargeScreenHeader, __spreadValues({}, props)),
+    renderOnSmallScreen: () => React.createElement(SmallScreenHeader, __spreadValues({}, props))
+  }));
+}
+function SmallScreenHeader(props) {
+  const { helpMenuItems, onHelpMenuAction, primaryAction, renderSmallScreenLogo, title } = props;
+  const { sidebarTriggerProps } = useProductLayout();
+  return React.createElement("div", {
+    className: utilities_css.classNames(styles$2.ProductLayoutHeader, styles$2.smallScreen)
+  }, React.createElement("div", {
+    className: styles$2.smallScreenTopBar
+  }, React.createElement("div", {
+    className: styles$2.logoMenu
+  }, React.createElement(UnstyledButton.UnstyledButton, __spreadValues({
+    className: styles$2.logoMenuBtn
+  }, sidebarTriggerProps), React.createElement(Icon.Icon, {
+    symbol: Menu.Menu
+  }), React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, "Menu")), renderSmallScreenLogo()), React.createElement("div", {
+    className: styles$2.actions
+  }, primaryAction ? React.createElement(Button.Button, {
+    size: "sm",
+    onPress: primaryAction.onAction,
+    isDisabled: primaryAction.isDisabled
+  }, primaryAction.content) : React.createElement(HelpMenu.HelpMenu, {
+    items: helpMenuItems,
+    onAction: onHelpMenuAction
+  }))), React.createElement(Text.Text, {
+    as: "h2",
+    variant: "heading4"
+  }, title));
+}
+function LargeScreenHeader(props) {
+  const { helpMenuItems, onHelpMenuAction, primaryAction, secondaryAction, title } = props;
+  return React.createElement("div", {
+    className: utilities_css.classNames(styles$2.ProductLayoutHeader, styles$2.largeScreen)
+  }, React.createElement(Text.Text, {
+    as: "h2",
+    variant: "heading4"
+  }, title), React.createElement("div", {
+    className: styles$2.actions
+  }, React.createElement(HelpMenu.HelpMenu, {
+    items: helpMenuItems,
+    onAction: onHelpMenuAction
+  }), (primaryAction || secondaryAction) && React.createElement(ActionDivider, null), secondaryAction && React.createElement(Button.Button, {
+    variant: "outlined",
+    color: "support",
+    onPress: secondaryAction.onAction,
+    isDisabled: secondaryAction.isDisabled
+  }, secondaryAction.content), primaryAction && React.createElement(Button.Button, {
+    onPress: primaryAction.onAction,
+    isDisabled: primaryAction.isDisabled
+  }, primaryAction.content)));
+}
+function ActionDivider() {
+  return React.createElement("div", {
+    className: styles$2.divider
+  });
+}
+const ProductLayoutSidebar$1 = "_ProductLayoutSidebar_puj90_4";
+const open = "_open_puj90_42";
+const overlay = "_overlay_puj90_48";
+const styles$1 = {
+  ProductLayoutSidebar: ProductLayoutSidebar$1,
+  open,
+  overlay
+};
+function ProductLayoutSidebar(props) {
+  const { sidebarTriggerState } = useProductLayout();
+  const handleScreenSizeChange = React.useCallback((isLargeScreen) => {
+    if (isLargeScreen) {
+      sidebarTriggerState.close();
+    }
+  }, [sidebarTriggerState]);
+  return React.createElement(LayoutScreenSizeRenderer, {
+    onChange: handleScreenSizeChange,
+    renderOnLargeScreen: () => React.createElement(LargeScreenSidebar, __spreadValues({}, props)),
+    renderOnSmallScreen: () => React.createElement(SmallScreenSidebar, __spreadValues({}, props))
+  });
+}
+function LargeScreenSidebar(props) {
+  const { children } = props;
+  const { sidebarTriggerState } = useProductLayout();
+  const className = utilities_css.classNames(styles$1.ProductLayoutSidebar, sidebarTriggerState.isOpen && styles$1.open);
+  return React.createElement("div", {
+    role: "region",
+    "aria-label": "Sidebar",
+    className
+  }, children);
+}
+function SmallScreenSidebar(props) {
+  const { children } = props;
+  const { sidebarTriggerState } = useProductLayout();
+  return sidebarTriggerState.isOpen ? React.createElement(DialogSidebarOverlay, null, React.createElement(DialogSidebar, null, children)) : null;
+}
+function DialogSidebar(props) {
+  const { children } = props;
+  const ref = React.useRef(null);
+  const { dialogProps } = useDialog.$40df3f8667284809$export$d55e7ee900f34e93({
+    role: "dialog",
+    "aria-label": "Sidebar"
+  }, ref);
+  const className = utilities_css.classNames(styles$1.ProductLayoutSidebar, styles$1.open);
+  return React.createElement("div", __spreadProps(__spreadValues({}, dialogProps), {
+    ref,
+    className
+  }), children);
+}
+function DialogSidebarOverlay(props) {
+  var _a;
+  const { children } = props;
+  const { layoutContainerRef, sidebarTriggerState } = useProductLayout();
+  const ref = React.useRef(null);
+  const { modalProps, underlayProps } = useModalOverlay.$8ac8429251c45e4b$export$dbc0f175b25fb0fb({
+    isDismissable: true,
+    isKeyboardDismissDisabled: false
+  }, sidebarTriggerState, ref);
+  return React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, {
+    portalContainer: (_a = layoutContainerRef.current) != null ? _a : void 0
+  }, React.createElement("div", __spreadValues({
+    className: styles$1.overlay
+  }, underlayProps), React.createElement("div", __spreadValues({
+    ref
+  }, modalProps), children)));
+}
+const ProductLayoutTabbedContent$1 = "_ProductLayoutTabbedContent_1nnkc_4";
+const styles = {
+  ProductLayoutTabbedContent: ProductLayoutTabbedContent$1
+};
+function ProductLayoutTabbedContent(props) {
+  const _a = props, { children, tabs } = _a, tabNavProps = __objRest(_a, ["children", "tabs"]);
+  return React.createElement("div", {
+    className: styles.ProductLayoutTabbedContent
+  }, React.createElement(TabNav.TabNav, __spreadValues({}, tabNavProps), tabs), React.createElement("main", null, children));
+}
+function ProductLayout(props) {
+  const { sidebar, header, content } = props;
+  const layoutContainerRef = React.useRef(null);
+  const state = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6({});
+  const { triggerProps, overlayProps } = useOverlayTrigger.$628037886ba31236$export$f9d5c8beee7d008d({
+    type: "dialog"
+  }, state);
+  const context = React.useMemo(() => {
+    return {
+      layoutContainerRef,
+      sidebarTriggerState: state,
+      sidebarTriggerProps: triggerProps,
+      sidebarOverlayProps: overlayProps
+    };
+  }, [state, triggerProps, overlayProps]);
+  return React.createElement(ProductLayoutContext.Provider, {
+    value: context
+  }, React.createElement("div", {
+    className: styles$4.ProductLayout,
+    ref: layoutContainerRef
+  }, sidebar, React.createElement("div", {
+    className: styles$4.body
+  }, header, content)));
+}
+ProductLayout.Sidebar = ProductLayoutSidebar;
+ProductLayout.Header = ProductLayoutHeader;
+ProductLayout.Content = ProductLayoutContent;
+ProductLayout.TabbedContent = ProductLayoutTabbedContent;
+exports.ProductLayout = ProductLayout;

package/ProductLayout/index.mjs

@@ -0,0 +1,278 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React__default, { useEffect, createContext, useContext, useCallback, useRef, useMemo } from "react";
+import { M as Menu } from "../__chunks__/Menu-qMqvSorL.mjs";
+import { B as Button } from "../__chunks__/Button-BE3zVhME.mjs";
+import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
+import { T as Text } from "../__chunks__/Text-CX5GoBTS.mjs";
+import { U as UnstyledButton } from "../__chunks__/UnstyledButton-CfhKDftV.mjs";
+import { classNames } from "../utilities/css.mjs";
+import { H as HelpMenu } from "../__chunks__/HelpMenu-DHNd3X_S.mjs";
+import { e as ezuiTokens } from "../__chunks__/tokens-D4KvbbyC.mjs";
+import { $ as $8ac8429251c45e4b$export$dbc0f175b25fb0fb } from "../__chunks__/useModalOverlay-1zoyqSAR.mjs";
+import { d as $337b884510726a0d$export$c6fdb837b070b4ff, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../__chunks__/Overlay-Cj4W5w8m.mjs";
+import { $ as $40df3f8667284809$export$d55e7ee900f34e93 } from "../__chunks__/useDialog-BhvpnpTk.mjs";
+import { T as TabNav } from "../__chunks__/TabNav-D2_vfrMU.mjs";
+import { $ as $628037886ba31236$export$f9d5c8beee7d008d } from "../__chunks__/useOverlayTrigger-DTO7VB3r.mjs";
+const ProductLayout$1 = "_ProductLayout_1orpb_4";
+const body = "_body_1orpb_10";
+const styles$4 = {
+  ProductLayout: ProductLayout$1,
+  body
+};
+function ProductLayoutContent(props) {
+  const { children } = props;
+  return React__default.createElement("main", {
+    className: styles$4.content
+  }, children);
+}
+const productLayoutMediaQuery = `(min-width: ${ezuiTokens["breakpoint.lg"]})`;
+const largeScreen$1 = "_largeScreen_1tr81_4";
+const smallScreen$1 = "_smallScreen_1tr81_13";
+const styles$3 = {
+  largeScreen: largeScreen$1,
+  smallScreen: smallScreen$1
+};
+function LayoutScreenSizeRenderer(props) {
+  const { onChange = () => {
+  }, renderOnLargeScreen, renderOnSmallScreen } = props;
+  useEffect(() => {
+    const mediaQueries = window.matchMedia(productLayoutMediaQuery);
+    const handleChange = (mediaQueryList) => {
+      onChange(mediaQueryList.matches);
+    };
+    mediaQueries.addEventListener("change", handleChange);
+    return () => {
+      mediaQueries.removeEventListener("change", handleChange);
+    };
+  }, [onChange]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$3.largeScreen
+  }, renderOnLargeScreen()), React__default.createElement("div", {
+    className: styles$3.smallScreen
+  }, renderOnSmallScreen()));
+}
+const ProductLayoutContext = createContext(null);
+const useProductLayout = () => {
+  const productLayoutContext = useContext(ProductLayoutContext);
+  if (!productLayoutContext) {
+    throw new Error("useProductLayout must be used within a ProductLayout");
+  }
+  return productLayoutContext;
+};
+const ProductLayoutHeader$1 = "_ProductLayoutHeader_efq4l_4";
+const largeScreen = "_largeScreen_efq4l_8";
+const smallScreen = "_smallScreen_efq4l_13";
+const smallScreenTopBar = "_smallScreenTopBar_efq4l_18";
+const logoMenu = "_logoMenu_efq4l_23";
+const logoMenuBtn = "_logoMenuBtn_efq4l_29";
+const divider = "_divider_efq4l_34";
+const actions = "_actions_efq4l_40";
+const styles$2 = {
+  ProductLayoutHeader: ProductLayoutHeader$1,
+  largeScreen,
+  smallScreen,
+  smallScreenTopBar,
+  logoMenu,
+  logoMenuBtn,
+  divider,
+  actions
+};
+function ProductLayoutHeader(props) {
+  return React__default.createElement("header", null, React__default.createElement(LayoutScreenSizeRenderer, {
+    renderOnLargeScreen: () => React__default.createElement(LargeScreenHeader, __spreadValues({}, props)),
+    renderOnSmallScreen: () => React__default.createElement(SmallScreenHeader, __spreadValues({}, props))
+  }));
+}
+function SmallScreenHeader(props) {
+  const { helpMenuItems, onHelpMenuAction, primaryAction, renderSmallScreenLogo, title } = props;
+  const { sidebarTriggerProps } = useProductLayout();
+  return React__default.createElement("div", {
+    className: classNames(styles$2.ProductLayoutHeader, styles$2.smallScreen)
+  }, React__default.createElement("div", {
+    className: styles$2.smallScreenTopBar
+  }, React__default.createElement("div", {
+    className: styles$2.logoMenu
+  }, React__default.createElement(UnstyledButton, __spreadValues({
+    className: styles$2.logoMenuBtn
+  }, sidebarTriggerProps), React__default.createElement(Icon, {
+    symbol: Menu
+  }), React__default.createElement(Text, {
+    visuallyHidden: true
+  }, "Menu")), renderSmallScreenLogo()), React__default.createElement("div", {
+    className: styles$2.actions
+  }, primaryAction ? React__default.createElement(Button, {
+    size: "sm",
+    onPress: primaryAction.onAction,
+    isDisabled: primaryAction.isDisabled
+  }, primaryAction.content) : React__default.createElement(HelpMenu, {
+    items: helpMenuItems,
+    onAction: onHelpMenuAction
+  }))), React__default.createElement(Text, {
+    as: "h2",
+    variant: "heading4"
+  }, title));
+}
+function LargeScreenHeader(props) {
+  const { helpMenuItems, onHelpMenuAction, primaryAction, secondaryAction, title } = props;
+  return React__default.createElement("div", {
+    className: classNames(styles$2.ProductLayoutHeader, styles$2.largeScreen)
+  }, React__default.createElement(Text, {
+    as: "h2",
+    variant: "heading4"
+  }, title), React__default.createElement("div", {
+    className: styles$2.actions
+  }, React__default.createElement(HelpMenu, {
+    items: helpMenuItems,
+    onAction: onHelpMenuAction
+  }), (primaryAction || secondaryAction) && React__default.createElement(ActionDivider, null), secondaryAction && React__default.createElement(Button, {
+    variant: "outlined",
+    color: "support",
+    onPress: secondaryAction.onAction,
+    isDisabled: secondaryAction.isDisabled
+  }, secondaryAction.content), primaryAction && React__default.createElement(Button, {
+    onPress: primaryAction.onAction,
+    isDisabled: primaryAction.isDisabled
+  }, primaryAction.content)));
+}
+function ActionDivider() {
+  return React__default.createElement("div", {
+    className: styles$2.divider
+  });
+}
+const ProductLayoutSidebar$1 = "_ProductLayoutSidebar_puj90_4";
+const open = "_open_puj90_42";
+const overlay = "_overlay_puj90_48";
+const styles$1 = {
+  ProductLayoutSidebar: ProductLayoutSidebar$1,
+  open,
+  overlay
+};
+function ProductLayoutSidebar(props) {
+  const { sidebarTriggerState } = useProductLayout();
+  const handleScreenSizeChange = useCallback((isLargeScreen) => {
+    if (isLargeScreen) {
+      sidebarTriggerState.close();
+    }
+  }, [sidebarTriggerState]);
+  return React__default.createElement(LayoutScreenSizeRenderer, {
+    onChange: handleScreenSizeChange,
+    renderOnLargeScreen: () => React__default.createElement(LargeScreenSidebar, __spreadValues({}, props)),
+    renderOnSmallScreen: () => React__default.createElement(SmallScreenSidebar, __spreadValues({}, props))
+  });
+}
+function LargeScreenSidebar(props) {
+  const { children } = props;
+  const { sidebarTriggerState } = useProductLayout();
+  const className = classNames(styles$1.ProductLayoutSidebar, sidebarTriggerState.isOpen && styles$1.open);
+  return React__default.createElement("div", {
+    role: "region",
+    "aria-label": "Sidebar",
+    className
+  }, children);
+}
+function SmallScreenSidebar(props) {
+  const { children } = props;
+  const { sidebarTriggerState } = useProductLayout();
+  return sidebarTriggerState.isOpen ? React__default.createElement(DialogSidebarOverlay, null, React__default.createElement(DialogSidebar, null, children)) : null;
+}
+function DialogSidebar(props) {
+  const { children } = props;
+  const ref = React__default.useRef(null);
+  const { dialogProps } = $40df3f8667284809$export$d55e7ee900f34e93({
+    role: "dialog",
+    "aria-label": "Sidebar"
+  }, ref);
+  const className = classNames(styles$1.ProductLayoutSidebar, styles$1.open);
+  return React__default.createElement("div", __spreadProps(__spreadValues({}, dialogProps), {
+    ref,
+    className
+  }), children);
+}
+function DialogSidebarOverlay(props) {
+  var _a;
+  const { children } = props;
+  const { layoutContainerRef, sidebarTriggerState } = useProductLayout();
+  const ref = React__default.useRef(null);
+  const { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb({
+    isDismissable: true,
+    isKeyboardDismissDisabled: false
+  }, sidebarTriggerState, ref);
+  return React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, {
+    portalContainer: (_a = layoutContainerRef.current) != null ? _a : void 0
+  }, React__default.createElement("div", __spreadValues({
+    className: styles$1.overlay
+  }, underlayProps), React__default.createElement("div", __spreadValues({
+    ref
+  }, modalProps), children)));
+}
+const ProductLayoutTabbedContent$1 = "_ProductLayoutTabbedContent_1nnkc_4";
+const styles = {
+  ProductLayoutTabbedContent: ProductLayoutTabbedContent$1
+};
+function ProductLayoutTabbedContent(props) {
+  const _a = props, { children, tabs } = _a, tabNavProps = __objRest(_a, ["children", "tabs"]);
+  return React__default.createElement("div", {
+    className: styles.ProductLayoutTabbedContent
+  }, React__default.createElement(TabNav, __spreadValues({}, tabNavProps), tabs), React__default.createElement("main", null, children));
+}
+function ProductLayout(props) {
+  const { sidebar, header, content } = props;
+  const layoutContainerRef = useRef(null);
+  const state = $fc909762b330b746$export$61c6a8c84e605fb6({});
+  const { triggerProps, overlayProps } = $628037886ba31236$export$f9d5c8beee7d008d({
+    type: "dialog"
+  }, state);
+  const context = useMemo(() => {
+    return {
+      layoutContainerRef,
+      sidebarTriggerState: state,
+      sidebarTriggerProps: triggerProps,
+      sidebarOverlayProps: overlayProps
+    };
+  }, [state, triggerProps, overlayProps]);
+  return React__default.createElement(ProductLayoutContext.Provider, {
+    value: context
+  }, React__default.createElement("div", {
+    className: styles$4.ProductLayout,
+    ref: layoutContainerRef
+  }, sidebar, React__default.createElement("div", {
+    className: styles$4.body
+  }, header, content)));
+}
+ProductLayout.Sidebar = ProductLayoutSidebar;
+ProductLayout.Header = ProductLayoutHeader;
+ProductLayout.Content = ProductLayoutContent;
+ProductLayout.TabbedContent = ProductLayoutTabbedContent;
+export {
+  ProductLayout
+};

package/Provider/Provider.d.ts

@@ -1,17 +1,34 @@
-import React, { ReactElement } from "react";
+import { Href, RouterOptions } from "@react-types/shared";
+import React, { ReactElement, ReactNode } from "react";
 import { NotificationPlacement } from "../Notification";
 import type { ColorScheme, ThemeCreator } from "../Theme";
 import "../styles/global.scss";
-export interface ProviderProps {
+export type EasyUIRouterProviderProps = {
+    /**
+     * A function received from your router for performing a client side
+     * navigation programmatically.
+     */
+    navigate?: (path: Href, routerOptions: RouterOptions | undefined) => void;
+    /**
+     * An optional prop that converts a router-specific href to a native HTML
+     * href, e.g. prepending a base path.
+     */
+    useHref?: (href: Href) => string;
+    /**
+     * RouterProvider children.
+     */
+    children: ReactNode;
+};
+export type ProviderProps = {
     /** Component tree  */
     children: ReactElement;
     /** Theme to apply to Easy UI. Use `createTheme()` to build theme object.  */
     theme?: ThemeCreator;
     /** Color scheme to apply to Easy UI.  */
     colorScheme?: ColorScheme;
-    /** Notification placement props */
+    /** Notification placement props. */
     notificationPlacement?: NotificationPlacement;
-}
+} & Omit<EasyUIRouterProviderProps, "children">;
 /**
  * Easy UI's Provider
  *
@@ -60,5 +77,5 @@ export interface ProviderProps {
 *}
 *```
  */
-export declare function Provider({ children, theme, colorScheme, notificationPlacement, }: ProviderProps): React.JSX.Element;
+export declare function Provider({ children, theme, colorScheme, notificationPlacement, navigate, useHref, }: ProviderProps): React.JSX.Element;
 //# sourceMappingURL=Provider.d.ts.map

package/Provider/Provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../src/Provider/Provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAwB,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE1D,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,aAAa;IAC5B,sBAAsB;IACtB,QAAQ,EAAE,YAAY,CAAC;IACvB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,mCAAmC;IACnC,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,qBAAqB,GACtB,EAAE,aAAa,qBAQf"}
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../src/Provider/Provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAwB,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG1D,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAE1E;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAEjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,sBAAsB;IACtB,QAAQ,EAAE,YAAY,CAAC;IACvB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,qBAAqB,EACrB,QAAQ,EACR,OAAO,GACR,EAAE,aAAa,qBAUf"}

package/Provider/index.js

@@ -1,26 +1,28 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const usePress = require("../__chunks__/usePress-Btah4Wrd.js");
 const React = require("react");
-const Theme_index = require("../Theme/index.js");
-const Notification_index = require("../Notification/index.js");
-require("../__chunks__/tokens-ad06cd2c.js");
-require("../utilities/tokens.js");
-require("../utilities/css.js");
-require("../__chunks__/import-a1e0f814.js");
-require("../__chunks__/import-26676303.js");
-require("../__chunks__/real-module-e36b1436.js");
-require("react-dom");
-require("../Icon/index.js");
-require("../Text/index.js");
-require("../__chunks__/index-5f429325.js");
-require("../__chunks__/omit-fca26542.js");
-const global = "";
-function Provider({ children, theme, colorScheme, notificationPlacement }) {
-  return React.createElement(Theme_index.ThemeProvider, {
+const Notification = require("../__chunks__/Notification-D7ceWiZq.js");
+const Theme = require("../__chunks__/Theme-Cos5kTlc.js");
+function Provider({ children, theme, colorScheme, notificationPlacement, navigate, useHref }) {
+  return React.createElement(EasyUIRouterProvider, {
+    navigate,
+    useHref
+  }, React.createElement(Theme.ThemeProvider, {
     theme,
     colorScheme
-  }, React.createElement(Notification_index.NotificationProvider, {
+  }, React.createElement(Notification.NotificationProvider, {
     notificationPlacement
-  }, children));
+  }, children)));
+}
+function EasyUIRouterProvider(props) {
+  const { navigate, useHref, children } = props;
+  if (navigate) {
+    return React.createElement(usePress.$ea8dcbcb9ea1b556$export$323e4fc2fa4753fb, {
+      navigate,
+      useHref
+    }, children);
+  }
+  return children;
 }
 exports.Provider = Provider;