@bitrise/bitkit-v2 0.3.241 → 0.3.243

package/dist/components/BitkitCombobox/BitkitCombobox.d.ts

@@ -6,6 +6,7 @@ export type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> &
     children?: BitkitSelectMenuActionChild;
     comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;
     defaultValue?: string;
+    disablePortal?: boolean;
     isLoading?: boolean;
     items: Array<BitkitSelectMenuItemProps>;
     onValueChange?: (newVal: string | undefined) => void;
@@ -18,6 +19,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
     children?: BitkitSelectMenuActionChild;
     comboboxProps?: Omit<ComboboxRootProps, "collection" | "defaultValue" | "onValueChange" | "value">;
     defaultValue?: string;
+    disablePortal?: boolean;
     isLoading?: boolean;
     items: Array<BitkitSelectMenuItemProps>;
     onValueChange?: (newVal: string | undefined) => void;

package/dist/components/BitkitCombobox/BitkitCombobox.js

@@ -5,8 +5,9 @@ import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
 import { withSubComponents } from "../../utilities/withSubComponents.js";
 import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
 import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
+import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
 import BitkitField from "../BitkitField/BitkitField.js";
-import { forwardRef } from "react";
+import { forwardRef, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { useListCollection } from "@chakra-ui/react/hooks";
@@ -14,7 +15,8 @@ import { Combobox } from "@chakra-ui/react/combobox";
 import { useFilter } from "@chakra-ui/react/locale";
 //#region lib/components/BitkitCombobox/BitkitCombobox.tsx
 var BitkitCombobox = forwardRef((props, ref) => {
-	const { children, comboboxProps, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder = "Enter a value or select", searchValue, size, state, value, ...fieldProps } = props;
+	const { children, comboboxProps, defaultValue, disablePortal, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder = "Enter a value or select", searchValue, size, state, value, ...fieldProps } = props;
+	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
 	const { contains } = useFilter({ sensitivity: "base" });
 	const { collection, filter } = useListCollection({
 		initialItems: items,
@@ -62,17 +64,20 @@ var BitkitCombobox = forwardRef((props, ref) => {
 						children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
 					})
 				] })]
-			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
-				collection,
-				emptyHelperText,
-				emptyLabel,
-				isLoading,
-				onSearchChange,
-				searchValue,
-				size,
-				variant: "combobox",
-				children
-			}) }) })]
+			}), /* @__PURE__ */ jsx(Portal, {
+				disabled: disablePortal || disablePortalFromContext,
+				children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
+					collection,
+					emptyHelperText,
+					emptyLabel,
+					isLoading,
+					onSearchChange,
+					searchValue,
+					size,
+					variant: "combobox",
+					children
+				}) })
+			})]
 		})
 	});
 });

package/dist/components/BitkitCombobox/BitkitCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useListCollection } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string | undefined) => void;\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n  const {\n    children,\n    comboboxProps,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder = 'Enter a value or select',\n    searchValue,\n    size,\n    state,\n    value,\n    ...fieldProps\n  } = props;\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { collection, filter } = useListCollection<BitkitSelectMenuItemProps>({\n    initialItems: items,\n    filter: (_itemText, filterText, item) => contains(item.label, filterText),\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n  const iconSize = size === 'md' ? '16' : '24';\n\n  let statusIcon;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Combobox.Root\n        {...comboboxProps}\n        collection={collection}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={!!statusIcon}\n        invalid={isInvalid}\n        onInputValueChange={(e) => {\n          filter(e.inputValue);\n        }}\n        onValueChange={(details) => onValueChange?.(details.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        size={size}\n        value={value ? [value] : undefined}\n      >\n        <Combobox.Control className=\"group\">\n          <Combobox.Input placeholder={placeholder} />\n          <Combobox.IndicatorGroup>\n            <Combobox.ClearTrigger asChild>\n              <BitkitCloseButton size=\"sm\" />\n            </Combobox.ClearTrigger>\n            {statusIcon}\n            <Combobox.Trigger asChild>\n              <AssetSelectChevron />\n            </Combobox.Trigger>\n          </Combobox.IndicatorGroup>\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n              variant=\"combobox\"\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.Root>\n    </BitkitField>\n  );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default withSubComponents(BitkitCombobox, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,UACA,eACA,cACA,iBACA,YACA,WACA,OACA,gBACA,eACA,cAAc,2BACd,aACA,MACA,OACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,OAAO,CAAC;CACtD,MAAM,EAAE,YAAY,WAAW,kBAA6C;EAC1E,cAAc;EACd,SAAS,WAAW,YAAY,SAAS,SAAS,KAAK,OAAO,UAAU;EACxE,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAED,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;CACJ,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;CAAiB,CAAA;MACtE,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;CAGnD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,CAAC,CAAC;GACjB,SAAS;GACT,qBAAqB,MAAM;IACzB,OAAO,EAAE,UAAU;GACrB;GACA,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,EAAE;GAC5D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;GAChF;GACN,OAAO,QAAQ,CAAC,KAAK,IAAI,KAAA;aAhB3B,CAkBE,qBAAC,SAAS,SAAV;IAAkB,WAAU;cAA5B,CACE,oBAAC,SAAS,OAAV,EAA6B,YAAc,CAAA,GAC3C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;gBACrB,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA;KACT,CAAA;KACtB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;gBAChB,oBAAC,oBAAD,CAAqB,CAAA;KACL,CAAA;IACK,EAAA,CAAA,CACT;OAClB,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAS,YAAV,EAAA,UACE,oBAAC,kBAAD;IACc;IACK;IACL;IACD;IACK;IACH;IACP;IACN,SAAQ;IAEP;GACe,CAAA,EACC,CAAA,EACf,CAAA,CACK;;CACJ,CAAA;AAEjB,CAAC;AAED,eAAe,cAAc;AAE7B,IAAA,yBAAe,kBAAkB,gBAAgB,EAAE,QAAQ,uBAAuB,CAAC"}
+{"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useListCollection } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef, useContext } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  defaultValue?: string;\n  disablePortal?: boolean;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string | undefined) => void;\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n  const {\n    children,\n    comboboxProps,\n    defaultValue,\n    disablePortal,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder = 'Enter a value or select',\n    searchValue,\n    size,\n    state,\n    value,\n    ...fieldProps\n  } = props;\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { collection, filter } = useListCollection<BitkitSelectMenuItemProps>({\n    initialItems: items,\n    filter: (_itemText, filterText, item) => contains(item.label, filterText),\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n  const iconSize = size === 'md' ? '16' : '24';\n\n  let statusIcon;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Combobox.Root\n        {...comboboxProps}\n        collection={collection}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={!!statusIcon}\n        invalid={isInvalid}\n        onInputValueChange={(e) => {\n          filter(e.inputValue);\n        }}\n        onValueChange={(details) => onValueChange?.(details.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        size={size}\n        value={value ? [value] : undefined}\n      >\n        <Combobox.Control className=\"group\">\n          <Combobox.Input placeholder={placeholder} />\n          <Combobox.IndicatorGroup>\n            <Combobox.ClearTrigger asChild>\n              <BitkitCloseButton size=\"sm\" />\n            </Combobox.ClearTrigger>\n            {statusIcon}\n            <Combobox.Trigger asChild>\n              <AssetSelectChevron />\n            </Combobox.Trigger>\n          </Combobox.IndicatorGroup>\n        </Combobox.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Combobox.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n              variant=\"combobox\"\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.Root>\n    </BitkitField>\n  );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default withSubComponents(BitkitCombobox, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,UACA,eACA,cACA,eACA,iBACA,YACA,WACA,OACA,gBACA,eACA,cAAc,2BACd,aACA,MACA,OACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAElF,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,OAAO,CAAC;CACtD,MAAM,EAAE,YAAY,WAAW,kBAA6C;EAC1E,cAAc;EACd,SAAS,WAAW,YAAY,SAAS,SAAS,KAAK,OAAO,UAAU;EACxE,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAED,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;CACJ,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;CAAiB,CAAA;MACtE,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;CAGnD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,CAAC,CAAC;GACjB,SAAS;GACT,qBAAqB,MAAM;IACzB,OAAO,EAAE,UAAU;GACrB;GACA,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,EAAE;GAC5D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;GAChF;GACN,OAAO,QAAQ,CAAC,KAAK,IAAI,KAAA;aAhB3B,CAkBE,qBAAC,SAAS,SAAV;IAAkB,WAAU;cAA5B,CACE,oBAAC,SAAS,OAAV,EAA6B,YAAc,CAAA,GAC3C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;gBACrB,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA;KACT,CAAA;KACtB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;gBAChB,oBAAC,oBAAD,CAAqB,CAAA;KACL,CAAA;IACK,EAAA,CAAA,CACT;OAClB,oBAAC,QAAD;IAAQ,UAAU,iBAAiB;cACjC,oBAAC,SAAS,YAAV,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACL;KACD;KACK;KACH;KACP;KACN,SAAQ;KAEP;IACe,CAAA,EACC,CAAA;GACf,CAAA,CACK;;CACJ,CAAA;AAEjB,CAAC;AAED,eAAe,cAAc;AAE7B,IAAA,yBAAe,kBAAkB,gBAAgB,EAAE,QAAQ,uBAAuB,CAAC"}

package/dist/components/BitkitDialog/BitkitDialogContent.js

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

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

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

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js

@@ -15,6 +15,7 @@ var BitkitExpandableCard = (props) => {
 	if (isValidElement(icon)) renderedIcon = cloneElement(icon, { size: "24" });
 	else if (icon) renderedIcon = /* @__PURE__ */ jsx(icon, { size: "24" });
 	return /* @__PURE__ */ jsx(Card.Root, {
+		paddingSize: "sm",
 		css: styles.root,
 		children: /* @__PURE__ */ jsxs(Collapsible.Root, {
 			defaultOpen: defaultExpanded,
@@ -52,13 +53,7 @@ var BitkitExpandableCard = (props) => {
 				})]
 			}), /* @__PURE__ */ jsxs(Collapsible.Content, {
 				css: styles.collapsible,
-				children: [/* @__PURE__ */ jsx(Box, {
-					css: styles.body,
-					children
-				}), !!footer && /* @__PURE__ */ jsx(Box, {
-					css: styles.footer,
-					children: footer
-				})]
+				children: [/* @__PURE__ */ jsx(Card.Body, { children }), !!footer && /* @__PURE__ */ jsx(Card.Footer, { children: footer })]
 			})]
 		})
 	});

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\n\ntype UncontrolledProps = {\n  defaultExpanded?: boolean;\n  expanded?: never;\n  onChange?: never;\n};\n\ntype ControlledProps = {\n  defaultExpanded?: never;\n  expanded: boolean;\n  onChange: (expanded: boolean) => void;\n};\n\nexport type BitkitExpandableCardProps = Omit<\n  CollapsibleRootProps,\n  'defaultOpen' | 'onChange' | 'onOpenChange' | 'open'\n> & {\n  children: ReactNode;\n  footer?: ReactNode;\n  icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n  secdText?: ReactNode;\n  size: 'md' | 'lg';\n  suffix?: ReactNode;\n  title: ReactNode;\n} & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = (props: BitkitExpandableCardProps) => {\n  const {\n    children,\n    defaultExpanded,\n    expanded,\n    footer,\n    icon,\n    onChange,\n    secdText,\n    size = 'lg',\n    suffix,\n    title,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'expandableCard' });\n  const styles = recipe({ size });\n\n  const handleOpenChange = onChange ? (details: { open: boolean }) => onChange(details.open) : undefined;\n\n  let renderedIcon: ReactNode = null;\n  if (isValidElement<BitkitAvatarProps>(icon)) {\n    renderedIcon = cloneElement(icon, { size: '24' });\n  } else if (icon) {\n    const Icon = icon;\n    renderedIcon = <Icon size=\"24\" />;\n  }\n\n  return (\n    <Card.Root css={styles.root}>\n      <Collapsible.Root defaultOpen={defaultExpanded} open={expanded} onOpenChange={handleOpenChange} {...rest}>\n        <Collapsible.Trigger css={styles.header}>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {!!renderedIcon && <Box css={styles.icon}>{renderedIcon}</Box>}\n            <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n              {title}\n              {!!secdText && <Text css={styles.secdText}>{secdText}</Text>}\n            </Box>\n          </Box>\n          <Box display=\"flex\" alignItems=\"center\">\n            {!!suffix && <Text css={styles.suffix}>{suffix}</Text>}\n            <Collapsible.Indicator asChild>\n              <AssetSelectChevron />\n            </Collapsible.Indicator>\n          </Box>\n        </Collapsible.Trigger>\n        <Collapsible.Content css={styles.collapsible}>\n          <Box css={styles.body}>{children}</Box>\n          {!!footer && <Box css={styles.footer}>{footer}</Box>}\n        </Collapsible.Content>\n      </Collapsible.Root>\n    </Card.Root>\n  );\n};\n\nBitkitExpandableCard.displayName = 'BitkitExpandableCard';\n\nexport default BitkitExpandableCard;\n"],"mappings":";;;;;;;;;AAoCA,IAAM,wBAAwB,UAAqC;CACjE,MAAM,EACJ,UACA,iBACA,UACA,QACA,MACA,UACA,UACA,OAAO,MACP,QACA,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,EAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,mBAAmB,YAAY,YAA+B,SAAS,QAAQ,IAAI,IAAI,KAAA;CAE7F,IAAI,eAA0B;CAC9B,IAAI,eAAkC,IAAI,GACxC,eAAe,aAAa,MAAM,EAAE,MAAM,KAAK,CAAC;MAC3C,IAAI,MAET,eAAe,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;CAGlC,OACE,oBAAC,KAAK,MAAN;EAAW,KAAK,OAAO;YACrB,qBAAC,YAAY,MAAb;GAAkB,aAAa;GAAiB,MAAM;GAAU,cAAc;GAAkB,GAAI;aAApG,CACE,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;cAAjC,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;eAA5C,CACG,CAAC,CAAC,gBAAgB,oBAAC,KAAD;MAAK,KAAK,OAAO;gBAAO;KAAkB,CAAA,GAC7D,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAa,eAAc;gBAA1D,CACG,OACA,CAAC,CAAC,YAAY,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAW;MAAe,CAAA,CACxD;OACF;QACL,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;eAA/B,CACG,CAAC,CAAC,UAAU,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAS;KAAa,CAAA,GACrD,oBAAC,YAAY,WAAb;MAAuB,SAAA;gBACrB,oBAAC,oBAAD,CAAqB,CAAA;KACA,CAAA,CACpB;MACc;OACrB,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;cAAjC,CACE,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAO;IAAc,CAAA,GACrC,CAAC,CAAC,UAAU,oBAAC,KAAD;KAAK,KAAK,OAAO;eAAS;IAAY,CAAA,CAChC;KACL;;CACT,CAAA;AAEf;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\n\ntype UncontrolledProps = {\n  defaultExpanded?: boolean;\n  expanded?: never;\n  onChange?: never;\n};\n\ntype ControlledProps = {\n  defaultExpanded?: never;\n  expanded: boolean;\n  onChange: (expanded: boolean) => void;\n};\n\nexport type BitkitExpandableCardProps = Omit<\n  CollapsibleRootProps,\n  'defaultOpen' | 'onChange' | 'onOpenChange' | 'open'\n> & {\n  children: ReactNode;\n  footer?: ReactNode;\n  icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n  secdText?: ReactNode;\n  size: 'md' | 'lg';\n  suffix?: ReactNode;\n  title: ReactNode;\n} & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = (props: BitkitExpandableCardProps) => {\n  const {\n    children,\n    defaultExpanded,\n    expanded,\n    footer,\n    icon,\n    onChange,\n    secdText,\n    size = 'lg',\n    suffix,\n    title,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'expandableCard' });\n  const styles = recipe({ size });\n\n  const handleOpenChange = onChange ? (details: { open: boolean }) => onChange(details.open) : undefined;\n\n  let renderedIcon: ReactNode = null;\n  if (isValidElement<BitkitAvatarProps>(icon)) {\n    renderedIcon = cloneElement(icon, { size: '24' });\n  } else if (icon) {\n    const Icon = icon;\n    renderedIcon = <Icon size=\"24\" />;\n  }\n\n  return (\n    <Card.Root paddingSize=\"sm\" css={styles.root}>\n      <Collapsible.Root defaultOpen={defaultExpanded} open={expanded} onOpenChange={handleOpenChange} {...rest}>\n        <Collapsible.Trigger css={styles.header}>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {!!renderedIcon && <Box css={styles.icon}>{renderedIcon}</Box>}\n            <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n              {title}\n              {!!secdText && <Text css={styles.secdText}>{secdText}</Text>}\n            </Box>\n          </Box>\n          <Box display=\"flex\" alignItems=\"center\">\n            {!!suffix && <Text css={styles.suffix}>{suffix}</Text>}\n            <Collapsible.Indicator asChild>\n              <AssetSelectChevron />\n            </Collapsible.Indicator>\n          </Box>\n        </Collapsible.Trigger>\n        <Collapsible.Content css={styles.collapsible}>\n          <Card.Body>{children}</Card.Body>\n          {!!footer && <Card.Footer>{footer}</Card.Footer>}\n        </Collapsible.Content>\n      </Collapsible.Root>\n    </Card.Root>\n  );\n};\n\nBitkitExpandableCard.displayName = 'BitkitExpandableCard';\n\nexport default BitkitExpandableCard;\n"],"mappings":";;;;;;;;;AAoCA,IAAM,wBAAwB,UAAqC;CACjE,MAAM,EACJ,UACA,iBACA,UACA,QACA,MACA,UACA,UACA,OAAO,MACP,QACA,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,EAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,mBAAmB,YAAY,YAA+B,SAAS,QAAQ,IAAI,IAAI,KAAA;CAE7F,IAAI,eAA0B;CAC9B,IAAI,eAAkC,IAAI,GACxC,eAAe,aAAa,MAAM,EAAE,MAAM,KAAK,CAAC;MAC3C,IAAI,MAET,eAAe,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;CAGlC,OACE,oBAAC,KAAK,MAAN;EAAW,aAAY;EAAK,KAAK,OAAO;YACtC,qBAAC,YAAY,MAAb;GAAkB,aAAa;GAAiB,MAAM;GAAU,cAAc;GAAkB,GAAI;aAApG,CACE,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;cAAjC,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;eAA5C,CACG,CAAC,CAAC,gBAAgB,oBAAC,KAAD;MAAK,KAAK,OAAO;gBAAO;KAAkB,CAAA,GAC7D,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAa,eAAc;gBAA1D,CACG,OACA,CAAC,CAAC,YAAY,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAW;MAAe,CAAA,CACxD;OACF;QACL,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;eAA/B,CACG,CAAC,CAAC,UAAU,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAS;KAAa,CAAA,GACrD,oBAAC,YAAY,WAAb;MAAuB,SAAA;gBACrB,oBAAC,oBAAD,CAAqB,CAAA;KACA,CAAA,CACpB;MACc;OACrB,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;cAAjC,CACE,oBAAC,KAAK,MAAN,EAAY,SAAoB,CAAA,GAC/B,CAAC,CAAC,UAAU,oBAAC,KAAK,QAAN,EAAA,UAAc,OAAoB,CAAA,CAC5B;KACL;;CACT,CAAA;AAEf;AAEA,qBAAqB,cAAc"}

package/dist/components/BitkitMultiselect/BitkitMultiselect.d.ts

@@ -12,6 +12,7 @@ export type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'
     items: Array<BitkitMultiselectMenuItemProps>;
     onValueChange?: (newVal: Array<string>) => void;
     placeholder?: string;
+    disablePortal?: boolean;
     selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;
     size?: 'md' | 'lg';
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
@@ -26,6 +27,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
     items: Array<BitkitMultiselectMenuItemProps>;
     onValueChange?: (newVal: Array<string>) => void;
     placeholder?: string;
+    disablePortal?: boolean;
     selectProps?: Omit<SelectRootProps, "collection" | "defaultValue" | "multiple" | "onValueChange" | "value">;
     size?: "md" | "lg";
     state?: "disabled" | "error" | "readOnly" | "warning";

package/dist/components/BitkitMultiselect/BitkitMultiselect.js

@@ -4,13 +4,14 @@ import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
 import { withSubComponents } from "../../utilities/withSubComponents.js";
 import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
+import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
 import BitkitField from "../BitkitField/BitkitField.js";
 import BitkitMultiselectMenu from "../BitkitMultiselectMenu/BitkitMultiselectMenu.js";
 import BitkitTag from "../BitkitTag/BitkitTag.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { Text } from "@chakra-ui/react/text";
-import { forwardRef } from "react";
+import { forwardRef, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { createListCollection } from "@chakra-ui/react/collection";
@@ -93,7 +94,7 @@ var ClearAllButton = ({ state }) => {
 	});
 };
 var BitkitMultiselect = forwardRef((props, ref) => {
-	const { children, constrained = false, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
+	const { children, constrained = false, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
 	const collection = createListCollection({
 		items,
 		groupBy: (item) => item.group || "",
@@ -103,6 +104,7 @@ var BitkitMultiselect = forwardRef((props, ref) => {
 		constrained,
 		size
 	});
+	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
 	const iconSize = size === "lg" ? "24" : "16";
 	const isInvalid = state === "error" || !!fieldProps.errorText;
 	return /* @__PURE__ */ jsx(BitkitField, {
@@ -160,16 +162,19 @@ var BitkitMultiselect = forwardRef((props, ref) => {
 						})
 					]
 				}),
-				/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitMultiselectMenu, {
-					collection,
-					emptyHelperText,
-					emptyLabel,
-					isLoading,
-					onSearchChange,
-					searchValue,
-					size,
-					children
-				}) }) })
+				/* @__PURE__ */ jsx(Portal, {
+					disabled: disablePortal || disablePortalFromContext,
+					children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitMultiselectMenu, {
+						collection,
+						emptyHelperText,
+						emptyLabel,
+						isLoading,
+						onSearchChange,
+						searchValue,
+						size,
+						children
+					}) })
+				})
 			]
 		})
 	});

package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n  type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  items: Array<BitkitMultiselectMenuItemProps>;\n  onValueChange?: (newVal: Array<string>) => void;\n  placeholder?: string;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitMultiselectTriggerProps;\n  value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n  !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n  constrained: boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, placeholder, size, state }: MultiselectOverlayProps) => {\n  const select = useSelectContext();\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n  const selectedValues = select.value;\n  const isDisabled = state === 'disabled';\n  const isReadOnly = state === 'readOnly';\n  const tagState = isDisabled ? 'disabled' : undefined;\n  // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n  // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n  // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n  // the next one up.\n  const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n  const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const hasSelection = selectedValues.length > 0;\n\n  const renderTags = () => {\n    if (constrained) {\n      return (\n        <>\n          {hasSelection && (\n            <TagSlot>\n              <BitkitTag\n                size=\"sm\"\n                colorPalette=\"neutral\"\n                labelText={String(selectedValues.length)}\n                state={tagState}\n                onRemove={canRemove ? () => select.clearValue() : undefined}\n              />\n            </TagSlot>\n          )}\n          <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n            {resolvedPlaceholder}\n          </Text>\n        </>\n      );\n    }\n\n    if (selectedItems.length === 0) {\n      return (\n        <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n          {resolvedPlaceholder}\n        </Text>\n      );\n    }\n\n    return selectedItems.map((item) => (\n      <TagSlot key={item.value}>\n        <BitkitTag\n          size=\"sm\"\n          colorPalette=\"neutral\"\n          labelText={item.label}\n          state={tagState}\n          onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n        />\n      </TagSlot>\n    ));\n  };\n\n  return (\n    <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n      <Box css={styles.tagsBlock}>{renderTags()}</Box>\n    </Box>\n  );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n    {children}\n  </Box>\n);\n\ntype ClearAllButtonProps = {\n  state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n  const select = useSelectContext();\n\n  // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n  if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n  return (\n    <BitkitCloseButton size=\"sm\" colorPalette=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n  );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n  const {\n    children,\n    constrained = false,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    searchValue,\n    selectProps,\n    size = 'lg',\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const iconSize = size === 'lg' ? '24' : '16';\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => onValueChange?.(details.value)}\n        readOnly={state === 'readOnly'}\n        // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n        // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n        // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n        // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n        // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value}\n      >\n        <Select.HiddenSelect />\n        <Select.Control css={styles.control} className=\"group\">\n          <Select.Trigger css={styles.trigger} {...triggerProps} />\n          <MultiselectOverlay constrained={constrained} placeholder={placeholder} size={size} state={state} />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={state} />}\n            {state === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconWarningYellow size={iconSize} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator css={styles.indicator} asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal>\n          <Select.Positioner>\n            <BitkitMultiselectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitMultiselectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
+{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n  type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  items: Array<BitkitMultiselectMenuItemProps>;\n  onValueChange?: (newVal: Array<string>) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitMultiselectTriggerProps;\n  value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n  !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n  constrained: boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, placeholder, size, state }: MultiselectOverlayProps) => {\n  const select = useSelectContext();\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n  const selectedValues = select.value;\n  const isDisabled = state === 'disabled';\n  const isReadOnly = state === 'readOnly';\n  const tagState = isDisabled ? 'disabled' : undefined;\n  // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n  // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n  // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n  // the next one up.\n  const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n  const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const hasSelection = selectedValues.length > 0;\n\n  const renderTags = () => {\n    if (constrained) {\n      return (\n        <>\n          {hasSelection && (\n            <TagSlot>\n              <BitkitTag\n                size=\"sm\"\n                colorPalette=\"neutral\"\n                labelText={String(selectedValues.length)}\n                state={tagState}\n                onRemove={canRemove ? () => select.clearValue() : undefined}\n              />\n            </TagSlot>\n          )}\n          <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n            {resolvedPlaceholder}\n          </Text>\n        </>\n      );\n    }\n\n    if (selectedItems.length === 0) {\n      return (\n        <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n          {resolvedPlaceholder}\n        </Text>\n      );\n    }\n\n    return selectedItems.map((item) => (\n      <TagSlot key={item.value}>\n        <BitkitTag\n          size=\"sm\"\n          colorPalette=\"neutral\"\n          labelText={item.label}\n          state={tagState}\n          onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n        />\n      </TagSlot>\n    ));\n  };\n\n  return (\n    <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n      <Box css={styles.tagsBlock}>{renderTags()}</Box>\n    </Box>\n  );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n    {children}\n  </Box>\n);\n\ntype ClearAllButtonProps = {\n  state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n  const select = useSelectContext();\n\n  // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n  if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n  return (\n    <BitkitCloseButton size=\"sm\" colorPalette=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n  );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n  const {\n    children,\n    constrained = false,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size = 'lg',\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const iconSize = size === 'lg' ? '24' : '16';\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => onValueChange?.(details.value)}\n        readOnly={state === 'readOnly'}\n        // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n        // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n        // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n        // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n        // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value}\n      >\n        <Select.HiddenSelect />\n        <Select.Control css={styles.control} className=\"group\">\n          <Select.Trigger css={styles.trigger} {...triggerProps} />\n          <MultiselectOverlay constrained={constrained} placeholder={placeholder} size={size} state={state} />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={state} />}\n            {state === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconWarningYellow size={iconSize} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator css={styles.indicator} asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitMultiselectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitMultiselectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6CA,IAAM,yBAA0D;CAAC;CAAY;CAAY;CAAS;AAAS;;AAG3G,IAAM,yBAAyB,aAAsB,gBAAwB,UAC3E,CAAC,eAAe,iBAAiB,KAAK,CAAC,uBAAuB,SAAS,KAAK;AAS9E,IAAM,sBAAsB,EAAE,aAAa,aAAa,MAAM,YAAqC;CACjG,MAAM,SAAS,iBAAiB;CAEhC,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,EAAO;EAAE;EAAa;CAAK,CAAC;CAE3C,MAAM,gBAAgB,OAAO;CAC7B,MAAM,iBAAiB,OAAO;CAC9B,MAAM,aAAa,UAAU;CAC7B,MAAM,aAAa,UAAU;CAC7B,MAAM,WAAW,aAAa,aAAa,KAAA;CAK3C,MAAM,oBAAoB,sBAAsB,aAAa,eAAe,QAAQ,KAAK,IAAI,OAAO;CAEpG,MAAM,sBAAsB,gBAAgB,aAAa,mBAAmB;CAC5E,MAAM,YAAY,CAAC,cAAc,CAAC;CAElC,MAAM,eAAe,eAAe,SAAS;CAE7C,MAAM,mBAAmB;EACvB,IAAI,aACF,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,gBACC,oBAAC,SAAD,EAAA,UACE,oBAAC,WAAD;GACE,MAAK;GACL,cAAa;GACb,WAAW,OAAO,eAAe,MAAM;GACvC,OAAO;GACP,UAAU,kBAAkB,OAAO,WAAW,IAAI,KAAA;EACnD,CAAA,EACM,CAAA,GAEX,oBAAC,MAAD;GAAM,IAAG;GAAO,KAAK,OAAO;GAAiB,oBAAkB,eAAe,KAAA,IAAY;aACvF;EACG,CAAA,CACN,EAAA,CAAA;EAIN,IAAI,cAAc,WAAW,GAC3B,OACE,oBAAC,MAAD;GAAM,IAAG;GAAO,KAAK,OAAO;GAAiB,oBAAiB;aAC3D;EACG,CAAA;EAIV,OAAO,cAAc,KAAK,SACxB,oBAAC,SAAD,EAAA,UACE,oBAAC,WAAD;GACE,MAAK;GACL,cAAa;GACb,WAAW,KAAK;GAChB,OAAO;GACP,UAAU,kBAAkB,OAAO,SAAS,eAAe,QAAQ,MAAM,MAAM,KAAK,KAAK,CAAC,IAAI,KAAA;EAC/F,CAAA,EACM,GARK,KAAK,KAQV,CACV;CACH;CAEA,OACE,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAS,eAAc;EAAO,kBAAkB;YAC/D,oBAAC,KAAD;GAAK,KAAK,OAAO;aAAY,WAAW;EAAO,CAAA;CAC5C,CAAA;AAET;AAEA,IAAM,WAAW,EAAE,eACjB,oBAAC,KAAD;CAAK,aAAU;CAAM,SAAQ;CAAc,eAAc;CACtD;AACE,CAAA;AAOP,IAAM,kBAAkB,EAAE,YAAiC;CACzD,MAAM,SAAS,iBAAiB;CAGhC,IAAI,CAAC,sBAAsB,OAAO,OAAO,MAAM,QAAQ,KAAK,GAAG,OAAO;CAEtE,OACE,oBAAC,mBAAD;EAAmB,MAAK;EAAK,cAAa;EAAU,cAAW;EAAY,eAAe,OAAO,WAAW;CAAI,CAAA;AAEpH;AAEA,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EACJ,UACA,cAAc,OACd,cACA,iBACA,YACA,WACA,OACA,gBACA,eACA,aACA,eACA,aACA,aACA,OAAO,MACP,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAGD,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,EAAO;EAAE;EAAa;CAAK,CAAC;CAE3C,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACZ,UAAA;GACA,GAAI;GACU;GACd,UAAU,UAAU;GACpB,SAAS;GACT,gBAAgB,YAAY,gBAAgB,QAAQ,KAAK;GACzD,UAAU,UAAU;GAMpB,kBAAkB,EAAE,iBAAiB,WAAW,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;GAC/E;aAfT;IAiBE,oBAAC,OAAO,cAAR,CAAsB,CAAA;IACtB,qBAAC,OAAO,SAAR;KAAgB,KAAK,OAAO;KAAS,WAAU;eAA/C;MACE,oBAAC,OAAO,SAAR;OAAgB,KAAK,OAAO;OAAS,GAAI;MAAe,CAAA;MACxD,oBAAC,oBAAD;OAAiC;OAA0B;OAAmB;OAAa;MAAQ,CAAA;MACnG,qBAAC,OAAO,gBAAR;OAAuB,KAAK,OAAO;iBAAnC;QACG,CAAC,eAAe,oBAAC,gBAAD,EAAuB,MAAQ,CAAA;QAC/C,UAAU,WACT,oBAAC,OAAO,WAAR;SAAkB,KAAK,OAAO;mBAC5B,oBAAC,uBAAD;UAAuB,MAAM;UAAU,OAAM;SAAiB,CAAA;QAC9C,CAAA;QAEnB,UAAU,aACT,oBAAC,OAAO,WAAR;SAAkB,KAAK,OAAO;mBAC5B,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;QACpB,CAAA;QAEpB,oBAAC,OAAO,WAAR;SAAkB,KAAK,OAAO;SAAW,SAAA;mBACvC,oBAAC,oBAAD,CAAqB,CAAA;QACL,CAAA;OACG;;KACT;;IAChB,oBAAC,QAAD;KAAQ,UAAU,iBAAiB;eACjC,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,uBAAD;MACc;MACK;MACL;MACD;MACK;MACH;MACP;MAEL;KACoB,CAAA,EACN,CAAA;IACb,CAAA;GACG;;CACF,CAAA;AAEjB,CAAC;AAED,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,kBAAkB,mBAAmB,EAAE,QAAQ,uBAAuB,CAAC"}

package/dist/components/BitkitSelect/BitkitSelect.d.ts

@@ -10,6 +10,7 @@ export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
     items: Array<BitkitSelectMenuItemProps>;
     onValueChange?: (newVal: string) => void;
     placeholder?: string;
+    disablePortal?: boolean;
     selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;
     size?: 'md' | 'lg';
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
@@ -23,6 +24,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
     items: Array<BitkitSelectMenuItemProps>;
     onValueChange?: (newVal: string) => void;
     placeholder?: string;
+    disablePortal?: boolean;
     selectProps?: Omit<SelectRootProps, "collection" | "defaultValue" | "onValueChange" | "value">;
     size?: "md" | "lg";
     state?: "disabled" | "error" | "readOnly" | "warning";

package/dist/components/BitkitSelect/BitkitSelect.js

@@ -4,9 +4,10 @@ import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import { withSubComponents } from "../../utilities/withSubComponents.js";
 import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
 import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
+import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
 import BitkitField from "../BitkitField/BitkitField.js";
 import { Text } from "@chakra-ui/react/text";
-import { forwardRef } from "react";
+import { forwardRef, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { createListCollection } from "@chakra-ui/react/collection";
@@ -33,12 +34,13 @@ var SelectValue = ({ placeholder, state, size }) => {
 	}) : /* @__PURE__ */ jsx(Select.ValueText, { placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option") });
 };
 var BitkitSelect = forwardRef((props, ref) => {
-	const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, searchValue, placeholder, selectProps, size, state, triggerProps, value, ...fieldProps } = props;
+	const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size, state, triggerProps, value, ...fieldProps } = props;
 	const collection = createListCollection({
 		items,
 		groupBy: (item) => item.group || "",
 		isItemDisabled: (item) => !!item.disabled
 	});
+	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
 	const isInvalid = state === "error" || !!fieldProps.errorText;
 	return /* @__PURE__ */ jsx(BitkitField, {
 		ref,
@@ -79,16 +81,19 @@ var BitkitSelect = forwardRef((props, ref) => {
 						})
 					] })]
 				}),
-				/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
-					collection,
-					emptyHelperText,
-					emptyLabel,
-					isLoading,
-					onSearchChange,
-					searchValue,
-					size,
-					children
-				}) }) })
+				/* @__PURE__ */ jsx(Portal, {
+					disabled: disablePortal || disablePortalFromContext,
+					children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
+						collection,
+						emptyHelperText,
+						emptyLabel,
+						isLoading,
+						onSearchChange,
+						searchValue,
+						size,
+						children
+					}) })
+				})
 			]
 		})
 	});

package/dist/components/BitkitSelect/BitkitSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n  type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string) => void;\n  placeholder?: string;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitSelectTriggerProps;\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  size: BitkitSelectProps['size'];\n  state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n  const select = useSelectContext();\n  const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n  const Icon = items[0]?.icon;\n  const label = items[0]?.label;\n\n  const iconSize = size === 'md' ? '16' : '24';\n\n  return items[0] ? (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n      {Icon && <Icon size={iconSize} flexShrink={0} />}\n      <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth={0}>\n        {label}\n      </Text>\n    </Select.ValueText>\n  ) : (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')} />\n  );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n  const {\n    children,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    searchValue,\n    placeholder,\n    selectProps,\n    size,\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        size={size}\n        {...selectProps}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={state === 'error' || state === 'warning'}\n        invalid={isInvalid}\n        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value ? [value] : undefined}\n      >\n        <Select.HiddenSelect />\n        <Select.Control className=\"group\">\n          <Select.Trigger {...triggerProps}>\n            <SelectValue placeholder={placeholder} size={size} state={state} />\n          </Select.Trigger>\n          <Select.IndicatorGroup>\n            {state === 'error' && (\n              <Select.Indicator>\n                <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator>\n                <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAM,eAAe,EAAE,aAAa,OAAO,WAA6B;CAEtE,MAAM,QADS,iBACD,EAAO;CAErB,MAAM,OAAO,MAAM,IAAI;CACvB,MAAM,QAAQ,MAAM,IAAI;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO,MAAM,KACX,qBAAC,OAAO,WAAR;EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB;YAAzF,CACG,QAAQ,oBAAC,MAAD;GAAM,MAAM;GAAU,YAAY;EAAI,CAAA,GAC/C,oBAAC,MAAD;GAAM,IAAG;GAAO,UAAS;GAAS,cAAa;GAAW,YAAW;GAAS,UAAU;aACrF;EACG,CAAA,CACU;MAElB,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,oBAAsB,CAAA;AAEnH;AAEA,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,UACA,cACA,iBACA,YACA,WACA,OACA,gBACA,eACA,aACA,aACA,aACA,MACA,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAED,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,UAAU,WAAW,UAAU;GAC9C,SAAS;GACT,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,EAAE;GAC1D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;GACtF,OAAO,QAAQ,CAAC,KAAK,IAAI,KAAA;aAb3B;IAeE,oBAAC,OAAO,cAAR,CAAsB,CAAA;IACtB,qBAAC,OAAO,SAAR;KAAgB,WAAU;eAA1B,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;gBAClB,oBAAC,aAAD;OAA0B;OAAmB;OAAa;MAAQ,CAAA;KACpD,CAAA,GAChB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;MAAiB,CAAA,EACjE,CAAA;MAEnB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,EACvC,CAAA;MAEpB,oBAAC,OAAO,WAAR;OAAkB,SAAA;iBAChB,oBAAC,oBAAD,CAAqB,CAAA;MACL,CAAA;KACG,EAAA,CAAA,CACT;;IAChB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACL;KACD;KACK;KACH;KACP;KAEL;IACe,CAAA,EACD,CAAA,EACb,CAAA;GACG;;CACF,CAAA;AAEjB,CAAC;AAED,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,QAAQ,uBAAuB,CAAC"}
+{"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n  type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitSelectTriggerProps;\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  size: BitkitSelectProps['size'];\n  state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n  const select = useSelectContext();\n  const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n  const Icon = items[0]?.icon;\n  const label = items[0]?.label;\n\n  const iconSize = size === 'md' ? '16' : '24';\n\n  return items[0] ? (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n      {Icon && <Icon size={iconSize} flexShrink={0} />}\n      <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth={0}>\n        {label}\n      </Text>\n    </Select.ValueText>\n  ) : (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')} />\n  );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n  const {\n    children,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size,\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        size={size}\n        {...selectProps}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={state === 'error' || state === 'warning'}\n        invalid={isInvalid}\n        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value ? [value] : undefined}\n      >\n        <Select.HiddenSelect />\n        <Select.Control className=\"group\">\n          <Select.Trigger {...triggerProps}>\n            <SelectValue placeholder={placeholder} size={size} state={state} />\n          </Select.Trigger>\n          <Select.IndicatorGroup>\n            {state === 'error' && (\n              <Select.Indicator>\n                <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator>\n                <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;AA4CA,IAAM,eAAe,EAAE,aAAa,OAAO,WAA6B;CAEtE,MAAM,QADS,iBACD,EAAO;CAErB,MAAM,OAAO,MAAM,IAAI;CACvB,MAAM,QAAQ,MAAM,IAAI;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO,MAAM,KACX,qBAAC,OAAO,WAAR;EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB;YAAzF,CACG,QAAQ,oBAAC,MAAD;GAAM,MAAM;GAAU,YAAY;EAAI,CAAA,GAC/C,oBAAC,MAAD;GAAM,IAAG;GAAO,UAAS;GAAS,cAAa;GAAW,YAAW;GAAS,UAAU;aACrF;EACG,CAAA,CACU;MAElB,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,oBAAsB,CAAA;AAEnH;AAEA,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,UACA,cACA,iBACA,YACA,WACA,OACA,gBACA,eACA,aACA,eACA,aACA,aACA,MACA,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAED,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,UAAU,WAAW,UAAU;GAC9C,SAAS;GACT,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,EAAE;GAC1D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;GACtF,OAAO,QAAQ,CAAC,KAAK,IAAI,KAAA;aAb3B;IAeE,oBAAC,OAAO,cAAR,CAAsB,CAAA;IACtB,qBAAC,OAAO,SAAR;KAAgB,WAAU;eAA1B,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;gBAClB,oBAAC,aAAD;OAA0B;OAAmB;OAAa;MAAQ,CAAA;KACpD,CAAA,GAChB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;MAAiB,CAAA,EACjE,CAAA;MAEnB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,EACvC,CAAA;MAEpB,oBAAC,OAAO,WAAR;OAAkB,SAAA;iBAChB,oBAAC,oBAAD,CAAqB,CAAA;MACL,CAAA;KACG,EAAA,CAAA,CACT;;IAChB,oBAAC,QAAD;KAAQ,UAAU,iBAAiB;eACjC,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;MACc;MACK;MACL;MACD;MACK;MACH;MACP;MAEL;KACe,CAAA,EACD,CAAA;IACb,CAAA;GACG;;CACF,CAAA;AAEjB,CAAC;AAED,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,QAAQ,uBAAuB,CAAC"}

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

@@ -17,17 +17,29 @@ declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"b
             body: {
                 padding: "16";
             };
+            footer: {
+                paddingInline: "16";
+                paddingBlock: "8";
+            };
         };
         md: {
             body: {
                 paddingInline: "24";
                 paddingBlock: "16";
             };
+            footer: {
+                paddingInline: "24";
+                paddingBlock: "8";
+            };
         };
         lg: {
             body: {
                 padding: "24";
             };
+            footer: {
+                paddingInline: "24";
+                paddingBlock: "12";
+            };
         };
     };
 }>;

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

@@ -4,11 +4,17 @@ import { cardAnatomy } from "@chakra-ui/react/anatomy";
 var cardSlotRecipe = defineSlotRecipe({
 	className: "card",
 	slots: cardAnatomy.keys(),
-	base: { root: {
-		backgroundColor: "background/primary",
-		border: "1px solid",
-		borderRadius: "8"
-	} },
+	base: {
+		root: {
+			backgroundColor: "background/primary",
+			border: "1px solid",
+			borderRadius: "8"
+		},
+		footer: {
+			borderTop: "1px solid",
+			borderTopColor: "border/minimal"
+		}
+	},
 	variants: {
 		elevation: {
 			true: { root: {
@@ -18,12 +24,30 @@ var cardSlotRecipe = defineSlotRecipe({
 			false: { root: { borderColor: "border/regular" } }
 		},
 		paddingSize: {
-			sm: { body: { padding: "16" } },
-			md: { body: {
-				paddingInline: "24",
-				paddingBlock: "16"
-			} },
-			lg: { body: { padding: "24" } }
+			sm: {
+				body: { padding: "16" },
+				footer: {
+					paddingInline: "16",
+					paddingBlock: "8"
+				}
+			},
+			md: {
+				body: {
+					paddingInline: "24",
+					paddingBlock: "16"
+				},
+				footer: {
+					paddingInline: "24",
+					paddingBlock: "8"
+				}
+			},
+			lg: {
+				body: { padding: "24" },
+				footer: {
+					paddingInline: "24",
+					paddingBlock: "12"
+				}
+			}
 		}
 	},
 	defaultVariants: {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Card.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst cardSlotRecipe = defineSlotRecipe({\n  className: 'card',\n  slots: cardAnatomy.keys(),\n  base: {\n    root: {\n      backgroundColor: 'background/primary',\n      border: '1px solid',\n      borderRadius: '8',\n    },\n  },\n  variants: {\n    elevation: {\n      true: {\n        root: {\n          borderColor: 'border/minimal',\n          boxShadow: 'elevation/sm',\n        },\n      },\n      false: {\n        root: {\n          borderColor: 'border/regular',\n        },\n      },\n    },\n    paddingSize: {\n      sm: {\n        body: {\n          padding: '16',\n        },\n      },\n      md: {\n        body: {\n          paddingInline: '24',\n          paddingBlock: '16',\n        },\n      },\n      lg: {\n        body: {\n          padding: '24',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    elevation: true,\n    paddingSize: 'lg',\n  },\n});\n\nexport default cardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,YAAY,KAAK;CACxB,MAAM,EACJ,MAAM;EACJ,iBAAiB;EACjB,QAAQ;EACR,cAAc;CAChB,EACF;CACA,UAAU;EACR,WAAW;GACT,MAAM,EACJ,MAAM;IACJ,aAAa;IACb,WAAW;GACb,EACF;GACA,OAAO,EACL,MAAM,EACJ,aAAa,iBACf,EACF;EACF;EACA,aAAa;GACX,IAAI,EACF,MAAM,EACJ,SAAS,KACX,EACF;GACA,IAAI,EACF,MAAM;IACJ,eAAe;IACf,cAAc;GAChB,EACF;GACA,IAAI,EACF,MAAM,EACJ,SAAS,KACX,EACF;EACF;CACF;CACA,iBAAiB;EACf,WAAW;EACX,aAAa;CACf;AACF,CAAC"}
+{"version":3,"file":"Card.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Card.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst cardSlotRecipe = defineSlotRecipe({\n  className: 'card',\n  slots: cardAnatomy.keys(),\n  base: {\n    root: {\n      backgroundColor: 'background/primary',\n      border: '1px solid',\n      borderRadius: '8',\n    },\n    footer: {\n      borderTop: '1px solid',\n      borderTopColor: 'border/minimal',\n    },\n  },\n  variants: {\n    elevation: {\n      true: {\n        root: {\n          borderColor: 'border/minimal',\n          boxShadow: 'elevation/sm',\n        },\n      },\n      false: {\n        root: {\n          borderColor: 'border/regular',\n        },\n      },\n    },\n    paddingSize: {\n      sm: {\n        body: {\n          padding: '16',\n        },\n        footer: {\n          paddingInline: '16',\n          paddingBlock: '8',\n        },\n      },\n      md: {\n        body: {\n          paddingInline: '24',\n          paddingBlock: '16',\n        },\n        footer: {\n          paddingInline: '24',\n          paddingBlock: '8',\n        },\n      },\n      lg: {\n        body: {\n          padding: '24',\n        },\n        footer: {\n          paddingInline: '24',\n          paddingBlock: '12',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    elevation: true,\n    paddingSize: 'lg',\n  },\n});\n\nexport default cardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,YAAY,KAAK;CACxB,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,QAAQ;GACR,cAAc;EAChB;EACA,QAAQ;GACN,WAAW;GACX,gBAAgB;EAClB;CACF;CACA,UAAU;EACR,WAAW;GACT,MAAM,EACJ,MAAM;IACJ,aAAa;IACb,WAAW;GACb,EACF;GACA,OAAO,EACL,MAAM,EACJ,aAAa,iBACf,EACF;EACF;EACA,aAAa;GACX,IAAI;IACF,MAAM,EACJ,SAAS,KACX;IACA,QAAQ;KACN,eAAe;KACf,cAAc;IAChB;GACF;GACA,IAAI;IACF,MAAM;KACJ,eAAe;KACf,cAAc;IAChB;IACA,QAAQ;KACN,eAAe;KACf,cAAc;IAChB;GACF;GACA,IAAI;IACF,MAAM,EACJ,SAAS,KACX;IACA,QAAQ;KACN,eAAe;KACf,cAAc;IAChB;GACF;EACF;CACF;CACA,iBAAiB;EACf,WAAW;EACX,aAAa;CACf;AACF,CAAC"}

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

@@ -1,4 +1,4 @@
-declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "secdText" | "description", {
+declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "secdText" | "description", {
     size: {
         md: {
             header: {

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

@@ -4,9 +4,8 @@ import { cardAnatomy } from "@chakra-ui/react/anatomy";
 var expandableCardSlotRecipe = defineSlotRecipe({
 	className: "expandable-card",
 	slots: [
-		...cardAnatomy.keys(),
+		...cardAnatomy.omit("body", "footer").keys(),
 		"collapsible",
-		"footer",
 		"icon",
 		"secdText",
 		"suffix"
@@ -39,17 +38,6 @@ var expandableCardSlotRecipe = defineSlotRecipe({
 				animationDuration: "moderate"
 			}
 		},
-		body: {
-			borderTop: "1px solid",
-			borderColor: "border/minimal",
-			padding: "16"
-		},
-		footer: {
-			borderTop: "1px solid",
-			borderColor: "border/minimal",
-			paddingY: "8",
-			paddingX: "16"
-		},
 		icon: { color: "icon/secondary" },
 		secdText: { color: "text/secondary" },
 		suffix: {

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n  className: 'expandable-card',\n  slots: [...cardAnatomy.keys(), 'collapsible', 'footer', 'icon', 'secdText', 'suffix'],\n  base: {\n    root: {\n      backgroundColor: 'background/primary',\n      overflow: 'hidden',\n    },\n    header: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      cursor: 'pointer',\n      width: '100%',\n      color: 'text/primary',\n      '&:active': {\n        backgroundColor: 'background/active',\n      },\n      '&:hover:not(:active)': {\n        backgroundColor: 'background/hover',\n      },\n      _hover: {\n        color: 'text/primary',\n      },\n      _open: {\n        backgroundColor: 'background/secondary',\n      },\n    },\n    collapsible: {\n      overflow: 'hidden',\n      _open: {\n        animationName: 'expand-height, fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationName: 'collapse-height, fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    body: {\n      borderTop: '1px solid',\n      borderColor: 'border/minimal',\n      padding: '16',\n    },\n    footer: {\n      borderTop: '1px solid',\n      borderColor: 'border/minimal',\n      paddingY: '8',\n      paddingX: '16',\n    },\n    icon: {\n      color: 'icon/secondary',\n    },\n    secdText: {\n      color: 'text/secondary',\n    },\n    suffix: {\n      color: 'text/secondary',\n      mx: '16',\n      textStyle: 'body/md/regular',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n        secdText: { textStyle: 'body/sm/regular' },\n      },\n      lg: {\n        header: { textStyle: 'body/lg/regular', padding: '16' },\n        secdText: { textStyle: 'body/md/regular' },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK;EAAG;EAAe;EAAU;EAAQ;EAAY;CAAQ;CACpF,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,oBACnB;GACA,wBAAwB,EACtB,iBAAiB,mBACnB;GACA,QAAQ,EACN,OAAO,eACT;GACA,OAAO,EACL,iBAAiB,uBACnB;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,MAAM;GACJ,WAAW;GACX,aAAa;GACb,SAAS;EACX;EACA,QAAQ;GACN,WAAW;GACX,aAAa;GACb,UAAU;GACV,UAAU;EACZ;EACA,MAAM,EACJ,OAAO,iBACT;EACA,UAAU,EACR,OAAO,iBACT;EACA,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;GAAK;GACvE,UAAU,EAAE,WAAW,kBAAkB;EAC3C;EACA,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;GAAK;GACtD,UAAU,EAAE,WAAW,kBAAkB;EAC3C;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n  className: 'expandable-card',\n  slots: [...cardAnatomy.omit('body', 'footer').keys(), 'collapsible', 'icon', 'secdText', 'suffix'],\n  base: {\n    root: {\n      backgroundColor: 'background/primary',\n      overflow: 'hidden',\n    },\n    header: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      cursor: 'pointer',\n      width: '100%',\n      color: 'text/primary',\n      '&:active': {\n        backgroundColor: 'background/active',\n      },\n      '&:hover:not(:active)': {\n        backgroundColor: 'background/hover',\n      },\n      _hover: {\n        color: 'text/primary',\n      },\n      _open: {\n        backgroundColor: 'background/secondary',\n      },\n    },\n    collapsible: {\n      overflow: 'hidden',\n      _open: {\n        animationName: 'expand-height, fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationName: 'collapse-height, fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    icon: {\n      color: 'icon/secondary',\n    },\n    secdText: {\n      color: 'text/secondary',\n    },\n    suffix: {\n      color: 'text/secondary',\n      mx: '16',\n      textStyle: 'body/md/regular',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n        secdText: { textStyle: 'body/sm/regular' },\n      },\n      lg: {\n        header: { textStyle: 'body/lg/regular', padding: '16' },\n        secdText: { textStyle: 'body/md/regular' },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK,QAAQ,QAAQ,EAAE,KAAK;EAAG;EAAe;EAAQ;EAAY;CAAQ;CACjG,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,oBACnB;GACA,wBAAwB,EACtB,iBAAiB,mBACnB;GACA,QAAQ,EACN,OAAO,eACT;GACA,OAAO,EACL,iBAAiB,uBACnB;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,MAAM,EACJ,OAAO,iBACT;EACA,UAAU,EACR,OAAO,iBACT;EACA,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;GAAK;GACvE,UAAU,EAAE,WAAW,kBAAkB;EAC3C;EACA,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;GAAK;GACtD,UAAU,EAAE,WAAW,kBAAkB;EAC3C;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

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

@@ -239,17 +239,29 @@ declare const slotRecipes: {
                 body: {
                     padding: "16";
                 };
+                footer: {
+                    paddingInline: "16";
+                    paddingBlock: "8";
+                };
             };
             md: {
                 body: {
                     paddingInline: "24";
                     paddingBlock: "16";
                 };
+                footer: {
+                    paddingInline: "24";
+                    paddingBlock: "8";
+                };
             };
             lg: {
                 body: {
                     padding: "24";
                 };
+                footer: {
+                    paddingInline: "24";
+                    paddingBlock: "12";
+                };
             };
         };
     }>;
@@ -857,7 +869,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "secdText" | "description", {
+    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "secdText" | "description", {
         size: {
             md: {
                 header: {

package/dist/utilities/BitkitPortalContext.d.ts

@@ -0,0 +1,7 @@
+declare const BitkitPortalContext: import('react').Context<{
+    disablePortal: boolean;
+}>;
+export declare const usePortalContext: () => {
+    disablePortal: boolean;
+};
+export default BitkitPortalContext;

package/dist/utilities/BitkitPortalContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+//#region lib/utilities/BitkitPortalContext.ts
+var BitkitPortalContext = createContext({ disablePortal: false });
+//#endregion
+export { BitkitPortalContext as default };
+
+//# sourceMappingURL=BitkitPortalContext.js.map

package/dist/utilities/BitkitPortalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitPortalContext.js","names":[],"sources":["../../lib/utilities/BitkitPortalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nconst BitkitPortalContext = createContext({ disablePortal: false });\n\nexport const usePortalContext = () => useContext(BitkitPortalContext);\n\nexport default BitkitPortalContext;\n"],"mappings":";;AAEA,IAAM,sBAAsB,cAAc,EAAE,eAAe,MAAM,CAAC"}

package/package.json

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