@simplybusiness/mobius 3.3.2 → 3.4.1

package/dist/esm/components/Chopin/TradeSelector/getTradesGroupedByType/getTradesGroupedByType.test.js

@@ -1,40 +0,0 @@
-import { getTradesGroupedByType } from ".";
-import { exactResults, suggestedResults } from "../mockApiResults";
-describe("getTradesGroupedByType", () => {
-    describe("given a list of API results", () => {
-        it("should return a list of grouped results with labels", () => {
-            const labels = {
-                exact: "Exact matches for your search",
-                suggested: "Suggested matches for your search",
-            };
-            const mockedApiResults = [...exactResults, ...suggestedResults];
-            const input = getTradesGroupedByType(mockedApiResults, labels);
-            const expected = [
-                {
-                    name: "exact",
-                    title: "Exact matches for your search",
-                    children: [...exactResults],
-                },
-                {
-                    name: "suggested",
-                    title: "Suggested matches for your search",
-                    children: [...suggestedResults],
-                },
-            ];
-            expect(input).toEqual(expected);
-        });
-    });
-    describe("given no API results", () => {
-        it("should return an empty array ", () => {
-            const labels = {
-                exact: "Exact matches",
-                suggested: "Suggested matches",
-            };
-            const apiResults = [];
-            const input = getTradesGroupedByType(apiResults, labels);
-            const expected = [];
-            expect(input).toEqual(expected);
-        });
-    });
-});
-//# sourceMappingURL=getTradesGroupedByType.test.js.map

package/dist/esm/components/Chopin/TradeSelector/getTradesGroupedByType/getTradesGroupedByType.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getTradesGroupedByType.test.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/getTradesGroupedByType/getTradesGroupedByType.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,GAAG,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;QAC3C,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;YAC7D,MAAM,MAAM,GAAG;gBACb,KAAK,EAAE,+BAA+B;gBACtC,SAAS,EAAE,mCAAmC;aAC/C,CAAC;YAEF,MAAM,gBAAgB,GAAG,CAAC,GAAG,YAAY,EAAE,GAAG,gBAAgB,CAAC,CAAC;YAEhE,MAAM,KAAK,GAAG,sBAAsB,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;YAE/D,MAAM,QAAQ,GAAG;gBACf;oBACE,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,+BAA+B;oBACtC,QAAQ,EAAE,CAAC,GAAG,YAAY,CAAC;iBAC5B;gBACD;oBACE,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,mCAAmC;oBAC1C,QAAQ,EAAE,CAAC,GAAG,gBAAgB,CAAC;iBAChC;aACF,CAAC;YAEF,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;QACpC,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;YACvC,MAAM,MAAM,GAAG;gBACb,KAAK,EAAE,eAAe;gBACtB,SAAS,EAAE,mBAAmB;aAC/B,CAAC;YAEF,MAAM,UAAU,GAAG,EAAQ,CAAC;YAE5B,MAAM,KAAK,GAAG,sBAAsB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAEzD,MAAM,QAAQ,GAAG,EAAQ,CAAC;YAE1B,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/esm/components/Chopin/TradeSelector/getTradesGroupedByType/index.js

@@ -1,2 +0,0 @@
-export * from "./getTradesGroupedByType";
-//# sourceMappingURL=index.js.map

package/dist/esm/components/Chopin/TradeSelector/getTradesGroupedByType/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/getTradesGroupedByType/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/esm/components/Chopin/TradeSelector/useTradeSelector/index.js

@@ -1,2 +0,0 @@
-export * from "./useTradeSelector";
-//# sourceMappingURL=index.js.map

package/dist/esm/components/Chopin/TradeSelector/useTradeSelector/useTradeSelector.js

@@ -1,65 +0,0 @@
-import { useState, useEffect } from "react";
-import { useAsyncList } from "@react-stately/data";
-const formattedTrades = (trades = []) => ({
-    items: Array.isArray(trades) ? trades : [trades],
-});
-const useTradeSelector = ({ minInput, urls, onTradeSelected, initialTrade, }) => {
-    const [userInput, setUserInput] = useState("");
-    const [selectedTrade, setSelectedTrade] = useState(initialTrade);
-    const [hasUserChangedMind, setHasUserChangedMind] = useState(false);
-    const endpoint = `${urls.tradeApi}?q=${encodeURIComponent(userInput)}&site=${urls.quoteRedirect}`;
-    const list = useAsyncList({
-        async load({ signal }) {
-            if (userInput.length === 0)
-                return formattedTrades();
-            if (initialTrade && userInput.length === 0)
-                formattedTrades(initialTrade);
-            const response = await fetch(endpoint, {
-                signal,
-            });
-            const json = await response.json();
-            return formattedTrades(json.results);
-        },
-    });
-    const handleSelectionChange = (value) => {
-        const items = list.items;
-        const trade = items.find(entry => entry.value === value);
-        setSelectedTrade(trade === null || trade === void 0 ? void 0 : trade.value);
-        setUserInput(value.toString());
-        setHasUserChangedMind(false);
-        if (trade && onTradeSelected) {
-            try {
-                onTradeSelected(trade);
-            }
-            catch (err) {
-                // eslint-disable-next-line no-console
-                console.error("onTradeSelected returned the following error", err);
-            }
-        }
-    };
-    const handleUserChangedMind = () => {
-        if (initialTrade) {
-            setUserInput(initialTrade);
-        }
-        setHasUserChangedMind(true);
-    };
-    useEffect(() => {
-        if (userInput.length >= minInput)
-            list.reload();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [userInput, minInput]);
-    return {
-        inputValue: userInput,
-        isLoading: list.isLoading,
-        trades: list.items,
-        error: list.error,
-        onInputChange: setUserInput,
-        onSelectionChange: handleSelectionChange,
-        selectedTrade,
-        hasUserChangedMind,
-        onUserChangedMind: handleUserChangedMind,
-    };
-};
-useTradeSelector.displayName = "useTradeSelector";
-export { useTradeSelector };
-//# sourceMappingURL=useTradeSelector.js.map

package/dist/esm/components/Chopin/TradeSelector/useTradeSelector/useTradeSelector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTradeSelector.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/useTradeSelector/useTradeSelector.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/Chopin/TradeSelector/useTradeSelector/useTradeSelector.test.js

@@ -1,84 +0,0 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import { useTradeSelector } from "./useTradeSelector";
-const trade = {
-    value: "Builder",
-    vertical: "business",
-    supported_verticals: ["contractors_combined"],
-    label: "<strong>Builder</strong>",
-    type: "exact",
-    trade_detail: null,
-    trade_type: null,
-    blocked: false,
-};
-let fetchMock;
-global.fetch = jest.fn(() => Promise.resolve({
-    json: () => Promise.resolve({
-        items: [],
-    }),
-}));
-describe("useTradeSelector", () => {
-    beforeEach(() => {
-        fetchMock = jest.spyOn(global, "fetch");
-    });
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-    describe("with no initial trade provided", () => {
-        it("should not call the API on initial render", async () => {
-            const { result } = renderHook(() => useTradeSelector({
-                minInput: 3,
-                apiRequestDebounceInMs: 250,
-                urls: {
-                    quoteRedirect: "redirect-link",
-                    tradeApi: "trade-api-link",
-                    allOccupations: "https://quote.simplybusiness.co.uk/trades?vertical=business",
-                },
-            }));
-            await waitFor(() => {
-                expect(result.current.isLoading).toBeFalsy();
-                expect(fetchMock).not.toHaveBeenCalled();
-            });
-        });
-    });
-    describe("with initial trade provided", () => {
-        it("should not call the API on initial render", async () => {
-            const { result } = renderHook(() => useTradeSelector({
-                minInput: 3,
-                apiRequestDebounceInMs: 250,
-                urls: {
-                    quoteRedirect: "redirect-link",
-                    tradeApi: "trade-api-link",
-                    allOccupations: "https://quote.simplybusiness.co.uk/trades?vertical=business",
-                },
-                initialTrade: trade.value,
-            }));
-            await waitFor(() => {
-                expect(result.current.isLoading).toBeFalsy();
-                expect(fetchMock).not.toHaveBeenCalled();
-            });
-        });
-    });
-    describe("with user input set above minimum length", () => {
-        it("should call the API", async () => {
-            const quoteRedirect = "redirect-link";
-            const tradeApi = "trade-api-link";
-            const userInput = "Cleaner";
-            const link = `${tradeApi}?q=${userInput}&site=${quoteRedirect}`;
-            const AbortSignalMock = expect.anything();
-            const { result } = renderHook(() => useTradeSelector({
-                minInput: 3,
-                apiRequestDebounceInMs: 250,
-                urls: {
-                    quoteRedirect: "redirect-link",
-                    tradeApi: "trade-api-link",
-                    allOccupations: "https://quote.simplybusiness.co.uk/trades?vertical=business",
-                },
-            }));
-            await waitFor(() => {
-                result.current.onInputChange(userInput);
-                expect(fetchMock).toHaveBeenCalledWith(link, AbortSignalMock);
-            });
-        });
-    });
-});
-//# sourceMappingURL=useTradeSelector.test.js.map

package/dist/esm/components/Chopin/TradeSelector/useTradeSelector/useTradeSelector.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTradeSelector.test.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/useTradeSelector/useTradeSelector.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,UAAU;IACpB,mBAAmB,EAAE,CAAC,sBAAsB,CAAC;IAC7C,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,OAAO;IACb,YAAY,EAAE,IAAI;IAClB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,IAAI,SAAc,CAAC;AAEnB,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAC1B,OAAO,CAAC,OAAO,CAAC;IACd,IAAI,EAAE,GAAG,EAAE,CACT,OAAO,CAAC,OAAO,CAAC;QACd,KAAK,EAAE,EAAE;KACV,CAAC;CACL,CAAC,CACU,CAAC;AAEf,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,UAAU,CAAC,GAAG,EAAE;QACd,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;QAC9C,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;YACzD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CACjC,gBAAgB,CAAC;gBACf,QAAQ,EAAE,CAAC;gBACX,sBAAsB,EAAE,GAAG;gBAC3B,IAAI,EAAE;oBACJ,aAAa,EAAE,eAAe;oBAC9B,QAAQ,EAAE,gBAAgB;oBAC1B,cAAc,EACZ,6DAA6D;iBAChE;aACF,CAAC,CACH,CAAC;YAEF,MAAM,OAAO,CAAC,GAAG,EAAE;gBACjB,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,CAAC;gBAC7C,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;YAC3C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;QAC3C,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;YACzD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CACjC,gBAAgB,CAAC;gBACf,QAAQ,EAAE,CAAC;gBACX,sBAAsB,EAAE,GAAG;gBAC3B,IAAI,EAAE;oBACJ,aAAa,EAAE,eAAe;oBAC9B,QAAQ,EAAE,gBAAgB;oBAC1B,cAAc,EACZ,6DAA6D;iBAChE;gBACD,YAAY,EAAE,KAAK,CAAC,KAAK;aAC1B,CAAC,CACH,CAAC;YAEF,MAAM,OAAO,CAAC,GAAG,EAAE;gBACjB,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,CAAC;gBAC7C,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;YAC3C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,0CAA0C,EAAE,GAAG,EAAE;QACxD,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;YACnC,MAAM,aAAa,GAAG,eAAe,CAAC;YACtC,MAAM,QAAQ,GAAG,gBAAgB,CAAC;YAClC,MAAM,SAAS,GAAG,SAAS,CAAC;YAC5B,MAAM,IAAI,GAAG,GAAG,QAAQ,MAAM,SAAS,SAAS,aAAa,EAAE,CAAC;YAChE,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;YAE1C,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CACjC,gBAAgB,CAAC;gBACf,QAAQ,EAAE,CAAC;gBACX,sBAAsB,EAAE,GAAG;gBAC3B,IAAI,EAAE;oBACJ,aAAa,EAAE,eAAe;oBAC9B,QAAQ,EAAE,gBAAgB;oBAC1B,cAAc,EACZ,6DAA6D;iBAChE;aACF,CAAC,CACH,CAAC;YAEF,MAAM,OAAO,CAAC,GAAG,EAAE;gBACjB,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;gBACxC,MAAM,CAAC,SAAS,CAAC,CAAC,oBAAoB,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;YAChE,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -1,85 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Section, Item } from "@react-stately/collections";
-import { ComboBox } from ".";
-
-const CONTAINER_CLASS_NAME = "chopin/ComboBoxInputContainer";
-const INPUT_CLASS_NAME = "chopin/ComboBoxInput";
-
-const LISTBOX_CLASS_NAME = "chopin/ListBoxSection";
-const LISTBOX_HEADING_CLASS_NAME = "chopin/ListBoxSectionHeading";
-const LISTBOX_LIST_CLASS_NAME = "chopin/ListBoxSectionList";
-const LISTBOX_OPTION_CLASS_NAME = "chopin/TradeSelectorOption";
-
-describe("ComboBox", () => {
-  it("should render without errors", async () => {
-    const sampleContent = "Sample text";
-
-    render(
-      <ComboBox label="Test">
-        <Item>{sampleContent}</Item>
-      </ComboBox>,
-    );
-
-    await userEvent.tab();
-
-    await userEvent.keyboard("[Alt][ArrowDown]");
-
-    expect(screen.getByText(sampleContent)).toBeInTheDocument();
-  });
-
-  it("should render with class names", () => {
-    render(
-      <ComboBox label="Test">
-        <Item>Sample text</Item>
-      </ComboBox>,
-    );
-
-    const input = screen.getByRole("combobox");
-
-    expect(input.parentElement).toHaveClass(CONTAINER_CLASS_NAME);
-    expect(input).toHaveClass(INPUT_CLASS_NAME);
-  });
-
-  // NOTE: testing ListBox in isolation, requires complicated state mocking.
-  // ComboBox uses ListBox and provides it with a generated state object.
-  describe("nested ListBox", () => {
-    it("should render with class names", async () => {
-      const firstSection = "First section";
-      const firstItem = "First item";
-      const secondSection = "Second section";
-      const secondItem = "Second item";
-      const EXPECTED_NUMBER_OF_SECTIONS = 2;
-      const EXPECTED_NUMBER_OF_GROUPS = 2;
-      const EXPECTED_NUMBER_OF_ITEMS = 2;
-
-      render(
-        <ComboBox label="Test">
-          <Section title={firstSection}>
-            <Item>{firstItem}</Item>
-          </Section>
-          <Section title={secondSection}>
-            <Item>{secondItem}</Item>
-          </Section>
-        </ComboBox>,
-      );
-
-      await userEvent.tab();
-
-      await userEvent.keyboard("[Alt][ArrowDown]");
-
-      const sections = screen.queryAllByRole("presentation");
-      const groups = screen.queryAllByRole("group");
-      const items = screen.queryAllByRole("option");
-      const heading = sections[0].firstChild;
-
-      expect(sections.length).toBe(EXPECTED_NUMBER_OF_SECTIONS);
-      expect(groups.length).toBe(EXPECTED_NUMBER_OF_GROUPS);
-      expect(items.length).toBe(EXPECTED_NUMBER_OF_ITEMS);
-      expect(sections[0]).toHaveClass(LISTBOX_CLASS_NAME);
-      expect(groups[0]).toHaveClass(LISTBOX_LIST_CLASS_NAME);
-      expect(items[0]).toHaveClass(LISTBOX_OPTION_CLASS_NAME);
-      expect(heading).toHaveClass(LISTBOX_HEADING_CLASS_NAME);
-    });
-  });
-});

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

@@ -1,74 +0,0 @@
-import { useRef } from "react";
-import type { ComboBoxProps } from "@react-types/combobox";
-import { AriaLabelingProps, DOMProps } from "@react-types/shared";
-import { useComboBoxState } from "@react-stately/combobox";
-import { useComboBox } from "@react-aria/combobox";
-import { useHover } from "@react-aria/interactions";
-import { useFocusRing } from "@react-aria/focus";
-import clsx from "clsx";
-import { ListBox } from "../ListBox";
-import { Popover } from "../Popover";
-
-export interface AllComboBoxProps<T extends object> extends ComboBoxProps<T> {
-  className?: string;
-  fieldProps?: AriaLabelingProps & DOMProps;
-  label?: string;
-}
-
-const ComboBox = <T extends object>(props: AllComboBoxProps<T>) => {
-  const { className, fieldProps, label } = props;
-  const state = useComboBoxState({ ...props });
-  const inputRef = useRef(null);
-  const listBoxRef = useRef(null);
-  const popoverRef = useRef(null);
-
-  const { inputProps, listBoxProps } = useComboBox(
-    {
-      ...props,
-      ...fieldProps,
-      inputRef,
-      listBoxRef,
-      popoverRef,
-    },
-    state,
-  );
-
-  const { close } = state;
-
-  const { isFocusVisible, focusProps } = useFocusRing({
-    within: true,
-  });
-  const { hoverProps, isHovered } = useHover({
-    ...props,
-  });
-
-  const classes = clsx(
-    "chopin",
-    "chopin/ComboBoxInput",
-    {
-      "--is-focused": isFocusVisible,
-      "--is-hovered": isHovered,
-    },
-    className,
-  );
-
-  return (
-    <div className="chopin/ComboBoxInputContainer" {...focusProps}>
-      <input
-        {...hoverProps}
-        {...inputProps}
-        {...fieldProps}
-        ref={inputRef}
-        className={classes}
-        aria-label={label}
-      />
-      {state.isOpen && (
-        <Popover popoverRef={popoverRef} isOpen={state.isOpen} onClose={close}>
-          <ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
-        </Popover>
-      )}
-    </div>
-  );
-};
-
-export { ComboBox };

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

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

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

@@ -1,36 +0,0 @@
-import { useRef, RefObject } from "react";
-import type { AriaListBoxOptions } from "@react-aria/listbox";
-import type { LoadingState } from "@react-types/shared";
-import type { ListState } from "@react-stately/list";
-import { useListBox } from "@react-aria/listbox";
-import { ListBoxSection } from "./ListBoxSection";
-import { Option } from "./Option";
-
-export interface ListBoxProps extends AriaListBoxOptions<unknown> {
-  listBoxRef?: RefObject<HTMLUListElement>;
-  state: ListState<unknown>;
-  loadingState?: LoadingState;
-  onLoadMore?: () => void;
-}
-
-export type ListBoxElementType = HTMLUListElement;
-
-const ListBox = (props: ListBoxProps) => {
-  const ref = useRef<ListBoxElementType>(null);
-  const { listBoxRef = ref, state } = props;
-  const { listBoxProps } = useListBox(props, state, listBoxRef);
-
-  return (
-    <ul {...listBoxProps} ref={listBoxRef} className="chopin/ListBox">
-      {[...state.collection].map(item =>
-        item.type === "section" ? (
-          <ListBoxSection key={item.key} section={item} state={state} />
-        ) : (
-          <Option key={item.key} item={item} state={state} />
-        ),
-      )}
-    </ul>
-  );
-};
-
-export { ListBox };

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

@@ -1,34 +0,0 @@
-import { useListBoxSection } from "@react-aria/listbox";
-import type { ListState } from "@react-stately/list";
-import type { Node } from "@react-types/shared";
-
-import { Option } from "./Option";
-
-export interface SectionProps {
-  section: Node<unknown>;
-  state: ListState<unknown>;
-}
-
-const ListBoxSection = ({ section, state }: SectionProps) => {
-  const { itemProps, headingProps, groupProps } = useListBoxSection({
-    heading: section.rendered,
-    "aria-label": section["aria-label"],
-  });
-
-  return (
-    <li {...itemProps} className="chopin/ListBoxSection">
-      {section.rendered && (
-        <span {...headingProps} className="chopin/ListBoxSectionHeading">
-          {section.rendered}
-        </span>
-      )}
-      <ul {...groupProps} className="chopin/ListBoxSectionList">
-        {[...section.childNodes].map(node => (
-          <Option key={node.key} item={node} state={state} />
-        ))}
-      </ul>
-    </li>
-  );
-};
-
-export { ListBoxSection };

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

@@ -1,35 +0,0 @@
-import { useRef } from "react";
-import { Node } from "@react-types/shared";
-import { useOption } from "@react-aria/listbox";
-import clsx from "clsx";
-import type { ListState } from "@react-stately/list";
-
-export type OptionElementType = HTMLLIElement;
-
-export interface OptionProps {
-  item: Node<unknown>;
-  state: ListState<unknown>;
-}
-
-const Option = ({ item, state }: OptionProps) => {
-  const ref = useRef<OptionElementType>(null);
-  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
-    { key: item.key },
-    state,
-    ref,
-  );
-
-  const classes = clsx("chopin/TradeSelectorOption", {
-    "--is-selected": isSelected,
-    "--is-focused": isFocused,
-    "--is-disabled": isDisabled,
-  });
-
-  return (
-    <li {...optionProps} ref={ref} className={classes}>
-      {item.rendered}
-    </li>
-  );
-};
-
-export { Option };

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

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

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

@@ -1,28 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { Popover } from ".";
-
-const POPOVER_CLASS_NAME = "chopin/Popover";
-
-describe("Popover", () => {
-  it("should render without errors", () => {
-    render(
-      <Popover>
-        <li>Item</li>
-      </Popover>,
-    );
-
-    expect(screen.getByText("Item")).toBeInTheDocument();
-  });
-
-  it("should render with class names", () => {
-    render(
-      <Popover>
-        <li>Item</li>
-      </Popover>,
-    );
-
-    const innerContainer = screen.getByText("Item").parentElement;
-
-    expect(innerContainer).toHaveClass(POPOVER_CLASS_NAME);
-  });
-});

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

@@ -1,42 +0,0 @@
-import { useRef, RefObject, ReactNode } from "react";
-import { useOverlay, DismissButton } from "@react-aria/overlays";
-import { FocusScope } from "@react-aria/focus";
-
-export interface PopoverProps {
-  popoverRef?: RefObject<HTMLDivElement>;
-  children: ReactNode;
-  isOpen?: boolean;
-  onClose?: () => void;
-}
-
-export type PopoverElementType = HTMLDivElement;
-
-const Popover = (props: PopoverProps) => {
-  const ref = useRef<PopoverElementType>(null);
-  const { popoverRef = ref, isOpen, onClose, children } = props;
-
-  // Handle events that should cause the popup to close,
-  // e.g. blur, clicking outside, or pressing the escape key.
-  const { overlayProps } = useOverlay(
-    {
-      isOpen,
-      onClose,
-      shouldCloseOnBlur: true,
-      isDismissable: true,
-    },
-    popoverRef,
-  );
-
-  // Add a hidden <DismissButton> component at the end of the popover
-  // to allow screen reader users to dismiss the popup easily.
-  return (
-    <FocusScope restoreFocus>
-      <div {...overlayProps} ref={popoverRef} className="chopin/Popover">
-        {children}
-        <DismissButton onDismiss={onClose} />
-      </div>
-    </FocusScope>
-  );
-};
-
-export { Popover };

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

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

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

@@ -1,24 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { SelectedTrade } from ".";
-
-describe("SelectedTrade", () => {
-  it("renders without errors", () => {
-    const trade = "Plumber";
-    const clickHandler = jest.fn();
-
-    const { container } = render(
-      <SelectedTrade trade={trade} onClick={clickHandler} />,
-    );
-
-    const textElement = container.querySelector("p");
-    const button = screen.getByText("Change");
-
-    expect(textElement).toHaveTextContent(
-      `You have selected ‘${trade}’ as your trade/profession.`,
-    );
-
-    fireEvent.click(button);
-
-    expect(clickHandler).toHaveBeenCalled();
-  });
-});

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

@@ -1,20 +0,0 @@
-import { Text } from "../../../Text";
-
-export type SelectedTradeProps = {
-  trade: string | undefined;
-  onClick: () => void;
-};
-
-export const SelectedTrade = ({ trade, onClick }: SelectedTradeProps) => (
-  <Text>
-    You have selected ‘<strong>{trade}</strong>’ as your trade/profession.{" "}
-    <button
-      type="button"
-      className="mobius/Link chopin/TradeSelectorButton"
-      aria-label="Change your selected profession"
-      onClick={onClick}
-    >
-      Change
-    </button>
-  </Text>
-);

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

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