@easypost/easy-ui 1.0.0-alpha.12 → 1.0.0-alpha.121

package/ForgeLayout/index.mjs

@@ -0,0 +1,596 @@
+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 { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useState, useCallback, forwardRef, useRef, useMemo, useContext, createContext, Fragment as Fragment$1 } from "react";
+import { classNames, variationName } from "../utilities/css.mjs";
+import { a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../__chunks__/Button-B4DxcTvZ.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CJavrBHm.mjs";
+import { I as Icon } from "../__chunks__/Icon-BIpaQJ_I.mjs";
+import { M as Menu } from "../__chunks__/Menu-Ci1FGh8B.mjs";
+import { T as Text } from "../__chunks__/Text-D6oT5WJQ.mjs";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../__chunks__/useFocusRing-BWKhJSvH.mjs";
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-COnPag8r.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-FWU5y5-k.mjs";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../__chunks__/usePress-Cw67P1FM.mjs";
+import { $ as $298d61e98472621b$export$dcf14c9974fe2767 } from "../__chunks__/useLink-y6WGv96n.mjs";
+import { V as VerticalStack } from "../__chunks__/VerticalStack-DoMqBfYD.mjs";
+import { $ as $de32f1b87079253c$export$2e1e1122cf0cba88, a as $07b14b47974efb58$export$5b6b19405a83ff9d, b as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../__chunks__/Dialog-DIhV589X.mjs";
+import { A as ArrowBack } from "../__chunks__/ArrowBack-BFS-tCpV.mjs";
+import { S as Search } from "../__chunks__/Search-Cyblmqo5.mjs";
+import { E as ExpandMore400 } from "../__chunks__/ExpandMore400-CH7GNxqk.mjs";
+import { U as UnstyledButton } from "../__chunks__/UnstyledButton-DxJLvL-G.mjs";
+import { R as RadioGroup, u as useRadioGroupContext } from "../__chunks__/RadioGroup-BfKaJnSo.mjs";
+import { T as TextField } from "../__chunks__/TextField-818kTElu.mjs";
+import { flattenChildren } from "../utilities/react.mjs";
+const button = "_button_1sch8_4";
+const focused$1 = "_focused_1sch8_25";
+const hovered$1 = "_hovered_1sch8_39";
+const selected$1 = "_selected_1sch8_44";
+const open = "_open_1sch8_45";
+const badgeContainer = "_badgeContainer_1sch8_50";
+const badge = "_badge_1sch8_50";
+const styles$4 = {
+  button,
+  focused: focused$1,
+  hovered: hovered$1,
+  selected: selected$1,
+  open,
+  badgeContainer,
+  badge
+};
+function ForgeLayoutActions(props) {
+  const { children } = props;
+  return jsx(HorizontalStack, {
+    wrap: false,
+    gap: "1",
+    align: "end",
+    children
+  });
+}
+function ForgeLayoutMenuAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOpenChange = useCallback((isOpen2) => {
+    setIsOpen(isOpen2);
+  }, []);
+  const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f({});
+  const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({});
+  const className = classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isOpen && styles$4.open);
+  return jsxs(Menu, {
+    isOpen,
+    onOpenChange: handleOpenChange,
+    children: [jsx(Menu.Trigger, {
+      children: jsxs(PressableButton, __spreadProps(__spreadValues({
+        className
+      }, $3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), {
+        children: [jsx(Text, {
+          visuallyHidden: true,
+          children: accessibilityLabel
+        }), jsx(Icon, {
+          symbol: iconSymbol
+        }), renderBadge && jsx("div", {
+          className: styles$4.badgeContainer,
+          children: renderBadge()
+        })]
+      }))
+    }), children]
+  });
+}
+function ForgeLayoutLinkAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
+  const ref = useRef(null);
+  const { linkProps } = $298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  const className = classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isSelected && styles$4.selected);
+  return jsxs("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "true" : void 0,
+    children: [jsx(Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsx(Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsx("div", {
+      className: styles$4.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
+}
+function ForgeLayoutButtonAction(props) {
+  const _a = props, { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = _a, buttonProps = __objRest(_a, ["accessibilityLabel", "iconSymbol", "renderBadge", "isSelected"]);
+  const ref = useRef(null);
+  const className = classNames(styles$4.button, isSelected && styles$4.selected);
+  return jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadProps(__spreadValues({
+    ref,
+    className,
+    "aria-current": isSelected ? "true" : void 0
+  }, buttonProps), {
+    children: [jsx(Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsx(Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsx("div", {
+      className: styles$4.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
+}
+function ForgeLayoutActionBadge(props) {
+  const { children } = props;
+  return jsx("div", {
+    className: styles$4.badge,
+    children
+  });
+}
+const PressableButton = forwardRef((props, ref) => {
+  const { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21(props);
+  return jsx("button", __spreadProps(__spreadValues({}, pressProps), {
+    ref,
+    className: 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__default.createContext(null);
+const useForgeLayoutNav = () => {
+  const context = 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 = useMemo(() => {
+    return {
+      selectedHref
+    };
+  }, [selectedHref]);
+  if (navState === "collapsed") {
+    return null;
+  }
+  return jsx(ForgeLayoutNavContext.Provider, {
+    value: context,
+    children: jsx("div", {
+      className: styles$3.nav,
+      children: jsxs(VerticalStack, {
+        as: "nav",
+        "aria-label": title,
+        gap: "1",
+        inlineAlign: "start",
+        children: [jsx(Logo, {}), children]
+      })
+    })
+  });
+}
+function ForgeLayoutNavSection(props) {
+  const { title, children } = props;
+  return jsxs(VerticalStack, {
+    gap: "1",
+    inlineAlign: "start",
+    children: [jsx(Text, {
+      variant: "overline",
+      color: "primary.600",
+      children: title
+    }), children]
+  });
+}
+function ForgeLayoutNavLink(props) {
+  const { href, iconSymbol, children } = props;
+  const { selectedHref } = useForgeLayoutNav();
+  const ref = useRef(null);
+  const { linkProps } = $298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  const isSelected = href === selectedHref;
+  const className = classNames(styles$3.link, isFocusVisible && styles$3.focused, isHovered && styles$3.hovered, isSelected && styles$3.selected);
+  return jsxs("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "page" : void 0,
+    children: [jsx(Icon, {
+      symbol: iconSymbol
+    }), jsx(Text, {
+      variant: "subtitle2",
+      children
+    })]
+  }));
+}
+function Logo() {
+  return jsxs("svg", {
+    width: "95",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsxs("g", {
+      clipPath: "url(#clip0_1141_3360)",
+      children: [jsx("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)"
+      }), jsx("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"
+      })]
+    }), jsxs("defs", {
+      children: [jsxs("linearGradient", {
+        id: "paint0_linear_1141_3360",
+        x1: "2.381",
+        y1: "20.234",
+        x2: "18.847",
+        y2: "3.923",
+        gradientUnits: "userSpaceOnUse",
+        children: [jsx("stop", {
+          stopColor: "#BC4543"
+        }), jsx("stop", {
+          offset: ".5",
+          stopColor: "#F95C59"
+        }), jsx("stop", {
+          offset: ".59",
+          stopColor: "#F86059"
+        }), jsx("stop", {
+          offset: ".68",
+          stopColor: "#F86C59"
+        }), jsx("stop", {
+          offset: ".78",
+          stopColor: "#F7815A"
+        }), jsx("stop", {
+          offset: ".87",
+          stopColor: "#F69E5B"
+        }), jsx("stop", {
+          offset: ".97",
+          stopColor: "#F4C35D"
+        }), jsx("stop", {
+          offset: "1",
+          stopColor: "#F4D35E"
+        })]
+      }), jsx("clipPath", {
+        id: "clip0_1141_3360",
+        children: jsx("path", {
+          fill: "#fff",
+          d: "M0 0H95V24H0z"
+        })
+      })]
+    })]
+  });
+}
+const header = "_header_otc59_4";
+const headerBg = "_headerBg_otc59_18";
+const styles$2 = {
+  header,
+  headerBg
+};
+const ForgeLayoutHeaderContext = createContext(null);
+const useForgeLayoutHeader = () => {
+  const context = 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 jsx(ForgeLayoutHeaderContext.Provider, {
+    value: {
+      areControlsGrouped
+    },
+    children: jsxs("header", {
+      className: styles$2.header,
+      children: [jsx("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 jsx(Fragment, {
+    children: areControlsGrouped ? jsx("div", {
+      className: styles$1.controls,
+      children
+    }) : jsx(Fragment, {
+      children
+    })
+  });
+}
+function ForgeLayoutBreadcrumbsNavigation(props) {
+  const { children } = props;
+  const { backButton: backButton2, breadcrumbs } = useMemo(() => {
+    const breadcrumbNavigationChildren = 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 jsxs("div", {
+    className: styles$1.breadcrumbNavigationContainer,
+    children: [jsx("div", {
+      className: styles$1.backButtonContainer,
+      children: backButton2
+    }), jsx("div", {
+      className: styles$1.breadcrumbsContainer,
+      children: breadcrumbs
+    })]
+  });
+}
+function ForgeLayoutBackButton(props) {
+  const _a = props, { children } = _a, restButtonProps = __objRest(_a, ["children"]);
+  return jsxs(UnstyledButton, __spreadProps(__spreadValues({}, restButtonProps), {
+    className: styles$1.backButton,
+    children: [jsx(Icon, {
+      symbol: ArrowBack,
+      size: "sm"
+    }), jsx(Text, {
+      variant: "subtitle1",
+      children
+    })]
+  }));
+}
+function ForgeLayoutBreadcrumbs(props) {
+  const { children } = props;
+  const breadcrumbs = useMemo(() => flattenChildren(children), [children]);
+  return jsx(HorizontalStack, {
+    blockAlign: "center",
+    gap: "0.5",
+    children: breadcrumbs.map((breadcrumb, idx) => {
+      if (idx === 0) {
+        return jsx(Fragment$1, {
+          children: breadcrumb
+        }, idx);
+      } else {
+        return jsxs(Fragment$1, {
+          children: [jsx(ForgeLayoutBreadcrumb, {
+            children: ">"
+          }, idx), breadcrumb]
+        }, idx);
+      }
+    })
+  });
+}
+function ForgeLayoutBreadcrumb(props) {
+  const { children } = props;
+  return jsx(Text, {
+    variant: "body1",
+    color: "neutral.700",
+    children
+  });
+}
+function ForgeLayoutModeSwitcher(props) {
+  const { onModeChange } = props;
+  const { mode } = useForgeLayout();
+  const [isOpen, setIsOpen] = useState(false);
+  return jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, {
+    children: [jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+      className: classNames(styles$1.trigger, isOpen && styles$1.triggerPopoverOpen),
+      onPress: () => setIsOpen(true),
+      children: [jsx(Text, {
+        variant: "subtitle1",
+        color: mode === "test" ? "warning.600" : "positive.600",
+        truncate: true,
+        children: mode === "test" ? TEST_MODE : PRODUCTION_MODE
+      }), jsx(Icon, {
+        symbol: ExpandMore400,
+        size: "md",
+        color: "neutral.500"
+      })]
+    }), jsx($07b14b47974efb58$export$5b6b19405a83ff9d, {
+      className: styles$1.popover,
+      offset: POPOVER_OFFSET,
+      crossOffset: POPOVER_CROSS_OFFSET,
+      isOpen,
+      onOpenChange: setIsOpen,
+      children: jsx($de32f1b87079253c$export$3ddf2d174ce01153, {
+        children: jsxs(VerticalStack, {
+          gap: "1",
+          children: [jsx(Text, {
+            variant: "subtitle1",
+            color: "neutral.800",
+            children: "Instance Switcher"
+          }), jsxs(RadioGroup, {
+            "aria-label": "Select a mode",
+            onChange: onModeChange,
+            value: mode,
+            children: [jsx(ForgeLayoutModeSwitcherRadioGroupItem, {
+              value: "test"
+            }), jsx(ForgeLayoutModeSwitcherRadioGroupItem, {
+              value: "production"
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+function ForgeLayoutModeSwitcherRadioGroupItem(props) {
+  const _a = props, { value } = _a, restProps = __objRest(_a, ["value"]);
+  const state = useRadioGroupContext();
+  const isSelected = value === state.selectedValue;
+  return jsx(RadioGroup.Item, __spreadProps(__spreadValues({
+    value
+  }, restProps), {
+    children: jsxs(VerticalStack, {
+      children: [jsx(Text, {
+        variant: "subtitle2",
+        color: isSelected ? "primary.800" : "primary.700",
+        children: value === "test" ? TEST_MODE : PRODUCTION_MODE
+      }), jsxs(Text, {
+        variant: "overline",
+        children: ["View data using the", " ", jsxs(Text, {
+          color: value === "test" ? "warning.600" : "positive.600",
+          children: [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 jsx("div", {
+    className: styles$1.searchContainer,
+    children: jsx(TextField, __spreadValues({
+      size: "sm",
+      type: "search",
+      "aria-label": ariaLabel,
+      placeholder: "/ search",
+      iconAtStart: 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__default.createContext(null);
+const useForgeLayout = () => {
+  const context = 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 = classNames(styles.ForgeLayout, styles[variationName("mode", mode)], styles[variationName("navState", navState)]);
+  const bgClassName = classNames(styles.bg, styles[variationName("backgroundDecoration", backgroundDecoration)]);
+  const context = useMemo(() => {
+    return {
+      mode,
+      navState
+    };
+  }, [mode, navState]);
+  return jsxs(ForgeLayoutContext.Provider, {
+    value: context,
+    children: [jsx("div", {
+      className: bgClassName
+    }), jsx("div", {
+      className,
+      children
+    })]
+  });
+}
+function ForgeLayoutBody(props) {
+  const { children } = props;
+  return jsx("div", {
+    className: styles.body,
+    children
+  });
+}
+function ForgeLayoutContent(props) {
+  const { children } = props;
+  return jsx("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;
+export {
+  ForgeLayout,
+  useForgeLayout
+};

package/FormLayout/FormLayout.d.ts

@@ -0,0 +1,55 @@
+import React, { ComponentProps, ElementType, ReactNode } from "react";
+export type FormLayoutProps<T extends ElementType> = ComponentProps<T> & {
+    /**
+     * Override the default element with a custom one.
+     *
+     * @default div
+     */
+    as?: T;
+    /**
+     * Content of the form layout.
+     */
+    children: ReactNode;
+};
+/**
+ * Arranges a layout of form elements with preset spacing.
+ *
+ * @example
+ * ```tsx
+ * <FormLayout>
+ *   <FormLayout.Header>
+ *     <FormLayout.Title>Form Title</FormLayout.Title>
+ *     <FormLayout.HelperText>Form info text</FormLayout.HelperText>
+ *   </FormLayout.Header>
+ *   <TextField
+ *     label="Input 1"
+ *     placeholder="Placeholder text"
+ *     helperText="Helper text"
+ *   />
+ *   <TextField
+ *     label="Input 2"
+ *     placeholder="Placeholder text"
+ *     helperText="Helper text"
+ *   />
+ *   <TextField
+ *     label="Input 3"
+ *     placeholder="Placeholder text"
+ *     helperText="Helper text"
+ *   />
+ *   <TextField
+ *     label="Input 4"
+ *     placeholder="Placeholder text"
+ *     helperText="Helper text"
+ *   />
+ * </FormLayout>
+ * ```
+ */
+export declare function FormLayout<T extends ElementType = "div">(props: FormLayoutProps<T>): React.JSX.Element;
+export declare namespace FormLayout {
+    var Header: typeof import("./Header").Header;
+    var Section: typeof import("./Section").Section;
+    var Grid: typeof import("./Grid").Grid;
+    var Title: typeof import("./Title").Title;
+    var HelperText: typeof import("./HelperText").HelperText;
+}
+//# sourceMappingURL=FormLayout.d.ts.map

package/FormLayout/FormLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUtE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IACvE;;;;OAIG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EACtD,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,qBAS1B;yBAVe,UAAU"}

package/FormLayout/FormLayout.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { FormLayout } from "./FormLayout";
+type Story = StoryObj<typeof FormLayout>;
+declare const meta: Meta<typeof FormLayout>;
+export default meta;
+export declare const Basic: Story;
+export declare const Sections: Story;
+export declare const Columns: Story;
+export declare const Nesting: Story;
+export declare const AsAForm: Story;
+export declare const SectionAction: Story;
+export declare const WithTabs: Story;
+//# sourceMappingURL=FormLayout.stories.d.ts.map

package/FormLayout/FormLayout.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.stories.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAiBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,KA6BnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAyCtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6C3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmDtB,CAAC"}

package/FormLayout/FormLayout.test.d.ts

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

package/FormLayout/FormLayout.test.d.ts.map

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