@planningcenter/tapestry 4.0.0-rc.1 → 4.0.0-rc.10

package/dist/componentRegistration.js

@@ -1,4 +1,5 @@
 import { register as r } from './packages/tapestry-render/dist/registry.js';
+import { ComboBox, ComboBoxItem, ComboBoxSection } from './components/combo-box/ComboBox.js';
 import { DatePicker } from './components/date-picker/DatePicker.js';
 import { NumberStepper } from './components/number-stepper/NumberStepper.js';
 import { PageHeader } from './components/page-header/PageHeader.js';
@@ -8,6 +9,9 @@ import { SidenavItem } from './components/sidenav/SidenavItem.js';
 import { SidenavSection } from './components/sidenav/SidenavSection.js';
 import { TimeField } from './components/time-field/TimeField.js';
 
+r("ComboBox", ComboBox);
+r("ComboBoxItem", ComboBoxItem);
+r("ComboBoxSection", ComboBoxSection);
 r("DatePicker", DatePicker);
 r("NumberStepper", NumberStepper);
 r("PageHeader", PageHeader);

package/dist/componentRegistration.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { DatePicker } from \"./components/date-picker/DatePicker\"\nimport { NumberStepper } from \"./components/number-stepper/NumberStepper\"\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Select } from \"./components/select/Select\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\nimport { TimeField } from \"./components/time-field/TimeField\"\n\nregister(\"DatePicker\", DatePicker)\nregister(\"NumberStepper\", NumberStepper)\nregister(\"PageHeader\", PageHeader)\nregister(\"Select\", Select)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\nregister(\"TimeField\", TimeField)\n"],"names":["register"],"mappings":";;;;;;;;;;AAWAA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,eAAe,EAAE,aAAa,CAAC;AACxCA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC1BA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC1CA,CAAQ,CAAC,WAAW,EAAE,SAAS,CAAC"}
+{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport {\n  ComboBox,\n  ComboBoxItem,\n  ComboBoxSection,\n} from \"./components/combo-box/ComboBox\"\nimport { DatePicker } from \"./components/date-picker/DatePicker\"\nimport { NumberStepper } from \"./components/number-stepper/NumberStepper\"\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Select } from \"./components/select/Select\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\nimport { TimeField } from \"./components/time-field/TimeField\"\n\nregister(\"ComboBox\", ComboBox)\nregister(\"ComboBoxItem\", ComboBoxItem)\nregister(\"ComboBoxSection\", ComboBoxSection)\nregister(\"DatePicker\", DatePicker)\nregister(\"NumberStepper\", NumberStepper)\nregister(\"PageHeader\", PageHeader)\nregister(\"Select\", Select)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\nregister(\"TimeField\", TimeField)\n"],"names":["register"],"mappings":";;;;;;;;;;;AAgBAA,CAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC;AAC9BA,CAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;AACtCA,CAAQ,CAAC,iBAAiB,EAAE,eAAe,CAAC;AAC5CA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,eAAe,EAAE,aAAa,CAAC;AACxCA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC1BA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC1CA,CAAQ,CAAC,WAAW,EAAE,SAAS,CAAC"}

package/dist/components/DataTable/DataTable.d.ts

@@ -23,6 +23,12 @@ export interface DataTableProps {
     errorState?: ReactNode;
     /** Returns a stable identity for each row. Defaults to `row.id`. */
     getRowId?: (row: unknown) => number | string;
+    /**
+     * Returns a URL to navigate to when the row is clicked. Rows with a link
+     * render as navigable elements (clickable, keyboard-focusable, and
+     * openable in a new tab). Works alongside `onRowClick` and `selectable`.
+     */
+    getRowLink?: (row: unknown) => string;
     /**
      * Async loading state for the table body.
      * - `"loading"`: While `data` is empty, replaces the empty state with a
@@ -32,6 +38,12 @@ export interface DataTableProps {
      * - `"idle"` (default): Normal rendering.
      */
     loadingState?: DataTableLoadingState;
+    /**
+     * Called with the row when it is clicked. Rows with a click handler render
+     * as interactive elements (clickable and keyboard-focusable). When
+     * `getRowLink` is also set, both run and the row navigates.
+     */
+    onRowClick?: (row: unknown) => void;
     /** Callback invoked when the sort state changes. */
     onSortChange?: (sort: Sort) => void;
     /** Ref to the scroll container the sticky header should track. Takes priority over `scrollContainerSelector`. Only used when `stickyHeader` is true. */
@@ -62,7 +74,7 @@ export type DataTableElementProps = CombineAriaPropsWithCustomProps<AriaTablePro
  * @component
  */
 export declare const DataTable: {
-    ({ className, columns, data, emptyState, errorState, getRowId, loadingState, scrollContainerRef, scrollContainerSelector, selectable, stickyHeader, sortBy, onSortChange, ...restProps }: DataTableElementProps): React.JSX.Element;
+    ({ className, columns, data, emptyState, errorState, getRowId, getRowLink, loadingState, scrollContainerRef, scrollContainerSelector, selectable, stickyHeader, sortBy, onRowClick, onSortChange, ...restProps }: DataTableElementProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AACd,OAAO,EASL,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAIxD,MAAM,MAAM,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,CAAA;AAEhE,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAEhE,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,oCAAoC;IACpC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,CAAA;IAC5C;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACnC,wJAAwJ;IACxJ,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjD,+IAA+I;IAC/I,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,0QAA0Q;IAC1Q,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAID,KAAK,oBAAoB,GAAG,UAAU,GAAG,MAAM,CAAA;AAE/C,KAAK,uBAAuB,GAAG,KAAK,CAAA;AAEpC,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,uBAAuB,CACxB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS;8LAenB,qBAAqB;;CAgIvB,CAAA"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AACd,OAAO,EASL,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAIxD,MAAM,MAAM,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,CAAA;AAEhE,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAEhE,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,oCAAoC;IACpC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,CAAA;IAC5C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAA;IACrC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAA;IACnC,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACnC,wJAAwJ;IACxJ,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjD,+IAA+I;IAC/I,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,0QAA0Q;IAC1Q,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAID,KAAK,oBAAoB,GAAG,UAAU,GAAG,MAAM,CAAA;AAE/C,KAAK,uBAAuB,GAAG,KAAK,CAAA;AAEpC,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,uBAAuB,CACxB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS;sNAiBnB,qBAAqB;;CAyIvB,CAAA"}

package/dist/components/DataTable/DataTable.js

@@ -20,7 +20,8 @@ const DEFAULT_ERROR_STATE = "Something went wrong.";
  *
  * @component
  */
-const DataTable = ({ className, columns, data, emptyState, errorState, getRowId, loadingState = "idle", scrollContainerRef, scrollContainerSelector = ".content-wrap", selectable, stickyHeader, sortBy, onSortChange, ...restProps }) => {
+const DataTable = ({ className, columns, data, emptyState, errorState, getRowId, getRowLink, loadingState = "idle", scrollContainerRef, scrollContainerSelector = ".content-wrap", selectable, stickyHeader, sortBy, onRowClick, onSortChange, ...restProps }) => {
+    const rowsAreInteractive = Boolean(onRowClick || getRowLink);
     const combinedClassName = classNames("tds-data-table", className);
     const sortDescriptor = useSortDescriptor(sortBy);
     const { hasScrollContainer, wrapperRef } = useStickyHeader(stickyHeader, scrollContainerRef, scrollContainerSelector);
@@ -59,7 +60,9 @@ const DataTable = ({ className, columns, data, emptyState, errorState, getRowId,
                         column.sortable && (React__default.createElement(Icon, { className: "tds-data-table-column-icon tds-data-table-column-icon--sort", symbol: "general#up-caret", "aria-hidden": true })))))),
                 React__default.createElement(TableBody, { className: "tds-data-table-body", renderEmptyState: renderEmptyState }, data.map((row, rowIndex) => {
                     const rowKey = getRowKey(row, rowIndex, getRowId);
-                    return (React__default.createElement(Row, { key: rowKey, id: rowKey, className: "tds-data-table-row" },
+                    return (React__default.createElement(Row, { key: rowKey, id: rowKey, href: getRowLink?.(row), onAction: onRowClick ? () => onRowClick(row) : undefined, className: classNames("tds-data-table-row", {
+                            "tds-data-table-row--interactive": rowsAreInteractive,
+                        }) },
                         selectable && (React__default.createElement(Cell, { className: "tds-data-table-cell tds-data-table-cell--align-center" },
                             React__default.createElement(Checkbox, { slot: "selection", className: "tds-data-table-selectable-checkbox" }))),
                         preparedColumns.map((prepared) => (React__default.createElement(Cell, { key: prepared.column.name, "data-pii": prepared.column.pii || undefined, className: classNames("tds-data-table-cell", {

package/dist/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, {\n  type ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  Cell,\n  Checkbox,\n  Column,\n  Row,\n  type SortDescriptor,\n  Table,\n  TableBody,\n  TableHeader,\n  type TableProps as AriaTableProps,\n} from \"react-aria-components/Table\"\n\nimport type { DataTableColumn } from \"./DataTableColumn\"\nimport { prepareColumn, type PreparedColumn } from \"./DataTableColumnTypes\"\nimport { getRowKey } from \"./DataTableRow\"\n\nexport type Sort = { column: string; direction: \"asc\" | \"desc\" }\n\nexport type DataTableLoadingState = \"error\" | \"idle\" | \"loading\"\n\nexport interface DataTableProps {\n  /**\n   * Columns define what data is displayed and how. Pass a stable reference\n   * (e.g. a module constant or memoized value); columns are prepared per array\n   * identity, so an inline array rebuilds each column's formatter every render.\n   */\n  columns: DataTableColumn[]\n  /** The array of rows to display. */\n  data: unknown[]\n  /** Rendered in place of the table body when there is no data. */\n  emptyState?: ReactNode\n  /** Rendered in place of the table body when `loadingState` is `\"error\"`. */\n  errorState?: ReactNode\n  /** Returns a stable identity for each row. Defaults to `row.id`. */\n  getRowId?: (row: unknown) => number | string\n  /**\n   * Async loading state for the table body.\n   * - `\"loading\"`: While `data` is empty, replaces the empty state with a\n   *   centered spinner.\n   * - `\"error\"`: While `data` is empty, replaces the empty state with\n   *   `errorState` (or a default error message).\n   * - `\"idle\"` (default): Normal rendering.\n   */\n  loadingState?: DataTableLoadingState\n  /** Callback invoked when the sort state changes. */\n  onSortChange?: (sort: Sort) => void\n  /** Ref to the scroll container the sticky header should track. Takes priority over `scrollContainerSelector`. Only used when `stickyHeader` is true. */\n  scrollContainerRef?: React.RefObject<HTMLElement>\n  /** CSS selector for the scroll container the sticky header should track. Only used when `stickyHeader` is true. Defaults to \".content-wrap\" */\n  scrollContainerSelector?: string\n  /** Enables row selection via checkboxes, including a \"select all\" checkbox in the header. */\n  selectable?: boolean\n  /** The current sort state for the table. */\n  sortBy?: Sort\n  /** Enables a sticky header that tracks an outer scroll container. Progressive enhancement: Relies on `animation-timeline: scroll()`, which isn't supported in all browsers (e.g. Firefox) — the header scrolls with the table body instead of sticking in those cases. */\n  stickyHeader?: boolean\n}\n\nconst DEFAULT_ERROR_STATE = \"Something went wrong.\"\n\ntype AriaTablePropsToOmit = \"children\" | \"slot\"\n\ntype AriaTablePropsToInclude = never\n\nexport type DataTableElementProps = CombineAriaPropsWithCustomProps<\n  AriaTableProps,\n  DataTableProps,\n  AriaTablePropsToOmit,\n  AriaTablePropsToInclude\n>\n\n/**\n * A table for displaying tabular data. Built on React Aria's `Table`.\n *\n * Each column declares a `type` that controls how its cell values are\n * formatted: `string`, `number`, `currency`, `date`, `datetime`, `boolean`,\n * `enum`, and `custom`. A column's `render` function always takes precedence\n * over the built-in type formatting.\n *\n * Sorting, filtering, pagination, and other RFC features are not yet\n * implemented.\n *\n * @component\n */\nexport const DataTable = ({\n  className,\n  columns,\n  data,\n  emptyState,\n  errorState,\n  getRowId,\n  loadingState = \"idle\",\n  scrollContainerRef,\n  scrollContainerSelector = \".content-wrap\",\n  selectable,\n  stickyHeader,\n  sortBy,\n  onSortChange,\n  ...restProps\n}: DataTableElementProps) => {\n  const combinedClassName = classNames(\"tds-data-table\", className)\n  const sortDescriptor = useSortDescriptor(sortBy)\n  const { hasScrollContainer, wrapperRef } = useStickyHeader(\n    stickyHeader,\n    scrollContainerRef,\n    scrollContainerSelector\n  )\n\n  // React Aria only invokes `renderEmptyState` when the collection is empty, so\n  // the loading spinner and error message only take over the body while `data`\n  // is empty; once rows exist they always render.\n  const emptyStateContent = getEmptyStateContent({\n    emptyState,\n    errorState,\n    loadingState,\n  })\n  const renderEmptyState = emptyStateContent\n    ? () => emptyStateContent\n    : undefined\n\n  // Keyed on column names rather than the `columns` array identity so a fresh\n  // `columns` literal each render doesn't rebuild every formatter. `columns` is\n  // intentionally omitted from the deps.\n  const columnKey = columns.map((c) => `${c.name}/${c.type}`).join(\"|\")\n  const preparedColumns = useMemo<PreparedColumn[]>(\n    () => columns.map(prepareColumn),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [columnKey]\n  )\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={classNames(\"tds-data-table-wrapper\", {\n        \"tds-data-table-wrapper--sticky-header\": hasScrollContainer,\n      })}\n    >\n      <div className=\"tds-data-table-scroll\">\n        <Table\n          {...restProps}\n          selectionMode={selectable ? \"multiple\" : \"none\"}\n          className={combinedClassName}\n          sortDescriptor={sortDescriptor}\n          onSortChange={(sort) => {\n            onSortChange?.(serializeSort(sort))\n          }}\n        >\n          <TableHeader className=\"tds-data-table-header\">\n            {/*\n              Rendered as a sibling before the `preparedColumns.map` below\n              (not folded into it) so the map's `index` still starts at 0 for\n              the first *data* column — that's what keeps\n              `isRowHeader={index === 0}` pointing at the first data column\n              instead of this selection column.\n            */}\n            {selectable && (\n              <Column className=\"tds-data-table-column tds-data-table-column--align-center\">\n                <Checkbox\n                  slot=\"selection\"\n                  className=\"tds-data-table-selectable-checkbox\"\n                />\n              </Column>\n            )}\n            {preparedColumns.map(({ align, column }, index) => (\n              <Column\n                key={column.name}\n                id={column.name}\n                isRowHeader={index === 0}\n                className={classNames(\"tds-data-table-column\", {\n                  [`tds-data-table-column--align-${align}`]: align !== \"start\",\n                })}\n                allowsSorting={column.sortable}\n              >\n                {column.hideLabel ? (\n                  <span className=\"tds-data-table-column-label--hidden\">\n                    {column.headerLabel}\n                  </span>\n                ) : (\n                  column.headerLabel\n                )}\n                {column.sortable && (\n                  <Icon\n                    className=\"tds-data-table-column-icon tds-data-table-column-icon--sort\"\n                    symbol=\"general#up-caret\"\n                    aria-hidden={true}\n                  />\n                )}\n              </Column>\n            ))}\n          </TableHeader>\n          <TableBody\n            className=\"tds-data-table-body\"\n            renderEmptyState={renderEmptyState}\n          >\n            {data.map((row, rowIndex) => {\n              const rowKey = getRowKey(row, rowIndex, getRowId)\n              return (\n                <Row key={rowKey} id={rowKey} className=\"tds-data-table-row\">\n                  {selectable && (\n                    <Cell className=\"tds-data-table-cell tds-data-table-cell--align-center\">\n                      <Checkbox\n                        slot=\"selection\"\n                        className=\"tds-data-table-selectable-checkbox\"\n                      />\n                    </Cell>\n                  )}\n                  {preparedColumns.map((prepared) => (\n                    <Cell\n                      key={prepared.column.name}\n                      data-pii={prepared.column.pii || undefined}\n                      className={classNames(\"tds-data-table-cell\", {\n                        [`tds-data-table-cell--align-${prepared.align}`]:\n                          prepared.align !== \"start\",\n                        \"tds-data-table-cell--numeric\": prepared.isNumeric,\n                      })}\n                    >\n                      {prepared.renderCell(row)}\n                    </Cell>\n                  ))}\n                </Row>\n              )\n            })}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\nDataTable.displayName = \"DataTable\"\n\n/**\n * Resolves the content rendered in the table body's empty-state slot based on\n * `loadingState`, falling back to `emptyState`. Returns `null` when nothing\n * should render (idle with no `emptyState`).\n */\nfunction getEmptyStateContent({\n  emptyState,\n  errorState,\n  loadingState,\n}: {\n  emptyState: ReactNode\n  errorState: ReactNode\n  loadingState: DataTableLoadingState\n}): ReactNode {\n  if (loadingState === \"loading\") {\n    return (\n      <div className=\"tds-data-table-loading\" role=\"status\">\n        <span className=\"tds-data-table-cell-label--hidden\">Loading</span>\n        <span className=\"tds-data-table-loading-spinner\" aria-hidden=\"true\">\n          <LoadingSpinner />\n        </span>\n      </div>\n    )\n  }\n\n  // Error and empty share the same container; they differ only in content.\n  const content =\n    loadingState === \"error\" ? (errorState ?? DEFAULT_ERROR_STATE) : emptyState\n  if (content == null) return null\n\n  return <div className=\"tds-data-table-empty\">{content}</div>\n}\n\nfunction useSortDescriptor(\n  sortBy: Sort | undefined\n): SortDescriptor | undefined {\n  return useMemo(() => {\n    if (!sortBy) return undefined\n    return deserializeSort(sortBy)\n  }, [sortBy])\n}\n\nfunction deserializeSort(sort: Sort): SortDescriptor {\n  if (sort.direction === \"desc\")\n    return { column: sort.column, direction: \"descending\" }\n  return { column: sort.column, direction: \"ascending\" }\n}\n\nfunction serializeSort(sort: SortDescriptor): Sort {\n  if (sort.direction === \"descending\")\n    return { column: sort.column as string, direction: \"desc\" }\n  return { column: sort.column as string, direction: \"asc\" }\n}\n\nfunction useStickyHeader(\n  stickyHeader: boolean | undefined,\n  scrollContainerRef: React.RefObject<HTMLElement> | undefined,\n  scrollContainerSelector: string | undefined\n) {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const [hasScrollContainer, setHasScrollContainer] = useState(false)\n\n  useLayoutEffect(() => {\n    setHasScrollContainer(false)\n    if (!stickyHeader) return\n    if (typeof ResizeObserver === \"undefined\") return\n    const wrapper = wrapperRef.current\n    if (!wrapper) return\n\n    const scrollContainer = getScrollContainer(\n      scrollContainerRef,\n      scrollContainerSelector,\n      wrapper\n    )\n    if (!scrollContainer) return\n\n    setHasScrollContainer(true)\n\n    let thead: HTMLElement | null = null\n\n    const resizeObserver = new ResizeObserver(() => {\n      if (!thead) {\n        thead = wrapper.querySelector<HTMLElement>(\".tds-data-table-header\")\n        if (!thead) return\n        scrollContainer.style.setProperty(\n          \"scroll-timeline-name\",\n          \"--_sticky-header-scroll\"\n        )\n      }\n\n      const { top: wrapperTop, bottom: wrapperBottom } =\n        wrapper.getBoundingClientRect()\n      const { top: scrollContainerTop } =\n        scrollContainer.getBoundingClientRect()\n      // Derive headerTop from the untransformed wrapper to avoid reading the\n      // scroll-driven translateY that getBoundingClientRect() includes on thead.\n      const headerTop = wrapperTop + wrapper.clientTop\n      const start = scrollContainer.scrollTop + (headerTop - scrollContainerTop)\n      const max = Math.max(0, wrapperBottom - headerTop - thead.offsetHeight)\n      wrapper.style.setProperty(\"--_sticky-header-scroll-start\", `${start}px`)\n      wrapper.style.setProperty(\"--_sticky-header-scroll-max\", `${max}px`)\n    })\n\n    resizeObserver.observe(wrapper)\n    resizeObserver.observe(scrollContainer)\n\n    return () => {\n      resizeObserver.disconnect()\n      wrapper.style.removeProperty(\"--_sticky-header-scroll-start\")\n      wrapper.style.removeProperty(\"--_sticky-header-scroll-max\")\n    }\n  }, [stickyHeader, scrollContainerRef, scrollContainerSelector])\n\n  return { hasScrollContainer, wrapperRef }\n}\n\nfunction getScrollContainer(\n  scrollContainerRef: React.RefObject<HTMLElement> | undefined,\n  scrollContainerSelector: string | undefined,\n  wrapper: HTMLElement\n): HTMLElement | undefined {\n  const element =\n    scrollContainerRef?.current ??\n    getScrollContainerFromSelector(scrollContainerSelector, wrapper)\n  if (element instanceof Window) return\n  return element\n}\n\nfunction getScrollContainerFromSelector(\n  scrollContainerSelector: string | undefined,\n  wrapper: HTMLElement\n): HTMLElement | undefined {\n  return scrollContainerSelector\n    ? (wrapper.parentElement?.closest<HTMLElement>(scrollContainerSelector) ??\n        undefined)\n    : undefined\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, {\n  type ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  Cell,\n  Checkbox,\n  Column,\n  Row,\n  type SortDescriptor,\n  Table,\n  TableBody,\n  TableHeader,\n  type TableProps as AriaTableProps,\n} from \"react-aria-components/Table\"\n\nimport type { DataTableColumn } from \"./DataTableColumn\"\nimport { prepareColumn, type PreparedColumn } from \"./DataTableColumnTypes\"\nimport { getRowKey } from \"./DataTableRow\"\n\nexport type Sort = { column: string; direction: \"asc\" | \"desc\" }\n\nexport type DataTableLoadingState = \"error\" | \"idle\" | \"loading\"\n\nexport interface DataTableProps {\n  /**\n   * Columns define what data is displayed and how. Pass a stable reference\n   * (e.g. a module constant or memoized value); columns are prepared per array\n   * identity, so an inline array rebuilds each column's formatter every render.\n   */\n  columns: DataTableColumn[]\n  /** The array of rows to display. */\n  data: unknown[]\n  /** Rendered in place of the table body when there is no data. */\n  emptyState?: ReactNode\n  /** Rendered in place of the table body when `loadingState` is `\"error\"`. */\n  errorState?: ReactNode\n  /** Returns a stable identity for each row. Defaults to `row.id`. */\n  getRowId?: (row: unknown) => number | string\n  /**\n   * Returns a URL to navigate to when the row is clicked. Rows with a link\n   * render as navigable elements (clickable, keyboard-focusable, and\n   * openable in a new tab). Works alongside `onRowClick` and `selectable`.\n   */\n  getRowLink?: (row: unknown) => string\n  /**\n   * Async loading state for the table body.\n   * - `\"loading\"`: While `data` is empty, replaces the empty state with a\n   *   centered spinner.\n   * - `\"error\"`: While `data` is empty, replaces the empty state with\n   *   `errorState` (or a default error message).\n   * - `\"idle\"` (default): Normal rendering.\n   */\n  loadingState?: DataTableLoadingState\n  /**\n   * Called with the row when it is clicked. Rows with a click handler render\n   * as interactive elements (clickable and keyboard-focusable). When\n   * `getRowLink` is also set, both run and the row navigates.\n   */\n  onRowClick?: (row: unknown) => void\n  /** Callback invoked when the sort state changes. */\n  onSortChange?: (sort: Sort) => void\n  /** Ref to the scroll container the sticky header should track. Takes priority over `scrollContainerSelector`. Only used when `stickyHeader` is true. */\n  scrollContainerRef?: React.RefObject<HTMLElement>\n  /** CSS selector for the scroll container the sticky header should track. Only used when `stickyHeader` is true. Defaults to \".content-wrap\" */\n  scrollContainerSelector?: string\n  /** Enables row selection via checkboxes, including a \"select all\" checkbox in the header. */\n  selectable?: boolean\n  /** The current sort state for the table. */\n  sortBy?: Sort\n  /** Enables a sticky header that tracks an outer scroll container. Progressive enhancement: Relies on `animation-timeline: scroll()`, which isn't supported in all browsers (e.g. Firefox) — the header scrolls with the table body instead of sticking in those cases. */\n  stickyHeader?: boolean\n}\n\nconst DEFAULT_ERROR_STATE = \"Something went wrong.\"\n\ntype AriaTablePropsToOmit = \"children\" | \"slot\"\n\ntype AriaTablePropsToInclude = never\n\nexport type DataTableElementProps = CombineAriaPropsWithCustomProps<\n  AriaTableProps,\n  DataTableProps,\n  AriaTablePropsToOmit,\n  AriaTablePropsToInclude\n>\n\n/**\n * A table for displaying tabular data. Built on React Aria's `Table`.\n *\n * Each column declares a `type` that controls how its cell values are\n * formatted: `string`, `number`, `currency`, `date`, `datetime`, `boolean`,\n * `enum`, and `custom`. A column's `render` function always takes precedence\n * over the built-in type formatting.\n *\n * Sorting, filtering, pagination, and other RFC features are not yet\n * implemented.\n *\n * @component\n */\nexport const DataTable = ({\n  className,\n  columns,\n  data,\n  emptyState,\n  errorState,\n  getRowId,\n  getRowLink,\n  loadingState = \"idle\",\n  scrollContainerRef,\n  scrollContainerSelector = \".content-wrap\",\n  selectable,\n  stickyHeader,\n  sortBy,\n  onRowClick,\n  onSortChange,\n  ...restProps\n}: DataTableElementProps) => {\n  const rowsAreInteractive = Boolean(onRowClick || getRowLink)\n  const combinedClassName = classNames(\"tds-data-table\", className)\n  const sortDescriptor = useSortDescriptor(sortBy)\n  const { hasScrollContainer, wrapperRef } = useStickyHeader(\n    stickyHeader,\n    scrollContainerRef,\n    scrollContainerSelector\n  )\n\n  // React Aria only invokes `renderEmptyState` when the collection is empty, so\n  // the loading spinner and error message only take over the body while `data`\n  // is empty; once rows exist they always render.\n  const emptyStateContent = getEmptyStateContent({\n    emptyState,\n    errorState,\n    loadingState,\n  })\n  const renderEmptyState = emptyStateContent\n    ? () => emptyStateContent\n    : undefined\n\n  // Keyed on column names rather than the `columns` array identity so a fresh\n  // `columns` literal each render doesn't rebuild every formatter. `columns` is\n  // intentionally omitted from the deps.\n  const columnKey = columns.map((c) => `${c.name}/${c.type}`).join(\"|\")\n  const preparedColumns = useMemo<PreparedColumn[]>(\n    () => columns.map(prepareColumn),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [columnKey]\n  )\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={classNames(\"tds-data-table-wrapper\", {\n        \"tds-data-table-wrapper--sticky-header\": hasScrollContainer,\n      })}\n    >\n      <div className=\"tds-data-table-scroll\">\n        <Table\n          {...restProps}\n          selectionMode={selectable ? \"multiple\" : \"none\"}\n          className={combinedClassName}\n          sortDescriptor={sortDescriptor}\n          onSortChange={(sort) => {\n            onSortChange?.(serializeSort(sort))\n          }}\n        >\n          <TableHeader className=\"tds-data-table-header\">\n            {/*\n              Rendered as a sibling before the `preparedColumns.map` below\n              (not folded into it) so the map's `index` still starts at 0 for\n              the first *data* column — that's what keeps\n              `isRowHeader={index === 0}` pointing at the first data column\n              instead of this selection column.\n            */}\n            {selectable && (\n              <Column className=\"tds-data-table-column tds-data-table-column--align-center\">\n                <Checkbox\n                  slot=\"selection\"\n                  className=\"tds-data-table-selectable-checkbox\"\n                />\n              </Column>\n            )}\n            {preparedColumns.map(({ align, column }, index) => (\n              <Column\n                key={column.name}\n                id={column.name}\n                isRowHeader={index === 0}\n                className={classNames(\"tds-data-table-column\", {\n                  [`tds-data-table-column--align-${align}`]: align !== \"start\",\n                })}\n                allowsSorting={column.sortable}\n              >\n                {column.hideLabel ? (\n                  <span className=\"tds-data-table-column-label--hidden\">\n                    {column.headerLabel}\n                  </span>\n                ) : (\n                  column.headerLabel\n                )}\n                {column.sortable && (\n                  <Icon\n                    className=\"tds-data-table-column-icon tds-data-table-column-icon--sort\"\n                    symbol=\"general#up-caret\"\n                    aria-hidden={true}\n                  />\n                )}\n              </Column>\n            ))}\n          </TableHeader>\n          <TableBody\n            className=\"tds-data-table-body\"\n            renderEmptyState={renderEmptyState}\n          >\n            {data.map((row, rowIndex) => {\n              const rowKey = getRowKey(row, rowIndex, getRowId)\n              return (\n                <Row\n                  key={rowKey}\n                  id={rowKey}\n                  href={getRowLink?.(row)}\n                  onAction={onRowClick ? () => onRowClick(row) : undefined}\n                  className={classNames(\"tds-data-table-row\", {\n                    \"tds-data-table-row--interactive\": rowsAreInteractive,\n                  })}\n                >\n                  {selectable && (\n                    <Cell className=\"tds-data-table-cell tds-data-table-cell--align-center\">\n                      <Checkbox\n                        slot=\"selection\"\n                        className=\"tds-data-table-selectable-checkbox\"\n                      />\n                    </Cell>\n                  )}\n                  {preparedColumns.map((prepared) => (\n                    <Cell\n                      key={prepared.column.name}\n                      data-pii={prepared.column.pii || undefined}\n                      className={classNames(\"tds-data-table-cell\", {\n                        [`tds-data-table-cell--align-${prepared.align}`]:\n                          prepared.align !== \"start\",\n                        \"tds-data-table-cell--numeric\": prepared.isNumeric,\n                      })}\n                    >\n                      {prepared.renderCell(row)}\n                    </Cell>\n                  ))}\n                </Row>\n              )\n            })}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\nDataTable.displayName = \"DataTable\"\n\n/**\n * Resolves the content rendered in the table body's empty-state slot based on\n * `loadingState`, falling back to `emptyState`. Returns `null` when nothing\n * should render (idle with no `emptyState`).\n */\nfunction getEmptyStateContent({\n  emptyState,\n  errorState,\n  loadingState,\n}: {\n  emptyState: ReactNode\n  errorState: ReactNode\n  loadingState: DataTableLoadingState\n}): ReactNode {\n  if (loadingState === \"loading\") {\n    return (\n      <div className=\"tds-data-table-loading\" role=\"status\">\n        <span className=\"tds-data-table-cell-label--hidden\">Loading</span>\n        <span className=\"tds-data-table-loading-spinner\" aria-hidden=\"true\">\n          <LoadingSpinner />\n        </span>\n      </div>\n    )\n  }\n\n  // Error and empty share the same container; they differ only in content.\n  const content =\n    loadingState === \"error\" ? (errorState ?? DEFAULT_ERROR_STATE) : emptyState\n  if (content == null) return null\n\n  return <div className=\"tds-data-table-empty\">{content}</div>\n}\n\nfunction useSortDescriptor(\n  sortBy: Sort | undefined\n): SortDescriptor | undefined {\n  return useMemo(() => {\n    if (!sortBy) return undefined\n    return deserializeSort(sortBy)\n  }, [sortBy])\n}\n\nfunction deserializeSort(sort: Sort): SortDescriptor {\n  if (sort.direction === \"desc\")\n    return { column: sort.column, direction: \"descending\" }\n  return { column: sort.column, direction: \"ascending\" }\n}\n\nfunction serializeSort(sort: SortDescriptor): Sort {\n  if (sort.direction === \"descending\")\n    return { column: sort.column as string, direction: \"desc\" }\n  return { column: sort.column as string, direction: \"asc\" }\n}\n\nfunction useStickyHeader(\n  stickyHeader: boolean | undefined,\n  scrollContainerRef: React.RefObject<HTMLElement> | undefined,\n  scrollContainerSelector: string | undefined\n) {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const [hasScrollContainer, setHasScrollContainer] = useState(false)\n\n  useLayoutEffect(() => {\n    setHasScrollContainer(false)\n    if (!stickyHeader) return\n    if (typeof ResizeObserver === \"undefined\") return\n    const wrapper = wrapperRef.current\n    if (!wrapper) return\n\n    const scrollContainer = getScrollContainer(\n      scrollContainerRef,\n      scrollContainerSelector,\n      wrapper\n    )\n    if (!scrollContainer) return\n\n    setHasScrollContainer(true)\n\n    let thead: HTMLElement | null = null\n\n    const resizeObserver = new ResizeObserver(() => {\n      if (!thead) {\n        thead = wrapper.querySelector<HTMLElement>(\".tds-data-table-header\")\n        if (!thead) return\n        scrollContainer.style.setProperty(\n          \"scroll-timeline-name\",\n          \"--_sticky-header-scroll\"\n        )\n      }\n\n      const { top: wrapperTop, bottom: wrapperBottom } =\n        wrapper.getBoundingClientRect()\n      const { top: scrollContainerTop } =\n        scrollContainer.getBoundingClientRect()\n      // Derive headerTop from the untransformed wrapper to avoid reading the\n      // scroll-driven translateY that getBoundingClientRect() includes on thead.\n      const headerTop = wrapperTop + wrapper.clientTop\n      const start = scrollContainer.scrollTop + (headerTop - scrollContainerTop)\n      const max = Math.max(0, wrapperBottom - headerTop - thead.offsetHeight)\n      wrapper.style.setProperty(\"--_sticky-header-scroll-start\", `${start}px`)\n      wrapper.style.setProperty(\"--_sticky-header-scroll-max\", `${max}px`)\n    })\n\n    resizeObserver.observe(wrapper)\n    resizeObserver.observe(scrollContainer)\n\n    return () => {\n      resizeObserver.disconnect()\n      wrapper.style.removeProperty(\"--_sticky-header-scroll-start\")\n      wrapper.style.removeProperty(\"--_sticky-header-scroll-max\")\n    }\n  }, [stickyHeader, scrollContainerRef, scrollContainerSelector])\n\n  return { hasScrollContainer, wrapperRef }\n}\n\nfunction getScrollContainer(\n  scrollContainerRef: React.RefObject<HTMLElement> | undefined,\n  scrollContainerSelector: string | undefined,\n  wrapper: HTMLElement\n): HTMLElement | undefined {\n  const element =\n    scrollContainerRef?.current ??\n    getScrollContainerFromSelector(scrollContainerSelector, wrapper)\n  if (element instanceof Window) return\n  return element\n}\n\nfunction getScrollContainerFromSelector(\n  scrollContainerSelector: string | undefined,\n  wrapper: HTMLElement\n): HTMLElement | undefined {\n  return scrollContainerSelector\n    ? (wrapper.parentElement?.closest<HTMLElement>(scrollContainerSelector) ??\n        undefined)\n    : undefined\n}\n"],"names":["React"],"mappings":"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"}

package/dist/components/combo-box/ComboBox.js

@@ -1,7 +1,7 @@
 import LoadingSpinner from '../internal/LoadingSpinner.js';
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import { ListBoxLoadMoreItem, ComboBox as ComboBox$1, Label, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Collection } from 'react-aria-components/ComboBox';
 import { Group } from 'react-aria-components/Group';
 import { Header } from 'react-aria-components/Header';
@@ -27,12 +27,12 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
         "tds-combo-box--lg": size === "lg",
         "tds-field--lg": size === "lg",
     }, className);
-    const loadMoreItem = onLoadMore && (React__default.createElement(ListBoxLoadMoreItem, { className: "tds-combo-box-load-more", isLoading: loadingState === "loadingMore", onLoadMore: onLoadMore },
-        React__default.createElement("div", { "aria-label": "Loading more", role: "status" },
-            React__default.createElement(LoadingSpinner, null))));
+    const loadMoreItem = onLoadMore && (React.createElement(ListBoxLoadMoreItem, { className: "tds-combo-box-load-more", isLoading: loadingState === "loadingMore", onLoadMore: onLoadMore },
+        React.createElement("div", { "aria-label": "Loading more", role: "status" },
+            React.createElement(LoadingSpinner, null))));
     const renderChildren = () => {
         if (typeof children === "function") {
-            return (React__default.createElement(Collection, { items: restProps.items ?? restProps.defaultItems }, children));
+            return (React.createElement(Collection, { items: restProps.items ?? restProps.defaultItems }, children));
         }
         return children;
     };
@@ -43,20 +43,20 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
     // of function types (to allow narrower handlers like
     // `setValue: (Key|null) => void`), which isn't assignable to RAC's
     // single-function signature.
-    React__default.createElement(ComboBox$1, { ...restProps, allowsEmptyCollection: allowsEmptyCollection, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultFilter: filter, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, menuTrigger: menuTrigger, onChange: onChange },
-        !hideLabel && React__default.createElement(Label, { className: "tds-field-label" }, label),
-        React__default.createElement(Group, { className: "tds-field-control tds-combo-box-field" },
-            React__default.createElement(Input, { className: "tds-combo-box-input", placeholder: placeholder }),
-            menuTrigger !== "focus" && !readOnly && (React__default.createElement(Button, { className: "tds-combo-box-button tds-btn tds-btn--infield" },
-                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" })))),
-        React__default.createElement(Popover, { className: "tds-combo-box-popover" },
-            React__default.createElement(ListBox, { className: "tds-combo-box-list", renderEmptyState: allowsEmptyCollection
-                    ? () => (React__default.createElement("div", { "aria-label": loadingState === "loading" ? "Loading" : undefined, className: "tds-combo-box-empty-state", role: loadingState === "loading" ? "status" : undefined }, loadingState === "loading" ? (React__default.createElement(LoadingSpinner, null)) : (resolveEmptyState(renderEmptyState))))
+    React.createElement(ComboBox$1, { ...restProps, allowsEmptyCollection: allowsEmptyCollection, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultFilter: filter, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, menuTrigger: menuTrigger, onChange: onChange },
+        !hideLabel && React.createElement(Label, { className: "tds-field-label" }, label),
+        React.createElement(Group, { className: "tds-field-control tds-combo-box-field" },
+            React.createElement(Input, { className: "tds-combo-box-input", placeholder: placeholder }),
+            menuTrigger !== "focus" && !readOnly && (React.createElement(Button, { className: "tds-combo-box-button tds-btn tds-btn--infield" },
+                React.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" })))),
+        React.createElement(Popover, { className: "tds-combo-box-popover" },
+            React.createElement(ListBox, { className: "tds-combo-box-list", renderEmptyState: allowsEmptyCollection
+                    ? () => (React.createElement("div", { "aria-label": loadingState === "loading" ? "Loading" : undefined, className: "tds-combo-box-empty-state", role: loadingState === "loading" ? "status" : undefined }, loadingState === "loading" ? (React.createElement(LoadingSpinner, null)) : (resolveEmptyState(renderEmptyState))))
                     : undefined },
                 renderChildren(),
                 loadMoreItem)),
-        description && (React__default.createElement(Text, { className: "tds-field-description", slot: "description" },
-            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+        description && (React.createElement(Text, { className: "tds-field-description", slot: "description" },
+            React.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
             description))));
 }
 /**
@@ -70,7 +70,7 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
  */
 function ComboBoxItem({ className, disabled, ...restProps }) {
-    return (React__default.createElement(ListBoxItem, { ...restProps, className: classNames("tds-combo-box-list-item", className), isDisabled: disabled }));
+    return (React.createElement(ListBoxItem, { ...restProps, className: classNames("tds-combo-box-list-item", className), isDisabled: disabled }));
 }
 /**
  * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders
@@ -80,8 +80,8 @@ function ComboBoxItem({ className, disabled, ...restProps }) {
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
  */
 function ComboBoxSection({ children, className, title, ...restProps }) {
-    return (React__default.createElement(ListBoxSection, { ...restProps, className: classNames("tds-combo-box-list-section", className) },
-        title && (React__default.createElement(Header, { className: "tds-combo-box-section-header" }, title)),
+    return (React.createElement(ListBoxSection, { ...restProps, className: classNames("tds-combo-box-list-section", className) },
+        title && (React.createElement(Header, { className: "tds-combo-box-section-header" }, title)),
         children));
 }
 

package/dist/components/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode } from \"react\"\nimport {\n  Button,\n  Collection,\n  ComboBox as AriaComboBox,\n  type ComboBoxProps as AriaComboBoxProps,\n  Input,\n  type Key,\n  Label,\n  ListBox,\n  ListBoxItem,\n  type ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  type ListBoxProps as AriaListBoxProps,\n  ListBoxSection,\n  type ListBoxSectionProps,\n  Popover,\n  Text,\n} from \"react-aria-components/ComboBox\"\nimport { Group } from \"react-aria-components/Group\"\nimport { Header } from \"react-aria-components/Header\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n  | \"error\"\n  | \"filtering\"\n  | \"idle\"\n  | \"loading\"\n  | \"loadingMore\"\n  | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n  AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n  /** The contents of the listbox. */\n  children: ComboBoxChildren<T>\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: ReactNode\n  /** Disables the field and trigger button. */\n  disabled?: boolean\n  /** Custom filter function for determining if an item should appear in the list. */\n  filter?: (textValue: string, inputValue: string) => boolean\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /**\n   * Async loading state for the listbox.\n   * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n   * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n   * - Other values render as `\"idle\"`.\n   */\n  loadingState?: ComboBoxLoadingState\n  /**\n   * The interaction that opens the popover.\n   * - `\"input\"`: opens when the user enters text in the input.\n   * - `\"focus\"`: opens when the user focuses (via click or keyboard) into the input.\n   * - `\"manual\"`: opens only via the trigger button or arrow keys.\n   * @default \"focus\"\n   */\n  menuTrigger?: \"focus\" | \"input\" | \"manual\"\n  /**\n   * Called when the selected value(s) change.\n   * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n   */\n  onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n  /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n  onLoadMore?: () => void\n  /** Placeholder text for the input. */\n  placeholder?: string\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** Content to display when there are no items in the list. Defaults to \"No results\". */\n  renderEmptyState?: ReactNode | (() => ReactNode)\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the combo box. */\n  size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n  | \"allowsEmptyCollection\"\n  | \"defaultInputValue\"\n  | \"defaultItems\"\n  | \"defaultValue\"\n  | \"disabledKeys\"\n  | \"inputValue\"\n  | \"items\"\n  | \"name\"\n  | \"onInputChange\"\n  | \"selectionMode\"\n  | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    AriaComboBoxProps<T, \"single\" | \"multiple\">,\n    ComboBoxProps<T>,\n    AriaComboBoxPropsToOmit,\n    AriaComboBoxPropsToInclude\n  >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n  return typeof value === \"function\" ? value() : value\n}\n\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBox<T extends object>({\n  allowsEmptyCollection = true,\n  children,\n  className,\n  description,\n  disabled,\n  filter,\n  hideLabel,\n  invalid,\n  label,\n  loadingState,\n  menuTrigger = \"focus\",\n  onChange,\n  onLoadMore,\n  placeholder,\n  readOnly,\n  renderEmptyState = \"No results\",\n  required,\n  size = \"md\",\n  ...restProps\n}: ComboBoxElementProps<T>) {\n  const combinedClassName = classNames(\n    \"tds-field tds-combo-box\",\n    {\n      \"tds-combo-box--lg\": size === \"lg\",\n      \"tds-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const loadMoreItem = onLoadMore && (\n    <ListBoxLoadMoreItem\n      className=\"tds-combo-box-load-more\"\n      isLoading={loadingState === \"loadingMore\"}\n      onLoadMore={onLoadMore}\n    >\n      <div aria-label=\"Loading more\" role=\"status\">\n        <LoadingSpinner />\n      </div>\n    </ListBoxLoadMoreItem>\n  )\n\n  const renderChildren = () => {\n    if (typeof children === \"function\") {\n      return (\n        <Collection items={restProps.items ?? restProps.defaultItems}>\n          {children}\n        </Collection>\n      )\n    }\n    return children\n  }\n\n  return (\n    // React Aria's ComboBox is generic over selection mode (M). We instantiate\n    // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n    // accept both shapes. onChange still needs a cast because our type is a union\n    // of function types (to allow narrower handlers like\n    // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n    // single-function signature.\n    <AriaComboBox<T, \"single\" | \"multiple\">\n      {...restProps}\n      allowsEmptyCollection={allowsEmptyCollection}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultFilter={filter}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      menuTrigger={menuTrigger}\n      onChange={onChange as (value: Key | Key[] | null) => void}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-combo-box-field\">\n        <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n        {menuTrigger !== \"focus\" && !readOnly && (\n          <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n            <Icon aria-hidden symbol=\"general#down-caret\" />\n          </Button>\n        )}\n      </Group>\n      <Popover className=\"tds-combo-box-popover\">\n        <ListBox\n          className=\"tds-combo-box-list\"\n          renderEmptyState={\n            allowsEmptyCollection\n              ? () => (\n                  <div\n                    aria-label={\n                      loadingState === \"loading\" ? \"Loading\" : undefined\n                    }\n                    className=\"tds-combo-box-empty-state\"\n                    role={loadingState === \"loading\" ? \"status\" : undefined}\n                  >\n                    {loadingState === \"loading\" ? (\n                      <LoadingSpinner />\n                    ) : (\n                      resolveEmptyState(renderEmptyState)\n                    )}\n                  </div>\n                )\n              : undefined\n          }\n        >\n          {renderChildren()}\n          {loadMoreItem}\n        </ListBox>\n      </Popover>\n      {description && (\n        <Text className=\"tds-field-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaComboBox>\n  )\n}\n\nexport interface ComboBoxItemProps {\n  /** Disables the item. */\n  disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxItemProps<T>,\n    ComboBoxItemProps,\n    AriaListBoxItemPropsToOmit,\n    AriaListBoxItemPropsToInclude\n  >\n\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxItem<T extends object>({\n  className,\n  disabled,\n  ...restProps\n}: ComboBoxItemElementProps<T>) {\n  return (\n    <ListBoxItem\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-item\", className)}\n      isDisabled={disabled}\n    />\n  )\n}\n\nexport interface ComboBoxSectionProps {\n  /** The items rendered within the section. */\n  children: ReactNode\n  /** Optional heading text rendered above the section's items. */\n  title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxSectionProps<T>,\n    ComboBoxSectionProps,\n    never,\n    AriaListBoxSectionPropsToInclude\n  >\n\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxSection<T extends object>({\n  children,\n  className,\n  title,\n  ...restProps\n}: ComboBoxSectionElementProps<T>) {\n  return (\n    <ListBoxSection\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-section\", className)}\n    >\n      {title && (\n        <Header className=\"tds-combo-box-section-header\">{title}</Header>\n      )}\n      {children}\n    </ListBoxSection>\n  )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode } from \"react\"\nimport {\n  Button,\n  Collection,\n  ComboBox as AriaComboBox,\n  type ComboBoxProps as AriaComboBoxProps,\n  Input,\n  type Key,\n  Label,\n  ListBox,\n  ListBoxItem,\n  type ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  type ListBoxProps as AriaListBoxProps,\n  ListBoxSection,\n  type ListBoxSectionProps,\n  Popover,\n  Text,\n} from \"react-aria-components/ComboBox\"\nimport { Group } from \"react-aria-components/Group\"\nimport { Header } from \"react-aria-components/Header\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n  | \"error\"\n  | \"filtering\"\n  | \"idle\"\n  | \"loading\"\n  | \"loadingMore\"\n  | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n  AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n  /** The contents of the listbox. */\n  children: ComboBoxChildren<T>\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: ReactNode\n  /** Disables the field and trigger button. */\n  disabled?: boolean\n  /** Custom filter function for determining if an item should appear in the list. */\n  filter?: (textValue: string, inputValue: string) => boolean\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /**\n   * Async loading state for the listbox.\n   * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n   * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n   * - Other values render as `\"idle\"`.\n   */\n  loadingState?: ComboBoxLoadingState\n  /**\n   * The interaction that opens the popover.\n   * - `\"input\"`: opens when the user enters text in the input.\n   * - `\"focus\"`: opens when the user focuses (via click or keyboard) into the input.\n   * - `\"manual\"`: opens only via the trigger button or arrow keys.\n   * @default \"focus\"\n   */\n  menuTrigger?: \"focus\" | \"input\" | \"manual\"\n  /**\n   * Called when the selected value(s) change.\n   * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n   */\n  onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n  /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n  onLoadMore?: () => void\n  /** Placeholder text for the input. */\n  placeholder?: string\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** Content to display when there are no items in the list. Defaults to \"No results\". */\n  renderEmptyState?: ReactNode | (() => ReactNode)\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the combo box. */\n  size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n  | \"allowsEmptyCollection\"\n  | \"defaultInputValue\"\n  | \"defaultItems\"\n  | \"defaultValue\"\n  | \"disabledKeys\"\n  | \"inputValue\"\n  | \"items\"\n  | \"name\"\n  | \"onInputChange\"\n  | \"selectionMode\"\n  | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    AriaComboBoxProps<T, \"single\" | \"multiple\">,\n    ComboBoxProps<T>,\n    AriaComboBoxPropsToOmit,\n    AriaComboBoxPropsToInclude\n  >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n  return typeof value === \"function\" ? value() : value\n}\n\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBox<T extends object>({\n  allowsEmptyCollection = true,\n  children,\n  className,\n  description,\n  disabled,\n  filter,\n  hideLabel,\n  invalid,\n  label,\n  loadingState,\n  menuTrigger = \"focus\",\n  onChange,\n  onLoadMore,\n  placeholder,\n  readOnly,\n  renderEmptyState = \"No results\",\n  required,\n  size = \"md\",\n  ...restProps\n}: ComboBoxElementProps<T>) {\n  const combinedClassName = classNames(\n    \"tds-field tds-combo-box\",\n    {\n      \"tds-combo-box--lg\": size === \"lg\",\n      \"tds-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const loadMoreItem = onLoadMore && (\n    <ListBoxLoadMoreItem\n      className=\"tds-combo-box-load-more\"\n      isLoading={loadingState === \"loadingMore\"}\n      onLoadMore={onLoadMore}\n    >\n      <div aria-label=\"Loading more\" role=\"status\">\n        <LoadingSpinner />\n      </div>\n    </ListBoxLoadMoreItem>\n  )\n\n  const renderChildren = () => {\n    if (typeof children === \"function\") {\n      return (\n        <Collection items={restProps.items ?? restProps.defaultItems}>\n          {children}\n        </Collection>\n      )\n    }\n    return children\n  }\n\n  return (\n    // React Aria's ComboBox is generic over selection mode (M). We instantiate\n    // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n    // accept both shapes. onChange still needs a cast because our type is a union\n    // of function types (to allow narrower handlers like\n    // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n    // single-function signature.\n    <AriaComboBox<T, \"single\" | \"multiple\">\n      {...restProps}\n      allowsEmptyCollection={allowsEmptyCollection}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultFilter={filter}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      menuTrigger={menuTrigger}\n      onChange={onChange as (value: Key | Key[] | null) => void}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-combo-box-field\">\n        <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n        {menuTrigger !== \"focus\" && !readOnly && (\n          <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n            <Icon aria-hidden symbol=\"general#down-caret\" />\n          </Button>\n        )}\n      </Group>\n      <Popover className=\"tds-combo-box-popover\">\n        <ListBox\n          className=\"tds-combo-box-list\"\n          renderEmptyState={\n            allowsEmptyCollection\n              ? () => (\n                  <div\n                    aria-label={\n                      loadingState === \"loading\" ? \"Loading\" : undefined\n                    }\n                    className=\"tds-combo-box-empty-state\"\n                    role={loadingState === \"loading\" ? \"status\" : undefined}\n                  >\n                    {loadingState === \"loading\" ? (\n                      <LoadingSpinner />\n                    ) : (\n                      resolveEmptyState(renderEmptyState)\n                    )}\n                  </div>\n                )\n              : undefined\n          }\n        >\n          {renderChildren()}\n          {loadMoreItem}\n        </ListBox>\n      </Popover>\n      {description && (\n        <Text className=\"tds-field-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaComboBox>\n  )\n}\n\nexport interface ComboBoxItemProps {\n  /** Disables the item. */\n  disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxItemProps<T>,\n    ComboBoxItemProps,\n    AriaListBoxItemPropsToOmit,\n    AriaListBoxItemPropsToInclude\n  >\n\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxItem<T extends object>({\n  className,\n  disabled,\n  ...restProps\n}: ComboBoxItemElementProps<T>) {\n  return (\n    <ListBoxItem\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-item\", className)}\n      isDisabled={disabled}\n    />\n  )\n}\n\nexport interface ComboBoxSectionProps {\n  /** The items rendered within the section. */\n  children: ReactNode\n  /** Optional heading text rendered above the section's items. */\n  title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxSectionProps<T>,\n    ComboBoxSectionProps,\n    never,\n    AriaListBoxSectionPropsToInclude\n  >\n\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxSection<T extends object>({\n  children,\n  className,\n  title,\n  ...restProps\n}: ComboBoxSectionElementProps<T>) {\n  return (\n    <ListBoxSection\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-section\", className)}\n    >\n      {title && (\n        <Header className=\"tds-combo-box-section-header\">{title}</Header>\n      )}\n      {children}\n    </ListBoxSection>\n  )\n}\n"],"names":["AriaComboBox"],"mappings":";;;;;;;;AAoHA,SAAS,iBAAiB,CAAC,KAAoC,EAAA;AAC7D,IAAA,OAAO,OAAO,KAAK,KAAK,UAAU,GAAG,KAAK,EAAE,GAAG,KAAK;AACtD;AAEA;;;;;;;;;;;;AAYG;AACG,SAAU,QAAQ,CAAmB,EACzC,qBAAqB,GAAG,IAAI,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,YAAY,EACZ,WAAW,GAAG,OAAO,EACrB,QAAQ,EACR,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,GAAG,YAAY,EAC/B,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACY,EAAA;AACxB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,yBAAyB,EACzB;QACE,mBAAmB,EAAE,IAAI,KAAK,IAAI;QAClC,eAAe,EAAE,IAAI,KAAK,IAAI;KAC/B,EACD,SAAS,CACV;IAED,MAAM,YAAY,GAAG,UAAU,KAC7B,KAAA,CAAA,aAAA,CAAC,mBAAmB,IAClB,SAAS,EAAC,yBAAyB,EACnC,SAAS,EAAE,YAAY,KAAK,aAAa,EACzC,UAAU,EAAE,UAAU,EAAA;AAEtB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EAAgB,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAA;AAC1C,YAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,CACd,CACc,CACvB;IAED,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;AAClC,YAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,YAAY,IACzD,QAAQ,CACE;QAEjB;AACA,QAAA,OAAO,QAAQ;AACjB,IAAA,CAAC;IAED;;;;;;;IAOE,KAAA,CAAA,aAAA,CAACA,UAAY,OACP,SAAS,EACb,qBAAqB,EAAE,qBAAqB,EAAA,YAAA,EAChC,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAA+C,EAAA;QAExD,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,uCAAuC,EAAA;YACtD,KAAA,CAAA,aAAA,CAAC,KAAK,IAAC,SAAS,EAAC,qBAAqB,EAAC,WAAW,EAAE,WAAW,EAAA,CAAI;AAClE,YAAA,WAAW,KAAK,OAAO,IAAI,CAAC,QAAQ,KACnC,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,+CAA+C,EAAA;gBAC/D,KAAA,CAAA,aAAA,CAAC,IAAI,yBAAa,MAAM,EAAC,oBAAoB,EAAA,CAAG,CACzC,CACV,CACK;AACR,QAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA;YACxC,KAAA,CAAA,aAAA,CAAC,OAAO,IACN,SAAS,EAAC,oBAAoB,EAC9B,gBAAgB,EACd;sBACI,OACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EAEI,YAAY,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,EAEpD,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAE,YAAY,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,EAAA,EAEtD,YAAY,KAAK,SAAS,IACzB,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,KAElB,iBAAiB,CAAC,gBAAgB,CAAC,CACpC,CACG;AAEV,sBAAE,SAAS,EAAA;AAGd,gBAAA,cAAc,EAAE;AAChB,gBAAA,YAAY,CACL,CACF;QACT,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,EAAA;YACxD,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACY;AAEnB;AAmBA;;;;;;;;;AASG;AACG,SAAU,YAAY,CAAmB,EAC7C,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACgB,EAAA;IAC5B,QACE,oBAAC,WAAW,EAAA,EAAA,GACN,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAC3D,UAAU,EAAE,QAAQ,EAAA,CACpB;AAEN;AAmBA;;;;;;AAMG;AACG,SAAU,eAAe,CAAmB,EAChD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACmB,EAAA;AAC/B,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAA,GACT,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,SAAS,CAAC,EAAA;QAE7D,KAAK,KACJ,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,8BAA8B,EAAA,EAAE,KAAK,CAAU,CAClE;QACA,QAAQ,CACM;AAErB;;;;"}

package/dist/components/internal/LoadingSpinner.js

@@ -1,7 +1,7 @@
-import React__default from 'react';
+import React from 'react';
 
 function LoadingSpinner() {
-    return React__default.createElement("div", { className: "tds-loading-spinner" });
+    return React.createElement("div", { className: "tds-loading-spinner" });
 }
 
 export { LoadingSpinner as default };

package/dist/components/internal/LoadingSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/internal/LoadingSpinner.tsx"],"sourcesContent":["import \"./LoadingSpinner.css\"\n\nimport React from \"react\"\n\nexport default function LoadingSpinner() {\n  return <div className=\"tds-loading-spinner\" />\n}\n"],"names":["React"],"mappings":";;AAIc,SAAU,cAAc,GAAA;AACpC,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,GAAG;AAChD;;;;"}
+{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/internal/LoadingSpinner.tsx"],"sourcesContent":["import \"./LoadingSpinner.css\"\n\nimport React from \"react\"\n\nexport default function LoadingSpinner() {\n  return <div className=\"tds-loading-spinner\" />\n}\n"],"names":[],"mappings":";;AAIc,SAAU,cAAc,GAAA;AACpC,IAAA,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,GAAG;AAChD;;;;"}

package/dist/components/search-input/SearchInput.d.ts

@@ -0,0 +1,39 @@
+import "./index.css";
+import React, { type InputHTMLAttributes } from "react";
+export type SearchInputSize = "lg" | "md";
+interface SearchInputBaseProps {
+    /** Helper text below the input. Styled as an error when `invalid`. */
+    description?: React.ReactNode;
+    /** Triggers invalid state (error border, error description, aria-invalid). */
+    invalid?: boolean;
+    /** Visual size — cascades to the icon, input, and clear button via Field's font-size custom property. Defaults to 'md'. */
+    size?: SearchInputSize;
+}
+interface SearchInputWithLabel extends SearchInputBaseProps {
+    "aria-labelledby"?: never;
+    /** If true, the label is visually hidden but remains in the DOM/AT tree. */
+    hideLabel?: boolean;
+    /** The visible label. */
+    label: React.ReactNode;
+}
+interface SearchInputWithAriaLabelledBy extends SearchInputBaseProps {
+    "aria-labelledby": string;
+    hideLabel?: never;
+    label?: never;
+}
+export type SearchInputProps = SearchInputWithAriaLabelledBy | SearchInputWithLabel;
+/**
+ * Combines standard HTML input attributes with SearchInput's own props.
+ * `type` is fixed to "search" and not exposed; `size` is redefined above.
+ */
+export type SearchInputElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof SearchInputProps | "size" | "type"> & SearchInputProps;
+/**
+ * A search-specific input with a leading search icon and a trailing clear
+ * ("x") button, built on `type="search"`. Composes `Field` directly for
+ * label, description, and state layout.
+ *
+ * @component
+ */
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputElementProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/search-input/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAOpB,OAAO,KAAK,EAAE,EAEZ,KAAK,mBAAmB,EAGzB,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAA;AAEzC,UAAU,oBAAoB;IAC5B,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2HAA2H;IAC3H,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yBAAyB;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,6BAA8B,SAAQ,oBAAoB;IAClE,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,gBAAgB,GACxB,6BAA6B,GAC7B,oBAAoB,CAAA;AAExB;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,CACzC,GACC,gBAAgB,CAAA;AAElB;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,kGAiItB,CAAA"}

package/dist/components/search-input/SearchInput.js

@@ -0,0 +1,74 @@
+import '../button/Button.js';
+import '../button/DropdownButton.js';
+import '../button/DropdownIconButton.js';
+import { IconButton } from '../button/IconButton.js';
+import '../button/LoadingButton.js';
+import '../button/PageHeaderActionsDropdownButton.js';
+import { Field } from '../field/Field.js';
+import Icon from '../../utilities/Icon.js';
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React__default, { forwardRef, useRef, useState } from 'react';
+
+/**
+ * A search-specific input with a leading search icon and a trailing clear
+ * ("x") button, built on `type="search"`. Composes `Field` directly for
+ * label, description, and state layout.
+ *
+ * @component
+ */
+const SearchInput = forwardRef(function SearchInput({ "aria-labelledby": ariaLabelledBy, className, defaultValue, description, disabled, hideLabel, id, invalid, label, onChange, onKeyDown, readOnly, size = "md", value, ...restProps }, ref) {
+    const innerRef = useRef(null);
+    const setRefs = (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref) {
+            ref.current = node;
+        }
+    };
+    const stableId = useId();
+    const inputId = id || `tds-search-input-${stableId}`;
+    const descriptionId = description ? `${inputId}-description` : undefined;
+    const [uncontrolledHasValue, setUncontrolledHasValue] = useState(() => String(defaultValue ?? "").length > 0);
+    const hasValue = value !== undefined ? String(value).length > 0 : uncontrolledHasValue;
+    const handleChange = (event) => {
+        if (value === undefined) {
+            setUncontrolledHasValue(event.target.value.length > 0);
+        }
+        onChange?.(event);
+    };
+    const handleClear = () => {
+        const input = innerRef.current;
+        if (!input)
+            return;
+        const nativeSetter = Object.getOwnPropertyDescriptor(input.constructor.prototype, "value")?.set;
+        nativeSetter?.call(input, "");
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        input.focus();
+        if (value === undefined) {
+            setUncontrolledHasValue(false);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Escape" && hasValue) {
+            event.stopPropagation();
+        }
+        onKeyDown?.(event);
+    };
+    const fieldClassName = classNames({ "tds-field--lg": size === "lg" }, className);
+    const fieldLabelProps = ariaLabelledBy
+        ? { "aria-labelledby": ariaLabelledBy }
+        : { hideLabel, label };
+    return (React__default.createElement(Field, { ...fieldLabelProps, className: fieldClassName, description: description, id: inputId },
+        React__default.createElement("div", { className: classNames("tds-search-input-control", {
+                "tds-search-input-control--has-value": hasValue,
+            }) },
+            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-search-input-icon", symbol: "general#search" }),
+            React__default.createElement("input", { ...restProps, "aria-describedby": descriptionId, "aria-invalid": invalid || undefined, "aria-labelledby": ariaLabelledBy, defaultValue: defaultValue, disabled: disabled, id: inputId, onChange: handleChange, onKeyDown: handleKeyDown, readOnly: readOnly, ref: setRefs, type: "search", value: value }),
+            React__default.createElement(IconButton, { "aria-label": "Clear", icon: React__default.createElement(Icon, { "aria-hidden": true, className: "tds-search-input-clear-icon", symbol: "general#x" }), kind: "neutral-inline", onClick: handleClear, tabIndex: -1 }))));
+});
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport { Field } from \"@components/field\"\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n  forwardRef,\n  type InputHTMLAttributes,\n  useRef,\n  useState,\n} from \"react\"\n\nexport type SearchInputSize = \"lg\" | \"md\"\n\ninterface SearchInputBaseProps {\n  /** Helper text below the input. Styled as an error when `invalid`. */\n  description?: React.ReactNode\n  /** Triggers invalid state (error border, error description, aria-invalid). */\n  invalid?: boolean\n  /** Visual size — cascades to the icon, input, and clear button via Field's font-size custom property. Defaults to 'md'. */\n  size?: SearchInputSize\n}\n\ninterface SearchInputWithLabel extends SearchInputBaseProps {\n  \"aria-labelledby\"?: never\n  /** If true, the label is visually hidden but remains in the DOM/AT tree. */\n  hideLabel?: boolean\n  /** The visible label. */\n  label: React.ReactNode\n}\n\ninterface SearchInputWithAriaLabelledBy extends SearchInputBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type SearchInputProps =\n  | SearchInputWithAriaLabelledBy\n  | SearchInputWithLabel\n\n/**\n * Combines standard HTML input attributes with SearchInput's own props.\n * `type` is fixed to \"search\" and not exposed; `size` is redefined above.\n */\nexport type SearchInputElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof SearchInputProps | \"size\" | \"type\"\n> &\n  SearchInputProps\n\n/**\n * A search-specific input with a leading search icon and a trailing clear\n * (\"x\") button, built on `type=\"search\"`. Composes `Field` directly for\n * label, description, and state layout.\n *\n * @component\n */\nexport const SearchInput = forwardRef<\n  HTMLInputElement,\n  SearchInputElementProps\n>(function SearchInput(\n  {\n    \"aria-labelledby\": ariaLabelledBy,\n    className,\n    defaultValue,\n    description,\n    disabled,\n    hideLabel,\n    id,\n    invalid,\n    label,\n    onChange,\n    onKeyDown,\n    readOnly,\n    size = \"md\",\n    value,\n    ...restProps\n  }: SearchInputElementProps,\n  ref\n) {\n  const innerRef = useRef<HTMLInputElement | null>(null)\n  const setRefs = (node: HTMLInputElement | null) => {\n    innerRef.current = node\n    if (typeof ref === \"function\") ref(node)\n    else if (ref) {\n      ;(ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n    }\n  }\n\n  const stableId = useId()\n  const inputId = id || `tds-search-input-${stableId}`\n  const descriptionId = description ? `${inputId}-description` : undefined\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] = useState(\n    () => String(defaultValue ?? \"\").length > 0\n  )\n  const hasValue =\n    value !== undefined ? String(value).length > 0 : uncontrolledHasValue\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (value === undefined) {\n      setUncontrolledHasValue(event.target.value.length > 0)\n    }\n    onChange?.(event)\n  }\n\n  const handleClear = () => {\n    const input = innerRef.current\n    if (!input) return\n\n    const nativeSetter = Object.getOwnPropertyDescriptor(\n      input.constructor.prototype,\n      \"value\"\n    )?.set\n    nativeSetter?.call(input, \"\")\n    input.dispatchEvent(new Event(\"input\", { bubbles: true }))\n    input.focus()\n    if (value === undefined) {\n      setUncontrolledHasValue(false)\n    }\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Escape\" && hasValue) {\n      event.stopPropagation()\n    }\n    onKeyDown?.(event)\n  }\n\n  const fieldClassName = classNames(\n    { \"tds-field--lg\": size === \"lg\" },\n    className\n  )\n\n  const fieldLabelProps = ariaLabelledBy\n    ? { \"aria-labelledby\": ariaLabelledBy }\n    : { hideLabel, label }\n\n  return (\n    <Field\n      {...fieldLabelProps}\n      className={fieldClassName}\n      description={description}\n      id={inputId}\n    >\n      <div\n        className={classNames(\"tds-search-input-control\", {\n          \"tds-search-input-control--has-value\": hasValue,\n        })}\n      >\n        <Icon\n          aria-hidden\n          className=\"tds-search-input-icon\"\n          symbol=\"general#search\"\n        />\n        <input\n          {...restProps}\n          aria-describedby={descriptionId}\n          aria-invalid={invalid || undefined}\n          aria-labelledby={ariaLabelledBy}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          id={inputId}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          readOnly={readOnly}\n          ref={setRefs}\n          type=\"search\"\n          value={value}\n        />\n        <IconButton\n          aria-label=\"Clear\"\n          icon={\n            <Icon\n              aria-hidden\n              className=\"tds-search-input-clear-icon\"\n              symbol=\"general#x\"\n            />\n          }\n          kind=\"neutral-inline\"\n          onClick={handleClear}\n          tabIndex={-1}\n        />\n      </div>\n    </Field>\n  )\n})\n\nSearchInput.displayName = \"SearchInput\"\n"],"names":["React"],"mappings":"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"}

package/dist/components/search-input/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { SearchInputElementProps, SearchInputProps, SearchInputSize, } from "./SearchInput";
+export { SearchInput } from "./SearchInput";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/search-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,GAChB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}