@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/List/ListContext.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps, Dispatch, ReactNode, SetStateAction } from 'react';
+import type { Checkbox } from '../Checkbox';
+type RowState = Record<string, boolean>;
+type ListContextValue = {
+    /**
+     * @returns an unregister function
+     * */
+    registerExpandableRow: (rowId: string) => () => void;
+    expandedRowIds: RowState;
+    expandRow: (rowId: string) => void;
+    collapseRow: (rowId: string) => void;
+    expandButton: boolean;
+    /**
+     * @returns an unregister function
+     * */
+    registerSelectableRow: (rowId: string) => () => void;
+    selectedRowIds: RowState;
+    selectRow: (rowId: string) => void;
+    unselectRow: (rowId: string) => void;
+    selectable: boolean;
+    allRowSelectValue: ComponentProps<typeof Checkbox>['checked'];
+    selectAll: () => void;
+    unselectAll: () => void;
+};
+type ListProviderProps = {
+    children: ReactNode;
+    autoCollapse: boolean;
+    selectable: boolean;
+    expandButton: boolean;
+    onSelectedChange?: Dispatch<SetStateAction<string[]>>;
+};
+export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, }: ListProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const useListContext: () => ListContextValue;
+export {};

package/dist/components/List/ListContext.js

@@ -0,0 +1,155 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, useContext } from "react";
+const ListContext = createContext(void 0);
+const ListProvider = ({
+  children,
+  autoCollapse,
+  selectable,
+  expandButton,
+  onSelectedChange
+}) => {
+  const [expandedRowIds, setExpandedRowIds] = useState({});
+  const [selectedRowIds, setSelectedRowIds] = useState({});
+  const registerExpandableRow = useCallback((rowId) => {
+    setExpandedRowIds((current) => ({ ...current, [rowId]: false }));
+    return () => {
+      setExpandedRowIds((current) => {
+        const { [rowId]: relatedId, ...otherIds } = current;
+        return otherIds;
+      });
+    };
+  }, []);
+  const registerSelectableRow = useCallback((rowId) => {
+    setSelectedRowIds((current) => ({ ...current, [rowId]: false }));
+    return () => {
+      setSelectedRowIds((current) => {
+        const { [rowId]: relatedId, ...otherIds } = current;
+        return otherIds;
+      });
+    };
+  }, []);
+  const expandRow = useCallback(
+    (rowId) => {
+      setExpandedRowIds((current) => ({
+        ...autoCollapse ? {} : current,
+        [rowId]: true
+      }));
+    },
+    [autoCollapse]
+  );
+  const collapseRow = useCallback((rowId) => {
+    setExpandedRowIds((current) => ({
+      ...current,
+      [rowId]: false
+    }));
+  }, []);
+  const allRowSelectValue = useMemo(() => {
+    const selectableRowCount = Object.keys(selectedRowIds).length;
+    if (!selectableRowCount) {
+      return false;
+    }
+    const selectedRowCount = Object.values(selectedRowIds).reduce(
+      (acc, isSelected) => acc + (isSelected ? 1 : 0),
+      0
+    );
+    if (selectedRowCount === 0) {
+      return false;
+    }
+    if (selectableRowCount === selectedRowCount) {
+      return true;
+    }
+    return "indeterminate";
+  }, [selectedRowIds]);
+  const selectAll = useCallback(() => {
+    const newSelectedRowIds = Object.keys(selectedRowIds).reduce((acc, rowId) => ({ ...acc, [rowId]: true }), {});
+    setSelectedRowIds(newSelectedRowIds);
+    if (onSelectedChange) {
+      onSelectedChange(
+        Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row])
+      );
+    }
+  }, [onSelectedChange, selectedRowIds]);
+  const unselectAll = useCallback(() => {
+    const newSelectedRowIds = Object.keys(selectedRowIds).reduce((acc, rowId) => ({ ...acc, [rowId]: false }), {});
+    setSelectedRowIds(newSelectedRowIds);
+    if (onSelectedChange) {
+      onSelectedChange(
+        Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row])
+      );
+    }
+  }, [onSelectedChange, selectedRowIds]);
+  const selectRow = useCallback(
+    (rowId) => {
+      const newSelectedRowIds = {
+        ...selectedRowIds,
+        [rowId]: true
+      };
+      setSelectedRowIds(newSelectedRowIds);
+      if (onSelectedChange) {
+        onSelectedChange(
+          Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row])
+        );
+      }
+    },
+    [onSelectedChange, selectedRowIds]
+  );
+  const unselectRow = useCallback(
+    (rowId) => {
+      const newSelectedRowIds = {
+        ...selectedRowIds,
+        [rowId]: false
+      };
+      setSelectedRowIds(newSelectedRowIds);
+      if (onSelectedChange) {
+        onSelectedChange(
+          Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row])
+        );
+      }
+    },
+    [onSelectedChange, selectedRowIds]
+  );
+  const value = useMemo(
+    () => ({
+      registerExpandableRow,
+      expandedRowIds,
+      expandRow,
+      collapseRow,
+      registerSelectableRow,
+      selectedRowIds,
+      selectRow,
+      unselectRow,
+      selectable,
+      selectAll,
+      unselectAll,
+      allRowSelectValue,
+      expandButton
+    }),
+    [
+      registerExpandableRow,
+      expandedRowIds,
+      expandRow,
+      collapseRow,
+      registerSelectableRow,
+      selectedRowIds,
+      selectRow,
+      unselectRow,
+      selectable,
+      selectAll,
+      unselectAll,
+      allRowSelectValue,
+      expandButton
+    ]
+  );
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value, children });
+};
+const useListContext = () => {
+  const context = useContext(ListContext);
+  if (!context) {
+    throw new Error("useListContext should be used inside a List component");
+  }
+  return context;
+};
+export {
+  ListProvider,
+  useListContext
+};

package/dist/components/List/Row.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { SENTIMENTS } from '../../theme';
+export declare const StyledRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    sentiment: (typeof SENTIMENTS)[number];
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+type RowProps = {
+    children: ReactNode;
+    id: string;
+    expandable?: ReactNode;
+    /**
+     * Row cannot be selected if this prop is provided. boolean true disabled selection, a string disable selection and a tooltip will be displayed on checkbox hover.
+     * */
+    selectDisabled?: boolean | string;
+    disabled?: boolean;
+    sentiment?: (typeof SENTIMENTS)[number];
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/List/Row.js

@@ -0,0 +1,194 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef, useEffect } from "react";
+import { Button } from "../Button/index.js";
+import { Checkbox } from "../Checkbox/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { Cell } from "./Cell.js";
+import { useListContext } from "./ListContext.js";
+const ExpandableWrapper = styled.div`
+  grid-column: 1 / -1;
+  grid-column-start: 1;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  margin: 0 -${({ theme }) => theme.space["2"]};
+  padding: ${({ theme }) => theme.space["2"]};
+  cursor: auto;
+  background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  border-radius: 0 0 ${({ theme }) => theme.radii.default}
+    ${({ theme }) => theme.radii.default};
+`;
+const StyledRow = styled("div", {
+  shouldForwardProp: (prop) => !["sentiment"].includes(prop)
+})`
+  /* List itself also apply style about common templating between HeaderRow and other Rows */
+
+  position: relative;
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  border-radius: ${({ theme }) => theme.radii.default};
+  transition:
+    box-shadow 200ms ease,
+    border-color 200ms ease;
+  box-shadow: none;
+  background-color: ${({ theme }) => theme.colors.neutral.background};
+  font-size: ${({ theme }) => theme.typography.bodySmall.fontSize};
+  column-gap: ${({ theme }) => theme.space["2"]};
+  padding: 0 ${({ theme }) => theme.space["2"]};
+
+  &[role='button row'] {
+    cursor: pointer;
+  }
+
+  ${({ theme, sentiment }) => `
+    color: ${theme.colors[sentiment].text};
+    border-color: ${theme.colors[sentiment].border};
+    background-color: ${theme.colors[sentiment].background};
+    & [data-expandable-content] {
+      border-color: ${theme.colors[sentiment].border};
+    }
+
+    ${sentiment === "neutral" ? `&:hover {
+          border-color: ${theme.colors.primary.border};
+          box-shadow: ${theme.shadows.hoverPrimary};
+        }
+        ` : ""}
+  `}
+
+  &[data-highlight='true'] {
+    border-color: ${({ theme }) => theme.colors.primary.border};
+    box-shadow: ${({ theme }) => theme.shadows.hoverPrimary};
+  }
+
+  &[aria-disabled='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.neutral.borderDisabled};
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    color: ${({ theme }) => theme.colors.neutral.textDisabled};
+    cursor: not-allowed;
+  }
+`;
+const StyledCheckboxContainer = styled.div`
+  display: flex;
+`;
+const Row = forwardRef(
+  ({
+    children,
+    id,
+    expandable,
+    disabled,
+    selectDisabled,
+    sentiment = "neutral",
+    className,
+    "data-testid": dataTestid
+  }, ref) => {
+    const {
+      selectable,
+      registerExpandableRow,
+      expandedRowIds,
+      expandRow,
+      collapseRow,
+      registerSelectableRow,
+      selectedRowIds,
+      selectRow,
+      unselectRow,
+      expandButton
+    } = useListContext();
+    const isSelectDisabled = disabled || selectDisabled !== void 0 && selectDisabled !== false;
+    const hasExpandable = !!expandable;
+    useEffect(() => {
+      if (hasExpandable) {
+        const unregisterCallback = registerExpandableRow(id);
+        return unregisterCallback;
+      }
+      return void 0;
+    }, [id, hasExpandable, registerExpandableRow]);
+    useEffect(() => {
+      if (!isSelectDisabled) {
+        const unregisterCallback = registerSelectableRow(id);
+        return unregisterCallback;
+      }
+      return void 0;
+    }, [id, registerSelectableRow, isSelectDisabled]);
+    const toggleRowExpand = () => {
+      if (expandedRowIds[id]) {
+        collapseRow(id);
+      } else {
+        expandRow(id);
+      }
+    };
+    const canClickRowToExpand = !disabled && !!expandable && !expandButton;
+    return /* @__PURE__ */ jsxs(
+      StyledRow,
+      {
+        className,
+        ref,
+        role: canClickRowToExpand ? "button row" : "row",
+        onClick: canClickRowToExpand ? toggleRowExpand : void 0,
+        onKeyDown: canClickRowToExpand ? (event) => {
+          if (event.key === " ") {
+            toggleRowExpand();
+            event.preventDefault();
+          }
+        } : void 0,
+        tabIndex: canClickRowToExpand ? 0 : -1,
+        sentiment,
+        "aria-disabled": disabled,
+        "aria-expanded": expandable ? expandedRowIds[id] : void 0,
+        "data-highlight": !!selectedRowIds[id],
+        "data-testid": dataTestid,
+        children: [
+          selectable ? /* @__PURE__ */ jsx(Cell, { preventClick: canClickRowToExpand, children: /* @__PURE__ */ jsx(StyledCheckboxContainer, { children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              text: typeof selectDisabled === "string" ? selectDisabled : void 0,
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  name: "list-select-checkbox",
+                  "aria-label": "select",
+                  checked: selectedRowIds[id],
+                  value: id,
+                  onChange: () => {
+                    if (selectedRowIds[id]) {
+                      unselectRow(id);
+                    } else {
+                      selectRow(id);
+                    }
+                  },
+                  disabled: isSelectDisabled
+                }
+              )
+            }
+          ) }) }) : null,
+          expandButton ? /* @__PURE__ */ jsx(Cell, { preventClick: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: disabled || !expandable,
+              icon: expandedRowIds[id] ? "arrow-up" : "arrow-down",
+              onClick: toggleRowExpand,
+              size: "small",
+              sentiment: "neutral",
+              variant: "ghost"
+            }
+          ) }) : null,
+          children,
+          expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx(
+            ExpandableWrapper,
+            {
+              "data-expandable-content": true,
+              onClick: canClickRowToExpand ? (e) => {
+                e.stopPropagation();
+              } : void 0,
+              onKeyDown: canClickRowToExpand ? (e) => {
+                e.stopPropagation();
+              } : void 0,
+              children: expandable
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  Row,
+  StyledRow
+};

package/dist/components/List/SelectBar.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+type SelectBarProps<T> = {
+    className?: string;
+    children: (p: {
+        selectedItems: T[];
+        unselectAll: () => void;
+    }) => ReactNode;
+    data: T[];
+    /**
+     * The idKey of each data entry
+     * */
+    idKey: keyof T;
+};
+export declare function SelectBar<T>({ children, data, idKey, className, }: SelectBarProps<T>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/List/SelectBar.js

@@ -0,0 +1,35 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useMemo } from "react";
+import { ActionBar } from "../ActionBar/index.js";
+import { useListContext } from "./ListContext.js";
+const StyledActionBar = styled(ActionBar)`
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ theme }) => theme.space["1"]};
+`;
+const FlexDiv = styled.div`
+  flex: 1;
+`;
+function SelectBar({
+  children,
+  data,
+  idKey,
+  className
+}) {
+  const { selectedRowIds, unselectAll } = useListContext();
+  const selectedItems = useMemo(
+    () => data.filter((item) => selectedRowIds[item[idKey]]),
+    [data, idKey, selectedRowIds]
+  );
+  if (selectedItems.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StyledActionBar, { className, children: /* @__PURE__ */ jsx(FlexDiv, { children: children({
+    selectedItems,
+    unselectAll
+  }) }) });
+}
+export {
+  SelectBar
+};

package/dist/components/List/SkeletonRows.d.ts

@@ -0,0 +1,7 @@
+type ListLoadingSkeletonProps = {
+    selectable: boolean;
+    rows: number;
+    cols: number;
+};
+export declare const SkeletonRows: ({ selectable, rows, cols, }: ListLoadingSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List/SkeletonRows.js

@@ -0,0 +1,36 @@
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Skeleton } from "../Skeleton/index.js";
+import { Cell } from "./Cell.js";
+import { StyledRow } from "./Row.js";
+const StyledLoadingRow = styled(StyledRow)`
+  cursor: progress;
+`;
+const StyledSkeleton = styled(Skeleton)`
+  width: 80%;
+  max-width: 100%;
+`;
+const SkeletonRows = ({
+  selectable,
+  rows,
+  cols
+}) => {
+  const rowArray = Array.from({ length: rows }, (_, index) => index);
+  const colArray = Array.from({ length: cols }, (_, index) => index);
+  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs(
+    StyledLoadingRow,
+    {
+      sentiment: "neutral",
+      role: "row",
+      id: `skeleton-${index}`,
+      children: [
+        selectable ? /* @__PURE__ */ jsx("div", {}) : null,
+        colArray.map((columnIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(StyledSkeleton, { variant: "line" }) }, columnIndex))
+      ]
+    },
+    index
+  )) });
+};
+export {
+  SkeletonRows
+};

package/dist/components/List/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const SELECTABLE_CHECKBOX_SIZE = 24;
+export declare const EXPANDABLE_COLUMN_SIZE = 24;

package/dist/{src/components → components}/List/constants.js

@@ -1,4 +1,6 @@
 const SELECTABLE_CHECKBOX_SIZE = 24;
 const EXPANDABLE_COLUMN_SIZE = 24;
-
-export { EXPANDABLE_COLUMN_SIZE, SELECTABLE_CHECKBOX_SIZE };
+export {
+  EXPANDABLE_COLUMN_SIZE,
+  SELECTABLE_CHECKBOX_SIZE
+};

package/dist/components/List/index.d.ts

@@ -0,0 +1,68 @@
+import type { ComponentProps, Dispatch, ReactNode, SetStateAction } from 'react';
+import { HeaderCell } from './HeaderCell';
+import { SelectBar } from './SelectBar';
+type ColumnProps = Pick<ComponentProps<typeof HeaderCell>, 'isOrdered' | 'onOrder' | 'orderDirection'> & {
+    label?: string;
+    width?: string;
+    info?: string;
+};
+type ListProps = {
+    expandable?: boolean;
+    selectable?: boolean;
+    columns: ColumnProps[];
+    children: ReactNode;
+    /**
+     * Set it to true if you want to display a placeholder during loading
+     * */
+    loading?: boolean;
+    /**
+     * Auto collapse is collapsing expandable row when another is expanding
+     * */
+    autoCollapse?: boolean;
+    /**
+     * Action when selection changes (get the list of selected rows)
+     */
+    onSelectedChange?: Dispatch<SetStateAction<string[]>>;
+};
+/**
+ * List is a component that displays a list of items based on the columns you provide and the data you pass.
+ */
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Row: import("react").ForwardRefExoticComponent<{
+        children: ReactNode;
+        id: string;
+        expandable?: ReactNode;
+        selectDisabled?: string | boolean | undefined;
+        disabled?: boolean | undefined;
+        sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info" | undefined;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Cell: import("react").ForwardRefExoticComponent<{
+        children?: ReactNode;
+        className?: string | undefined;
+        preventClick?: boolean | undefined;
+        'data-testid'?: string | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    SelectBar: typeof SelectBar;
+    useListContext: () => {
+        registerExpandableRow: (rowId: string) => () => void;
+        expandedRowIds: {
+            [x: string]: boolean;
+        };
+        expandRow: (rowId: string) => void;
+        collapseRow: (rowId: string) => void;
+        expandButton: boolean;
+        registerSelectableRow: (rowId: string) => () => void;
+        selectedRowIds: {
+            [x: string]: boolean;
+        };
+        selectRow: (rowId: string) => void;
+        unselectRow: (rowId: string) => void;
+        selectable: boolean;
+        allRowSelectValue: boolean | "indeterminate" | undefined;
+        selectAll: () => void;
+        unselectAll: () => void;
+    };
+};
+export {};

package/dist/components/List/index.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef } from "react";
+import { Body } from "./Body.js";
+import { Cell } from "./Cell.js";
+import { HeaderCell } from "./HeaderCell.js";
+import { HeaderRow } from "./HeaderRow.js";
+import { ListProvider, useListContext } from "./ListContext.js";
+import { Row } from "./Row.js";
+import { SelectBar } from "./SelectBar.js";
+import { SkeletonRows } from "./SkeletonRows.js";
+import { SELECTABLE_CHECKBOX_SIZE, EXPANDABLE_COLUMN_SIZE } from "./constants.js";
+const StyledList = styled("div", {
+  shouldForwardProp: (prop) => !["template"].includes(prop)
+})`
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  gap: ${({ theme }) => theme.space["1"]};
+
+  [role='row'],
+  [role='button row'] {
+    display: grid;
+    width: 100%;
+    grid-template-columns: ${({ template }) => template};
+    align-items: center;
+  }
+`;
+const BaseList = forwardRef(
+  ({
+    expandable = false,
+    selectable = false,
+    columns,
+    children,
+    loading,
+    autoCollapse = false,
+    onSelectedChange
+  }, ref) => {
+    const computeTemplate = `${selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ""}${expandable ? `${EXPANDABLE_COLUMN_SIZE}px ` : ""}${columns.map(({ width }) => width ?? "minmax(0, 1fr)").join(" ")}`;
+    return /* @__PURE__ */ jsx(
+      ListProvider,
+      {
+        selectable,
+        expandButton: expandable,
+        autoCollapse,
+        onSelectedChange,
+        children: /* @__PURE__ */ jsxs(StyledList, { ref, role: "grid", template: computeTemplate, children: [
+          /* @__PURE__ */ jsx(HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsx(
+            HeaderCell,
+            {
+              isOrdered: column.isOrdered,
+              orderDirection: column.orderDirection,
+              onOrder: column.onOrder,
+              info: column.info,
+              children: column.label
+            },
+            `header-column-${index}`
+          )) }),
+          /* @__PURE__ */ jsx(Body, { children: loading ? /* @__PURE__ */ jsx(
+            SkeletonRows,
+            {
+              selectable,
+              rows: 5,
+              cols: columns.length
+            }
+          ) : children })
+        ] })
+      }
+    );
+  }
+);
+const List = Object.assign(BaseList, {
+  Row,
+  Cell,
+  SelectBar,
+  useListContext
+});
+export {
+  List
+};

package/dist/components/Loader/index.d.ts

@@ -0,0 +1,22 @@
+import type { Color } from '../../theme';
+type LoaderProps = {
+    active?: boolean;
+    color?: Color | string;
+    percentage?: number;
+    size?: number | string;
+    strokeWidth?: number;
+    /**
+     * Text is placed in center of ProgressCircle.
+     */
+    text?: string;
+    trailColor?: Color | string;
+    /**
+     * Label should be defined for accessibility, to indicate what is loading
+     */
+    label?: string;
+};
+/**
+ * Loader is a circular progress indicator that can be used to indicate that an action is being performed.
+ */
+export declare const Loader: ({ percentage, text, size, strokeWidth, color, trailColor, active, label, }: LoaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};