@griddo/ax 1.72.11 → 1.73.2

package/src/__tests__/components/ResizePanel/ResizePanel.test.tsx

@@ -0,0 +1,200 @@
+import React, { useRef } from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import ResizePanel, { IResizePanelProps } from "@ax/components/ResizePanel";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+jest.mock("react", () => {
+  const originReact = jest.requireActual("react");
+  const mUseRef = jest.fn();
+  return {
+    ...originReact,
+    useRef: mUseRef,
+  };
+});
+
+const useMockRef = useRef as jest.MockedFunction<typeof useRef>;
+
+describe("ResizePanel component rendering", () => {
+  it("should render the component with 2 panels", () => {
+    const defaultProps: IResizePanelProps = {
+      leftPanel: <div>Left Panel</div>,
+      rightPanel: <div>Right Panel</div>,
+    };
+
+    const rightPanelRef = { current: {} };
+    useMockRef.mockReturnValue(rightPanelRef);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ResizePanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const leftPanel = screen.getByTestId("left-panel-fixed");
+    expect(leftPanel).toBeTruthy();
+    const rightPanel = screen.getByTestId("right-panel");
+    expect(rightPanel).toBeTruthy();
+  });
+
+  it("should render the component with 2 panels if left if not fixed", () => {
+    const defaultProps: IResizePanelProps = {
+      leftPanel: <div>Left Panel</div>,
+      rightPanel: <div>Right Panel</div>,
+      fixed: false,
+    };
+
+    const rightPanelRef = { current: {} };
+    useMockRef.mockReturnValueOnce(rightPanelRef);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ResizePanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const leftPanel = screen.getByTestId("left-panel");
+    expect(leftPanel).toBeTruthy();
+    const rightPanel = screen.getByTestId("right-panel");
+    expect(rightPanel).toBeTruthy();
+  });
+});
+
+describe("ResizePanel mouse events", () => {
+  it("fixed panel changes position on scroll", () => {
+    const defaultProps: IResizePanelProps = {
+      leftPanel: <div>Left Panel</div>,
+      rightPanel: <div>Right Panel</div>,
+      fixed: true,
+    };
+
+    const scroll = 100;
+
+    const rightPanelRef = { current: {} };
+    Object.defineProperty(rightPanelRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "offsetWidth", "get").mockReturnValueOnce(350);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+    useMockRef.mockReturnValue(rightPanelRef);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ResizePanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fixedPanel = screen.getByTestId("fixed-panel");
+    expect(fixedPanel).toBeTruthy();
+
+    fireEvent.scroll(window, { target: { scrollX: scroll } });
+    const leftPosition = getComputedStyle(fixedPanel).left;
+
+    expect(leftPosition).toBe(`calc(24px - ${scroll}px)`);
+  });
+
+  it("right panel should change width if handle moves past its width", () => {
+    const defaultProps: IResizePanelProps = {
+      leftPanel: <div>Left Panel</div>,
+      rightPanel: <div>Right Panel</div>,
+      fixed: true,
+    };
+
+    const windowWidth = 1440;
+    const mousePositionX = 1000;
+
+    const rightPanelRef = { current: {} };
+
+    Object.defineProperty(document.body, "offsetWidth", { value: windowWidth });
+
+    Object.defineProperty(rightPanelRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "offsetWidth", "get").mockReturnValueOnce(345);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValue(rightPanelRef);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ResizePanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const rightPanel = screen.getByTestId("right-panel");
+    expect(rightPanel).toBeTruthy();
+
+    const handler = screen.getByTestId("handler");
+    expect(handler).toBeTruthy();
+
+    fireEvent.mouseDown(handler);
+    fireEvent.mouseMove(handler, { clientX: mousePositionX, clientY: 100 });
+    fireEvent.mouseUp(handler);
+
+    const width = getComputedStyle(rightPanel).width;
+    expect(width).toBe(`${windowWidth - mousePositionX}px`);
+  });
+
+  it("right panel shouldn't change width if handle not moves past its width", () => {
+    const defaultProps: IResizePanelProps = {
+      leftPanel: <div>Left Panel</div>,
+      rightPanel: <div>Right Panel</div>,
+      fixed: true,
+    };
+
+    const rightPanelRef = { current: {} };
+
+    Object.defineProperty(document.body, "offsetWidth", { value: 1440 });
+
+    Object.defineProperty(rightPanelRef, "current", {
+      set(_current) {
+        if (_current) {
+          jest.spyOn(_current, "offsetWidth", "get").mockReturnValueOnce(345);
+        }
+        this._current = _current;
+      },
+      get() {
+        return this._current;
+      },
+    });
+
+    useMockRef.mockReturnValue(rightPanelRef);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ResizePanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const rightPanel = screen.getByTestId("right-panel");
+    expect(rightPanel).toBeTruthy();
+
+    const handler = screen.getByTestId("handler");
+    expect(handler).toBeTruthy();
+
+    fireEvent.mouseDown(handler);
+    fireEvent.mouseMove(handler, { clientX: 1200, clientY: 100 });
+    fireEvent.mouseUp(handler);
+
+    const width = getComputedStyle(rightPanel).width;
+    expect(width).toBe("345px");
+  });
+});

package/src/__tests__/components/SearchField/SearchField.test.tsx

@@ -0,0 +1,375 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent, act } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+
+import SearchField, { ISearchFieldProps } from "@ax/components/SearchField";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("Search field component rendering", () => {
+  it("should render the component opened", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const searchField = screen.getByTestId("search-field-wrapper");
+    const iconSearchWrapper = screen.queryByTestId("icon-search-wrapper");
+    const fieldWrapper = screen.getByTestId("field-wrapper");
+
+    expect(searchField).toBeTruthy();
+    expect(iconSearchWrapper).toBeFalsy();
+    expect(fieldWrapper).toBeTruthy();
+  });
+
+  it("should render the component opened with placeholder", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      placeholder: "Search",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const searchField = screen.getByTestId("search-field-wrapper");
+    const iconSearchWrapper = screen.queryByTestId("icon-search-wrapper");
+    const fieldWrapper = screen.getByTestId("field-wrapper");
+    const placeholderText = screen.queryByPlaceholderText(/Search/i);
+
+    expect(searchField).toBeTruthy();
+    expect(iconSearchWrapper).toBeFalsy();
+    expect(fieldWrapper).toBeTruthy();
+    expect(placeholderText).toBeTruthy();
+  });
+
+  it("should render the component closed", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      closeOnInactive: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const searchField = screen.getByTestId("search-field-wrapper");
+    const iconSearchWrapper = screen.getByTestId("icon-search-wrapper");
+    const fieldWrapper = screen.queryByTestId("field-wrapper");
+
+    expect(searchField).toBeTruthy();
+    expect(iconSearchWrapper).toBeTruthy();
+    expect(fieldWrapper).toBeFalsy();
+  });
+
+  it("should render the component disabled", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      closeOnInactive: false,
+      disabled: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("search-input");
+    expect(input).toBeDisabled();
+  });
+});
+
+describe("Search field filters", () => {
+  it("should render the component with search filters", () => {
+    const onChangeMock = jest.fn();
+
+    const searchFilters = [
+      { value: "filterby", label: "Filter by" },
+      { value: "from", label: "Old URL" },
+      { value: "to", label: "New URL" },
+    ];
+
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      searchFilters,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const searchField = screen.getByTestId("search-field-wrapper");
+    const iconSearchWrapper = screen.queryByTestId("icon-search-wrapper");
+    const fieldWrapper = screen.getByTestId("field-wrapper");
+    const filterWrapper = screen.queryByTestId("filter-wrapper");
+
+    expect(searchField).toBeTruthy();
+    expect(iconSearchWrapper).toBeFalsy();
+    expect(fieldWrapper).toBeTruthy();
+    expect(filterWrapper).toBeTruthy();
+  });
+
+  it("should call onFilterChange when selecting option", async () => {
+    const onChangeMock = jest.fn();
+    const onFilterChangeMock = jest.fn();
+
+    const searchFilters = [
+      { value: "filterby", label: "Filter by" },
+      { value: "from", label: "Old URL" },
+      { value: "to", label: "New URL" },
+    ];
+
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      searchFilters,
+      onFilterChange: onFilterChangeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const filterWrapper = screen.queryByTestId("filter-wrapper");
+    expect(filterWrapper).toBeTruthy();
+
+    await act(async () => userEvent.click(screen.getByLabelText("filterSelect")));
+
+    const selectedItem = screen.getByText("Old URL");
+    await act(async () => userEvent.click(selectedItem));
+
+    expect(onFilterChangeMock).toBeCalledTimes(1);
+    expect(screen.getByText("Old URL")).toBeInTheDocument();
+  });
+});
+
+describe("search field events", () => {
+  it("should open on icon search click and show field and close icon", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      closeOnInactive: true,
+    };
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const searchField = screen.getByTestId("search-field-wrapper");
+    const iconSearchWrapper = screen.queryByTestId("icon-search-wrapper");
+    const fieldWrapper = screen.queryByTestId("field-wrapper");
+
+    expect(searchField).toBeTruthy();
+    expect(iconSearchWrapper).toBeTruthy();
+    expect(fieldWrapper).toBeFalsy();
+
+    fireEvent.click(screen.getByTestId("icon-search-wrapper"));
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconSearchWrapper2 = screen.queryByTestId("icon-search-wrapper");
+    const iconCloseWrapper = screen.queryByTestId("icon-close-wrapper");
+    const fieldWrapper2 = screen.queryByTestId("field-wrapper");
+    expect(fieldWrapper2).toBeTruthy();
+    expect(iconSearchWrapper2).toBeFalsy();
+    expect(iconCloseWrapper).toBeTruthy();
+  });
+
+  it("should close and clear on close icon click and hide field and search icon if closeOnActive", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      closeOnInactive: true,
+    };
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconSearchWrapper = screen.getByTestId("icon-search-wrapper");
+    expect(iconSearchWrapper).toBeTruthy();
+    fireEvent.click(iconSearchWrapper);
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconCloseWrapper = screen.getByTestId("icon-close-wrapper");
+    expect(iconCloseWrapper).toBeTruthy();
+    fireEvent.click(iconCloseWrapper);
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconSearchWrapper2 = screen.queryByTestId("icon-search-wrapper");
+    const iconCloseWrapper2 = screen.queryByTestId("icon-close-wrapper");
+    const fieldWrapper = screen.queryByTestId("field-wrapper");
+    expect(fieldWrapper).toBeFalsy();
+    expect(iconSearchWrapper2).toBeTruthy();
+    expect(iconCloseWrapper2).toBeFalsy();
+    expect(onChangeMock).toBeCalledTimes(1);
+  });
+
+  it("should clear and not close on close icon click if not closeOnActive and input is not empty", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      closeOnInactive: false,
+    };
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("search-input");
+    fireEvent.change(input, { target: { value: "prueba" } });
+    const iconCloseWrapper = screen.getByTestId("icon-close-wrapper");
+    expect(iconCloseWrapper).toBeTruthy();
+    fireEvent.click(iconCloseWrapper);
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconSearchWrapper = screen.queryByTestId("icon-search-wrapper-2");
+    const iconCloseWrapper2 = screen.queryByTestId("icon-close-wrapper");
+    const fieldWrapper = screen.queryByTestId("field-wrapper");
+    expect(fieldWrapper).toBeTruthy();
+    expect(iconSearchWrapper).toBeTruthy();
+    expect(iconCloseWrapper2).toBeFalsy();
+    expect(onChangeMock).toBeCalledTimes(1);
+  });
+
+  it("show press enter on input type", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      closeOnInactive: true,
+      searchOnEnter: true,
+    };
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconSearchWrapper = screen.getByTestId("icon-search-wrapper");
+    expect(iconSearchWrapper).toBeTruthy();
+    fireEvent.click(iconSearchWrapper);
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldWrapper = screen.getByTestId("field-wrapper");
+    const input = screen.getByTestId("search-input");
+    expect(fieldWrapper).toBeTruthy();
+    fireEvent.change(input, { target: { value: "prueba" } });
+    expect(screen.queryByText("Press ENTER")).toBeTruthy();
+  });
+
+  it("should call onchange on input type", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      closeOnInactive: true,
+      searchOnEnter: false,
+    };
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconSearchWrapper = screen.getByTestId("icon-search-wrapper");
+    expect(iconSearchWrapper).toBeTruthy();
+    fireEvent.click(iconSearchWrapper);
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldWrapper = screen.getByTestId("field-wrapper");
+    const input = screen.getByTestId("search-input");
+    expect(fieldWrapper).toBeTruthy();
+    fireEvent.keyDown(input, { key: "A", code: "KeyA" });
+    expect(onChangeMock).toBeCalledTimes(1);
+  });
+
+  it("should call onchange on key enter", () => {
+    const onChangeMock = jest.fn();
+    const defaultProps: ISearchFieldProps = {
+      onChange: onChangeMock,
+      closeOnInactive: true,
+      searchOnEnter: true,
+    };
+
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconSearchWrapper = screen.getByTestId("icon-search-wrapper");
+    expect(iconSearchWrapper).toBeTruthy();
+    fireEvent.click(iconSearchWrapper);
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SearchField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldWrapper = screen.getByTestId("field-wrapper");
+    const input = screen.getByTestId("search-input");
+    expect(fieldWrapper).toBeTruthy();
+    fireEvent.change(input, { target: { value: "prueba" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter", charCode: 13 });
+    expect(onChangeMock).toBeCalledTimes(1);
+  });
+});

package/src/api/analytics.tsx

@@ -6,22 +6,22 @@ import { IServiceConfig, sendRequest } from "./utils";
 const SERVICES: { [key: string]: IServiceConfig } = {
   GET_ANALYTICS: {
     ...template,
-    endpoint: ["/site/", "/analytics"],
+    endpoint: ["/site/", "/metrics"],
     method: "GET",
   },
   UPDATE_SCRIPT_CODE: {
     ...template,
-    endpoint: ["/site/", "/analytics/script"],
+    endpoint: ["/site/", "/metrics/code"],
     method: "PUT",
   },
   CREATE_DIMENSIONS: {
     ...template,
-    endpoint: ["/analytics/dimensions/site/", "/bulk"],
+    endpoint: ["/metrics/dimensions/site/", "/bulk"],
     method: "POST",
   },
   CREATE_DIMENSIONS_GROUPS: {
     ...template,
-    endpoint: ["/analytics/groups/site/", "/bulk"],
+    endpoint: ["/metrics/groups/site/", "/bulk"],
     method: "POST",
   },
 };

package/src/components/ActionMenu/style.tsx

@@ -45,6 +45,7 @@ export const ActionItem = styled.li<{ disabled?: boolean; color?: boolean }>`
   pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
   text-align: left;
   white-space: nowrap;
+  cursor: pointer;
 
   &:focus {
     background: ${(p) => (p.disabled ? "transparent" : p.theme.color.overlayFocusPrimary)};

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -55,7 +55,7 @@ const NavConnectedField = (props: any) => {
 
   if (isConditional) {
     const innerActions = { ...actions, updateValue, goTo };
-    innerFields = getInnerFields(field.fields, innerActions, selectedContent, isTemplateActivated, theme);
+    innerFields = getInnerFields(field.fields, innerActions, selectedContent, isTemplateActivated, theme, site);
   }
 
   return (

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -46,8 +46,9 @@ const Field = (props: IProps): JSX.Element => {
       selectedContent,
       isTemplateActivated,
       theme,
+      site,
       errors,
-      deleteError
+      deleteError,
     );
   }
 

package/src/components/ConfigPanel/Form/index.tsx

@@ -5,8 +5,11 @@ import { Tabs } from "@ax/components";
 
 import ConnectedField from "./ConnectedField";
 
+import * as S from "./style";
+
 export const Form = (props: IProps): JSX.Element => {
-  const { schema, selectedTab, setSelectedTab, actions, isPage, isGlobal, theme, setHistoryPush } = props;
+  const { schema, selectedTab, setSelectedTab, actions, isPage, isGlobal, theme, setHistoryPush, header, footer } =
+    props;
   const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
 
@@ -53,9 +56,25 @@ export const Form = (props: IProps): JSX.Element => {
 
   const tabs = getTabs();
 
+  const handleRestoreHeader = () =>
+    actions.restorePageNavigationAction && actions.restorePageNavigationAction("header");
+
+  const handleRestoreFooter = () =>
+    actions.restorePageNavigationAction && actions.restorePageNavigationAction("footer");
+
   return (
     <section>
       <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setTab} />
+      {selectedTab === "content" && !isGlobal && header === 0 && (
+        <S.FieldWrapper>
+          This page doesn&apos;t have a header. Click <S.Link onClick={handleRestoreHeader}>here</S.Link> to restore it.
+        </S.FieldWrapper>
+      )}
+      {selectedTab === "content" && !isGlobal && footer === 0 && (
+        <S.FieldWrapper>
+          This page doesn&apos;t have a footer. Click <S.Link onClick={handleRestoreFooter}>here</S.Link> to restore it.
+        </S.FieldWrapper>
+      )}
       {tabContent && tabContent.fields.map((field: ISchemaField) => generateFields(field))}
     </section>
   );
@@ -71,6 +90,8 @@ interface IProps {
   isGlobal?: boolean;
   theme: string;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
+  header?: number | null;
+  footer?: number | null;
 }
 
 export default Form;

package/src/components/ConfigPanel/Form/style.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const FieldWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color?.uiBackground03};
+  padding: ${(p) => p.theme.spacing?.s};
+  border-radius: ${(p) => p.theme.radii?.s};
+  ${(p) => p.theme.textStyle?.uiXS};
+  color: ${(p) => p.theme.color?.textMediumEmphasis};
+`;
+
+const Link = styled.span`
+  cursor: pointer;
+  font-weight: bold;
+  color: ${(p) => p.theme.color?.interactive01};
+`;
+
+export { FieldWrapper, Link };