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

package/ForgeLayout/index.mjs

@@ -0,0 +1,530 @@
+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, { useState, useCallback, forwardRef, useRef, useMemo, useContext, createContext, Fragment } from "react";
+import { classNames, variationName } from "../utilities/css.mjs";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../__chunks__/Button-BpGjkRZu.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CxE8tPx_.mjs";
+import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
+import { M as Menu } from "../__chunks__/Menu-CfHK_0Sr.mjs";
+import { T as Text } from "../__chunks__/Text-CX5GoBTS.mjs";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../__chunks__/useFocusRing-DAMeUI3t.mjs";
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-CORsYhTp.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-CwJuylzq.mjs";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../__chunks__/usePress-BGHDb_ce.mjs";
+import { $ as $298d61e98472621b$export$dcf14c9974fe2767 } from "../__chunks__/useLink-CxFvWxcs.mjs";
+import { V as VerticalStack } from "../__chunks__/VerticalStack-C2yDQVHD.mjs";
+import { $ as $de32f1b87079253c$export$2e1e1122cf0cba88, a as $07b14b47974efb58$export$5b6b19405a83ff9d, b as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../__chunks__/Dialog-71SzSgdZ.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-CfhKDftV.mjs";
+import { R as RadioGroup, u as useRadioGroupContext } from "../__chunks__/RadioGroup-B5o5aPT-.mjs";
+import { T as TextField } from "../__chunks__/TextField-CUOz6ZUe.mjs";
+import { flattenChildren } from "../utilities/react.mjs";
+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__default.createElement(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 React__default.createElement(Menu, {
+    isOpen,
+    onOpenChange: handleOpenChange
+  }, React__default.createElement(Menu.Trigger, null, React__default.createElement(PressableButton, __spreadValues({
+    className
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement(Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React__default.createElement("div", {
+    className: styles$4.badgeContainer
+  }, 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 React__default.createElement("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "true" : void 0
+  }), React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement(Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React__default.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 = useRef(null);
+  const className = classNames(styles$4.button, isSelected && styles$4.selected);
+  return React__default.createElement($d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
+    ref,
+    className,
+    "aria-current": isSelected ? "true" : void 0
+  }, buttonProps), React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement(Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React__default.createElement("div", {
+    className: styles$4.badgeContainer
+  }, renderBadge()));
+}
+function ForgeLayoutActionBadge(props) {
+  const { children } = props;
+  return React__default.createElement("div", {
+    className: styles$4.badge
+  }, children);
+}
+const PressableButton = forwardRef((props, ref) => {
+  const { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21(props);
+  return React__default.createElement("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 React__default.createElement(ForgeLayoutNavContext.Provider, {
+    value: context
+  }, React__default.createElement("div", {
+    className: styles$3.nav
+  }, React__default.createElement(VerticalStack, {
+    as: "nav",
+    "aria-label": title,
+    gap: "1",
+    inlineAlign: "start"
+  }, React__default.createElement(Logo, null), children)));
+}
+function ForgeLayoutNavSection(props) {
+  const { title, children } = props;
+  return React__default.createElement(VerticalStack, {
+    gap: "1",
+    inlineAlign: "start"
+  }, React__default.createElement(Text, {
+    variant: "overline",
+    color: "primary.600"
+  }, 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 React__default.createElement("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "page" : void 0
+  }), React__default.createElement(Icon, {
+    symbol: iconSymbol
+  }), React__default.createElement(Text, {
+    variant: "subtitle2"
+  }, children));
+}
+function Logo() {
+  return React__default.createElement("svg", {
+    width: "95",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("g", {
+    clipPath: "url(#clip0_1141_3360)"
+  }, React__default.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__default.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__default.createElement("defs", null, React__default.createElement("linearGradient", {
+    id: "paint0_linear_1141_3360",
+    x1: "2.381",
+    y1: "20.234",
+    x2: "18.847",
+    y2: "3.923",
+    gradientUnits: "userSpaceOnUse"
+  }, React__default.createElement("stop", {
+    stopColor: "#BC4543"
+  }), React__default.createElement("stop", {
+    offset: ".5",
+    stopColor: "#F95C59"
+  }), React__default.createElement("stop", {
+    offset: ".59",
+    stopColor: "#F86059"
+  }), React__default.createElement("stop", {
+    offset: ".68",
+    stopColor: "#F86C59"
+  }), React__default.createElement("stop", {
+    offset: ".78",
+    stopColor: "#F7815A"
+  }), React__default.createElement("stop", {
+    offset: ".87",
+    stopColor: "#F69E5B"
+  }), React__default.createElement("stop", {
+    offset: ".97",
+    stopColor: "#F4C35D"
+  }), React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#F4D35E"
+  })), React__default.createElement("clipPath", {
+    id: "clip0_1141_3360"
+  }, React__default.createElement("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 React__default.createElement(ForgeLayoutHeaderContext.Provider, {
+    value: {
+      areControlsGrouped
+    }
+  }, React__default.createElement("header", {
+    className: styles$2.header
+  }, React__default.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__default.createElement(React__default.Fragment, null, areControlsGrouped ? React__default.createElement("div", {
+    className: styles$1.controls
+  }, children) : React__default.createElement(React__default.Fragment, null, 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 React__default.createElement("div", {
+    className: styles$1.breadcrumbNavigationContainer
+  }, React__default.createElement("div", {
+    className: styles$1.backButtonContainer
+  }, backButton2), React__default.createElement("div", {
+    className: styles$1.breadcrumbsContainer
+  }, breadcrumbs));
+}
+function ForgeLayoutBackButton(props) {
+  const _a = props, { children } = _a, restButtonProps = __objRest(_a, ["children"]);
+  return React__default.createElement(UnstyledButton, __spreadProps(__spreadValues({}, restButtonProps), {
+    className: styles$1.backButton
+  }), React__default.createElement(Icon, {
+    symbol: ArrowBack,
+    size: "sm"
+  }), React__default.createElement(Text, {
+    variant: "subtitle1"
+  }, children));
+}
+function ForgeLayoutBreadcrumbs(props) {
+  const { children } = props;
+  const breadcrumbs = useMemo(() => flattenChildren(children), [children]);
+  return React__default.createElement(HorizontalStack, {
+    blockAlign: "center",
+    gap: "0.5"
+  }, breadcrumbs.map((breadcrumb, idx) => {
+    if (idx === 0) {
+      return React__default.createElement(Fragment, {
+        key: idx
+      }, breadcrumb);
+    } else {
+      return React__default.createElement(Fragment, {
+        key: idx
+      }, React__default.createElement(ForgeLayoutBreadcrumb, {
+        key: idx
+      }, ">"), breadcrumb);
+    }
+  }));
+}
+function ForgeLayoutBreadcrumb(props) {
+  const { children } = props;
+  return React__default.createElement(Text, {
+    variant: "body1",
+    color: "neutral.700"
+  }, children);
+}
+function ForgeLayoutModeSwitcher(props) {
+  const { onModeChange } = props;
+  const { mode } = useForgeLayout();
+  const [isOpen, setIsOpen] = useState(false);
+  return React__default.createElement($de32f1b87079253c$export$2e1e1122cf0cba88, null, React__default.createElement($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+    className: classNames(styles$1.trigger, isOpen && styles$1.triggerPopoverOpen),
+    onPress: () => setIsOpen(true)
+  }, React__default.createElement(Text, {
+    variant: "subtitle1",
+    color: mode === "test" ? "warning.600" : "positive.600",
+    truncate: true
+  }, mode === "test" ? TEST_MODE : PRODUCTION_MODE), React__default.createElement(Icon, {
+    symbol: ExpandMore400,
+    size: "md",
+    color: "neutral.500"
+  })), React__default.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, {
+    className: styles$1.popover,
+    offset: POPOVER_OFFSET,
+    crossOffset: POPOVER_CROSS_OFFSET,
+    isOpen,
+    onOpenChange: setIsOpen
+  }, React__default.createElement($de32f1b87079253c$export$3ddf2d174ce01153, null, React__default.createElement(VerticalStack, {
+    gap: "1"
+  }, React__default.createElement(Text, {
+    variant: "subtitle1",
+    color: "neutral.800"
+  }, "Instance Switcher"), React__default.createElement(RadioGroup, {
+    "aria-label": "Select a mode",
+    onChange: onModeChange,
+    value: mode
+  }, React__default.createElement(ForgeLayoutModeSwitcherRadioGroupItem, {
+    value: "test"
+  }), React__default.createElement(ForgeLayoutModeSwitcherRadioGroupItem, {
+    value: "production"
+  }))))));
+}
+function ForgeLayoutModeSwitcherRadioGroupItem(props) {
+  const _a = props, { value } = _a, restProps = __objRest(_a, ["value"]);
+  const state = useRadioGroupContext();
+  const isSelected = value === state.selectedValue;
+  return React__default.createElement(RadioGroup.Item, __spreadValues({
+    value
+  }, restProps), React__default.createElement(VerticalStack, null, React__default.createElement(Text, {
+    variant: "subtitle2",
+    color: isSelected ? "primary.800" : "primary.700"
+  }, value === "test" ? TEST_MODE : PRODUCTION_MODE), React__default.createElement(Text, {
+    variant: "overline"
+  }, "View data using the", " ", React__default.createElement(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__default.createElement("div", {
+    className: styles$1.searchContainer
+  }, React__default.createElement(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 React__default.createElement(ForgeLayoutContext.Provider, {
+    value: context
+  }, React__default.createElement("div", {
+    className: bgClassName
+  }), React__default.createElement("div", {
+    className
+  }, children));
+}
+function ForgeLayoutBody(props) {
+  const { children } = props;
+  return React__default.createElement("div", {
+    className: styles.body
+  }, children);
+}
+function ForgeLayoutContent(props) {
+  const { children } = props;
+  return React__default.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;
+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";
+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,kBAAkB,CAAC;AAMlD,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":""}

package/FormLayout/Grid.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import { HorizontalGridProps } from "../HorizontalGrid";
+export type GridProps = {
+    /**
+     * Content of the grid.
+     */
+    children: ReactNode;
+    /**
+     * The number of columns to display. Accepts either a single value, an
+     * array of column values, or an object of values for different screen sizes.
+     *
+     * @example
+     * columns={6}
+     * columns={{xs: 1, sm: 1, md: 3, lg: 6, xl: 6}}
+     */
+    columns: HorizontalGridProps["columns"];
+};
+export declare function Grid(props: GridProps): React.JSX.Element;
+//# sourceMappingURL=Grid.d.ts.map

package/FormLayout/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/FormLayout/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC,CAAC;AAEF,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,qBAOpC"}

package/FormLayout/Header.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+export type HeaderProps = {
+    /**
+     * Content of the form or section header.
+     */
+    children: ReactNode;
+};
+export declare function Header(props: HeaderProps): React.JSX.Element;
+//# sourceMappingURL=Header.d.ts.map

package/FormLayout/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/FormLayout/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAGxC"}

package/FormLayout/HelperText.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+export type HelperTextProps = {
+    /**
+     * Id to assign to the HTML element.
+     */
+    id?: string;
+    /**
+     * Content of the helper text.
+     */
+    children: ReactNode;
+};
+export declare function HelperText(props: HelperTextProps): React.JSX.Element;
+//# sourceMappingURL=HelperText.d.ts.map

package/FormLayout/HelperText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../src/FormLayout/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAOhD"}