@easypost/easy-ui 1.0.0-alpha.6 → 1.0.0-alpha.60

package/ProductLayout/index.mjs

@@ -0,0 +1,277 @@
+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-bGGT-c6v.mjs";
+import { I as Icon } from "../__chunks__/Icon-QGDwoR1f.mjs";
+import { T as Text } from "../__chunks__/Text-D8wg72pq.mjs";
+import { U as UnstyledButton } from "../__chunks__/UnstyledButton-B7BScs8i.mjs";
+import { classNames } from "../utilities/css.mjs";
+import { H as HelpMenu } from "../__chunks__/HelpMenu-CCHBb1Kr.mjs";
+import { e as ezuiTokens } from "../__chunks__/tokens-BolVbjJp.mjs";
+import { a as $40df3f8667284809$export$d55e7ee900f34e93, $ as $8ac8429251c45e4b$export$dbc0f175b25fb0fb } from "../__chunks__/useDialog-DAYxqkKY.mjs";
+import { c as $337b884510726a0d$export$c6fdb837b070b4ff, b as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../__chunks__/Overlay-CuhLUuXt.mjs";
+import { T as TabNav } from "../__chunks__/TabNav-2W0d3JQ0.mjs";
+import { c as $628037886ba31236$export$f9d5c8beee7d008d } from "../__chunks__/ariaHideOutside-DcIkumuG.mjs";
+const ProductLayout$1 = "_ProductLayout_2paoh_5";
+const body = "_body_2paoh_11";
+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_r7z6z_5";
+const smallScreen$1 = "_smallScreen_r7z6z_14";
+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_qtwyt_5";
+const largeScreen = "_largeScreen_qtwyt_9";
+const smallScreen = "_smallScreen_qtwyt_14";
+const smallScreenTopBar = "_smallScreenTopBar_qtwyt_19";
+const logoMenu = "_logoMenu_qtwyt_24";
+const logoMenuBtn = "_logoMenuBtn_qtwyt_30";
+const divider = "_divider_qtwyt_35";
+const actions = "_actions_qtwyt_41";
+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_1wgov_5";
+const open = "_open_1wgov_43";
+const overlay = "_overlay_1wgov_49";
+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_37p8k_5";
+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-Dz8YYpge.js");
 const React = require("react");
-const Theme_index = require("../Theme/index.js");
-const Notification_index = require("../Notification/index.js");
-require("../__chunks__/tokens-e696ca96.js");
-require("../utilities/tokens.js");
-require("../utilities/css.js");
-require("../__chunks__/import-a1e0f814.js");
-require("../__chunks__/import-2b302763.js");
-require("../__chunks__/real-module-e36b1436.js");
-require("react-dom");
-require("../Icon/index.js");
-require("../Text/index.js");
-require("../__chunks__/index-3985350a.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-D90-75ZN.js");
+const Theme = require("../__chunks__/Theme-BTOgcCP2.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;

package/Provider/index.mjs

@@ -1,25 +1,27 @@
+import { d as $ea8dcbcb9ea1b556$export$323e4fc2fa4753fb } from "../__chunks__/usePress-lFMUra6S.mjs";
 import React__default from "react";
-import { ThemeProvider } from "../Theme/index.mjs";
-import { NotificationProvider } from "../Notification/index.mjs";
-import "../__chunks__/tokens-6be8e137.mjs";
-import "../utilities/tokens.mjs";
-import "../utilities/css.mjs";
-import "../__chunks__/import-19bc38ac.mjs";
-import "../__chunks__/import-3d962a94.mjs";
-import "../__chunks__/real-module-515df21d.mjs";
-import "react-dom";
-import "../Icon/index.mjs";
-import "../Text/index.mjs";
-import "../__chunks__/index-29d7bca9.mjs";
-import "../__chunks__/omit-f17deb8f.mjs";
-const global = "";
-function Provider({ children, theme, colorScheme, notificationPlacement }) {
-  return React__default.createElement(ThemeProvider, {
+import { b as NotificationProvider } from "../__chunks__/Notification-lqESwByD.mjs";
+import { T as ThemeProvider } from "../__chunks__/Theme-CKTfAcvs.mjs";
+function Provider({ children, theme, colorScheme, notificationPlacement, navigate, useHref }) {
+  return React__default.createElement(EasyUIRouterProvider, {
+    navigate,
+    useHref
+  }, React__default.createElement(ThemeProvider, {
     theme,
     colorScheme
   }, React__default.createElement(NotificationProvider, {
     notificationPlacement
-  }, children));
+  }, children)));
+}
+function EasyUIRouterProvider(props) {
+  const { navigate, useHref, children } = props;
+  if (navigate) {
+    return React__default.createElement($ea8dcbcb9ea1b556$export$323e4fc2fa4753fb, {
+      navigate,
+      useHref
+    }, children);
+  }
+  return children;
 }
 export {
   Provider

package/README.md

@@ -1,6 +1,6 @@
-# Easy UI React
+# Easy UI
 
-Easy UI React is a component library designed to help developers create the best experience for shippers who use EasyPost.
+[Easy UI](https://github.com/EasyPost/easy-ui) is a component library designed to help developers create the best experience for shippers who use EasyPost.
 
 ## Installation
 
@@ -20,8 +20,9 @@ npm install @easypost/easy-ui --save
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-400.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-400.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-400.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-400.woff") format("woff");
 }
 
 @font-face {
@@ -29,8 +30,9 @@ npm install @easypost/easy-ui --save
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-500.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-500.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-500.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-500.woff") format("woff");
 }
 
 @font-face {
@@ -38,8 +40,9 @@ npm install @easypost/easy-ui --save
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-600.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-600.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-600.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-600.woff") format("woff");
 }
 
 @font-face {
@@ -47,8 +50,9 @@ npm install @easypost/easy-ui --save
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-700.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-700.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-700.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-700.woff") format("woff");
 }
 ```
 
@@ -69,14 +73,16 @@ import { Provider as EasyUIProvider } from "@easypost/easy-ui/Provider";
 ```js
 ReactDOM.render(
   <EasyUIProvider>
-    <div>
-      {/* More to come */}
-    </div>
-  </AppProvider>,
+    <div>{/* More to come */}</div>
+  </EasyUIProvider>,
   document.querySelector("#app"),
 );
 ```
 
+### Server Rendering
+
+When server rendering an app that uses Easy UI and React <18, your app must be wrapped with a single instance of React Aria's `SSRProvider`. If an app is using an additional version of React Aria, ensure there's only one version of `@react-aria/ssr` using NPM's `overrides` or Yarn's `resolutions` property.
+
 ## Development
 
 We use Storybook to create a simple, hot-reloading playground for development on these components.

package/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,103 @@
+import React, { ReactNode } from "react";
+import { Key } from "react-aria";
+import { AriaLabelingProps } from "@react-types/shared";
+import { ThemeColorAliases } from "../types";
+export type RadioButtonGroupButtonProps = {
+    /**
+     * The label for the radio button.
+     */
+    children: ReactNode;
+    /**
+     * Whether the radio button is disabled or not.
+     */
+    isDisabled?: boolean;
+    /**
+     * An identifier for the item in selectedKeys.
+     */
+    id: string;
+};
+/**
+ * Represents an button in a `<RadioButtonGroup />`.
+ */
+declare function RadioButtonGroupButton(props: RadioButtonGroupButtonProps): React.JSX.Element;
+export type RadioButtonGroupProps = AriaLabelingProps & {
+    /**
+     * Color for the selected button in the group.
+     * @default "primary.500"
+     */
+    color?: ThemeColorAliases;
+    /**
+     * Whether single or multiple selection is enabled.
+     * @default "single"
+     */
+    selectionMode?: "single" | "multiple";
+    /**
+     * Whether the collection allows empty selection.
+     */
+    disallowEmptySelection?: boolean;
+    /**
+     * The currently selected keys in the collection (controlled).
+     */
+    selectedKeys?: Iterable<Key>;
+    /**
+     * The initial selected keys in the collection (uncontrolled).
+     */
+    defaultSelectedKeys?: Iterable<Key>;
+    /**
+     * Whether all items are disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * RadioButtonGroup Buttons
+     */
+    children: ReactNode;
+    /**
+     * Handler that is called when the selection changes.
+     */
+    onSelectionChange?: (keys: Set<Key>) => void;
+};
+/**
+ * A group of connected buttons that act as a radio group.
+ *
+ * @remarks
+ * Use a radio button group to toggle between two or more
+ * values for a given attribute.
+ *
+ * @example
+ * ```tsx
+ * <RadioButtonGroup defaultSelectedKeys={["first"]}>
+ *   <RadioButtonGroup.Button id="first">First item</RadioButtonGroup.Button>
+ *   <RadioButtonGroup.Button id="second">
+ *     Second item
+ *   </RadioButtonGroup.Button>
+ * </RadioButtonGroup>
+ * ```
+ *
+ * @example
+ * _Default selected keys:_
+ * ```tsx
+ * <RadioButtonGroup defaultSelectedKeys={["first"]}>
+ *   <RadioButtonGroup.Button id="first">First item</RadioButtonGroup.Button>
+ *   <RadioButtonGroup.Button id="second">
+ *     Second item
+ *   </RadioButtonGroup.Button>
+ * </RadioButtonGroup>
+ * ```
+ *
+ * @example
+ * _Controlled value:_
+ * ```tsx
+ * <RadioButtonGroup selectedKeys={["first"]}  onSelectionChange={(value) => ()}>
+ *   <RadioButtonGroup.Button id="first">First item</RadioButtonGroup.Button>
+ *   <RadioButtonGroup.Button id="second">
+ *     Second item
+ *   </RadioButtonGroup.Button>
+ * </RadioButtonGroup>
+ * ```
+ */
+export declare function RadioButtonGroup(props: RadioButtonGroupProps): React.JSX.Element;
+export declare namespace RadioButtonGroup {
+    var Button: typeof RadioButtonGroupButton;
+}
+export {};
+//# sourceMappingURL=RadioButtonGroup.d.ts.map

package/RadioButtonGroup/RadioButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../src/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAK7C,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;GAEG;AAEH,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAYjE;AAED,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,GAAG;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBA6B5D;yBA7Be,gBAAgB"}

package/RadioButtonGroup/RadioButtonGroup.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RadioButtonGroup } from "./RadioButtonGroup";
+type Story = StoryObj<typeof RadioButtonGroup>;
+declare const meta: Meta<typeof RadioButtonGroup>;
+export default meta;
+export declare const Default: Story;
+export declare const SelectionMode: Story;
+export declare const EnabledDisabled: Story;
+export declare const EnabledDisabledButton: Story;
+export declare const DisallowEmptySelection: Story;
+//# sourceMappingURL=RadioButtonGroup.stories.d.ts.map

package/RadioButtonGroup/RadioButtonGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../src/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAE7E,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAcvC,CAAC;AAOF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAiBnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAYpC,CAAC"}

package/RadioButtonGroup/RadioButtonGroup.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioButtonGroup.test.d.ts.map

package/RadioButtonGroup/RadioButtonGroup.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.test.d.ts","sourceRoot":"","sources":["../../src/RadioButtonGroup/RadioButtonGroup.test.tsx"],"names":[],"mappings":""}

package/RadioButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RadioButtonGroup";
+//# sourceMappingURL=index.d.ts.map

package/RadioButtonGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RadioButtonGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}