@bitrise/bitkit-v2 0.3.426 → 0.3.428

package/dist/components/BitkitCollapsible/BitkitCollapsible.js

@@ -33,13 +33,13 @@ var useIsContentOverflowing = (collapsedHeight) => {
 	};
 };
 var BitkitCollapsible = forwardRef((props, ref) => {
-	const { children, closedLabel = "Show less", collapsedHeight = "48px", collapsedWidth, defaultOpen, disabled, hideMode, ids, label, labelProps, lazyMount, onExitComplete, onOpenChange, open, openLabel = "Show more", unmountOnExit, ...rest } = props;
+	const { children, closedLabel = "Show less", collapsedHeight = "48px", collapsedWidth, css, defaultOpen, disabled, hideMode, ids, label, labelProps, lazyMount, onExitComplete, onOpenChange, open, openLabel = "Show more", unmountOnExit, ...rest } = props;
 	const styles = useSlotRecipe({ key: "collapsible" })();
 	const { contentRef, isOverflowing } = useIsContentOverflowing(collapsedHeight);
 	const handleOpenChange = onOpenChange ? (details) => onOpenChange(details.open) : void 0;
 	if (!isOverflowing) return /* @__PURE__ */ jsxs(Box, {
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: [label && /* @__PURE__ */ jsx(BitkitLabel, {
 			...labelProps,
@@ -53,7 +53,7 @@ var BitkitCollapsible = forwardRef((props, ref) => {
 		ref,
 		collapsedHeight,
 		collapsedWidth,
-		css: styles.root,
+		css: [styles.root, css],
 		defaultOpen,
 		disabled,
 		hideMode,

package/dist/components/BitkitCollapsible/BitkitCollapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCollapsible.js","names":[],"sources":["../../../lib/components/BitkitCollapsible/BitkitCollapsible.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSafeLayoutEffect } from '@chakra-ui/react/hooks';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useRef, useState } from 'react';\n\n// TODO: Investigate using AssetSelectChevron instead of IconChevronDown/IconChevronUp\nimport { IconChevronDown, IconChevronUp } from '../../icons';\nimport BitkitLabel, { type BitkitLabelProps } from '../BitkitLabel/BitkitLabel';\n\ntype UncontrolledProps = {\n  defaultOpen?: boolean;\n  open?: never;\n  onOpenChange?: never;\n};\n\ntype ControlledProps = {\n  defaultOpen?: never;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n};\n\nexport type BitkitCollapsibleProps = Omit<\n  CollapsibleRootProps,\n  'collapsedHeight' | 'defaultOpen' | 'onOpenChange' | 'open'\n> & {\n  children: ReactNode;\n  closedLabel?: string;\n  collapsedHeight?: string;\n  label?: string;\n  labelProps?: Omit<BitkitLabelProps, 'children'>;\n  openLabel?: string;\n} & (UncontrolledProps | ControlledProps);\n\n// contentRef sits on an unclamped wrapper *inside* Collapsible.Content, not on Content itself: when\n// closed, Content's own box is pinned to collapsedHeight (max-height + overflow), so a ResizeObserver\n// on Content can't see content that grows without changing Content's own (clamped) box - e.g. an image\n// or async child rendering more after mount. scrollHeight still reports the wrapper's true height\n// either way, clamped or not, so the read doesn't change - only where we watch for changes does.\n// isOverflowing and collapsedHeight are the effect's only dependencies. isOverflowing: BitkitCollapsible\n// renders a different tree depending on it (see below), moving contentRef to a different DOM node each\n// time it flips, so the effect must re-attach then. children is deliberately not a dependency: the\n// wrapper being unclamped means the observer already sees every content-driven size change on its own.\nconst useIsContentOverflowing = (collapsedHeight: string) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [isOverflowing, setIsOverflowing] = useState(true);\n\n  useSafeLayoutEffect(() => {\n    const contentEl = contentRef.current;\n    const measureScope = contentEl?.parentElement;\n    if (!contentEl || !measureScope) {\n      return undefined;\n    }\n\n    // Appended as a sibling of contentEl (not document.body) so it inherits the same font-size and\n    // CSS custom properties contentEl actually sees, resolving em/var(...) heights correctly - not\n    // just px/rem, which don't depend on where in the tree they're resolved.\n    const probe = document.createElement('div');\n    probe.style.cssText = `position: absolute; visibility: hidden; pointer-events: none; height: ${collapsedHeight};`;\n    measureScope.appendChild(probe);\n    const collapsedHeightPx = probe.getBoundingClientRect().height;\n    measureScope.removeChild(probe);\n\n    const checkOverflow = () => setIsOverflowing(contentEl.scrollHeight > collapsedHeightPx);\n    checkOverflow();\n\n    if (typeof ResizeObserver === 'undefined') {\n      return undefined;\n    }\n\n    const resizeObserver = new ResizeObserver(checkOverflow);\n    resizeObserver.observe(contentEl);\n    return () => resizeObserver.disconnect();\n  }, [collapsedHeight, isOverflowing]);\n\n  return { contentRef, isOverflowing };\n};\n\nconst BitkitCollapsible = forwardRef<HTMLDivElement, BitkitCollapsibleProps>((props, ref) => {\n  const {\n    children,\n    closedLabel = 'Show less',\n    collapsedHeight = '48px',\n    collapsedWidth,\n    defaultOpen,\n    disabled,\n    hideMode,\n    ids,\n    label,\n    labelProps,\n    lazyMount,\n    onExitComplete,\n    onOpenChange,\n    open,\n    openLabel = 'Show more',\n    unmountOnExit,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'collapsible' });\n  const styles = recipe();\n\n  const { contentRef, isOverflowing } = useIsContentOverflowing(collapsedHeight);\n\n  const handleOpenChange = onOpenChange ? (details: { open: boolean }) => onOpenChange(details.open) : undefined;\n\n  // zag's closed-state styling (min/max-height clamp, the fade-out pseudo-element) is driven purely by\n  // Collapsible.Root defaulting to \"closed\" - it doesn't know or care whether collapsedHeight would\n  // ever actually clip anything. Passing collapsedHeight and hiding only the trigger still leaves\n  // content that fits pinned to that height and faded, so when it doesn't overflow we skip\n  // Collapsible.Root/Content entirely and render plain markup instead of fighting the closed-state\n  // styling with overrides. Only styles.root applies here - it carries the inherited color/textStyle,\n  // which is all a non-collapsing block needs; styles.content's overflow/position/fade rules are\n  // collapse-only and would clip content (a focus ring, an absolutely-positioned child) that isn't\n  // meant to be clipped. contentRef sits directly under styles.root rather than under a styles.content\n  // box, so measureScope (its parent) is styles.root in this branch and styles.content in the\n  // overflowing one below - both carry the same inherited font-size, since textStyle now lives on\n  // root and cascades down, so collapsedHeight's em/var(...) units resolve the same way in either\n  // branch. disabled/ids/collapsedWidth/onExitComplete/lazyMount/unmountOnExit/hideMode\n  // are zag/Ark machine props with no meaning on plain markup, so they're destructured out above and\n  // only forwarded to Collapsible.Root below - otherwise they'd reach the DOM as unknown attributes.\n  //\n  // isOverflowing starts true, so every mount (even of content that turns out to fit) renders through\n  // this Collapsible.Root tree first and flips to the plain tree below once measured - a real\n  // remount of children, since the two trees don't share a component type at that position. Same\n  // going the other way on a runtime resize. Accepted tradeoff: measuring requires a real layout\n  // pass, and we don't have the content's size before that first render.\n  if (!isOverflowing) {\n    return (\n      <Box ref={ref} css={styles.root} {...rest}>\n        {label && <BitkitLabel {...labelProps}>{label}</BitkitLabel>}\n        <Box ref={contentRef}>{children}</Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Collapsible.Root\n      ref={ref}\n      collapsedHeight={collapsedHeight}\n      collapsedWidth={collapsedWidth}\n      css={styles.root}\n      defaultOpen={defaultOpen}\n      disabled={disabled}\n      hideMode={hideMode}\n      ids={ids}\n      lazyMount={lazyMount}\n      onExitComplete={onExitComplete}\n      onOpenChange={handleOpenChange}\n      open={open}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    >\n      {label && <BitkitLabel {...labelProps}>{label}</BitkitLabel>}\n      <Collapsible.Content css={styles.content}>\n        <Box ref={contentRef}>{children}</Box>\n      </Collapsible.Content>\n      <Collapsible.Trigger css={styles.trigger}>\n        <Collapsible.Context>\n          {(api) => (\n            <>\n              {api.open ? closedLabel : openLabel}\n              {api.open ? <IconChevronUp size=\"16\" /> : <IconChevronDown size=\"16\" />}\n            </>\n          )}\n        </Collapsible.Context>\n      </Collapsible.Trigger>\n    </Collapsible.Root>\n  );\n});\n\nBitkitCollapsible.displayName = 'BitkitCollapsible';\n\nexport default BitkitCollapsible;\n"],"mappings":";;;;;;;;;;AA2CA,IAAM,2BAA2B,oBAA4B;CAC3D,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,eAAe,oBAAoB,SAAS,IAAI;CAEvD,0BAA0B;EACxB,MAAM,YAAY,WAAW;EAC7B,MAAM,eAAe,WAAW;EAChC,IAAI,CAAC,aAAa,CAAC,cACjB;EAMF,MAAM,QAAQ,SAAS,cAAc,KAAK;EAC1C,MAAM,MAAM,UAAU,yEAAyE,gBAAgB;EAC/G,aAAa,YAAY,KAAK;EAC9B,MAAM,oBAAoB,MAAM,sBAAsB,CAAC,CAAC;EACxD,aAAa,YAAY,KAAK;EAE9B,MAAM,sBAAsB,iBAAiB,UAAU,eAAe,iBAAiB;EACvF,cAAc;EAEd,IAAI,OAAO,mBAAmB,aAC5B;EAGF,MAAM,iBAAiB,IAAI,eAAe,aAAa;EACvD,eAAe,QAAQ,SAAS;EAChC,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,iBAAiB,aAAa,CAAC;CAEnC,OAAO;EAAE;EAAY;CAAc;AACrC;AAEA,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EACJ,UACA,cAAc,aACd,kBAAkB,QAClB,gBACA,aACA,UACA,UACA,KACA,OACA,YACA,WACA,gBACA,cACA,MACA,YAAY,aACZ,eACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,CAAA,CAAO;CAEtB,MAAM,EAAE,YAAY,kBAAkB,wBAAwB,eAAe;CAE7E,MAAM,mBAAmB,gBAAgB,YAA+B,aAAa,QAAQ,IAAI,IAAI,KAAA;CAuBrG,IAAI,CAAC,eACH,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACG,SAAS,oBAAC,aAAD;GAAa,GAAI;GAAa,UAAA;EAAmB,CAAA,GAC3D,oBAAC,KAAD;GAAK,KAAK;GAAa;EAAc,CAAA,CAClC;;CAIT,OACE,qBAAC,YAAY,MAAb;EACO;EACY;EACD;EAChB,KAAK,OAAO;EACC;EACH;EACA;EACL;EACM;EACK;EAChB,cAAc;EACR;EACS;EACf,GAAI;EAdN,UAAA;GAgBG,SAAS,oBAAC,aAAD;IAAa,GAAI;IAAa,UAAA;GAAmB,CAAA;GAC3D,oBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAC/B,UAAA,oBAAC,KAAD;KAAK,KAAK;KAAa;IAAc,CAAA;GAClB,CAAA;GACrB,oBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAC/B,UAAA,oBAAC,YAAY,SAAb,EAAA,WACI,QACA,qBAAA,YAAA,EAAA,UAAA,CACG,IAAI,OAAO,cAAc,WACzB,IAAI,OAAO,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,iBAAD,EAAiB,MAAK,KAAM,CAAA,CACtE,EAAA,CAAA,EAEe,CAAA;GACF,CAAA;EACL;;AAEtB,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"BitkitCollapsible.js","names":[],"sources":["../../../lib/components/BitkitCollapsible/BitkitCollapsible.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSafeLayoutEffect } from '@chakra-ui/react/hooks';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useRef, useState } from 'react';\n\n// TODO: Investigate using AssetSelectChevron instead of IconChevronDown/IconChevronUp\nimport { IconChevronDown, IconChevronUp } from '../../icons';\nimport BitkitLabel, { type BitkitLabelProps } from '../BitkitLabel/BitkitLabel';\n\ntype UncontrolledProps = {\n  defaultOpen?: boolean;\n  open?: never;\n  onOpenChange?: never;\n};\n\ntype ControlledProps = {\n  defaultOpen?: never;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n};\n\nexport type BitkitCollapsibleProps = Omit<\n  CollapsibleRootProps,\n  'collapsedHeight' | 'defaultOpen' | 'onOpenChange' | 'open'\n> & {\n  children: ReactNode;\n  closedLabel?: string;\n  collapsedHeight?: string;\n  label?: string;\n  labelProps?: Omit<BitkitLabelProps, 'children'>;\n  openLabel?: string;\n} & (UncontrolledProps | ControlledProps);\n\n// contentRef sits on an unclamped wrapper *inside* Collapsible.Content, not on Content itself: when\n// closed, Content's own box is pinned to collapsedHeight (max-height + overflow), so a ResizeObserver\n// on Content can't see content that grows without changing Content's own (clamped) box - e.g. an image\n// or async child rendering more after mount. scrollHeight still reports the wrapper's true height\n// either way, clamped or not, so the read doesn't change - only where we watch for changes does.\n// isOverflowing and collapsedHeight are the effect's only dependencies. isOverflowing: BitkitCollapsible\n// renders a different tree depending on it (see below), moving contentRef to a different DOM node each\n// time it flips, so the effect must re-attach then. children is deliberately not a dependency: the\n// wrapper being unclamped means the observer already sees every content-driven size change on its own.\nconst useIsContentOverflowing = (collapsedHeight: string) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [isOverflowing, setIsOverflowing] = useState(true);\n\n  useSafeLayoutEffect(() => {\n    const contentEl = contentRef.current;\n    const measureScope = contentEl?.parentElement;\n    if (!contentEl || !measureScope) {\n      return undefined;\n    }\n\n    // Appended as a sibling of contentEl (not document.body) so it inherits the same font-size and\n    // CSS custom properties contentEl actually sees, resolving em/var(...) heights correctly - not\n    // just px/rem, which don't depend on where in the tree they're resolved.\n    const probe = document.createElement('div');\n    probe.style.cssText = `position: absolute; visibility: hidden; pointer-events: none; height: ${collapsedHeight};`;\n    measureScope.appendChild(probe);\n    const collapsedHeightPx = probe.getBoundingClientRect().height;\n    measureScope.removeChild(probe);\n\n    const checkOverflow = () => setIsOverflowing(contentEl.scrollHeight > collapsedHeightPx);\n    checkOverflow();\n\n    if (typeof ResizeObserver === 'undefined') {\n      return undefined;\n    }\n\n    const resizeObserver = new ResizeObserver(checkOverflow);\n    resizeObserver.observe(contentEl);\n    return () => resizeObserver.disconnect();\n  }, [collapsedHeight, isOverflowing]);\n\n  return { contentRef, isOverflowing };\n};\n\nconst BitkitCollapsible = forwardRef<HTMLDivElement, BitkitCollapsibleProps>((props, ref) => {\n  const {\n    children,\n    closedLabel = 'Show less',\n    collapsedHeight = '48px',\n    collapsedWidth,\n    css,\n    defaultOpen,\n    disabled,\n    hideMode,\n    ids,\n    label,\n    labelProps,\n    lazyMount,\n    onExitComplete,\n    onOpenChange,\n    open,\n    openLabel = 'Show more',\n    unmountOnExit,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'collapsible' });\n  const styles = recipe();\n\n  const { contentRef, isOverflowing } = useIsContentOverflowing(collapsedHeight);\n\n  const handleOpenChange = onOpenChange ? (details: { open: boolean }) => onOpenChange(details.open) : undefined;\n\n  // zag's closed-state styling (min/max-height clamp, the fade-out pseudo-element) is driven purely by\n  // Collapsible.Root defaulting to \"closed\" - it doesn't know or care whether collapsedHeight would\n  // ever actually clip anything. Passing collapsedHeight and hiding only the trigger still leaves\n  // content that fits pinned to that height and faded, so when it doesn't overflow we skip\n  // Collapsible.Root/Content entirely and render plain markup instead of fighting the closed-state\n  // styling with overrides. Only styles.root applies here - it carries the inherited color/textStyle,\n  // which is all a non-collapsing block needs; styles.content's overflow/position/fade rules are\n  // collapse-only and would clip content (a focus ring, an absolutely-positioned child) that isn't\n  // meant to be clipped. contentRef sits directly under styles.root rather than under a styles.content\n  // box, so measureScope (its parent) is styles.root in this branch and styles.content in the\n  // overflowing one below - both carry the same inherited font-size, since textStyle now lives on\n  // root and cascades down, so collapsedHeight's em/var(...) units resolve the same way in either\n  // branch. disabled/ids/collapsedWidth/onExitComplete/lazyMount/unmountOnExit/hideMode\n  // are zag/Ark machine props with no meaning on plain markup, so they're destructured out above and\n  // only forwarded to Collapsible.Root below - otherwise they'd reach the DOM as unknown attributes.\n  //\n  // isOverflowing starts true, so every mount (even of content that turns out to fit) renders through\n  // this Collapsible.Root tree first and flips to the plain tree below once measured - a real\n  // remount of children, since the two trees don't share a component type at that position. Same\n  // going the other way on a runtime resize. Accepted tradeoff: measuring requires a real layout\n  // pass, and we don't have the content's size before that first render.\n  if (!isOverflowing) {\n    return (\n      <Box ref={ref} css={[styles.root, css]} {...rest}>\n        {label && <BitkitLabel {...labelProps}>{label}</BitkitLabel>}\n        <Box ref={contentRef}>{children}</Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Collapsible.Root\n      ref={ref}\n      collapsedHeight={collapsedHeight}\n      collapsedWidth={collapsedWidth}\n      css={[styles.root, css]}\n      defaultOpen={defaultOpen}\n      disabled={disabled}\n      hideMode={hideMode}\n      ids={ids}\n      lazyMount={lazyMount}\n      onExitComplete={onExitComplete}\n      onOpenChange={handleOpenChange}\n      open={open}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    >\n      {label && <BitkitLabel {...labelProps}>{label}</BitkitLabel>}\n      <Collapsible.Content css={styles.content}>\n        <Box ref={contentRef}>{children}</Box>\n      </Collapsible.Content>\n      <Collapsible.Trigger css={styles.trigger}>\n        <Collapsible.Context>\n          {(api) => (\n            <>\n              {api.open ? closedLabel : openLabel}\n              {api.open ? <IconChevronUp size=\"16\" /> : <IconChevronDown size=\"16\" />}\n            </>\n          )}\n        </Collapsible.Context>\n      </Collapsible.Trigger>\n    </Collapsible.Root>\n  );\n});\n\nBitkitCollapsible.displayName = 'BitkitCollapsible';\n\nexport default BitkitCollapsible;\n"],"mappings":";;;;;;;;;;AA2CA,IAAM,2BAA2B,oBAA4B;CAC3D,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,eAAe,oBAAoB,SAAS,IAAI;CAEvD,0BAA0B;EACxB,MAAM,YAAY,WAAW;EAC7B,MAAM,eAAe,WAAW;EAChC,IAAI,CAAC,aAAa,CAAC,cACjB;EAMF,MAAM,QAAQ,SAAS,cAAc,KAAK;EAC1C,MAAM,MAAM,UAAU,yEAAyE,gBAAgB;EAC/G,aAAa,YAAY,KAAK;EAC9B,MAAM,oBAAoB,MAAM,sBAAsB,CAAC,CAAC;EACxD,aAAa,YAAY,KAAK;EAE9B,MAAM,sBAAsB,iBAAiB,UAAU,eAAe,iBAAiB;EACvF,cAAc;EAEd,IAAI,OAAO,mBAAmB,aAC5B;EAGF,MAAM,iBAAiB,IAAI,eAAe,aAAa;EACvD,eAAe,QAAQ,SAAS;EAChC,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,iBAAiB,aAAa,CAAC;CAEnC,OAAO;EAAE;EAAY;CAAc;AACrC;AAEA,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EACJ,UACA,cAAc,aACd,kBAAkB,QAClB,gBACA,KACA,aACA,UACA,UACA,KACA,OACA,YACA,WACA,gBACA,cACA,MACA,YAAY,aACZ,eACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,CAAA,CAAO;CAEtB,MAAM,EAAE,YAAY,kBAAkB,wBAAwB,eAAe;CAE7E,MAAM,mBAAmB,gBAAgB,YAA+B,aAAa,QAAQ,IAAI,IAAI,KAAA;CAuBrG,IAAI,CAAC,eACH,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAA5C,UAAA,CACG,SAAS,oBAAC,aAAD;GAAa,GAAI;GAAa,UAAA;EAAmB,CAAA,GAC3D,oBAAC,KAAD;GAAK,KAAK;GAAa;EAAc,CAAA,CAClC;;CAIT,OACE,qBAAC,YAAY,MAAb;EACO;EACY;EACD;EAChB,KAAK,CAAC,OAAO,MAAM,GAAG;EACT;EACH;EACA;EACL;EACM;EACK;EAChB,cAAc;EACR;EACS;EACf,GAAI;EAdN,UAAA;GAgBG,SAAS,oBAAC,aAAD;IAAa,GAAI;IAAa,UAAA;GAAmB,CAAA;GAC3D,oBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAC/B,UAAA,oBAAC,KAAD;KAAK,KAAK;KAAa;IAAc,CAAA;GAClB,CAAA;GACrB,oBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAC/B,UAAA,oBAAC,YAAY,SAAb,EAAA,WACI,QACA,qBAAA,YAAA,EAAA,UAAA,CACG,IAAI,OAAO,cAAc,WACzB,IAAI,OAAO,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,iBAAD,EAAiB,MAAK,KAAM,CAAA,CACtE,EAAA,CAAA,EAEe,CAAA;GACF,CAAA;EACL;;AAEtB,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/BitkitDataWidget/BitkitDataWidget.js

@@ -7,11 +7,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 //#region lib/components/BitkitDataWidget/BitkitDataWidget.tsx
 var BitkitDataWidget = forwardRef((props, ref) => {
-	const { action, children, title, titleTooltip, ...rest } = props;
+	const { action, children, css, title, titleTooltip, ...rest } = props;
 	const styles = useSlotRecipe({ key: "dataWidget" })();
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: [
 			!!title && /* @__PURE__ */ jsxs(Box, {

package/dist/components/BitkitDataWidget/BitkitDataWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitDataWidget.js","names":[],"sources":["../../../lib/components/BitkitDataWidget/BitkitDataWidget.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitDataWidgetProps extends Omit<BoxProps, 'colorPalette' | 'title'> {\n  action?: ReactNode;\n  children: ReactNode;\n  title?: string;\n  titleTooltip?: string;\n}\n\nconst BitkitDataWidget = forwardRef<HTMLDivElement, BitkitDataWidgetProps>((props, ref) => {\n  const { action, children, title, titleTooltip, ...rest } = props;\n  const styles = useSlotRecipe({ key: 'dataWidget' })();\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      {!!title && (\n        <Box css={styles.title}>\n          <Text as=\"span\">{title}</Text>\n          {!!titleTooltip && (\n            <BitkitTooltip text={titleTooltip}>\n              <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n            </BitkitTooltip>\n          )}\n        </Box>\n      )}\n      <Box css={styles.items}>{children}</Box>\n      {!!action && <Box css={styles.action}>{action}</Box>}\n    </Box>\n  );\n});\n\nBitkitDataWidget.displayName = 'BitkitDataWidget';\n\nexport default BitkitDataWidget;\n"],"mappings":";;;;;;;;AAeA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,QAAQ,UAAU,OAAO,cAAc,GAAG,SAAS;CAC3D,MAAM,SAAS,cAAc,EAAE,KAAK,aAAa,CAAC,CAAC,CAAC;CAEpD,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA;GACG,CAAC,CAAC,SACD,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,MAAD;KAAM,IAAG;KAAQ,UAAA;IAAY,CAAA,GAC5B,CAAC,CAAC,gBACD,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEd;;GAEP,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAQ;GAAc,CAAA;GACtC,CAAC,CAAC,UAAU,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAS,UAAA;GAAY,CAAA;EAChD;;AAET,CAAC;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"BitkitDataWidget.js","names":[],"sources":["../../../lib/components/BitkitDataWidget/BitkitDataWidget.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitDataWidgetProps extends Omit<BoxProps, 'colorPalette' | 'title'> {\n  action?: ReactNode;\n  children: ReactNode;\n  title?: string;\n  titleTooltip?: string;\n}\n\nconst BitkitDataWidget = forwardRef<HTMLDivElement, BitkitDataWidgetProps>((props, ref) => {\n  const { action, children, css, title, titleTooltip, ...rest } = props;\n  const styles = useSlotRecipe({ key: 'dataWidget' })();\n\n  return (\n    <Box ref={ref} css={[styles.root, css]} {...rest}>\n      {!!title && (\n        <Box css={styles.title}>\n          <Text as=\"span\">{title}</Text>\n          {!!titleTooltip && (\n            <BitkitTooltip text={titleTooltip}>\n              <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n            </BitkitTooltip>\n          )}\n        </Box>\n      )}\n      <Box css={styles.items}>{children}</Box>\n      {!!action && <Box css={styles.action}>{action}</Box>}\n    </Box>\n  );\n});\n\nBitkitDataWidget.displayName = 'BitkitDataWidget';\n\nexport default BitkitDataWidget;\n"],"mappings":";;;;;;;;AAeA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,QAAQ,UAAU,KAAK,OAAO,cAAc,GAAG,SAAS;CAChE,MAAM,SAAS,cAAc,EAAE,KAAK,aAAa,CAAC,CAAC,CAAC;CAEpD,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAA5C,UAAA;GACG,CAAC,CAAC,SACD,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,MAAD;KAAM,IAAG;KAAQ,UAAA;IAAY,CAAA,GAC5B,CAAC,CAAC,gBACD,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEd;;GAEP,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAQ;GAAc,CAAA;GACtC,CAAC,CAAC,UAAU,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAS,UAAA;GAAY,CAAA;EAChD;;AAET,CAAC;AAED,iBAAiB,cAAc"}

package/dist/components/BitkitDraggableCard/BitkitDraggableCard.js

@@ -29,7 +29,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * ```
 */
 var BitkitDraggableCard = forwardRef((props, ref) => {
-	const { children, handleRef, isDragging = false, isDropTarget = false, ...rest } = props;
+	const { children, css, handleRef, isDragging = false, isDropTarget = false, ...rest } = props;
 	const isFullCardDrag = !handleRef;
 	const styles = useSlotRecipe({ key: "draggableCard" })({
 		isDragging,
@@ -38,7 +38,7 @@ var BitkitDraggableCard = forwardRef((props, ref) => {
 	});
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: [isFullCardDrag ? /* @__PURE__ */ jsx(chakra.div, {
 			css: styles.handle,

package/dist/components/BitkitDraggableCard/BitkitDraggableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitDraggableCard.js","names":[],"sources":["../../../lib/components/BitkitDraggableCard/BitkitDraggableCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, type Ref } from 'react';\n\nimport IconDragHandle from '../../icons/IconDragHandle';\n\n// ----- Props -----\n\nexport interface BitkitDraggableCardProps extends Omit<BoxProps, 'children'> {\n  children: ReactNode;\n  /** Ref for the drag handle element — pass useSortable().handleRef here. When provided, only the handle initiates drag. */\n  handleRef?: Ref<HTMLButtonElement>;\n  /** Whether this card is currently being dragged */\n  isDragging?: boolean;\n  /** Whether this card is a drop target placeholder */\n  isDropTarget?: boolean;\n}\n\n// ----- Component -----\n\n/**\n * A card with a drag handle, designed for use with `@dnd-kit/react`.\n *\n * The component is purely presentational — it does not depend on `@dnd-kit`.\n * Pass the refs and state flags from `useSortable` (or `useDraggable`) to wire it up.\n *\n * @example Full-card drag (default — the entire card is draggable)\n * ```tsx\n * const { ref, isDragSource, isDropTarget } = useSortable({ id, index });\n *\n * <BitkitDraggableCard ref={ref} isDragging={isDragSource} isDropTarget={isDropTarget}>\n *   {children}\n * </BitkitDraggableCard>\n * ```\n *\n * @example Handle-only drag (pass handleRef to restrict drag to the handle)\n * ```tsx\n * const { ref, handleRef, isDragSource, isDropTarget } = useSortable({ id, index });\n *\n * <BitkitDraggableCard ref={ref} handleRef={handleRef} isDragging={isDragSource} isDropTarget={isDropTarget}>\n *   {children}\n * </BitkitDraggableCard>\n * ```\n */\nconst BitkitDraggableCard = forwardRef<HTMLDivElement, BitkitDraggableCardProps>((props, ref) => {\n  const { children, handleRef, isDragging = false, isDropTarget = false, ...rest } = props;\n\n  const isFullCardDrag = !handleRef;\n  const recipe = useSlotRecipe({ key: 'draggableCard' });\n  const styles = recipe({ isDragging, isDropTarget, isFullCardDrag });\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      {isFullCardDrag ? (\n        <chakra.div css={styles.handle}>\n          <IconDragHandle size=\"16\" />\n        </chakra.div>\n      ) : (\n        <chakra.button ref={handleRef} type=\"button\" aria-label=\"Drag handle\" css={styles.handle}>\n          <IconDragHandle size=\"16\" />\n        </chakra.button>\n      )}\n      <Box css={styles.content}>{children}</Box>\n    </Box>\n  );\n});\n\nBitkitDraggableCard.displayName = 'BitkitDraggableCard';\n\nexport default BitkitDraggableCard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,WAAW,aAAa,OAAO,eAAe,OAAO,GAAG,SAAS;CAEnF,MAAM,iBAAiB,CAAC;CAExB,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CACrC,CAAA,CAAO;EAAE;EAAY;EAAc;CAAe,CAAC;CAElE,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACG,iBACC,oBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GACtB,UAAA,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;EACjB,CAAA,IAEZ,oBAAC,OAAO,QAAR;GAAe,KAAK;GAAW,MAAK;GAAS,cAAW;GAAc,KAAK,OAAO;GAChF,UAAA,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;EACd,CAAA,GAEjB,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU;EAAc,CAAA,CACtC;;AAET,CAAC;AAED,oBAAoB,cAAc"}
+{"version":3,"file":"BitkitDraggableCard.js","names":[],"sources":["../../../lib/components/BitkitDraggableCard/BitkitDraggableCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, type Ref } from 'react';\n\nimport IconDragHandle from '../../icons/IconDragHandle';\n\n// ----- Props -----\n\nexport interface BitkitDraggableCardProps extends Omit<BoxProps, 'children'> {\n  children: ReactNode;\n  /** Ref for the drag handle element — pass useSortable().handleRef here. When provided, only the handle initiates drag. */\n  handleRef?: Ref<HTMLButtonElement>;\n  /** Whether this card is currently being dragged */\n  isDragging?: boolean;\n  /** Whether this card is a drop target placeholder */\n  isDropTarget?: boolean;\n}\n\n// ----- Component -----\n\n/**\n * A card with a drag handle, designed for use with `@dnd-kit/react`.\n *\n * The component is purely presentational — it does not depend on `@dnd-kit`.\n * Pass the refs and state flags from `useSortable` (or `useDraggable`) to wire it up.\n *\n * @example Full-card drag (default — the entire card is draggable)\n * ```tsx\n * const { ref, isDragSource, isDropTarget } = useSortable({ id, index });\n *\n * <BitkitDraggableCard ref={ref} isDragging={isDragSource} isDropTarget={isDropTarget}>\n *   {children}\n * </BitkitDraggableCard>\n * ```\n *\n * @example Handle-only drag (pass handleRef to restrict drag to the handle)\n * ```tsx\n * const { ref, handleRef, isDragSource, isDropTarget } = useSortable({ id, index });\n *\n * <BitkitDraggableCard ref={ref} handleRef={handleRef} isDragging={isDragSource} isDropTarget={isDropTarget}>\n *   {children}\n * </BitkitDraggableCard>\n * ```\n */\nconst BitkitDraggableCard = forwardRef<HTMLDivElement, BitkitDraggableCardProps>((props, ref) => {\n  const { children, css, handleRef, isDragging = false, isDropTarget = false, ...rest } = props;\n\n  const isFullCardDrag = !handleRef;\n  const recipe = useSlotRecipe({ key: 'draggableCard' });\n  const styles = recipe({ isDragging, isDropTarget, isFullCardDrag });\n\n  return (\n    <Box ref={ref} css={[styles.root, css]} {...rest}>\n      {isFullCardDrag ? (\n        <chakra.div css={styles.handle}>\n          <IconDragHandle size=\"16\" />\n        </chakra.div>\n      ) : (\n        <chakra.button ref={handleRef} type=\"button\" aria-label=\"Drag handle\" css={styles.handle}>\n          <IconDragHandle size=\"16\" />\n        </chakra.button>\n      )}\n      <Box css={styles.content}>{children}</Box>\n    </Box>\n  );\n});\n\nBitkitDraggableCard.displayName = 'BitkitDraggableCard';\n\nexport default BitkitDraggableCard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,KAAK,WAAW,aAAa,OAAO,eAAe,OAAO,GAAG,SAAS;CAExF,MAAM,iBAAiB,CAAC;CAExB,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CACrC,CAAA,CAAO;EAAE;EAAY;EAAc;CAAe,CAAC;CAElE,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAA5C,UAAA,CACG,iBACC,oBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GACtB,UAAA,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;EACjB,CAAA,IAEZ,oBAAC,OAAO,QAAR;GAAe,KAAK;GAAW,MAAK;GAAS,cAAW;GAAc,KAAK,OAAO;GAChF,UAAA,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;EACd,CAAA,GAEjB,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU;EAAc,CAAA,CACtC;;AAET,CAAC;AAED,oBAAoB,cAAc"}

package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js

@@ -5,10 +5,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Separator } from "@chakra-ui/react/separator";
 //#region lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx
 var BitkitGroupHeading = forwardRef((props, ref) => {
-	const { badge, icon: Icon, label, ...rest } = props;
+	const { badge, css, icon: Icon, label, ...rest } = props;
 	const styles = useSlotRecipe({ key: "groupHeading" })();
 	return /* @__PURE__ */ jsxs(Box, {
-		css: styles.root,
+		css: [styles.root, css],
 		ref,
 		...rest,
 		children: [

package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n  badge?: ReactNode;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n  const { badge, icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'groupHeading' });\n  const styles = recipe();\n\n  return (\n    <Box css={styles.root} ref={ref} {...rest}>\n      <chakra.div css={styles.titleBlock}>\n        {Icon && <Icon css={styles.icon} size=\"16\" />}\n        <chakra.span css={styles.label}>{label}</chakra.span>\n      </chakra.div>\n      <Separator css={styles.separator} />\n      {badge}\n    </Box>\n  );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAaA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,OAAO,MAAM,MAAM,OAAO,GAAG,SAAS;CAG9C,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;EAArC,UAAA;GACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAQ,UAAA;IAAmB,CAAA,CAC1C;;GACZ,oBAAC,WAAD,EAAW,KAAK,OAAO,UAAY,CAAA;GAClC;EACE;;AAET,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n  badge?: ReactNode;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n  const { badge, css, icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'groupHeading' });\n  const styles = recipe();\n\n  return (\n    <Box css={[styles.root, css]} ref={ref} {...rest}>\n      <chakra.div css={styles.titleBlock}>\n        {Icon && <Icon css={styles.icon} size=\"16\" />}\n        <chakra.span css={styles.label}>{label}</chakra.span>\n      </chakra.div>\n      <Separator css={styles.separator} />\n      {badge}\n    </Box>\n  );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAaA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,OAAO,KAAK,MAAM,MAAM,OAAO,GAAG,SAAS;CAGnD,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA;GACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAQ,UAAA;IAAmB,CAAA,CAC1C;;GACZ,oBAAC,WAAD,EAAW,KAAK,OAAO,UAAY,CAAA;GAClC;EACE;;AAET,CAAC;AAED,mBAAmB,cAAc"}

package/dist/components/BitkitInlineLoading/BitkitInlineLoading.js

@@ -26,7 +26,7 @@ var SPINNER_SIZE_MAP = {
 	}
 };
 var BitkitInlineLoading = forwardRef((props, ref) => {
-	const { label, size = "md", status = "loading", ...rest } = props;
+	const { css, label, size = "md", status = "loading", ...rest } = props;
 	const styles = useSlotRecipe({ key: "inlineLoading" })({
 		size,
 		status
@@ -34,7 +34,7 @@ var BitkitInlineLoading = forwardRef((props, ref) => {
 	const iconSize = ICON_SIZE_MAP[size];
 	const { margin: spinnerMargin, size: spinnerSize } = SPINNER_SIZE_MAP[size];
 	return /* @__PURE__ */ jsxs(Box, {
-		css: styles.root,
+		css: [styles.root, css],
 		ref,
 		...rest,
 		children: [

package/dist/components/BitkitInlineLoading/BitkitInlineLoading.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitInlineLoading.js","names":[],"sources":["../../../lib/components/BitkitInlineLoading/BitkitInlineLoading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport IconCheckCircleFilled from '../../icons/IconCheckCircleFilled';\nimport IconCrossCircleFilled from '../../icons/IconCrossCircleFilled';\n\nexport interface BitkitInlineLoadingProps extends Omit<BoxProps, 'size'> {\n  label?: string;\n  size?: 'lg' | 'md' | 'sm';\n  status?: 'error' | 'loading' | 'success';\n}\n\nconst ICON_SIZE_MAP = {\n  lg: '24',\n  md: '16',\n  sm: '16',\n} as const;\n\n// Icons have built-in padding: 2px for 24px icons, 1px for 16px icons.\n// The spinner uses the inner visual size + matching margin to occupy the same bounding box.\nconst SPINNER_SIZE_MAP = {\n  lg: { margin: '2', size: '20' },\n  md: { margin: '1', size: '14px' },\n  sm: { margin: '1', size: '14px' },\n} as const;\n\nconst BitkitInlineLoading = forwardRef<HTMLDivElement, BitkitInlineLoadingProps>((props, ref) => {\n  const { label, size = 'md', status = 'loading', ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'inlineLoading' });\n  const styles = recipe({ size, status });\n\n  const iconSize = ICON_SIZE_MAP[size];\n  const { margin: spinnerMargin, size: spinnerSize } = SPINNER_SIZE_MAP[size];\n\n  return (\n    <Box css={styles.root} ref={ref} {...rest}>\n      {status === 'loading' && (\n        <Spinner variant=\"purple\" width={spinnerSize} height={spinnerSize} margin={spinnerMargin} />\n      )}\n      {status === 'success' && <IconCheckCircleFilled color=\"icon/positive\" size={iconSize} />}\n      {status === 'error' && <IconCrossCircleFilled color=\"icon/negative\" size={iconSize} />}\n      {label && <chakra.span css={styles.label}>{label}</chakra.span>}\n    </Box>\n  );\n});\n\nBitkitInlineLoading.displayName = 'BitkitInlineLoading';\n\nexport default BitkitInlineLoading;\n"],"mappings":";;;;;;;;AAcA,IAAM,gBAAgB;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,IAAM,mBAAmB;CACvB,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAK;CAC9B,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAO;CAChC,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAO;AAClC;AAEA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,OAAO,OAAO,MAAM,SAAS,WAAW,GAAG,SAAS;CAG5D,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CACrC,CAAA,CAAO;EAAE;EAAM;CAAO,CAAC;CAEtC,MAAM,WAAW,cAAc;CAC/B,MAAM,EAAE,QAAQ,eAAe,MAAM,gBAAgB,iBAAiB;CAEtE,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;EAArC,UAAA;GACG,WAAW,aACV,oBAAC,SAAD;IAAS,SAAQ;IAAS,OAAO;IAAa,QAAQ;IAAa,QAAQ;GAAgB,CAAA;GAE5F,WAAW,aAAa,oBAAC,uBAAD;IAAuB,OAAM;IAAgB,MAAM;GAAW,CAAA;GACtF,WAAW,WAAW,oBAAC,uBAAD;IAAuB,OAAM;IAAgB,MAAM;GAAW,CAAA;GACpF,SAAS,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAQ,UAAA;GAAmB,CAAA;EAC3D;;AAET,CAAC;AAED,oBAAoB,cAAc"}
+{"version":3,"file":"BitkitInlineLoading.js","names":[],"sources":["../../../lib/components/BitkitInlineLoading/BitkitInlineLoading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport IconCheckCircleFilled from '../../icons/IconCheckCircleFilled';\nimport IconCrossCircleFilled from '../../icons/IconCrossCircleFilled';\n\nexport interface BitkitInlineLoadingProps extends Omit<BoxProps, 'size'> {\n  label?: string;\n  size?: 'lg' | 'md' | 'sm';\n  status?: 'error' | 'loading' | 'success';\n}\n\nconst ICON_SIZE_MAP = {\n  lg: '24',\n  md: '16',\n  sm: '16',\n} as const;\n\n// Icons have built-in padding: 2px for 24px icons, 1px for 16px icons.\n// The spinner uses the inner visual size + matching margin to occupy the same bounding box.\nconst SPINNER_SIZE_MAP = {\n  lg: { margin: '2', size: '20' },\n  md: { margin: '1', size: '14px' },\n  sm: { margin: '1', size: '14px' },\n} as const;\n\nconst BitkitInlineLoading = forwardRef<HTMLDivElement, BitkitInlineLoadingProps>((props, ref) => {\n  const { css, label, size = 'md', status = 'loading', ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'inlineLoading' });\n  const styles = recipe({ size, status });\n\n  const iconSize = ICON_SIZE_MAP[size];\n  const { margin: spinnerMargin, size: spinnerSize } = SPINNER_SIZE_MAP[size];\n\n  return (\n    <Box css={[styles.root, css]} ref={ref} {...rest}>\n      {status === 'loading' && (\n        <Spinner variant=\"purple\" width={spinnerSize} height={spinnerSize} margin={spinnerMargin} />\n      )}\n      {status === 'success' && <IconCheckCircleFilled color=\"icon/positive\" size={iconSize} />}\n      {status === 'error' && <IconCrossCircleFilled color=\"icon/negative\" size={iconSize} />}\n      {label && <chakra.span css={styles.label}>{label}</chakra.span>}\n    </Box>\n  );\n});\n\nBitkitInlineLoading.displayName = 'BitkitInlineLoading';\n\nexport default BitkitInlineLoading;\n"],"mappings":";;;;;;;;AAcA,IAAM,gBAAgB;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,IAAM,mBAAmB;CACvB,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAK;CAC9B,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAO;CAChC,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAO;AAClC;AAEA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,KAAK,OAAO,OAAO,MAAM,SAAS,WAAW,GAAG,SAAS;CAGjE,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CACrC,CAAA,CAAO;EAAE;EAAM;CAAO,CAAC;CAEtC,MAAM,WAAW,cAAc;CAC/B,MAAM,EAAE,QAAQ,eAAe,MAAM,gBAAgB,iBAAiB;CAEtE,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA;GACG,WAAW,aACV,oBAAC,SAAD;IAAS,SAAQ;IAAS,OAAO;IAAa,QAAQ;IAAa,QAAQ;GAAgB,CAAA;GAE5F,WAAW,aAAa,oBAAC,uBAAD;IAAuB,OAAM;IAAgB,MAAM;GAAW,CAAA;GACtF,WAAW,WAAW,oBAAC,uBAAD;IAAuB,OAAM;IAAgB,MAAM;GAAW,CAAA;GACpF,SAAS,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAQ,UAAA;GAAmB,CAAA;EAC3D;;AAET,CAAC;AAED,oBAAoB,cAAc"}

package/dist/components/BitkitMarkdown/BitkitMarkdown.js

@@ -81,7 +81,7 @@ var createComponents = (size, blockquoteStyles) => {
 	};
 };
 var BitkitMarkdown = forwardRef((props, ref) => {
-	const { children, components, rehypePlugins, size = "md", ...rest } = props;
+	const { children, components, css, rehypePlugins, size = "md", ...rest } = props;
 	const styles = useSlotRecipe({ key: "markdown" })({ size });
 	const mergedComponents = {
 		...createComponents(size, styles.blockquote),
@@ -90,7 +90,7 @@ var BitkitMarkdown = forwardRef((props, ref) => {
 	return /* @__PURE__ */ jsx(Stack, {
 		ref,
 		gap: "16",
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: /* @__PURE__ */ jsx(Markdown, {
 			components: mergedComponents,

package/dist/components/BitkitMarkdown/BitkitMarkdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef, isValidElement, type ReactNode } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitHeading from '../BitkitHeading/BitkitHeading';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Helpers -----\n\nconst getTextContent = (node: ReactNode): string => {\n  if (typeof node === 'string') return node;\n  if (typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getTextContent).join('');\n  if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n  return '';\n};\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n  const codeSize = size === 'lg' ? 'lg' : 'md';\n  const listSize = size === 'lg' ? 'lg' : 'md';\n\n  return {\n    a: ({ node: _, ...props }) => (\n      <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n    ),\n    blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n    // Not String(children): a rehypePlugin such as a syntax highlighter turns the text into\n    // elements, and String() on those yields \"[object Object]\".\n    code: ({ node: _, children }) => (\n      <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n        {getTextContent(children)}\n      </BitkitCodeSnippet>\n    ),\n    h1: ({ node: _, ...props }) => <BitkitHeading as=\"h1\" {...props} />,\n    h2: ({ node: _, ...props }) => <BitkitHeading as=\"h2\" {...props} />,\n    h3: ({ node: _, ...props }) => <BitkitHeading as=\"h3\" {...props} />,\n    h4: ({ node: _, ...props }) => <BitkitHeading as=\"h4\" {...props} />,\n    h5: ({ node: _, ...props }) => <BitkitHeading as=\"h5\" {...props} />,\n    h6: ({ node: _, ...props }) => <BitkitHeading as=\"h6\" {...props} />,\n    hr: () => <Separator />,\n    li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n    ol: ({ node: _, ...props }) => (\n      <BitkitList size={listSize} variant=\"ordered\">\n        {props.children}\n      </BitkitList>\n    ),\n    p: ({ node: _, ...props }) => <Text {...props} />,\n    // The parser closes a code block with a newline, which the `multi` variant renders as an\n    // empty last line because its content is `white-space: pre-wrap`.\n    pre: ({ node: _, children }) => (\n      <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n        {getTextContent(children).replace(/\\n$/, '')}\n      </BitkitCodeSnippet>\n    ),\n    ul: ({ node: _, ...props }) => (\n      <BitkitList size={listSize} variant=\"unordered\">\n        {props.children}\n      </BitkitList>\n    ),\n  };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n  children: string;\n  components?: Components | null;\n  rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n  const { children, components, rehypePlugins, size = 'md', ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'markdown' });\n  const styles = recipe({ size });\n\n  const defaultComponents = createComponents(size, styles.blockquote);\n  const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n  return (\n    <Stack ref={ref} gap=\"16\" css={styles.root} {...rest}>\n      <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n        {children}\n      </Markdown>\n    </Stack>\n  );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,kBAAkB,SAA4B;CAClD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE;CAChE,IAAI,eAAe,IAAI,GAAG,OAAO,eAAgB,KAAK,MAAmC,QAAQ;CACjG,OAAO;AACT;AAIA,IAAM,oBAAoB,MAA0B,qBAAoD;CACtG,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO;EACL,IAAI,EAAE,MAAM,GAAG,GAAG,YAChB,oBAAC,YAAD;GAAY,cAAa;GAAS,KAAI;GAAsB,QAAO;GAAS,GAAI;EAAQ,CAAA;EAE1F,aAAa,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,OAAO,YAAR;GAAmB,KAAK;GAAkB,GAAI;EAAQ,CAAA;EAG7F,OAAO,EAAE,MAAM,GAAG,eAChB,oBAAC,mBAAD;GAAmB,SAAQ;GAAS,MAAM;GACvC,UAAA,eAAe,QAAQ;EACP,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,mBAAW,MAAZ,EAAA,UAAkB,MAAM,SAA0B,CAAA;EACjF,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;GACjC,UAAA,MAAM;EACG,CAAA;EAEd,IAAI,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;EAGhD,MAAM,EAAE,MAAM,GAAG,eACf,oBAAC,mBAAD;GAAmB,SAAQ;GAAQ,MAAM;GACtC,UAAA,eAAe,QAAQ,CAAC,CAAC,QAAQ,OAAO,EAAE;EAC1B,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;GACjC,UAAA,MAAM;EACG,CAAA;CAEhB;AACF;AAWA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,UAAU,YAAY,eAAe,OAAO,MAAM,GAAG,SAAS;CAGtE,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,KAAK,CAAC;CAG9B,MAAM,mBAAmB;EAAE,GADD,iBAAiB,MAAM,OAAO,UAC1B;EAAmB,GAAI,cAAc,CAAC;CAAG;CAEvE,OACE,oBAAC,OAAD;EAAY;EAAK,KAAI;EAAK,KAAK,OAAO;EAAM,GAAI;EAC9C,UAAA,oBAAC,UAAD;GAAU,YAAY;GAAiC;GACpD;EACO,CAAA;CACL,CAAA;AAEX,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef, isValidElement, type ReactNode } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitHeading from '../BitkitHeading/BitkitHeading';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Helpers -----\n\nconst getTextContent = (node: ReactNode): string => {\n  if (typeof node === 'string') return node;\n  if (typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getTextContent).join('');\n  if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n  return '';\n};\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n  const codeSize = size === 'lg' ? 'lg' : 'md';\n  const listSize = size === 'lg' ? 'lg' : 'md';\n\n  return {\n    a: ({ node: _, ...props }) => (\n      <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n    ),\n    blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n    // Not String(children): a rehypePlugin such as a syntax highlighter turns the text into\n    // elements, and String() on those yields \"[object Object]\".\n    code: ({ node: _, children }) => (\n      <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n        {getTextContent(children)}\n      </BitkitCodeSnippet>\n    ),\n    h1: ({ node: _, ...props }) => <BitkitHeading as=\"h1\" {...props} />,\n    h2: ({ node: _, ...props }) => <BitkitHeading as=\"h2\" {...props} />,\n    h3: ({ node: _, ...props }) => <BitkitHeading as=\"h3\" {...props} />,\n    h4: ({ node: _, ...props }) => <BitkitHeading as=\"h4\" {...props} />,\n    h5: ({ node: _, ...props }) => <BitkitHeading as=\"h5\" {...props} />,\n    h6: ({ node: _, ...props }) => <BitkitHeading as=\"h6\" {...props} />,\n    hr: () => <Separator />,\n    li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n    ol: ({ node: _, ...props }) => (\n      <BitkitList size={listSize} variant=\"ordered\">\n        {props.children}\n      </BitkitList>\n    ),\n    p: ({ node: _, ...props }) => <Text {...props} />,\n    // The parser closes a code block with a newline, which the `multi` variant renders as an\n    // empty last line because its content is `white-space: pre-wrap`.\n    pre: ({ node: _, children }) => (\n      <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n        {getTextContent(children).replace(/\\n$/, '')}\n      </BitkitCodeSnippet>\n    ),\n    ul: ({ node: _, ...props }) => (\n      <BitkitList size={listSize} variant=\"unordered\">\n        {props.children}\n      </BitkitList>\n    ),\n  };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n  children: string;\n  components?: Components | null;\n  rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n  const { children, components, css, rehypePlugins, size = 'md', ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'markdown' });\n  const styles = recipe({ size });\n\n  const defaultComponents = createComponents(size, styles.blockquote);\n  const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n  return (\n    <Stack ref={ref} gap=\"16\" css={[styles.root, css]} {...rest}>\n      <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n        {children}\n      </Markdown>\n    </Stack>\n  );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,kBAAkB,SAA4B;CAClD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE;CAChE,IAAI,eAAe,IAAI,GAAG,OAAO,eAAgB,KAAK,MAAmC,QAAQ;CACjG,OAAO;AACT;AAIA,IAAM,oBAAoB,MAA0B,qBAAoD;CACtG,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO;EACL,IAAI,EAAE,MAAM,GAAG,GAAG,YAChB,oBAAC,YAAD;GAAY,cAAa;GAAS,KAAI;GAAsB,QAAO;GAAS,GAAI;EAAQ,CAAA;EAE1F,aAAa,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,OAAO,YAAR;GAAmB,KAAK;GAAkB,GAAI;EAAQ,CAAA;EAG7F,OAAO,EAAE,MAAM,GAAG,eAChB,oBAAC,mBAAD;GAAmB,SAAQ;GAAS,MAAM;GACvC,UAAA,eAAe,QAAQ;EACP,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,mBAAW,MAAZ,EAAA,UAAkB,MAAM,SAA0B,CAAA;EACjF,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;GACjC,UAAA,MAAM;EACG,CAAA;EAEd,IAAI,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;EAGhD,MAAM,EAAE,MAAM,GAAG,eACf,oBAAC,mBAAD;GAAmB,SAAQ;GAAQ,MAAM;GACtC,UAAA,eAAe,QAAQ,CAAC,CAAC,QAAQ,OAAO,EAAE;EAC1B,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;GACjC,UAAA,MAAM;EACG,CAAA;CAEhB;AACF;AAWA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,UAAU,YAAY,KAAK,eAAe,OAAO,MAAM,GAAG,SAAS;CAG3E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,KAAK,CAAC;CAG9B,MAAM,mBAAmB;EAAE,GADD,iBAAiB,MAAM,OAAO,UAC1B;EAAmB,GAAI,cAAc,CAAC;CAAG;CAEvE,OACE,oBAAC,OAAD;EAAY;EAAK,KAAI;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EACrD,UAAA,oBAAC,UAAD;GAAU,YAAY;GAAiC;GACpD;EACO,CAAA;CACL,CAAA;AAEX,CAAC;AAED,eAAe,cAAc"}

package/dist/components/BitkitMarkdownCard/BitkitMarkdownCard.js

@@ -21,12 +21,12 @@ var STATUS_ICONS = {
 	warning: /* @__PURE__ */ jsx(IconWarning, { size: "24" })
 };
 var BitkitMarkdownCard = forwardRef((props, ref) => {
-	const { actions, children, collapsedHeight = "200px", defaultOpen, onOpenChange, open, size = "md", status = "info", ...rest } = props;
+	const { actions, children, collapsedHeight = "200px", css, defaultOpen, onOpenChange, open, size = "md", status = "info", ...rest } = props;
 	const styles = useSlotRecipe({ key: "markdownCard" })({ status });
 	const handleOpenChange = onOpenChange ? (details) => onOpenChange(details.open) : void 0;
 	return /* @__PURE__ */ jsx(Card.Root, {
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			align: "stretch",

package/dist/components/BitkitMarkdownCard/BitkitMarkdownCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMarkdownCard.js","names":[],"sources":["../../../lib/components/BitkitMarkdownCard/BitkitMarkdownCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type JSX, type ReactNode } from 'react';\n\nimport {\n  IconCheck,\n  IconChevronDown,\n  IconChevronUp,\n  IconErrorCircleFilled,\n  IconInfoCircle,\n  IconWarning,\n} from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitMarkdown from '../BitkitMarkdown/BitkitMarkdown';\n\n// ----- Status config -----\n\ntype Status = 'critical' | 'info' | 'success' | 'warning';\n\nconst STATUS_ICONS: Record<Status, JSX.Element> = {\n  critical: <IconErrorCircleFilled size=\"24\" />,\n  info: <IconInfoCircle size=\"24\" />,\n  success: <IconCheck size=\"24\" />,\n  warning: <IconWarning size=\"24\" />,\n};\n\n// ----- Props -----\n\ntype UncontrolledProps = {\n  defaultOpen?: boolean;\n  onOpenChange?: never;\n  open?: never;\n};\n\ntype ControlledProps = {\n  defaultOpen?: never;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n};\n\nexport type BitkitMarkdownCardProps = Omit<BoxProps, 'children'> & {\n  actions?: ReactNode;\n  children: string;\n  collapsedHeight?: string;\n  size?: 'sm' | 'md' | 'lg';\n  status?: Status;\n} & (UncontrolledProps | ControlledProps);\n\n// ----- Component -----\n\nconst BitkitMarkdownCard = forwardRef<HTMLDivElement, BitkitMarkdownCardProps>((props, ref) => {\n  const {\n    actions,\n    children,\n    collapsedHeight = '200px',\n    defaultOpen,\n    onOpenChange,\n    open,\n    size = 'md',\n    status = 'info',\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'markdownCard' });\n  const styles = recipe({ status });\n\n  const handleOpenChange = onOpenChange ? (details: { open: boolean }) => onOpenChange(details.open) : undefined;\n\n  return (\n    <Card.Root ref={ref} css={styles.root} {...rest}>\n      <HStack align=\"stretch\" gap=\"0\">\n        <Box css={styles.iconBar}>{STATUS_ICONS[status]}</Box>\n        <Box css={styles.content}>\n          <Collapsible.Root\n            open={open}\n            defaultOpen={defaultOpen}\n            collapsedHeight={collapsedHeight}\n            onOpenChange={handleOpenChange}\n          >\n            <Collapsible.Content>\n              <BitkitMarkdown size={size}>{children}</BitkitMarkdown>\n            </Collapsible.Content>\n            <Collapsible.Context>\n              {(api) => (\n                <>\n                  {!api.open && <Box css={styles.gradient} />}\n                  <HStack gap=\"16\" css={styles.footerButtons}>\n                    {actions}\n                    <BitkitButton\n                      {...api.getTriggerProps()}\n                      size=\"sm\"\n                      suffixIcon={api.open ? IconChevronUp : IconChevronDown}\n                      variant=\"secondary\"\n                    >\n                      {api.open ? 'Show less' : 'Show more'}\n                    </BitkitButton>\n                  </HStack>\n                </>\n              )}\n            </Collapsible.Context>\n          </Collapsible.Root>\n        </Box>\n      </HStack>\n    </Card.Root>\n  );\n});\n\nBitkitMarkdownCard.displayName = 'BitkitMarkdownCard';\n\nexport default BitkitMarkdownCard;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,eAA4C;CAChD,UAAU,oBAAC,uBAAD,EAAuB,MAAK,KAAM,CAAA;CAC5C,MAAM,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;CACjC,SAAS,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CAC/B,SAAS,oBAAC,aAAD,EAAa,MAAK,KAAM,CAAA;AACnC;AA0BA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EACJ,SACA,UACA,kBAAkB,SAClB,aACA,cACA,MACA,OAAO,MACP,SAAS,QACT,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,mBAAmB,gBAAgB,YAA+B,aAAa,QAAQ,IAAI,IAAI,KAAA;CAErG,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,OAAO;EAAM,GAAI;EACzC,UAAA,qBAAC,QAAD;GAAQ,OAAM;GAAU,KAAI;GAA5B,UAAA,CACE,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAU,UAAA,aAAa;GAAa,CAAA,GACrD,oBAAC,KAAD;IAAK,KAAK,OAAO;IACf,UAAA,qBAAC,YAAY,MAAb;KACQ;KACO;KACI;KACjB,cAAc;KAJhB,UAAA,CAME,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,gBAAD;MAAsB;MAAO;KAAyB,CAAA,EACnC,CAAA,GACrB,oBAAC,YAAY,SAAb,EAAA,WACI,QACA,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,IAAI,QAAQ,oBAAC,KAAD,EAAK,KAAK,OAAO,SAAW,CAAA,GAC1C,qBAAC,QAAD;MAAQ,KAAI;MAAK,KAAK,OAAO;MAA7B,UAAA,CACG,SACD,oBAAC,cAAD;OACE,GAAI,IAAI,gBAAgB;OACxB,MAAK;OACL,YAAY,IAAI,OAAO,gBAAgB;OACvC,SAAQ;OAEP,UAAA,IAAI,OAAO,cAAc;MACd,CAAA,CACR;KACR,CAAA,CAAA,EAAA,CAAA,EAEe,CAAA,CACL;;GACf,CAAA,CACC;;CACC,CAAA;AAEf,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitMarkdownCard.js","names":[],"sources":["../../../lib/components/BitkitMarkdownCard/BitkitMarkdownCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type JSX, type ReactNode } from 'react';\n\nimport {\n  IconCheck,\n  IconChevronDown,\n  IconChevronUp,\n  IconErrorCircleFilled,\n  IconInfoCircle,\n  IconWarning,\n} from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitMarkdown from '../BitkitMarkdown/BitkitMarkdown';\n\n// ----- Status config -----\n\ntype Status = 'critical' | 'info' | 'success' | 'warning';\n\nconst STATUS_ICONS: Record<Status, JSX.Element> = {\n  critical: <IconErrorCircleFilled size=\"24\" />,\n  info: <IconInfoCircle size=\"24\" />,\n  success: <IconCheck size=\"24\" />,\n  warning: <IconWarning size=\"24\" />,\n};\n\n// ----- Props -----\n\ntype UncontrolledProps = {\n  defaultOpen?: boolean;\n  onOpenChange?: never;\n  open?: never;\n};\n\ntype ControlledProps = {\n  defaultOpen?: never;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n};\n\nexport type BitkitMarkdownCardProps = Omit<BoxProps, 'children'> & {\n  actions?: ReactNode;\n  children: string;\n  collapsedHeight?: string;\n  size?: 'sm' | 'md' | 'lg';\n  status?: Status;\n} & (UncontrolledProps | ControlledProps);\n\n// ----- Component -----\n\nconst BitkitMarkdownCard = forwardRef<HTMLDivElement, BitkitMarkdownCardProps>((props, ref) => {\n  const {\n    actions,\n    children,\n    collapsedHeight = '200px',\n    css,\n    defaultOpen,\n    onOpenChange,\n    open,\n    size = 'md',\n    status = 'info',\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'markdownCard' });\n  const styles = recipe({ status });\n\n  const handleOpenChange = onOpenChange ? (details: { open: boolean }) => onOpenChange(details.open) : undefined;\n\n  return (\n    <Card.Root ref={ref} css={[styles.root, css]} {...rest}>\n      <HStack align=\"stretch\" gap=\"0\">\n        <Box css={styles.iconBar}>{STATUS_ICONS[status]}</Box>\n        <Box css={styles.content}>\n          <Collapsible.Root\n            open={open}\n            defaultOpen={defaultOpen}\n            collapsedHeight={collapsedHeight}\n            onOpenChange={handleOpenChange}\n          >\n            <Collapsible.Content>\n              <BitkitMarkdown size={size}>{children}</BitkitMarkdown>\n            </Collapsible.Content>\n            <Collapsible.Context>\n              {(api) => (\n                <>\n                  {!api.open && <Box css={styles.gradient} />}\n                  <HStack gap=\"16\" css={styles.footerButtons}>\n                    {actions}\n                    <BitkitButton\n                      {...api.getTriggerProps()}\n                      size=\"sm\"\n                      suffixIcon={api.open ? IconChevronUp : IconChevronDown}\n                      variant=\"secondary\"\n                    >\n                      {api.open ? 'Show less' : 'Show more'}\n                    </BitkitButton>\n                  </HStack>\n                </>\n              )}\n            </Collapsible.Context>\n          </Collapsible.Root>\n        </Box>\n      </HStack>\n    </Card.Root>\n  );\n});\n\nBitkitMarkdownCard.displayName = 'BitkitMarkdownCard';\n\nexport default BitkitMarkdownCard;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,eAA4C;CAChD,UAAU,oBAAC,uBAAD,EAAuB,MAAK,KAAM,CAAA;CAC5C,MAAM,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;CACjC,SAAS,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CAC/B,SAAS,oBAAC,aAAD,EAAa,MAAK,KAAM,CAAA;AACnC;AA0BA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EACJ,SACA,UACA,kBAAkB,SAClB,KACA,aACA,cACA,MACA,OAAO,MACP,SAAS,QACT,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,mBAAmB,gBAAgB,YAA+B,aAAa,QAAQ,IAAI,IAAI,KAAA;CAErG,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAChD,UAAA,qBAAC,QAAD;GAAQ,OAAM;GAAU,KAAI;GAA5B,UAAA,CACE,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAU,UAAA,aAAa;GAAa,CAAA,GACrD,oBAAC,KAAD;IAAK,KAAK,OAAO;IACf,UAAA,qBAAC,YAAY,MAAb;KACQ;KACO;KACI;KACjB,cAAc;KAJhB,UAAA,CAME,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,gBAAD;MAAsB;MAAO;KAAyB,CAAA,EACnC,CAAA,GACrB,oBAAC,YAAY,SAAb,EAAA,WACI,QACA,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,IAAI,QAAQ,oBAAC,KAAD,EAAK,KAAK,OAAO,SAAW,CAAA,GAC1C,qBAAC,QAAD;MAAQ,KAAI;MAAK,KAAK,OAAO;MAA7B,UAAA,CACG,SACD,oBAAC,cAAD;OACE,GAAI,IAAI,gBAAgB;OACxB,MAAK;OACL,YAAY,IAAI,OAAO,gBAAgB;OACvC,SAAQ;OAEP,UAAA,IAAI,OAAO,cAAc;MACd,CAAA,CACR;KACR,CAAA,CAAA,EAAA,CAAA,EAEe,CAAA,CACL;;GACf,CAAA,CACC;;CACC,CAAA;AAEf,CAAC;AAED,mBAAmB,cAAc"}

package/dist/components/BitkitMultiselect/BitkitMultiselect.js

@@ -98,6 +98,7 @@ var ClearAllButton = ({ state }) => {
 };
 var BitkitMultiselect = forwardRef((props, ref) => {
 	const { children, constrained = false, defaultValue, emptyHelperText, emptyLabel, isLoading, isValueInvalid, items, onScrolledToBottom, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
+	const { css: triggerCss, ...restTriggerProps } = triggerProps ?? {};
 	const collection = createListCollection({
 		items,
 		groupBy: (item) => item.group || "",
@@ -140,8 +141,9 @@ var BitkitMultiselect = forwardRef((props, ref) => {
 				children: [
 					/* @__PURE__ */ jsx(Select.HiddenSelect, {}),
 					/* @__PURE__ */ jsx(Select.Trigger, {
-						css: styles.trigger,
-						...triggerProps
+						css: [styles.trigger, triggerCss],
+						...restTriggerProps,
+						"aria-readonly": effectiveState === "readOnly" || void 0
 					}),
 					/* @__PURE__ */ jsx(MultiselectOverlay, {
 						constrained,

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 { useControllableState } from '@chakra-ui/react/hooks';\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 BitkitSelectMenuScrollProps,\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' | 'onChange' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. */\n  isValueInvalid?: (value: string) => 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  BitkitSelectMenuScrollProps &\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  isValueInvalid?: (value: string) => boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, isValueInvalid, 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                colorVariant={selectedValues.some((v) => isValueInvalid?.(v)) ? 'red' : '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          colorVariant={isValueInvalid?.(item.value) ? 'red' : '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\n// minWidth=\"0\" keeps the slot shrinkable inside the wrapping tags row: without it the slot holds\n// the tag's min-content width, which is the whole label now that it no longer wraps, and a long\n// selection overflows the control instead of ellipsizing. maxWidth=\"100%\" caps the other direction:\n// a tag alone on its own wrapped line has no sibling to shrink against, so it needs the row as its\n// own ceiling.\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" minWidth=\"0\" maxWidth=\"100%\" 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\" colorVariant=\"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    isValueInvalid,\n    items,\n    onScrolledToBottom,\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\n  const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n    value,\n    defaultValue: defaultValue ?? [],\n  });\n  const isInteractive = state !== 'disabled' && state !== 'readOnly';\n  const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n  const effectiveState = hasInvalidValue ? 'error' : state;\n  const isInvalid = effectiveState === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={effectiveState} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={effectiveState === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => {\n          setCurrentValues(details.value);\n          onValueChange?.(details.value);\n        }}\n        readOnly={effectiveState === '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.Control css={styles.control} className=\"group\">\n          <Select.HiddenSelect />\n          <Select.Trigger css={styles.trigger} {...triggerProps} />\n          <MultiselectOverlay\n            constrained={constrained}\n            isValueInvalid={hasInvalidValue ? isValueInvalid : undefined}\n            placeholder={placeholder}\n            size={size}\n            state={effectiveState}\n          />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={effectiveState} />}\n            {effectiveState === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {effectiveState === '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              onScrolledToBottom={onScrolledToBottom}\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 { useControllableState } from '@chakra-ui/react/hooks';\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 BitkitSelectMenuScrollProps,\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' | 'onChange' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. */\n  isValueInvalid?: (value: string) => 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  BitkitSelectMenuScrollProps &\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  isValueInvalid?: (value: string) => boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, isValueInvalid, 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                colorVariant={selectedValues.some((v) => isValueInvalid?.(v)) ? 'red' : '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          colorVariant={isValueInvalid?.(item.value) ? 'red' : '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\n// minWidth=\"0\" keeps the slot shrinkable inside the wrapping tags row: without it the slot holds\n// the tag's min-content width, which is the whole label now that it no longer wraps, and a long\n// selection overflows the control instead of ellipsizing. maxWidth=\"100%\" caps the other direction:\n// a tag alone on its own wrapped line has no sibling to shrink against, so it needs the row as its\n// own ceiling.\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" minWidth=\"0\" maxWidth=\"100%\" 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\" colorVariant=\"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    isValueInvalid,\n    items,\n    onScrolledToBottom,\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 { css: triggerCss, ...restTriggerProps } = triggerProps ?? {};\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\n  const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n    value,\n    defaultValue: defaultValue ?? [],\n  });\n  const isInteractive = state !== 'disabled' && state !== 'readOnly';\n  const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n  const effectiveState = hasInvalidValue ? 'error' : state;\n  const isInvalid = effectiveState === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={effectiveState} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={effectiveState === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => {\n          setCurrentValues(details.value);\n          onValueChange?.(details.value);\n        }}\n        readOnly={effectiveState === '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.Control css={styles.control} className=\"group\">\n          <Select.HiddenSelect />\n          <Select.Trigger\n            css={[styles.trigger, triggerCss]}\n            {...restTriggerProps}\n            aria-readonly={effectiveState === 'readOnly' || undefined}\n          />\n          <MultiselectOverlay\n            constrained={constrained}\n            isValueInvalid={hasInvalidValue ? isValueInvalid : undefined}\n            placeholder={placeholder}\n            size={size}\n            state={effectiveState}\n          />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={effectiveState} />}\n            {effectiveState === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {effectiveState === '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              onScrolledToBottom={onScrolledToBottom}\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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"}

package/dist/components/BitkitNoteCard/BitkitNoteCard.js

@@ -12,7 +12,7 @@ import { Text } from "@chakra-ui/react/text";
 import { Collapsible } from "@chakra-ui/react/collapsible";
 //#region lib/components/BitkitNoteCard/BitkitNoteCard.tsx
 var BitkitNoteCard = forwardRef((props, ref) => {
-	const { action, isCollapsible = false, message, messageList, status = "info", title, ...rest } = props;
+	const { action, css, isCollapsible = false, message, messageList, status = "info", title, ...rest } = props;
 	const styles = useSlotRecipe({ key: "noteCard" })({ status });
 	const [isOpen, setIsOpen] = useState(false);
 	const IconComponent = ICON_COMPONENTS_MAP[status];
@@ -28,7 +28,7 @@ var BitkitNoteCard = forwardRef((props, ref) => {
 	}) : null;
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: [/* @__PURE__ */ jsx(Box, {
 			css: styles.iconBar,

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

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

package/dist/components/BitkitNumberInput/BitkitNumberInput.js

@@ -26,7 +26,7 @@ var BitkitNumberInput = forwardRef((props, ref) => {
 		color: "icon/negative"
 	});
 	else if (hasWarning) statusIcon = /* @__PURE__ */ jsx(IconWarningYellow, { size: size === "lg" ? "24" : "16" });
-	const { onValueChange: rootOnValueChange, value: rootValue, ...restInputProps } = inputProps ?? {};
+	const { css: inputCss, onValueChange: rootOnValueChange, value: rootValue, ...restInputProps } = inputProps ?? {};
 	const resolvedValue = rootValue ?? value;
 	const handleValueChange = onValueChange || rootOnValueChange ? (details) => {
 		onValueChange?.(details.value);
@@ -37,7 +37,7 @@ var BitkitNumberInput = forwardRef((props, ref) => {
 		state,
 		...fieldProps,
 		children: /* @__PURE__ */ jsxs(NumberInput.Root, {
-			css: statusIcon ? { "--control-width": rem(150) } : void 0,
+			css: [statusIcon ? { "--control-width": rem(150) } : void 0, inputCss],
 			defaultValue,
 			onValueChange: handleValueChange,
 			size,

package/dist/components/BitkitNumberInput/BitkitNumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitNumberInput.js","names":[],"sources":["../../../lib/components/BitkitNumberInput/BitkitNumberInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { NumberInput, type NumberInputRootProps } from '@chakra-ui/react/number-input';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconMinus, IconPlus, IconWarningYellow } from '../../icons';\nimport { triggerSeparatorStyle } from '../../theme/slot-recipes/NumberInput.recipe';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitNumberInputProps extends Omit<\n  BitkitFieldProps,\n  'children' | 'disabled' | 'invalid' | 'readOnly'\n> {\n  /** Initial value for uncontrolled usage (a string, as Ark tracks the value as a string). */\n  defaultValue?: string;\n  /**\n   * Escape hatch for Ark's `NumberInput.Root` — options like `min`, `max`, `step`, or\n   * `formatOptions`, plus its detail-rich `onValueChange`. On conflict, values here win over the\n   * top-level `value`/`onValueChange`.\n   */\n  inputProps?: Omit<NumberInputRootProps, 'size'>;\n  /**\n   * Convenience change handler that receives the value directly. For Ark's full details (including\n   * `valueAsNumber`), use `inputProps.onValueChange`. The object wins if both are set.\n   */\n  onValueChange?: (value: string) => void;\n  /** Field size — controls height and typography. */\n  size?: 'md' | 'lg';\n  /**\n   * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and\n   * `readOnly` gate interaction.\n   */\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  /**\n   * Controlled value (a string). Pair with `onValueChange`. Can also be supplied via `inputProps`,\n   * which wins on conflict.\n   */\n  value?: string;\n}\n\n/**\n * A numeric field with increment/decrement steppers, built on Ark's NumberInput. Reflect the value\n * with `value` + `onValueChange` (a string), or start uncontrolled with `defaultValue`; use\n * `inputProps` for Ark options like `min`/`max`/`step` and its detail-rich `onValueChange`. Includes\n * the standard label and helper/error/warning chrome.\n */\nconst BitkitNumberInput = forwardRef<HTMLDivElement, BitkitNumberInputProps>((props: BitkitNumberInputProps, ref) => {\n  const { defaultValue, inputProps, onValueChange, size = 'lg', state, value, ...fieldProps } = props;\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  let statusIcon = undefined;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n  }\n\n  // `value` / `onValueChange` may come in at the top level or via `inputProps` — the object wins on\n  // conflict. The top-level `onValueChange` gets the string value; `inputProps.onValueChange` still\n  // fires with Ark's full details.\n  const { onValueChange: rootOnValueChange, value: rootValue, ...restInputProps } = inputProps ?? {};\n  const resolvedValue = rootValue ?? value;\n  const handleValueChange: NumberInputRootProps['onValueChange'] =\n    onValueChange || rootOnValueChange\n      ? (details) => {\n          onValueChange?.(details.value);\n          rootOnValueChange?.(details);\n        }\n      : undefined;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <NumberInput.Root\n        css={statusIcon ? { '--control-width': rem(150) } : undefined}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        size={size}\n        value={resolvedValue}\n        {...restInputProps}\n      >\n        <NumberInput.Control>\n          {statusIcon && (\n            <Box paddingInline=\"12\" display=\"flex\" alignItems=\"center\" justifyContent=\"center\">\n              {statusIcon}\n            </Box>\n          )}\n          <NumberInput.DecrementTrigger _before={statusIcon ? triggerSeparatorStyle : undefined}>\n            <IconMinus size=\"16\" />\n          </NumberInput.DecrementTrigger>\n          <NumberInput.IncrementTrigger>\n            <IconPlus size=\"16\" />\n          </NumberInput.IncrementTrigger>\n        </NumberInput.Control>\n        <NumberInput.Input />\n      </NumberInput.Root>\n    </BitkitField>\n  );\n});\n\nBitkitNumberInput.displayName = 'BitkitNumberInput';\n\nexport default BitkitNumberInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CA,IAAM,oBAAoB,YAAoD,OAA+B,QAAQ;CACnH,MAAM,EAAE,cAAc,YAAY,eAAe,OAAO,MAAM,OAAO,OAAO,GAAG,eAAe;CAE9F,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,OAAM;CAAiB,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAMtE,MAAM,EAAE,eAAe,mBAAmB,OAAO,WAAW,GAAG,mBAAmB,cAAc,CAAC;CACjG,MAAM,gBAAgB,aAAa;CACnC,MAAM,oBACJ,iBAAiB,qBACZ,YAAY;EACX,gBAAgB,QAAQ,KAAK;EAC7B,oBAAoB,OAAO;CAC7B,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;EACvC,UAAA,qBAAC,YAAY,MAAb;GACE,KAAK,aAAa,EAAE,mBAAmB,IAAI,GAAG,EAAE,IAAI,KAAA;GACtC;GACd,eAAe;GACT;GACN,OAAO;GACP,GAAI;GANN,UAAA,CAQE,qBAAC,YAAY,SAAb,EAAA,UAAA;IACG,cACC,oBAAC,KAAD;KAAK,eAAc;KAAK,SAAQ;KAAO,YAAW;KAAS,gBAAe;KACvE,UAAA;IACE,CAAA;IAEP,oBAAC,YAAY,kBAAb;KAA8B,SAAS,aAAa,wBAAwB,KAAA;KAC1E,UAAA,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;IACM,CAAA;IAC9B,oBAAC,YAAY,kBAAb,EAAA,UACE,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA,EACO,CAAA;GACX,EAAA,CAAA,GACrB,oBAAC,YAAY,OAAb,CAAoB,CAAA,CACJ;;CACP,CAAA;AAEjB,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"BitkitNumberInput.js","names":[],"sources":["../../../lib/components/BitkitNumberInput/BitkitNumberInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { NumberInput, type NumberInputRootProps } from '@chakra-ui/react/number-input';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconMinus, IconPlus, IconWarningYellow } from '../../icons';\nimport { triggerSeparatorStyle } from '../../theme/slot-recipes/NumberInput.recipe';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitNumberInputProps extends Omit<\n  BitkitFieldProps,\n  'children' | 'disabled' | 'invalid' | 'readOnly'\n> {\n  /** Initial value for uncontrolled usage (a string, as Ark tracks the value as a string). */\n  defaultValue?: string;\n  /**\n   * Escape hatch for Ark's `NumberInput.Root` — options like `min`, `max`, `step`, or\n   * `formatOptions`, plus its detail-rich `onValueChange`. On conflict, values here win over the\n   * top-level `value`/`onValueChange`.\n   */\n  inputProps?: Omit<NumberInputRootProps, 'size'>;\n  /**\n   * Convenience change handler that receives the value directly. For Ark's full details (including\n   * `valueAsNumber`), use `inputProps.onValueChange`. The object wins if both are set.\n   */\n  onValueChange?: (value: string) => void;\n  /** Field size — controls height and typography. */\n  size?: 'md' | 'lg';\n  /**\n   * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and\n   * `readOnly` gate interaction.\n   */\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  /**\n   * Controlled value (a string). Pair with `onValueChange`. Can also be supplied via `inputProps`,\n   * which wins on conflict.\n   */\n  value?: string;\n}\n\n/**\n * A numeric field with increment/decrement steppers, built on Ark's NumberInput. Reflect the value\n * with `value` + `onValueChange` (a string), or start uncontrolled with `defaultValue`; use\n * `inputProps` for Ark options like `min`/`max`/`step` and its detail-rich `onValueChange`. Includes\n * the standard label and helper/error/warning chrome.\n */\nconst BitkitNumberInput = forwardRef<HTMLDivElement, BitkitNumberInputProps>((props: BitkitNumberInputProps, ref) => {\n  const { defaultValue, inputProps, onValueChange, size = 'lg', state, value, ...fieldProps } = props;\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  let statusIcon = undefined;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n  }\n\n  // `value` / `onValueChange` may come in at the top level or via `inputProps` — the object wins on\n  // conflict. The top-level `onValueChange` gets the string value; `inputProps.onValueChange` still\n  // fires with Ark's full details.\n  const { css: inputCss, onValueChange: rootOnValueChange, value: rootValue, ...restInputProps } = inputProps ?? {};\n  const resolvedValue = rootValue ?? value;\n  const handleValueChange: NumberInputRootProps['onValueChange'] =\n    onValueChange || rootOnValueChange\n      ? (details) => {\n          onValueChange?.(details.value);\n          rootOnValueChange?.(details);\n        }\n      : undefined;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <NumberInput.Root\n        css={[statusIcon ? { '--control-width': rem(150) } : undefined, inputCss]}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        size={size}\n        value={resolvedValue}\n        {...restInputProps}\n      >\n        <NumberInput.Control>\n          {statusIcon && (\n            <Box paddingInline=\"12\" display=\"flex\" alignItems=\"center\" justifyContent=\"center\">\n              {statusIcon}\n            </Box>\n          )}\n          <NumberInput.DecrementTrigger _before={statusIcon ? triggerSeparatorStyle : undefined}>\n            <IconMinus size=\"16\" />\n          </NumberInput.DecrementTrigger>\n          <NumberInput.IncrementTrigger>\n            <IconPlus size=\"16\" />\n          </NumberInput.IncrementTrigger>\n        </NumberInput.Control>\n        <NumberInput.Input />\n      </NumberInput.Root>\n    </BitkitField>\n  );\n});\n\nBitkitNumberInput.displayName = 'BitkitNumberInput';\n\nexport default BitkitNumberInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CA,IAAM,oBAAoB,YAAoD,OAA+B,QAAQ;CACnH,MAAM,EAAE,cAAc,YAAY,eAAe,OAAO,MAAM,OAAO,OAAO,GAAG,eAAe;CAE9F,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,OAAM;CAAiB,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAMtE,MAAM,EAAE,KAAK,UAAU,eAAe,mBAAmB,OAAO,WAAW,GAAG,mBAAmB,cAAc,CAAC;CAChH,MAAM,gBAAgB,aAAa;CACnC,MAAM,oBACJ,iBAAiB,qBACZ,YAAY;EACX,gBAAgB,QAAQ,KAAK;EAC7B,oBAAoB,OAAO;CAC7B,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;EACvC,UAAA,qBAAC,YAAY,MAAb;GACE,KAAK,CAAC,aAAa,EAAE,mBAAmB,IAAI,GAAG,EAAE,IAAI,KAAA,GAAW,QAAQ;GAC1D;GACd,eAAe;GACT;GACN,OAAO;GACP,GAAI;GANN,UAAA,CAQE,qBAAC,YAAY,SAAb,EAAA,UAAA;IACG,cACC,oBAAC,KAAD;KAAK,eAAc;KAAK,SAAQ;KAAO,YAAW;KAAS,gBAAe;KACvE,UAAA;IACE,CAAA;IAEP,oBAAC,YAAY,kBAAb;KAA8B,SAAS,aAAa,wBAAwB,KAAA;KAC1E,UAAA,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;IACM,CAAA;IAC9B,oBAAC,YAAY,kBAAb,EAAA,UACE,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA,EACO,CAAA;GACX,EAAA,CAAA,GACrB,oBAAC,YAAY,OAAb,CAAoB,CAAA,CACJ;;CACP,CAAA;AAEjB,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js

@@ -7,13 +7,13 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 //#region lib/components/BitkitOverflowContent/BitkitOverflowContent.tsx
 var BitkitOverflowContent = forwardRef((props, ref) => {
-	const { buttonSize = "md", children, previewText, textStyle, title, ...rest } = props;
+	const { buttonSize = "md", children, css, previewText, textStyle, title, ...rest } = props;
 	const [open, setOpen] = useState(false);
 	const styles = useSlotRecipe({ key: "overflowContent" })();
 	const preview = previewText || (typeof children === "string" ? children : "Click to view content");
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box, {
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: [/* @__PURE__ */ jsx(Text, {
 			css: styles.preview,

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

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

package/dist/components/BitkitPageFooter/BitkitPageFooter.js

@@ -12,7 +12,7 @@ var SEVERITY_COLOR_MAP = {
 	none: "color/green/bold"
 };
 var BitkitPageFooter = forwardRef((props, ref) => {
-	const { children, colorVariant, severity = "none", size, statusLabel, variant, ...rest } = props;
+	const { children, colorVariant, css, severity = "none", size, statusLabel, variant, ...rest } = props;
 	const styles = useSlotRecipe({ key: "pageFooter" })({
 		colorVariant,
 		size,
@@ -23,7 +23,7 @@ var BitkitPageFooter = forwardRef((props, ref) => {
 	return /* @__PURE__ */ jsxs(Box, {
 		as: "footer",
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: [
 			statusLabel && /* @__PURE__ */ jsxs(chakra.div, {