@clement_lores/admin-design-system 1.0.0

package/types/src/atoms/tabs/tabs.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { Tabs } from './index.js';
+export declare const Default: StoryFn;
+declare const meta: Meta<typeof Tabs>;
+export default meta;

package/types/src/atoms/text/index.d.ts

@@ -0,0 +1 @@
+export * from './text.jsx';

package/types/src/atoms/text/text.d.ts

@@ -0,0 +1,62 @@
+import { TypographyProps, SpaceProps, LayoutProps } from 'styled-system';
+import { NewColorProps as ColorProps } from '../../utils/color-props.js';
+/**
+ * Prop Types of a Text component.
+ * Apart from variant it extends all {@link ColorProps}, {@link SpaceProps} and
+ * {@link TypographyProps}
+ *
+ * @memberof Text
+ * @alias TextProps
+ * @property {string} [...] Other props from {@link ColorProps}, {@link SpaceProps}
+ *                          and {@link TypographyProps}
+ */
+export type TextProps = TypographyProps & SpaceProps & ColorProps & LayoutProps & {
+    /** Optional variant of a <Text /> component */
+    variant?: 'xs' | 'sm' | 'lg';
+    /** Define this if you want to render element as something other than div */
+    as?: string;
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/text.png" />
+ *
+ * Use the Text component to control font size, weight, alignment, and color.
+ * By default it is rendered as a `div` but you can change this to other (like `span`)
+ * by using `as` prop,
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Text, TextProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see TextProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-text--default Storybook}
+ * @hideconstructor
+ * @example <caption>Lorem ipsum</caption>
+ * return (
+ * <Box>
+ *   <Text>
+ *    In publishing and graphic design,
+ *    Lorem ipsum is a <b>placeholder</b> text commonly used to demonstrate the
+ *    visual form of a document or a typeface without relying on meaningful
+ *    content.
+ *   </Text>
+ *   <Text mt="default" variant="sm">This text was from Wikipedia</Text>
+ * </Box>
+ * )
+ * @section design-system
+ */
+declare const Text: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    /** Optional variant of a <Text /> component */
+    variant?: "sm" | "lg" | "xs" | undefined;
+    /** Define this if you want to render element as something other than div */
+    as?: string | undefined;
+}, never>;
+export { Text };
+export default Text;

package/types/src/atoms/text-area/index.d.ts

@@ -0,0 +1 @@
+export * from './text-area.jsx';

package/types/src/atoms/text-area/text-area.d.ts

@@ -0,0 +1,46 @@
+import { TypographyProps } from 'styled-system';
+import { InputProps } from '../input/index.js';
+/**
+ * Prop Types of a TextArea component.
+ * It extends all {@link SpaceProps}, {@link TypographyProps} and {@link LayoutProps}
+ * @memberof TextArea
+ * @alias TextAreaProps
+ * @property {string} [...] All props default to _textarea_ html component like `onChange`,
+ *                          `value` etc.
+ * @property {string} [...] Props from {@link SpaceProps}, {@link TypographyProps}
+ *                          and {@link LayoutProps} + they extend {@link InputProps}
+ */
+export type TextAreaProps = TypographyProps & InputProps;
+/**
+ * @classdesc
+ *
+ * <img src="components/textarea.png" />
+ *
+ * Wrapped `textarea` html element.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { TextArea, TextAreaProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-textarea--default Storybook}
+ * @see TextAreaProps
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Label htmlFor="textarea1">Some example label</Label>
+ *      <TextArea id="textarea1" width={1/2} />
+ *   </Box>
+ * )
+ * @section design-system
+ */
+declare const TextArea: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    borderless?: boolean | undefined;
+    variant?: "default" | "sm" | "lg" | "xl" | "xxl" | undefined;
+}, never>;
+export { TextArea };
+export default TextArea;

package/types/src/atoms/text-area/text-area.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { TextArea } from './index.js';
+export declare const Default: StoryFn;
+declare const meta: Meta<typeof TextArea>;
+export default meta;

package/types/src/atoms/tooltip/index.d.ts

@@ -0,0 +1,5 @@
+export * from './tooltip.jsx';
+export * from './tooltip-content.jsx';
+export * from './tooltip-control.jsx';
+export * from './tooltip-props.js';
+export * from './tooltip-styled.jsx';

package/types/src/atoms/tooltip/tooltip-content.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" resolution-mode="require"/>
+/**
+ * @component
+ * @private
+ */
+export declare const TooltipContent: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;
+export default TooltipContent;

package/types/src/atoms/tooltip/tooltip-control.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PortalProps } from './tooltip-props.js';
+/**
+ * @component
+ * @private
+ * @memberof Tooltip
+ */
+export declare const TooltipControl: React.FC<PortalProps>;
+export default TooltipControl;

package/types/src/atoms/tooltip/tooltip-props.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode, RefObject } from 'react';
+import { DirectionProps } from '../../utils/direction-props.js';
+import { BoxProps } from '../box/index.js';
+/**
+ * Props passed to the {@link Tooltip} component.
+ *
+ * @memberof Tooltip
+ * @alias TooltipProps
+ */
+export type TooltipProps = {
+    /** Text shown on the tooltip */
+    title?: string;
+    /** Direction of tooltip */
+    direction: DirectionProps;
+    /** Tooltip size */
+    size?: 'default' | 'lg';
+};
+export type PortalProps = TooltipProps & {
+    childRef: RefObject<HTMLElement>;
+    ContentElement?: ReactNode;
+};
+export type StyledTooltipProps = BoxProps & Pick<TooltipProps, 'direction'> & {
+    isVisible: boolean;
+};
+export default TooltipProps;

package/types/src/atoms/tooltip/tooltip-styled.d.ts

@@ -0,0 +1,3 @@
+declare const StyledTooltip: any;
+export default StyledTooltip;
+export { StyledTooltip };

package/types/src/atoms/tooltip/tooltip.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+import Props from './tooltip-props.js';
+/**
+ * @load ./tooltip.doc.md
+ * @component
+ * @subcategory Atoms
+ * @hideconstructor
+ * @new In version 3.3
+ * @section design-system
+ */
+export declare const Tooltip: React.FC<PropsWithChildren<Props>>;
+export default Tooltip;

package/types/src/atoms/tooltip/tooltip.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './index.js';
+export declare const Default: StoryObj;
+declare const meta: Meta<typeof Tooltip>;
+export default meta;

package/types/src/atoms/typography/caption-shared.d.ts

@@ -0,0 +1,3 @@
+import { css } from "../../utils/styled";
+export declare const CaptionShared: ReturnType<typeof css>;
+export default CaptionShared;

package/types/src/atoms/typography/caption.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps, SpaceProps } from 'styled-system';
+export declare const Caption: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default Caption;

package/types/src/atoms/typography/card-title.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps, SpaceProps } from 'styled-system';
+export declare const CardTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default CardTitle;

package/types/src/atoms/typography/header.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" resolution-mode="require"/>
+import { TypographyProps, SpaceProps } from 'styled-system';
+/**
+ * Prop Types of an Header components.
+ * Apart from all props for a standard hx elements it extends
+ * {@link TypographyProps} and {@link SpaceProps}
+ *
+ * @memberof Header
+ * @alias HeaderProps
+ * @property {string} [...] Other props from {@link TypographyProps}, {@link SpaceProps}
+ */
+export type HeaderProps = TypographyProps & SpaceProps;
+export declare const H1: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const H2: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const H3: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export declare const H4: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const H5: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const H6: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+/**
+ * @load ./header.doc.md
+ * @component
+ * @subcategory Atoms
+ * @see HeaderProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-header--default Storybook}
+ * @hideconstructor
+ * @section design-system
+ */
+export declare const Header: any;
+export default Header;

package/types/src/atoms/typography/index.d.ts

@@ -0,0 +1,5 @@
+export * from './header.jsx';
+export * from './caption.js';
+export * from './card-title.js';
+export * from './small-text.js';
+export * from './title.js';

package/types/src/atoms/typography/small-text.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps, SpaceProps } from 'styled-system';
+export declare const SmallText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default SmallText;

package/types/src/atoms/typography/title.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps, SpaceProps } from 'styled-system';
+export declare const Title: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default Title;

package/types/src/atoms/typography/typography.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj, Meta, StoryFn } from '@storybook/react';
+import { Text } from '../index.js';
+export declare const Headers: StoryFn;
+export declare const TextExample: StoryObj;
+export declare const ContentExample: StoryFn;
+export declare const Example: StoryFn;
+export declare const CaptionExample: StoryFn;
+declare const meta: Meta<typeof Text>;
+export default meta;

package/types/src/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_DRAWER_WIDTH = "500px";

package/types/src/global.d.ts

@@ -0,0 +1 @@
+export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/types/src/hooks/use-window-size.d.ts

@@ -0,0 +1,6 @@
+export type WindowSize = {
+    width: number;
+    height: number;
+};
+declare const useWindowSize: () => WindowSize | null;
+export default useWindowSize;

package/types/src/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @module @adminjs/design-system
+ * @section design-system
+ *
+ * @load .index.doc.md
+ */
+import * as theme from './theme.js';
+export { theme };
+export * from './atoms/index.js';
+export * from './molecules/index.js';
+export * from './organisms/index.js';
+export * from './constants.js';
+export * from './global.js';
+export * from './theme.js';
+export * from './utils/index.js';
+export type { Theme, ThemeOverride } from './utils/default-theme.interface.js';

package/types/src/molecules/date-picker/date-picker.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import { ReactDatePickerProps } from 'react-datepicker';
+import { MaskedInputProps } from 'react-text-mask';
+import { PropertyType } from '../../utils/index.js';
+type CustomProps = Partial<Omit<ReactDatePickerProps, 'value' | 'disabled' | 'onChange'>>;
+type DateMaskOverride = ({
+    regex: string;
+    raw: undefined;
+} | {
+    raw: string;
+    regex: undefined;
+} | string)[];
+type InputMaskProps = Omit<MaskedInputProps, 'mask'> & {
+    mask?: DateMaskOverride;
+};
+/**
+ * Props for DatePicker
+ *
+ * @memberof DatePicker
+ * @alias DatePickerProps
+ * @property {any} {...}    Any custom props to pass down to the ReactDatePicker
+ * @see https://reactdatepicker.com/
+ */
+export type DatePickerProps = CustomProps & {
+    /**
+     * If datepicker should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * selected date
+     */
+    value?: string | Date;
+    /**
+     * on change callback taking ISO string as a date
+     */
+    onChange: (date: string | null) => void;
+    /**
+     * property type, could be either 'date' or 'datetime'
+     */
+    propertyType?: PropertyType;
+    /**
+     * input mask props for text input in case you want to use it, see: https://github.com/text-mask/text-mask
+     */
+    inputMask?: InputMaskProps;
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/date-picker.png" />
+ *
+ *
+ * Component responsible for showing dates. It is a wrapper to
+ * [react datepicker]{@link https://reactdatepicker.com/}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { DatePicker, DatePickerProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @see https://reactdatepicker.com/
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-datepicker--default Storybook}
+ * @see DatePickerProps
+ * @hideconstructor
+ *
+ * @example
+ * return (
+ * <Box width={1/2} height="300px">
+ *   <DatePicker onChange={(date) => console.log(date)}/>
+ * </Box>
+ * )
+ * @section design-system
+ */
+declare const DatePicker: React.FC<DatePickerProps>;
+export { DatePicker };
+export default DatePicker;

package/types/src/molecules/date-picker/date-picker.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DatePicker, DatePickerProps } from './index.js';
+export declare const Default: StoryObj<DatePickerProps>;
+declare const meta: Meta<typeof DatePicker>;
+export default meta;

package/types/src/molecules/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-picker.jsx';
+export * from './useDatePicker.js';

package/types/src/molecules/date-picker/useDatePicker.d.ts

@@ -0,0 +1,14 @@
+import { PropertyType } from '../../utils/index.js';
+export declare const useDatePicker: ({ value, propertyType, disabled, onChange }: {
+    onChange: (date: Date) => void;
+    value?: string | Date | undefined;
+    propertyType?: string | undefined;
+    disabled?: boolean | undefined;
+}) => {
+    dateString?: string | undefined;
+    date?: Date | undefined;
+    isCalendarVisible: boolean;
+    setCalendarVisible: (isVisible: boolean) => void;
+    onDateChange: (newDate: Date) => void;
+};
+export default useDatePicker;

package/types/src/molecules/drawer/drawer-content.d.ts

@@ -0,0 +1,7 @@
+import { SpaceProps } from 'styled-system';
+/**
+ * @component
+ * @private
+ */
+export declare const DrawerContent: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default DrawerContent;

package/types/src/molecules/drawer/drawer-footer.d.ts

@@ -0,0 +1,7 @@
+import { SpaceProps } from 'styled-system';
+/**
+ * @component
+ * @private
+ */
+export declare const DrawerFooter: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default DrawerFooter;

package/types/src/molecules/drawer/drawer.d.ts

@@ -0,0 +1,88 @@
+import { SpaceProps, LayoutProps, ColorProps } from 'styled-system';
+/**
+ * Props for Drawer component. Apart from those described below it also extends all
+ * {@link SpaceProps}.
+ *
+ * @alias DrawerProps
+ * @extends SpaceProps
+ * @extends LayoutProps
+ * @extends ColorProps
+ * @memberof Drawer
+ */
+export type DrawerProps = SpaceProps & LayoutProps & ColorProps & {
+    /** Indicates if drawer should be hidden */
+    isHidden?: boolean;
+    /**
+     * Drawer variant
+     */
+    variant?: 'filter';
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/drawer.png" />
+ *
+ * Drawer component renders a huge side area where {@link BaseActionComponent} renders
+ * all actions where {@link Action.showInDrawer} is set to true.
+ *
+ * You probably don't want to use it directly in your actions, but if you decide to set
+ * `showInDrawer` to true you will probably want to use `DrawerContent` or `DrawerFooter`
+ * components.
+ *
+ * All these components: Drawer, DrawerContent and Drawer Footer extends {@link SpaceProps}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Drawer, DrawerProps, DrawerContent, DrawerFooter } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see DrawerProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-drawer--default Storybook}
+ * @example
+ * return (
+ * <Box height="500px">
+ *   <Drawer>
+ *     <DrawerContent>
+ *       <Header.H3>
+ *         <Button size="icon" rounded mr="lg">
+ *           <Icon icon="ChevronRight" />
+ *         </Button>
+ *         Edit
+ *       </Header.H3>
+ *       <Box my="x3" p={0}>
+ *         <Button size="sm">
+ *           <Icon icon="Info" />
+ *           Info
+ *         </Button>
+ *         <Button size="sm" ml="lg">
+ *           <Icon icon="Trash" />
+ *           Delete
+ *         </Button>
+ *       </Box>
+ *
+ *     </DrawerContent>
+ *     <DrawerFooter>
+ *       <Button variant="contained">
+ *         Save
+ *       </Button>
+ *     </DrawerFooter>
+ *   </Drawer>
+ * </Box>
+ * )
+ *
+ * @section design-system
+ */
+declare const Drawer: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    /** Indicates if drawer should be hidden */
+    isHidden?: boolean | undefined;
+    /**
+     * Drawer variant
+     */
+    variant?: "filter" | undefined;
+}, never>;
+export { Drawer };
+export default Drawer;

package/types/src/molecules/drawer/drawer.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Drawer } from './index.js';
+export declare const Default: StoryObj;
+declare const meta: Meta<typeof Drawer>;
+export default meta;

package/types/src/molecules/drawer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './drawer.jsx';
+export * from './drawer-content.jsx';
+export * from './drawer-footer.jsx';

package/types/src/molecules/drop-down/drop-down-item-action.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" resolution-mode="require"/>
+export declare const DropDownItemAction: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;
+export default DropDownItemAction;

package/types/src/molecules/drop-down/drop-down-item.d.ts

@@ -0,0 +1,32 @@
+import type { PropsWithChildren } from 'react';
+import { BoxProps } from '../../atoms/box/index.js';
+import type { VariantType } from '../../theme.js';
+/**
+ * Props passed to DropDownItem
+ * Extends {@link BoxProps}
+ *
+ * @memberof DropDown
+ * @extends BoxProps
+ */
+export type DropDownItemProps = PropsWithChildren & BoxProps & {
+    colorVariant?: VariantType;
+    onClick?: (e: Event) => void;
+};
+/**
+ * @component
+ * @private
+ */
+export declare const DropDownItem: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+} & {
+    colorVariant?: VariantType | undefined;
+    onClick?: ((e: Event) => void) | undefined;
+}, never>;
+export default DropDownItem;

package/types/src/molecules/drop-down/drop-down-menu.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react';
+import { BoxProps } from '../../atoms/box/index.js';
+import { DropDownStickProp } from './drop-down.jsx';
+/**
+ * Props passed to DropDownMenu element.
+ * Extends {@link BoxProps}
+ *
+ * @memberof DropDown
+ */
+export type DropDownMenuProps = PropsWithChildren<BoxProps & {
+    isVisible?: boolean;
+    stick?: DropDownStickProp;
+}>;
+/**
+ * @component
+ * @private
+ */
+export declare const DropDownMenu: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+} & {
+    isVisible?: boolean | undefined;
+    stick?: DropDownStickProp | undefined;
+}, never>;
+export default DropDownMenu;