@easypost/easy-ui 1.0.0-alpha.9 → 1.0.0-alpha.90

package/ForgeLayout/index.js

@@ -0,0 +1,530 @@
+"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 utilities_css = require("../utilities/css.js");
+const Button = require("../__chunks__/Button-BpAgRrMP.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
+const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const Menu = require("../__chunks__/Menu-CxptqDZf.js");
+const Text = require("../__chunks__/Text-BXsuDbqc.js");
+const useFocusRing = require("../__chunks__/useFocusRing-Do5WdNL_.js");
+const mergeProps = require("../__chunks__/mergeProps-d7wJkv71.js");
+const useHover = require("../__chunks__/useHover-BK8LX0kX.js");
+const usePress = require("../__chunks__/usePress-BbU41fvX.js");
+const useLink = require("../__chunks__/useLink-rHGI96g9.js");
+const VerticalStack = require("../__chunks__/VerticalStack-Dzpv3O67.js");
+const Dialog = require("../__chunks__/Dialog-DHEa0HJb.js");
+const ArrowBack = require("../__chunks__/ArrowBack-C_LSatif.js");
+const Search = require("../__chunks__/Search-BY7IgEyX.js");
+const ExpandMore400 = require("../__chunks__/ExpandMore400-CJpvxyJm.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-DaRYVyfB.js");
+const RadioGroup = require("../__chunks__/RadioGroup-XPAeX1Q8.js");
+const TextField = require("../__chunks__/TextField-E-qy6m58.js");
+const utilities_react = require("../utilities/react.js");
+const button = "_button_1j18l_4";
+const focused$1 = "_focused_1j18l_25";
+const hovered$1 = "_hovered_1j18l_39";
+const selected$1 = "_selected_1j18l_44";
+const open = "_open_1j18l_45";
+const badgeContainer = "_badgeContainer_1j18l_50";
+const badge = "_badge_1j18l_50";
+const styles$4 = {
+  button,
+  focused: focused$1,
+  hovered: hovered$1,
+  selected: selected$1,
+  open,
+  badgeContainer,
+  badge
+};
+function ForgeLayoutActions(props) {
+  const { children } = props;
+  return React.createElement(HorizontalStack.HorizontalStack, {
+    wrap: false,
+    gap: "1",
+    align: "end"
+  }, children);
+}
+function ForgeLayoutMenuAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const handleOpenChange = React.useCallback((isOpen2) => {
+    setIsOpen(isOpen2);
+  }, []);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f({});
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
+  const className = utilities_css.classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isOpen && styles$4.open);
+  return React.createElement(Menu.Menu, {
+    isOpen,
+    onOpenChange: handleOpenChange
+  }, React.createElement(Menu.Menu.Trigger, null, React.createElement(PressableButton, __spreadValues({
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement(Icon.Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React.createElement("div", {
+    className: styles$4.badgeContainer
+  }, renderBadge()))), children);
+}
+function ForgeLayoutLinkAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
+  const ref = React.useRef(null);
+  const { linkProps } = useLink.$298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const className = utilities_css.classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isSelected && styles$4.selected);
+  return React.createElement("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "true" : void 0
+  }), React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement(Icon.Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React.createElement("div", {
+    className: styles$4.badgeContainer
+  }, renderBadge()));
+}
+function ForgeLayoutButtonAction(props) {
+  const _a = props, { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = _a, buttonProps = __objRest(_a, ["accessibilityLabel", "iconSymbol", "renderBadge", "isSelected"]);
+  const ref = React.useRef(null);
+  const className = utilities_css.classNames(styles$4.button, isSelected && styles$4.selected);
+  return React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
+    ref,
+    className,
+    "aria-current": isSelected ? "true" : void 0
+  }, buttonProps), React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement(Icon.Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React.createElement("div", {
+    className: styles$4.badgeContainer
+  }, renderBadge()));
+}
+function ForgeLayoutActionBadge(props) {
+  const { children } = props;
+  return React.createElement("div", {
+    className: styles$4.badge
+  }, children);
+}
+const PressableButton = React.forwardRef((props, ref) => {
+  const { pressProps } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21(props);
+  return React.createElement("button", __spreadProps(__spreadValues({}, pressProps), {
+    ref,
+    className: utilities_css.classNames(pressProps.className)
+  }));
+});
+PressableButton.displayName = "PressableButton";
+const nav = "_nav_m3777_4";
+const link = "_link_m3777_17";
+const focused = "_focused_m3777_26";
+const hovered = "_hovered_m3777_38";
+const selected = "_selected_m3777_42";
+const styles$3 = {
+  nav,
+  link,
+  focused,
+  hovered,
+  selected
+};
+const ForgeLayoutNavContext = React.createContext(null);
+const useForgeLayoutNav = () => {
+  const context = React.useContext(ForgeLayoutNavContext);
+  if (!context) {
+    throw new Error("useForgeLayoutNav must be used within a ForgeLayoutNav");
+  }
+  return context;
+};
+function ForgeLayoutNav(props) {
+  const { navState = "expanded" } = useForgeLayout();
+  const { selectedHref, title = "Main", children } = props;
+  const context = React.useMemo(() => {
+    return {
+      selectedHref
+    };
+  }, [selectedHref]);
+  if (navState === "collapsed") {
+    return null;
+  }
+  return React.createElement(ForgeLayoutNavContext.Provider, {
+    value: context
+  }, React.createElement("div", {
+    className: styles$3.nav
+  }, React.createElement(VerticalStack.VerticalStack, {
+    as: "nav",
+    "aria-label": title,
+    gap: "1",
+    inlineAlign: "start"
+  }, React.createElement(Logo, null), children)));
+}
+function ForgeLayoutNavSection(props) {
+  const { title, children } = props;
+  return React.createElement(VerticalStack.VerticalStack, {
+    gap: "1",
+    inlineAlign: "start"
+  }, React.createElement(Text.Text, {
+    variant: "overline",
+    color: "primary.600"
+  }, title), children);
+}
+function ForgeLayoutNavLink(props) {
+  const { href, iconSymbol, children } = props;
+  const { selectedHref } = useForgeLayoutNav();
+  const ref = React.useRef(null);
+  const { linkProps } = useLink.$298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const isSelected = href === selectedHref;
+  const className = utilities_css.classNames(styles$3.link, isFocusVisible && styles$3.focused, isHovered && styles$3.hovered, isSelected && styles$3.selected);
+  return React.createElement("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "page" : void 0
+  }), React.createElement(Icon.Icon, {
+    symbol: iconSymbol
+  }), React.createElement(Text.Text, {
+    variant: "subtitle2"
+  }, children));
+}
+function Logo() {
+  return React.createElement("svg", {
+    width: "95",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("g", {
+    clipPath: "url(#clip0_1141_3360)"
+  }, React.createElement("path", {
+    d: "M21.036 17.22v-1.548l-10.037 5.851a.919.919 0 0 1-.927 0l-4.786-2.79v-2.448l4.786 2.79c.287.167.64.167.927 0l10.037-5.85v-2.448l-10.037 5.85a.919.919 0 0 1-.927 0l-4.786-2.79V11.39l4.786 2.79c.287.167.64.167.927 0l10.037-5.851V6.78a1.56 1.56 0 0 0-.772-1.35L11.308.209a1.528 1.528 0 0 0-1.543 0L.808 5.43a1.56 1.56 0 0 0-.772 1.35v10.44c0 .557.294 1.072.772 1.35l8.956 5.22a1.528 1.528 0 0 0 1.543 0l8.956-5.22a1.56 1.56 0 0 0 .772-1.35h.001z",
+    fill: "url(#paint0_linear_1141_3360)"
+  }), React.createElement("path", {
+    d: "M33.126 8.058v2.762h3.907v1.788h-3.907v4.725H31V6.16h6.868v1.9h-4.742zm20.575 3.689c0 3.384-2.678 5.746-5.703 5.746-3.024 0-5.702-2.362-5.702-5.746C42.296 8.363 44.974 6 47.998 6c3.025 0 5.703 2.363 5.703 5.747zm-2.158 0c0-2.203-1.622-3.784-3.545-3.784-1.922 0-3.56 1.58-3.56 3.784 0 2.204 1.622 3.784 3.56 3.784 1.939 0 3.545-1.58 3.545-3.784zm13.642 5.586l-2.457-3.8h-1.827v3.8h-2.064V6.16h3.797c2.473 0 4.033 1.532 4.033 3.752 0 1.548-.757 2.698-2.048 3.257l2.757 4.167h-2.19l-.001-.002zm-4.286-5.604h1.622c1.245 0 2.08-.543 2.08-1.82 0-1.276-.835-1.82-2.08-1.82H60.9v3.64zm16.134 5.764c-3.089 0-5.702-2.362-5.702-5.746C71.33 8.363 74.008 6 77.033 6c1.434 0 2.725.48 3.685 1.324l-1.244 1.437c-.63-.48-1.465-.798-2.316-.798-2.064 0-3.687 1.58-3.687 3.784 0 2.204 1.544 3.784 3.592 3.784 1.528 0 2.71-.67 3.008-2.427h-2.756v-1.74h4.648c.457 3.816-1.986 6.13-4.932 6.13h.002zM94 15.402v1.932h-6.868V6.16h6.727v1.931h-4.664v2.682h3.545v1.883h-3.545v2.746H94z",
+    fill: "#061340"
+  })), React.createElement("defs", null, React.createElement("linearGradient", {
+    id: "paint0_linear_1141_3360",
+    x1: "2.381",
+    y1: "20.234",
+    x2: "18.847",
+    y2: "3.923",
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    stopColor: "#BC4543"
+  }), React.createElement("stop", {
+    offset: ".5",
+    stopColor: "#F95C59"
+  }), React.createElement("stop", {
+    offset: ".59",
+    stopColor: "#F86059"
+  }), React.createElement("stop", {
+    offset: ".68",
+    stopColor: "#F86C59"
+  }), React.createElement("stop", {
+    offset: ".78",
+    stopColor: "#F7815A"
+  }), React.createElement("stop", {
+    offset: ".87",
+    stopColor: "#F69E5B"
+  }), React.createElement("stop", {
+    offset: ".97",
+    stopColor: "#F4C35D"
+  }), React.createElement("stop", {
+    offset: "1",
+    stopColor: "#F4D35E"
+  })), React.createElement("clipPath", {
+    id: "clip0_1141_3360"
+  }, React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0H95V24H0z"
+  }))));
+}
+const header = "_header_otc59_4";
+const headerBg = "_headerBg_otc59_18";
+const styles$2 = {
+  header,
+  headerBg
+};
+const ForgeLayoutHeaderContext = React.createContext(null);
+const useForgeLayoutHeader = () => {
+  const context = React.useContext(ForgeLayoutHeaderContext);
+  if (!context) {
+    throw new Error("useForgeLayoutHeader must be used within a ForgeLayoutHeader");
+  }
+  return context;
+};
+function ForgeLayoutHeader(props) {
+  const { areControlsGrouped = true, children } = props;
+  return React.createElement(ForgeLayoutHeaderContext.Provider, {
+    value: {
+      areControlsGrouped
+    }
+  }, React.createElement("header", {
+    className: styles$2.header
+  }, React.createElement("div", {
+    className: styles$2.headerBg
+  }), children));
+}
+const controls = "_controls_1moaa_4";
+const breadcrumbNavigationContainer = "_breadcrumbNavigationContainer_1moaa_11";
+const backButtonContainer = "_backButtonContainer_1moaa_18";
+const backButton = "_backButton_1moaa_18";
+const breadcrumbsContainer = "_breadcrumbsContainer_1moaa_33";
+const trigger = "_trigger_1moaa_37";
+const triggerPopoverOpen = "_triggerPopoverOpen_1moaa_59";
+const popover = "_popover_1moaa_63";
+const searchContainer = "_searchContainer_1moaa_71";
+const styles$1 = {
+  controls,
+  breadcrumbNavigationContainer,
+  backButtonContainer,
+  backButton,
+  breadcrumbsContainer,
+  trigger,
+  triggerPopoverOpen,
+  popover,
+  searchContainer
+};
+const TEST_MODE = "Test";
+const PRODUCTION_MODE = "Production";
+const POPOVER_CROSS_OFFSET = 116;
+const POPOVER_OFFSET = 2;
+function ForgeLayoutControls(props) {
+  const { navState } = useForgeLayout();
+  const { areControlsGrouped } = useForgeLayoutHeader();
+  const { children, visibleWhenNavStateIs = "expanded" } = props;
+  if (navState !== visibleWhenNavStateIs) {
+    return null;
+  }
+  return React.createElement(React.Fragment, null, areControlsGrouped ? React.createElement("div", {
+    className: styles$1.controls
+  }, children) : React.createElement(React.Fragment, null, children));
+}
+function ForgeLayoutBreadcrumbsNavigation(props) {
+  const { children } = props;
+  const { backButton: backButton2, breadcrumbs } = React.useMemo(() => {
+    const breadcrumbNavigationChildren = utilities_react.flattenChildren(children);
+    const backButton22 = breadcrumbNavigationChildren.length > 0 ? breadcrumbNavigationChildren[0] : null;
+    const breadcrumbs2 = breadcrumbNavigationChildren.length > 1 ? breadcrumbNavigationChildren[1] : null;
+    if (!backButton22 || !breadcrumbs2) {
+      throw new Error("ForgeLayout.BreadcrumbNavigation must contain ForgeLayout.BackButton and ForgeLayout.Breadcrumbs");
+    }
+    return {
+      backButton: backButton22,
+      breadcrumbs: breadcrumbs2
+    };
+  }, [children]);
+  return React.createElement("div", {
+    className: styles$1.breadcrumbNavigationContainer
+  }, React.createElement("div", {
+    className: styles$1.backButtonContainer
+  }, backButton2), React.createElement("div", {
+    className: styles$1.breadcrumbsContainer
+  }, breadcrumbs));
+}
+function ForgeLayoutBackButton(props) {
+  const _a = props, { children } = _a, restButtonProps = __objRest(_a, ["children"]);
+  return React.createElement(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, restButtonProps), {
+    className: styles$1.backButton
+  }), React.createElement(Icon.Icon, {
+    symbol: ArrowBack.ArrowBack,
+    size: "sm"
+  }), React.createElement(Text.Text, {
+    variant: "subtitle1"
+  }, children));
+}
+function ForgeLayoutBreadcrumbs(props) {
+  const { children } = props;
+  const breadcrumbs = React.useMemo(() => utilities_react.flattenChildren(children), [children]);
+  return React.createElement(HorizontalStack.HorizontalStack, {
+    blockAlign: "center",
+    gap: "0.5"
+  }, breadcrumbs.map((breadcrumb, idx) => {
+    if (idx === 0) {
+      return React.createElement(React.Fragment, {
+        key: idx
+      }, breadcrumb);
+    } else {
+      return React.createElement(React.Fragment, {
+        key: idx
+      }, React.createElement(ForgeLayoutBreadcrumb, {
+        key: idx
+      }, ">"), breadcrumb);
+    }
+  }));
+}
+function ForgeLayoutBreadcrumb(props) {
+  const { children } = props;
+  return React.createElement(Text.Text, {
+    variant: "body1",
+    color: "neutral.700"
+  }, children);
+}
+function ForgeLayoutModeSwitcher(props) {
+  const { onModeChange } = props;
+  const { mode } = useForgeLayout();
+  const [isOpen, setIsOpen] = React.useState(false);
+  return React.createElement(Dialog.$de32f1b87079253c$export$2e1e1122cf0cba88, null, React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+    className: utilities_css.classNames(styles$1.trigger, isOpen && styles$1.triggerPopoverOpen),
+    onPress: () => setIsOpen(true)
+  }, React.createElement(Text.Text, {
+    variant: "subtitle1",
+    color: mode === "test" ? "warning.600" : "positive.600",
+    truncate: true
+  }, mode === "test" ? TEST_MODE : PRODUCTION_MODE), React.createElement(Icon.Icon, {
+    symbol: ExpandMore400.ExpandMore400,
+    size: "md",
+    color: "neutral.500"
+  })), React.createElement(Dialog.$07b14b47974efb58$export$5b6b19405a83ff9d, {
+    className: styles$1.popover,
+    offset: POPOVER_OFFSET,
+    crossOffset: POPOVER_CROSS_OFFSET,
+    isOpen,
+    onOpenChange: setIsOpen
+  }, React.createElement(Dialog.$de32f1b87079253c$export$3ddf2d174ce01153, null, React.createElement(VerticalStack.VerticalStack, {
+    gap: "1"
+  }, React.createElement(Text.Text, {
+    variant: "subtitle1",
+    color: "neutral.800"
+  }, "Instance Switcher"), React.createElement(RadioGroup.RadioGroup, {
+    "aria-label": "Select a mode",
+    onChange: onModeChange,
+    value: mode
+  }, React.createElement(ForgeLayoutModeSwitcherRadioGroupItem, {
+    value: "test"
+  }), React.createElement(ForgeLayoutModeSwitcherRadioGroupItem, {
+    value: "production"
+  }))))));
+}
+function ForgeLayoutModeSwitcherRadioGroupItem(props) {
+  const _a = props, { value } = _a, restProps = __objRest(_a, ["value"]);
+  const state = RadioGroup.useRadioGroupContext();
+  const isSelected = value === state.selectedValue;
+  return React.createElement(RadioGroup.RadioGroup.Item, __spreadValues({
+    value
+  }, restProps), React.createElement(VerticalStack.VerticalStack, null, React.createElement(Text.Text, {
+    variant: "subtitle2",
+    color: isSelected ? "primary.800" : "primary.700"
+  }, value === "test" ? TEST_MODE : PRODUCTION_MODE), React.createElement(Text.Text, {
+    variant: "overline"
+  }, "View data using the", " ", React.createElement(Text.Text, {
+    color: value === "test" ? "warning.600" : "positive.600"
+  }, value === "test" ? TEST_MODE.toUpperCase() : PRODUCTION_MODE.toUpperCase(), " ", "API", " "), "keys")));
+}
+function ForgeLayoutSearch(props) {
+  const _a = props, { "aria-label": ariaLabel = "Search for content" } = _a, textFieldProps = __objRest(_a, ["aria-label"]);
+  return React.createElement("div", {
+    className: styles$1.searchContainer
+  }, React.createElement(TextField.TextField, __spreadValues({
+    size: "sm",
+    type: "search",
+    "aria-label": ariaLabel,
+    placeholder: "/ search",
+    iconAtStart: Search.Search
+  }, textFieldProps)));
+}
+const ForgeLayout$1 = "_ForgeLayout_irfr5_4";
+const modeTest = "_modeTest_irfr5_21";
+const bg = "_bg_irfr5_27";
+const backgroundDecoration01 = "_backgroundDecoration01_irfr5_36";
+const body = "_body_irfr5_42";
+const content = "_content_irfr5_48";
+const styles = {
+  ForgeLayout: ForgeLayout$1,
+  modeTest,
+  bg,
+  backgroundDecoration01,
+  body,
+  content
+};
+const ForgeLayoutContext = React.createContext(null);
+const useForgeLayout = () => {
+  const context = React.useContext(ForgeLayoutContext);
+  if (!context) {
+    throw new Error("useForgeLayout must be used within a ForgeLayout");
+  }
+  return context;
+};
+function ForgeLayout(props) {
+  const { backgroundDecoration = "01", mode = "production", navState = "expanded", children } = props;
+  const className = utilities_css.classNames(styles.ForgeLayout, styles[utilities_css.variationName("mode", mode)], styles[utilities_css.variationName("navState", navState)]);
+  const bgClassName = utilities_css.classNames(styles.bg, styles[utilities_css.variationName("backgroundDecoration", backgroundDecoration)]);
+  const context = React.useMemo(() => {
+    return {
+      mode,
+      navState
+    };
+  }, [mode, navState]);
+  return React.createElement(ForgeLayoutContext.Provider, {
+    value: context
+  }, React.createElement("div", {
+    className: bgClassName
+  }), React.createElement("div", {
+    className
+  }, children));
+}
+function ForgeLayoutBody(props) {
+  const { children } = props;
+  return React.createElement("div", {
+    className: styles.body
+  }, children);
+}
+function ForgeLayoutContent(props) {
+  const { children } = props;
+  return React.createElement("main", {
+    className: styles.content
+  }, children);
+}
+ForgeLayout.Nav = ForgeLayoutNav;
+ForgeLayout.NavSection = ForgeLayoutNavSection;
+ForgeLayout.NavLink = ForgeLayoutNavLink;
+ForgeLayout.Body = ForgeLayoutBody;
+ForgeLayout.Header = ForgeLayoutHeader;
+ForgeLayout.Controls = ForgeLayoutControls;
+ForgeLayout.BreadcrumbsNavigation = ForgeLayoutBreadcrumbsNavigation;
+ForgeLayout.BackButton = ForgeLayoutBackButton;
+ForgeLayout.Breadcrumbs = ForgeLayoutBreadcrumbs;
+ForgeLayout.Breadcrumb = ForgeLayoutBreadcrumb;
+ForgeLayout.ModeSwitcher = ForgeLayoutModeSwitcher;
+ForgeLayout.Search = ForgeLayoutSearch;
+ForgeLayout.Actions = ForgeLayoutActions;
+ForgeLayout.ActionBadge = ForgeLayoutActionBadge;
+ForgeLayout.MenuAction = ForgeLayoutMenuAction;
+ForgeLayout.LinkAction = ForgeLayoutLinkAction;
+ForgeLayout.ButtonAction = ForgeLayoutButtonAction;
+ForgeLayout.Content = ForgeLayoutContent;
+ForgeLayout.useForgeLayoutNav = useForgeLayoutNav;
+exports.ForgeLayout = ForgeLayout;
+exports.useForgeLayout = useForgeLayout;