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

package/FocusedProductLayout/FocusedProductLayout.d.ts

@@ -0,0 +1,111 @@
+import React, { ReactNode } from "react";
+import { MenuOverlayProps } from "../Menu/MenuOverlay";
+export type HeaderProps = {
+    /**
+     * List of help menu items to render. Should be an array of `<Menu.Item />`s.
+     */
+    helpMenuItems: MenuOverlayProps<object>["children"];
+    /**
+     * Handler that is called when a help menu item is selected.
+     */
+    onHelpMenuAction?: MenuOverlayProps<object>["onAction"];
+    /**
+     * Back arrow to render in the header. The back functionality is completely
+     * up to the consumer.
+     *
+     * @example
+     * ```tsx
+     * <FocusedProductLayout
+     *   renderBackArrow={(props) => <a href="/account/settings" {...props} />}
+     * />
+     * ```
+     *
+     * @example
+     * ```tsx
+     * import Link from "next/link";
+     *
+     * <FocusedProductLayout
+     *   renderBackArrow={(props) => <Link href="/account/settings" {...props} />}
+     * />
+     * ```
+     *
+     * @example
+     * ```tsx
+     * <FocusedProductLayout
+     *   renderBackArrow={(props) => <button onClick={() => {}} {...props} />}
+     * />
+     * ```
+     */
+    renderBackArrow: (props: {
+        children: ReactNode;
+    }) => ReactNode;
+    /**
+     * Logo to render in the header.
+     */
+    renderLogo: () => ReactNode;
+    /**
+     * Page title.
+     */
+    title: ReactNode;
+};
+export type FocusedProductLayoutProps = HeaderProps & {
+    /**
+     * Main content area for the focused product layout. Should be either a
+     * `<FocusedProductLayout.Content />` component or a
+     * `<FocusedProductLayout.WizardContent />`.
+     */
+    content: ReactNode;
+    /**
+     * Optional side panel for the focused product layout. Should be
+     * a `<FocusedProductLayout.SidePanel />`.
+     */
+    sidePanel?: ReactNode;
+    /**
+     * Position of the side panel.
+     */
+    sidePanelPosition?: "start" | "end";
+};
+/**
+ * `FocusedProductLayout` defines the areas of a product page in a
+ * focused state.
+ *
+ * @example
+ * ```tsx
+ * <FocusedProductLayout
+ *   helpMenuItems={[
+ *     <Menu.Item
+ *       key="1"
+ *       href="https://www.easypost.com/docs/api"
+ *       target="_blank"
+ *       rel="noopener"
+ *     >
+ *       Documentation
+ *     </Menu.Item>,
+ *   ]}
+ *   // Optionally accept a menu handler for menu items that are not links
+ *   onHelpMenuAction={(key) => {}}
+ *   renderBackArrow={(props) => (
+ *     <button {...props} onClick={action("backArrow.onClick pressed")} />
+ *   )}
+ *   renderLogo={() => <EasyPostFullLogo />}
+ *   title="Page Title"
+ *   sidePanel={
+ *     <FocusedProductLayout.SidePanel>
+ *       Side panel content
+ *     </FocusedProductLayout.SidePanel>
+ *   }
+ *   content={
+ *     <FocusedProductLayout.Content>
+ *       Content
+ *     </FocusedProductLayout.Content>
+ *   }
+ * />
+ * ```
+ */
+export declare function FocusedProductLayout(props: FocusedProductLayoutProps): React.JSX.Element;
+export declare namespace FocusedProductLayout {
+    var SidePanel: typeof import("./SidePanel").SidePanel;
+    var Content: typeof import("./Content").Content;
+    var WizardContent: typeof import("./WizardContent").WizardContent;
+}
+//# sourceMappingURL=FocusedProductLayout.d.ts.map

package/FocusedProductLayout/FocusedProductLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusedProductLayout.d.ts","sourceRoot":"","sources":["../../src/FocusedProductLayout/FocusedProductLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,aAAa,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;IAEpD;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;IAExD;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,KAAK,SAAS,CAAC;IAE/D;;OAEG;IACH,UAAU,EAAE,MAAM,SAAS,CAAC;IAE5B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG;IACpD;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAsBpE;yBAtBe,oBAAoB"}

package/FocusedProductLayout/FocusedProductLayout.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FocusedProductLayout } from "./FocusedProductLayout";
+type Story = StoryObj<typeof FocusedProductLayout>;
+declare const meta: Meta<typeof FocusedProductLayout>;
+export default meta;
+export declare const EmptyContent: Story;
+export declare const WithSidePanel: Story;
+export declare const WithSidePanelAtStart: Story;
+export declare const WithSidePanelWidth: Story;
+export declare const WizardContent: Story;
+export declare const BackArrowAsLink: Story;
+//# sourceMappingURL=FocusedProductLayout.stories.d.ts.map

package/FocusedProductLayout/FocusedProductLayout.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusedProductLayout.stories.d.ts","sourceRoot":"","sources":["../../src/FocusedProductLayout/FocusedProductLayout.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,EACL,oBAAoB,EAErB,MAAM,wBAAwB,CAAC;AAEhC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAMnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CA8B3C,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAelC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgC3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC"}

package/FocusedProductLayout/FocusedProductLayout.test.d.ts

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

package/FocusedProductLayout/FocusedProductLayout.test.d.ts.map

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

package/FocusedProductLayout/HeaderAtTopOfPage.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { HeaderProps } from "./FocusedProductLayout";
+/**
+ * Header to render at the top of the page. Above the main content. Only
+ * visible on small screens.
+ *
+ * @private
+ * @ignore
+ */
+export declare function HeaderAtTopOfPage(props: Omit<HeaderProps, "title">): React.JSX.Element;
+//# sourceMappingURL=HeaderAtTopOfPage.d.ts.map

package/FocusedProductLayout/HeaderAtTopOfPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderAtTopOfPage.d.ts","sourceRoot":"","sources":["../../src/FocusedProductLayout/HeaderAtTopOfPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAI1D;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,qBAYlE"}

package/FocusedProductLayout/HeaderInContentArea.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { HeaderProps } from "./FocusedProductLayout";
+/**
+ * Header to render in the main content area. Most of this is rendered only
+ * on large screens.
+ *
+ * @private
+ * @ignore
+ */
+export declare function HeaderInContentArea(props: HeaderProps): React.JSX.Element;
+//# sourceMappingURL=HeaderInContentArea.d.ts.map

package/FocusedProductLayout/HeaderInContentArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderInContentArea.d.ts","sourceRoot":"","sources":["../../src/FocusedProductLayout/HeaderInContentArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAI1D;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,qBA0BrD"}

package/FocusedProductLayout/SidePanel.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+export type SidePanelProps = {
+    /**
+     * Content for the side panel.
+     */
+    children: ReactNode;
+    /**
+     * A valid `flex-basis` value for the side panel.
+     */
+    width?: string;
+};
+export declare function SidePanel(props: SidePanelProps): React.JSX.Element;
+//# sourceMappingURL=SidePanel.d.ts.map

package/FocusedProductLayout/SidePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../src/FocusedProductLayout/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAc9C"}

package/FocusedProductLayout/WizardContent.d.ts

@@ -0,0 +1,49 @@
+import React, { ReactNode } from "react";
+import { StepperProps } from "../Stepper";
+export type WizardContentProps = {
+    /**
+     * The active step, represented as an index of the sequence.
+     */
+    activeStepIndex: StepperProps["activeStepIndex"];
+    /**
+     * Content to render for the active wizard step.
+     */
+    children: ReactNode;
+    /**
+     * Configuration for the wizard's next action button.
+     */
+    nextAction: WizardContentActionProps;
+    /**
+     * Configuration for the wizard's previous action button.
+     */
+    previousAction: WizardContentActionProps;
+    /**
+     * The steps to render, represented as `<Stepper.Step/ >`.
+     */
+    steps: StepperProps["children"];
+};
+type WizardContentActionProps = {
+    /**
+     * The action's text.
+     */
+    content: string;
+    /**
+     * Handler to run for the action. Should generally progress or regress
+     * the stepper.
+     */
+    onAction: () => void;
+    /**
+     * Whether or not the action is disabled.
+     */
+    isDisabled?: boolean;
+};
+/**
+ * @privateRemarks
+ * Represents a wizard type of content to be used within a FocusedProductLayout.
+ *
+ * @private
+ * @ignore
+ */
+export declare function WizardContent(props: WizardContentProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=WizardContent.d.ts.map

package/FocusedProductLayout/WizardContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardContent.d.ts","sourceRoot":"","sources":["../../src/FocusedProductLayout/WizardContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AAInD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,eAAe,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAEjD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,wBAAwB,CAAC;IAErC;;OAEG;IACH,cAAc,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACjC,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA0BtD"}

package/FocusedProductLayout/index.d.ts

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

package/FocusedProductLayout/index.d.ts.map

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

package/FocusedProductLayout/index.js

@@ -0,0 +1,186 @@
+"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 HelpMenu = require("../__chunks__/HelpMenu-LZ_ky28u.js");
+const ArrowBack = require("../__chunks__/ArrowBack-C_LSatif.js");
+const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const Text = require("../__chunks__/Text-B1xglKFU.js");
+const Button = require("../__chunks__/Button-DUZZ9HoT.js");
+const Stepper = require("../__chunks__/Stepper--KsoKMdM.js");
+function Content({ children }) {
+  return React.createElement("main", null, children);
+}
+const BackArrow$1 = "_BackArrow_1hz2w_4";
+const styles$5 = {
+  BackArrow: BackArrow$1
+};
+function BackArrow(props) {
+  const { renderBackArrow } = props;
+  return React.createElement("span", {
+    className: styles$5.BackArrow
+  }, renderBackArrow({
+    children: React.createElement(React.Fragment, null, React.createElement(Icon.Icon, {
+      symbol: ArrowBack.ArrowBack
+    }), React.createElement(Text.Text, {
+      visuallyHidden: true
+    }, "Back"))
+  }));
+}
+const HeaderAtTopOfPage$1 = "_HeaderAtTopOfPage_75jd7_4";
+const logoBox = "_logoBox_75jd7_13";
+const styles$4 = {
+  HeaderAtTopOfPage: HeaderAtTopOfPage$1,
+  logoBox
+};
+function HeaderAtTopOfPage(props) {
+  const { helpMenuItems, onHelpMenuAction, renderBackArrow, renderLogo } = props;
+  return React.createElement("div", {
+    className: styles$4.HeaderAtTopOfPage
+  }, React.createElement("span", {
+    className: styles$4.logoBox
+  }, React.createElement(BackArrow, {
+    renderBackArrow
+  }), renderLogo()), React.createElement(HelpMenu.HelpMenu, {
+    items: helpMenuItems,
+    onAction: onHelpMenuAction
+  }));
+}
+const HeaderInContentArea$1 = "_HeaderInContentArea_9myao_4";
+const logoBar = "_logoBar_9myao_11";
+const titleBox = "_titleBox_9myao_23";
+const backArrowBox = "_backArrowBox_9myao_29";
+const styles$3 = {
+  HeaderInContentArea: HeaderInContentArea$1,
+  logoBar,
+  titleBox,
+  backArrowBox
+};
+function HeaderInContentArea(props) {
+  const { helpMenuItems, onHelpMenuAction, renderBackArrow, renderLogo, title } = props;
+  return React.createElement("div", {
+    className: styles$3.HeaderInContentArea
+  }, React.createElement("div", {
+    className: styles$3.logoBar
+  }, renderLogo(), React.createElement(HelpMenu.HelpMenu, {
+    items: helpMenuItems,
+    onAction: onHelpMenuAction
+  })), React.createElement("header", null, React.createElement("div", {
+    className: styles$3.titleBox
+  }, React.createElement("span", {
+    className: styles$3.backArrowBox
+  }, React.createElement(BackArrow, {
+    renderBackArrow
+  })), React.createElement(Text.Text, {
+    as: "h2",
+    variant: "heading3"
+  }, title))));
+}
+const SidePanel$1 = "_SidePanel_h0l1q_4";
+const styles$2 = {
+  SidePanel: SidePanel$1
+};
+function SidePanel(props) {
+  const { children, width = "auto" } = props;
+  const style = __spreadValues({}, utilities_css.getComponentToken("focused-product-layout-side-panel", "flex-basis", width));
+  return React.createElement("aside", {
+    className: styles$2.SidePanel,
+    style
+  }, children);
+}
+const WizardContent$1 = "_WizardContent_bmnre_4";
+const main = "_main_bmnre_11";
+const stepperContainer = "_stepperContainer_bmnre_15";
+const stepper = "_stepper_bmnre_15";
+const footer = "_footer_bmnre_34";
+const styles$1 = {
+  WizardContent: WizardContent$1,
+  main,
+  stepperContainer,
+  stepper,
+  footer
+};
+function WizardContent(props) {
+  const { activeStepIndex, steps, previousAction, nextAction, children } = props;
+  return React.createElement("div", {
+    className: styles$1.WizardContent
+  }, React.createElement("div", {
+    className: styles$1.stepperContainer
+  }, React.createElement("div", {
+    className: styles$1.stepper
+  }, React.createElement(Stepper.Stepper, {
+    activeStepIndex
+  }, steps))), React.createElement("main", {
+    className: styles$1.main
+  }, children), React.createElement("div", {
+    className: styles$1.footer
+  }, React.createElement(Button.Button, {
+    variant: "outlined",
+    color: "support",
+    onPress: previousAction.onAction
+  }, previousAction.content), React.createElement(Button.Button, {
+    onPress: nextAction.onAction
+  }, nextAction.content)));
+}
+const FocusedProductLayout$1 = "_FocusedProductLayout_q2le8_4";
+const innerContainer = "_innerContainer_q2le8_17";
+const topBar = "_topBar_q2le8_32";
+const contentContainer = "_contentContainer_q2le8_41";
+const sidePanelPositionStart = "_sidePanelPositionStart_q2le8_55";
+const styles = {
+  FocusedProductLayout: FocusedProductLayout$1,
+  innerContainer,
+  topBar,
+  contentContainer,
+  sidePanelPositionStart
+};
+function FocusedProductLayout(props) {
+  const _a = props, { content, sidePanel, sidePanelPosition, title } = _a, headerProps = __objRest(_a, ["content", "sidePanel", "sidePanelPosition", "title"]);
+  const className = utilities_css.classNames(styles.FocusedProductLayout, sidePanelPosition && styles[utilities_css.variationName("sidePanelPosition", sidePanelPosition)]);
+  return React.createElement("div", {
+    className
+  }, React.createElement("div", {
+    className: styles.innerContainer
+  }, React.createElement("div", {
+    className: styles.topBar
+  }, React.createElement(HeaderAtTopOfPage, __spreadValues({}, headerProps))), React.createElement("div", {
+    className: styles.contentContainer
+  }, React.createElement(HeaderInContentArea, __spreadProps(__spreadValues({}, headerProps), {
+    title
+  })), content), sidePanel));
+}
+FocusedProductLayout.SidePanel = SidePanel;
+FocusedProductLayout.Content = Content;
+FocusedProductLayout.WizardContent = WizardContent;
+exports.FocusedProductLayout = FocusedProductLayout;

package/FocusedProductLayout/index.mjs

@@ -0,0 +1,186 @@
+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 from "react";
+import { getComponentToken, classNames, variationName } from "../utilities/css.mjs";
+import { H as HelpMenu } from "../__chunks__/HelpMenu-DHNd3X_S.mjs";
+import { A as ArrowBack } from "../__chunks__/ArrowBack-BFS-tCpV.mjs";
+import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
+import { T as Text } from "../__chunks__/Text-CX5GoBTS.mjs";
+import { B as Button } from "../__chunks__/Button-BE3zVhME.mjs";
+import { S as Stepper } from "../__chunks__/Stepper-CACO2jLG.mjs";
+function Content({ children }) {
+  return React__default.createElement("main", null, children);
+}
+const BackArrow$1 = "_BackArrow_1hz2w_4";
+const styles$5 = {
+  BackArrow: BackArrow$1
+};
+function BackArrow(props) {
+  const { renderBackArrow } = props;
+  return React__default.createElement("span", {
+    className: styles$5.BackArrow
+  }, renderBackArrow({
+    children: React__default.createElement(React__default.Fragment, null, React__default.createElement(Icon, {
+      symbol: ArrowBack
+    }), React__default.createElement(Text, {
+      visuallyHidden: true
+    }, "Back"))
+  }));
+}
+const HeaderAtTopOfPage$1 = "_HeaderAtTopOfPage_75jd7_4";
+const logoBox = "_logoBox_75jd7_13";
+const styles$4 = {
+  HeaderAtTopOfPage: HeaderAtTopOfPage$1,
+  logoBox
+};
+function HeaderAtTopOfPage(props) {
+  const { helpMenuItems, onHelpMenuAction, renderBackArrow, renderLogo } = props;
+  return React__default.createElement("div", {
+    className: styles$4.HeaderAtTopOfPage
+  }, React__default.createElement("span", {
+    className: styles$4.logoBox
+  }, React__default.createElement(BackArrow, {
+    renderBackArrow
+  }), renderLogo()), React__default.createElement(HelpMenu, {
+    items: helpMenuItems,
+    onAction: onHelpMenuAction
+  }));
+}
+const HeaderInContentArea$1 = "_HeaderInContentArea_9myao_4";
+const logoBar = "_logoBar_9myao_11";
+const titleBox = "_titleBox_9myao_23";
+const backArrowBox = "_backArrowBox_9myao_29";
+const styles$3 = {
+  HeaderInContentArea: HeaderInContentArea$1,
+  logoBar,
+  titleBox,
+  backArrowBox
+};
+function HeaderInContentArea(props) {
+  const { helpMenuItems, onHelpMenuAction, renderBackArrow, renderLogo, title } = props;
+  return React__default.createElement("div", {
+    className: styles$3.HeaderInContentArea
+  }, React__default.createElement("div", {
+    className: styles$3.logoBar
+  }, renderLogo(), React__default.createElement(HelpMenu, {
+    items: helpMenuItems,
+    onAction: onHelpMenuAction
+  })), React__default.createElement("header", null, React__default.createElement("div", {
+    className: styles$3.titleBox
+  }, React__default.createElement("span", {
+    className: styles$3.backArrowBox
+  }, React__default.createElement(BackArrow, {
+    renderBackArrow
+  })), React__default.createElement(Text, {
+    as: "h2",
+    variant: "heading3"
+  }, title))));
+}
+const SidePanel$1 = "_SidePanel_h0l1q_4";
+const styles$2 = {
+  SidePanel: SidePanel$1
+};
+function SidePanel(props) {
+  const { children, width = "auto" } = props;
+  const style = __spreadValues({}, getComponentToken("focused-product-layout-side-panel", "flex-basis", width));
+  return React__default.createElement("aside", {
+    className: styles$2.SidePanel,
+    style
+  }, children);
+}
+const WizardContent$1 = "_WizardContent_bmnre_4";
+const main = "_main_bmnre_11";
+const stepperContainer = "_stepperContainer_bmnre_15";
+const stepper = "_stepper_bmnre_15";
+const footer = "_footer_bmnre_34";
+const styles$1 = {
+  WizardContent: WizardContent$1,
+  main,
+  stepperContainer,
+  stepper,
+  footer
+};
+function WizardContent(props) {
+  const { activeStepIndex, steps, previousAction, nextAction, children } = props;
+  return React__default.createElement("div", {
+    className: styles$1.WizardContent
+  }, React__default.createElement("div", {
+    className: styles$1.stepperContainer
+  }, React__default.createElement("div", {
+    className: styles$1.stepper
+  }, React__default.createElement(Stepper, {
+    activeStepIndex
+  }, steps))), React__default.createElement("main", {
+    className: styles$1.main
+  }, children), React__default.createElement("div", {
+    className: styles$1.footer
+  }, React__default.createElement(Button, {
+    variant: "outlined",
+    color: "support",
+    onPress: previousAction.onAction
+  }, previousAction.content), React__default.createElement(Button, {
+    onPress: nextAction.onAction
+  }, nextAction.content)));
+}
+const FocusedProductLayout$1 = "_FocusedProductLayout_q2le8_4";
+const innerContainer = "_innerContainer_q2le8_17";
+const topBar = "_topBar_q2le8_32";
+const contentContainer = "_contentContainer_q2le8_41";
+const sidePanelPositionStart = "_sidePanelPositionStart_q2le8_55";
+const styles = {
+  FocusedProductLayout: FocusedProductLayout$1,
+  innerContainer,
+  topBar,
+  contentContainer,
+  sidePanelPositionStart
+};
+function FocusedProductLayout(props) {
+  const _a = props, { content, sidePanel, sidePanelPosition, title } = _a, headerProps = __objRest(_a, ["content", "sidePanel", "sidePanelPosition", "title"]);
+  const className = classNames(styles.FocusedProductLayout, sidePanelPosition && styles[variationName("sidePanelPosition", sidePanelPosition)]);
+  return React__default.createElement("div", {
+    className
+  }, React__default.createElement("div", {
+    className: styles.innerContainer
+  }, React__default.createElement("div", {
+    className: styles.topBar
+  }, React__default.createElement(HeaderAtTopOfPage, __spreadValues({}, headerProps))), React__default.createElement("div", {
+    className: styles.contentContainer
+  }, React__default.createElement(HeaderInContentArea, __spreadProps(__spreadValues({}, headerProps), {
+    title
+  })), content), sidePanel));
+}
+FocusedProductLayout.SidePanel = SidePanel;
+FocusedProductLayout.Content = Content;
+FocusedProductLayout.WizardContent = WizardContent;
+export {
+  FocusedProductLayout
+};