@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/controls/CommandPalette.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/CommandPalette.tsx"],
+  "sourcesContent": ["// @ts-nocheck\nimport * as _ from \"lodash-es\"\nimport { BodyPortal } from \"../../components/index.js\"\nimport { observer } from \"mobx-react\"\nimport * as React from \"react\"\n\ndeclare type keyboardCombo = string\n\nexport interface Command {\n    combo: keyboardCombo\n    fn: () => void\n    title?: string\n    category?: string\n}\n\nconst CommandPaletteClassName = \"CommandPalette\"\n\ninterface CommandPaletteProps {\n    commands: Command[]\n    display: \"none\" | \"block\"\n}\n\n@observer\nexport class CommandPalette extends React.Component<CommandPaletteProps> {\n    static togglePalette(): void {\n        const element = document.getElementsByClassName(\n            CommandPaletteClassName\n        )[0] as HTMLElement\n        if (element)\n            element.style.display =\n                element.style.display === \"none\" ? \"block\" : \"none\"\n    }\n\n    override render(): React.ReactElement {\n        const style: any = {\n            display: this.props.display,\n        }\n        let lastCat = \"\"\n        const commands = this.props.commands.filter(\n            (command) => command.title && command.category\n        )\n        const sortedCommands = _.sortBy(commands, \"category\").map(\n            (command, index) => {\n                let cat = undefined\n                if (command.category !== lastCat) {\n                    lastCat = command.category!\n                    cat = <div className=\"commandCategory\">{lastCat}</div>\n                }\n                return (\n                    <div key={`command${index}`}>\n                        {cat}\n                        <div className=\"commandOption\">\n                            <span className=\"commandCombo\">\n                                {command.combo}\n                            </span>\n                            <a onClick={(): void => command.fn()}>\n                                {command.title}\n                            </a>\n                        </div>\n                    </div>\n                )\n            }\n        )\n\n        return (\n            <BodyPortal>\n                <div className={CommandPaletteClassName} style={style}>\n                    <div className=\"paletteTitle\">Keyboard Shortcuts</div>\n                    {sortedCommands}\n                </div>\n            </BodyPortal>\n        )\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;AACA,YAAY,OAAO;AACnB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,YAAY,WAAW;AAWvB,MAAM,0BAA0B;AAQzB,IAAM,iBAAN,cAA6B,MAAM,UAA+B;AAAA,EACrE,OAAO,gBAAsB;AACzB,UAAM,UAAU,SAAS;AAAA,MACrB;AAAA,IACJ,EAAE,CAAC;AACH,QAAI;AACA,cAAQ,MAAM,UACV,QAAQ,MAAM,YAAY,SAAS,UAAU;AAAA,EACzD;AAAA,EAES,SAA6B;AAClC,UAAM,QAAa;AAAA,MACf,SAAS,KAAK,MAAM;AAAA,IACxB;AACA,QAAI,UAAU;AACd,UAAM,WAAW,KAAK,MAAM,SAAS;AAAA,MACjC,CAAC,YAAY,QAAQ,SAAS,QAAQ;AAAA,IAC1C;AACA,UAAM,iBAAiB,EAAE,OAAO,UAAU,UAAU,EAAE;AAAA,MAClD,CAAC,SAAS,UAAU;AAChB,YAAI,MAAM;AACV,YAAI,QAAQ,aAAa,SAAS;AAC9B,oBAAU,QAAQ;AAClB,gBAAM,oCAAC,SAAI,WAAU,qBAAmB,OAAQ;AAAA,QACpD;AACA,eACI,oCAAC,SAAI,KAAK,UAAU,KAAK,MACpB,KACD,oCAAC,SAAI,WAAU,mBACX,oCAAC,UAAK,WAAU,kBACX,QAAQ,KACb,GACA,oCAAC,OAAE,SAAS,MAAY,QAAQ,GAAG,KAC9B,QAAQ,KACb,CACJ,CACJ;AAAA,MAER;AAAA,IACJ;AAEA,WACI,oCAAC,kBACG,oCAAC,SAAI,WAAW,yBAAyB,SACrC,oCAAC,SAAI,WAAU,kBAAe,oBAAkB,GAC/C,cACL,CACJ;AAAA,EAER;AACJ;AAlDa,iBAAN;AAAA,EADN;AAAA,GACY;",
+  "names": []
+}

package/dist/grapher/controls/ContentSwitchers.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { GrapherTabName } from "../../types/index.js";
+export interface ContentSwitchersManager {
+    availableTabs?: GrapherTabName[];
+    activeTab?: GrapherTabName;
+    hasMultipleChartTypes?: boolean;
+    setTab: (tab: GrapherTabName) => void;
+    onTabChange: (oldTab: GrapherTabName, newTab: GrapherTabName) => void;
+    isMedium?: boolean;
+}
+export declare class ContentSwitchers extends React.Component<{
+    manager: ContentSwitchersManager;
+}> {
+    constructor(props: {
+        manager: ContentSwitchersManager;
+    });
+    static shouldShow(manager: ContentSwitchersManager): boolean;
+    private isOverflowMenuOpen;
+    private overflowButtonRef;
+    private get manager();
+    private get hasMultipleChartTypes();
+    private get availableTabs();
+    private get shouldShow();
+    private get visibleTabs();
+    private get hiddenTabs();
+    private get activeTab();
+    private get selectedTabKey();
+    private get tabItems();
+    private setTab;
+    private showOverflowMenu;
+    private hideOverflowMenu;
+    private onTabChange;
+    private onOverflowMenuSelect;
+    private renderOverflowMenu;
+    render(): React.ReactElement | null;
+}
+//# sourceMappingURL=ContentSwitchers.d.ts.map

package/dist/grapher/controls/ContentSwitchers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSwitchers.d.ts","sourceRoot":"","sources":["../../../src/grapher/controls/ContentSwitchers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAMrD,MAAM,WAAW,uBAAuB;IACpC,aAAa,CAAC,EAAE,cAAc,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,MAAM,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACrC,WAAW,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAA;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AASD,qBACa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC;IAClD,OAAO,EAAE,uBAAuB,CAAA;CACnC,CAAC;gBACc,KAAK,EAAE;QAAE,OAAO,EAAE,uBAAuB,CAAA;KAAE;IAQvD,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,uBAAuB,GAAG,OAAO;IAK5D,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,iBAAiB,CAAoC;IAEnD,OAAO,KAAK,OAAO,GAE5B;IAES,OAAO,KAAK,qBAAqB,GAE1C;IAES,OAAO,KAAK,aAAa,GAElC;IAES,OAAO,KAAK,UAAU,GAE/B;IAES,OAAO,KAAK,WAAW,GAoBhC;IAES,OAAO,KAAK,UAAU,GAI/B;IAES,OAAO,KAAK,SAAS,GAE9B;IAES,OAAO,KAAK,cAAc,GAEnC;IAES,OAAO,KAAK,QAAQ,GAqC7B;IAEa,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,oBAAoB;IAK1C,OAAO,CAAC,kBAAkB;IAoCjB,MAAM,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI;CAgB/C"}

package/dist/grapher/controls/ContentSwitchers.js

@@ -0,0 +1,237 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as React from "react";
+import { action, computed, observable, makeObservable } from "mobx";
+import cx from "classnames";
+import { observer } from "mobx-react";
+import { Tabs } from "../tabs/Tabs.js";
+import { makeLabelForGrapherTab } from "../chart/ChartTabs.js";
+import { Menu, MenuItem, Popover } from "react-aria-components";
+import { GrapherTabIcon } from "../../components/index.js";
+const OVERFLOW_MENU_KEY = "More";
+const MAX_VISIBLE_TABS = 4;
+const MAX_VISIBLE_TABS_BEFORE_OVERFLOW = 3;
+let ContentSwitchers = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.isOverflowMenuOpen = false;
+    this.overflowButtonRef = React.createRef();
+    makeObservable(this, {
+      isOverflowMenuOpen: observable
+    });
+  }
+  static shouldShow(manager) {
+    const test = new ContentSwitchers({ manager });
+    return test.shouldShow;
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get hasMultipleChartTypes() {
+    return !!this.manager.hasMultipleChartTypes;
+  }
+  get availableTabs() {
+    return this.manager.availableTabs || [];
+  }
+  get shouldShow() {
+    return this.availableTabs.length > 1;
+  }
+  get visibleTabs() {
+    const { activeTab, availableTabs } = this;
+    if (availableTabs.length <= MAX_VISIBLE_TABS) {
+      return availableTabs;
+    }
+    const visibleTabs = availableTabs.slice(
+      0,
+      MAX_VISIBLE_TABS_BEFORE_OVERFLOW
+    );
+    if (!visibleTabs.includes(activeTab)) {
+      visibleTabs[visibleTabs.length - 1] = activeTab;
+    }
+    return visibleTabs;
+  }
+  get hiddenTabs() {
+    return this.availableTabs.filter(
+      (tab) => !this.visibleTabs.includes(tab)
+    );
+  }
+  get activeTab() {
+    return this.manager.activeTab ?? this.availableTabs[0];
+  }
+  get selectedTabKey() {
+    return this.isOverflowMenuOpen ? OVERFLOW_MENU_KEY : this.activeTab;
+  }
+  get tabItems() {
+    const { hasMultipleChartTypes } = this;
+    const visibleTabItems = this.visibleTabs.map(
+      (tab) => ({
+        key: tab,
+        element: /* @__PURE__ */ React.createElement(
+          TabContent,
+          {
+            key: tab,
+            tab,
+            hasMultipleChartTypes
+          }
+        ),
+        buttonProps: {
+          className: cx({ active: tab === this.activeTab }),
+          dataTrackNote: "chart_click_" + tab,
+          ariaLabel: makeLabelForGrapherTab(tab, {
+            useGenericChartLabel: !hasMultipleChartTypes
+          })
+        }
+      })
+    );
+    if (this.hiddenTabs.length > 0) {
+      visibleTabItems.push({
+        key: OVERFLOW_MENU_KEY,
+        element: /* @__PURE__ */ React.createElement(React.Fragment, null, "+\u200A", this.hiddenTabs.length),
+        buttonProps: {
+          className: "ContentSwitchers__OverflowMenuButton",
+          ariaLabel: "Show more chart types",
+          ref: this.overflowButtonRef
+        }
+      });
+    }
+    return visibleTabItems;
+  }
+  setTab(selectedTab) {
+    const oldTab = this.manager.activeTab;
+    const newTab = selectedTab;
+    this.manager.setTab(newTab);
+    this.manager.onTabChange?.(oldTab, newTab);
+  }
+  showOverflowMenu() {
+    this.isOverflowMenuOpen = true;
+  }
+  hideOverflowMenu() {
+    this.isOverflowMenuOpen = false;
+  }
+  onTabChange(selectedKey) {
+    if (selectedKey === OVERFLOW_MENU_KEY) {
+      this.showOverflowMenu();
+    } else {
+      this.setTab(selectedKey);
+      this.hideOverflowMenu();
+    }
+  }
+  onOverflowMenuSelect(tab) {
+    this.setTab(tab);
+    this.hideOverflowMenu();
+  }
+  renderOverflowMenu() {
+    const { hasMultipleChartTypes } = this;
+    return /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        className: "ContentSwitchers__OverflowMenu",
+        placement: "bottom",
+        triggerRef: this.overflowButtonRef,
+        isOpen: this.isOverflowMenuOpen,
+        onOpenChange: (isOpen) => {
+          if (!isOpen) this.hideOverflowMenu();
+          else this.showOverflowMenu();
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Menu,
+        {
+          onAction: (key) => this.onOverflowMenuSelect(key)
+        },
+        this.hiddenTabs.map((tab) => /* @__PURE__ */ React.createElement(
+          MenuItem,
+          {
+            key: tab,
+            id: tab,
+            className: "ContentSwitchers__OverflowMenuItem"
+          },
+          /* @__PURE__ */ React.createElement(
+            TabContent,
+            {
+              tab,
+              hasMultipleChartTypes
+            }
+          )
+        ))
+      )
+    );
+  }
+  render() {
+    if (!this.shouldShow) return null;
+    return /* @__PURE__ */ React.createElement("div", { className: "ContentSwitchers__Container" }, /* @__PURE__ */ React.createElement(
+      Tabs,
+      {
+        variant: "slim",
+        className: "ContentSwitchers",
+        items: this.tabItems,
+        selectedKey: this.selectedTabKey,
+        onChange: this.onTabChange
+      }
+    ), this.renderOverflowMenu());
+  }
+};
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "manager", 1);
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "hasMultipleChartTypes", 1);
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "availableTabs", 1);
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "shouldShow", 1);
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "visibleTabs", 1);
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "hiddenTabs", 1);
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "activeTab", 1);
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "selectedTabKey", 1);
+__decorateClass([
+  computed
+], ContentSwitchers.prototype, "tabItems", 1);
+__decorateClass([
+  action.bound
+], ContentSwitchers.prototype, "setTab", 1);
+__decorateClass([
+  action.bound
+], ContentSwitchers.prototype, "showOverflowMenu", 1);
+__decorateClass([
+  action.bound
+], ContentSwitchers.prototype, "hideOverflowMenu", 1);
+__decorateClass([
+  action.bound
+], ContentSwitchers.prototype, "onTabChange", 1);
+__decorateClass([
+  action.bound
+], ContentSwitchers.prototype, "onOverflowMenuSelect", 1);
+ContentSwitchers = __decorateClass([
+  observer
+], ContentSwitchers);
+function TabContent({
+  tab,
+  hasMultipleChartTypes
+}) {
+  return /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(GrapherTabIcon, { tab }), /* @__PURE__ */ React.createElement("span", { className: "label" }, makeLabelForGrapherTab(tab, {
+    useGenericChartLabel: !hasMultipleChartTypes
+  })));
+}
+export {
+  ContentSwitchers
+};

package/dist/grapher/controls/ContentSwitchers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/ContentSwitchers.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport { action, computed, observable, makeObservable } from \"mobx\"\nimport cx from \"classnames\"\nimport { observer } from \"mobx-react\"\nimport { GrapherTabName } from \"../../types/index.js\"\nimport { TabItem, Tabs } from \"../tabs/Tabs.js\"\nimport { makeLabelForGrapherTab } from \"../chart/ChartTabs.js\"\nimport { Menu, MenuItem, Popover } from \"react-aria-components\"\nimport { GrapherTabIcon } from \"../../components/index.js\"\n\nexport interface ContentSwitchersManager {\n    availableTabs?: GrapherTabName[]\n    activeTab?: GrapherTabName\n    hasMultipleChartTypes?: boolean\n    setTab: (tab: GrapherTabName) => void\n    onTabChange: (oldTab: GrapherTabName, newTab: GrapherTabName) => void\n    isMedium?: boolean\n}\n\nconst OVERFLOW_MENU_KEY = \"More\"\n\nconst MAX_VISIBLE_TABS = 4\nconst MAX_VISIBLE_TABS_BEFORE_OVERFLOW = 3\n\ntype TabKey = GrapherTabName | typeof OVERFLOW_MENU_KEY\n\n@observer\nexport class ContentSwitchers extends React.Component<{\n    manager: ContentSwitchersManager\n}> {\n    constructor(props: { manager: ContentSwitchersManager }) {\n        super(props)\n\n        makeObservable<ContentSwitchers, \"isOverflowMenuOpen\">(this, {\n            isOverflowMenuOpen: observable,\n        })\n    }\n\n    static shouldShow(manager: ContentSwitchersManager): boolean {\n        const test = new ContentSwitchers({ manager })\n        return test.shouldShow\n    }\n\n    private isOverflowMenuOpen = false\n    private overflowButtonRef = React.createRef<HTMLDivElement>()\n\n    @computed private get manager(): ContentSwitchersManager {\n        return this.props.manager\n    }\n\n    @computed private get hasMultipleChartTypes(): boolean {\n        return !!this.manager.hasMultipleChartTypes\n    }\n\n    @computed private get availableTabs(): GrapherTabName[] {\n        return this.manager.availableTabs || []\n    }\n\n    @computed private get shouldShow(): boolean {\n        return this.availableTabs.length > 1\n    }\n\n    @computed private get visibleTabs(): GrapherTabName[] {\n        const { activeTab, availableTabs } = this\n\n        // If there are four or fewer tabs, show all of them\n        if (availableTabs.length <= MAX_VISIBLE_TABS) {\n            return availableTabs\n        }\n\n        // Otherwise, only show the first 3 tabs\n        const visibleTabs = availableTabs.slice(\n            0,\n            MAX_VISIBLE_TABS_BEFORE_OVERFLOW\n        )\n\n        // If the active tab is not visible, replace the last visible tab with it\n        if (!visibleTabs.includes(activeTab)) {\n            visibleTabs[visibleTabs.length - 1] = activeTab\n        }\n\n        return visibleTabs\n    }\n\n    @computed private get hiddenTabs(): GrapherTabName[] {\n        return this.availableTabs.filter(\n            (tab) => !this.visibleTabs.includes(tab)\n        )\n    }\n\n    @computed private get activeTab(): GrapherTabName {\n        return this.manager.activeTab ?? this.availableTabs[0]\n    }\n\n    @computed private get selectedTabKey(): TabKey {\n        return this.isOverflowMenuOpen ? OVERFLOW_MENU_KEY : this.activeTab\n    }\n\n    @computed private get tabItems(): TabItem<TabKey>[] {\n        const { hasMultipleChartTypes } = this\n\n        const visibleTabItems: TabItem<TabKey>[] = this.visibleTabs.map(\n            (tab) => ({\n                key: tab,\n                element: (\n                    <TabContent\n                        key={tab}\n                        tab={tab}\n                        hasMultipleChartTypes={hasMultipleChartTypes}\n                    />\n                ),\n                buttonProps: {\n                    className: cx({ active: tab === this.activeTab }),\n                    dataTrackNote: \"chart_click_\" + tab,\n                    ariaLabel: makeLabelForGrapherTab(tab, {\n                        useGenericChartLabel: !hasMultipleChartTypes,\n                    }),\n                },\n            })\n        )\n\n        // Add overflow menu button if there are hidden tabs\n        if (this.hiddenTabs.length > 0) {\n            visibleTabItems.push({\n                key: OVERFLOW_MENU_KEY,\n                element: <>+&#8202;{this.hiddenTabs.length}</>,\n                buttonProps: {\n                    className: \"ContentSwitchers__OverflowMenuButton\",\n                    ariaLabel: \"Show more chart types\",\n                    ref: this.overflowButtonRef,\n                },\n            })\n        }\n\n        return visibleTabItems\n    }\n\n    @action.bound private setTab(selectedTab: GrapherTabName): void {\n        const oldTab = this.manager.activeTab\n        const newTab = selectedTab\n        this.manager.setTab(newTab)\n        this.manager.onTabChange?.(oldTab!, newTab)\n    }\n\n    @action.bound private showOverflowMenu(): void {\n        this.isOverflowMenuOpen = true\n    }\n\n    @action.bound private hideOverflowMenu(): void {\n        this.isOverflowMenuOpen = false\n    }\n\n    @action.bound private onTabChange(selectedKey: TabKey): void {\n        if (selectedKey === OVERFLOW_MENU_KEY) {\n            this.showOverflowMenu()\n        } else {\n            this.setTab(selectedKey as GrapherTabName)\n            this.hideOverflowMenu()\n        }\n    }\n\n    @action.bound private onOverflowMenuSelect(tab: GrapherTabName): void {\n        this.setTab(tab)\n        this.hideOverflowMenu()\n    }\n\n    private renderOverflowMenu(): React.ReactElement {\n        const { hasMultipleChartTypes } = this\n\n        return (\n            <Popover\n                className=\"ContentSwitchers__OverflowMenu\"\n                placement=\"bottom\"\n                triggerRef={this.overflowButtonRef}\n                isOpen={this.isOverflowMenuOpen}\n                onOpenChange={(isOpen) => {\n                    if (!isOpen) this.hideOverflowMenu()\n                    else this.showOverflowMenu()\n                }}\n            >\n                <Menu\n                    onAction={(key) =>\n                        this.onOverflowMenuSelect(key as GrapherTabName)\n                    }\n                >\n                    {this.hiddenTabs.map((tab) => (\n                        <MenuItem\n                            key={tab}\n                            id={tab}\n                            className=\"ContentSwitchers__OverflowMenuItem\"\n                        >\n                            <TabContent\n                                tab={tab}\n                                hasMultipleChartTypes={hasMultipleChartTypes}\n                            />\n                        </MenuItem>\n                    ))}\n                </Menu>\n            </Popover>\n        )\n    }\n\n    override render(): React.ReactElement | null {\n        if (!this.shouldShow) return null\n\n        return (\n            <div className=\"ContentSwitchers__Container\">\n                <Tabs\n                    variant=\"slim\"\n                    className=\"ContentSwitchers\"\n                    items={this.tabItems}\n                    selectedKey={this.selectedTabKey}\n                    onChange={this.onTabChange}\n                />\n                {this.renderOverflowMenu()}\n            </div>\n        )\n    }\n}\n\nfunction TabContent({\n    tab,\n    hasMultipleChartTypes,\n}: {\n    tab: GrapherTabName\n    hasMultipleChartTypes?: boolean\n}): React.ReactElement {\n    return (\n        <span>\n            <GrapherTabIcon tab={tab} />\n            <span className=\"label\">\n                {makeLabelForGrapherTab(tab, {\n                    useGenericChartLabel: !hasMultipleChartTypes,\n                })}\n            </span>\n        </span>\n    )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/grapher/controls/DataTableFilterDropdown.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { EntityName } from "../../utils/index.js";
+import { DataTableConfig } from "../dataTable/DataTableConstants.js";
+import { ChartsTable } from "../../core-table/index.js";
+import { SelectionArray } from "../selection/SelectionArray.js";
+import { EntityRegionTypeGroup } from "../core/EntitiesByRegionType.js";
+export interface DataTableFilterDropdownManager {
+    dataTableConfig: DataTableConfig;
+    tableForDisplay: ChartsTable;
+    isOnTableTab?: boolean;
+    dataTableSelection?: SelectionArray | EntityName[];
+    canChangeAddOrHighlightEntities?: boolean;
+    shouldShowSelectionOnlyInDataTable?: boolean;
+    entityRegionTypeGroups?: EntityRegionTypeGroup[];
+    isSemiNarrow?: boolean;
+}
+export declare class DataTableFilterDropdown extends React.Component<{
+    manager: DataTableFilterDropdownManager;
+}> {
+    constructor(props: {
+        manager: DataTableFilterDropdownManager;
+    });
+    static shouldShow(manager: DataTableFilterDropdownManager): boolean;
+    private get manager();
+    private get selectionArray();
+    private get shouldShow();
+    private get availableEntityNameSet();
+    private onChange;
+    private get shouldShowSelectionOption();
+    private get options();
+    private get value();
+    render(): React.ReactElement | null;
+}
+//# sourceMappingURL=DataTableFilterDropdown.d.ts.map

package/dist/grapher/controls/DataTableFilterDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFilterDropdown.d.ts","sourceRoot":"","sources":["../../../src/grapher/controls/DataTableFilterDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAE/D,OAAO,EACH,qBAAqB,EAExB,MAAM,iCAAiC,CAAA;AAExC,MAAM,WAAW,8BAA8B;IAC3C,eAAe,EAAE,eAAe,CAAA;IAChC,eAAe,EAAE,WAAW,CAAA;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,cAAc,GAAG,UAAU,EAAE,CAAA;IAClD,+BAA+B,CAAC,EAAE,OAAO,CAAA;IACzC,kCAAkC,CAAC,EAAE,OAAO,CAAA;IAC5C,sBAAsB,CAAC,EAAE,qBAAqB,EAAE,CAAA;IAChD,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,qBACa,uBAAwB,SAAQ,KAAK,CAAC,SAAS,CAAC;IACzD,OAAO,EAAE,8BAA8B,CAAA;CAC1C,CAAC;gBACc,KAAK,EAAE;QAAE,OAAO,EAAE,8BAA8B,CAAA;KAAE;IAK9D,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,8BAA8B,GAAG,OAAO;IAKzD,OAAO,KAAK,OAAO,GAE5B;IAES,OAAO,KAAK,cAAc,GAEnC;IAES,OAAO,KAAK,UAAU,GAO/B;IAES,OAAO,KAAK,sBAAsB,GAE3C;IAEa,OAAO,CAAC,QAAQ;IAQ9B,OAAO,KAAK,yBAAyB,GAMpC;IAES,OAAO,KAAK,OAAO,GAsC5B;IAES,OAAO,KAAK,KAAK,GAM1B;IAEQ,MAAM,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI;CAgB/C"}

package/dist/grapher/controls/DataTableFilterDropdown.js

@@ -0,0 +1,139 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as React from "react";
+import { computed, action, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import { Dropdown } from "./Dropdown.js";
+import { makeSelectionArray } from "../chart/ChartUtils.js";
+import {
+  entityRegionTypeLabels
+} from "../core/EntitiesByRegionType.js";
+let DataTableFilterDropdown = class extends React.Component {
+  constructor(props) {
+    super(props);
+    makeObservable(this);
+  }
+  static shouldShow(manager) {
+    const menu = new DataTableFilterDropdown({ manager });
+    return menu.shouldShow;
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get selectionArray() {
+    return makeSelectionArray(this.manager.dataTableSelection);
+  }
+  get shouldShow() {
+    return !!this.manager.isOnTableTab && this.options.length > 1 && this.options[0].count !== this.options[1].count && !this.manager.isSemiNarrow;
+  }
+  get availableEntityNameSet() {
+    return this.manager.tableForDisplay.availableEntityNameSet;
+  }
+  onChange(selected) {
+    if (selected?.value) {
+      this.manager.dataTableConfig.filter = selected.value;
+      this.manager.dataTableConfig.search = "";
+    }
+  }
+  get shouldShowSelectionOption() {
+    return !this.manager.shouldShowSelectionOnlyInDataTable && this.selectionArray.hasSelection && !!this.manager.canChangeAddOrHighlightEntities;
+  }
+  get options() {
+    const options = [
+      {
+        value: "all",
+        label: "All",
+        count: this.availableEntityNameSet.size,
+        trackNote: "data_table_filter_by"
+      }
+    ];
+    if (this.shouldShowSelectionOption) {
+      options.push({
+        value: "selection",
+        label: "Selection",
+        count: this.selectionArray.numSelectedEntities,
+        trackNote: "data_table_filter_by"
+      });
+    }
+    if (this.manager.entityRegionTypeGroups) {
+      options.push(
+        ...this.manager.entityRegionTypeGroups.map(
+          ({ regionType, entityNames }) => ({
+            value: regionType,
+            label: entityRegionTypeLabels[regionType],
+            count: entityNames.filter(
+              (entityName) => this.availableEntityNameSet.has(entityName)
+            ).length,
+            trackNote: "data_table_filter_by"
+          })
+        ).filter(({ count }) => count > 0)
+      );
+    }
+    return options;
+  }
+  get value() {
+    const { filter } = this.props.manager.dataTableConfig;
+    return this.options.find((option) => filter === option.value) ?? this.options[0];
+  }
+  render() {
+    if (!this.shouldShow) return null;
+    return /* @__PURE__ */ React.createElement(
+      Dropdown,
+      {
+        className: "data-table-filter-dropdown",
+        menuClassName: "data-table-filter-dropdown-menu",
+        options: this.options,
+        onChange: this.onChange,
+        value: this.value,
+        renderTriggerValue: renderFilterTriggerValue,
+        renderMenuOption: renderFilterMenuOption,
+        "aria-label": "Filter by"
+      }
+    );
+  }
+};
+__decorateClass([
+  computed
+], DataTableFilterDropdown.prototype, "manager", 1);
+__decorateClass([
+  computed
+], DataTableFilterDropdown.prototype, "selectionArray", 1);
+__decorateClass([
+  computed
+], DataTableFilterDropdown.prototype, "shouldShow", 1);
+__decorateClass([
+  computed
+], DataTableFilterDropdown.prototype, "availableEntityNameSet", 1);
+__decorateClass([
+  action.bound
+], DataTableFilterDropdown.prototype, "onChange", 1);
+__decorateClass([
+  computed
+], DataTableFilterDropdown.prototype, "shouldShowSelectionOption", 1);
+__decorateClass([
+  computed
+], DataTableFilterDropdown.prototype, "options", 1);
+__decorateClass([
+  computed
+], DataTableFilterDropdown.prototype, "value", 1);
+DataTableFilterDropdown = __decorateClass([
+  observer
+], DataTableFilterDropdown);
+function renderFilterTriggerValue(option) {
+  if (!option) return void 0;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "label" }, "Filter by: "), option.label, " ", /* @__PURE__ */ React.createElement("span", { className: "detail" }, "(", option.count, ")"));
+}
+function renderFilterMenuOption(option) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, option.label, " ", /* @__PURE__ */ React.createElement("span", { className: "detail" }, "(", option.count, ")"));
+}
+export {
+  DataTableFilterDropdown
+};

package/dist/grapher/controls/DataTableFilterDropdown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/DataTableFilterDropdown.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport { computed, action, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport { Dropdown } from \"./Dropdown.js\"\nimport { EntityName } from \"../../utils/index.js\"\nimport { DataTableConfig } from \"../dataTable/DataTableConstants.js\"\nimport { ChartsTable } from \"../../core-table/index.js\"\nimport { SelectionArray } from \"../selection/SelectionArray.js\"\nimport { makeSelectionArray } from \"../chart/ChartUtils.js\"\nimport {\n    EntityRegionTypeGroup,\n    entityRegionTypeLabels,\n} from \"../core/EntitiesByRegionType.js\"\n\nexport interface DataTableFilterDropdownManager {\n    dataTableConfig: DataTableConfig\n    tableForDisplay: ChartsTable\n    isOnTableTab?: boolean\n    dataTableSelection?: SelectionArray | EntityName[]\n    canChangeAddOrHighlightEntities?: boolean\n    shouldShowSelectionOnlyInDataTable?: boolean\n    entityRegionTypeGroups?: EntityRegionTypeGroup[]\n    isSemiNarrow?: boolean\n}\n\ninterface DropdownOption {\n    label: string\n    value: DataTableConfig[\"filter\"]\n    count: number\n    trackNote: \"data_table_filter_by\"\n}\n\n@observer\nexport class DataTableFilterDropdown extends React.Component<{\n    manager: DataTableFilterDropdownManager\n}> {\n    constructor(props: { manager: DataTableFilterDropdownManager }) {\n        super(props)\n        makeObservable(this)\n    }\n\n    static shouldShow(manager: DataTableFilterDropdownManager): boolean {\n        const menu = new DataTableFilterDropdown({ manager })\n        return menu.shouldShow\n    }\n\n    @computed private get manager(): DataTableFilterDropdownManager {\n        return this.props.manager\n    }\n\n    @computed private get selectionArray(): SelectionArray {\n        return makeSelectionArray(this.manager.dataTableSelection)\n    }\n\n    @computed private get shouldShow(): boolean {\n        return (\n            !!this.manager.isOnTableTab &&\n            this.options.length > 1 &&\n            this.options[0].count !== this.options[1].count &&\n            !this.manager.isSemiNarrow\n        )\n    }\n\n    @computed private get availableEntityNameSet(): Set<EntityName> {\n        return this.manager.tableForDisplay.availableEntityNameSet\n    }\n\n    @action.bound private onChange(selected: DropdownOption | null): void {\n        if (selected?.value) {\n            this.manager.dataTableConfig.filter = selected.value\n            this.manager.dataTableConfig.search = \"\"\n        }\n    }\n\n    @computed\n    private get shouldShowSelectionOption(): boolean {\n        return (\n            !this.manager.shouldShowSelectionOnlyInDataTable &&\n            this.selectionArray.hasSelection &&\n            !!this.manager.canChangeAddOrHighlightEntities\n        )\n    }\n\n    @computed private get options(): DropdownOption[] {\n        const options: DropdownOption[] = [\n            {\n                value: \"all\",\n                label: \"All\",\n                count: this.availableEntityNameSet.size,\n                trackNote: \"data_table_filter_by\",\n            },\n        ]\n\n        if (this.shouldShowSelectionOption) {\n            options.push({\n                value: \"selection\",\n                label: \"Selection\",\n                count: this.selectionArray.numSelectedEntities,\n                trackNote: \"data_table_filter_by\",\n            })\n        }\n\n        if (this.manager.entityRegionTypeGroups) {\n            options.push(\n                ...this.manager.entityRegionTypeGroups\n                    .map(\n                        ({ regionType, entityNames }) =>\n                            ({\n                                value: regionType,\n                                label: entityRegionTypeLabels[regionType],\n                                count: entityNames.filter((entityName) =>\n                                    this.availableEntityNameSet.has(entityName)\n                                ).length,\n                                trackNote: \"data_table_filter_by\",\n                            }) satisfies DropdownOption\n                    )\n                    .filter(({ count }) => count > 0)\n            )\n        }\n\n        return options\n    }\n\n    @computed private get value(): DropdownOption | null {\n        const { filter } = this.props.manager.dataTableConfig\n        return (\n            this.options.find((option) => filter === option.value) ??\n            this.options[0]\n        )\n    }\n\n    override render(): React.ReactElement | null {\n        if (!this.shouldShow) return null\n\n        return (\n            <Dropdown<DropdownOption>\n                className=\"data-table-filter-dropdown\"\n                menuClassName=\"data-table-filter-dropdown-menu\"\n                options={this.options}\n                onChange={this.onChange}\n                value={this.value}\n                renderTriggerValue={renderFilterTriggerValue}\n                renderMenuOption={renderFilterMenuOption}\n                aria-label=\"Filter by\"\n            />\n        )\n    }\n}\n\nfunction renderFilterTriggerValue(\n    option: DropdownOption | null\n): React.ReactNode | undefined {\n    if (!option) return undefined\n    return (\n        <>\n            <span className=\"label\">Filter by: </span>\n            {option.label} <span className=\"detail\">({option.count})</span>\n        </>\n    )\n}\n\nfunction renderFilterMenuOption(option: DropdownOption): React.ReactNode {\n    return (\n        <>\n            {option.label} <span className=\"detail\">({option.count})</span>\n        </>\n    )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/grapher/controls/DataTableSearchField.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { DataTableConfig } from "../dataTable/DataTableConstants.js";
+export interface DataTableSearchFieldManager {
+    dataTableConfig: DataTableConfig;
+    isOnTableTab?: boolean;
+    entityType?: string;
+}
+export declare class DataTableSearchField extends React.Component<{
+    manager: DataTableSearchFieldManager;
+}> {
+    constructor(props: {
+        manager: DataTableSearchFieldManager;
+    });
+    static shouldShow(manager: DataTableSearchFieldManager): boolean;
+    private get manager();
+    private get config();
+    private get shouldShow();
+    private get entityType();
+    private get placeholderEntityType();
+    render(): React.ReactElement | null;
+}
+//# sourceMappingURL=DataTableSearchField.d.ts.map

package/dist/grapher/controls/DataTableSearchField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSearchField.d.ts","sourceRoot":"","sources":["../../../src/grapher/controls/DataTableSearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AAMpE,MAAM,WAAW,2BAA2B;IACxC,eAAe,EAAE,eAAe,CAAA;IAChC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,qBACa,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC;IACtD,OAAO,EAAE,2BAA2B,CAAA;CACvC,CAAC;gBACc,KAAK,EAAE;QAAE,OAAO,EAAE,2BAA2B,CAAA;KAAE;IAK3D,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,2BAA2B,GAAG,OAAO;IAKtD,OAAO,KAAK,OAAO,GAE5B;IAES,OAAO,KAAK,MAAM,GAE3B;IAES,OAAO,KAAK,UAAU,GAE/B;IAES,OAAO,KAAK,UAAU,GAE/B;IAES,OAAO,KAAK,qBAAqB,GAW1C;IAEQ,MAAM,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI;CAgB/C"}

package/dist/grapher/controls/DataTableSearchField.js

@@ -0,0 +1,79 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as React from "react";
+import { computed, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import a from "indefinite";
+import { SearchField } from "./SearchField.js";
+import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../core/GrapherConstants.js";
+import { isAggregateSource } from "../core/EntitiesByRegionType.js";
+import { match } from "ts-pattern";
+let DataTableSearchField = class extends React.Component {
+  constructor(props) {
+    super(props);
+    makeObservable(this);
+  }
+  static shouldShow(manager) {
+    const menu = new DataTableSearchField({ manager });
+    return menu.shouldShow;
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get config() {
+    return this.manager.dataTableConfig;
+  }
+  get shouldShow() {
+    return !!this.manager.isOnTableTab;
+  }
+  get entityType() {
+    return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE;
+  }
+  get placeholderEntityType() {
+    if (isAggregateSource(this.config.filter)) return "region";
+    return match(this.config.filter).with("all", () => this.entityType).with("selection", () => this.entityType).with("countries", () => "country").with("continents", () => "continent").with("incomeGroups", () => "income group").with("historicalCountries", () => "country or region").exhaustive();
+  }
+  render() {
+    if (!this.shouldShow) return null;
+    return /* @__PURE__ */ React.createElement(
+      SearchField,
+      {
+        className: "data-table-search-field",
+        value: this.manager.dataTableConfig.search,
+        onChange: (value) => this.manager.dataTableConfig.search = value,
+        onClear: () => this.manager.dataTableConfig.search = "",
+        trackNote: "data_table_search",
+        placeholder: `Search for ${a(this.placeholderEntityType)}`
+      }
+    );
+  }
+};
+__decorateClass([
+  computed
+], DataTableSearchField.prototype, "manager", 1);
+__decorateClass([
+  computed
+], DataTableSearchField.prototype, "config", 1);
+__decorateClass([
+  computed
+], DataTableSearchField.prototype, "shouldShow", 1);
+__decorateClass([
+  computed
+], DataTableSearchField.prototype, "entityType", 1);
+__decorateClass([
+  computed
+], DataTableSearchField.prototype, "placeholderEntityType", 1);
+DataTableSearchField = __decorateClass([
+  observer
+], DataTableSearchField);
+export {
+  DataTableSearchField
+};

package/dist/grapher/controls/DataTableSearchField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/DataTableSearchField.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport { computed, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport a from \"indefinite\"\nimport { DataTableConfig } from \"../dataTable/DataTableConstants.js\"\nimport { SearchField } from \"./SearchField.js\"\nimport { DEFAULT_GRAPHER_ENTITY_TYPE } from \"../core/GrapherConstants.js\"\nimport { isAggregateSource } from \"../core/EntitiesByRegionType.js\"\nimport { match } from \"ts-pattern\"\n\nexport interface DataTableSearchFieldManager {\n    dataTableConfig: DataTableConfig\n    isOnTableTab?: boolean\n    entityType?: string\n}\n\n@observer\nexport class DataTableSearchField extends React.Component<{\n    manager: DataTableSearchFieldManager\n}> {\n    constructor(props: { manager: DataTableSearchFieldManager }) {\n        super(props)\n        makeObservable(this)\n    }\n\n    static shouldShow(manager: DataTableSearchFieldManager): boolean {\n        const menu = new DataTableSearchField({ manager })\n        return menu.shouldShow\n    }\n\n    @computed private get manager(): DataTableSearchFieldManager {\n        return this.props.manager\n    }\n\n    @computed private get config(): DataTableConfig {\n        return this.manager.dataTableConfig\n    }\n\n    @computed private get shouldShow(): boolean {\n        return !!this.manager.isOnTableTab\n    }\n\n    @computed private get entityType(): string {\n        return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE\n    }\n\n    @computed private get placeholderEntityType(): string {\n        if (isAggregateSource(this.config.filter)) return \"region\"\n\n        return match(this.config.filter)\n            .with(\"all\", () => this.entityType)\n            .with(\"selection\", () => this.entityType)\n            .with(\"countries\", () => \"country\")\n            .with(\"continents\", () => \"continent\")\n            .with(\"incomeGroups\", () => \"income group\")\n            .with(\"historicalCountries\", () => \"country or region\")\n            .exhaustive()\n    }\n\n    override render(): React.ReactElement | null {\n        if (!this.shouldShow) return null\n\n        return (\n            <SearchField\n                className=\"data-table-search-field\"\n                value={this.manager.dataTableConfig.search}\n                onChange={(value) =>\n                    (this.manager.dataTableConfig.search = value)\n                }\n                onClear={() => (this.manager.dataTableConfig.search = \"\")}\n                trackNote=\"data_table_search\"\n                placeholder={`Search for ${a(this.placeholderEntityType)}`}\n            />\n        )\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,UAAU,sBAAsB;AACzC,SAAS,gBAAgB;AACzB,OAAO,OAAO;AAEd,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAC5C,SAAS,yBAAyB;AAClC,SAAS,aAAa;AASf,IAAM,uBAAN,cAAmC,MAAM,UAE7C;AAAA,EACC,YAAY,OAAiD;AACzD,UAAM,KAAK;AACX,mBAAe,IAAI;AAAA,EACvB;AAAA,EAEA,OAAO,WAAW,SAA+C;AAC7D,UAAM,OAAO,IAAI,qBAAqB,EAAE,QAAQ,CAAC;AACjD,WAAO,KAAK;AAAA,EAChB;AAAA,EAEU,IAAY,UAAuC;AACzD,WAAO,KAAK,MAAM;AAAA,EACtB;AAAA,EAEU,IAAY,SAA0B;AAC5C,WAAO,KAAK,QAAQ;AAAA,EACxB;AAAA,EAEU,IAAY,aAAsB;AACxC,WAAO,CAAC,CAAC,KAAK,QAAQ;AAAA,EAC1B;AAAA,EAEU,IAAY,aAAqB;AACvC,WAAO,KAAK,QAAQ,cAAc;AAAA,EACtC;AAAA,EAEU,IAAY,wBAAgC;AAClD,QAAI,kBAAkB,KAAK,OAAO,MAAM,EAAG,QAAO;AAElD,WAAO,MAAM,KAAK,OAAO,MAAM,EAC1B,KAAK,OAAO,MAAM,KAAK,UAAU,EACjC,KAAK,aAAa,MAAM,KAAK,UAAU,EACvC,KAAK,aAAa,MAAM,SAAS,EACjC,KAAK,cAAc,MAAM,WAAW,EACpC,KAAK,gBAAgB,MAAM,cAAc,EACzC,KAAK,uBAAuB,MAAM,mBAAmB,EACrD,WAAW;AAAA,EACpB;AAAA,EAES,SAAoC;AACzC,QAAI,CAAC,KAAK,WAAY,QAAO;AAE7B,WACI;AAAA,MAAC;AAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO,KAAK,QAAQ,gBAAgB;AAAA,QACpC,UAAU,CAAC,UACN,KAAK,QAAQ,gBAAgB,SAAS;AAAA,QAE3C,SAAS,MAAO,KAAK,QAAQ,gBAAgB,SAAS;AAAA,QACtD,WAAU;AAAA,QACV,aAAa,cAAc,EAAE,KAAK,qBAAqB,CAAC;AAAA;AAAA,IAC5D;AAAA,EAER;AACJ;AA7C0B;AAAA,EAArB;AAAA,GAbQ,qBAaa;AAIA;AAAA,EAArB;AAAA,GAjBQ,qBAiBa;AAIA;AAAA,EAArB;AAAA,GArBQ,qBAqBa;AAIA;AAAA,EAArB;AAAA,GAzBQ,qBAyBa;AAIA;AAAA,EAArB;AAAA,GA7BQ,qBA6Ba;AA7Bb,uBAAN;AAAA,EADN;AAAA,GACY;",
+  "names": []
+}