@salt-ds/lab 1.0.0-alpha.6 → 1.0.0-alpha.61

package/dist-cjs/query-input/internal/CategoryListContext.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var react = require('react');
+
+const CategoryListContext = react.createContext(void 0);
+function useCategoryListContext() {
+  const context = react.useContext(CategoryListContext);
+  if (!context) {
+    throw new Error(
+      "useCategoryListContext should be used inside CategoryList"
+    );
+  }
+  return context;
+}
+
+exports.CategoryListContext = CategoryListContext;
+exports.useCategoryListContext = useCategoryListContext;
+//# sourceMappingURL=CategoryListContext.js.map

package/dist-cjs/query-input/internal/CategoryListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryListContext.js","sources":["../src/query-input/internal/CategoryListContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface CategoryListContext {\n  width: number;\n}\n\nexport const CategoryListContext = createContext<\n  CategoryListContext | undefined\n>(undefined);\n\nexport function useCategoryListContext(): CategoryListContext {\n  const context = useContext(CategoryListContext);\n  if (!context) {\n    throw new Error(\n      \"useCategoryListContext should be used inside CategoryList\",\n    );\n  }\n  return context;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAMa,MAAA,mBAAA,GAAsBA,oBAEjC,KAAS,CAAA;AAEJ,SAAS,sBAA8C,GAAA;AAC5D,EAAM,MAAA,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;;"}

package/dist-cjs/query-input/internal/CategoryListItem.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+require('../../list/Highlighter.js');
+var ListItem = require('../../list/ListItem.js');
+require('../../list/List.js');
+require('../../common-hooks/collectionProvider.js');
+require('../../common-hooks/keyUtils.js');
+require('../../responsive/useResizeObserver.js');
+require('../../list/VirtualizedList.js');
+var CategoryListContext = require('./CategoryListContext.js');
+
+const withBaseName = core.makePrefixer("saltCategoryListItem");
+const CategoryListItem = function CategoryListItem2({ item: category, ...props }) {
+  const textRef = react.useRef(null);
+  const context = CategoryListContext.useCategoryListContext();
+  const { ExpandGroupIcon } = core.useIcon();
+  const textStyle = react.useMemo(
+    () => ({
+      minWidth: context.width
+    }),
+    [context.width]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ListItem.ListItem, { ...props, label: category == null ? void 0 : category.name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: textRef, className: withBaseName("text"), style: textStyle, children: category == null ? void 0 : category.name }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("valuesContainer"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("values"), children: category == null ? void 0 : category.values.join(", ") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: ")" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ExpandGroupIcon, { className: withBaseName("chevron") })
+  ] });
+};
+
+exports.CategoryListItem = CategoryListItem;
+//# sourceMappingURL=CategoryListItem.js.map

package/dist-cjs/query-input/internal/CategoryListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryListItem.js","sources":["../src/query-input/internal/CategoryListItem.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { type CSSProperties, useMemo, useRef } from \"react\";\nimport { ListItem, type ListItemProps, type ListItemType } from \"../../list\";\nimport type { QueryInputCategory } from \"../queryInputTypes\";\nimport { useCategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryListItem\");\n\nexport interface CategoryListItemProps\n  extends ListItemProps<QueryInputCategory> {\n  category: QueryInputCategory;\n}\n\nexport const CategoryListItem: ListItemType<QueryInputCategory> =\n  function CategoryListItem({ item: category, ...props }) {\n    const textRef = useRef<HTMLDivElement>(null);\n    const context = useCategoryListContext();\n    const { ExpandGroupIcon } = useIcon();\n    const textStyle: CSSProperties = useMemo(\n      () => ({\n        minWidth: context.width,\n      }),\n      [context.width],\n    );\n\n    return (\n      <ListItem {...props} label={category?.name}>\n        <div ref={textRef} className={withBaseName(\"text\")} style={textStyle}>\n          {category?.name}\n        </div>\n        <div className={withBaseName(\"valuesContainer\")}>\n          <span>(</span>\n          <span className={withBaseName(\"values\")}>\n            {category?.values.join(\", \")}\n          </span>\n          <span>)</span>\n        </div>\n        <ExpandGroupIcon className={withBaseName(\"chevron\")} />\n      </ListItem>\n    );\n  };\n"],"names":["makePrefixer","CategoryListItem","useRef","useCategoryListContext","useIcon","useMemo","ListItem","jsx","jsxs"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA;AAO3C,MAAA,gBAAA,GACX,SAASC,iBAAiB,CAAA,EAAE,MAAM,QAAU,EAAA,GAAG,OAAS,EAAA;AACtD,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,UAAUC,0CAAuB,EAAA;AACvC,EAAM,MAAA,EAAE,eAAgB,EAAA,GAAIC,YAAQ,EAAA;AACpC,EAAA,MAAM,SAA2B,GAAAC,aAAA;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU,OAAQ,CAAA;AAAA,KACpB,CAAA;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EAAA,uCACGC,iBAAU,EAAA,EAAA,GAAG,KAAO,EAAA,KAAA,EAAO,qCAAU,IACpC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,OAAA,EAAS,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,KAAA,EAAO,SACxD,EAAA,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,IACb,EAAA,CAAA;AAAA,oBACCC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,iBAAiB,CAC5C,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,sBACPA,cAAA,CAAC,UAAK,SAAW,EAAA,YAAA,CAAa,QAAQ,CACnC,EAAA,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,MAAO,CAAA,IAAA,CAAK,IACzB,CAAA,EAAA,CAAA;AAAA,sBACAA,cAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA;AAAA,KACT,EAAA,CAAA;AAAA,oBACCA,cAAA,CAAA,eAAA,EAAA,EAAgB,SAAW,EAAA,YAAA,CAAa,SAAS,CAAG,EAAA;AAAA,GACvD,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/query-input/internal/QueryInputBody.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var react = require('react');
+var TokenizedInput = require('../../tokenized-input/TokenizedInput.js');
+require('../../tokenized-input/TokenizedInputBase.js');
+require('clipboard-copy');
+require('../../form-field-context-legacy/FormFieldLegacyContext.js');
+
+const withBaseName = core.makePrefixer("saltQueryInputBody");
+const QueryInputBody = react.forwardRef(
+  function QueryInputBody2(props, ref) {
+    const {
+      inputRef,
+      disabled,
+      selectedItems,
+      onInputFocus,
+      onInputBlur,
+      showCategory,
+      inputValue,
+      onInputChange,
+      isFocused,
+      onInputClear,
+      onSelectedItemsChange,
+      onKeyDown,
+      onInputClick,
+      booleanOperator,
+      onBooleanOperatorChange
+    } = props;
+    const itemToString = react.useMemo(() => {
+      if (showCategory) {
+        return (item) => [item.category, item.value].join(": ");
+      }
+      return (item) => item.value;
+    }, [showCategory]);
+    const stringToItem = (selectedItems2, value) => {
+      return {
+        category: null,
+        value
+      };
+    };
+    const onChange = (event) => {
+      const newBooleanOperator = event.currentTarget.value;
+      onBooleanOperatorChange(newBooleanOperator);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: withBaseName(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.FilterIcon, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TokenizedInput.TokenizedInput,
+        {
+          inputRef,
+          disabled,
+          className: withBaseName("input"),
+          selectedItems,
+          itemToString,
+          stringToItem,
+          onInputFocus,
+          onInputBlur,
+          value: inputValue,
+          onClick: onInputClick,
+          onInputChange,
+          expanded: isFocused,
+          onClear: onInputClear,
+          onChange: onSelectedItemsChange,
+          onKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("separator") }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        core.ToggleButtonGroup,
+        {
+          className: withBaseName("buttonGroup"),
+          "data-testid": "boolean-selector",
+          value: booleanOperator,
+          onChange,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "and", children: "And" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "or", children: "Or" })
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+exports.QueryInputBody = QueryInputBody;
+//# sourceMappingURL=QueryInputBody.js.map

package/dist-cjs/query-input/internal/QueryInputBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryInputBody.js","sources":["../src/query-input/internal/QueryInputBody.tsx"],"sourcesContent":["import { ToggleButton, ToggleButtonGroup, makePrefixer } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useMemo,\n} from \"react\";\n\nimport {\n  type ChangeHandler,\n  type StringToItem,\n  TokenizedInput,\n} from \"../../tokenized-input\";\nimport type { QueryInputItem } from \"../queryInputTypes\";\nimport type { BooleanOperator } from \"../useQueryInput\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputBody\");\n\nexport interface QueryInputBodyProps {\n  inputRef: Ref<HTMLInputElement>;\n  disabled?: boolean;\n  showCategory?: boolean;\n  selectedItems: QueryInputItem[];\n  onBlur: FocusEventHandler<HTMLInputElement>;\n  onFocus: FocusEventHandler<HTMLInputElement>;\n  onInputFocus: FocusEventHandler<HTMLInputElement>;\n  onInputBlur: FocusEventHandler<HTMLInputElement>;\n  onInputClick: (event: SyntheticEvent) => void;\n  onInputClear: () => void;\n  inputValue?: string;\n  onInputChange: ChangeEventHandler<HTMLInputElement>;\n  isFocused?: boolean;\n  onSelectedItemsChange: ChangeHandler<QueryInputItem>;\n  onKeyDown: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  booleanOperator: BooleanOperator;\n  onBooleanOperatorChange: (newBooleanOperator: BooleanOperator) => void;\n}\n\nexport const QueryInputBody = forwardRef<HTMLDivElement, QueryInputBodyProps>(\n  function QueryInputBody(props, ref) {\n    const {\n      inputRef,\n      disabled,\n      selectedItems,\n      onInputFocus,\n      onInputBlur,\n      showCategory,\n      inputValue,\n      onInputChange,\n      isFocused,\n      onInputClear,\n      onSelectedItemsChange,\n      onKeyDown,\n      onInputClick,\n      booleanOperator,\n      onBooleanOperatorChange,\n    } = props;\n\n    const itemToString = useMemo(() => {\n      if (showCategory) {\n        return (item: QueryInputItem) => [item.category, item.value].join(\": \");\n      }\n      return (item: QueryInputItem) => item.value;\n    }, [showCategory]);\n\n    const stringToItem: StringToItem<QueryInputItem> = (\n      selectedItems,\n      value,\n    ) => {\n      return {\n        category: null,\n        value,\n      };\n    };\n\n    const onChange = (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newBooleanOperator = event.currentTarget.value as BooleanOperator;\n      onBooleanOperatorChange(newBooleanOperator);\n    };\n\n    return (\n      <div ref={ref} className={withBaseName()}>\n        <FilterIcon />\n        <TokenizedInput\n          inputRef={inputRef}\n          disabled={disabled}\n          className={withBaseName(\"input\")}\n          selectedItems={selectedItems}\n          // @ts-ignore\n          itemToString={itemToString}\n          // @ts-ignore\n          stringToItem={stringToItem}\n          onInputFocus={onInputFocus}\n          onInputBlur={onInputBlur}\n          value={inputValue}\n          onClick={onInputClick}\n          onInputChange={onInputChange}\n          expanded={isFocused}\n          onClear={onInputClear}\n          // @ts-ignore\n          onChange={onSelectedItemsChange}\n          onKeyDown={onKeyDown}\n        />\n        <div className={withBaseName(\"separator\")} />\n        <ToggleButtonGroup\n          className={withBaseName(\"buttonGroup\")}\n          data-testid=\"boolean-selector\"\n          value={booleanOperator}\n          onChange={onChange}\n        >\n          <ToggleButton value=\"and\">And</ToggleButton>\n          <ToggleButton value=\"or\">Or</ToggleButton>\n        </ToggleButtonGroup>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","QueryInputBody","useMemo","selectedItems","jsxs","jsx","FilterIcon","TokenizedInput","ToggleButtonGroup","ToggleButton"],"mappings":";;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAsB/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,qBAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACE,GAAA,KAAA;AAEJ,IAAM,MAAA,YAAA,GAAeC,cAAQ,MAAM;AACjC,MAAA,IAAI,YAAc,EAAA;AAChB,QAAO,OAAA,CAAC,SAAyB,CAAC,IAAA,CAAK,UAAU,IAAK,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,IAAI,CAAA;AAAA;AAExE,MAAO,OAAA,CAAC,SAAyB,IAAK,CAAA,KAAA;AAAA,KACxC,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,IAAM,MAAA,YAAA,GAA6C,CACjDC,cAAAA,EACA,KACG,KAAA;AACH,MAAO,OAAA;AAAA,QACL,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AAAA,KACF;AAEA,IAAM,MAAA,QAAA,GAAW,CAAC,KAA6C,KAAA;AAC7D,MAAM,MAAA,kBAAA,GAAqB,MAAM,aAAc,CAAA,KAAA;AAC/C,MAAA,uBAAA,CAAwB,kBAAkB,CAAA;AAAA,KAC5C;AAEA,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,GAAU,EAAA,SAAA,EAAW,cACxB,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,gBAAW,EAAA,EAAA,CAAA;AAAA,sBACZD,cAAA;AAAA,QAACE,6BAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAA;AAAA,UAEA,YAAA;AAAA,UAEA,YAAA;AAAA,UACA,YAAA;AAAA,UACA,WAAA;AAAA,UACA,KAAO,EAAA,UAAA;AAAA,UACP,OAAS,EAAA,YAAA;AAAA,UACT,aAAA;AAAA,UACA,QAAU,EAAA,SAAA;AAAA,UACV,OAAS,EAAA,YAAA;AAAA,UAET,QAAU,EAAA,qBAAA;AAAA,UACV;AAAA;AAAA,OACF;AAAA,sBACCF,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,WAAW,CAAG,EAAA,CAAA;AAAA,sBAC3CD,eAAA;AAAA,QAACI,sBAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,aAAY,EAAA,kBAAA;AAAA,UACZ,KAAO,EAAA,eAAA;AAAA,UACP,QAAA;AAAA,UAEA,QAAA,EAAA;AAAA,4BAACH,cAAA,CAAAI,iBAAA,EAAA,EAAa,KAAM,EAAA,KAAA,EAAM,QAAG,EAAA,KAAA,EAAA,CAAA;AAAA,4BAC5BJ,cAAA,CAAAI,iBAAA,EAAA,EAAa,KAAM,EAAA,IAAA,EAAK,QAAE,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA;AAC7B,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/query-input/internal/SearchList.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+require('../../list/Highlighter.js');
+var ListItem = require('../../list/ListItem.js');
+var List = require('../../list/List.js');
+var ListItemGroup = require('../../list/ListItemGroup.js');
+require('../../common-hooks/collectionProvider.js');
+require('../../common-hooks/keyUtils.js');
+require('../../responsive/useResizeObserver.js');
+require('../../list/VirtualizedList.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var QueryInput = require('../QueryInput.css.js');
+
+const withBaseName = core.makePrefixer("saltQueryInputSearchList");
+function itemToString(item) {
+  return [item.category, item.value].join(": ");
+}
+function SearchList(props) {
+  const {
+    inputValue,
+    selectedItems,
+    onChange: onChangeProp,
+    rootWidth,
+    highlightedIndex,
+    setHighlightedIndex,
+    visibleCategories
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-query-input",
+    css: QueryInput,
+    window: targetWindow
+  });
+  const onChange = react.useCallback(
+    (event, items) => {
+      onChangeProp(items || []);
+    },
+    [onChangeProp]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    List.List,
+    {
+      checkable: false,
+      "data-testid": "search-list",
+      highlightedIndex,
+      itemTextHighlightPattern: inputValue,
+      itemToString,
+      onHighlight: setHighlightedIndex,
+      onSelectionChange: onChange,
+      selectionStrategy: "multiple",
+      selected: selectedItems,
+      width: rootWidth,
+      children: [
+        visibleCategories.map((inputCategory) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(ListItemGroup.ListItemGroup, { label: inputCategory.name, children: inputCategory.values.map((label) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItem, { label }, label)) }, inputCategory.name);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItem, { className: withBaseName("addKeyword"), children: `Add keyword: "${inputValue}"` })
+      ]
+    }
+  );
+}
+
+exports.SearchList = SearchList;
+//# sourceMappingURL=SearchList.js.map

package/dist-cjs/query-input/internal/SearchList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchList.js","sources":["../src/query-input/internal/SearchList.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { type Dispatch, type SetStateAction, useCallback } from \"react\";\nimport { List, ListItem, ListItemGroup } from \"../../list\";\n\nimport type { SelectionChangeHandler } from \"../../common-hooks\";\n\nimport type { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport queryInputCss from \"../QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputSearchList\");\n\nexport interface SearchListProps {\n  inputValue?: string;\n  selectedItems?: QueryInputItem[];\n  onChange: (items: QueryInputItem[]) => void;\n  rootWidth: number;\n  highlightedIndex?: number;\n  visibleCategories: QueryInputCategory[];\n  setHighlightedIndex: Dispatch<SetStateAction<number>>;\n}\n\nfunction itemToString(item: QueryInputItem) {\n  return [item.category, item.value].join(\": \");\n}\n\nexport function SearchList(props: SearchListProps) {\n  const {\n    inputValue,\n    selectedItems,\n    onChange: onChangeProp,\n    rootWidth,\n    highlightedIndex,\n    setHighlightedIndex,\n    visibleCategories,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-query-input\",\n    css: queryInputCss,\n    window: targetWindow,\n  });\n\n  const onChange: SelectionChangeHandler<QueryInputItem, \"multiple\"> =\n    useCallback(\n      (event, items) => {\n        onChangeProp(items || []);\n      },\n      [onChangeProp],\n    );\n\n  return (\n    <List\n      checkable={false}\n      data-testid=\"search-list\"\n      highlightedIndex={highlightedIndex}\n      itemTextHighlightPattern={inputValue}\n      itemToString={itemToString}\n      onHighlight={setHighlightedIndex}\n      onSelectionChange={onChange}\n      selectionStrategy=\"multiple\"\n      selected={selectedItems}\n      width={rootWidth}\n    >\n      {visibleCategories.map((inputCategory: QueryInputCategory) => {\n        return (\n          <ListItemGroup key={inputCategory.name} label={inputCategory.name}>\n            {inputCategory.values.map((label) => (\n              <ListItem key={label} label={label} />\n            ))}\n          </ListItemGroup>\n        );\n      })}\n      <ListItem className={withBaseName(\"addKeyword\")}>\n        {`Add keyword: \"${inputValue}\"`}\n      </ListItem>\n    </List>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","queryInputCss","useCallback","jsxs","List","ListItemGroup","ListItem","jsx"],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAY5D,SAAS,aAAa,IAAsB,EAAA;AAC1C,EAAA,OAAO,CAAC,IAAK,CAAA,QAAA,EAAU,KAAK,KAAK,CAAA,CAAE,KAAK,IAAI,CAAA;AAC9C;AAEO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,QACJ,GAAAC,iBAAA;AAAA,IACE,CAAC,OAAO,KAAU,KAAA;AAChB,MAAa,YAAA,CAAA,KAAA,IAAS,EAAE,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEF,EACE,uBAAAC,eAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,KAAA;AAAA,MACX,aAAY,EAAA,aAAA;AAAA,MACZ,gBAAA;AAAA,MACA,wBAA0B,EAAA,UAAA;AAAA,MAC1B,YAAA;AAAA,MACA,WAAa,EAAA,mBAAA;AAAA,MACb,iBAAmB,EAAA,QAAA;AAAA,MACnB,iBAAkB,EAAA,UAAA;AAAA,MAClB,QAAU,EAAA,aAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MAEN,QAAA,EAAA;AAAA,QAAkB,iBAAA,CAAA,GAAA,CAAI,CAAC,aAAsC,KAAA;AAC5D,UAAA,sCACGC,2BAAuC,EAAA,EAAA,KAAA,EAAO,aAAc,CAAA,IAAA,EAC1D,wBAAc,MAAO,CAAA,GAAA,CAAI,CAAC,KAAA,oCACxBC,iBAAqB,EAAA,EAAA,KAAA,EAAA,EAAP,KAAqB,CACrC,CAAA,EAAA,EAHiB,cAAc,IAIlC,CAAA;AAAA,SAEH,CAAA;AAAA,wBACDC,cAAA,CAACD,qBAAS,SAAW,EAAA,YAAA,CAAa,YAAY,CAC3C,EAAA,QAAA,EAAA,CAAA,cAAA,EAAiB,UAAU,CAC9B,CAAA,CAAA,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist-cjs/query-input/internal/ValueList.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+require('../../list/Highlighter.js');
+var ListItem = require('../../list/ListItem.js');
+var List = require('../../list/List.js');
+require('react');
+require('../../common-hooks/collectionProvider.js');
+require('../../common-hooks/keyUtils.js');
+require('../../responsive/useResizeObserver.js');
+require('../../list/VirtualizedList.js');
+
+const withBaseName = core.makePrefixer("saltQueryInputValueList");
+function ValueList(props) {
+  const {
+    category,
+    rootWidth,
+    onBack,
+    selectedValues,
+    onValueToggle,
+    highlightedValueIndex,
+    setHighlightedValueIndex
+  } = props;
+  const { PreviousIcon } = core.useIcon();
+  const handleSelect = (_, value) => {
+    onValueToggle(category, value);
+  };
+  const items = category ? category.values.map((value) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItem, { item: value, children: value }, value)) : [];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName(), tabIndex: 0, "data-testid": "value-list", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    List.List,
+    {
+      borderless: true,
+      checkable: false,
+      highlightedIndex: highlightedValueIndex,
+      onHighlight: setHighlightedValueIndex,
+      onSelect: handleSelect,
+      selectionStrategy: "multiple",
+      selected: selectedValues,
+      width: rootWidth,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ListItem.ListItem,
+          {
+            className: withBaseName("back"),
+            onClick: onBack,
+            selectable: false,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PreviousIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("category"), children: category ? category.name : "" })
+            ]
+          }
+        ),
+        items
+      ]
+    }
+  ) });
+}
+
+exports.ValueList = ValueList;
+//# sourceMappingURL=ValueList.js.map

package/dist-cjs/query-input/internal/ValueList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport type { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport type { SelectHandler } from \"../../common-hooks\";\nimport { List, ListItem } from \"../../list\";\nimport type { QueryInputCategory } from \"../queryInputTypes\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n  category: QueryInputCategory | null;\n  rootWidth: number;\n  onBack: () => void;\n  selectedValues: string[];\n  onValueToggle: (category: QueryInputCategory, value: string) => void;\n  highlightedValueIndex?: number;\n  setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n  const {\n    category,\n    rootWidth,\n    onBack,\n    selectedValues,\n    onValueToggle,\n    highlightedValueIndex,\n    setHighlightedValueIndex,\n  } = props;\n  const { PreviousIcon } = useIcon();\n\n  const handleSelect: SelectHandler = (_, value: string) => {\n    onValueToggle(category!, value);\n  };\n\n  const items: ReactElement[] = category\n    ? category.values.map((value) => (\n        <ListItem key={value} item={value}>\n          {value}\n        </ListItem>\n      ))\n    : [];\n\n  return (\n    <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n      <List\n        borderless={true}\n        checkable={false}\n        highlightedIndex={highlightedValueIndex}\n        onHighlight={setHighlightedValueIndex}\n        onSelect={handleSelect}\n        selectionStrategy=\"multiple\"\n        selected={selectedValues}\n        width={rootWidth}\n      >\n        <ListItem\n          className={withBaseName(\"back\")}\n          onClick={onBack}\n          selectable={false}\n        >\n          <PreviousIcon />\n          <div className={withBaseName(\"category\")}>\n            {category ? category.name : \"\"}\n          </div>\n        </ListItem>\n        {items}\n      </List>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useIcon","jsx","ListItem","jsxs","List"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA;AAYpD,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,YAAQ,EAAA;AAEjC,EAAM,MAAA,YAAA,GAA8B,CAAC,CAAA,EAAG,KAAkB,KAAA;AACxD,IAAA,aAAA,CAAc,UAAW,KAAK,CAAA;AAAA,GAChC;AAEA,EAAA,MAAM,KAAwB,GAAA,QAAA,GAC1B,QAAS,CAAA,MAAA,CAAO,IAAI,CAAC,KAAA,qBAClBC,cAAA,CAAAC,iBAAA,EAAA,EAAqB,MAAM,KACzB,EAAA,QAAA,EAAA,KAAA,EAAA,EADY,KAEf,CACD,IACD,EAAC;AAEL,EACE,uBAAAD,cAAA,CAAC,SAAI,SAAW,EAAA,YAAA,IAAgB,QAAU,EAAA,CAAA,EAAG,eAAY,YACvD,EAAA,QAAA,kBAAAE,eAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,IAAA;AAAA,MACZ,SAAW,EAAA,KAAA;AAAA,MACX,gBAAkB,EAAA,qBAAA;AAAA,MAClB,WAAa,EAAA,wBAAA;AAAA,MACb,QAAU,EAAA,YAAA;AAAA,MACV,iBAAkB,EAAA,UAAA;AAAA,MAClB,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAACD,iBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,OAAS,EAAA,MAAA;AAAA,YACT,UAAY,EAAA,KAAA;AAAA,YAEZ,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAAC,YAAa,EAAA,EAAA,CAAA;AAAA,8BACdA,cAAA,CAAC,SAAI,SAAW,EAAA,YAAA,CAAa,UAAU,CACpC,EAAA,QAAA,EAAA,QAAA,GAAW,QAAS,CAAA,IAAA,GAAO,EAC9B,EAAA;AAAA;AAAA;AAAA,SACF;AAAA,QACC;AAAA;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/query-input/internal/ValueSelector.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var Portal = require('../../portal/Portal.js');
+var WindowContext = require('../../window/WindowContext.js');
+require('../../window/ElectronWindow.js');
+var CategoryList = require('./CategoryList.js');
+var SearchList = require('./SearchList.js');
+var ValueList = require('./ValueList.js');
+
+const withBaseName = core.makePrefixer("saltQueryInputValueSelector");
+function ValueSelector(props) {
+  const {
+    isOpen,
+    inputValue,
+    anchorElement,
+    popperRef,
+    categories,
+    selectedCategory,
+    onSelectedCategoryChange,
+    width,
+    selectedItems,
+    onValueToggle,
+    highlightedIndex,
+    visibleCategories,
+    highlightedCategoryIndex,
+    highlightedValueIndex,
+    onSearchListChange,
+    setHighlightedValueIndex,
+    setHighlightedCategoryIndex,
+    setHighlightedIndex
+  } = props;
+  const selectedCategoryValues = react.useMemo(() => {
+    if (!selectedCategory) {
+      return [];
+    }
+    return selectedItems.filter((item) => item.category === selectedCategory.name).map(({ value }) => value);
+  }, [selectedCategory, selectedItems]);
+  const onBackToCategories = () => {
+    onSelectedCategoryChange(null);
+  };
+  const renderContent = () => {
+    if (inputValue) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SearchList.SearchList,
+        {
+          inputValue,
+          selectedItems,
+          onChange: onSearchListChange,
+          rootWidth: width,
+          highlightedIndex,
+          visibleCategories,
+          setHighlightedIndex
+        }
+      );
+    }
+    if (!selectedCategory) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CategoryList.CategoryList,
+        {
+          categories,
+          rootWidth: width,
+          onCategorySelect: onSelectedCategoryChange,
+          highlightedCategoryIndex,
+          setHighlightedCategoryIndex
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ValueList.ValueList,
+      {
+        category: selectedCategory,
+        rootWidth: width,
+        onBack: onBackToCategories,
+        selectedValues: selectedCategoryValues,
+        onValueToggle,
+        highlightedValueIndex,
+        setHighlightedValueIndex
+      }
+    );
+  };
+  const Window = WindowContext.useWindow();
+  const { reference, floating, x, y, strategy } = core.useFloatingUI({
+    placement: "bottom"
+  });
+  const handleRef = core.useForkRef(floating, popperRef);
+  core.useIsomorphicLayoutEffect(() => {
+    if (anchorElement) {
+      reference(anchorElement);
+    }
+  }, [reference, anchorElement]);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    Window,
+    {
+      style: {
+        top: y ?? 0,
+        left: x ?? 0,
+        position: strategy
+      },
+      ref: handleRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("content"), children: renderContent() })
+    }
+  ) });
+}
+
+exports.ValueSelector = ValueSelector;
+//# sourceMappingURL=ValueSelector.js.map

package/dist-cjs/query-input/internal/ValueSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueSelector.js","sources":["../src/query-input/internal/ValueSelector.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { type Dispatch, type Ref, type SetStateAction, useMemo } from \"react\";\nimport { Portal } from \"../../portal\";\nimport { useWindow } from \"../../window\";\nimport type { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport { CategoryList } from \"./CategoryList\";\nimport { SearchList } from \"./SearchList\";\nimport { ValueList } from \"./ValueList\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueSelector\");\n\nexport interface ValueSelectorProps {\n  isOpen: boolean;\n  anchorElement: HTMLElement | null;\n  popperRef: Ref<HTMLDivElement>;\n\n  inputValue?: string;\n  categories: QueryInputCategory[];\n  selectedCategory: QueryInputCategory | null;\n  onSelectedCategoryChange: (category: QueryInputCategory | null) => void;\n\n  width: number;\n  selectedItems: QueryInputItem[];\n  onValueToggle: (category: QueryInputCategory, value: string) => void;\n  onSearchListChange: (items: QueryInputItem[]) => void;\n\n  highlightedIndex?: number;\n  visibleCategories: QueryInputCategory[];\n\n  highlightedCategoryIndex?: number;\n  highlightedValueIndex?: number;\n  setHighlightedIndex: Dispatch<SetStateAction<number>>;\n  setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n  setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueSelector(props: ValueSelectorProps) {\n  const {\n    isOpen,\n    inputValue,\n    anchorElement,\n    popperRef,\n    categories,\n    selectedCategory,\n    onSelectedCategoryChange,\n    width,\n    selectedItems,\n    onValueToggle,\n    highlightedIndex,\n    visibleCategories,\n    highlightedCategoryIndex,\n    highlightedValueIndex,\n    onSearchListChange,\n    setHighlightedValueIndex,\n    setHighlightedCategoryIndex,\n    setHighlightedIndex,\n  } = props;\n\n  const selectedCategoryValues = useMemo(() => {\n    if (!selectedCategory) {\n      return [];\n    }\n    return selectedItems\n      .filter((item) => item.category === selectedCategory.name)\n      .map(({ value }) => value);\n  }, [selectedCategory, selectedItems]);\n\n  const onBackToCategories = () => {\n    onSelectedCategoryChange(null);\n  };\n\n  const renderContent = () => {\n    if (inputValue) {\n      return (\n        <SearchList\n          inputValue={inputValue}\n          selectedItems={selectedItems}\n          onChange={onSearchListChange}\n          rootWidth={width}\n          highlightedIndex={highlightedIndex}\n          visibleCategories={visibleCategories}\n          setHighlightedIndex={setHighlightedIndex}\n        />\n      );\n    }\n\n    if (!selectedCategory) {\n      return (\n        <CategoryList\n          categories={categories}\n          rootWidth={width}\n          onCategorySelect={onSelectedCategoryChange}\n          highlightedCategoryIndex={highlightedCategoryIndex}\n          setHighlightedCategoryIndex={setHighlightedCategoryIndex}\n        />\n      );\n    }\n\n    return (\n      <ValueList\n        category={selectedCategory}\n        rootWidth={width}\n        onBack={onBackToCategories}\n        selectedValues={selectedCategoryValues}\n        onValueToggle={onValueToggle}\n        highlightedValueIndex={highlightedValueIndex}\n        setHighlightedValueIndex={setHighlightedValueIndex}\n      />\n    );\n  };\n\n  const Window = useWindow();\n  const { reference, floating, x, y, strategy } = useFloatingUI({\n    placement: \"bottom\",\n  });\n  const handleRef = useForkRef<HTMLDivElement>(floating, popperRef);\n  useIsomorphicLayoutEffect(() => {\n    if (anchorElement) {\n      reference(anchorElement);\n    }\n  }, [reference, anchorElement]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <Window\n        style={{\n          top: y ?? 0,\n          left: x ?? 0,\n          position: strategy,\n        }}\n        ref={handleRef}\n      >\n        <div className={withBaseName(\"content\")}>{renderContent()}</div>\n      </Window>\n    </Portal>\n  );\n}\n"],"names":["makePrefixer","useMemo","jsx","SearchList","CategoryList","ValueList","useWindow","useFloatingUI","useForkRef","useIsomorphicLayoutEffect","Portal"],"mappings":"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"}

package/dist-cjs/query-input/internal/usePopperStatus.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var react = require('react');
+
+function usePopperStatus(props) {
+  const { initialOpen, autoClose } = props;
+  const [isOpen, setIsOpen] = react.useState(!!initialOpen);
+  const onKeyDown = (event) => {
+    if (event.altKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+      setIsOpen((x) => !x);
+    } else if (!isOpen && ["Alt", "Tab", "Escape", "Control", "Shift", "Meta"].includes(event.key)) {
+      setIsOpen(true);
+    } else if (isOpen && event.key === "Escape") {
+      setIsOpen(false);
+    } else if (isOpen && autoClose && event.key === "Enter") {
+      setIsOpen(false);
+    }
+  };
+  const onFocus = (event) => {
+    setIsOpen(true);
+  };
+  const onBlur = (event) => {
+    setIsOpen(false);
+  };
+  const onChange = () => {
+    if (autoClose) {
+      setIsOpen(false);
+    }
+  };
+  const onClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  };
+  return {
+    isOpen,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onChange,
+    onClick
+  };
+}
+
+exports.usePopperStatus = usePopperStatus;
+//# sourceMappingURL=usePopperStatus.js.map

package/dist-cjs/query-input/internal/usePopperStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopperStatus.js","sources":["../src/query-input/internal/usePopperStatus.ts"],"sourcesContent":["import { type FocusEvent, type KeyboardEvent, useState } from \"react\";\n\nexport interface UsePopperStatusProps {\n  initialOpen?: boolean;\n  autoClose?: boolean;\n}\n\nexport function usePopperStatus(props: UsePopperStatusProps) {\n  const { initialOpen, autoClose } = props;\n  const [isOpen, setIsOpen] = useState<boolean>(!!initialOpen);\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.altKey && [\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n      setIsOpen((x) => !x);\n    } else if (\n      !isOpen &&\n      [\"Alt\", \"Tab\", \"Escape\", \"Control\", \"Shift\", \"Meta\"].includes(event.key)\n    ) {\n      setIsOpen(true);\n    } else if (isOpen && event.key === \"Escape\") {\n      setIsOpen(false);\n    } else if (isOpen && autoClose && event.key === \"Enter\") {\n      setIsOpen(false);\n    }\n  };\n\n  const onFocus = (event: FocusEvent) => {\n    setIsOpen(true);\n  };\n\n  const onBlur = (event: FocusEvent) => {\n    setIsOpen(false);\n  };\n\n  const onChange = () => {\n    if (autoClose) {\n      setIsOpen(false);\n    }\n  };\n\n  const onClick = () => {\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n  };\n\n  return {\n    isOpen,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    onChange,\n    onClick,\n  };\n}\n"],"names":["useState"],"mappings":";;;;AAOO,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAM,MAAA,EAAE,WAAa,EAAA,SAAA,EAAc,GAAA,KAAA;AACnC,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,IAAIA,cAAkB,CAAA,CAAC,CAAC,WAAW,CAAA;AAE3D,EAAM,MAAA,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,IAAI,IAAA,KAAA,CAAM,UAAU,CAAC,SAAA,EAAW,WAAW,CAAE,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAChE,MAAU,SAAA,CAAA,CAAC,CAAM,KAAA,CAAC,CAAC,CAAA;AAAA,KAEnB,MAAA,IAAA,CAAC,MACD,IAAA,CAAC,OAAO,KAAO,EAAA,QAAA,EAAU,SAAW,EAAA,OAAA,EAAS,MAAM,CAAA,CAAE,QAAS,CAAA,KAAA,CAAM,GAAG,CACvE,EAAA;AACA,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA,KACL,MAAA,IAAA,MAAA,IAAU,KAAM,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC3C,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,KACN,MAAA,IAAA,MAAA,IAAU,SAAa,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACvD,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,GACF;AAEA,EAAM,MAAA,OAAA,GAAU,CAAC,KAAsB,KAAA;AACrC,IAAA,SAAA,CAAU,IAAI,CAAA;AAAA,GAChB;AAEA,EAAM,MAAA,MAAA,GAAS,CAAC,KAAsB,KAAA;AACpC,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,GACjB;AAEA,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA;AAChB,GACF;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}