@bitrise/bitkit-v2 0.3.269 → 0.3.271-beta.1800

package/dist/components/BitkitDialog/DialogInner.js

@@ -0,0 +1,66 @@
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
+import DialogBody, { DialogBodyContext, resolveScrollBehavior } from "./DialogBodyContext.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/DialogInner.tsx
+var PORTAL_DISABLED = { disablePortal: true };
+/**
+* Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog
+* flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the
+* standard right-aligned button row; both render in the same `Dialog.Footer` (content first); if
+* neither is set, no footer renders.
+*/
+var DialogInner = ({ children, closable = true, footerButtons, footerContent, headerExtra, headerLabel, scrollBehavior: scrollBehaviorProp, showScrollGradient = true, title, variant }) => {
+	const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp) ?? "outside";
+	const styles = useDialogStyles();
+	const hasFooter = !!footerContent || !!footerButtons;
+	return /* @__PURE__ */ jsx(BitkitPortalContext.Provider, {
+		value: PORTAL_DISABLED,
+		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 })]
+					}),
+					!!headerExtra && /* @__PURE__ */ jsx(Box, {
+						css: styles.stepHeader,
+						children: headerExtra
+					}),
+					/* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(BitkitCloseButton, {
+							disabled: !closable,
+							size: variant === "overflowContent" ? "xs" : "md",
+							type: "button"
+						})
+					})
+				] }),
+				/* @__PURE__ */ jsx(DialogBody, { children }),
+				hasFooter && /* @__PURE__ */ jsxs(Dialog.Footer, { children: [footerContent, footerButtons && /* @__PURE__ */ jsx(Box, {
+					display: "flex",
+					gap: "16",
+					justifyContent: "flex-end",
+					paddingBlockStart: "24",
+					children: footerButtons
+				})] })
+			]
+		})
+	});
+};
+//#endregion
+export { DialogInner as default };
+
+//# sourceMappingURL=DialogInner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogInner.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogInner.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';\nimport DialogBody, { DialogBodyContext, resolveScrollBehavior } from './DialogBodyContext';\n\nconst PORTAL_DISABLED = { disablePortal: true };\n\nexport interface DialogInnerProps {\n  /** Body content. */\n  children?: ReactNode;\n  closable?: boolean;\n  /** Action buttons, auto-wrapped in the standard right-aligned button row inside the footer. */\n  footerButtons?: ReactNode;\n  /** Arbitrary content rendered raw inside the footer, before any `footerButtons`. */\n  footerContent?: ReactNode;\n  /** Extra header content below the title (e.g. the stepper's steps header). */\n  headerExtra?: ReactNode;\n  headerLabel?: string;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  title: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog\n * flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the\n * standard right-aligned button row; both render in the same `Dialog.Footer` (content first); if\n * neither is set, no footer renders.\n */\nconst DialogInner = ({\n  children,\n  closable = true,\n  footerButtons,\n  footerContent,\n  headerExtra,\n  headerLabel,\n  scrollBehavior: scrollBehaviorProp,\n  showScrollGradient = true,\n  title,\n  variant,\n}: DialogInnerProps) => {\n  const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp) ?? 'outside';\n  const styles = useDialogStyles();\n  const hasFooter = !!footerContent || !!footerButtons;\n\n  return (\n    <BitkitPortalContext.Provider value={PORTAL_DISABLED}>\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          {!!headerExtra && <Box css={styles.stepHeader}>{headerExtra}</Box>}\n          <Dialog.CloseTrigger asChild>\n            <BitkitCloseButton disabled={!closable} size={variant === 'overflowContent' ? 'xs' : 'md'} type=\"button\" />\n          </Dialog.CloseTrigger>\n        </Dialog.Header>\n        <DialogBody>{children}</DialogBody>\n        {hasFooter && (\n          <Dialog.Footer>\n            {footerContent}\n            {footerButtons && (\n              <Box display=\"flex\" gap=\"16\" justifyContent=\"flex-end\" paddingBlockStart=\"24\">\n                {footerButtons}\n              </Box>\n            )}\n          </Dialog.Footer>\n        )}\n      </DialogBodyContext.Provider>\n    </BitkitPortalContext.Provider>\n  );\n};\n\nexport default DialogInner;\n"],"mappings":";;;;;;;;AASA,IAAM,kBAAkB,EAAE,eAAe,KAAK;;;;;;;AAyB9C,IAAM,eAAe,EACnB,UACA,WAAW,MACX,eACA,eACA,aACA,aACA,gBAAgB,oBAChB,qBAAqB,MACrB,OACA,cACsB;CACtB,MAAM,iBAAiB,sBAAsB,SAAS,kBAAkB,KAAK;CAC7E,MAAM,SAAS,gBAAgB;CAC/B,MAAM,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAAC;CAEvC,OACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;YACnC,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO;IAAE;IAAgB;GAAmB;aAAxE;IACE,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,eAAe,oBAAC,KAAD;MAAK,KAAK,OAAO;gBAAa;KAAiB,CAAA;KACjE,oBAAC,OAAO,cAAR;MAAqB,SAAA;gBACnB,oBAAC,mBAAD;OAAmB,UAAU,CAAC;OAAU,MAAM,YAAY,oBAAoB,OAAO;OAAM,MAAK;MAAU,CAAA;KACvF,CAAA;IACR,EAAA,CAAA;IACf,oBAAC,YAAD,EAAa,SAAqB,CAAA;IACjC,aACC,qBAAC,OAAO,QAAR,EAAA,UAAA,CACG,eACA,iBACC,oBAAC,KAAD;KAAK,SAAQ;KAAO,KAAI;KAAK,gBAAe;KAAW,mBAAkB;eACtE;IACE,CAAA,CAEM,EAAA,CAAA;GAES;;CACA,CAAA;AAElC"}

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export interface DialogShellProps {
+    /** The `Dialog.Content` element (rendered inside the positioner). */
+    children: ReactNode;
+    closable?: boolean;
+    onExitComplete?: () => void;
+    onOpenChange?: (details: {
+        open: boolean;
+    }) => void;
+    open?: boolean;
+    preventScroll?: boolean;
+    scrollBehavior?: 'inside' | 'outside';
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    trigger?: ReactNode;
+    variant?: 'overflowContent';
+}
+/**
+ * Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +
+ * backdrop + positioner. Dismiss policy is derived from `closable` for ESC/close-trigger; outside
+ * clicks are always ignored (`closeOnInteractOutside={false}`).
+ * The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.
+ **/
+declare const DialogShell: ({ children, closable, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior: scrollBehaviorProp, size, trigger, variant, }: DialogShellProps) => import("react").JSX.Element;
+export default DialogShell;

package/dist/components/BitkitDialog/DialogShell.js

@@ -0,0 +1,33 @@
+import { resolveScrollBehavior } from "./DialogBodyContext.js";
+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/DialogShell.tsx
+/**
+* Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +
+* backdrop + positioner. Dismiss policy is derived from `closable` for ESC/close-trigger; outside
+* clicks are always ignored (`closeOnInteractOutside={false}`).
+* The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.
+**/
+var DialogShell = ({ children, closable = true, onExitComplete, onOpenChange, open, preventScroll = true, scrollBehavior: scrollBehaviorProp, size, trigger, variant }) => {
+	const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp);
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		closeOnEscape: closable,
+		closeOnInteractOutside: false,
+		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 })] })]
+	});
+};
+//#endregion
+export { DialogShell as default };
+
+//# sourceMappingURL=DialogShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogShell.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogShell.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type ReactNode } from 'react';\n\nimport { resolveScrollBehavior } from './DialogBodyContext';\n\nexport interface DialogShellProps {\n  /** The `Dialog.Content` element (rendered inside the positioner). */\n  children: ReactNode;\n  closable?: boolean;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +\n * backdrop + positioner. Dismiss policy is derived from `closable` for ESC/close-trigger; outside\n * clicks are always ignored (`closeOnInteractOutside={false}`).\n * The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.\n **/\n\nconst DialogShell = ({\n  children,\n  closable = true,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll = true,\n  scrollBehavior: scrollBehaviorProp,\n  size,\n  trigger,\n  variant,\n}: DialogShellProps) => {\n  const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp);\n\n  return (\n    <Dialog.Root\n      closeOnEscape={closable}\n      closeOnInteractOutside={false}\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>{children}</Dialog.Positioner>\n      </Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default DialogShell;\n"],"mappings":";;;;;;;;;;;AA2BA,IAAM,eAAe,EACnB,UACA,WAAW,MACX,gBACA,cACA,MACA,gBAAgB,MAChB,gBAAgB,oBAChB,MACA,SACA,cACsB;CACtB,MAAM,iBAAiB,sBAAsB,SAAS,kBAAkB;CAExE,OACE,qBAAC,OAAO,MAAR;EACE,eAAe;EACf,wBAAwB;EACR;EACF;EACR;EACS;EACC;EACV;EACG;YATX,CAWG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;aAAS;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAoB,SAA4B,CAAA,CAC1C,EAAA,CAAA,CACG;;AAEjB"}

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

@@ -0,0 +1,16 @@
+export interface StepperDialogContextValue {
+    /** Jump to an arbitrary (clamped) step. */
+    goTo: (step: number) => void;
+    isFirst: boolean;
+    isLast: boolean;
+    /** Advance to the next step (clamped to the last). */
+    next: () => void;
+    /** Go back to the previous step (clamped to the first). */
+    prev: () => void;
+    /** Alias of {@link goTo}. */
+    setStep: (step: number) => void;
+    step: number;
+    totalSteps: number;
+}
+declare const StepperDialogProvider: import('react').Provider<StepperDialogContextValue>, useStepperDialog: () => StepperDialogContextValue;
+export { StepperDialogProvider, useStepperDialog };

package/dist/components/BitkitDialog/StepperContext.js

@@ -0,0 +1,11 @@
+import { createContext } from "@chakra-ui/react";
+//#region lib/components/BitkitDialog/StepperContext.ts
+var [StepperDialogProvider, useStepperDialog] = createContext({
+	hookName: "useStepperDialog",
+	name: "StepperDialogContext",
+	providerName: "<BitkitStepperDialog />"
+});
+//#endregion
+export { StepperDialogProvider, useStepperDialog };
+
+//# sourceMappingURL=StepperContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperContext.js","names":[],"sources":["../../../lib/components/BitkitDialog/StepperContext.ts"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\n\nexport interface StepperDialogContextValue {\n  /** Jump to an arbitrary (clamped) step. */\n  goTo: (step: number) => void;\n  isFirst: boolean;\n  isLast: boolean;\n  /** Advance to the next step (clamped to the last). */\n  next: () => void;\n  /** Go back to the previous step (clamped to the first). */\n  prev: () => void;\n  /** Alias of {@link goTo}. */\n  setStep: (step: number) => void;\n  step: number;\n  totalSteps: number;\n}\n\nconst [StepperDialogProvider, useStepperDialog] = createContext<StepperDialogContextValue>({\n  hookName: 'useStepperDialog',\n  name: 'StepperDialogContext',\n  providerName: '<BitkitStepperDialog />',\n});\n\nexport { StepperDialogProvider, useStepperDialog };\n"],"mappings":";;AAkBA,IAAM,CAAC,uBAAuB,oBAAoB,cAAyC;CACzF,UAAU;CACV,MAAM;CACN,cAAc;AAChB,CAAC"}

package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js

@@ -1,4 +1,3 @@
-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";
@@ -32,7 +31,7 @@ var BitkitOverflowContent = forwardRef((props, ref) => {
 		title,
 		variant: "overflowContent",
 		onOpenChange: ({ open: isOpen }) => setOpen(isOpen),
-		children: /* @__PURE__ */ jsx(BitkitDialogBody, { children })
+		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 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"}
+{"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"}

package/dist/components/index.d.ts

@@ -18,13 +18,9 @@ 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 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 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 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';

package/dist/main.js

@@ -309,14 +309,11 @@ import BitkitField from "./components/BitkitField/BitkitField.js";
 import BitkitCombobox_default from "./components/BitkitCombobox/BitkitCombobox.js";
 import BitkitDataWidget from "./components/BitkitDataWidget/BitkitDataWidget.js";
 import BitkitDefinitionTooltip from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
-import BitkitDialogStep from "./components/BitkitDialog/BitkitDialogStep.js";
-import BitkitDialogBody from "./components/BitkitDialog/BitkitDialogBody.js";
-import BitkitDialogButtons from "./components/BitkitDialog/BitkitDialogButtons.js";
-import BitkitDialogContent from "./components/BitkitDialog/BitkitDialogContent.js";
-import BitkitDialogFormContent from "./components/BitkitDialog/BitkitDialogFormContent.js";
-import BitkitDialogHeader from "./components/BitkitDialog/BitkitDialogHeader.js";
-import BitkitDialogRoot from "./components/BitkitDialog/BitkitDialogRoot.js";
 import BitkitDialog_default from "./components/BitkitDialog/BitkitDialog.js";
+import BitkitFormDialog_default from "./components/BitkitDialog/BitkitFormDialog.js";
+import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
+import { useStepperDialog } from "./components/BitkitDialog/StepperContext.js";
+import BitkitStepperDialog_default from "./components/BitkitDialog/BitkitStepperDialog.js";
 import BitkitDraggableCard from "./components/BitkitDraggableCard/BitkitDraggableCard.js";
 import BitkitDrawer from "./components/BitkitDrawer/BitkitDrawer.js";
 import BitkitEmptyState from "./components/BitkitEmptyState/BitkitEmptyState.js";
@@ -355,7 +352,6 @@ import BitkitSidebar_default from "./components/BitkitSidebar/BitkitSidebar.js";
 import BitkitSpinner from "./components/BitkitSpinner/BitkitSpinner.js";
 import BitkitSplitButton_default from "./components/BitkitSplitButton/BitkitSplitButton.js";
 import BitkitStat from "./components/BitkitStat/BitkitStat.js";
-import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
 import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
 import BitkitSwitch from "./components/BitkitSwitch/BitkitSwitch.js";
 import BitkitExpandableRow from "./components/BitkitTable/BitkitExpandableRow.js";
@@ -370,4 +366,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogFormContent, BitkitDialogHeader, BitkitDialogRoot, BitkitDialogStep, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, rem, useResponsive };
+export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, rem, useResponsive, useStepperDialog };

package/dist/theme/slot-recipes/Alert.recipe.js

@@ -13,8 +13,8 @@ var alertSlotRecipe = defineSlotRecipe({
 			border: "1px solid",
 			borderRadius: "8",
 			paddingBlock: rem(11),
-			paddingInlineStart: rem(11),
-			paddingInlineEnd: rem(7),
+			paddingInlineStart: "12",
+			paddingInlineEnd: "8",
 			width: "100%"
 		},
 		indicator: {

package/dist/theme/slot-recipes/Alert.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Alert.recipe.ts"],"sourcesContent":["import { alertAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst alertSlotRecipe = defineSlotRecipe({\n  className: 'alert',\n  slots: alertAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      border: '1px solid',\n      borderRadius: '8',\n      paddingBlock: rem(11),\n      paddingInlineStart: rem(11),\n      paddingInlineEnd: rem(7),\n      width: '100%',\n    },\n    indicator: {\n      alignSelf: 'flex-start',\n      marginInlineEnd: '8',\n      width: '24',\n      height: '24',\n    },\n    content: {\n      flex: '1',\n    },\n    title: {\n      textStyle: 'comp/notification/title',\n      '& + *': {\n        marginBlockStart: '4',\n      },\n    },\n    description: {\n      textStyle: 'comp/notification/message',\n      '&:first-of-type': {\n        marginBlockStart: '2',\n      },\n    },\n  },\n  variants: {\n    variant: Object.fromEntries(\n      NOTIFICATION_VARIANTS.map((v) => [\n        v,\n        {\n          indicator: { color: ICONS_MAP[v] },\n          root: { ...ROOT_MAP[v], color: TEXT_MAP[v] },\n        },\n      ]),\n    ),\n  },\n  defaultVariants: {\n    variant: 'info',\n  },\n});\n\nexport default alertSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,kBAAkB,iBAAiB;CACvC,WAAW;CACX,OAAO,aAAa,KAAK;CACzB,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,cAAc,IAAI,EAAE;GACpB,oBAAoB,IAAI,EAAE;GAC1B,kBAAkB,IAAI,CAAC;GACvB,OAAO;EACT;EACA,WAAW;GACT,WAAW;GACX,iBAAiB;GACjB,OAAO;GACP,QAAQ;EACV;EACA,SAAS,EACP,MAAM,IACR;EACA,OAAO;GACL,WAAW;GACX,SAAS,EACP,kBAAkB,IACpB;EACF;EACA,aAAa;GACX,WAAW;GACX,mBAAmB,EACjB,kBAAkB,IACpB;EACF;CACF;CACA,UAAU,EACR,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;EACE,WAAW,EAAE,OAAO,UAAU,GAAG;EACjC,MAAM;GAAE,GAAG,SAAS;GAAI,OAAO,SAAS;EAAG;CAC7C,CACF,CAAC,CACH,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
+{"version":3,"file":"Alert.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Alert.recipe.ts"],"sourcesContent":["import { alertAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst alertSlotRecipe = defineSlotRecipe({\n  className: 'alert',\n  slots: alertAnatomy.keys(),\n  base: {\n    // Everything is vertically centered. The icon hugs the top (`flex-start` below) so it lines\n    // up with the first text line on multi-line alerts; the 32px action/close buttons ride the\n    // text line via a negative block margin (see BitkitAlert.tsx) so they don't grow the row.\n    // `rem(11)` block padding (not 12) lands the single-line alert on exactly 48px once the 1px\n    // border is added.\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      border: '1px solid',\n      borderRadius: '8',\n      paddingBlock: rem(11),\n      paddingInlineStart: '12',\n      paddingInlineEnd: '8',\n      width: '100%',\n    },\n    indicator: {\n      alignSelf: 'flex-start',\n      marginInlineEnd: '8',\n      width: '24',\n      height: '24',\n    },\n    content: {\n      flex: '1',\n    },\n    title: {\n      textStyle: 'comp/notification/title',\n      '& + *': {\n        marginBlockStart: '4',\n      },\n    },\n    description: {\n      textStyle: 'comp/notification/message',\n      '&:first-of-type': {\n        marginBlockStart: '2',\n      },\n    },\n  },\n  variants: {\n    variant: Object.fromEntries(\n      NOTIFICATION_VARIANTS.map((v) => [\n        v,\n        {\n          indicator: { color: ICONS_MAP[v] },\n          root: { ...ROOT_MAP[v], color: TEXT_MAP[v] },\n        },\n      ]),\n    ),\n  },\n  defaultVariants: {\n    variant: 'info',\n  },\n});\n\nexport default alertSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,kBAAkB,iBAAiB;CACvC,WAAW;CACX,OAAO,aAAa,KAAK;CACzB,MAAM;EAMJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,cAAc,IAAI,EAAE;GACpB,oBAAoB;GACpB,kBAAkB;GAClB,OAAO;EACT;EACA,WAAW;GACT,WAAW;GACX,iBAAiB;GACjB,OAAO;GACP,QAAQ;EACV;EACA,SAAS,EACP,MAAM,IACR;EACA,OAAO;GACL,WAAW;GACX,SAAS,EACP,kBAAkB,IACpB;EACF;EACA,aAAa;GACX,WAAW;GACX,mBAAmB,EACjB,kBAAkB,IACpB;EACF;CACF;CACA,UAAU,EACR,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;EACE,WAAW,EAAE,OAAO,UAAU,GAAG;EACjC,MAAM;GAAE,GAAG,SAAS;GAAI,OAAO,SAAS;EAAG;CAC7C,CACF,CAAC,CACH,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}

package/dist/theme/slot-recipes/Dialog.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "stepTitleGroup" | "stepTitle" | "stepDescription" | "scrollBody" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop", {
+declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "scrollBody" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop" | "stepDescription" | "stepTitle" | "stepTitleGroup", {
     scrollBehavior: {
         inside: {
             body: {
@@ -12,7 +12,21 @@ declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
                 overflow: "hidden";
             };
         };
-        outside: {};
+        outside: {
+            positioner: {
+                overflow: "auto";
+                paddingBlock: {
+                    base: number;
+                    tablet: "10vh";
+                };
+            };
+            content: {
+                marginBlock: {
+                    base: number;
+                    tablet: "auto";
+                };
+            };
+        };
     };
     size: {
         full: {

package/dist/theme/slot-recipes/Dialog.recipe.js

@@ -161,7 +161,19 @@ var dialogSlotRecipe = defineSlotRecipe({
 					overflow: "hidden"
 				}
 			},
-			outside: {}
+			outside: {
+				positioner: {
+					overflow: "auto",
+					paddingBlock: {
+						base: 0,
+						tablet: "10vh"
+					}
+				},
+				content: { marginBlock: {
+					base: 0,
+					tablet: "auto"
+				} }
+			}
 		},
 		size: {
 			full: {

package/dist/theme/slot-recipes/Dialog.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Dialog.recipe.ts"],"sourcesContent":["import { dialogAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst dialogSlotRecipe = defineSlotRecipe({\n  className: 'dialog',\n  slots: [\n    ...dialogAnatomy.keys(),\n    'label',\n    'scrollBody',\n    'scrollButton',\n    'scrollGradient',\n    'stepDescription',\n    'stepHeader',\n    'stepTitle',\n    'stepTitleGroup',\n  ] as const,\n  base: {\n    backdrop: {\n      background: 'utilities/overlay',\n      position: 'fixed',\n      inset: 0,\n      zIndex: 'dialogOverlay',\n      _open: {\n        animationStyle: 'fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationStyle: 'fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    positioner: {\n      alignItems: { base: 'flex-start', tablet: 'center' },\n      display: 'flex',\n      height: '100dvh',\n      justifyContent: 'center',\n      left: 0,\n      position: 'fixed',\n      top: 0,\n      width: '100dvw',\n      zIndex: 'dialog',\n    },\n    content: {\n      background: 'background/primary',\n      borderRadius: { base: 0, tablet: '8' },\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      outline: 'none',\n      position: 'relative',\n      _open: {\n        animationStyle: 'scale-fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationStyle: 'scale-fade-out',\n        animationDuration: 'faster',\n      },\n    },\n    header: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '48',\n      paddingBlock: '24',\n      paddingInline: '32',\n      position: 'relative',\n    },\n    title: {\n      color: 'text/primary',\n      paddingInlineEnd: '48',\n      textStyle: 'comp/dialog/title',\n    },\n    description: {\n      color: 'text/body',\n      textStyle: 'body/lg/regular',\n    },\n    label: {\n      color: 'text/secondary',\n      textStyle: 'comp/dialog/label',\n    },\n    body: {\n      display: 'flex',\n      flex: '1',\n      flexDirection: 'column',\n      gap: '24',\n      paddingInline: '32',\n      _last: {\n        paddingBlockEnd: '48',\n      },\n    },\n    scrollBody: {\n      display: 'flex',\n      flexDirection: 'column',\n      minHeight: 0,\n      position: 'relative',\n      _last: {\n        paddingBlockEnd: '48',\n      },\n    },\n    footer: {\n      paddingBlockEnd: '32',\n      paddingBlockStart: '24',\n      paddingInline: '32',\n    },\n    closeTrigger: {\n      insetEnd: '24',\n      position: 'absolute',\n      top: '24',\n    },\n    scrollButton: {\n      alignItems: 'center',\n      alignSelf: 'center',\n      background: 'background/primary',\n      borderColor: 'border/minimal',\n      borderRadius: '100%',\n      borderWidth: '1',\n      bottom: '16',\n      boxShadow: 'elevation/lg',\n      cursor: 'pointer',\n      display: 'flex',\n      height: '32',\n      justifyContent: 'center',\n      position: 'absolute',\n      width: '32',\n    },\n    stepDescription: {\n      color: 'text/secondary',\n      textStyle: 'body/md/regular',\n    },\n    stepHeader: {\n      overflowY: 'auto',\n    },\n    stepTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/h3',\n    },\n    stepTitleGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '4',\n    },\n    scrollGradient: {\n      background: 'linear-gradient(0deg, {colors.neutral.100} 0%, transparent 100%)',\n      bottom: 48,\n      height: '32',\n      pointerEvents: 'none',\n      position: 'absolute',\n      width: '100%',\n    },\n  },\n  variants: {\n    scrollBehavior: {\n      inside: {\n        body: {\n          overflowY: 'auto',\n          _last: {\n            paddingBlockEnd: 0, // override base _last: scrollBody slot handles padding instead\n          },\n        },\n        content: {\n          maxHeight: 'calc(100dvh - 96px)',\n          overflow: 'hidden',\n        },\n      },\n      outside: {},\n    },\n    size: {\n      full: {\n        body: {\n          minHeight: 0,\n          overflowY: 'auto',\n        },\n        content: {\n          borderRadius: '8',\n          height: '100%',\n          maxHeight: '100%',\n          maxWidth: '100%',\n          overflow: 'hidden',\n          width: '100%',\n        },\n        positioner: {\n          padding: '32',\n        },\n      },\n      lg: {\n        content: {\n          width: { base: '100%', tablet: rem(800) },\n        },\n      },\n      md: {\n        content: {\n          width: { base: '100%', tablet: rem(640) },\n        },\n      },\n      sm: {\n        content: {\n          width: { base: '100%', tablet: rem(480) },\n        },\n      },\n    },\n    variant: {\n      overflowContent: {\n        content: {\n          maxHeight: 'calc(100dvh - 48px)',\n          overflow: 'hidden',\n        },\n        header: {\n          gap: '8',\n          paddingBlockEnd: '8',\n          paddingBlockStart: '16',\n          paddingInline: '16',\n        },\n        title: {\n          paddingInlineEnd: '32',\n          textStyle: 'heading/h4',\n        },\n        body: {\n          overflowY: 'auto',\n          paddingBlockEnd: '8',\n          paddingInline: '16',\n          _last: {\n            paddingBlockEnd: 0,\n          },\n        },\n        scrollBody: {\n          _last: {\n            paddingBlockEnd: '16',\n          },\n        },\n        footer: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: 0,\n          paddingInline: '16',\n        },\n        closeTrigger: {\n          insetEnd: '12',\n          top: '12',\n        },\n        scrollGradient: {\n          bottom: '16',\n        },\n        scrollButton: {\n          bottom: '8',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    scrollBehavior: 'outside',\n    size: 'md',\n  },\n});\n\nexport default dialogSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Dialog.recipe.ts"],"sourcesContent":["import { dialogAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst dialogSlotRecipe = defineSlotRecipe({\n  className: 'dialog',\n  slots: [\n    ...dialogAnatomy.keys(),\n    'label',\n    'scrollBody',\n    'scrollButton',\n    'scrollGradient',\n    'stepDescription',\n    'stepHeader',\n    'stepTitle',\n    'stepTitleGroup',\n  ] as const,\n  base: {\n    backdrop: {\n      background: 'utilities/overlay',\n      position: 'fixed',\n      inset: 0,\n      zIndex: 'dialogOverlay',\n      _open: {\n        animationStyle: 'fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationStyle: 'fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    positioner: {\n      alignItems: { base: 'flex-start', tablet: 'center' },\n      display: 'flex',\n      height: '100dvh',\n      justifyContent: 'center',\n      left: 0,\n      position: 'fixed',\n      top: 0,\n      width: '100dvw',\n      zIndex: 'dialog',\n    },\n    content: {\n      background: 'background/primary',\n      borderRadius: { base: 0, tablet: '8' },\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      outline: 'none',\n      position: 'relative',\n      _open: {\n        animationStyle: 'scale-fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationStyle: 'scale-fade-out',\n        animationDuration: 'faster',\n      },\n    },\n    header: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '48',\n      paddingBlock: '24',\n      paddingInline: '32',\n      position: 'relative',\n    },\n    title: {\n      color: 'text/primary',\n      paddingInlineEnd: '48',\n      textStyle: 'comp/dialog/title',\n    },\n    description: {\n      color: 'text/body',\n      textStyle: 'body/lg/regular',\n    },\n    label: {\n      color: 'text/secondary',\n      textStyle: 'comp/dialog/label',\n    },\n    body: {\n      display: 'flex',\n      flex: '1',\n      flexDirection: 'column',\n      gap: '24',\n      paddingInline: '32',\n      _last: {\n        paddingBlockEnd: '48',\n      },\n    },\n    scrollBody: {\n      display: 'flex',\n      flexDirection: 'column',\n      minHeight: 0,\n      position: 'relative',\n      _last: {\n        paddingBlockEnd: '48',\n      },\n    },\n    footer: {\n      paddingBlockEnd: '32',\n      paddingBlockStart: '24',\n      paddingInline: '32',\n    },\n    closeTrigger: {\n      insetEnd: '24',\n      position: 'absolute',\n      top: '24',\n    },\n    scrollButton: {\n      alignItems: 'center',\n      alignSelf: 'center',\n      background: 'background/primary',\n      borderColor: 'border/minimal',\n      borderRadius: '100%',\n      borderWidth: '1',\n      bottom: '16',\n      boxShadow: 'elevation/lg',\n      cursor: 'pointer',\n      display: 'flex',\n      height: '32',\n      justifyContent: 'center',\n      position: 'absolute',\n      width: '32',\n    },\n    stepDescription: {\n      color: 'text/secondary',\n      textStyle: 'body/md/regular',\n    },\n    stepHeader: {\n      overflowY: 'auto',\n    },\n    stepTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/h3',\n    },\n    stepTitleGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '4',\n    },\n    scrollGradient: {\n      background: 'linear-gradient(0deg, {colors.neutral.100} 0%, transparent 100%)',\n      bottom: 48,\n      height: '32',\n      pointerEvents: 'none',\n      position: 'absolute',\n      width: '100%',\n    },\n  },\n  variants: {\n    scrollBehavior: {\n      inside: {\n        body: {\n          overflowY: 'auto',\n          _last: {\n            paddingBlockEnd: 0, // override base _last: scrollBody slot handles padding instead\n          },\n        },\n        content: {\n          maxHeight: 'calc(100dvh - 96px)',\n          overflow: 'hidden',\n        },\n      },\n      outside: {\n        positioner: {\n          overflow: 'auto',\n          paddingBlock: { base: 0, tablet: '10vh' },\n        },\n        content: {\n          marginBlock: { base: 0, tablet: 'auto' },\n        },\n      },\n    },\n    size: {\n      full: {\n        body: {\n          minHeight: 0,\n          overflowY: 'auto',\n        },\n        content: {\n          borderRadius: '8',\n          height: '100%',\n          maxHeight: '100%',\n          maxWidth: '100%',\n          overflow: 'hidden',\n          width: '100%',\n        },\n        positioner: {\n          padding: '32',\n        },\n      },\n      lg: {\n        content: {\n          width: { base: '100%', tablet: rem(800) },\n        },\n      },\n      md: {\n        content: {\n          width: { base: '100%', tablet: rem(640) },\n        },\n      },\n      sm: {\n        content: {\n          width: { base: '100%', tablet: rem(480) },\n        },\n      },\n    },\n    variant: {\n      overflowContent: {\n        content: {\n          maxHeight: 'calc(100dvh - 48px)',\n          overflow: 'hidden',\n        },\n        header: {\n          gap: '8',\n          paddingBlockEnd: '8',\n          paddingBlockStart: '16',\n          paddingInline: '16',\n        },\n        title: {\n          paddingInlineEnd: '32',\n          textStyle: 'heading/h4',\n        },\n        body: {\n          overflowY: 'auto',\n          paddingBlockEnd: '8',\n          paddingInline: '16',\n          _last: {\n            paddingBlockEnd: 0,\n          },\n        },\n        scrollBody: {\n          _last: {\n            paddingBlockEnd: '16',\n          },\n        },\n        footer: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: 0,\n          paddingInline: '16',\n        },\n        closeTrigger: {\n          insetEnd: '12',\n          top: '12',\n        },\n        scrollGradient: {\n          bottom: '16',\n        },\n        scrollButton: {\n          bottom: '8',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    scrollBehavior: 'outside',\n    size: 'md',\n  },\n});\n\nexport default dialogSlotRecipe;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/MarkdownCard.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const markdownCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "iconBar" | "gradient" | "footerButtons", {
+declare const markdownCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "footerButtons" | "iconBar" | "gradient", {
     status: {
         info: {
             iconBar: {

package/dist/theme/slot-recipes/index.d.ts

@@ -674,7 +674,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "stepTitleGroup" | "stepTitle" | "stepDescription" | "scrollBody" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop", {
+    dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "scrollBody" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop" | "stepDescription" | "stepTitle" | "stepTitleGroup", {
         scrollBehavior: {
             inside: {
                 body: {
@@ -688,7 +688,21 @@ declare const slotRecipes: {
                     overflow: "hidden";
                 };
             };
-            outside: {};
+            outside: {
+                positioner: {
+                    overflow: "auto";
+                    paddingBlock: {
+                        base: number;
+                        tablet: "10vh";
+                    };
+                };
+                content: {
+                    marginBlock: {
+                        base: number;
+                        tablet: "auto";
+                    };
+                };
+            };
         };
         size: {
             full: {
@@ -1047,7 +1061,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    markdownCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "iconBar" | "gradient" | "footerButtons", {
+    markdownCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "footerButtons" | "iconBar" | "gradient", {
         status: {
             info: {
                 iconBar: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.269",
+  "version": "0.3.271-beta.1800",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",

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

@@ -1,9 +0,0 @@
-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/BitkitDialogBody.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,4 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,27 +0,0 @@
-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;