@bitrise/bitkit-v2 0.3.420-beta.2691 → 0.3.420-beta.2697

package/dist/components/BitkitFileInput/BitkitFileInput.d.ts

@@ -1,5 +1,26 @@
-import { FileUpload } from '@chakra-ui/react/file-upload';
+import { FileUpload, FileUploadRootProps } from '@chakra-ui/react/file-upload';
 import { BitkitFieldProps } from '../BitkitField/BitkitField';
+export type BitkitFileInputProps = Omit<BitkitFieldProps, 'children' | 'state'> & Omit<FileUploadRootProps, 'disabled' | 'invalid'> & {
+    aspectRatio?: number;
+    /**
+     * Max width/height (px) of the cropped output. The Ark cropper emits at the
+     * selection's natural resolution with no size cap, so a large source image
+     * can produce an oversized file; set this to downscale the output to fit.
+     */
+    maxCroppedSize?: number;
+    onCropChange?: (file: File) => void;
+    /**
+     * Called when a file is accepted. Only ever fires with a file — clearing the
+     * selection calls `onFileRemoved` instead.
+     */
+    onFileAccepted?: (file: File) => void;
+    /**
+     * Called when the accepted file is cleared — via the "Remove" button or a
+     * programmatic `clearFiles()`.
+     */
+    onFileRemoved?: () => void;
+    state?: 'error' | 'disabled';
+};
 declare const BitkitFileInput: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "state"> & Omit<FileUpload.RootProps, "disabled" | "invalid"> & {
     aspectRatio?: number;
     /**
@@ -9,7 +30,16 @@ declare const BitkitFileInput: import('react').ForwardRefExoticComponent<Omit<Bi
      */
     maxCroppedSize?: number;
     onCropChange?: (file: File) => void;
+    /**
+     * Called when a file is accepted. Only ever fires with a file — clearing the
+     * selection calls `onFileRemoved` instead.
+     */
     onFileAccepted?: (file: File) => void;
+    /**
+     * Called when the accepted file is cleared — via the "Remove" button or a
+     * programmatic `clearFiles()`.
+     */
+    onFileRemoved?: () => void;
     state?: "error" | "disabled";
 } & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitFileInput;

package/dist/components/BitkitFileInput/BitkitFileInput.js

@@ -161,11 +161,13 @@ var BitkitFileInputContent = (props) => {
 	] });
 };
 var BitkitFileInput = forwardRef((props, ref) => {
-	const { aspectRatio, maxCroppedSize, onCropChange, onFileAccept, onFileAccepted, state, variant, ...rest } = props;
+	const { aspectRatio, maxCroppedSize, onCropChange, onFileAccept, onFileAccepted, onFileRemoved, state, variant, ...rest } = props;
 	const [fileUploadProps, fieldProps] = splitProps(rest);
 	const handleFileAccept = (details) => {
 		onFileAccept?.(details);
-		onFileAccepted?.(details.files[0]);
+		const acceptedFile = details.files[0];
+		if (acceptedFile) onFileAccepted?.(acceptedFile);
+		else onFileRemoved?.();
 	};
 	const contentProps = {
 		aspectRatio,

package/dist/components/BitkitFileInput/BitkitFileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitFileInput.js","names":[],"sources":["../../../lib/components/BitkitFileInput/BitkitFileInput.tsx"],"sourcesContent":["import { Card } from '@chakra-ui/react/card';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport {\n  FileUpload,\n  type FileUploadFileAcceptDetails,\n  type FileUploadRootProps,\n  useFileUploadContext,\n} from '@chakra-ui/react/file-upload';\nimport { VStack } from '@chakra-ui/react/stack';\nimport { Text } from '@chakra-ui/react/text';\nimport { splitProps as splitFileUploadProps } from '@zag-js/file-upload';\nimport { forwardRef, useEffect, useId, useMemo } from 'react';\n\nimport ImageCropper, { useImageCropperContext } from '../../atoms/ImageCropper/ImageCropper';\nimport { IconMinusCircle, IconUpload } from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\ntype BitkitFileInputProps = Omit<BitkitFieldProps, 'children' | 'state'> &\n  Omit<FileUploadRootProps, 'disabled' | 'invalid'> & {\n    aspectRatio?: number;\n    /**\n     * Max width/height (px) of the cropped output. The Ark cropper emits at the\n     * selection's natural resolution with no size cap, so a large source image\n     * can produce an oversized file; set this to downscale the output to fit.\n     */\n    maxCroppedSize?: number;\n    onCropChange?: (file: File) => void;\n    onFileAccepted?: (file: File) => void;\n    state?: 'error' | 'disabled';\n  };\n\n// Ark's getCroppedImage() emits at the selection's natural resolution and only\n// controls format/quality (no size cap), so downscale here when a max is set —\n// this keeps a large source image from producing an oversized upload. Preserves\n// the blob's MIME type; falls back to the original blob if it can't be decoded.\nconst downscaleBlob = (blob: Blob, maxSize: number): Promise<Blob> => {\n  // A non-positive or non-finite max would produce a 0×0 / NaN canvas and corrupt\n  // the output, so treat it as \"no cap\" and pass the blob through untouched.\n  if (!Number.isFinite(maxSize) || maxSize <= 0) {\n    return Promise.resolve(blob);\n  }\n\n  return new Promise((resolve) => {\n    const url = URL.createObjectURL(blob);\n    const image = new Image();\n\n    image.onload = () => {\n      URL.revokeObjectURL(url);\n      const largestSide = Math.max(image.naturalWidth, image.naturalHeight);\n      if (largestSide <= maxSize) {\n        resolve(blob);\n        return;\n      }\n      const scale = maxSize / largestSide;\n      const canvas = document.createElement('canvas');\n      canvas.width = Math.round(image.naturalWidth * scale);\n      canvas.height = Math.round(image.naturalHeight * scale);\n      const context = canvas.getContext('2d');\n      if (!context) {\n        resolve(blob);\n        return;\n      }\n      context.drawImage(image, 0, 0, canvas.width, canvas.height);\n      canvas.toBlob((result) => resolve(result ?? blob), blob.type);\n    };\n\n    image.onerror = () => {\n      URL.revokeObjectURL(url);\n      resolve(blob);\n    };\n\n    image.src = url;\n  });\n};\n\nconst Dropzone = (props: Pick<BitkitFileInputProps, 'label'>) => {\n  const { label } = props;\n  const { disabled } = useFileUploadContext();\n  const field = useFieldContext();\n  const instructionId = useId();\n  const dropzoneLabel = disabled ? 'Cannot upload file' : 'Drag and drop file here or click to select';\n  const fieldControlProps = field?.getInputProps();\n  const fieldLabelId = label ? field?.ids.label : undefined;\n\n  return (\n    <FileUpload.Dropzone\n      aria-describedby={fieldControlProps?.['aria-describedby']}\n      aria-errormessage={fieldControlProps?.['aria-errormessage']}\n      aria-invalid={fieldControlProps?.['aria-invalid']}\n      aria-labelledby={fieldLabelId ? `${fieldLabelId} ${instructionId}` : instructionId}\n    >\n      <FileUpload.DropzoneContent>\n        <IconUpload />\n        <Text as=\"span\" id={instructionId}>\n          {dropzoneLabel}\n        </Text>\n      </FileUpload.DropzoneContent>\n    </FileUpload.Dropzone>\n  );\n};\n\nconst ImagePreviewContent = (props: Pick<BitkitFileInputProps, 'onCropChange' | 'maxCroppedSize'>) => {\n  const { onCropChange, maxCroppedSize } = props;\n\n  const { acceptedFiles } = useFileUploadContext();\n  const { dragging, getCroppedImage } = useImageCropperContext();\n\n  const acceptedFile = acceptedFiles[0];\n  const objectUrl = useMemo(() => (acceptedFile ? URL.createObjectURL(acceptedFile) : undefined), [acceptedFile]);\n\n  useEffect(() => {\n    return () => {\n      if (objectUrl) {\n        URL.revokeObjectURL(objectUrl);\n      }\n    };\n  }, [objectUrl]);\n\n  useEffect(() => {\n    if (!onCropChange || dragging) {\n      return;\n    }\n\n    if (!acceptedFile) {\n      return;\n    }\n\n    let cancelled = false;\n    // Preserve the source MIME type — the Ark cropper defaults to image/png, which\n    // would mismatch a .jpg name and bloat the file.\n    getCroppedImage({ type: acceptedFile.type || undefined })\n      .then((result) => {\n        if (!(result instanceof Blob)) {\n          return result;\n        }\n        return maxCroppedSize ? downscaleBlob(result, maxCroppedSize) : result;\n      })\n      .then((result) => {\n        if (!cancelled && result instanceof Blob) {\n          onCropChange(new File([result], acceptedFile.name, { type: result.type }));\n        }\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [getCroppedImage, acceptedFile, onCropChange, dragging, maxCroppedSize]);\n\n  return (\n    <ImageCropper.Viewport>\n      <ImageCropper.Image src={objectUrl} />\n      <ImageCropper.Selection>\n        {ImageCropper.handles.map((position) => (\n          <ImageCropper.Handle key={position} position={position}>\n            <div />\n          </ImageCropper.Handle>\n        ))}\n      </ImageCropper.Selection>\n    </ImageCropper.Viewport>\n  );\n};\n\nconst ImagePreview = (props: Pick<BitkitFileInputProps, 'aspectRatio' | 'onCropChange' | 'maxCroppedSize'>) => {\n  const { aspectRatio, onCropChange, maxCroppedSize } = props;\n\n  return (\n    <ImageCropper.Root aspectRatio={aspectRatio} height=\"100%\">\n      <ImagePreviewContent onCropChange={onCropChange} maxCroppedSize={maxCroppedSize} />\n    </ImageCropper.Root>\n  );\n};\n\nconst NonImagePreview = () => {\n  const fileUpload = useFileUploadContext();\n  const acceptedFile = fileUpload.acceptedFiles[0];\n\n  return (\n    <Card.Root asChild elevation={false}>\n      <Card.Body display=\"flex\" paddingBlock=\"20\" paddingInline=\"24\" alignItems=\"center\" flex=\"1\">\n        <VStack gap=\"4\" alignItems=\"flex-start\" flex=\"1\" minWidth=\"0\">\n          <Text textStyle=\"comp/input/label\">Selected file</Text>\n          <Text whiteSpace=\"nowrap\" textOverflow=\"ellipsis\" overflow=\"hidden\" maxWidth=\"100%\">\n            {acceptedFile.name}\n          </Text>\n        </VStack>\n        <BitkitButton icon={IconMinusCircle} variant=\"secondary\" size=\"md\" onClick={fileUpload.clearFiles}>\n          Remove\n        </BitkitButton>\n      </Card.Body>\n    </Card.Root>\n  );\n};\n\nconst BitkitFileInputContent = (\n  props: Pick<BitkitFileInputProps, 'variant' | 'aspectRatio' | 'label' | 'onCropChange' | 'maxCroppedSize'>,\n) => {\n  const { variant, aspectRatio, label, onCropChange, maxCroppedSize } = props;\n  const acceptedFile = useFileUploadContext().acceptedFiles[0];\n\n  return (\n    <>\n      {!acceptedFile && <Dropzone label={label} />}\n      {acceptedFile && variant === 'image' && (\n        <ImagePreview aspectRatio={aspectRatio} onCropChange={onCropChange} maxCroppedSize={maxCroppedSize} />\n      )}\n      {acceptedFile && variant !== 'image' && <NonImagePreview />}\n    </>\n  );\n};\n\nconst BitkitFileInput = forwardRef<HTMLDivElement, BitkitFileInputProps>((props, ref) => {\n  const { aspectRatio, maxCroppedSize, onCropChange, onFileAccept, onFileAccepted, state, variant, ...rest } = props;\n  const [fileUploadProps, fieldProps] = splitFileUploadProps(rest as never);\n\n  const handleFileAccept = (details: FileUploadFileAcceptDetails) => {\n    onFileAccept?.(details);\n    onFileAccepted?.(details.files[0]);\n  };\n\n  const contentProps = {\n    aspectRatio,\n    label: props.label,\n    maxCroppedSize,\n    onCropChange,\n    variant,\n  };\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <FileUpload.Root variant={variant} onFileAccept={handleFileAccept} {...fileUploadProps}>\n        <FileUpload.HiddenInput />\n        <BitkitFileInputContent {...contentProps} />\n      </FileUpload.Root>\n    </BitkitField>\n  );\n});\n\nBitkitFileInput.displayName = 'BitkitFileInput';\n\nexport default BitkitFileInput;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitFileInput.js","names":[],"sources":["../../../lib/components/BitkitFileInput/BitkitFileInput.tsx"],"sourcesContent":["import { Card } from '@chakra-ui/react/card';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport {\n  FileUpload,\n  type FileUploadFileAcceptDetails,\n  type FileUploadRootProps,\n  useFileUploadContext,\n} from '@chakra-ui/react/file-upload';\nimport { VStack } from '@chakra-ui/react/stack';\nimport { Text } from '@chakra-ui/react/text';\nimport { splitProps as splitFileUploadProps } from '@zag-js/file-upload';\nimport { forwardRef, useEffect, useId, useMemo } from 'react';\n\nimport ImageCropper, { useImageCropperContext } from '../../atoms/ImageCropper/ImageCropper';\nimport { IconMinusCircle, IconUpload } from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport type BitkitFileInputProps = Omit<BitkitFieldProps, 'children' | 'state'> &\n  Omit<FileUploadRootProps, 'disabled' | 'invalid'> & {\n    aspectRatio?: number;\n    /**\n     * Max width/height (px) of the cropped output. The Ark cropper emits at the\n     * selection's natural resolution with no size cap, so a large source image\n     * can produce an oversized file; set this to downscale the output to fit.\n     */\n    maxCroppedSize?: number;\n    onCropChange?: (file: File) => void;\n    /**\n     * Called when a file is accepted. Only ever fires with a file — clearing the\n     * selection calls `onFileRemoved` instead.\n     */\n    onFileAccepted?: (file: File) => void;\n    /**\n     * Called when the accepted file is cleared — via the \"Remove\" button or a\n     * programmatic `clearFiles()`.\n     */\n    onFileRemoved?: () => void;\n    state?: 'error' | 'disabled';\n  };\n\n// Ark's getCroppedImage() emits at the selection's natural resolution and only\n// controls format/quality (no size cap), so downscale here when a max is set —\n// this keeps a large source image from producing an oversized upload. Preserves\n// the blob's MIME type; falls back to the original blob if it can't be decoded.\nconst downscaleBlob = (blob: Blob, maxSize: number): Promise<Blob> => {\n  // A non-positive or non-finite max would produce a 0×0 / NaN canvas and corrupt\n  // the output, so treat it as \"no cap\" and pass the blob through untouched.\n  if (!Number.isFinite(maxSize) || maxSize <= 0) {\n    return Promise.resolve(blob);\n  }\n\n  return new Promise((resolve) => {\n    const url = URL.createObjectURL(blob);\n    const image = new Image();\n\n    image.onload = () => {\n      URL.revokeObjectURL(url);\n      const largestSide = Math.max(image.naturalWidth, image.naturalHeight);\n      if (largestSide <= maxSize) {\n        resolve(blob);\n        return;\n      }\n      const scale = maxSize / largestSide;\n      const canvas = document.createElement('canvas');\n      canvas.width = Math.round(image.naturalWidth * scale);\n      canvas.height = Math.round(image.naturalHeight * scale);\n      const context = canvas.getContext('2d');\n      if (!context) {\n        resolve(blob);\n        return;\n      }\n      context.drawImage(image, 0, 0, canvas.width, canvas.height);\n      canvas.toBlob((result) => resolve(result ?? blob), blob.type);\n    };\n\n    image.onerror = () => {\n      URL.revokeObjectURL(url);\n      resolve(blob);\n    };\n\n    image.src = url;\n  });\n};\n\nconst Dropzone = (props: Pick<BitkitFileInputProps, 'label'>) => {\n  const { label } = props;\n  const { disabled } = useFileUploadContext();\n  const field = useFieldContext();\n  const instructionId = useId();\n  const dropzoneLabel = disabled ? 'Cannot upload file' : 'Drag and drop file here or click to select';\n  const fieldControlProps = field?.getInputProps();\n  const fieldLabelId = label ? field?.ids.label : undefined;\n\n  return (\n    <FileUpload.Dropzone\n      aria-describedby={fieldControlProps?.['aria-describedby']}\n      aria-errormessage={fieldControlProps?.['aria-errormessage']}\n      aria-invalid={fieldControlProps?.['aria-invalid']}\n      aria-labelledby={fieldLabelId ? `${fieldLabelId} ${instructionId}` : instructionId}\n    >\n      <FileUpload.DropzoneContent>\n        <IconUpload />\n        <Text as=\"span\" id={instructionId}>\n          {dropzoneLabel}\n        </Text>\n      </FileUpload.DropzoneContent>\n    </FileUpload.Dropzone>\n  );\n};\n\nconst ImagePreviewContent = (props: Pick<BitkitFileInputProps, 'onCropChange' | 'maxCroppedSize'>) => {\n  const { onCropChange, maxCroppedSize } = props;\n\n  const { acceptedFiles } = useFileUploadContext();\n  const { dragging, getCroppedImage } = useImageCropperContext();\n\n  const acceptedFile = acceptedFiles[0];\n  const objectUrl = useMemo(() => (acceptedFile ? URL.createObjectURL(acceptedFile) : undefined), [acceptedFile]);\n\n  useEffect(() => {\n    return () => {\n      if (objectUrl) {\n        URL.revokeObjectURL(objectUrl);\n      }\n    };\n  }, [objectUrl]);\n\n  useEffect(() => {\n    if (!onCropChange || dragging) {\n      return;\n    }\n\n    if (!acceptedFile) {\n      return;\n    }\n\n    let cancelled = false;\n    // Preserve the source MIME type — the Ark cropper defaults to image/png, which\n    // would mismatch a .jpg name and bloat the file.\n    getCroppedImage({ type: acceptedFile.type || undefined })\n      .then((result) => {\n        if (!(result instanceof Blob)) {\n          return result;\n        }\n        return maxCroppedSize ? downscaleBlob(result, maxCroppedSize) : result;\n      })\n      .then((result) => {\n        if (!cancelled && result instanceof Blob) {\n          onCropChange(new File([result], acceptedFile.name, { type: result.type }));\n        }\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [getCroppedImage, acceptedFile, onCropChange, dragging, maxCroppedSize]);\n\n  return (\n    <ImageCropper.Viewport>\n      <ImageCropper.Image src={objectUrl} />\n      <ImageCropper.Selection>\n        {ImageCropper.handles.map((position) => (\n          <ImageCropper.Handle key={position} position={position}>\n            <div />\n          </ImageCropper.Handle>\n        ))}\n      </ImageCropper.Selection>\n    </ImageCropper.Viewport>\n  );\n};\n\nconst ImagePreview = (props: Pick<BitkitFileInputProps, 'aspectRatio' | 'onCropChange' | 'maxCroppedSize'>) => {\n  const { aspectRatio, onCropChange, maxCroppedSize } = props;\n\n  return (\n    <ImageCropper.Root aspectRatio={aspectRatio} height=\"100%\">\n      <ImagePreviewContent onCropChange={onCropChange} maxCroppedSize={maxCroppedSize} />\n    </ImageCropper.Root>\n  );\n};\n\nconst NonImagePreview = () => {\n  const fileUpload = useFileUploadContext();\n  const acceptedFile = fileUpload.acceptedFiles[0];\n\n  return (\n    <Card.Root asChild elevation={false}>\n      <Card.Body display=\"flex\" paddingBlock=\"20\" paddingInline=\"24\" alignItems=\"center\" flex=\"1\">\n        <VStack gap=\"4\" alignItems=\"flex-start\" flex=\"1\" minWidth=\"0\">\n          <Text textStyle=\"comp/input/label\">Selected file</Text>\n          <Text whiteSpace=\"nowrap\" textOverflow=\"ellipsis\" overflow=\"hidden\" maxWidth=\"100%\">\n            {acceptedFile.name}\n          </Text>\n        </VStack>\n        <BitkitButton icon={IconMinusCircle} variant=\"secondary\" size=\"md\" onClick={fileUpload.clearFiles}>\n          Remove\n        </BitkitButton>\n      </Card.Body>\n    </Card.Root>\n  );\n};\n\nconst BitkitFileInputContent = (\n  props: Pick<BitkitFileInputProps, 'variant' | 'aspectRatio' | 'label' | 'onCropChange' | 'maxCroppedSize'>,\n) => {\n  const { variant, aspectRatio, label, onCropChange, maxCroppedSize } = props;\n  const acceptedFile = useFileUploadContext().acceptedFiles[0];\n\n  return (\n    <>\n      {!acceptedFile && <Dropzone label={label} />}\n      {acceptedFile && variant === 'image' && (\n        <ImagePreview aspectRatio={aspectRatio} onCropChange={onCropChange} maxCroppedSize={maxCroppedSize} />\n      )}\n      {acceptedFile && variant !== 'image' && <NonImagePreview />}\n    </>\n  );\n};\n\nconst BitkitFileInput = forwardRef<HTMLDivElement, BitkitFileInputProps>((props, ref) => {\n  const {\n    aspectRatio,\n    maxCroppedSize,\n    onCropChange,\n    onFileAccept,\n    onFileAccepted,\n    onFileRemoved,\n    state,\n    variant,\n    ...rest\n  } = props;\n  const [fileUploadProps, fieldProps] = splitFileUploadProps(rest as never);\n\n  const handleFileAccept = (details: FileUploadFileAcceptDetails) => {\n    onFileAccept?.(details);\n\n    const acceptedFile = details.files[0];\n    if (acceptedFile) {\n      onFileAccepted?.(acceptedFile);\n    } else {\n      onFileRemoved?.();\n    }\n  };\n\n  const contentProps = {\n    aspectRatio,\n    label: props.label,\n    maxCroppedSize,\n    onCropChange,\n    variant,\n  };\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <FileUpload.Root variant={variant} onFileAccept={handleFileAccept} {...fileUploadProps}>\n        <FileUpload.HiddenInput />\n        <BitkitFileInputContent {...contentProps} />\n      </FileUpload.Root>\n    </BitkitField>\n  );\n});\n\nBitkitFileInput.displayName = 'BitkitFileInput';\n\nexport default BitkitFileInput;\n"],"mappings":"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"}

package/dist/components/BitkitNoteCard/BitkitNoteCard.d.ts

@@ -5,10 +5,6 @@ import { NotificationAction } from '../common/notificationMaps';
 export type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {
     action?: NotificationAction;
     isCollapsible?: boolean;
-    /**
-     * The message body. Rendered in a `div`, so block-level content — a `BitkitMarkdown`, a list,
-     * a table — is valid here, not just phrasing content.
-     */
     message?: ReactNode;
     messageList?: ReactNode[];
     status?: NotificationVariant;
@@ -17,10 +13,6 @@ export type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {
 declare const BitkitNoteCard: import('react').ForwardRefExoticComponent<Omit<BoxProps, "title" | "children"> & {
     action?: NotificationAction;
     isCollapsible?: boolean;
-    /**
-     * The message body. Rendered in a `div`, so block-level content — a `BitkitMarkdown`, a list,
-     * a table — is valid here, not just phrasing content.
-     */
     message?: ReactNode;
     messageList?: ReactNode[];
     status?: NotificationVariant;

package/dist/components/BitkitNoteCard/BitkitNoteCard.js

@@ -45,7 +45,6 @@ var BitkitNoteCard = forwardRef((props, ref) => {
 						children: title
 					}),
 					message && /* @__PURE__ */ jsx(Text, {
-						as: "div",
 						css: styles.message,
 						children: message
 					}),

package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode, useState } from 'react';\n\nimport { IconChevronDown, IconChevronUp } from '../../icons';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n  action?: NotificationAction;\n  isCollapsible?: boolean;\n  /**\n   * The message body. Rendered in a `div`, so block-level content — a `BitkitMarkdown`, a list,\n   * a table — is valid here, not just phrasing content.\n   */\n  message?: ReactNode;\n  messageList?: ReactNode[];\n  status?: NotificationVariant;\n  title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n  const { action, isCollapsible = false, message, messageList, status = 'info', title, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'noteCard' });\n  const styles = recipe({ status });\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n  const isProgress = status === 'progress';\n  const listItems = (messageList ?? []).filter(\n    (item) => item !== null && item !== undefined && typeof item !== 'boolean',\n  );\n  const hasList = listItems.length > 0;\n  const hasToggle = isCollapsible && hasList;\n\n  const list = hasList ? (\n    <BitkitList css={styles.messageList} size=\"md\">\n      {listItems.map((item, index) => (\n        <BitkitList.Item key={index}>{item}</BitkitList.Item>\n      ))}\n    </BitkitList>\n  ) : null;\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <Box css={styles.iconBar}>\n        <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n      </Box>\n      <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n        <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n          {title && <Text css={styles.title}>{title}</Text>}\n          {message && (\n            <Text as=\"div\" css={styles.message}>\n              {message}\n            </Text>\n          )}\n          {hasToggle ? (\n            <Collapsible.Root\n              css={styles.collapsible}\n              onOpenChange={(details) => setIsOpen(details.open)}\n              open={isOpen}\n              unstyled\n            >\n              <Collapsible.Content css={styles.collapsibleContent}>{list}</Collapsible.Content>\n              <Collapsible.Trigger asChild>\n                <BitkitLinkButton css={styles.collapsibleTrigger} suffixIcon={isOpen ? IconChevronUp : IconChevronDown}>\n                  {isOpen ? 'Hide details' : 'Show details'}\n                </BitkitLinkButton>\n              </Collapsible.Trigger>\n            </Collapsible.Root>\n          ) : (\n            list\n          )}\n        </Box>\n        {action &&\n          (action.href !== undefined ? (\n            <BitkitButton\n              css={[styles.actionArea, hasList && styles.actionAreaList]}\n              href={action.href}\n              onClick={action.onClick}\n              rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n              size=\"md\"\n              // See the known gap documented on `NotificationAction.state`: BitkitButton's anchor\n              // variant has no loading state, so only `disabled` carries over here.\n              state={action.state === 'loading' ? undefined : action.state}\n              target={action.target}\n              variant=\"tertiary\"\n            >\n              {action.label}\n            </BitkitButton>\n          ) : (\n            <BitkitButton\n              css={[styles.actionArea, hasList && styles.actionAreaList]}\n              onClick={action.onClick}\n              size=\"md\"\n              state={action.state}\n              variant=\"tertiary\"\n              marginBlock=\"4\"\n            >\n              {action.label}\n            </BitkitButton>\n          ))}\n      </Box>\n    </Box>\n  );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;;;;;AA8BA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,gBAAgB,OAAO,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAGjG,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,aAAa,eAAe,CAAC,EAAA,CAAG,QACnC,SAAS,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,SACnE;CACA,MAAM,UAAU,UAAU,SAAS;CACnC,MAAM,YAAY,iBAAiB;CAEnC,MAAM,OAAO,UACX,oBAAC,oBAAD;EAAY,KAAK,OAAO;EAAa,MAAK;EACvC,UAAA,UAAU,KAAK,MAAM,UACpB,oBAAC,mBAAW,MAAZ,EAAA,UAA8B,KAAsB,GAA9B,KAA8B,CACrD;CACS,CAAA,IACV;CAEJ,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,WACC,oBAAC,MAAD;MAAM,IAAG;MAAM,KAAK,OAAO;MACxB,UAAA;KACG,CAAA;KAEP,YACC,qBAAC,YAAY,MAAb;MACE,KAAK,OAAO;MACZ,eAAe,YAAY,UAAU,QAAQ,IAAI;MACjD,MAAM;MACN,UAAA;MAJF,UAAA,CAME,oBAAC,YAAY,SAAb;OAAqB,KAAK,OAAO;OAAqB,UAAA;MAA0B,CAAA,GAChF,oBAAC,YAAY,SAAb;OAAqB,SAAA;OACnB,UAAA,oBAAC,kBAAD;QAAkB,KAAK,OAAO;QAAoB,YAAY,SAAS,gBAAgB;QACpF,UAAA,SAAS,iBAAiB;OACX,CAAA;MACC,CAAA,CACL;KAElB,CAAA,IAAA;IAEC;GACJ,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;IAGL,OAAO,OAAO,UAAU,YAAY,KAAA,IAAY,OAAO;IACvD,QAAQ,OAAO;IACf,SAAQ;IAEP,UAAA,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,OAAO,OAAO;IACd,SAAQ;IACR,aAAY;IAEX,UAAA,OAAO;GACI,CAAA,EAEf;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode, useState } from 'react';\n\nimport { IconChevronDown, IconChevronUp } from '../../icons';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n  action?: NotificationAction;\n  isCollapsible?: boolean;\n  message?: ReactNode;\n  messageList?: ReactNode[];\n  status?: NotificationVariant;\n  title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n  const { action, isCollapsible = false, message, messageList, status = 'info', title, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'noteCard' });\n  const styles = recipe({ status });\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n  const isProgress = status === 'progress';\n  const listItems = (messageList ?? []).filter(\n    (item) => item !== null && item !== undefined && typeof item !== 'boolean',\n  );\n  const hasList = listItems.length > 0;\n  const hasToggle = isCollapsible && hasList;\n\n  const list = hasList ? (\n    <BitkitList css={styles.messageList} size=\"md\">\n      {listItems.map((item, index) => (\n        <BitkitList.Item key={index}>{item}</BitkitList.Item>\n      ))}\n    </BitkitList>\n  ) : null;\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <Box css={styles.iconBar}>\n        <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n      </Box>\n      <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n        <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n          {title && <Text css={styles.title}>{title}</Text>}\n          {message && <Text css={styles.message}>{message}</Text>}\n          {hasToggle ? (\n            <Collapsible.Root\n              css={styles.collapsible}\n              onOpenChange={(details) => setIsOpen(details.open)}\n              open={isOpen}\n              unstyled\n            >\n              <Collapsible.Content css={styles.collapsibleContent}>{list}</Collapsible.Content>\n              <Collapsible.Trigger asChild>\n                <BitkitLinkButton css={styles.collapsibleTrigger} suffixIcon={isOpen ? IconChevronUp : IconChevronDown}>\n                  {isOpen ? 'Hide details' : 'Show details'}\n                </BitkitLinkButton>\n              </Collapsible.Trigger>\n            </Collapsible.Root>\n          ) : (\n            list\n          )}\n        </Box>\n        {action &&\n          (action.href !== undefined ? (\n            <BitkitButton\n              css={[styles.actionArea, hasList && styles.actionAreaList]}\n              href={action.href}\n              onClick={action.onClick}\n              rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n              size=\"md\"\n              // See the known gap documented on `NotificationAction.state`: BitkitButton's anchor\n              // variant has no loading state, so only `disabled` carries over here.\n              state={action.state === 'loading' ? undefined : action.state}\n              target={action.target}\n              variant=\"tertiary\"\n            >\n              {action.label}\n            </BitkitButton>\n          ) : (\n            <BitkitButton\n              css={[styles.actionArea, hasList && styles.actionAreaList]}\n              onClick={action.onClick}\n              size=\"md\"\n              state={action.state}\n              variant=\"tertiary\"\n              marginBlock=\"4\"\n            >\n              {action.label}\n            </BitkitButton>\n          ))}\n      </Box>\n    </Box>\n  );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;;;;;AA0BA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,gBAAgB,OAAO,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAGjG,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,aAAa,eAAe,CAAC,EAAA,CAAG,QACnC,SAAS,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,SACnE;CACA,MAAM,UAAU,UAAU,SAAS;CACnC,MAAM,YAAY,iBAAiB;CAEnC,MAAM,OAAO,UACX,oBAAC,oBAAD;EAAY,KAAK,OAAO;EAAa,MAAK;EACvC,UAAA,UAAU,KAAK,MAAM,UACpB,oBAAC,mBAAW,MAAZ,EAAA,UAA8B,KAAsB,GAA9B,KAA8B,CACrD;CACS,CAAA,IACV;CAEJ,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,WAAW,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,UAAA;KAAc,CAAA;KACrD,YACC,qBAAC,YAAY,MAAb;MACE,KAAK,OAAO;MACZ,eAAe,YAAY,UAAU,QAAQ,IAAI;MACjD,MAAM;MACN,UAAA;MAJF,UAAA,CAME,oBAAC,YAAY,SAAb;OAAqB,KAAK,OAAO;OAAqB,UAAA;MAA0B,CAAA,GAChF,oBAAC,YAAY,SAAb;OAAqB,SAAA;OACnB,UAAA,oBAAC,kBAAD;QAAkB,KAAK,OAAO;QAAoB,YAAY,SAAS,gBAAgB;QACpF,UAAA,SAAS,iBAAiB;OACX,CAAA;MACC,CAAA,CACL;KAElB,CAAA,IAAA;IAEC;GACJ,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;IAGL,OAAO,OAAO,UAAU,YAAY,KAAA,IAAY,OAAO;IACvD,QAAQ,OAAO;IACf,SAAQ;IAEP,UAAA,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,OAAO,OAAO;IACd,SAAQ;IACR,aAAY;IAEX,UAAA,OAAO;GACI,CAAA,EAEf;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}

package/dist/components/index.d.ts

@@ -27,7 +27,7 @@ export { default as BitkitDrawer, type BitkitDrawerActionTriggerProps, type Bitk
 export { default as BitkitEmptyState, type BitkitEmptyStateProps } from './BitkitEmptyState/BitkitEmptyState';
 export { default as BitkitExpandableCard, type BitkitExpandableCardProps, } from './BitkitExpandableCard/BitkitExpandableCard';
 export { default as BitkitField, type BitkitFieldProps } from './BitkitField/BitkitField';
-export { default as BitkitFileInput } from './BitkitFileInput/BitkitFileInput';
+export { default as BitkitFileInput, type BitkitFileInputProps } from './BitkitFileInput/BitkitFileInput';
 export { default as BitkitGroupHeading, type BitkitGroupHeadingProps } from './BitkitGroupHeading/BitkitGroupHeading';
 export { default as BitkitHeading, type BitkitHeadingProps } from './BitkitHeading/BitkitHeading';
 export { default as BitkitIconButton, type BitkitIconButtonProps } from './BitkitIconButton/BitkitIconButton';

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

@@ -20,17 +20,15 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			display: "flex",
 			gap: "24"
 		},
-		positioner: {
-			position: "absolute",
-			zIndex: "select"
-		},
+		positioner: { position: "absolute" },
 		content: {
 			backgroundColor: "background/primary",
 			borderRadius: "8",
 			boxShadow: "elevation/lg",
 			minWidth: rem(312),
 			paddingBlock: "24",
-			paddingInline: "16"
+			paddingInline: "16",
+			zIndex: "select"
 		},
 		view: {
 			display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n  className: 'datePicker',\n  slots: [...datePickerAnatomy.keys(), 'months'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    control: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    },\n    months: {\n      display: 'flex',\n      gap: '24',\n    },\n    positioner: {\n      position: 'absolute',\n      zIndex: 'select',\n    },\n    content: {\n      backgroundColor: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      minWidth: rem(312),\n      paddingBlock: '24',\n      paddingInline: '16',\n    },\n    view: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16',\n    },\n    viewControl: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n    },\n    table: {\n      width: 'full',\n      borderCollapse: 'collapse',\n      borderSpacing: 0,\n      tableLayout: 'fixed',\n    },\n    tableBody: {\n      '& > tr:first-child > td': {\n        paddingTop: '8',\n      },\n    },\n    tableRow: {\n      display: 'table-row',\n    },\n    tableHeader: {\n      color: 'text/tertiary',\n      textAlign: 'center',\n      textStyle: 'body/md/regular',\n      width: '40',\n      minWidth: '40',\n      maxWidth: '40',\n    },\n    tableCell: {\n      textAlign: 'center',\n      paddingBlock: '2',\n    },\n    tableCellTrigger: {\n      display: 'flex',\n      alignItems: 'stretch',\n      justifyContent: 'center',\n      width: '100%',\n      height: '32',\n      color: 'text/primary',\n      cursor: 'pointer',\n      textStyle: 'body/md/regular',\n\n      '&:hover:not([data-selected])': {\n        backgroundColor: 'interactive/moderate',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-unavailable]': {\n        borderRadius: 0,\n        backgroundColor: 'interactive/disabled',\n        color: 'text/disabled',\n        cursor: 'default',\n        '&:hover, &[data-outside-range]:hover': {\n          borderRadius: 0,\n          backgroundColor: 'interactive/disabled',\n          color: 'text/disabled',\n        },\n      },\n\n      '&[data-outside-range]': {\n        color: 'text/tertiary',\n      },\n\n      '&[data-outside-range][data-unavailable]': {\n        color: 'text/disabled',\n      },\n\n      '&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover': {\n        backgroundColor: 'interactive/moderate',\n        color: 'interactive/bold',\n      },\n\n      '&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-hover-range-start]:hover': {\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-hover-range-end]:hover': {\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-start]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-end]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range]:hover': {\n        backgroundColor: 'transparent',\n        color: 'text/tertiary',\n      },\n\n      '&[data-in-range]': {\n        backgroundColor: 'interactive/moderate',\n        color: 'text/primary',\n      },\n\n      '&[data-in-range]:hover': {\n        backgroundColor: 'interactive/muted',\n        borderRadius: 0,\n      },\n\n      '&[data-selected]': {\n        backgroundColor: 'interactive/base',\n        color: 'text/on-color',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-selected]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start][data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-hover-range-start][data-hover-range-end]': {\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-today] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/base',\n      },\n\n      '&[data-today][data-selected] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/moderate',\n      },\n\n      '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n        borderColor: 'interactive/moderate',\n      },\n\n      '& > span': {\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '8',\n        display: 'flex',\n        flex: 1,\n      },\n    },\n  },\n  variants: {\n    layout: {\n      '1-month': {\n        content: {\n          width: '17.5rem',\n        },\n      },\n      '2-month': {\n        content: {\n          width: '38.5rem',\n        },\n      },\n    },\n    showOutsideDays: {\n      false: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'hidden',\n          },\n        },\n      },\n      true: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'visible',\n          },\n        },\n      },\n    },\n    device: {\n      mobile: {\n        content: {\n          boxShadow: 'none',\n          paddingBlock: '16',\n          paddingInline: '16',\n        },\n      },\n    },\n  },\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n  className: 'datePicker',\n  slots: [...datePickerAnatomy.keys(), 'months'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    control: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    },\n    months: {\n      display: 'flex',\n      gap: '24',\n    },\n    positioner: {\n      position: 'absolute',\n    },\n    content: {\n      backgroundColor: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      minWidth: rem(312),\n      paddingBlock: '24',\n      paddingInline: '16',\n      zIndex: 'select',\n    },\n    view: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16',\n    },\n    viewControl: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n    },\n    table: {\n      width: 'full',\n      borderCollapse: 'collapse',\n      borderSpacing: 0,\n      tableLayout: 'fixed',\n    },\n    tableBody: {\n      '& > tr:first-child > td': {\n        paddingTop: '8',\n      },\n    },\n    tableRow: {\n      display: 'table-row',\n    },\n    tableHeader: {\n      color: 'text/tertiary',\n      textAlign: 'center',\n      textStyle: 'body/md/regular',\n      width: '40',\n      minWidth: '40',\n      maxWidth: '40',\n    },\n    tableCell: {\n      textAlign: 'center',\n      paddingBlock: '2',\n    },\n    tableCellTrigger: {\n      display: 'flex',\n      alignItems: 'stretch',\n      justifyContent: 'center',\n      width: '100%',\n      height: '32',\n      color: 'text/primary',\n      cursor: 'pointer',\n      textStyle: 'body/md/regular',\n\n      '&:hover:not([data-selected])': {\n        backgroundColor: 'interactive/moderate',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-unavailable]': {\n        borderRadius: 0,\n        backgroundColor: 'interactive/disabled',\n        color: 'text/disabled',\n        cursor: 'default',\n        '&:hover, &[data-outside-range]:hover': {\n          borderRadius: 0,\n          backgroundColor: 'interactive/disabled',\n          color: 'text/disabled',\n        },\n      },\n\n      '&[data-outside-range]': {\n        color: 'text/tertiary',\n      },\n\n      '&[data-outside-range][data-unavailable]': {\n        color: 'text/disabled',\n      },\n\n      '&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover': {\n        backgroundColor: 'interactive/moderate',\n        color: 'interactive/bold',\n      },\n\n      '&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-hover-range-start]:hover': {\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-hover-range-end]:hover': {\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-start]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-end]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range]:hover': {\n        backgroundColor: 'transparent',\n        color: 'text/tertiary',\n      },\n\n      '&[data-in-range]': {\n        backgroundColor: 'interactive/moderate',\n        color: 'text/primary',\n      },\n\n      '&[data-in-range]:hover': {\n        backgroundColor: 'interactive/muted',\n        borderRadius: 0,\n      },\n\n      '&[data-selected]': {\n        backgroundColor: 'interactive/base',\n        color: 'text/on-color',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-selected]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start][data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-hover-range-start][data-hover-range-end]': {\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-today] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/base',\n      },\n\n      '&[data-today][data-selected] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/moderate',\n      },\n\n      '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n        borderColor: 'interactive/moderate',\n      },\n\n      '& > span': {\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '8',\n        display: 'flex',\n        flex: 1,\n      },\n    },\n  },\n  variants: {\n    layout: {\n      '1-month': {\n        content: {\n          width: '17.5rem',\n        },\n      },\n      '2-month': {\n        content: {\n          width: '38.5rem',\n        },\n      },\n    },\n    showOutsideDays: {\n      false: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'hidden',\n          },\n        },\n      },\n      true: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'visible',\n          },\n        },\n      },\n    },\n    device: {\n      mobile: {\n        content: {\n          boxShadow: 'none',\n          paddingBlock: '16',\n          paddingInline: '16',\n        },\n      },\n    },\n  },\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}

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

@@ -21,7 +21,7 @@ var dialogSlotRecipe = defineSlotRecipe({
 			background: "utilities/overlay",
 			position: "fixed",
 			inset: 0,
-			zIndex: "dialogOverlay",
+			zIndex: "calc({zIndex.dialogOverlay} + var(--layer-index, 0))",
 			_open: {
 				animationStyle: "fade-in",
 				animationDuration: "moderate"
@@ -43,7 +43,7 @@ var dialogSlotRecipe = defineSlotRecipe({
 			position: "fixed",
 			top: 0,
 			width: "100dvw",
-			zIndex: "dialog"
+			zIndex: "calc({zIndex.dialog} + var(--layer-index, 0))"
 		},
 		content: {
 			background: "background/primary",

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    'scrollArea',\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: 'heading/h2',\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      _last: {\n        paddingBlockEnd: '48',\n      },\n    },\n    // Hugs the body exactly, so the gradient and the scroll button anchor to the end of the\n    // scrollable content. They can't hang off `scrollBody`: that carries the trailing padding,\n    // which only applies when no footer follows.\n    scrollArea: {\n      display: 'flex',\n      flex: '1',\n      flexDirection: 'column',\n      minHeight: 0,\n      position: 'relative',\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: '8',\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: 0,\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      },\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    'scrollArea',\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: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\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: 'calc({zIndex.dialog} + var(--layer-index, 0))',\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: 'heading/h2',\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      _last: {\n        paddingBlockEnd: '48',\n      },\n    },\n    // Hugs the body exactly, so the gradient and the scroll button anchor to the end of the\n    // scrollable content. They can't hang off `scrollBody`: that carries the trailing padding,\n    // which only applies when no footer follows.\n    scrollArea: {\n      display: 'flex',\n      flex: '1',\n      flexDirection: 'column',\n      minHeight: 0,\n      position: 'relative',\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: '8',\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: 0,\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      },\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/Drawer.recipe.js

@@ -10,7 +10,7 @@ var drawerSlotRecipe = defineSlotRecipe({
 			background: "utilities/overlay-light",
 			inset: 0,
 			position: "fixed",
-			zIndex: "dialogOverlay",
+			zIndex: "calc({zIndex.dialogOverlay} + var(--layer-index, 0))",
 			_open: {
 				animationName: "fade-in",
 				animationDuration: "slow"
@@ -27,7 +27,7 @@ var drawerSlotRecipe = defineSlotRecipe({
 			justifyContent: "flex-end",
 			overscrollBehaviorY: "none",
 			position: "fixed",
-			zIndex: "dialog"
+			zIndex: "calc({zIndex.dialog} + var(--layer-index, 0))"
 		},
 		content: {
 			background: "background/primary",

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n  className: 'drawer',\n  slots: drawerAnatomy.keys(),\n  base: {\n    backdrop: {\n      background: 'utilities/overlay-light',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'dialogOverlay',\n      _open: {\n        animationName: 'fade-in',\n        animationDuration: 'slow',\n      },\n      _closed: {\n        animationName: 'fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    positioner: {\n      alignItems: 'stretch',\n      display: 'flex',\n      inset: 0,\n      justifyContent: 'flex-end',\n      overscrollBehaviorY: 'none',\n      position: 'fixed',\n      zIndex: 'dialog',\n    },\n    content: {\n      background: 'background/primary',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: '100dvh',\n      outline: 'none',\n      position: 'relative',\n      _open: {\n        animationDuration: 'slowest',\n        animationName: {\n          base: 'slide-from-right-full, fade-in',\n          _rtl: 'slide-from-left-full, fade-in',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n      _closed: {\n        animationDuration: 'slower',\n        animationName: {\n          base: 'slide-to-right-full, fade-out',\n          _rtl: 'slide-to-left-full, fade-out',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n    },\n    header: {\n      paddingBlockEnd: '8',\n      paddingBlockStart: '24',\n      paddingInline: '24',\n    },\n    body: {\n      flex: '1',\n      overflow: 'auto',\n    },\n    footer: {\n      borderBlockStartColor: 'border/regular',\n      borderBlockStartWidth: '1',\n      paddingBlock: '12',\n    },\n    title: {\n      color: 'text/tertiary',\n      flex: '1',\n      textStyle: 'heading/h6',\n    },\n    description: {},\n    closeTrigger: {\n      alignItems: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      display: 'inline-flex',\n      height: '40',\n      justifyContent: 'center',\n      position: 'absolute',\n      width: '40',\n      _hover: {\n        backgroundColor: 'color/neutral/subtle',\n      },\n      _active: {\n        backgroundColor: 'color/neutral/moderate',\n      },\n    },\n  },\n  variants: {\n    variant: {\n      docked: {\n        closeTrigger: {\n          insetEnd: rem(18),\n          top: '12',\n        },\n        content: {\n          width: { base: '100vw', tablet: rem(320) },\n        },\n      },\n      floating: {\n        body: {\n          paddingInline: '24',\n        },\n        closeTrigger: {\n          insetEnd: '24',\n          top: '24',\n        },\n        positioner: {\n          padding: '32',\n        },\n        content: {\n          borderRadius: '12',\n          boxShadow: 'elevation/lg',\n          maxWidth: rem(700),\n        },\n        header: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: '24',\n          paddingInline: '24',\n        },\n        footer: {\n          borderBlockStartColor: 'transparent',\n          borderBlockStartWidth: 0,\n          paddingBlockEnd: '24',\n          paddingBlockStart: '32',\n          paddingInline: '24',\n        },\n        title: {\n          color: 'text/primary',\n          textStyle: 'heading/h2',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'docked',\n  },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,UAAU;GACV,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,UAAU;GACV,OAAO;IACL,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;EACF;EACA,QAAQ;GACN,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;EACjB;EACA,MAAM;GACJ,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,uBAAuB;GACvB,uBAAuB;GACvB,cAAc;EAChB;EACA,OAAO;GACL,OAAO;GACP,MAAM;GACN,WAAW;EACb;EACA,aAAa,CAAC;EACd,cAAc;GACZ,YAAY;GACZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,QAAQ,EACN,iBAAiB,uBACnB;GACA,SAAS,EACP,iBAAiB,yBACnB;EACF;CACF;CACA,UAAU,EACR,SAAS;EACP,QAAQ;GACN,cAAc;IACZ,UAAU,IAAI,EAAE;IAChB,KAAK;GACP;GACA,SAAS,EACP,OAAO;IAAE,MAAM;IAAS,QAAQ,IAAI,GAAG;GAAE,EAC3C;EACF;EACA,UAAU;GACR,MAAM,EACJ,eAAe,KACjB;GACA,cAAc;IACZ,UAAU;IACV,KAAK;GACP;GACA,YAAY,EACV,SAAS,KACX;GACA,SAAS;IACP,cAAc;IACd,WAAW;IACX,UAAU,IAAI,GAAG;GACnB;GACA,QAAQ;IACN,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;GACjB;GACA,QAAQ;IACN,uBAAuB;IACvB,uBAAuB;IACvB,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;GACjB;GACA,OAAO;IACL,OAAO;IACP,WAAW;GACb;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CAAC"}
+{"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n  className: 'drawer',\n  slots: drawerAnatomy.keys(),\n  base: {\n    backdrop: {\n      background: 'utilities/overlay-light',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n      _open: {\n        animationName: 'fade-in',\n        animationDuration: 'slow',\n      },\n      _closed: {\n        animationName: 'fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    positioner: {\n      alignItems: 'stretch',\n      display: 'flex',\n      inset: 0,\n      justifyContent: 'flex-end',\n      overscrollBehaviorY: 'none',\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n    },\n    content: {\n      background: 'background/primary',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: '100dvh',\n      outline: 'none',\n      position: 'relative',\n      _open: {\n        animationDuration: 'slowest',\n        animationName: {\n          base: 'slide-from-right-full, fade-in',\n          _rtl: 'slide-from-left-full, fade-in',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n      _closed: {\n        animationDuration: 'slower',\n        animationName: {\n          base: 'slide-to-right-full, fade-out',\n          _rtl: 'slide-to-left-full, fade-out',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n    },\n    header: {\n      paddingBlockEnd: '8',\n      paddingBlockStart: '24',\n      paddingInline: '24',\n    },\n    body: {\n      flex: '1',\n      overflow: 'auto',\n    },\n    footer: {\n      borderBlockStartColor: 'border/regular',\n      borderBlockStartWidth: '1',\n      paddingBlock: '12',\n    },\n    title: {\n      color: 'text/tertiary',\n      flex: '1',\n      textStyle: 'heading/h6',\n    },\n    description: {},\n    closeTrigger: {\n      alignItems: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      display: 'inline-flex',\n      height: '40',\n      justifyContent: 'center',\n      position: 'absolute',\n      width: '40',\n      _hover: {\n        backgroundColor: 'color/neutral/subtle',\n      },\n      _active: {\n        backgroundColor: 'color/neutral/moderate',\n      },\n    },\n  },\n  variants: {\n    variant: {\n      docked: {\n        closeTrigger: {\n          insetEnd: rem(18),\n          top: '12',\n        },\n        content: {\n          width: { base: '100vw', tablet: rem(320) },\n        },\n      },\n      floating: {\n        body: {\n          paddingInline: '24',\n        },\n        closeTrigger: {\n          insetEnd: '24',\n          top: '24',\n        },\n        positioner: {\n          padding: '32',\n        },\n        content: {\n          borderRadius: '12',\n          boxShadow: 'elevation/lg',\n          maxWidth: rem(700),\n        },\n        header: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: '24',\n          paddingInline: '24',\n        },\n        footer: {\n          borderBlockStartColor: 'transparent',\n          borderBlockStartWidth: 0,\n          paddingBlockEnd: '24',\n          paddingBlockStart: '32',\n          paddingInline: '24',\n        },\n        title: {\n          color: 'text/primary',\n          textStyle: 'heading/h2',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'docked',\n  },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,UAAU;GACV,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,UAAU;GACV,OAAO;IACL,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;EACF;EACA,QAAQ;GACN,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;EACjB;EACA,MAAM;GACJ,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,uBAAuB;GACvB,uBAAuB;GACvB,cAAc;EAChB;EACA,OAAO;GACL,OAAO;GACP,MAAM;GACN,WAAW;EACb;EACA,aAAa,CAAC;EACd,cAAc;GACZ,YAAY;GACZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,QAAQ,EACN,iBAAiB,uBACnB;GACA,SAAS,EACP,iBAAiB,yBACnB;EACF;CACF;CACA,UAAU,EACR,SAAS;EACP,QAAQ;GACN,cAAc;IACZ,UAAU,IAAI,EAAE;IAChB,KAAK;GACP;GACA,SAAS,EACP,OAAO;IAAE,MAAM;IAAS,QAAQ,IAAI,GAAG;GAAE,EAC3C;EACF;EACA,UAAU;GACR,MAAM,EACJ,eAAe,KACjB;GACA,cAAc;IACZ,UAAU;IACV,KAAK;GACP;GACA,YAAY,EACV,SAAS,KACX;GACA,SAAS;IACP,cAAc;IACd,WAAW;IACX,UAAU,IAAI,GAAG;GACnB;GACA,QAAQ;IACN,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;GACjB;GACA,QAAQ;IACN,uBAAuB;IACvB,uBAAuB;IACvB,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;GACjB;GACA,OAAO;IACL,OAAO;IACP,WAAW;GACb;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CAAC"}

package/package.json

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