@pushwoosh/dumb-components 1.0.5 → 1.0.7

package/Table/components/DataTableList/DataTableList.js

@@ -0,0 +1,77 @@
+import React, { useContext } from 'react';
+import { FontSize, FontWeight, Spacing } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import Box from '../../assets/box.svg';
+import Error from '../../assets/error.svg';
+import NotFound from '../../assets/notfound.svg';
+import { DataTableContext } from '../../context';
+import { LockedText } from '../../styles';
+import { Loading } from '../Loading';
+export function DataTableList({
+  renderItem
+}) {
+  var _data$value, _data$value2;
+  const {
+    data,
+    params
+  } = useContext(DataTableContext);
+  if (data.loading || (_data$value = data.value) !== null && _data$value !== void 0 && (_data$value = _data$value.items) !== null && _data$value !== void 0 && _data$value.length) {
+    return data.value ? React.createElement(React.Fragment, null, data.value.items.map(renderItem)) : React.createElement(Loading, null);
+  }
+  if (!data.loading && data.error) {
+    return React.createElement(Horizontal, {
+      "$placeItems": "center",
+      "$padding": Spacing.S14
+    }, React.createElement(Horizontal, {
+      "$gap": 16
+    }, React.createElement("img", {
+      src: Error,
+      alt: "Request failed"
+    }), React.createElement(Vertical, {
+      "$alignContent": "center",
+      "$gap": 8
+    }, React.createElement(LockedText, {
+      "$fontWeight": FontWeight.MEDIUM,
+      "$maxWidth": "250px"
+    }, "Something went wrong"), React.createElement(LockedText, {
+      "$fontSize": FontSize.SMALL,
+      "$maxWidth": "250px"
+    }, "Give it another try or refresh the page to see if we can fix this glitch!"))));
+  }
+  const isFiltered = ((_data$value2 = data.value) === null || _data$value2 === void 0 ? void 0 : _data$value2.isFiltered) || params.search;
+  return isFiltered ? React.createElement(Horizontal, {
+    "$placeItems": "center",
+    "$padding": Spacing.S14
+  }, React.createElement(Horizontal, {
+    "$gap": 16
+  }, React.createElement("img", {
+    src: NotFound,
+    alt: "Not found"
+  }), React.createElement(Vertical, {
+    "$alignContent": "center",
+    "$gap": 8
+  }, React.createElement(LockedText, {
+    "$fontWeight": FontWeight.MEDIUM,
+    "$maxWidth": "250px"
+  }, "No match found"), React.createElement(LockedText, {
+    "$fontSize": FontSize.SMALL,
+    "$maxWidth": "250px"
+  }, "Please try using different search terms with a minimum of two characters.")))) : React.createElement(Horizontal, {
+    "$placeItems": "center",
+    "$padding": Spacing.S14
+  }, React.createElement(Horizontal, {
+    "$gap": 16
+  }, React.createElement("img", {
+    src: Box,
+    alt: "Empty box"
+  }), React.createElement(Vertical, {
+    "$alignContent": "center",
+    "$gap": 8
+  }, React.createElement(LockedText, {
+    "$fontWeight": FontWeight.MEDIUM,
+    "$maxWidth": "250px"
+  }, "This list is empty"), React.createElement(LockedText, {
+    "$fontSize": FontSize.SMALL,
+    "$maxWidth": "250px"
+  }, "Looks like there's nothing here yet. Time to create \u2014 let's bring this list to life!"))));
+}

package/Table/components/DataTableList/index.d.ts

@@ -0,0 +1 @@
+export { DataTableList } from './DataTableList';

package/Table/components/DataTableList/index.js

@@ -0,0 +1 @@
+export { DataTableList } from './DataTableList';

package/Table/components/DataTableList/types.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export type DataTableListProps<T> = {
+    renderItem: (item: T) => ReactNode;
+};

package/Table/components/DataTableList/types.js

@@ -0,0 +1 @@
+export {};

package/Table/components/DataTablePagination/DataTablePagination.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DataTablePaginationProps } from './types';
+export declare function DataTablePagination({ allLimits, children }: DataTablePaginationProps): ReactElement;

package/Table/components/DataTablePagination/DataTablePagination.js

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import { DataTableContext } from '../../context';
+import { TablePagination } from '../TablePagination';
+export function DataTablePagination({
+  allLimits,
+  children
+}) {
+  var _data$value;
+  const {
+    data,
+    params,
+    onChangeParams
+  } = useContext(DataTableContext);
+  return React.createElement(TablePagination, {
+    activePage: params.page,
+    totalPages: ((_data$value = data.value) === null || _data$value === void 0 ? void 0 : _data$value.totalPages) || 1,
+    limit: params.perPage,
+    allLimits: allLimits,
+    onChangePage: page => {
+      onChangeParams({
+        ...params,
+        page
+      });
+    },
+    onChangeLimit: perPage => {
+      onChangeParams({
+        ...params,
+        page: 1,
+        perPage
+      });
+    }
+  }, children);
+}

package/Table/components/DataTablePagination/index.d.ts

@@ -0,0 +1 @@
+export { DataTablePagination } from './DataTablePagination';

package/Table/components/DataTablePagination/index.js

@@ -0,0 +1 @@
+export { DataTablePagination } from './DataTablePagination';

package/Table/components/DataTablePagination/types.d.ts

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from 'react';
+export type DataTablePaginationProps = PropsWithChildren<{
+    allLimits: number[];
+}>;

package/Table/components/DataTablePagination/types.js

@@ -0,0 +1 @@
+export {};

package/Table/components/DataTableSearchInput/DataTableSearchInput.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DataTableSearchInputProps } from './types';
+export declare function DataTableSearchInput(props: DataTableSearchInputProps): ReactElement;

package/Table/components/DataTableSearchInput/DataTableSearchInput.js

@@ -0,0 +1,31 @@
+import React, { useRef, useState, useEffect, useContext } from 'react';
+import { DataTableContext } from '../../context';
+import { ClearableInput } from '../ClearableInput';
+export function DataTableSearchInput(props) {
+  const context = useContext(DataTableContext);
+  const [inputValue, setInputValue] = useState(context.params.search);
+  const timeoutRef = useRef();
+  useEffect(() => {
+    if (inputValue !== context.params.search) {
+      setInputValue(context.params.search);
+    }
+  }, [context.params.search]); // eslint-disable-line react-hooks/exhaustive-deps
+  return React.createElement(ClearableInput, {
+    ...props,
+    value: inputValue,
+    onChange: value => {
+      setInputValue(value);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        context.onChangeParams({
+          ...context.params,
+          search: value,
+          page: 1
+        });
+        timeoutRef.current = undefined;
+      }, 750);
+    }
+  });
+}

package/Table/components/DataTableSearchInput/index.d.ts

@@ -0,0 +1 @@
+export { DataTableSearchInput } from './DataTableSearchInput';

package/Table/components/DataTableSearchInput/index.js

@@ -0,0 +1 @@
+export { DataTableSearchInput } from './DataTableSearchInput';

package/Table/components/DataTableSearchInput/types.d.ts

@@ -0,0 +1,3 @@
+export interface DataTableSearchInputProps {
+    placeholder?: string;
+}

package/Table/components/DataTableSearchInput/types.js

@@ -0,0 +1 @@
+export {};

package/Table/components/DataTableSortableCell/DataTableSortableCell.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DataTableSortableCellProps } from './types';
+export declare function DataTableSortableCell(props: DataTableSortableCellProps): ReactElement;

package/Table/components/DataTableSortableCell/DataTableSortableCell.js

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { SortButton } from '../../../SortButton';
+import { DataTableContext } from '../../context';
+export function DataTableSortableCell(props) {
+  const {
+    name,
+    children
+  } = props;
+  const {
+    params,
+    onChangeParams
+  } = useContext(DataTableContext);
+  return React.createElement(SortButton, {
+    name: name,
+    order: params.order === name ? params.direction : null,
+    onClick: sortParams => {
+      onChangeParams({
+        ...params,
+        order: sortParams.name,
+        direction: sortParams.order || 'asc',
+        page: 1
+      });
+    }
+  }, children);
+}

package/Table/components/DataTableSortableCell/index.d.ts

@@ -0,0 +1 @@
+export { DataTableSortableCell } from './DataTableSortableCell';

package/Table/components/DataTableSortableCell/index.js

@@ -0,0 +1 @@
+export { DataTableSortableCell } from './DataTableSortableCell';

package/Table/components/DataTableSortableCell/types.d.ts

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from 'react';
+export type DataTableSortableCellProps = PropsWithChildren<{
+    name: string;
+}>;

package/Table/components/DataTableSortableCell/types.js

@@ -0,0 +1 @@
+export {};

package/Table/components/Loading/Loading.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Loading: () => React.JSX.Element;

package/Table/components/Loading/Loading.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Wrapper } from './styles';
+import { TextSkeleton } from '../../../Skeleton';
+const Row = ({
+  width
+}) => React.createElement(Horizontal, {
+  "$alignItems": "center",
+  "$padding": "0 24px"
+}, React.createElement(TextSkeleton, {
+  width: width
+}));
+export const Loading = () => React.createElement(Wrapper, null, Array.from({
+  length: 4
+}).map((_, index) =>
+// eslint-disable-next-line react/no-array-index-key
+React.createElement(Row, {
+  key: index,
+  width: `${index % 2 ? 35 : 50}%`
+})));

package/Table/components/Loading/index.d.ts

@@ -0,0 +1 @@
+export { Loading } from './Loading';

package/Table/components/Loading/index.js

@@ -0,0 +1 @@
+export { Loading } from './Loading';

package/Table/components/Loading/styles.d.ts

@@ -0,0 +1 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Table/components/Loading/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Color, FontSize } from '@pushwoosh/kit-constants';
+export const Wrapper = styled.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "sc-1xpxjq7-0"
+})(["position:relative;font-size:", ";line-height:12px;background-color:", ";& > div{height:52px;border-bottom:1px solid ", ";& > div{transition:width 200ms linear;}}&:after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background-image:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0.9));}"], FontSize.SMALL, Color.CLEAR, Color.DIVIDER);

package/Table/components/TableList/TableList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TableListProps } from './types';
+export declare function TableList<I>(props: TableListProps<I>): React.JSX.Element;

package/Table/components/TableList/TableList.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Table } from '../../styles';
+export function TableList(props) {
+  const {
+    columns,
+    items,
+    renderHead,
+    renderItem,
+    renderTableTop,
+    renderTableBottom
+  } = props;
+  return React.createElement(Table, {
+    columns: columns
+  }, renderTableTop === null || renderTableTop === void 0 ? void 0 : renderTableTop(), renderHead(), items.map(renderItem), renderTableBottom === null || renderTableBottom === void 0 ? void 0 : renderTableBottom());
+}

package/Table/components/TableList/index.d.ts

@@ -0,0 +1 @@
+export { TableList } from './TableList';

package/Table/components/TableList/index.js

@@ -0,0 +1 @@
+export { TableList } from './TableList';

package/Table/components/TableList/types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type TableListProps<I> = {
+    columns: string;
+    items: I[];
+    renderTableTop?: () => ReactNode;
+    renderHead: () => ReactNode;
+    renderItem: (item: I) => ReactNode;
+    renderTableBottom?: () => ReactNode;
+};

package/Table/components/TableList/types.js

@@ -0,0 +1 @@
+export {};

package/Table/components/TablePagination/TablePagination.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { TablePaginationProps } from './types';
+export declare function TablePagination(props: TablePaginationProps): ReactElement;

package/Table/components/TablePagination/TablePagination.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { NativeSelect } from '../../../native';
+import { Pagination } from '../../../Pagination';
+export function TablePagination(props) {
+  const {
+    activePage,
+    totalPages,
+    limit,
+    allLimits,
+    onChangePage,
+    onChangeLimit,
+    children
+  } = props;
+  return React.createElement(Horizontal, {
+    "$justifyContent": "space-between",
+    "$padding": 24
+  }, React.createElement(Horizontal, {
+    "$gap": 8,
+    "$alignItems": "center"
+  }, totalPages > 1 && React.createElement(Pagination, {
+    activePage: activePage,
+    totalPages: totalPages,
+    onChangePage: onChangePage
+  }), children), React.createElement(Horizontal, {
+    "$gap": 8,
+    "$alignItems": "center"
+  }, React.createElement("span", null, "Show on page:"), React.createElement(NativeSelect, {
+    name: "page",
+    value: limit,
+    onChange: event => {
+      onChangeLimit(Number(event.target.value));
+    }
+  }, allLimits.map(option => React.createElement("option", {
+    key: option,
+    value: option
+  }, option)))));
+}

package/Table/components/TablePagination/index.d.ts

@@ -0,0 +1 @@
+export { TablePagination } from './TablePagination';

package/Table/components/TablePagination/index.js

@@ -0,0 +1 @@
+export { TablePagination } from './TablePagination';

package/Table/components/TablePagination/types.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+export type TablePaginationProps = PropsWithChildren<{
+    activePage: number;
+    totalPages: number;
+    limit: number;
+    allLimits: number[];
+    onChangePage: (page: number) => void;
+    onChangeLimit: (limit: number) => void;
+}>;

package/Table/components/TablePagination/types.js

@@ -0,0 +1 @@
+export {};

package/Table/context.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableParams, DataTableContextType } from './types';
+export declare const DataTableContext: import("react").Context<DataTableContextType<any, DataTableParams>>;

package/Table/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const DataTableContext = createContext(null);

package/Table/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useDataTableContext } from './useDataTableContext';
+export { useDataTableParams } from './useDataTableParams';

package/Table/hooks/index.js

@@ -0,0 +1,2 @@
+export { useDataTableContext } from './useDataTableContext';
+export { useDataTableParams } from './useDataTableParams';

package/Table/hooks/useDataTableContext.d.ts

@@ -0,0 +1,11 @@
+import type { DataTableParams, DataTableContextType } from '../types';
+export type DataTableContextProps<I, P extends DataTableParams> = {
+    getItems: (params: P) => Promise<{
+        items: I[];
+        total: number;
+        totalPages: number;
+    }>;
+    params: P;
+    onChangeParams: (params: P) => void;
+};
+export declare function useDataTableContext<I, P extends DataTableParams = DataTableParams>({ getItems, params, onChangeParams, }: DataTableContextProps<I, P>): DataTableContextType<I, P>;

package/Table/hooks/useDataTableContext.js

@@ -0,0 +1,23 @@
+import { useLayoutEffect, useMemo } from 'react';
+import { useAsyncFn, usePersistentFunction } from '@pushwoosh/kit-helpers';
+export function useDataTableContext({
+  getItems,
+  params,
+  onChangeParams
+}) {
+  const getItemsPersistent = usePersistentFunction(getItems);
+  const [listAsync, reload] = useAsyncFn(() => getItemsPersistent(params), [params], {
+    loading: true
+  });
+  useLayoutEffect(() => {
+    reload({
+      reset: true
+    });
+  }, [reload]);
+  return useMemo(() => ({
+    data: listAsync,
+    reload,
+    params,
+    onChangeParams: onChangeParams
+  }), [reload, params, listAsync, onChangeParams]);
+}

package/Table/hooks/useDataTableParams.d.ts

@@ -0,0 +1,10 @@
+import type { DataTableParams } from '../types';
+type UseDataTableParamsParams<P extends DataTableParams> = {
+    defaultOrder: string;
+    defaultDirection?: 'asc' | 'desc';
+    defaultPerPage?: number;
+    extend?: (obj: Record<string, string>, params: DataTableParams) => P;
+};
+type UseDataTableParamsReturn<P> = readonly [P, (params: P) => void];
+export declare function useDataTableParams<P extends DataTableParams>({ defaultOrder, defaultDirection, defaultPerPage, extend, }: UseDataTableParamsParams<P>): UseDataTableParamsReturn<P>;
+export {};

package/Table/hooks/useDataTableParams.js

@@ -0,0 +1,39 @@
+import { useMemo, useRef } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { usePersistentFunction } from '@pushwoosh/kit-helpers';
+function pickBy(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(([, value]) => !!value));
+}
+export function useDataTableParams({
+  defaultOrder,
+  defaultDirection = 'asc',
+  defaultPerPage = 10,
+  extend
+}) {
+  const history = useHistory();
+  const {
+    search: locationSearch
+  } = useLocation();
+  const extendRef = useRef(extend);
+  extendRef.current = extend;
+  const dataTableParams = useMemo(() => {
+    const searchParams = new URLSearchParams(locationSearch);
+    const obj = Object.fromEntries(searchParams);
+    // eslint-disable-next-line no-nested-ternary
+    const realOrderDirection = !obj.direction ? defaultDirection : obj.direction === 'asc' ? 'asc' : 'desc';
+    const params = {
+      search: obj.search ?? '',
+      order: obj.order || defaultOrder,
+      direction: realOrderDirection,
+      page: +obj.page || 1,
+      perPage: +obj.perPage || defaultPerPage
+    };
+    return extendRef.current ? extendRef.current(obj, params) : params;
+  }, [locationSearch, defaultDirection, defaultOrder, defaultPerPage]);
+  const changeDataTableParams = usePersistentFunction(params => {
+    history.push({
+      search: new URLSearchParams(pickBy(params)).toString()
+    });
+  });
+  return [dataTableParams, changeDataTableParams];
+}

package/Table/index.d.ts

@@ -0,0 +1,13 @@
+export { ClearableInput } from './components/ClearableInput';
+export { DataTable } from './components/DataTable';
+export { DataTableList } from './components/DataTableList';
+export { DataTableGetContext } from './components/DataTableGetContext';
+export { DataTablePagination } from './components/DataTablePagination';
+export { DataTableSearchInput } from './components/DataTableSearchInput';
+export { DataTableSortableCell } from './components/DataTableSortableCell';
+export { Loading } from './components/Loading';
+export { TableList } from './components/TableList';
+export { TablePagination } from './components/TablePagination';
+export { useDataTableContext, useDataTableParams } from './hooks';
+export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, } from './styles';
+export type { DataTableParams, DataTableData, DataTableContextType } from './types';

package/Table/index.js

@@ -0,0 +1,12 @@
+export { ClearableInput } from './components/ClearableInput';
+export { DataTable } from './components/DataTable';
+export { DataTableList } from './components/DataTableList';
+export { DataTableGetContext } from './components/DataTableGetContext';
+export { DataTablePagination } from './components/DataTablePagination';
+export { DataTableSearchInput } from './components/DataTableSearchInput';
+export { DataTableSortableCell } from './components/DataTableSortableCell';
+export { Loading } from './components/Loading';
+export { TableList } from './components/TableList';
+export { TablePagination } from './components/TablePagination';
+export { useDataTableContext, useDataTableParams } from './hooks';
+export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './styles';

package/Table/styles.d.ts

@@ -0,0 +1,73 @@
+import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
+export declare const Table: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    columns: string;
+    width?: string | number;
+}, "$gridAutoFlow">;
+export declare const Td: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $padding: number;
+} & {
+    $color?: string;
+}, "$padding">;
+export declare const ElementHover: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Tr: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $padding: string;
+}, "$gridAutoFlow" | "$padding">;
+export declare const Th: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $padding: number;
+} & {
+    $color?: string;
+}, "$padding">;
+export declare const ItemDetailLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ItemName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {
+    $maxLines?: number;
+}, never>;
+export declare const LockedText: import("styled-components").StyledComponent<"div", any, {
+    $fontSize?: FontSize;
+    $fontWeight?: FontWeight;
+    $maxWidth?: string;
+}, never>;