@simplybusiness/mobius 3.3.2 → 3.4.1

package/src/components/Chopin/TradeSelector/TradeSelector.tsx

@@ -1,24 +1,33 @@
-import { forwardRef, useMemo } from "react";
+import {
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  ChangeEvent,
+  useMemo,
+} from "react";
 import clsx from "clsx";
-import { useSlotId } from "@react-aria/utils";
 import { useLabel } from "@react-aria/label";
-import type {
-  TradeSelectorProps,
+import { useSlotId } from "@react-aria/utils";
+
+import {
+  InputRef,
+  TradeProps,
   TradeSelectorElementType,
+  TradeSelectorProps,
   TradeSelectorRef,
-} from ".";
+} from "./types";
 import { getConfig } from "./config";
-import { SelectedTrade } from "./SelectedTrade";
+import { TradeInput } from "./TradeInput";
 import { SearchResults } from "./SearchResults";
-import { useTradeSelector } from "./useTradeSelector";
-import { getItemsToDisplay } from "./getItemsToDisplay";
-import { ForwardedRefComponent } from "../../../types/components";
+import { useFetchTrades } from "./useFetchTrades";
+import { useTradeSelectorUrl } from "./useTradeSelectorUrl";
+import { Header } from "./Header";
 import { ErrorMessage } from "../../ErrorMessage";
+import { ForwardedRefComponent } from "../../../types/components";
 import { spaceDelimitedList } from "../../../utils/spaceDelimitedList";
-import { Label } from "../../Label";
-import { Text } from "../../Text";
 
-export const ERROR_MESSAGE_SERVICE_UNAVAIALBLE =
+export const ERROR_MESSAGE_SERVICE_UNAVAILABLE =
   "The service is currently unavailable. Please try again later";
 
 const TradeSelector: ForwardedRefComponent<
@@ -26,7 +35,6 @@ const TradeSelector: ForwardedRefComponent<
   TradeSelectorElementType
 > = forwardRef((props: TradeSelectorProps, ref: TradeSelectorRef) => {
   const {
-    elementType: Element = "div",
     minInput = 3,
     apiRequestDebounceInMs = 250,
     urls,
@@ -34,22 +42,15 @@ const TradeSelector: ForwardedRefComponent<
     className,
     onTradeSelected,
     hideLabel,
-    initialTrade,
+    initialTrade = "",
+    vertical,
+    searchScope,
   } = props;
-
+  const { site, baseUrl, defaultLabels } = getConfig();
   const fieldLabels = {
-    input: "What is your specific trade/profession?",
-    description: "",
-    exact: "Exact matches for your search",
-    placeholder: "e.g. Cleaner, builder, consultant",
-    suggested: "Suggested matches for your search",
-    noResults: "View all trades",
-    loading: "Loading...",
+    ...defaultLabels,
     ...labels,
   };
-
-  const { site, baseUrl } = getConfig();
-
   const links = useMemo(
     () => ({
       quoteRedirect: site,
@@ -60,88 +61,118 @@ const TradeSelector: ForwardedRefComponent<
     }),
     [site, baseUrl, urls],
   );
-
-  const {
-    inputValue,
-    trades,
-    onInputChange,
-    onSelectionChange,
-    error,
-    isLoading,
-    selectedTrade,
-    hasUserChangedMind,
-    onUserChangedMind,
-  } = useTradeSelector({
-    minInput,
-    apiRequestDebounceInMs,
-    urls: links,
-    onTradeSelected,
-    initialTrade,
-  });
-
   const classes = clsx("chopin", "chopin/TradeSelector", className);
+  const [userInput, setUserInput] = useState<string>("");
+  const [selectedTrade, setSelectedTrade] = useState<TradeProps | null>(null);
+  const [editMode, setEditMode] = useState<boolean>(false);
+  const [isOverlayVisible, setIsOverlayVisible] = useState<boolean>(false);
+  const inputRef = useRef<InputRef>(null);
+  const currentTrade = selectedTrade ? selectedTrade.value : initialTrade;
+  const endpoint = useTradeSelectorUrl(links.tradeApi, userInput, {
+    site: links.quoteRedirect,
+    vertical,
+    searchScope,
+  });
+  const { trades, isLoading, error, fetchTrades } = useFetchTrades(
+    endpoint,
+    apiRequestDebounceInMs,
+  );
   const errorMessage = error?.message;
   const errorMessageId = useSlotId([Boolean(errorMessage)]);
   const { labelProps, fieldProps } = useLabel({
     label: fieldLabels.input,
   });
+  const ariaLabel = hideLabel ? fieldLabels.input : undefined;
+  const inputProps = hideLabel ? undefined : fieldProps;
   const describedBy = spaceDelimitedList([
     errorMessageId,
     props["aria-describedby"],
   ]);
-  const isOpen = inputValue.length >= minInput && !errorMessage;
-  const shouldSelectedTradeDisplay = selectedTrade && !hasUserChangedMind;
-  const items = isOpen
-    ? getItemsToDisplay({
-        trades,
-        isLoading,
-        labels: fieldLabels,
-      })
-    : [];
-  const { input: inputLabel, description } = fieldLabels;
-  const ariaLabel = hideLabel ? inputLabel : undefined;
-  const inputProps = hideLabel ? undefined : fieldProps;
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) =>
+    setUserInput(event.target.value);
+
+  const toggleEditMode = () => setEditMode(!editMode);
+
+  const handleOverlayClose = () => {
+    setIsOverlayVisible(false);
+  };
+
+  const handleTradeSelect = (trade: TradeProps) => {
+    setSelectedTrade(trade);
+
+    if (editMode) {
+      toggleEditMode();
+    }
+
+    if (trade && onTradeSelected) {
+      try {
+        onTradeSelected(trade);
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error("onTradeSelected returned the following error", err);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (editMode && currentTrade) {
+      setUserInput(currentTrade);
+    }
+
+    if (!editMode) {
+      setUserInput("");
+    }
+  }, [editMode, currentTrade]);
+
+  useEffect(() => {
+    if (userInput.length >= minInput) {
+      setIsOverlayVisible(true);
+      fetchTrades(true);
+    }
+
+    if (userInput.length < minInput) {
+      setIsOverlayVisible(false);
+    }
+  }, [minInput, fetchTrades, userInput.length]);
 
   return (
-    <Element ref={ref} className={classes}>
-      {!hideLabel && (
-        <>
-          <Label
-            {...labelProps}
-            className="chopin/TradeSelectorLabel"
-            aria-hidden
-          >
-            {inputLabel}
-          </Label>
-          <Text className="chopin/TradeSelectorDescription" variant="caption">
-            {description}
-          </Text>
-        </>
-      )}
-      {shouldSelectedTradeDisplay ? (
-        <SelectedTrade trade={selectedTrade} onClick={onUserChangedMind} />
+    <div ref={ref} className={classes}>
+      <Header
+        isOpen={!hideLabel}
+        labelProps={labelProps}
+        labels={fieldLabels}
+      />
+      <TradeInput
+        inputRef={inputRef}
+        inputProps={inputProps}
+        value={userInput}
+        onChange={handleChange}
+        label={ariaLabel}
+        placeholder={fieldLabels.placeholder}
+        initialTrade={currentTrade}
+        onEdit={toggleEditMode}
+        isEditable={editMode}
+      />
+      {error ? (
+        <ErrorMessage
+          id={errorMessageId}
+          errorMessage={ERROR_MESSAGE_SERVICE_UNAVAILABLE}
+        />
       ) : (
-        <>
-          <SearchResults
-            inputValue={inputValue}
-            items={items}
-            labels={fieldLabels}
-            describedBy={describedBy}
-            fallbackUrl={links.allOccupations}
-            onInputChange={onInputChange}
-            onSelectionChange={onSelectionChange}
-            fieldProps={inputProps}
-            label={ariaLabel}
-          />
-          {error && (
-            <ErrorMessage
-              id={errorMessageId}
-              errorMessage={ERROR_MESSAGE_SERVICE_UNAVAIALBLE}
-            />
-          )}
-        </>
+        <SearchResults
+          isOpen={isOverlayVisible}
+          labels={fieldLabels}
+          onClick={handleTradeSelect}
+          onClose={handleOverlayClose}
+          results={trades}
+          isLoading={isLoading}
+          fallbackUrl={links.allOccupations}
+          describedBy={describedBy}
+          inputRef={inputRef}
+        />
       )}
-    </Element>
+    </div>
   );
 });
 

package/src/components/Chopin/TradeSelector/config/shared.ts

@@ -4,6 +4,15 @@
  */
 const shared = {
   appId: "simplybusiness_hoverla",
+  defaultLabels: {
+    input: "What is your specific trade/profession?",
+    description: "",
+    exact: "Exact matches for your search",
+    placeholder: "e.g. Cleaner, builder, consultant",
+    suggested: "Suggested matches for your search",
+    noResults: "View all trades",
+    loading: "Loading...",
+  },
 };
 
 export { shared };

package/src/components/Chopin/TradeSelector/jestHTMLDialogPolyfill.ts

@@ -0,0 +1,17 @@
+// Workaround for lack of `<dialog>` support in jsdom
+// Workaround from: https://github.com/jsdom/jsdom/issues/3294#issuecomment-1268330372
+// Fix: https://github.com/jsdom/jsdom/pull/3403
+// This can be removed once `<dialog>` support is introduced in Jest via jsdom
+export const jestHTMLDialogPolyfill = () => {
+  HTMLDialogElement.prototype.show = jest.fn(function mock(
+    this: HTMLDialogElement,
+  ) {
+    this.open = true;
+  });
+
+  HTMLDialogElement.prototype.close = jest.fn(function mock(
+    this: HTMLDialogElement,
+  ) {
+    this.open = false;
+  });
+};

package/src/components/Chopin/TradeSelector/mockApiResults.ts

@@ -1,5 +1,16 @@
 import { TradeProps } from ".";
 
+export const mockTrade = {
+  blocked: false,
+  label: "<strong>Landlord</strong>",
+  supported_verticals: null,
+  trade_detail: null,
+  trade_type: null,
+  type: "exact",
+  value: "Landlord",
+  vertical: "landlord",
+};
+
 export const exactResults = [
   {
     value: "Swim Shop",

package/src/components/Chopin/TradeSelector/types.ts

@@ -1,6 +1,26 @@
 import { Ref, RefAttributes } from "react";
 import { DOMProps } from "@react-types/shared";
 
+export type DialogRef = HTMLDialogElement;
+export type InputRef = HTMLInputElement;
+
+export type TradeSelectorSearchScope =
+  | "all_verticals"
+  | "current_and_supported_verticals"
+  | "current_vertical"
+  | "except_current_vertical"
+  | "usa_contractors"
+  | "commercial_landlord_business_types"
+  | "contractors_combined"
+  | "supported_for_current_vertical"
+  | "commercial_combined_manufacturer"
+  | "commercial_combined_wholesaler"
+  | "commercial_combined_all";
+
+// TODO: We could probably use a union type here instead of a string
+//       but we may not want to restrict the possible values.
+export type TradeSelectorVertical = string;
+
 export type TradeProps = {
   value: string;
   vertical: string;
@@ -15,12 +35,6 @@ export type TradeProps = {
   blocked: boolean;
 };
 
-export type GroupedTradeProps = {
-  name: string;
-  title: string;
-  children: TradeProps[];
-};
-
 export type LabelProps = {
   input: string;
   exact: string;
@@ -43,9 +57,12 @@ export type TradeSelectorCommonProps = {
   urls: UrlProps;
   onTradeSelected?: (trade: TradeProps | string) => void;
   initialTrade?: string;
+  vertical?: TradeSelectorVertical;
+  searchScope?: TradeSelectorSearchScope;
 };
 
 export type TradeSelectorElementType = HTMLDivElement;
+
 export interface TradeSelectorProps
   extends Partial<TradeSelectorCommonProps>,
     DOMProps,
@@ -53,6 +70,7 @@ export interface TradeSelectorProps
   /** Custom class name for setting specific CSS */
   className?: string;
   elementType?: string | React.ElementType;
+  onTradeSelected?: (trade: TradeProps | string) => void;
   labels?: LabelProps;
   hideLabel?: boolean;
 }

package/src/components/Chopin/TradeSelector/useFetchTrades/index.ts

@@ -0,0 +1 @@
+export * from "./useFetchTrades";

package/src/components/Chopin/TradeSelector/useFetchTrades/useFetchTrades.ts

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from "react";
+import debounce from "lodash.debounce";
+import { TradeProps } from "../types";
+
+export const useFetchTrades = (endpoint: URL, debounceInMs: number) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [trades, setTrades] = useState<TradeProps[] | null>(null);
+  const [fetchTrades, setFetchTrades] = useState<boolean>(false);
+
+  const getTrades = useCallback(
+    // eslint-disable-next-line consistent-return
+    async (signal: AbortSignal) => {
+      try {
+        const response = await fetch(endpoint, {
+          signal,
+        });
+        const json = await response.json();
+        setIsLoading(false);
+
+        if (!response.ok) {
+          throw new Error(json.message || json.statusText);
+        }
+
+        setError(null);
+        return setTrades(json.results);
+      } catch (err) {
+        if (err instanceof Error && err.name !== "AbortError") {
+          // eslint-disable-next-line no-console
+          console.error(err);
+          setError(err);
+        }
+      }
+    },
+    [endpoint],
+  );
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    if (fetchTrades) {
+      setIsLoading(true);
+
+      const fetchData = debounce(async () => {
+        const { signal } = controller;
+        await getTrades(signal);
+      }, debounceInMs);
+
+      fetchData();
+    }
+
+    return () => controller.abort();
+  }, [getTrades, debounceInMs, fetchTrades]);
+
+  useEffect(() => {
+    if (!isLoading) {
+      setFetchTrades(false);
+    }
+  }, [isLoading]);
+
+  return {
+    isLoading,
+    error,
+    trades,
+    fetchTrades: setFetchTrades,
+  };
+};

package/src/components/Chopin/TradeSelector/useTradeSelectorUrl/index.ts

@@ -0,0 +1 @@
+export * from "./useTradeSelectorUrl";

package/src/components/Chopin/TradeSelector/useTradeSelectorUrl/useTradeSelectorUrl.test.ts

@@ -0,0 +1,37 @@
+import { renderHook } from "@testing-library/react";
+import { useTradeSelectorUrl } from "./useTradeSelectorUrl";
+
+describe("useTradeSelectorUrl", () => {
+  it("should return a url", () => {
+    const { result } = renderHook(() =>
+      useTradeSelectorUrl("https://trade-api.example.com/search", "foo"),
+    );
+    expect(result.current).toBeInstanceOf(URL);
+  });
+
+  it("should return a url with the correct query params", () => {
+    const { result } = renderHook(() =>
+      useTradeSelectorUrl("https://trade-api.example.com/search", "foo", {
+        vertical: "bar",
+        searchScope: "baz",
+      }),
+    );
+    expect(result.current.searchParams.get("q")).toEqual("foo");
+    expect(result.current.searchParams.get("vertical")).toEqual("bar");
+    expect(result.current.searchParams.get("search_scope")).toEqual("baz");
+  });
+
+  it("should return a new url when the input changes", () => {
+    const { result, rerender } = renderHook(
+      ({ userInput }) =>
+        useTradeSelectorUrl("https://trade-api.example.com/search", userInput),
+      {
+        initialProps: { userInput: "foo" },
+      },
+    );
+    const firstUrl = result.current;
+    rerender({ userInput: "bar" });
+    const secondUrl = result.current;
+    expect(firstUrl).not.toEqual(secondUrl);
+  });
+});

package/src/components/Chopin/TradeSelector/useTradeSelectorUrl/useTradeSelectorUrl.ts

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+
+export type TradeSelectorUrlOptions = {
+  vertical?: string;
+  searchScope?: string;
+  site?: string;
+};
+
+function addQueryParam(url: URL, key: string, value?: string) {
+  if (value) url.searchParams.set(key, value);
+}
+
+export function useTradeSelectorUrl(
+  tradeApi: string,
+  userInput: string,
+  { vertical, searchScope, site }: TradeSelectorUrlOptions = {},
+) {
+  return useMemo(() => {
+    const url = new URL(tradeApi);
+    addQueryParam(url, "q", userInput);
+    addQueryParam(url, "vertical", vertical);
+    addQueryParam(url, "search_scope", searchScope);
+    addQueryParam(url, "site", site);
+    return url;
+  }, [tradeApi, userInput, vertical, searchScope, site]);
+}

package/src/components/Chopin/index.tsx

@@ -1,10 +1,10 @@
+export * from "./Actions";
+export * from "./Footer";
+export * from "./Header";
 export * from "./PercentageTotalsQuestion";
 export * from "./Question";
 export * from "./QuestionGroup";
-export * from "./Steps";
 export * from "./Section";
-export * from "./TradeSelector";
-export * from "./Footer";
-export * from "./Header";
-export * from "./Actions";
+export * from "./Steps";
 export * from "./Testimonial";
+export * from "./TradeSelector";

package/src/components/Link/Link.story.mdx

@@ -80,6 +80,20 @@ import { Link } from "@simplybusiness/mobius";
 </NextLink>
 ```
 
+### `NextJS` v13
+
+NextJS v13 updated the `next/link` component to no longer require passing a link as a child to the component. This means that the above example can be simplified to:
+
+<!-- prettier-ignore -->
+```js
+import NextLink from "next/link";
+import { Link } from "@simplybusiness/mobius";
+
+...
+
+<Link href={url} elementType={NextLink}>{value}</Link>
+```
+
 ## Examples
 
 ### Normal

package/src/hooks/useOnClickOutside/index.ts

@@ -0,0 +1 @@
+export * from "./useOnClickOutside";

package/src/hooks/useOnClickOutside/useOnClickOutside.ts

@@ -0,0 +1,23 @@
+import { useEffect, RefObject } from "react";
+
+export const useOnClickOutside = (
+  ref: RefObject<HTMLElement>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+) => {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+};

package/dist/cjs/components/Chopin/TradeSelector/ComboBox/ComboBox.d.ts

@@ -1,9 +0,0 @@
-import type { ComboBoxProps } from "@react-types/combobox";
-import { AriaLabelingProps, DOMProps } from "@react-types/shared";
-export interface AllComboBoxProps<T extends object> extends ComboBoxProps<T> {
-    className?: string;
-    fieldProps?: AriaLabelingProps & DOMProps;
-    label?: string;
-}
-declare const ComboBox: <T extends object>(props: AllComboBoxProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export { ComboBox };

package/dist/cjs/components/Chopin/TradeSelector/ComboBox/ComboBox.js

@@ -1,37 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBox = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const combobox_1 = require("@react-stately/combobox");
-const combobox_2 = require("@react-aria/combobox");
-const interactions_1 = require("@react-aria/interactions");
-const focus_1 = require("@react-aria/focus");
-const clsx_1 = __importDefault(require("clsx"));
-const ListBox_1 = require("../ListBox");
-const Popover_1 = require("../Popover");
-const ComboBox = (props) => {
-    const { className, fieldProps, label } = props;
-    const state = (0, combobox_1.useComboBoxState)(Object.assign({}, props));
-    const inputRef = (0, react_1.useRef)(null);
-    const listBoxRef = (0, react_1.useRef)(null);
-    const popoverRef = (0, react_1.useRef)(null);
-    const { inputProps, listBoxProps } = (0, combobox_2.useComboBox)(Object.assign(Object.assign(Object.assign({}, props), fieldProps), { inputRef,
-        listBoxRef,
-        popoverRef }), state);
-    const { close } = state;
-    const { isFocusVisible, focusProps } = (0, focus_1.useFocusRing)({
-        within: true,
-    });
-    const { hoverProps, isHovered } = (0, interactions_1.useHover)(Object.assign({}, props));
-    const classes = (0, clsx_1.default)("chopin", "chopin/ComboBoxInput", {
-        "--is-focused": isFocusVisible,
-        "--is-hovered": isHovered,
-    }, className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "chopin/ComboBoxInputContainer" }, focusProps, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, hoverProps, inputProps, fieldProps, { ref: inputRef, className: classes, "aria-label": label })), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, Object.assign({ popoverRef: popoverRef, isOpen: state.isOpen, onClose: close }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { listBoxRef: listBoxRef, state: state })) })))] })));
-};
-exports.ComboBox = ComboBox;
-//# sourceMappingURL=ComboBox.js.map

package/dist/cjs/components/Chopin/TradeSelector/ComboBox/ComboBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/ComboBox/ComboBox.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA+B;AAG/B,sDAA2D;AAC3D,mDAAmD;AACnD,2DAAoD;AACpD,6CAAiD;AACjD,gDAAwB;AACxB,wCAAqC;AACrC,wCAAqC;AAQrC,MAAM,QAAQ,GAAG,CAAmB,KAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/C,MAAM,KAAK,GAAG,IAAA,2BAAgB,oBAAM,KAAK,EAAG,CAAC;IAC7C,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAChC,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAEhC,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,IAAA,sBAAW,gDAEzC,KAAK,GACL,UAAU,KACb,QAAQ;QACR,UAAU;QACV,UAAU,KAEZ,KAAK,CACN,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAA,oBAAY,EAAC;QAClD,MAAM,EAAE,IAAI;KACb,CAAC,CAAC;IACH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAA,uBAAQ,oBACrC,KAAK,EACR,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,cAAI,EAClB,QAAQ,EACR,sBAAsB,EACtB;QACE,cAAc,EAAE,cAAc;QAC9B,cAAc,EAAE,SAAS;KAC1B,EACD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,+CAAK,SAAS,EAAC,+BAA+B,IAAK,UAAU,eAC3D,kDACM,UAAU,EACV,UAAU,EACV,UAAU,IACd,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,OAAO,gBACN,KAAK,IACjB,EACD,KAAK,CAAC,MAAM,IAAI,CACf,uBAAC,iBAAO,kBAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,gBACnE,uBAAC,iBAAO,oBAAK,YAAY,IAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,IAAI,IAC3D,CACX,KACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEO,4BAAQ"}