@elliemae/ds-legacy-shuttle-v2 1.0.0-rc.1

package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js

@@ -0,0 +1,186 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MultipleSelectionAction_exports = {};
+__export(MultipleSelectionAction_exports, {
+  MultipleSelectionAction: () => MultipleSelectionAction
+});
+module.exports = __toCommonJS(MultipleSelectionAction_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
+var import_ds_legacy_button_v2 = require("@elliemae/ds-legacy-button-v2");
+var import_ds_legacy_icons = require("@elliemae/ds-legacy-icons");
+var import_constants = require("../../../constants/index.js");
+var import_itemMovementHelpers = require("../../../config/itemMovementHelpers.js");
+var import_useStore = require("../../../config/useStore/index.js");
+var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
+var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
+const StyledMoveMultipleWrapper = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
+  position: absolute;
+  background-color: neutral-000;
+  top: 0px;
+  right: 0px;
+  transform: translateX(0);
+  height: 100%;
+  width: 5rem;
+  :hover {
+    background-color: brand-200;
+    > svg {
+      fill: brand-700;
+    }
+  }
+  > svg {
+    fill: brand-600;
+  }
+`;
+const StyledButton = (0, import_ds_legacy_system.styled)(import_ds_legacy_button_v2.DSButtonV2, {
+  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
+  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.MOVE_MULTIPLE_BTN
+})`
+  width: 100%;
+  height: 100%;
+`;
+const StyledCloseMediumIcon = (0, import_ds_legacy_system.styled)(import_ds_legacy_icons.CloseMedium, {
+  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
+  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON
+})`
+  > svg {
+    fill: brand-600;
+  }
+`;
+const StyledArrowShortRightIcon = (0, import_ds_legacy_system.styled)(import_ds_legacy_icons.ArrowShortRight, {
+  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
+  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
+})`
+  > svg {
+    fill: brand-600;
+  }
+`;
+const gridFullFraction = ["1fr"];
+const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
+  const { isDestinationPanel } = panelMeta;
+  const { moveSelection } = (0, import_itemMovementHelpers.useHandleMoveSelection)(panelMeta);
+  const { trackFocusRegionPanel, trackFocusRegionPanelFocusMoveAll, trackFocusItemReset, trackFocusActionReset } = (0, import_useFocusTracker.useFocusTracker)();
+  const handleMoveAllAction = import_react.default.useCallback(
+    (event) => {
+      moveSelection(event);
+      trackFocusItemReset();
+      trackFocusActionReset();
+      trackFocusRegionPanel(isDestinationPanel);
+    },
+    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
+  );
+  const handleMoveAllBtnFocus = import_react.default.useCallback(() => {
+    trackFocusItemReset();
+    trackFocusActionReset();
+    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);
+  const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
+  const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;
+  const innerRefHandlerMoveAll = import_react.default.useCallback(
+    (node) => {
+      setZustandRef([currRegion, "", ""], node);
+    },
+    [currRegion, setZustandRef]
+  );
+  const handleMoveAllKeyDown = import_react.default.useCallback(
+    (e) => {
+      const { key } = e;
+      if (["ArrowLeft", "ArrowRight"].includes(key)) {
+        trackFocusItemReset();
+        trackFocusActionReset();
+        trackFocusRegionPanel(isDestinationPanel);
+      }
+    },
+    [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel]
+  );
+  const getBatchActionableButtonProps = (0, import_useStore.usePropsStore)((state) => state.getBatchActionableButtonProps);
+  const batchActionableButtonProps = import_react.default.useMemo(
+    () => getBatchActionableButtonProps !== void 0 ? getBatchActionableButtonProps(panelMeta) : {},
+    [getBatchActionableButtonProps, panelMeta]
+  );
+  const buttonActions = import_react.default.useMemo(
+    () => ({
+      onClick: handleMoveAllAction,
+      onFocus: handleMoveAllBtnFocus,
+      onKeyDown: handleMoveAllKeyDown
+    }),
+    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown]
+  );
+  const spreadableButtonProps = (0, import_ds_legacy_props_helpers.useGetGlobalAttributes)(batchActionableButtonProps, buttonActions);
+  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => panelMeta, [panelMeta]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledMoveMultipleWrapper,
+    {
+      boxShadow: "xs",
+      alignItems: "center",
+      justifyContent: "center",
+      cols: gridFullFraction,
+      rows: gridFullFraction,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledButton,
+        {
+          "aria-label": "massive action button",
+          buttonType: "icon",
+          onClick: handleMoveAllAction,
+          onFocus: handleMoveAllBtnFocus,
+          onKeyDown: handleMoveAllKeyDown,
+          innerRef: innerRefHandlerMoveAll,
+          ...spreadableButtonProps,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            StyledCloseMediumIcon,
+            {
+              width: "1.538rem",
+              height: "1.538rem",
+              getOwnerProps,
+              getOwnerPropsArguments
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            StyledArrowShortRightIcon,
+            {
+              width: "1.538",
+              height: "1.538rem",
+              getOwnerProps,
+              getOwnerPropsArguments
+            }
+          )
+        }
+      )
+    }
+  );
+});
+//# sourceMappingURL=MultipleSelectionAction.js.map

package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Panel/middle/MultipleSelectionAction.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { useGetGlobalAttributes } from '@elliemae/ds-legacy-props-helpers';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-legacy-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-legacy-icons';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 5rem;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusMoveAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const currRegion = isDestinationPanel\n    ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n    : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n  const innerRefHandlerMoveAll = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n\n  const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const { key } = e;\n      if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n        trackFocusItemReset();\n        trackFocusActionReset();\n        trackFocusRegionPanel(isDestinationPanel);\n      }\n    },\n    [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n  );\n\n  const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n  const batchActionableButtonProps = React.useMemo(\n    () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n    [getBatchActionableButtonProps, panelMeta],\n  );\n  const buttonActions = React.useMemo(\n    () => ({\n      onClick: handleMoveAllAction,\n      onFocus: handleMoveAllBtnFocus,\n      onKeyDown: handleMoveAllKeyDown,\n    }),\n    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown],\n  );\n\n  // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n  // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n  const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledButton\n        aria-label=\"massive action button\"\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        onKeyDown={handleMoveAllKeyDown}\n        innerRef={innerRefHandlerMoveAll}\n        {...spreadableButtonProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon\n            width=\"1.538rem\"\n            height=\"1.538rem\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        ) : (\n          <StyledArrowShortRightIcon\n            width=\"1.538\"\n            height=\"1.538rem\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js

@@ -0,0 +1,174 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PanelContentMiddleSection_exports = {};
+__export(PanelContentMiddleSection_exports, {
+  PanelContentMiddleSection: () => PanelContentMiddleSection
+});
+module.exports = __toCommonJS(PanelContentMiddleSection_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_ds_legacy_utilities = require("@elliemae/ds-legacy-utilities");
+var import_useStore = require("../../../config/useStore/index.js");
+var import_Index = require("./ItemListWrapper/Index.js");
+var import_EmptyItems = require("./EmptyItems.js");
+var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
+var import_LoadingItems = require("./LoadingItems.js");
+var import_MultipleSelectionAction = require("./MultipleSelectionAction.js");
+var import_constants = require("../../../constants/index.js");
+var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
+const useInnerRefHandlers = (isDestinationPanel) => {
+  const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
+  const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL;
+  const innerRefHandlerParentItem = import_react.default.useCallback(
+    (node) => {
+      setZustandRef([currRegion, "", ""], node);
+    },
+    [currRegion, setZustandRef]
+  );
+  return import_react.default.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);
+};
+const StyledListWrapperMid = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_WRAPPER_MID })`
+  overflow: hidden;
+  position: relative;
+  :focus,
+  :focus-visible {
+    outline: 2px solid brand-700;
+  }
+`;
+const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
+  const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;
+  const itemsLength = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationData.length : state.sourceData.length
+  );
+  const isLoading = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading);
+  const showEmptyMessage = !isLoading && itemsLength === 0;
+  const showItems = !isLoading && !showEmptyMessage;
+  const actionRef = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef
+  );
+  const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
+  const withLoadMore = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
+  );
+  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);
+  const {
+    trackFocusRegionPanel,
+    trackFocusItemFirst,
+    trackFocusItemLast,
+    trackFocusActionParent,
+    trackFocusRegionPanelItem,
+    trackFocusLoadMoreBtnDestination,
+    trackFocusLoadMoreBtn
+  } = (0, import_useFocusTracker.useFocusTracker)();
+  const config = import_react.default.useMemo(
+    () => ({
+      onFocus: () => {
+        trackFocusRegionPanel(isDestinationPanel);
+      }
+    }),
+    [trackFocusRegionPanel, isDestinationPanel]
+  );
+  const onPanelFocus = (0, import_ds_legacy_utilities.useOnSpecificFocus)(config);
+  const onPanelKeyDown = import_react.default.useCallback(
+    (e) => {
+      const { key } = e;
+      const isDragAndDropHappening = getIsDragAndDropHappening();
+      if (isDragAndDropHappening) {
+        e.preventDefault();
+        return;
+      }
+      if (["Home", "End", "ArrowUp", "ArrowDown"].includes(key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        trackFocusRegionPanelItem(isDestinationPanel);
+        trackFocusActionParent();
+        if (key === "ArrowDown" || key === "Home") {
+          actionRef.current.scrollTo(0);
+          trackFocusItemFirst(panelMetaInfo);
+        }
+        if (key === "ArrowUp" || key === "End") {
+          if (withLoadMore) {
+            if (isDestinationPanel)
+              trackFocusLoadMoreBtnDestination();
+            else
+              trackFocusLoadMoreBtn();
+          } else {
+            trackFocusItemLast(panelMetaInfo);
+            actionRef.current.scrollTo(itemsLength - 1);
+          }
+        }
+      }
+    },
+    [
+      getIsDragAndDropHappening,
+      trackFocusRegionPanelItem,
+      isDestinationPanel,
+      trackFocusActionParent,
+      actionRef,
+      trackFocusItemFirst,
+      panelMetaInfo,
+      withLoadMore,
+      trackFocusLoadMoreBtnDestination,
+      trackFocusLoadMoreBtn,
+      trackFocusItemLast,
+      itemsLength
+    ]
+  );
+  const cols = import_react.default.useMemo(() => {
+    if (hasMultipleSelection)
+      return ["1fr", "5rem"];
+    return ["auto"];
+  }, [hasMultipleSelection]);
+  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledListWrapperMid,
+    {
+      onFocus: onPanelFocus,
+      onKeyDown: onPanelKeyDown,
+      role: "region",
+      "aria-label": `${isDestinationPanel ? "destination" : "source"} panel`,
+      tabIndex: 0,
+      rows: [1],
+      getOwnerProps,
+      getOwnerPropsArguments,
+      ref: innerRefHandlerParentItem,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_legacy_grid.Grid, { cols, rows: [1], children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingItems.LoadingItems, { ...panelMetaInfo }) : null,
+        showEmptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyItems.EmptyItems, { ...panelMetaInfo }) : null,
+        showItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Index.ItemListWrapperWithContext, { ...panelMetaInfo }) : null,
+        hasMultipleSelection ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MultipleSelectionAction.MultipleSelectionAction, { ...panelMetaInfo }) : null
+      ] })
+    }
+  );
+});
+//# sourceMappingURL=PanelContentMiddleSection.js.map

package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Panel/middle/PanelContentMiddleSection.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { useOnSpecificFocus } from '@elliemae/ds-legacy-utilities';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index.js';\nimport { EmptyItems } from './EmptyItems.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { LoadingItems } from './LoadingItems.js';\nimport { MultipleSelectionAction } from './MultipleSelectionAction.js';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: hidden;\n  position: relative;\n  :focus,\n  :focus-visible {\n    outline: 2px solid brand-700;\n  }\n`;\n\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  const actionRef = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtnDestination,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if (key === 'ArrowDown' || key === 'Home') {\n          actionRef.current.scrollTo(0);\n          trackFocusItemFirst(panelMetaInfo);\n        }\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) {\n            if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n            else trackFocusLoadMoreBtn();\n          } else {\n            trackFocusItemLast(panelMetaInfo);\n            actionRef.current.scrollTo(itemsLength - 1);\n          }\n        }\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      isDestinationPanel,\n      trackFocusActionParent,\n      actionRef,\n      trackFocusItemFirst,\n      panelMetaInfo,\n      withLoadMore,\n      trackFocusLoadMoreBtnDestination,\n      trackFocusLoadMoreBtn,\n      trackFocusItemLast,\n      itemsLength,\n    ],\n  );\n\n  const cols = React.useMemo(() => {\n    if (hasMultipleSelection) return ['1fr', '5rem'];\n    return ['auto'];\n  }, [hasMultipleSelection]);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledListWrapperMid\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n      role=\"region\"\n      aria-label={`${isDestinationPanel ? 'destination' : 'source'} panel`}\n      tabIndex={0}\n      rows={[1]}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      ref={innerRefHandlerParentItem}\n    >\n      <Grid cols={cols} rows={[1]}>\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n        {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n      </Grid>\n    </StyledListWrapperMid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/parts/Panel/top/PanelContentTopSection.js

@@ -0,0 +1,71 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PanelContentTopSection_exports = {};
+__export(PanelContentTopSection_exports, {
+  PanelContentTopSection: () => PanelContentTopSection
+});
+module.exports = __toCommonJS(PanelContentTopSection_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_useStore = require("../../../config/useStore/index.js");
+var import_SelectionHeader = require("./SelectionHeader.js");
+var import_PanelFilterSection = require("./PanelFilterSection.js");
+var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
+const StyledListWrapperTop = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_WRAPPER_TOP })``;
+const PanelContentTopSection = (panelMetaInfo) => {
+  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => panelMetaInfo, [panelMetaInfo]);
+  const { isDestinationPanel = false } = panelMetaInfo;
+  const isSearchBarOpen = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar
+  );
+  const topSectionRows = import_react.default.useMemo(() => {
+    const cols = [];
+    if (isSearchBarOpen)
+      cols.push("auto");
+    cols.push("auto");
+    return cols;
+  }, [isSearchBarOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledListWrapperTop,
+    {
+      rows: topSectionRows,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        isSearchBarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelFilterSection.PanelFilterSection, { ...panelMetaInfo }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectionHeader.SelectionHeader, { ...panelMetaInfo })
+      ]
+    }
+  );
+};
+//# sourceMappingURL=PanelContentTopSection.js.map

package/dist/cjs/parts/Panel/top/PanelContentTopSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Panel/top/PanelContentTopSection.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { SelectionHeader } from './SelectionHeader.js';\nimport { PanelFilterSection } from './PanelFilterSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const topSectionRows = React.useMemo(() => {\n    const cols = [];\n    if (isSearchBarOpen) cols.push('auto');\n    cols.push('auto');\n    return cols;\n  }, [isSearchBarOpen]);\n  return (\n    <StyledListWrapperTop\n      rows={topSectionRows}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n      <SelectionHeader {...panelMetaInfo} />\n    </StyledListWrapperTop>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BnB;AA1BJ,mBAAmC;AACnC,8BAAuB;AACvB,4BAAqB;AACrB,sBAA8B;AAE9B,6BAAgC;AAChC,gCAAmC;AACnC,oCAAkD;AAElD,MAAM,2BAAuB,gCAAO,4BAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAErG,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,iBAAiB,aAAAA,QAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,CAAC;AACd,QAAI;AAAiB,WAAK,KAAK,MAAM;AACrC,SAAK,KAAK,MAAM;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MAEC;AAAA,0BAAkB,4CAAC,gDAAoB,GAAG,eAAe,IAAK;AAAA,QAC/D,4CAAC,0CAAiB,GAAG,eAAe;AAAA;AAAA;AAAA,EACtC;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/parts/Panel/top/PanelFilterSection.js

@@ -0,0 +1,79 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PanelFilterSection_exports = {};
+__export(PanelFilterSection_exports, {
+  PanelFilterSection: () => PanelFilterSection
+});
+module.exports = __toCommonJS(PanelFilterSection_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_form_input_text = require("@elliemae/ds-legacy-form-input-text");
+var import_useStore = require("../../../config/useStore/index.js");
+var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
+const StyledSearchWrapper = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`
+  border-bottom: 1px solid neutral-400;
+  border-radius: 0;
+`;
+const StyledInputText = (0, import_ds_legacy_system.styled)(import_ds_legacy_form_input_text.DSInputText, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.AREA_SEARCH_BAR })`
+  border: none;
+  :focus {
+    border-radius: 0;
+  }
+`;
+const PanelFilterSection = (panelMetaInfo) => {
+  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => panelMetaInfo, [panelMetaInfo]);
+  const { isDestinationPanel = false } = panelMetaInfo;
+  const onFilterCb = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange
+  );
+  const filterValue = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue
+  );
+  const handleFilterChange = import_react.default.useCallback(
+    (value, event) => {
+      onFilterCb?.(`${value}`, { event });
+    },
+    [onFilterCb]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSearchWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledInputText,
+    {
+      value: filterValue,
+      onValueChange: handleFilterChange,
+      "aria-label": isDestinationPanel ? "Destination input search" : "Source input search",
+      getOwnerProps,
+      getOwnerPropsArguments
+    }
+  ) });
+};
+//# sourceMappingURL=PanelFilterSection.js.map

package/dist/cjs/parts/Panel/top/PanelFilterSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Panel/top/PanelFilterSection.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { DSInputText } from '@elliemae/ds-legacy-form-input-text';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n  border-bottom: 1px solid neutral-400;\n  border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n  border: none;\n  :focus {\n    border-radius: 0;\n  }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const onFilterCb = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n  );\n  const filterValue = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n  );\n  const handleFilterChange = React.useCallback(\n    (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n      onFilterCb?.(`${value}`, { event });\n    },\n    [onFilterCb],\n  );\n  return (\n    <StyledSearchWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <StyledInputText\n        value={filterValue}\n        onValueChange={handleFilterChange}\n        aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    </StyledSearchWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCjB;AAtCN,mBAAmC;AACnC,4BAAqB;AACrB,8BAAuB;AACvB,uCAA4B;AAC5B,sBAA8B;AAE9B,oCAAkD;AAElD,MAAM,0BAAsB,gCAAO,4BAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,sBAAkB,gCAAO,8CAAa,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,SAAS,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,4CAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "names": ["React"]
+}