@bitrise/bitkit-v2 0.3.475-beta.3009 → 0.3.475-beta.3014

package/dist/components/BitkitFilter/components/FilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterPanel.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Drawer } from '@chakra-ui/react/drawer';\nimport { Popover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ReactNode } from 'react';\n\nimport { IconArrowLeft } from '../../../icons';\nimport { usePortalContext } from '../../../utilities/BitkitPortalContext';\nimport BitkitBadge from '../../BitkitBadge/BitkitBadge';\nimport BitkitButton from '../../BitkitButton/BitkitButton';\nimport BitkitControlButton from '../../BitkitControlButton/BitkitControlButton';\nimport { useFilterContext } from '../BitkitFilter.context';\n\nexport interface FilterPanelProps {\n  children: ReactNode;\n  /** Where focus goes on close, for a panel without a trigger to return it to. */\n  finalFocusEl?: () => HTMLElement | null;\n  /** Anchors the desktop popover to an element it has no trigger for — the \"Add filter\" button. */\n  getAnchorElement?: () => HTMLElement | null;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n  /**\n   * What opens the panel: on desktop a `FilterChip`, which renders the popover's trigger; on mobile a\n   * `FilterField`, which opens it through its own `onClick`.\n   */\n  trigger?: ReactNode;\n}\n\n/**\n * Where a filter edits its value: an anchored popover on desktop, a full-screen view stacked over the\n * filters dialog on mobile. The content unmounts on close, so the draft state of the form inside\n * starts over from the applied value each time it opens.\n */\nconst FilterPanel = (props: FilterPanelProps) => {\n  const { children, finalFocusEl, getAnchorElement, onOpenChange: onOpenChangeProp, open, trigger } = props;\n  const { isDisabled, isMobile, styles } = useFilterContext();\n  // While the page loads the triggers are only `aria-disabled`, so opening is refused here.\n  const onOpenChange = (isOpen: boolean) => {\n    if (!isOpen || !isDisabled) onOpenChangeProp(isOpen);\n  };\n  const { disablePortal } = usePortalContext();\n\n  if (isMobile) {\n    return (\n      <>\n        {trigger}\n        <Drawer.Root\n          finalFocusEl={finalFocusEl}\n          lazyMount\n          onOpenChange={({ open: isOpen }) => onOpenChange(isOpen)}\n          open={open}\n          unmountOnExit\n        >\n          <Portal disabled={disablePortal}>\n            <Drawer.Positioner>\n              <Drawer.Content>{children}</Drawer.Content>\n            </Drawer.Positioner>\n          </Portal>\n        </Drawer.Root>\n      </>\n    );\n  }\n\n  return (\n    <Popover.Root\n      finalFocusEl={finalFocusEl}\n      lazyMount\n      onOpenChange={({ open: isOpen }) => onOpenChange(isOpen)}\n      open={open}\n      positioning={{\n        getAnchorElement,\n        gutter: 8,\n        placement: 'bottom-start',\n      }}\n      unmountOnExit\n    >\n      {trigger}\n      <Portal disabled={disablePortal}>\n        <Popover.Positioner>\n          <Popover.Content css={styles.popoverContent}>{children}</Popover.Content>\n        </Popover.Positioner>\n      </Portal>\n    </Popover.Root>\n  );\n};\n\nexport interface FilterPanelHeaderProps {\n  /** Desktop only: a multi-select's selection count, shown as a badge next to the title. */\n  count?: number;\n  title: string;\n}\n\nexport const FilterPanelHeader = ({ count, title }: FilterPanelHeaderProps) => {\n  const { isMobile, styles } = useFilterContext();\n\n  if (isMobile) {\n    return (\n      <Box css={styles.mobilePanelHeader}>\n        <Drawer.CloseTrigger asChild unstyled>\n          <BitkitControlButton icon={IconArrowLeft} label=\"Back\" />\n        </Drawer.CloseTrigger>\n        <Box>\n          <Text css={styles.mobilePanelOverline}>Filter</Text>\n          <Drawer.Title css={styles.mobilePanelTitle} unstyled>\n            {title}\n          </Drawer.Title>\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Popover.Header>\n      <Popover.Title>{title}</Popover.Title>\n      {count !== undefined && <BitkitBadge>{count}</BitkitBadge>}\n    </Popover.Header>\n  );\n};\n\nexport interface FilterPanelFooterProps {\n  /** Mobile only: the Apply button's label, e.g. \"Apply (2)\". */\n  applyLabel?: string;\n  isApplyDisabled: boolean;\n  onApply: () => void;\n  /** Desktop only: adds a \"Cancel\" button. On mobile the header's back button cancels. */\n  onCancel?: () => void;\n  /** The action before Apply: \"Clear\", or the wildcard-mode switch. */\n  start?: { label: string; onClick: () => void };\n}\n\nexport const FilterPanelFooter = ({\n  applyLabel,\n  isApplyDisabled,\n  onApply,\n  onCancel,\n  start,\n}: FilterPanelFooterProps) => {\n  const { isMobile, styles } = useFilterContext();\n  const applyState = isApplyDisabled ? 'disabled' : undefined;\n\n  if (isMobile) {\n    return (\n      <Drawer.Footer>\n        <Box css={styles.mobileFooter}>\n          {!!start && (\n            <BitkitButton onClick={start.onClick} size=\"md\" variant=\"secondary\">\n              {start.label}\n            </BitkitButton>\n          )}\n          <BitkitButton onClick={onApply} size=\"md\" state={applyState}>\n            {applyLabel ?? 'Apply'}\n          </BitkitButton>\n        </Box>\n      </Drawer.Footer>\n    );\n  }\n\n  return (\n    <Box css={styles.popoverFooter}>\n      <Box css={styles.popoverFooterStart}>\n        {!!start && (\n          <BitkitButton onClick={start.onClick} size=\"sm\" variant=\"tertiary\">\n            {start.label}\n          </BitkitButton>\n        )}\n      </Box>\n      {!!onCancel && (\n        <BitkitButton onClick={onCancel} size=\"sm\" variant=\"secondary\">\n          Cancel\n        </BitkitButton>\n      )}\n      <BitkitButton onClick={onApply} size=\"sm\" state={applyState}>\n        Apply\n      </BitkitButton>\n    </Box>\n  );\n};\n\nexport default FilterPanel;\n"],"mappings":"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"}

package/dist/components/BitkitFilter/components/FilterSearchInput.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactElement } from 'react';
+export interface FilterSearchInputProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {
+    /** Extra hint read out with the field, e.g. what the search matches. */
+    description?: string;
+    label: string;
+    onValueChange: (value: string) => void;
+    placeholder: string;
+    /** Wraps the input, e.g. in a tooltip. */
+    renderInput?: (input: ReactElement) => ReactElement;
+    value: string;
+}
+/** The borderless search field of the bar — and, on mobile, of each filter's view too. */
+declare const FilterSearchInput: import('react').ForwardRefExoticComponent<FilterSearchInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default FilterSearchInput;

package/dist/components/BitkitFilter/components/FilterSearchInput.js

@@ -0,0 +1,41 @@
+import IconMagnifier from "../../../icons/IconMagnifier.js";
+import BitkitCloseButton from "../../BitkitCloseButton/BitkitCloseButton.js";
+import { useFilterContext } from "../BitkitFilter.context.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitFilter/components/FilterSearchInput.tsx
+/** The borderless search field of the bar — and, on mobile, of each filter's view too. */
+var FilterSearchInput = forwardRef((props, ref) => {
+	const { css, description, label, onValueChange, placeholder, renderInput = (input) => input, value, ...rest } = props;
+	const { isMobile, styles } = useFilterContext();
+	return /* @__PURE__ */ jsxs(Box, {
+		css: [isMobile ? styles.mobileSearch : styles.search, css],
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(IconMagnifier, { size: isMobile ? "24" : "16" }),
+			renderInput(/* @__PURE__ */ jsx(chakra.input, {
+				"aria-description": description,
+				"aria-label": label,
+				css: isMobile ? styles.mobileSearchInput : styles.searchInput,
+				onChange: (event) => onValueChange(event.target.value),
+				placeholder,
+				ref,
+				type: "search",
+				value
+			})),
+			!!value && /* @__PURE__ */ jsx(BitkitCloseButton, {
+				"aria-label": "Clear search",
+				colorVariant: "neutral",
+				onClick: () => onValueChange(""),
+				size: "sm"
+			})
+		]
+	});
+});
+FilterSearchInput.displayName = "FilterSearchInput";
+//#endregion
+export { FilterSearchInput as default };
+
+//# sourceMappingURL=FilterSearchInput.js.map

package/dist/components/BitkitFilter/components/FilterSearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSearchInput.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSearchInput.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\n// `chakra.input`: the filter's search fields are borderless rows from the filter recipe, unlike the\n// bordered BitkitSearchInput.\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactElement } from 'react';\n\nimport { IconMagnifier } from '../../../icons';\nimport BitkitCloseButton from '../../BitkitCloseButton/BitkitCloseButton';\nimport { useFilterContext } from '../BitkitFilter.context';\n\nexport interface FilterSearchInputProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {\n  /** Extra hint read out with the field, e.g. what the search matches. */\n  description?: string;\n  label: string;\n  onValueChange: (value: string) => void;\n  placeholder: string;\n  /** Wraps the input, e.g. in a tooltip. */\n  renderInput?: (input: ReactElement) => ReactElement;\n  value: string;\n}\n\n/** The borderless search field of the bar — and, on mobile, of each filter's view too. */\nconst FilterSearchInput = forwardRef<HTMLInputElement, FilterSearchInputProps>((props, ref) => {\n  const { css, description, label, onValueChange, placeholder, renderInput = (input) => input, value, ...rest } = props;\n  const { isMobile, styles } = useFilterContext();\n\n  return (\n    <Box css={[isMobile ? styles.mobileSearch : styles.search, css]} {...rest}>\n      <IconMagnifier size={isMobile ? '24' : '16'} />\n      {renderInput(\n        <chakra.input\n          aria-description={description}\n          aria-label={label}\n          css={isMobile ? styles.mobileSearchInput : styles.searchInput}\n          onChange={(event) => onValueChange(event.target.value)}\n          placeholder={placeholder}\n          ref={ref}\n          type=\"search\"\n          value={value}\n        />,\n      )}\n      {!!value && (\n        <BitkitCloseButton\n          aria-label=\"Clear search\"\n          colorVariant=\"neutral\"\n          onClick={() => onValueChange('')}\n          size=\"sm\"\n        />\n      )}\n    </Box>\n  );\n});\n\nFilterSearchInput.displayName = 'FilterSearchInput';\n\nexport default FilterSearchInput;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,oBAAoB,YAAsD,OAAO,QAAQ;CAC7F,MAAM,EAAE,KAAK,aAAa,OAAO,eAAe,aAAa,eAAe,UAAU,OAAO,OAAO,GAAG,SAAS;CAChH,MAAM,EAAE,UAAU,WAAW,iBAAiB;CAE9C,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,WAAW,OAAO,eAAe,OAAO,QAAQ,GAAG;EAAG,GAAI;EAArE,UAAA;GACE,oBAAC,eAAD,EAAe,MAAM,WAAW,OAAO,KAAO,CAAA;GAC7C,YACC,oBAAC,OAAO,OAAR;IACE,oBAAkB;IAClB,cAAY;IACZ,KAAK,WAAW,OAAO,oBAAoB,OAAO;IAClD,WAAW,UAAU,cAAc,MAAM,OAAO,KAAK;IACxC;IACR;IACL,MAAK;IACE;GACR,CAAA,CACH;GACC,CAAC,CAAC,SACD,oBAAC,mBAAD;IACE,cAAW;IACX,cAAa;IACb,eAAe,cAAc,EAAE;IAC/B,MAAK;GACN,CAAA;EAEA;;AAET,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/BitkitFilter/components/FilterSelectForm.d.ts

@@ -0,0 +1,41 @@
+import { BitkitIconComponent } from '../../../icons';
+import { BitkitColorToken } from '../../../theme/themeUtils';
+export interface BitkitFilterSelectItem {
+    /** Lists the option under this heading, with the others of the same group. */
+    group?: string;
+    icon?: BitkitIconComponent;
+    /** Colors the icon, e.g. a status: `icon/positive` for "Passed". */
+    iconColor?: BitkitColorToken<'icon'>;
+    label: string;
+    value: string;
+}
+/** The list renders at most this many options; search narrows down the rest. */
+export declare const MAX_VISIBLE_ITEMS = 100;
+export interface FilterSelectFormProps {
+    /** The filter holds a value: the footer offers "Clear" instead of the wildcard-mode switch. */
+    isEditing: boolean;
+    /** Keeps `items` in their own order instead of listing the applied ones first — for a switch's fixed options. */
+    isOrderFixed?: boolean;
+    /** A value is always applied: no "Clear" in the footer. */
+    isRequired?: boolean;
+    items: BitkitFilterSelectItem[];
+    label: string;
+    loading?: boolean;
+    loadingLabel?: string;
+    multiple?: boolean;
+    onApply: (value: string[]) => void;
+    onCancel: () => void;
+    onSearchChange?: (searchText: string) => void;
+    pattern?: boolean;
+    pluralLabel: string;
+    searchPlaceholder?: string;
+    /**
+     * The applied selection with its labels. Without a search, any of it missing from `items` — e.g.
+     * left behind by a server search — is listed first, so it can still be unchecked.
+     */
+    selectedItems?: BitkitFilterSelectItem[];
+    value: string[];
+}
+/** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */
+declare const FilterSelectForm: (props: FilterSelectFormProps) => import('react').JSX.Element;
+export default FilterSelectForm;

package/dist/components/BitkitFilter/components/FilterSelectForm.js

@@ -0,0 +1,307 @@
+import IconCheck from "../../../icons/IconCheck.js";
+import BitkitGroupHeading from "../../BitkitGroupHeading/BitkitGroupHeading.js";
+import BitkitCheckbox from "../../BitkitCheckbox/BitkitCheckbox.js";
+import BitkitCheckboxGroup from "../../BitkitCheckboxGroup/BitkitCheckboxGroup.js";
+import { compilePattern, isEqualFilterValue, isPattern, toRunningText } from "../BitkitFilter.utils.js";
+import { useFilterContext } from "../BitkitFilter.context.js";
+import { FilterPanelFooter, FilterPanelHeader } from "./FilterPanel.js";
+import FilterSearchInput from "./FilterSearchInput.js";
+import BitkitInlineLoading from "../../BitkitInlineLoading/BitkitInlineLoading.js";
+import BitkitList_default from "../../BitkitList/BitkitList.js";
+import BitkitTextInput from "../../BitkitTextInput/BitkitTextInput.js";
+import BitkitSearchInput from "../../BitkitSearchInput/BitkitSearchInput.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+import { createListCollection } from "@chakra-ui/react/collection";
+import { HStack } from "@chakra-ui/react/stack";
+import { Listbox } from "@chakra-ui/react/listbox";
+//#region lib/components/BitkitFilter/components/FilterSelectForm.tsx
+/**
+* Gathers the options by `group`, in the order each group first appears, so the list (and its
+* keyboard order) runs group by group. Ungrouped options come under an empty-named group.
+*/
+var groupItems = (items) => {
+	const groups = /* @__PURE__ */ new Map();
+	items.forEach((item) => {
+		const key = item.group ?? "";
+		groups.set(key, [...groups.get(key) ?? [], item]);
+	});
+	return [...groups];
+};
+/** Below this many options the list is short enough to scan, so there is no search input. */
+var SEARCH_THRESHOLD = 5;
+/** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */
+var FilterSelectForm = (props) => {
+	const { isEditing, isOrderFixed, isRequired, items, label, loading, loadingLabel = "Loading...", multiple, onApply, onCancel, onSearchChange, pattern, pluralLabel, searchPlaceholder = "Search for options", selectedItems = [], value } = props;
+	const { isMobile, styles } = useFilterContext();
+	const [draft, setDraft] = useState(value);
+	const [mode, setMode] = useState(pattern && value[0] && isPattern(value[0]) ? "pattern" : "list");
+	const [searchText, setSearchText] = useState("");
+	const [hasLoaded, setHasLoaded] = useState(!loading);
+	if (!loading && !hasLoaded) setHasLoaded(true);
+	const onSearchTextChange = (text) => {
+		setSearchText(text);
+		onSearchChange?.(text);
+	};
+	const matchingItems = useMemo(() => {
+		if (!searchText) {
+			if (isOrderFixed) return items;
+			return [...value.flatMap((selected) => {
+				return items.find((option) => option.value === selected) ?? selectedItems.find((option) => option.value === selected) ?? [];
+			}), ...items.filter((item) => !value.includes(item.value))];
+		}
+		if (onSearchChange) return items;
+		const query = searchText.toLowerCase();
+		return items.filter((item) => item.label.toLowerCase().includes(query));
+	}, [
+		isOrderFixed,
+		items,
+		onSearchChange,
+		searchText,
+		selectedItems,
+		value
+	]);
+	const visibleGroups = useMemo(() => groupItems(matchingItems.slice(0, 100)), [matchingItems]);
+	const visibleItems = visibleGroups.flatMap(([, groupItems]) => groupItems);
+	const isInitialLoading = !!loading && !hasLoaded;
+	const showSearch = !isInitialLoading && (!!onSearchChange || items.length > SEARCH_THRESHOLD);
+	const searchLabel = `Search ${toRunningText(pluralLabel)}`;
+	const showLimitHelper = matchingItems.length > 100;
+	const patternValue = draft[0] ?? "";
+	const isApplyDisabled = isEqualFilterValue(draft, value) || mode === "pattern" && !(patternValue && isPattern(patternValue)) || !!isRequired && !draft.length;
+	const bodyRef = useRef(null);
+	const hasSwitchedMode = useRef(false);
+	useEffect(() => {
+		if (!hasSwitchedMode.current) return;
+		bodyRef.current?.querySelector("input:not([type=hidden]), [role=listbox], input[type=checkbox]")?.focus();
+	}, [mode]);
+	let start;
+	if (isEditing && !isRequired) start = {
+		label: multiple && isMobile ? "Clear all" : "Clear",
+		onClick: () => onApply([])
+	};
+	else if (pattern && !isEditing) start = {
+		label: mode === "list" ? "Use wildcard pattern" : "Select from list",
+		onClick: () => {
+			hasSwitchedMode.current = true;
+			setMode(mode === "list" ? "pattern" : "list");
+			setDraft([]);
+		}
+	};
+	let list;
+	if (loading) list = /* @__PURE__ */ jsx(BitkitInlineLoading, {
+		css: styles.loading,
+		label: loadingLabel,
+		size: isMobile ? "lg" : "md"
+	});
+	else if (!visibleItems.length) list = /* @__PURE__ */ jsx(Text, {
+		css: styles.loading,
+		color: "text/secondary",
+		textStyle: isMobile ? "body/lg/regular" : "body/md/regular",
+		children: searchText ? "No result. Refine your search term." : "No options available."
+	});
+	else if (multiple && !isMobile) list = /* @__PURE__ */ jsxs(Box, {
+		css: styles.checkboxList,
+		children: [/* @__PURE__ */ jsx(BitkitCheckboxGroup, {
+			"aria-label": label,
+			onValueChange: setDraft,
+			size: "md",
+			value: draft,
+			children: visibleGroups.map(([group, groupItems]) => /* @__PURE__ */ jsxs(Fragment, { children: [!!group && /* @__PURE__ */ jsx(BitkitGroupHeading, {
+				label: group,
+				paddingBlockStart: "12",
+				paddingInline: "4"
+			}), groupItems.map((item) => /* @__PURE__ */ jsx(BitkitCheckbox, {
+				labelText: item.icon ? /* @__PURE__ */ jsxs(HStack, {
+					gap: "4",
+					children: [/* @__PURE__ */ jsx(item.icon, {
+						color: item.iconColor,
+						size: "16"
+					}), item.label]
+				}) : item.label,
+				value: item.value
+			}, item.value))] }, group))
+		}), showLimitHelper && /* @__PURE__ */ jsx(LimitHelper, { marginBlockStart: "16" })]
+	});
+	else list = /* @__PURE__ */ jsx(FilterListbox, {
+		groups: visibleGroups,
+		items: visibleItems,
+		label,
+		multiple,
+		onValueChange: setDraft,
+		showLimitHelper,
+		value: draft
+	});
+	let search = null;
+	if (showSearch && isMobile) search = /* @__PURE__ */ jsx(FilterSearchInput, {
+		label: searchLabel,
+		onValueChange: onSearchTextChange,
+		placeholder: searchPlaceholder,
+		value: searchText
+	});
+	else if (showSearch) search = /* @__PURE__ */ jsx(Box, {
+		css: styles.popoverSearch,
+		children: /* @__PURE__ */ jsx(BitkitSearchInput, {
+			label: searchLabel,
+			onChange: onSearchTextChange,
+			placeholder: searchPlaceholder,
+			size: "md",
+			value: searchText
+		})
+	});
+	const body = /* @__PURE__ */ jsx(Box, {
+		css: styles.popoverBody,
+		ref: bodyRef,
+		children: mode === "pattern" ? /* @__PURE__ */ jsx(FilterPatternBody, {
+			items,
+			onValueChange: setDraft,
+			pluralLabel,
+			value: patternValue
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [search, list] })
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(FilterPanelHeader, {
+			count: multiple && mode === "list" ? draft.length : void 0,
+			title: multiple ? pluralLabel : label
+		}),
+		isMobile ? /* @__PURE__ */ jsx(Box, {
+			flex: "1",
+			overflowY: "auto",
+			children: body
+		}) : body,
+		!isInitialLoading && /* @__PURE__ */ jsx(FilterPanelFooter, {
+			applyLabel: multiple && mode === "list" && draft.length ? `Apply (${draft.length})` : void 0,
+			isApplyDisabled,
+			onApply: () => onApply(mode === "pattern" ? [patternValue] : draft),
+			onCancel,
+			start
+		})
+	] });
+};
+var LimitHelper = ({ marginBlockStart }) => {
+	const { styles } = useFilterContext();
+	return /* @__PURE__ */ jsxs(Text, {
+		css: styles.listHelperText,
+		marginBlockStart,
+		children: [
+			"Showing the first ",
+			100,
+			" options. Search to find more."
+		]
+	});
+};
+/**
+* The option list for a single select, and on mobile for a multiple one too — there the rows are
+* full-width and highlighted when selected, with a checkbox drawn in front.
+*/
+var FilterListbox = (props) => {
+	const { groups, items, label, multiple, onValueChange, showLimitHelper, value } = props;
+	const { isMobile, styles } = useFilterContext();
+	const collection = useMemo(() => createListCollection({ items }), [items]);
+	const checkboxStyles = useSlotRecipe({ key: "checkbox" })({ size: "lg" });
+	const checkIndicator = /* @__PURE__ */ jsx(Listbox.ItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, { size: "16" }) });
+	const renderItem = (item) => {
+		const state = value.includes(item.value) ? "checked" : "unchecked";
+		const check = multiple ? /* @__PURE__ */ jsx(Box, {
+			"aria-hidden": true,
+			css: [checkboxStyles.control, styles.mobileListCheckbox],
+			"data-state": state,
+			children: /* @__PURE__ */ jsx(IconCheck, {})
+		}) : /* @__PURE__ */ jsx(Box, {
+			"aria-hidden": true,
+			css: styles.mobileListCheck,
+			"data-state": state,
+			children: /* @__PURE__ */ jsx(IconCheck, { size: "16" })
+		});
+		return /* @__PURE__ */ jsxs(Listbox.Item, {
+			item,
+			children: [
+				isMobile && check,
+				!!item.icon && /* @__PURE__ */ jsx(item.icon, {
+					color: item.iconColor,
+					size: isMobile ? "24" : "16"
+				}),
+				/* @__PURE__ */ jsx(Listbox.ItemText, { children: item.label }),
+				!isMobile && checkIndicator
+			]
+		}, item.value);
+	};
+	return /* @__PURE__ */ jsxs(Listbox.Root, {
+		collection,
+		onValueChange: (details) => onValueChange(details.value),
+		selectionMode: multiple ? "multiple" : "single",
+		size: isMobile ? "lg" : "md",
+		value,
+		children: [/* @__PURE__ */ jsx(Listbox.Label, {
+			srOnly: true,
+			children: label
+		}), /* @__PURE__ */ jsxs(Listbox.Content, { children: [groups.map(([group, groupItems]) => /* @__PURE__ */ jsxs(Listbox.ItemGroup, { children: [!!group && /* @__PURE__ */ jsx(Listbox.ItemGroupLabel, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(BitkitGroupHeading, {
+				label: group,
+				paddingBlockStart: "12",
+				paddingInline: "24"
+			})
+		}), groupItems.map(renderItem)] }, group)), showLimitHelper && /* @__PURE__ */ jsx(Box, {
+			paddingBlockStart: "8",
+			paddingInline: "24",
+			children: /* @__PURE__ */ jsx(LimitHelper, {})
+		})] })]
+	});
+};
+var FilterPatternBody = ({ items, onValueChange, pluralLabel, value }) => {
+	const { isMobile, styles } = useFilterContext();
+	const noun = toRunningText(pluralLabel);
+	const matches = useMemo(() => {
+		if (!isPattern(value)) return null;
+		const regExp = compilePattern(value);
+		return items.filter((item) => !isPattern(item.label) && regExp.test(item.label));
+	}, [items, value]);
+	let results;
+	if (!matches) results = /* @__PURE__ */ jsxs(Text, {
+		color: "text/secondary",
+		textStyle: "body/md/regular",
+		children: [
+			"Enter a pattern with the wildcard ‘*’ to view ",
+			noun,
+			" with matching names."
+		]
+	});
+	else if (!matches.length) results = /* @__PURE__ */ jsxs(Text, {
+		color: "text/tertiary",
+		textStyle: "body/md/regular",
+		children: [
+			"(no matching ",
+			noun,
+			")"
+		]
+	});
+	else results = /* @__PURE__ */ jsx(BitkitList_default, {
+		size: "md",
+		children: matches.map((item) => /* @__PURE__ */ jsx(BitkitList_default.Item, { children: item.label }, item.value))
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		css: styles.pattern,
+		children: [/* @__PURE__ */ jsx(BitkitTextInput, {
+			helperText: "Allowed wildcard character: *",
+			label: "Wildcard pattern",
+			onValueChange: (text) => onValueChange(text ? [text] : []),
+			placeholder: "(e.g. *main*, release-*)",
+			size: isMobile ? "lg" : "md",
+			value
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.patternResults,
+			children: [/* @__PURE__ */ jsxs(Text, {
+				css: styles.patternResultsLabel,
+				children: ["Matching results", matches?.length ? ` (${matches.length})` : ""]
+			}), results]
+		})]
+	});
+};
+//#endregion
+export { FilterSelectForm as default };
+
+//# sourceMappingURL=FilterSelectForm.js.map

package/dist/components/BitkitFilter/components/FilterSelectForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSelectForm.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSelectForm.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Listbox } from '@chakra-ui/react/listbox';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../../icons';\nimport { type BitkitColorToken } from '../../../theme/themeUtils';\nimport BitkitCheckbox from '../../BitkitCheckbox/BitkitCheckbox';\nimport BitkitCheckboxGroup from '../../BitkitCheckboxGroup/BitkitCheckboxGroup';\nimport BitkitGroupHeading from '../../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitInlineLoading from '../../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitList from '../../BitkitList/BitkitList';\nimport BitkitSearchInput from '../../BitkitSearchInput/BitkitSearchInput';\nimport BitkitTextInput from '../../BitkitTextInput/BitkitTextInput';\nimport { useFilterContext } from '../BitkitFilter.context';\nimport { compilePattern, isEqualFilterValue, isPattern, toRunningText } from '../BitkitFilter.utils';\nimport { FilterPanelFooter, FilterPanelHeader } from './FilterPanel';\nimport FilterSearchInput from './FilterSearchInput';\n\nexport interface BitkitFilterSelectItem {\n  /** Lists the option under this heading, with the others of the same group. */\n  group?: string;\n  icon?: BitkitIconComponent;\n  /** Colors the icon, e.g. a status: `icon/positive` for \"Passed\". */\n  iconColor?: BitkitColorToken<'icon'>;\n  label: string;\n  value: string;\n}\n\n/**\n * Gathers the options by `group`, in the order each group first appears, so the list (and its\n * keyboard order) runs group by group. Ungrouped options come under an empty-named group.\n */\nconst groupItems = (items: BitkitFilterSelectItem[]) => {\n  const groups = new Map<string, BitkitFilterSelectItem[]>();\n  items.forEach((item) => {\n    const key = item.group ?? '';\n    groups.set(key, [...(groups.get(key) ?? []), item]);\n  });\n  return [...groups];\n};\n\n/** The list renders at most this many options; search narrows down the rest. */\nexport const MAX_VISIBLE_ITEMS = 100;\n\n/** Below this many options the list is short enough to scan, so there is no search input. */\nconst SEARCH_THRESHOLD = 5;\n\nexport interface FilterSelectFormProps {\n  /** The filter holds a value: the footer offers \"Clear\" instead of the wildcard-mode switch. */\n  isEditing: boolean;\n  /** Keeps `items` in their own order instead of listing the applied ones first — for a switch's fixed options. */\n  isOrderFixed?: boolean;\n  /** A value is always applied: no \"Clear\" in the footer. */\n  isRequired?: boolean;\n  items: BitkitFilterSelectItem[];\n  label: string;\n  loading?: boolean;\n  loadingLabel?: string;\n  multiple?: boolean;\n  onApply: (value: string[]) => void;\n  onCancel: () => void;\n  onSearchChange?: (searchText: string) => void;\n  pattern?: boolean;\n  pluralLabel: string;\n  searchPlaceholder?: string;\n  /**\n   * The applied selection with its labels. Without a search, any of it missing from `items` — e.g.\n   * left behind by a server search — is listed first, so it can still be unchecked.\n   */\n  selectedItems?: BitkitFilterSelectItem[];\n  value: string[];\n}\n\n/** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */\nconst FilterSelectForm = (props: FilterSelectFormProps) => {\n  const {\n    isEditing,\n    isOrderFixed,\n    isRequired,\n    items,\n    label,\n    loading,\n    loadingLabel = 'Loading...',\n    multiple,\n    onApply,\n    onCancel,\n    onSearchChange,\n    pattern,\n    pluralLabel,\n    searchPlaceholder = 'Search for options',\n    selectedItems = [],\n    value,\n  } = props;\n  const { isMobile, styles } = useFilterContext();\n\n  const [draft, setDraft] = useState(value);\n  const [mode, setMode] = useState<'list' | 'pattern'>(pattern && value[0] && isPattern(value[0]) ? 'pattern' : 'list');\n  const [searchText, setSearchText] = useState('');\n  // Set once the options have loaded, so a later reload (a search, or clearing it) keeps the search and footer.\n  const [hasLoaded, setHasLoaded] = useState(!loading);\n  if (!loading && !hasLoaded) setHasLoaded(true);\n\n  const onSearchTextChange = (text: string) => {\n    setSearchText(text);\n    onSearchChange?.(text);\n  };\n\n  // With `onSearchChange` the consumer filters `items` itself, e.g. on the server. Without a search,\n  // the applied options come first. `value` doesn't change while the panel is open, so the order is\n  // set when it opens and rows don't jump as options are (un)checked.\n  const matchingItems = useMemo(() => {\n    if (!searchText) {\n      if (isOrderFixed) return items;\n      const applied = value.flatMap((selected) => {\n        const item = items.find((option) => option.value === selected);\n        return item ?? selectedItems.find((option) => option.value === selected) ?? [];\n      });\n      return [...applied, ...items.filter((item) => !value.includes(item.value))];\n    }\n    if (onSearchChange) return items;\n    const query = searchText.toLowerCase();\n    return items.filter((item) => item.label.toLowerCase().includes(query));\n  }, [isOrderFixed, items, onSearchChange, searchText, selectedItems, value]);\n\n  const visibleGroups = useMemo(() => groupItems(matchingItems.slice(0, MAX_VISIBLE_ITEMS)), [matchingItems]);\n  const visibleItems = visibleGroups.flatMap(([, groupItems]) => groupItems);\n  // The first load shows only the title and a loading row; later loads keep the input and footer in place.\n  const isInitialLoading = !!loading && !hasLoaded;\n  const showSearch = !isInitialLoading && (!!onSearchChange || items.length > SEARCH_THRESHOLD);\n  const searchLabel = `Search ${toRunningText(pluralLabel)}`;\n  const showLimitHelper = matchingItems.length > MAX_VISIBLE_ITEMS;\n\n  const patternValue = draft[0] ?? '';\n  const isApplyDisabled =\n    isEqualFilterValue(draft, value) ||\n    (mode === 'pattern' && !(patternValue && isPattern(patternValue))) ||\n    (!!isRequired && !draft.length);\n\n  // Switching between the list and the pattern moves focus into the new view, so typing goes there.\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const hasSwitchedMode = useRef(false);\n  useEffect(() => {\n    if (!hasSwitchedMode.current) return;\n    bodyRef.current\n      ?.querySelector<HTMLElement>('input:not([type=hidden]), [role=listbox], input[type=checkbox]')\n      ?.focus();\n  }, [mode]);\n\n  let start;\n  if (isEditing && !isRequired) {\n    start = { label: multiple && isMobile ? 'Clear all' : 'Clear', onClick: () => onApply([]) };\n  } else if (pattern && !isEditing) {\n    start = {\n      label: mode === 'list' ? 'Use wildcard pattern' : 'Select from list',\n      onClick: () => {\n        hasSwitchedMode.current = true;\n        setMode(mode === 'list' ? 'pattern' : 'list');\n        setDraft([]);\n      },\n    };\n  }\n\n  let list;\n  if (loading) {\n    list = <BitkitInlineLoading css={styles.loading} label={loadingLabel} size={isMobile ? 'lg' : 'md'} />;\n  } else if (!visibleItems.length) {\n    list = (\n      <Text css={styles.loading} color=\"text/secondary\" textStyle={isMobile ? 'body/lg/regular' : 'body/md/regular'}>\n        {searchText ? 'No result. Refine your search term.' : 'No options available.'}\n      </Text>\n    );\n  } else if (multiple && !isMobile) {\n    list = (\n      <Box css={styles.checkboxList}>\n        <BitkitCheckboxGroup aria-label={label} onValueChange={setDraft} size=\"md\" value={draft}>\n          {visibleGroups.map(([group, groupItems]) => (\n            <Fragment key={group}>\n              {/* The list pads 20; the heading lines up 24 from the popover's edge, like the listbox's. */}\n              {!!group && <BitkitGroupHeading label={group} paddingBlockStart=\"12\" paddingInline=\"4\" />}\n              {groupItems.map((item) => (\n                <BitkitCheckbox\n                  key={item.value}\n                  labelText={\n                    item.icon ? (\n                      <HStack gap=\"4\">\n                        <item.icon color={item.iconColor} size=\"16\" />\n                        {item.label}\n                      </HStack>\n                    ) : (\n                      item.label\n                    )\n                  }\n                  value={item.value}\n                />\n              ))}\n            </Fragment>\n          ))}\n        </BitkitCheckboxGroup>\n        {showLimitHelper && <LimitHelper marginBlockStart=\"16\" />}\n      </Box>\n    );\n  } else {\n    list = (\n      <FilterListbox\n        groups={visibleGroups}\n        items={visibleItems}\n        label={label}\n        multiple={multiple}\n        onValueChange={setDraft}\n        showLimitHelper={showLimitHelper}\n        value={draft}\n      />\n    );\n  }\n\n  let search = null;\n  if (showSearch && isMobile) {\n    search = (\n      <FilterSearchInput\n        label={searchLabel}\n        onValueChange={onSearchTextChange}\n        placeholder={searchPlaceholder}\n        value={searchText}\n      />\n    );\n  } else if (showSearch) {\n    search = (\n      <Box css={styles.popoverSearch}>\n        <BitkitSearchInput\n          label={searchLabel}\n          onChange={onSearchTextChange}\n          placeholder={searchPlaceholder}\n          size=\"md\"\n          value={searchText}\n        />\n      </Box>\n    );\n  }\n\n  const body = (\n    <Box css={styles.popoverBody} ref={bodyRef}>\n      {mode === 'pattern' ? (\n        <FilterPatternBody items={items} onValueChange={setDraft} pluralLabel={pluralLabel} value={patternValue} />\n      ) : (\n        <>\n          {search}\n          {list}\n        </>\n      )}\n    </Box>\n  );\n\n  return (\n    <>\n      <FilterPanelHeader\n        count={multiple && mode === 'list' ? draft.length : undefined}\n        title={multiple ? pluralLabel : label}\n      />\n      {isMobile ? (\n        <Box flex=\"1\" overflowY=\"auto\">\n          {body}\n        </Box>\n      ) : (\n        body\n      )}\n      {!isInitialLoading && (\n        <FilterPanelFooter\n          applyLabel={multiple && mode === 'list' && draft.length ? `Apply (${draft.length})` : undefined}\n          isApplyDisabled={isApplyDisabled}\n          onApply={() => onApply(mode === 'pattern' ? [patternValue] : draft)}\n          onCancel={onCancel}\n          start={start}\n        />\n      )}\n    </>\n  );\n};\n\nconst LimitHelper = ({ marginBlockStart }: { marginBlockStart?: '16' }) => {\n  const { styles } = useFilterContext();\n\n  return (\n    <Text css={styles.listHelperText} marginBlockStart={marginBlockStart}>\n      Showing the first {MAX_VISIBLE_ITEMS} options. Search to find more.\n    </Text>\n  );\n};\n\ninterface FilterListboxProps {\n  groups: [string, BitkitFilterSelectItem[]][];\n  /** `groups` flattened, in the same order: the collection's (and so the keyboard's) order. */\n  items: BitkitFilterSelectItem[];\n  label: string;\n  multiple?: boolean;\n  onValueChange: (value: string[]) => void;\n  showLimitHelper: boolean;\n  value: string[];\n}\n\n/**\n * The option list for a single select, and on mobile for a multiple one too — there the rows are\n * full-width and highlighted when selected, with a checkbox drawn in front.\n */\nconst FilterListbox = (props: FilterListboxProps) => {\n  const { groups, items, label, multiple, onValueChange, showLimitHelper, value } = props;\n  const { isMobile, styles } = useFilterContext();\n  const collection = useMemo(() => createListCollection({ items }), [items]);\n  const checkboxStyles = useSlotRecipe({ key: 'checkbox' })({ size: 'lg' });\n\n  const checkIndicator = (\n    <Listbox.ItemIndicator>\n      <IconCheck size=\"16\" />\n    </Listbox.ItemIndicator>\n  );\n\n  const renderItem = (item: BitkitFilterSelectItem) => {\n    const state = value.includes(item.value) ? 'checked' : 'unchecked';\n    const check = multiple ? (\n      // Drawn, not a real checkbox: the option row is the control, and a nested input would be a second one.\n      <Box aria-hidden css={[checkboxStyles.control, styles.mobileListCheckbox]} data-state={state}>\n        <IconCheck />\n      </Box>\n    ) : (\n      <Box aria-hidden css={styles.mobileListCheck} data-state={state}>\n        <IconCheck size=\"16\" />\n      </Box>\n    );\n    return (\n      <Listbox.Item item={item} key={item.value}>\n        {isMobile && check}\n        {!!item.icon && <item.icon color={item.iconColor} size={isMobile ? '24' : '16'} />}\n        <Listbox.ItemText>{item.label}</Listbox.ItemText>\n        {!isMobile && checkIndicator}\n      </Listbox.Item>\n    );\n  };\n\n  return (\n    <Listbox.Root\n      collection={collection}\n      onValueChange={(details) => onValueChange(details.value)}\n      selectionMode={multiple ? 'multiple' : 'single'}\n      size={isMobile ? 'lg' : 'md'}\n      value={value}\n    >\n      {/* Zag points the content's aria-labelledby at the label, so it has to exist. */}\n      <Listbox.Label srOnly>{label}</Listbox.Label>\n      <Listbox.Content>\n        {groups.map(([group, groupItems]) => (\n          <Listbox.ItemGroup key={group}>\n            {!!group && (\n              <Listbox.ItemGroupLabel asChild>\n                <BitkitGroupHeading label={group} paddingBlockStart=\"12\" paddingInline=\"24\" />\n              </Listbox.ItemGroupLabel>\n            )}\n            {groupItems.map(renderItem)}\n          </Listbox.ItemGroup>\n        ))}\n        {showLimitHelper && (\n          <Box paddingBlockStart=\"8\" paddingInline=\"24\">\n            <LimitHelper />\n          </Box>\n        )}\n      </Listbox.Content>\n    </Listbox.Root>\n  );\n};\n\ninterface FilterPatternBodyProps {\n  items: BitkitFilterSelectItem[];\n  onValueChange: (value: string[]) => void;\n  pluralLabel: string;\n  value: string;\n}\n\nconst FilterPatternBody = ({ items, onValueChange, pluralLabel, value }: FilterPatternBodyProps) => {\n  const { isMobile, styles } = useFilterContext();\n  const noun = toRunningText(pluralLabel);\n  const matches = useMemo(() => {\n    if (!isPattern(value)) return null;\n    const regExp = compilePattern(value);\n    return items.filter((item) => !isPattern(item.label) && regExp.test(item.label));\n  }, [items, value]);\n\n  let results;\n  if (!matches) {\n    results = (\n      <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n        Enter a pattern with the wildcard &lsquo;*&rsquo; to view {noun} with matching names.\n      </Text>\n    );\n  } else if (!matches.length) {\n    results = (\n      <Text color=\"text/tertiary\" textStyle=\"body/md/regular\">\n        (no matching {noun})\n      </Text>\n    );\n  } else {\n    results = (\n      <BitkitList size=\"md\">\n        {matches.map((item) => (\n          <BitkitList.Item key={item.value}>{item.label}</BitkitList.Item>\n        ))}\n      </BitkitList>\n    );\n  }\n\n  return (\n    <Box css={styles.pattern}>\n      <BitkitTextInput\n        helperText=\"Allowed wildcard character: *\"\n        label=\"Wildcard pattern\"\n        onValueChange={(text) => onValueChange(text ? [text] : [])}\n        placeholder=\"(e.g. *main*, release-*)\"\n        size={isMobile ? 'lg' : 'md'}\n        value={value}\n      />\n      <Box css={styles.patternResults}>\n        <Text css={styles.patternResultsLabel}>Matching results{matches?.length ? ` (${matches.length})` : ''}</Text>\n        {results}\n      </Box>\n    </Box>\n  );\n};\n\nexport default FilterSelectForm;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAM,cAAc,UAAoC;CACtD,MAAM,yBAAS,IAAI,IAAsC;CACzD,MAAM,SAAS,SAAS;EACtB,MAAM,MAAM,KAAK,SAAS;EAC1B,OAAO,IAAI,KAAK,CAAC,GAAI,OAAO,IAAI,GAAG,KAAK,CAAC,GAAI,IAAI,CAAC;CACpD,CAAC;CACD,OAAO,CAAC,GAAG,MAAM;AACnB;;AAMA,IAAM,mBAAmB;;AA6BzB,IAAM,oBAAoB,UAAiC;CACzD,MAAM,EACJ,WACA,cACA,YACA,OACA,OACA,SACA,eAAe,cACf,UACA,SACA,UACA,gBACA,SACA,aACA,oBAAoB,sBACpB,gBAAgB,CAAC,GACjB,UACE;CACJ,MAAM,EAAE,UAAU,WAAW,iBAAiB;CAE9C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,CAAC,MAAM,WAAW,SAA6B,WAAW,MAAM,MAAM,UAAU,MAAM,EAAE,IAAI,YAAY,MAAM;CACpH,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAE/C,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,OAAO;CACnD,IAAI,CAAC,WAAW,CAAC,WAAW,aAAa,IAAI;CAE7C,MAAM,sBAAsB,SAAiB;EAC3C,cAAc,IAAI;EAClB,iBAAiB,IAAI;CACvB;CAKA,MAAM,gBAAgB,cAAc;EAClC,IAAI,CAAC,YAAY;GACf,IAAI,cAAc,OAAO;GAKzB,OAAO,CAAC,GAJQ,MAAM,SAAS,aAAa;IAE1C,OADa,MAAM,MAAM,WAAW,OAAO,UAAU,QAC9C,KAAQ,cAAc,MAAM,WAAW,OAAO,UAAU,QAAQ,KAAK,CAAC;GAC/E,CACW,GAAS,GAAG,MAAM,QAAQ,SAAS,CAAC,MAAM,SAAS,KAAK,KAAK,CAAC,CAAC;EAC5E;EACA,IAAI,gBAAgB,OAAO;EAC3B,MAAM,QAAQ,WAAW,YAAY;EACrC,OAAO,MAAM,QAAQ,SAAS,KAAK,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC;CACxE,GAAG;EAAC;EAAc;EAAO;EAAgB;EAAY;EAAe;CAAK,CAAC;CAE1E,MAAM,gBAAgB,cAAc,WAAW,cAAc,MAAM,GAAA,GAAoB,CAAC,GAAG,CAAC,aAAa,CAAC;CAC1G,MAAM,eAAe,cAAc,SAAS,GAAG,gBAAgB,UAAU;CAEzE,MAAM,mBAAmB,CAAC,CAAC,WAAW,CAAC;CACvC,MAAM,aAAa,CAAC,qBAAqB,CAAC,CAAC,kBAAkB,MAAM,SAAS;CAC5E,MAAM,cAAc,UAAU,cAAc,WAAW;CACvD,MAAM,kBAAkB,cAAc,SAAA;CAEtC,MAAM,eAAe,MAAM,MAAM;CACjC,MAAM,kBACJ,mBAAmB,OAAO,KAAK,KAC9B,SAAS,aAAa,EAAE,gBAAgB,UAAU,YAAY,MAC9D,CAAC,CAAC,cAAc,CAAC,MAAM;CAG1B,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,KAAK;CACpC,gBAAgB;EACd,IAAI,CAAC,gBAAgB,SAAS;EAC9B,QAAQ,SACJ,cAA2B,gEAAgE,CAAC,EAC5F,MAAM;CACZ,GAAG,CAAC,IAAI,CAAC;CAET,IAAI;CACJ,IAAI,aAAa,CAAC,YAChB,QAAQ;EAAE,OAAO,YAAY,WAAW,cAAc;EAAS,eAAe,QAAQ,CAAC,CAAC;CAAE;MACrF,IAAI,WAAW,CAAC,WACrB,QAAQ;EACN,OAAO,SAAS,SAAS,yBAAyB;EAClD,eAAe;GACb,gBAAgB,UAAU;GAC1B,QAAQ,SAAS,SAAS,YAAY,MAAM;GAC5C,SAAS,CAAC,CAAC;EACb;CACF;CAGF,IAAI;CACJ,IAAI,SACF,OAAO,oBAAC,qBAAD;EAAqB,KAAK,OAAO;EAAS,OAAO;EAAc,MAAM,WAAW,OAAO;CAAO,CAAA;MAChG,IAAI,CAAC,aAAa,QACvB,OACE,oBAAC,MAAD;EAAM,KAAK,OAAO;EAAS,OAAM;EAAiB,WAAW,WAAW,oBAAoB;EACzF,UAAA,aAAa,wCAAwC;CAClD,CAAA;MAEH,IAAI,YAAY,CAAC,UACtB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,qBAAD;GAAqB,cAAY;GAAO,eAAe;GAAU,MAAK;GAAK,OAAO;GAC/E,UAAA,cAAc,KAAK,CAAC,OAAO,gBAC1B,qBAAC,UAAD,EAAA,UAAA,CAEG,CAAC,CAAC,SAAS,oBAAC,oBAAD;IAAoB,OAAO;IAAO,mBAAkB;IAAK,eAAc;GAAK,CAAA,GACvF,WAAW,KAAK,SACf,oBAAC,gBAAD;IAEE,WACE,KAAK,OACH,qBAAC,QAAD;KAAQ,KAAI;KAAZ,UAAA,CACE,oBAAC,KAAK,MAAN;MAAW,OAAO,KAAK;MAAW,MAAK;KAAM,CAAA,GAC5C,KAAK,KACA;IAER,CAAA,IAAA,KAAK;IAGT,OAAO,KAAK;GACb,GAZM,KAAK,KAYX,CACF,CACO,EAAA,GAnBK,KAmBL,CACX;EACkB,CAAA,GACpB,mBAAmB,oBAAC,aAAD,EAAa,kBAAiB,KAAM,CAAA,CACrD;;MAGP,OACE,oBAAC,eAAD;EACE,QAAQ;EACR,OAAO;EACA;EACG;EACV,eAAe;EACE;EACjB,OAAO;CACR,CAAA;CAIL,IAAI,SAAS;CACb,IAAI,cAAc,UAChB,SACE,oBAAC,mBAAD;EACE,OAAO;EACP,eAAe;EACf,aAAa;EACb,OAAO;CACR,CAAA;MAEE,IAAI,YACT,SACE,oBAAC,KAAD;EAAK,KAAK,OAAO;EACf,UAAA,oBAAC,mBAAD;GACE,OAAO;GACP,UAAU;GACV,aAAa;GACb,MAAK;GACL,OAAO;EACR,CAAA;CACE,CAAA;CAIT,MAAM,OACJ,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAa,KAAK;EAChC,UAAA,SAAS,YACR,oBAAC,mBAAD;GAA0B;GAAO,eAAe;GAAuB;GAAa,OAAO;EAAe,CAAA,IAE1G,qBAAA,YAAA,EAAA,UAAA,CACG,QACA,IACD,EAAA,CAAA;CAED,CAAA;CAGP,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,mBAAD;GACE,OAAO,YAAY,SAAS,SAAS,MAAM,SAAS,KAAA;GACpD,OAAO,WAAW,cAAc;EACjC,CAAA;EACA,WACC,oBAAC,KAAD;GAAK,MAAK;GAAI,WAAU;GACrB,UAAA;EACE,CAAA,IAEL;EAED,CAAC,oBACA,oBAAC,mBAAD;GACE,YAAY,YAAY,SAAS,UAAU,MAAM,SAAS,UAAU,MAAM,OAAO,KAAK,KAAA;GACrE;GACjB,eAAe,QAAQ,SAAS,YAAY,CAAC,YAAY,IAAI,KAAK;GACxD;GACH;EACR,CAAA;CAEH,EAAA,CAAA;AAEN;AAEA,IAAM,eAAe,EAAE,uBAAoD;CACzE,MAAM,EAAE,WAAW,iBAAiB;CAEpC,OACE,qBAAC,MAAD;EAAM,KAAK,OAAO;EAAkC;EAApD,UAAA;GAAsE;;GAC/B;EACjC;;AAEV;;;;;AAiBA,IAAM,iBAAiB,UAA8B;CACnD,MAAM,EAAE,QAAQ,OAAO,OAAO,UAAU,eAAe,iBAAiB,UAAU;CAClF,MAAM,EAAE,UAAU,WAAW,iBAAiB;CAC9C,MAAM,aAAa,cAAc,qBAAqB,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;CACzE,MAAM,iBAAiB,cAAc,EAAE,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC;CAExE,MAAM,iBACJ,oBAAC,QAAQ,eAAT,EAAA,UACE,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA,EACD,CAAA;CAGzB,MAAM,cAAc,SAAiC;EACnD,MAAM,QAAQ,MAAM,SAAS,KAAK,KAAK,IAAI,YAAY;EACvD,MAAM,QAAQ,WAEZ,oBAAC,KAAD;GAAK,eAAA;GAAY,KAAK,CAAC,eAAe,SAAS,OAAO,kBAAkB;GAAG,cAAY;GACrF,UAAA,oBAAC,WAAD,CAAY,CAAA;EACT,CAAA,IAEL,oBAAC,KAAD;GAAK,eAAA;GAAY,KAAK,OAAO;GAAiB,cAAY;GACxD,UAAA,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;EACnB,CAAA;EAEP,OACE,qBAAC,QAAQ,MAAT;GAAoB;GAApB,UAAA;IACG,YAAY;IACZ,CAAC,CAAC,KAAK,QAAQ,oBAAC,KAAK,MAAN;KAAW,OAAO,KAAK;KAAW,MAAM,WAAW,OAAO;IAAO,CAAA;IACjF,oBAAC,QAAQ,UAAT,EAAA,UAAmB,KAAK,MAAwB,CAAA;IAC/C,CAAC,YAAY;GACF;EALiB,GAAA,KAAK,KAKtB;CAElB;CAEA,OACE,qBAAC,QAAQ,MAAT;EACc;EACZ,gBAAgB,YAAY,cAAc,QAAQ,KAAK;EACvD,eAAe,WAAW,aAAa;EACvC,MAAM,WAAW,OAAO;EACjB;EALT,UAAA,CAQE,oBAAC,QAAQ,OAAT;GAAe,QAAA;GAAQ,UAAA;EAAqB,CAAA,GAC5C,qBAAC,QAAQ,SAAT,EAAA,UAAA,CACG,OAAO,KAAK,CAAC,OAAO,gBACnB,qBAAC,QAAQ,WAAT,EAAA,UAAA,CACG,CAAC,CAAC,SACD,oBAAC,QAAQ,gBAAT;GAAwB,SAAA;GACtB,UAAA,oBAAC,oBAAD;IAAoB,OAAO;IAAO,mBAAkB;IAAK,eAAc;GAAM,CAAA;EACvD,CAAA,GAEzB,WAAW,IAAI,UAAU,CACT,EAAA,GAPK,KAOL,CACpB,GACA,mBACC,oBAAC,KAAD;GAAK,mBAAkB;GAAI,eAAc;GACvC,UAAA,oBAAC,aAAD,CAAc,CAAA;EACX,CAAA,CAEQ,EAAA,CAAA,CACL;;AAElB;AASA,IAAM,qBAAqB,EAAE,OAAO,eAAe,aAAa,YAAoC;CAClG,MAAM,EAAE,UAAU,WAAW,iBAAiB;CAC9C,MAAM,OAAO,cAAc,WAAW;CACtC,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,UAAU,KAAK,GAAG,OAAO;EAC9B,MAAM,SAAS,eAAe,KAAK;EACnC,OAAO,MAAM,QAAQ,SAAS,CAAC,UAAU,KAAK,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK,CAAC;CACjF,GAAG,CAAC,OAAO,KAAK,CAAC;CAEjB,IAAI;CACJ,IAAI,CAAC,SACH,UACE,qBAAC,MAAD;EAAM,OAAM;EAAiB,WAAU;EAAvC,UAAA;GAAyD;GACI;GAAK;EAC5D;;MAEH,IAAI,CAAC,QAAQ,QAClB,UACE,qBAAC,MAAD;EAAM,OAAM;EAAgB,WAAU;EAAtC,UAAA;GAAwD;GACxC;GAAK;EACf;;MAGR,UACE,oBAAC,oBAAD;EAAY,MAAK;EACd,UAAA,QAAQ,KAAK,SACZ,oBAAC,mBAAW,MAAZ,EAAA,UAAmC,KAAK,MAAuB,GAAzC,KAAK,KAAoC,CAChE;CACS,CAAA;CAIhB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,iBAAD;GACE,YAAW;GACX,OAAM;GACN,gBAAgB,SAAS,cAAc,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;GACzD,aAAY;GACZ,MAAM,WAAW,OAAO;GACjB;EACR,CAAA,GACD,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,qBAAC,MAAD;IAAM,KAAK,OAAO;IAAlB,UAAA,CAAuC,oBAAiB,SAAS,SAAS,KAAK,QAAQ,OAAO,KAAK,EAAS;GAC3G,CAAA,GAAA,OACE;EACF,CAAA,CAAA;;AAET"}

package/dist/components/BitkitMarkdown/BitkitMarkdown.js

@@ -1,7 +1,7 @@
 import BitkitCodeSnippet from "../BitkitCodeSnippet/BitkitCodeSnippet.js";
+import BitkitList_default from "../BitkitList/BitkitList.js";
 import BitkitHeading from "../BitkitHeading/BitkitHeading.js";
 import BitkitLink from "../BitkitLink/BitkitLink.js";
-import BitkitList_default from "../BitkitList/BitkitList.js";
 import { getTextContent } from "../../utilities/getTextContent.js";
 import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";

package/dist/components/BitkitNoteCard/BitkitNoteCard.js

@@ -3,8 +3,8 @@ import IconChevronDown from "../../icons/IconChevronDown.js";
 import IconChevronUp from "../../icons/IconChevronUp.js";
 import { ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
 import BitkitButton from "../BitkitButton/BitkitButton.js";
-import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
 import BitkitList_default from "../BitkitList/BitkitList.js";
+import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef, useState } from "react";

package/dist/components/index.d.ts

@@ -28,6 +28,12 @@ export { default as BitkitEmptyState, type BitkitEmptyStateProps } from './Bitki
 export { default as BitkitExpandableCard, type BitkitExpandableCardProps, } from './BitkitExpandableCard/BitkitExpandableCard';
 export { default as BitkitField, type BitkitFieldProps } from './BitkitField/BitkitField';
 export { default as BitkitFileInput, type BitkitFileInputProps } from './BitkitFileInput/BitkitFileInput';
+export { default as BitkitFilter, type BitkitFilterProps } from './BitkitFilter/BitkitFilter';
+export { type BitkitFilterAddProps } from './BitkitFilter/BitkitFilterAdd';
+export { type BitkitFilterDateRangeProps, type BitkitFilterDateRangeValue } from './BitkitFilter/BitkitFilterDateRange';
+export { type BitkitFilterSearchProps } from './BitkitFilter/BitkitFilterSearch';
+export { type BitkitFilterSelectItem, type BitkitFilterSelectProps } from './BitkitFilter/BitkitFilterSelect';
+export { type BitkitFilterSwitchItem, type BitkitFilterSwitchProps } from './BitkitFilter/BitkitFilterSwitch';
 export { default as BitkitGroupHeading, type BitkitGroupHeadingProps } from './BitkitGroupHeading/BitkitGroupHeading';
 export { default as BitkitHeading, type BitkitHeadingProps } from './BitkitHeading/BitkitHeading';
 export { default as BitkitIconButton, type BitkitIconButtonProps } from './BitkitIconButton/BitkitIconButton';
@@ -94,6 +100,5 @@ export { default as BitkitToggletip, type BitkitToggletipProps } from './BitkitT
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
-export { default as BitkitUIHeader, type BitkitUIHeaderAccountProps, type BitkitUIHeaderButtonProps, type BitkitUIHeaderControlAsAnchorProps, type BitkitUIHeaderControlAsButtonProps, type BitkitUIHeaderControlProps, type BitkitUIHeaderNavButtonProps, type BitkitUIHeaderProps, type BitkitUIHeaderSearchProps, uiHeaderHeight, } from './BitkitUIHeader/BitkitUIHeader';
 export { default as BitkitUISideNav, type BitkitUISideNavBodyProps, type BitkitUISideNavFooterHeadingProps, type BitkitUISideNavFooterProps, type BitkitUISideNavItemProps, type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, type BitkitUISideNavProps, type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, uiSideNavRailWidth, } from './BitkitUISideNav/BitkitUISideNav';
 export { useUISideNav } from './BitkitUISideNav/UISideNavContext';

package/dist/main.js

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