@bitrise/bitkit-v2 0.3.267-beta.1792 → 0.3.267

package/AGENTS.md

@@ -113,20 +113,7 @@ Bitkit components use consistent prop names across the library:
   <BitkitActionMenu.Item href="https://example.com" isExternal value="docs">Open docs</BitkitActionMenu.Item>
   ```
 - **Form components are flat** — `BitkitTextInput`, `BitkitSelect`, `BitkitCombobox`, etc. expose `label`, `errorText`, `helperText`, etc. directly as props. No need to wrap in a separate field component.
-- **Three dialog components, one shell** — pick by intent, never reach for low-level dialog primitives (there are none exported):
-  - `BitkitDialog` — header (title + close) + body (`children`) + footer. The body is the dialog's `children`. The footer is two slot props: `footerButtons` (action buttons, auto-wrapped in the standard right-aligned row — no manual wrapper) and `footerContent` (arbitrary content rendered raw, e.g. an inline `BitkitAlert`). Both can be combined (content first, then buttons); omit both for a passive dialog with no footer.
-  - `BitkitFormDialog` — same API as `BitkitDialog`, but the whole content is a `<form>`, so a `type="submit"` button in `footerButtons` submits natively. Accepts form props (`onSubmit`, `method`, …).
-  - `BitkitStepperDialog` — a multi-step dialog. Pass `BitkitStepperDialog.Step` children (each with `label` for the steps header, `title`/`description` for the step body). It owns the step state and auto-renders the steps header; wire footer navigation via the `useStepperDialog()` hook (`{ step, setStep, next, prev, goTo, isFirst, isLast, totalSteps }`) from a component rendered in the footer slot. Controlled via `step`/`onStepChange`, or uncontrolled via `defaultStep`.
-  ```tsx
-  <BitkitDialog footerButtons={<><Button variant="secondary">Cancel</Button><Button variant="primary">Save</Button></>} open={open} onOpenChange={…} title="Title">Body</BitkitDialog>
-  <BitkitFormDialog onSubmit={handleSubmit} open={open} onOpenChange={…} title="Edit" footerButtons={<Button type="submit">Save</Button>}>…fields…</BitkitFormDialog>
-  <BitkitStepperDialog footerContent={<StepperNav />} title="Wizard" trigger={<Button>Open</Button>}>
-    <BitkitStepperDialog.Step label="Account" title="Create account">…</BitkitStepperDialog.Step>
-    <BitkitStepperDialog.Step label="Confirm" title="Confirm">…</BitkitStepperDialog.Step>
-  </BitkitStepperDialog>
-  ```
-  For closing on click, use controlled `open`/`onOpenChange`, or wrap a button in Chakra's `Dialog.ActionTrigger`. For a fully custom dialog, compose raw Chakra `Dialog.*` atoms directly.
-- **Dialog non-dismissible + post-close callback** — works on all three: pass `closable={false}` to make the dialog fully non-dismissible (the close button is rendered but disabled, ESC is blocked, outside clicks are ignored — the only way out is an explicit footer action). Pass `onExitComplete` to run code after the close animation finishes (navigation, focus restoration, cleanup):
+- **`BitkitDialog` non-dismissible + post-close callback** — pass `closable={false}` to make the dialog fully non-dismissible: the close button is rendered but disabled (kept for layout consistency), ESC is blocked, and outside clicks are ignored. The only way out is an explicit footer action. Pass `onExitComplete` to run code after the close animation finishes (navigation, focus restoration, cleanup):
   ```tsx
   <BitkitDialog closable={false} open={open} onOpenChange={…} title="Action required">…</BitkitDialog>
   <BitkitDialog open={open} onExitComplete={() => navigate('/next')} onOpenChange={…} title="…">…</BitkitDialog>
@@ -158,7 +145,7 @@ Bitkit components use consistent prop names across the library:
   This holds for form fields (`BitkitTextInput`, `BitkitSelect`, `BitkitNativeSelect`, `BitkitCombobox`, etc.), buttons (`BitkitButton`, `BitkitIconButton`, etc.), and most other components — they all forward Chakra style props through to the rendered root element.
 
   **Exceptions** — a few component groups intentionally own their own layout and don't accept arbitrary style props from outside:
-  - Page-level overlays: `BitkitDialog`, `BitkitFormDialog`, `BitkitStepperDialog`, `BitkitDrawer`, `BitkitCalendar` — use the component's own sizing API (`size`, `maxHeight`, etc.).
+  - Page-level overlays: `BitkitDialog`, `BitkitDrawer`, `BitkitCalendar` — use the component's own sizing API (`size`, `maxHeight`, etc.).
   - Floating positioned components: `BitkitTooltip`, `BitkitLabelTooltip`, `BitkitDefinitionTooltip`, `BitkitOverflowTooltip`, `BitkitToast`, `BitkitSelectMenu`, `BitkitMultiselectMenu` — their layout is positioned automatically; pass styling via the component's own props instead of a wrapper.
 
   > **For everything else, if a style prop doesn't take effect on a Bitkit component, that's a bug in the component, not a styling task.** Stop, tell the user something looks off in Bitkit so they can flag it to the Bitkit team — don't quietly add a `<Box>` workaround. Each silent workaround hides a regression and bakes the wrapper pattern into the codebase.

package/dist/components/BitkitDialog/BitkitDialog.d.ts

@@ -1,10 +1,9 @@
 import { Dialog } from '@chakra-ui/react/dialog';
 import { ReactNode } from 'react';
+import { BitkitDialogHeaderProps } from './BitkitDialogHeader';
 export interface BitkitDialogProps {
     children?: ReactNode;
     closable?: boolean;
-    footerButtons?: ReactNode;
-    footerContent?: ReactNode;
     headerLabel?: string;
     maxHeight?: string;
     onExitComplete?: () => void;
@@ -16,14 +15,28 @@ export interface BitkitDialogProps {
     scrollBehavior?: 'inside' | 'outside';
     showScrollGradient?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'full';
+    step?: number;
     title: ReactNode;
     trigger?: ReactNode;
     variant?: 'overflowContent';
 }
 declare const _default: {
-    ({ children, closable, footerButtons, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, }: BitkitDialogProps): import("react").JSX.Element;
+    ({ children, closable, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior: scrollBehaviorProp, showScrollGradient, size, step, title, trigger, variant, }: BitkitDialogProps): import("react").JSX.Element;
     displayName: string;
 } & {
     ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Body: ({ children, ...rest }: import('./BitkitDialogBody').BitkitDialogBodyProps) => import("react").JSX.Element;
+    Buttons: import('react').ForwardRefExoticComponent<import('@chakra-ui/react').BoxProps & import('react').RefAttributes<HTMLDivElement>>;
+    Content: ({ maxHeight, ...inner }: import('./BitkitDialogContent').BitkitDialogContentProps) => import("react").JSX.Element;
+    Footer: import('react').ForwardRefExoticComponent<Dialog.FooterProps & import('react').RefAttributes<HTMLDivElement>>;
+    FormContent: import('react').ForwardRefExoticComponent<import('./BitkitDialogFormContent').BitkitDialogFormContentProps & import('react').RefAttributes<HTMLFormElement>>;
+    Header: {
+        ({ children }: BitkitDialogHeaderProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Step: {
+        (props: import('./BitkitDialogStep').BitkitDialogStepProps): import("react").JSX.Element | null;
+        displayName: string;
+    };
 };
 export default _default;

package/dist/components/BitkitDialog/BitkitDialog.js

@@ -1,36 +1,59 @@
 import { withSubComponents } from "../../utilities/withSubComponents.js";
-import DialogInner from "./DialogInner.js";
-import DialogShell from "./DialogShell.js";
-import { jsx } from "react/jsx-runtime";
+import BitkitDialogStep from "./BitkitDialogStep.js";
+import BitkitDialogBody from "./BitkitDialogBody.js";
+import BitkitDialogButtons from "./BitkitDialogButtons.js";
+import BitkitDialogContent from "./BitkitDialogContent.js";
+import BitkitDialogFormContent from "./BitkitDialogFormContent.js";
+import BitkitDialogHeader from "./BitkitDialogHeader.js";
+import BitkitDialogRoot from "./BitkitDialogRoot.js";
+import { Children, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
 import { Dialog } from "@chakra-ui/react/dialog";
 //#region lib/components/BitkitDialog/BitkitDialog.tsx
-var BitkitDialog = ({ children, closable = true, footerButtons, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant }) => /* @__PURE__ */ jsx(DialogShell, {
-	closable,
-	onExitComplete,
-	onOpenChange,
-	open,
-	preventScroll,
-	scrollBehavior,
-	size,
-	trigger,
-	variant,
-	children: /* @__PURE__ */ jsx(Dialog.Content, {
-		maxHeight,
-		children: /* @__PURE__ */ jsx(DialogInner, {
+var BitkitDialog = ({ children, closable = true, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior: scrollBehaviorProp, showScrollGradient, size, step = 0, title, trigger, variant }) => {
+	const scrollBehavior = variant === "overflowContent" ? "inside" : scrollBehaviorProp;
+	const childrenArray = Children.toArray(children);
+	const headerChild = childrenArray.find((child) => isValidElement(child) && child.type === BitkitDialogHeader);
+	const bodyChildren = childrenArray.filter((child) => !(isValidElement(child) && child.type === BitkitDialogHeader));
+	const stepHeader = isValidElement(headerChild) ? headerChild.props.children : void 0;
+	return /* @__PURE__ */ jsxs(BitkitDialogRoot, {
+		closeOnEscape: closable,
+		onExitComplete,
+		onOpenChange,
+		open,
+		preventScroll,
+		scrollBehavior,
+		size,
+		variant,
+		children: [trigger && /* @__PURE__ */ jsx(Dialog.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsx(BitkitDialogContent, {
 			closable,
-			footerButtons,
-			footerContent,
 			headerLabel,
+			maxHeight,
 			scrollBehavior,
 			showScrollGradient,
+			step,
+			stepHeader,
 			title,
 			variant,
-			children
-		})
-	})
-});
+			children: bodyChildren
+		}) })] })]
+	});
+};
 BitkitDialog.displayName = "BitkitDialog";
-var BitkitDialog_default = withSubComponents(BitkitDialog, { ActionTrigger: Dialog.ActionTrigger });
+var BitkitDialog_default = withSubComponents(BitkitDialog, {
+	ActionTrigger: Dialog.ActionTrigger,
+	Body: BitkitDialogBody,
+	Buttons: BitkitDialogButtons,
+	Content: BitkitDialogContent,
+	Footer: Dialog.Footer,
+	FormContent: BitkitDialogFormContent,
+	Header: BitkitDialogHeader,
+	Step: BitkitDialogStep
+});
 //#endregion
 export { BitkitDialog_default as default };
 

package/dist/components/BitkitDialog/BitkitDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\n\nexport interface BitkitDialogProps {\n  children?: ReactNode;\n  closable?: boolean;\n  footerButtons?: ReactNode;\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\nconst BitkitDialog = ({\n  children,\n  closable = true,\n  footerButtons,\n  footerContent,\n  headerLabel,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  title,\n  trigger,\n  variant,\n}: BitkitDialogProps) => (\n  <DialogShell\n    closable={closable}\n    onExitComplete={onExitComplete}\n    onOpenChange={onOpenChange}\n    open={open}\n    preventScroll={preventScroll}\n    scrollBehavior={scrollBehavior}\n    size={size}\n    trigger={trigger}\n    variant={variant}\n  >\n    <Dialog.Content maxHeight={maxHeight}>\n      <DialogInner\n        closable={closable}\n        footerButtons={footerButtons}\n        footerContent={footerContent}\n        headerLabel={headerLabel}\n        scrollBehavior={scrollBehavior}\n        showScrollGradient={showScrollGradient}\n        title={title}\n        variant={variant}\n      >\n        {children}\n      </DialogInner>\n    </Dialog.Content>\n  </DialogShell>\n);\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;AA0BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,eACA,eACA,aACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,cAEA,oBAAC,aAAD;CACY;CACM;CACF;CACR;CACS;CACC;CACV;CACG;CACA;WAET,oBAAC,OAAO,SAAR;EAA2B;YACzB,oBAAC,aAAD;GACY;GACK;GACA;GACF;GACG;GACI;GACb;GACE;GAER;EACU,CAAA;CACC,CAAA;AACL,CAAA;AAGf,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,eAAe,OAAO,cAAc,CAAC"}
+{"version":3,"file":"BitkitDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Children, isValidElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitDialogBody from './BitkitDialogBody';\nimport BitkitDialogButtons from './BitkitDialogButtons';\nimport BitkitDialogContent from './BitkitDialogContent';\nimport BitkitDialogFormContent from './BitkitDialogFormContent';\nimport BitkitDialogHeader, { type BitkitDialogHeaderProps } from './BitkitDialogHeader';\nimport BitkitDialogRoot from './BitkitDialogRoot';\nimport BitkitDialogStep from './BitkitDialogStep';\n\nexport interface BitkitDialogProps {\n  children?: ReactNode;\n  closable?: boolean;\n  headerLabel?: string;\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  step?: number;\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\nconst BitkitDialog = ({\n  children,\n  closable = true,\n  headerLabel,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll,\n  scrollBehavior: scrollBehaviorProp,\n  showScrollGradient,\n  size,\n  step = 0,\n  title,\n  trigger,\n  variant,\n}: BitkitDialogProps) => {\n  const scrollBehavior = variant === 'overflowContent' ? 'inside' : scrollBehaviorProp;\n\n  const childrenArray = Children.toArray(children);\n  const headerChild = childrenArray.find((child) => isValidElement(child) && child.type === BitkitDialogHeader);\n  const bodyChildren = childrenArray.filter((child) => !(isValidElement(child) && child.type === BitkitDialogHeader));\n  const stepHeader = isValidElement(headerChild) ? (headerChild.props as BitkitDialogHeaderProps).children : undefined;\n\n  return (\n    <BitkitDialogRoot\n      closeOnEscape={closable}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      variant={variant}\n    >\n      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}\n      <Portal>\n        <Dialog.Backdrop />\n        <Dialog.Positioner>\n          <BitkitDialogContent\n            closable={closable}\n            headerLabel={headerLabel}\n            maxHeight={maxHeight}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            step={step}\n            stepHeader={stepHeader}\n            title={title}\n            variant={variant}\n          >\n            {bodyChildren}\n          </BitkitDialogContent>\n        </Dialog.Positioner>\n      </Portal>\n    </BitkitDialogRoot>\n  );\n};\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, {\n  ActionTrigger: Dialog.ActionTrigger,\n  Body: BitkitDialogBody,\n  Buttons: BitkitDialogButtons,\n  Content: BitkitDialogContent,\n  Footer: Dialog.Footer,\n  FormContent: BitkitDialogFormContent,\n  Header: BitkitDialogHeader,\n  Step: BitkitDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;AA+BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,aACA,WACA,gBACA,cACA,MACA,eACA,gBAAgB,oBAChB,oBACA,MACA,OAAO,GACP,OACA,SACA,cACuB;CACvB,MAAM,iBAAiB,YAAY,oBAAoB,WAAW;CAElE,MAAM,gBAAgB,SAAS,QAAQ,QAAQ;CAC/C,MAAM,cAAc,cAAc,MAAM,UAAU,eAAe,KAAK,KAAK,MAAM,SAAS,kBAAkB;CAC5G,MAAM,eAAe,cAAc,QAAQ,UAAU,EAAE,eAAe,KAAK,KAAK,MAAM,SAAS,mBAAmB;CAClH,MAAM,aAAa,eAAe,WAAW,IAAK,YAAY,MAAkC,WAAW,KAAA;CAE3G,OACE,qBAAC,kBAAD;EACE,eAAe;EACC;EACF;EACR;EACS;EACC;EACV;EACG;YARX,CAUG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;aAAS;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,qBAAD;GACY;GACG;GACF;GACK;GACI;GACd;GACM;GACL;GACE;aAER;EACkB,CAAA,EACJ,CAAA,CACb,EAAA,CAAA,CACQ;;AAEtB;AAEA,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc;CAC7C,eAAe,OAAO;CACtB,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ,OAAO;CACf,aAAa;CACb,QAAQ;CACR,MAAM;AACR,CAAC"}

package/dist/components/BitkitDialog/BitkitDialogBody.d.ts

@@ -0,0 +1,9 @@
+import { Dialog } from '@chakra-ui/react/dialog';
+interface DialogBodyContext {
+    scrollBehavior: 'inside' | 'outside';
+    showScrollGradient: boolean;
+}
+export type BitkitDialogBodyProps = Dialog.BodyProps;
+export declare const DialogBodyContext: import('react').Context<DialogBodyContext>;
+declare const BitkitDialogBody: ({ children, ...rest }: BitkitDialogBodyProps) => import("react").JSX.Element;
+export default BitkitDialogBody;

package/dist/components/BitkitDialog/{DialogBodyContext.js → BitkitDialogBody.js}

@@ -1,10 +1,11 @@
 import IconArrowDown from "../../icons/IconArrowDown.js";
+import BitkitDialogStep from "./BitkitDialogStep.js";
 import { Box } from "@chakra-ui/react/box";
 import { chakra } from "@chakra-ui/react/styled-system";
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, useDialogContext, useDialogStyles } from "@chakra-ui/react/dialog";
-//#region lib/components/BitkitDialog/DialogBodyContext.tsx
+//#region lib/components/BitkitDialog/BitkitDialogBody.tsx
 var DialogBodyContext = createContext({
 	scrollBehavior: "outside",
 	showScrollGradient: true
@@ -57,22 +58,22 @@ var ScrollableDialogBody = ({ children, ...props }) => {
 		})] })]
 	});
 };
-/**
-* Scroll-aware dialog body. Reads {@link DialogBodyContext} to decide whether the body scrolls
-* internally (`inside` → scroll button + optional gradient) or the whole dialog scrolls (`outside`).
-*/
-var DialogBody = ({ children, ...rest }) => {
+var BitkitDialogBody = ({ children, ...rest }) => {
 	const { scrollBehavior } = useContext(DialogBodyContext);
+	const mappedChildren = Children.map(children, (child, index) => {
+		if (isValidElement(child) && child.type === BitkitDialogStep) return cloneElement(child, { _index: index });
+		return child;
+	});
 	if (scrollBehavior === "inside") return /* @__PURE__ */ jsx(ScrollableDialogBody, {
 		...rest,
-		children
+		children: mappedChildren
 	});
 	return /* @__PURE__ */ jsx(Dialog.Body, {
 		...rest,
-		children
+		children: mappedChildren
 	});
 };
 //#endregion
-export { DialogBodyContext, DialogBody as default };
+export { DialogBodyContext, BitkitDialogBody as default };
 
-//# sourceMappingURL=DialogBodyContext.js.map
+//# sourceMappingURL=BitkitDialogBody.js.map

package/dist/components/BitkitDialog/BitkitDialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDialogBody.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogBody.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogContext, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  type ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitDialogStep from './BitkitDialogStep';\n\ninterface DialogBodyContext {\n  scrollBehavior: 'inside' | 'outside';\n  showScrollGradient: boolean;\n}\n\nexport type BitkitDialogBodyProps = Dialog.BodyProps;\n\nexport const DialogBodyContext = createContext<DialogBodyContext>({\n  scrollBehavior: 'outside',\n  showScrollGradient: true,\n});\n\nconst ScrollableDialogBody = ({ children, ...props }: Dialog.BodyProps) => {\n  const { showScrollGradient } = useContext(DialogBodyContext);\n  const styles = useDialogStyles();\n  const { open } = useDialogContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n  const updateScrollButtonVisibility = useCallback(() => {\n    const content = contentRef.current;\n    if (!content) {\n      setIsScrollButtonVisible(false);\n      return;\n    }\n    const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n    setIsScrollButtonVisible(!didScrollToBottom);\n  }, []);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!open || !content) return;\n\n    content.addEventListener('scroll', updateScrollButtonVisibility);\n    const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n    resizeObserver.observe(content);\n\n    return () => {\n      content.removeEventListener('scroll', updateScrollButtonVisibility);\n      resizeObserver.disconnect();\n    };\n  }, [open, updateScrollButtonVisibility]);\n\n  return (\n    <Box css={styles.scrollBody}>\n      <Dialog.Body ref={contentRef} {...props}>\n        {children}\n      </Dialog.Body>\n      {isScrollButtonVisible && (\n        <>\n          {showScrollGradient && <Box css={styles.scrollGradient} />}\n          <chakra.button\n            aria-label=\"Scroll to bottom\"\n            css={styles.scrollButton}\n            type=\"button\"\n            onClick={() => {\n              contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n            }}\n          >\n            <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n          </chakra.button>\n        </>\n      )}\n    </Box>\n  );\n};\n\nconst BitkitDialogBody = ({ children, ...rest }: BitkitDialogBodyProps) => {\n  const { scrollBehavior } = useContext(DialogBodyContext);\n\n  const mappedChildren = Children.map(children, (child, index) => {\n    if (isValidElement(child) && child.type === BitkitDialogStep) {\n      return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n    }\n    return child;\n  });\n\n  if (scrollBehavior === 'inside') {\n    return <ScrollableDialogBody {...rest}>{mappedChildren}</ScrollableDialogBody>;\n  }\n  return <Dialog.Body {...rest}>{mappedChildren}</Dialog.Body>;\n};\n\nexport default BitkitDialogBody;\n"],"mappings":";;;;;;;;AA0BA,IAAa,oBAAoB,cAAiC;CAChE,gBAAgB;CAChB,oBAAoB;AACtB,CAAC;AAED,IAAM,wBAAwB,EAAE,UAAU,GAAG,YAA8B;CACzE,MAAM,EAAE,uBAAuB,WAAW,iBAAiB;CAC3D,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EAEA,yBAAyB,EADC,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe,EAClD;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS;EAEvB,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK;GAAY,GAAI;GAC/B;EACU,CAAA,GACZ,yBACC,qBAAA,YAAA,EAAA,UAAA,CACG,sBAAsB,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GACzD,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;aAEA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;AAEA,IAAM,oBAAoB,EAAE,UAAU,GAAG,WAAkC;CACzE,MAAM,EAAE,mBAAmB,WAAW,iBAAiB;CAEvD,MAAM,iBAAiB,SAAS,IAAI,WAAW,OAAO,UAAU;EAC9D,IAAI,eAAe,KAAK,KAAK,MAAM,SAAS,kBAC1C,OAAO,aAAa,OAA4C,EAAE,QAAQ,MAAM,CAAC;EAEnF,OAAO;CACT,CAAC;CAED,IAAI,mBAAmB,UACrB,OAAO,oBAAC,sBAAD;EAAsB,GAAI;YAAO;CAAqC,CAAA;CAE/E,OAAO,oBAAC,OAAO,MAAR;EAAa,GAAI;YAAO;CAA4B,CAAA;AAC7D"}

package/dist/components/BitkitDialog/BitkitDialogButtons.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '@chakra-ui/react/box';
+export type BitkitDialogButtonsProps = BoxProps;
+declare const BitkitDialogButtons: import('react').ForwardRefExoticComponent<BoxProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BitkitDialogButtons;

package/dist/components/BitkitDialog/BitkitDialogButtons.js

@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region lib/components/BitkitDialog/BitkitDialogButtons.tsx
+var BitkitDialogButtons = forwardRef((props, ref) => /* @__PURE__ */ jsx(Box, {
+	ref,
+	display: "flex",
+	gap: "16",
+	justifyContent: "flex-end",
+	paddingBlockStart: "24",
+	...props
+}));
+BitkitDialogButtons.displayName = "BitkitDialogButtons";
+//#endregion
+export { BitkitDialogButtons as default };
+
+//# sourceMappingURL=BitkitDialogButtons.js.map

package/dist/components/BitkitDialog/BitkitDialogButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDialogButtons.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogButtons.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { forwardRef } from 'react';\n\nexport type BitkitDialogButtonsProps = BoxProps;\n\nconst BitkitDialogButtons = forwardRef<HTMLDivElement, BitkitDialogButtonsProps>((props, ref) => (\n  <Box ref={ref} display=\"flex\" gap=\"16\" justifyContent=\"flex-end\" paddingBlockStart=\"24\" {...props} />\n));\n\nBitkitDialogButtons.displayName = 'BitkitDialogButtons';\n\nexport default BitkitDialogButtons;\n"],"mappings":";;;;AAKA,IAAM,sBAAsB,YAAsD,OAAO,QACvF,oBAAC,KAAD;CAAU;CAAK,SAAQ;CAAO,KAAI;CAAK,gBAAe;CAAW,mBAAkB;CAAK,GAAI;AAAQ,CAAA,CACrG;AAED,oBAAoB,cAAc"}

package/dist/components/BitkitDialog/BitkitDialogContent.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+interface DialogContentInnerProps {
+    children?: ReactNode;
+    closable?: boolean;
+    headerLabel?: string;
+    scrollBehavior?: 'inside' | 'outside';
+    showScrollGradient?: boolean;
+    step?: number;
+    stepHeader?: ReactNode;
+    title: ReactNode;
+    variant?: 'overflowContent';
+}
+export declare const DialogContentInner: ({ children, closable, headerLabel, scrollBehavior: scrollBehaviorProp, showScrollGradient, step, stepHeader, title, variant, }: DialogContentInnerProps) => import("react").JSX.Element;
+export interface BitkitDialogContentProps {
+    children?: ReactNode;
+    closable?: boolean;
+    headerLabel?: string;
+    maxHeight?: string;
+    scrollBehavior?: 'inside' | 'outside';
+    showScrollGradient?: boolean;
+    step?: number;
+    stepHeader?: ReactNode;
+    title: ReactNode;
+    variant?: 'overflowContent';
+}
+declare const BitkitDialogContent: ({ maxHeight, ...inner }: BitkitDialogContentProps) => import("react").JSX.Element;
+export default BitkitDialogContent;

package/dist/components/BitkitDialog/BitkitDialogContent.js

@@ -0,0 +1,57 @@
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
+import { BitkitDialogStepProvider } from "./BitkitDialogStepContext.js";
+import { DialogBodyContext } from "./BitkitDialogBody.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, useDialogStyles } from "@chakra-ui/react/dialog";
+//#region lib/components/BitkitDialog/BitkitDialogContent.tsx
+var PORTAL_DISABLED = { disablePortal: true };
+var DialogContentInner = ({ children, closable = true, headerLabel, scrollBehavior: scrollBehaviorProp = "outside", showScrollGradient = true, step = 0, stepHeader, title, variant }) => {
+	const scrollBehavior = variant === "overflowContent" ? "inside" : scrollBehaviorProp;
+	const styles = useDialogStyles();
+	return /* @__PURE__ */ jsx(BitkitPortalContext.Provider, {
+		value: PORTAL_DISABLED,
+		children: /* @__PURE__ */ jsx(BitkitDialogStepProvider, {
+			value: { step },
+			children: /* @__PURE__ */ jsxs(DialogBodyContext.Provider, {
+				value: {
+					scrollBehavior,
+					showScrollGradient
+				},
+				children: [/* @__PURE__ */ jsxs(Dialog.Header, { children: [
+					/* @__PURE__ */ jsxs(Box, {
+						display: "flex",
+						flexDirection: "column",
+						gap: "4",
+						children: [headerLabel && /* @__PURE__ */ jsx(chakra.p, {
+							css: styles.label,
+							children: headerLabel
+						}), /* @__PURE__ */ jsx(Dialog.Title, { children: title })]
+					}),
+					!!stepHeader && /* @__PURE__ */ jsx(Box, {
+						css: styles.stepHeader,
+						children: stepHeader
+					}),
+					/* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(BitkitCloseButton, {
+							disabled: !closable,
+							size: variant === "overflowContent" ? "xs" : "md",
+							type: "button"
+						})
+					})
+				] }), children]
+			})
+		})
+	});
+};
+var BitkitDialogContent = ({ maxHeight, ...inner }) => /* @__PURE__ */ jsx(Dialog.Content, {
+	maxHeight,
+	children: /* @__PURE__ */ jsx(DialogContentInner, { ...inner })
+});
+//#endregion
+export { DialogContentInner, BitkitDialogContent as default };
+
+//# sourceMappingURL=BitkitDialogContent.js.map

package/dist/components/BitkitDialog/BitkitDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDialogContent.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogContent.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nconst PORTAL_DISABLED = { disablePortal: true };\nimport { DialogBodyContext } from './BitkitDialogBody';\nimport { BitkitDialogStepProvider } from './BitkitDialogStepContext';\n\ninterface DialogContentInnerProps {\n  children?: ReactNode;\n  closable?: boolean;\n  headerLabel?: string;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  step?: number;\n  stepHeader?: ReactNode;\n  title: ReactNode;\n  variant?: 'overflowContent';\n}\n\nexport const DialogContentInner = ({\n  children,\n  closable = true,\n  headerLabel,\n  scrollBehavior: scrollBehaviorProp = 'outside',\n  showScrollGradient = true,\n  step = 0,\n  stepHeader,\n  title,\n  variant,\n}: DialogContentInnerProps) => {\n  const scrollBehavior = variant === 'overflowContent' ? 'inside' : scrollBehaviorProp;\n  const styles = useDialogStyles();\n\n  return (\n    <BitkitPortalContext.Provider value={PORTAL_DISABLED}>\n      <BitkitDialogStepProvider value={{ step }}>\n        <DialogBodyContext.Provider value={{ scrollBehavior, showScrollGradient }}>\n          <Dialog.Header>\n            <Box display=\"flex\" flexDirection=\"column\" gap=\"4\">\n              {headerLabel && <chakra.p css={styles.label}>{headerLabel}</chakra.p>}\n              <Dialog.Title>{title}</Dialog.Title>\n            </Box>\n            {!!stepHeader && <Box css={styles.stepHeader}>{stepHeader}</Box>}\n            <Dialog.CloseTrigger asChild>\n              <BitkitCloseButton\n                disabled={!closable}\n                size={variant === 'overflowContent' ? 'xs' : 'md'}\n                type=\"button\"\n              />\n            </Dialog.CloseTrigger>\n          </Dialog.Header>\n          {children}\n        </DialogBodyContext.Provider>\n      </BitkitDialogStepProvider>\n    </BitkitPortalContext.Provider>\n  );\n};\n\nexport interface BitkitDialogContentProps {\n  children?: ReactNode;\n  closable?: boolean;\n  headerLabel?: string;\n  maxHeight?: string;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  step?: number;\n  stepHeader?: ReactNode;\n  title: ReactNode;\n  variant?: 'overflowContent';\n}\n\nconst BitkitDialogContent = ({ maxHeight, ...inner }: BitkitDialogContentProps) => (\n  <Dialog.Content maxHeight={maxHeight}>\n    <DialogContentInner {...inner} />\n  </Dialog.Content>\n);\n\nexport default BitkitDialogContent;\n"],"mappings":";;;;;;;;;AAQA,IAAM,kBAAkB,EAAE,eAAe,KAAK;AAgB9C,IAAa,sBAAsB,EACjC,UACA,WAAW,MACX,aACA,gBAAgB,qBAAqB,WACrC,qBAAqB,MACrB,OAAO,GACP,YACA,OACA,cAC6B;CAC7B,MAAM,iBAAiB,YAAY,oBAAoB,WAAW;CAClE,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;YACnC,oBAAC,0BAAD;GAA0B,OAAO,EAAE,KAAK;aACtC,qBAAC,kBAAkB,UAAnB;IAA4B,OAAO;KAAE;KAAgB;IAAmB;cAAxE,CACE,qBAAC,OAAO,QAAR,EAAA,UAAA;KACE,qBAAC,KAAD;MAAK,SAAQ;MAAO,eAAc;MAAS,KAAI;gBAA/C,CACG,eAAe,oBAAC,OAAO,GAAR;OAAU,KAAK,OAAO;iBAAQ;MAAsB,CAAA,GACpE,oBAAC,OAAO,OAAR,EAAA,UAAe,MAAoB,CAAA,CAChC;;KACJ,CAAC,CAAC,cAAc,oBAAC,KAAD;MAAK,KAAK,OAAO;gBAAa;KAAgB,CAAA;KAC/D,oBAAC,OAAO,cAAR;MAAqB,SAAA;gBACnB,oBAAC,mBAAD;OACE,UAAU,CAAC;OACX,MAAM,YAAY,oBAAoB,OAAO;OAC7C,MAAK;MACN,CAAA;KACkB,CAAA;IACR,EAAA,CAAA,GACd,QACyB;;EACJ,CAAA;CACE,CAAA;AAElC;AAeA,IAAM,uBAAuB,EAAE,WAAW,GAAG,YAC3C,oBAAC,OAAO,SAAR;CAA2B;WACzB,oBAAC,oBAAD,EAAoB,GAAI,MAAQ,CAAA;AAClB,CAAA"}

package/dist/components/BitkitDialog/BitkitDialogFormContent.d.ts

@@ -0,0 +1,6 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { BitkitDialogContentProps } from './BitkitDialogContent';
+export interface BitkitDialogFormContentProps extends BitkitDialogContentProps, Omit<HTMLChakraProps<'form'>, keyof BitkitDialogContentProps> {
+}
+declare const BitkitDialogFormContent: import('react').ForwardRefExoticComponent<BitkitDialogFormContentProps & import('react').RefAttributes<HTMLFormElement>>;
+export default BitkitDialogFormContent;

package/dist/components/BitkitDialog/BitkitDialogFormContent.js

@@ -0,0 +1,30 @@
+import { DialogContentInner } from "./BitkitDialogContent.js";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@chakra-ui/react/dialog";
+//#region lib/components/BitkitDialog/BitkitDialogFormContent.tsx
+var BitkitDialogFormContent = forwardRef(({ children, closable, headerLabel, maxHeight, scrollBehavior, showScrollGradient, step, stepHeader, title, variant, ...formProps }, ref) => /* @__PURE__ */ jsx(Dialog.Content, {
+	asChild: true,
+	maxHeight,
+	children: /* @__PURE__ */ jsx(chakra.form, {
+		ref,
+		...formProps,
+		children: /* @__PURE__ */ jsx(DialogContentInner, {
+			closable,
+			headerLabel,
+			scrollBehavior,
+			showScrollGradient,
+			step,
+			stepHeader,
+			title,
+			variant,
+			children
+		})
+	})
+}));
+BitkitDialogFormContent.displayName = "BitkitDialogFormContent";
+//#endregion
+export { BitkitDialogFormContent as default };
+
+//# sourceMappingURL=BitkitDialogFormContent.js.map

package/dist/components/BitkitDialog/BitkitDialogFormContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDialogFormContent.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogFormContent.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { chakra, type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitDialogContentProps, DialogContentInner } from './BitkitDialogContent';\n\nexport interface BitkitDialogFormContentProps\n  extends BitkitDialogContentProps, Omit<HTMLChakraProps<'form'>, keyof BitkitDialogContentProps> {}\n\nconst BitkitDialogFormContent = forwardRef<HTMLFormElement, BitkitDialogFormContentProps>(\n  (\n    {\n      children,\n      closable,\n      headerLabel,\n      maxHeight,\n      scrollBehavior,\n      showScrollGradient,\n      step,\n      stepHeader,\n      title,\n      variant,\n      ...formProps\n    },\n    ref,\n  ) => (\n    <Dialog.Content asChild maxHeight={maxHeight}>\n      <chakra.form ref={ref} {...formProps}>\n        <DialogContentInner\n          closable={closable}\n          headerLabel={headerLabel}\n          scrollBehavior={scrollBehavior}\n          showScrollGradient={showScrollGradient}\n          step={step}\n          stepHeader={stepHeader}\n          title={title}\n          variant={variant}\n        >\n          {children}\n        </DialogContentInner>\n      </chakra.form>\n    </Dialog.Content>\n  ),\n);\n\nBitkitDialogFormContent.displayName = 'BitkitDialogFormContent';\n\nexport default BitkitDialogFormContent;\n"],"mappings":";;;;;;AASA,IAAM,0BAA0B,YAE5B,EACE,UACA,UACA,aACA,WACA,gBACA,oBACA,MACA,YACA,OACA,SACA,GAAG,aAEL,QAEA,oBAAC,OAAO,SAAR;CAAgB,SAAA;CAAmB;WACjC,oBAAC,OAAO,MAAR;EAAkB;EAAK,GAAI;YACzB,oBAAC,oBAAD;GACY;GACG;GACG;GACI;GACd;GACM;GACL;GACE;GAER;EACiB,CAAA;CACT,CAAA;AACC,CAAA,CAEpB;AAEA,wBAAwB,cAAc"}

package/dist/components/BitkitDialog/BitkitDialogHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface BitkitDialogHeaderProps {
+    children: ReactNode;
+}
+declare const BitkitDialogHeader: {
+    ({ children }: BitkitDialogHeaderProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default BitkitDialogHeader;

package/dist/components/BitkitDialog/BitkitDialogHeader.js

@@ -0,0 +1,8 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region lib/components/BitkitDialog/BitkitDialogHeader.tsx
+var BitkitDialogHeader = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+BitkitDialogHeader.displayName = "BitkitDialogHeader";
+//#endregion
+export { BitkitDialogHeader as default };
+
+//# sourceMappingURL=BitkitDialogHeader.js.map

package/dist/components/BitkitDialog/BitkitDialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDialogHeader.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogHeader.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nexport interface BitkitDialogHeaderProps {\n  children: ReactNode;\n}\n\nconst BitkitDialogHeader = ({ children }: BitkitDialogHeaderProps) => <>{children}</>;\nBitkitDialogHeader.displayName = 'BitkitDialogHeader';\nexport default BitkitDialogHeader;\n"],"mappings":";;AAMA,IAAM,sBAAsB,EAAE,eAAwC,oBAAA,UAAA,EAAG,SAAW,CAAA;AACpF,mBAAmB,cAAc"}

package/dist/components/BitkitDialog/BitkitDialogRoot.d.ts

@@ -0,0 +1,6 @@
+import { Dialog } from '@chakra-ui/react/dialog';
+export type BitkitDialogRootProps = Dialog.RootProps & {
+    variant?: 'overflowContent';
+};
+declare const BitkitDialogRoot: ({ closeOnInteractOutside, preventScroll, ...props }: BitkitDialogRootProps) => import("react").JSX.Element;
+export default BitkitDialogRoot;

package/dist/components/BitkitDialog/BitkitDialogRoot.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@chakra-ui/react/dialog";
+//#region lib/components/BitkitDialog/BitkitDialogRoot.tsx
+var BitkitDialogRoot = ({ closeOnInteractOutside = false, preventScroll = true, ...props }) => /* @__PURE__ */ jsx(Dialog.Root, {
+	closeOnInteractOutside,
+	preventScroll,
+	...props
+});
+//#endregion
+export { BitkitDialogRoot as default };
+
+//# sourceMappingURL=BitkitDialogRoot.js.map

package/dist/components/BitkitDialog/BitkitDialogRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDialogRoot.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogRoot.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\n\nexport type BitkitDialogRootProps = Dialog.RootProps & {\n  variant?: 'overflowContent';\n};\n\nconst BitkitDialogRoot = ({\n  closeOnInteractOutside = false,\n  preventScroll = true,\n  ...props\n}: BitkitDialogRootProps) => (\n  <Dialog.Root closeOnInteractOutside={closeOnInteractOutside} preventScroll={preventScroll} {...props} />\n);\n\nexport default BitkitDialogRoot;\n"],"mappings":";;;AAMA,IAAM,oBAAoB,EACxB,yBAAyB,OACzB,gBAAgB,MAChB,GAAG,YAEH,oBAAC,OAAO,MAAR;CAAqC;CAAuC;CAAe,GAAI;AAAQ,CAAA"}

package/dist/components/BitkitDialog/BitkitDialogStep.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface BitkitDialogStepProps {
+    children?: ReactNode;
+    description?: string;
+    title: string;
+}
+declare const BitkitDialogStep: {
+    (props: BitkitDialogStepProps): import("react").JSX.Element | null;
+    displayName: string;
+};
+export default BitkitDialogStep;

package/dist/components/BitkitDialog/{BitkitStepperDialogStep.js → BitkitDialogStep.js}

@@ -1,13 +1,13 @@
+import { useBitkitDialogStepContext } from "./BitkitDialogStepContext.js";
 import { chakra } from "@chakra-ui/react/styled-system";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useDialogStyles } from "@chakra-ui/react/dialog";
-//#region lib/components/BitkitDialog/BitkitStepperDialogStep.tsx
-/**
-* A single step of a {@link BitkitStepperDialog}. Renders its `title`/`description` typography
-* followed by `children`. The parent only mounts the active step, so this never self-gates.
-*/
-var BitkitStepperDialogStep = ({ children, description, title }) => {
+//#region lib/components/BitkitDialog/BitkitDialogStep.tsx
+var BitkitDialogStep = (props) => {
+	const { _index = 0, children, description, title } = props;
+	const step = useBitkitDialogStepContext()?.step ?? 0;
 	const styles = useDialogStyles();
+	if (_index !== step) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(chakra.div, {
 		css: styles.stepTitleGroup,
 		children: [/* @__PURE__ */ jsx(chakra.p, {
@@ -19,8 +19,8 @@ var BitkitStepperDialogStep = ({ children, description, title }) => {
 		})]
 	}), children] });
 };
-BitkitStepperDialogStep.displayName = "BitkitStepperDialogStep";
+BitkitDialogStep.displayName = "BitkitDialogStep";
 //#endregion
-export { BitkitStepperDialogStep as default };
+export { BitkitDialogStep as default };
 
-//# sourceMappingURL=BitkitStepperDialogStep.js.map
+//# sourceMappingURL=BitkitDialogStep.js.map

package/dist/components/BitkitDialog/BitkitDialogStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDialogStep.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogStep.tsx"],"sourcesContent":["import { useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nimport { useBitkitDialogStepContext } from './BitkitDialogStepContext';\n\nexport interface BitkitDialogStepProps {\n  children?: ReactNode;\n  description?: string;\n  title: string;\n}\n\ninterface BitkitDialogStepInternalProps extends BitkitDialogStepProps {\n  _index?: number;\n}\n\nconst BitkitDialogStep = (props: BitkitDialogStepProps) => {\n  const { _index = 0, children, description, title } = props as BitkitDialogStepInternalProps;\n  const ctx = useBitkitDialogStepContext();\n  const step = ctx?.step ?? 0;\n  const styles = useDialogStyles();\n\n  if (_index !== step) return null;\n\n  return (\n    <>\n      <chakra.div css={styles.stepTitleGroup}>\n        <chakra.p css={styles.stepTitle}>{title}</chakra.p>\n        {description && <chakra.p css={styles.stepDescription}>{description}</chakra.p>}\n      </chakra.div>\n      {children}\n    </>\n  );\n};\n\nBitkitDialogStep.displayName = 'BitkitDialogStep';\nexport default BitkitDialogStep;\n"],"mappings":";;;;;AAgBA,IAAM,oBAAoB,UAAiC;CACzD,MAAM,EAAE,SAAS,GAAG,UAAU,aAAa,UAAU;CAErD,MAAM,OADM,2BACC,GAAK,QAAQ;CAC1B,MAAM,SAAS,gBAAgB;CAE/B,IAAI,WAAW,MAAM,OAAO;CAE5B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAO,KAAR;EAAY,KAAK,OAAO;YAAxB,CACE,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;aAAY;EAAgB,CAAA,GACjD,eAAe,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;aAAkB;EAAsB,CAAA,CACpE;KACX,QACD,EAAA,CAAA;AAEN;AAEA,iBAAiB,cAAc"}

package/dist/components/BitkitDialog/BitkitDialogStepContext.d.ts

@@ -0,0 +1,5 @@
+interface BitkitDialogStepContextValue {
+    step: number;
+}
+declare const BitkitDialogStepProvider: import('react').Provider<BitkitDialogStepContextValue>, useBitkitDialogStepContext: () => BitkitDialogStepContextValue;
+export { BitkitDialogStepProvider, useBitkitDialogStepContext };

package/dist/components/BitkitDialog/BitkitDialogStepContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "@chakra-ui/react";
+//#region lib/components/BitkitDialog/BitkitDialogStepContext.ts
+var [BitkitDialogStepProvider, useBitkitDialogStepContext] = createContext({ name: "BitkitDialogStepContext" });
+//#endregion
+export { BitkitDialogStepProvider, useBitkitDialogStepContext };
+
+//# sourceMappingURL=BitkitDialogStepContext.js.map

package/dist/components/BitkitDialog/BitkitDialogStepContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDialogStepContext.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogStepContext.ts"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\n\ninterface BitkitDialogStepContextValue {\n  step: number;\n}\n\nconst [BitkitDialogStepProvider, useBitkitDialogStepContext] = createContext<BitkitDialogStepContextValue>({\n  name: 'BitkitDialogStepContext',\n});\n\nexport { BitkitDialogStepProvider, useBitkitDialogStepContext };\n"],"mappings":";;AAOA,IAAM,CAAC,0BAA0B,8BAA8B,cAA4C,EACzG,MAAM,0BACR,CAAC"}

package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js

@@ -1,3 +1,4 @@
+import BitkitDialogBody from "../BitkitDialog/BitkitDialogBody.js";
 import BitkitDialog_default from "../BitkitDialog/BitkitDialog.js";
 import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
 import { Box } from "@chakra-ui/react/box";
@@ -31,7 +32,7 @@ var BitkitOverflowContent = forwardRef((props, ref) => {
 		title,
 		variant: "overflowContent",
 		onOpenChange: ({ open: isOpen }) => setOpen(isOpen),
-		children
+		children: /* @__PURE__ */ jsx(BitkitDialogBody, { children })
 	})] });
 });
 BitkitOverflowContent.displayName = "BitkitOverflowContent";

package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitOverflowContent.js","names":[],"sources":["../../../lib/components/BitkitOverflowContent/BitkitOverflowContent.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text, type TextProps } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\nimport BitkitDialog from '../BitkitDialog/BitkitDialog';\nimport BitkitLinkButton, { type BitkitLinkButtonProps } from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitOverflowContentProps extends Omit<BoxProps, 'children' | 'title'> {\n  buttonSize?: BitkitLinkButtonProps['size'];\n  children: ReactNode;\n  previewText?: string;\n  textStyle?: TextProps['textStyle'];\n  title: string;\n}\n\nconst BitkitOverflowContent = forwardRef<HTMLDivElement, BitkitOverflowContentProps>((props, ref) => {\n  const { buttonSize = 'md', children, previewText, textStyle, title, ...rest } = props;\n  const [open, setOpen] = useState(false);\n  const recipe = useSlotRecipe({ key: 'overflowContent' });\n  const styles = recipe();\n  const preview = previewText || (typeof children === 'string' ? children : 'Click to view content');\n\n  return (\n    <>\n      <Box ref={ref} css={styles.root} {...rest}>\n        <Text css={styles.preview} textStyle={textStyle}>\n          {preview}\n        </Text>\n        <BitkitLinkButton {...styles.action} onClick={() => setOpen(true)} size={buttonSize}>\n          {`View ${title.toLowerCase()}`}\n        </BitkitLinkButton>\n      </Box>\n      <BitkitDialog\n        open={open}\n        size=\"sm\"\n        title={title}\n        variant=\"overflowContent\"\n        onOpenChange={({ open: isOpen }) => setOpen(isOpen)}\n      >\n        {children}\n      </BitkitDialog>\n    </>\n  );\n});\n\nBitkitOverflowContent.displayName = 'BitkitOverflowContent';\n\nexport default BitkitOverflowContent;\n"],"mappings":";;;;;;;;AAgBA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,aAAa,MAAM,UAAU,aAAa,WAAW,OAAO,GAAG,SAAS;CAChF,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,SADS,cAAc,EAAE,KAAK,kBAAkB,CACvC,EAAO;CACtB,MAAM,UAAU,gBAAgB,OAAO,aAAa,WAAW,WAAW;CAE1E,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;YAArC,CACE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAoB;aACnC;EACG,CAAA,GACN,oBAAC,kBAAD;GAAkB,GAAI,OAAO;GAAQ,eAAe,QAAQ,IAAI;GAAG,MAAM;aACtE,QAAQ,MAAM,YAAY;EACX,CAAA,CACf;KACL,oBAAC,sBAAD;EACQ;EACN,MAAK;EACE;EACP,SAAQ;EACR,eAAe,EAAE,MAAM,aAAa,QAAQ,MAAM;EAEjD;CACW,CAAA,CACd,EAAA,CAAA;AAEN,CAAC;AAED,sBAAsB,cAAc"}
+{"version":3,"file":"BitkitOverflowContent.js","names":[],"sources":["../../../lib/components/BitkitOverflowContent/BitkitOverflowContent.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text, type TextProps } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\nimport BitkitDialog from '../BitkitDialog/BitkitDialog';\nimport BitkitDialogBody from '../BitkitDialog/BitkitDialogBody';\nimport BitkitLinkButton, { type BitkitLinkButtonProps } from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitOverflowContentProps extends Omit<BoxProps, 'children' | 'title'> {\n  buttonSize?: BitkitLinkButtonProps['size'];\n  children: ReactNode;\n  previewText?: string;\n  textStyle?: TextProps['textStyle'];\n  title: string;\n}\n\nconst BitkitOverflowContent = forwardRef<HTMLDivElement, BitkitOverflowContentProps>((props, ref) => {\n  const { buttonSize = 'md', children, previewText, textStyle, title, ...rest } = props;\n  const [open, setOpen] = useState(false);\n  const recipe = useSlotRecipe({ key: 'overflowContent' });\n  const styles = recipe();\n  const preview = previewText || (typeof children === 'string' ? children : 'Click to view content');\n\n  return (\n    <>\n      <Box ref={ref} css={styles.root} {...rest}>\n        <Text css={styles.preview} textStyle={textStyle}>\n          {preview}\n        </Text>\n        <BitkitLinkButton {...styles.action} onClick={() => setOpen(true)} size={buttonSize}>\n          {`View ${title.toLowerCase()}`}\n        </BitkitLinkButton>\n      </Box>\n      <BitkitDialog\n        open={open}\n        size=\"sm\"\n        title={title}\n        variant=\"overflowContent\"\n        onOpenChange={({ open: isOpen }) => setOpen(isOpen)}\n      >\n        <BitkitDialogBody>{children}</BitkitDialogBody>\n      </BitkitDialog>\n    </>\n  );\n});\n\nBitkitOverflowContent.displayName = 'BitkitOverflowContent';\n\nexport default BitkitOverflowContent;\n"],"mappings":";;;;;;;;;AAiBA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,aAAa,MAAM,UAAU,aAAa,WAAW,OAAO,GAAG,SAAS;CAChF,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,SADS,cAAc,EAAE,KAAK,kBAAkB,CACvC,EAAO;CACtB,MAAM,UAAU,gBAAgB,OAAO,aAAa,WAAW,WAAW;CAE1E,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;YAArC,CACE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAoB;aACnC;EACG,CAAA,GACN,oBAAC,kBAAD;GAAkB,GAAI,OAAO;GAAQ,eAAe,QAAQ,IAAI;GAAG,MAAM;aACtE,QAAQ,MAAM,YAAY;EACX,CAAA,CACf;KACL,oBAAC,sBAAD;EACQ;EACN,MAAK;EACE;EACP,SAAQ;EACR,eAAe,EAAE,MAAM,aAAa,QAAQ,MAAM;YAElD,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;CAClC,CAAA,CACd,EAAA,CAAA;AAEN,CAAC;AAED,sBAAsB,cAAc"}

package/dist/components/index.d.ts

@@ -18,9 +18,13 @@ export { default as BitkitControlButton, type BitkitControlButtonProps, } from '
 export { default as BitkitDataWidget, type BitkitDataWidgetProps } from './BitkitDataWidget/BitkitDataWidget';
 export { default as BitkitDefinitionTooltip, type BitkitDefinitionTooltipProps, } from './BitkitDefinitionTooltip/BitkitDefinitionTooltip';
 export { default as BitkitDialog, type BitkitDialogProps } from './BitkitDialog/BitkitDialog';
-export { default as BitkitFormDialog, type BitkitFormDialogProps } from './BitkitDialog/BitkitFormDialog';
-export { default as BitkitStepperDialog, type BitkitStepperDialogProps, useStepperDialog, } from './BitkitDialog/BitkitStepperDialog';
-export { type BitkitStepperDialogStepProps } from './BitkitDialog/BitkitStepperDialogStep';
+export { default as BitkitDialogBody, type BitkitDialogBodyProps } from './BitkitDialog/BitkitDialogBody';
+export { default as BitkitDialogButtons, type BitkitDialogButtonsProps } from './BitkitDialog/BitkitDialogButtons';
+export { default as BitkitDialogContent, type BitkitDialogContentProps } from './BitkitDialog/BitkitDialogContent';
+export { default as BitkitDialogFormContent, type BitkitDialogFormContentProps, } from './BitkitDialog/BitkitDialogFormContent';
+export { default as BitkitDialogHeader, type BitkitDialogHeaderProps } from './BitkitDialog/BitkitDialogHeader';
+export { default as BitkitDialogRoot, type BitkitDialogRootProps } from './BitkitDialog/BitkitDialogRoot';
+export { default as BitkitDialogStep, type BitkitDialogStepProps } from './BitkitDialog/BitkitDialogStep';
 export { default as BitkitDraggableCard, type BitkitDraggableCardProps, } from './BitkitDraggableCard/BitkitDraggableCard';
 export { default as BitkitDrawer, type BitkitDrawerActionTriggerProps, type BitkitDrawerBackdropProps, type BitkitDrawerBodyProps, type BitkitDrawerCloseButtonProps, type BitkitDrawerContentProps, type BitkitDrawerDescriptionProps, type BitkitDrawerFooterProps, type BitkitDrawerHeaderProps, type BitkitDrawerPositionerProps, type BitkitDrawerRootProps, type BitkitDrawerTitleProps, type BitkitDrawerTriggerProps, } from './BitkitDrawer/BitkitDrawer';
 export { default as BitkitEmptyState, type BitkitEmptyStateProps } from './BitkitEmptyState/BitkitEmptyState';