@quen-ui/components 0.0.14

package/dist/Dropdown/DropdownPortal.cjs.js

@@ -0,0 +1,41 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("./helpers.cjs.js");
+const styles = require("./styles.cjs.js");
+const DropdownPortal = ({
+  direction,
+  anchorRect,
+  height,
+  transitionStatus,
+  ...props
+}) => {
+  const [dropdownRect, setDropdownRect] = React.useState(helpers.DEFAULT_RECT_ELEMENT);
+  const maxHeight = React.useMemo(
+    () => document.documentElement.scrollHeight - anchorRect.height - anchorRect.y - 8,
+    [anchorRect]
+  );
+  const dropdownRef = React.useRef(null);
+  const portalDirection = React.useMemo(
+    () => helpers.getDirection({ anchorRect, direction, dropdownRect, offset: 8 }),
+    [dropdownRect, direction]
+  );
+  React.useLayoutEffect(() => {
+    setDropdownRect(helpers.calculateRectElement(dropdownRef.current));
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    styles.DropdownListStyled,
+    {
+      transitionStatus,
+      direction: portalDirection,
+      anchorRect,
+      dropdownRect,
+      maxHeight,
+      ref: dropdownRef,
+      height,
+      minWidth: anchorRect.width,
+      ...props
+    }
+  );
+};
+module.exports = DropdownPortal;

package/dist/Dropdown/DropdownPortal.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TDropdownPortalProps } from './types';
+declare const DropdownPortal: <ITEM>({ direction, anchorRect, height, transitionStatus, ...props }: TDropdownPortalProps<ITEM>) => React.ReactElement;
+export default DropdownPortal;

package/dist/Dropdown/DropdownPortal.es.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo, useRef, useLayoutEffect } from "react";
+import { DEFAULT_RECT_ELEMENT, getDirection, calculateRectElement } from "./helpers.es.js";
+import { DropdownListStyled } from "./styles.es.js";
+const DropdownPortal = ({
+  direction,
+  anchorRect,
+  height,
+  transitionStatus,
+  ...props
+}) => {
+  const [dropdownRect, setDropdownRect] = useState(DEFAULT_RECT_ELEMENT);
+  const maxHeight = useMemo(
+    () => document.documentElement.scrollHeight - anchorRect.height - anchorRect.y - 8,
+    [anchorRect]
+  );
+  const dropdownRef = useRef(null);
+  const portalDirection = useMemo(
+    () => getDirection({ anchorRect, direction, dropdownRect, offset: 8 }),
+    [dropdownRect, direction]
+  );
+  useLayoutEffect(() => {
+    setDropdownRect(calculateRectElement(dropdownRef.current));
+  }, []);
+  return /* @__PURE__ */ jsx(
+    DropdownListStyled,
+    {
+      transitionStatus,
+      direction: portalDirection,
+      anchorRect,
+      dropdownRect,
+      maxHeight,
+      ref: dropdownRef,
+      height,
+      minWidth: anchorRect.width,
+      ...props
+    }
+  );
+};
+export {
+  DropdownPortal as default
+};

package/dist/Dropdown/helpers.cjs.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_RECT_ELEMENT = {
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => {
+  }
+};
+const defaultGetItemKey = (item) => item.key || item.label;
+const defaultGetItemLeadContent = (item) => item.leftContent;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemOnClick = (item) => item.onClick;
+const defaultGetItemGroupId = (item) => item == null ? void 0 : item.groupId;
+function withDefaultGetters(props) {
+  return {
+    ...props,
+    getItemKey: props.getItemKey || defaultGetItemKey,
+    getItemLabel: props.getItemLabel || defaultGetItemLabel,
+    getItemLeftContent: props.getItemLeftContent || defaultGetItemLeadContent,
+    getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+    getItemOnClick: props.getItemOnClick || defaultGetItemOnClick,
+    getItemGroupId: props.getItemGroupId || defaultGetItemGroupId
+  };
+}
+const getDirection = ({
+  anchorRect,
+  direction,
+  dropdownRect,
+  offset
+}) => {
+  const viewerSize = {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight
+  };
+  const isTop = anchorRect.y - dropdownRect.height - offset >= 0;
+  const isBottom = anchorRect.y + anchorRect.height + dropdownRect.height + offset <= viewerSize.height;
+  const isRight = anchorRect.right + anchorRect.width + dropdownRect.width + offset <= viewerSize.width;
+  const isLeft = anchorRect.x - dropdownRect.width - offset >= 0;
+  switch (direction) {
+    case "left":
+      if (isLeft) {
+        return "left";
+      }
+      return "right";
+    case "right":
+      if (isRight) {
+        return "right";
+      }
+      return "left";
+    case "top":
+      if (isTop) {
+        return "top";
+      }
+      return "bottom";
+    case "topRight":
+      if (isTop) {
+        return "topRight";
+      }
+      return "bottomRight";
+    case "topLeft":
+      if (isTop) {
+        return "topLeft";
+      }
+      return "bottomLeft";
+    case "bottom":
+      if (isBottom) {
+        return "bottom";
+      }
+      return "top";
+    case "bottomLeft":
+      if (isBottom) {
+        return "bottomLeft";
+      }
+      return "topLeft";
+    case "bottomRight":
+      if (isBottom) {
+        return "bottomRight";
+      }
+      return "topRight";
+    default:
+      return direction;
+  }
+};
+const calculateRectElement = (el) => {
+  if (el) {
+    const { width, height, top, left, bottom, right, x, y } = el.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left,
+      bottom,
+      right,
+      x,
+      y,
+      toJSON() {
+      }
+    };
+  }
+  return DEFAULT_RECT_ELEMENT;
+};
+exports.DEFAULT_RECT_ELEMENT = DEFAULT_RECT_ELEMENT;
+exports.calculateRectElement = calculateRectElement;
+exports.getDirection = getDirection;
+exports.withDefaultGetters = withDefaultGetters;

package/dist/Dropdown/helpers.d.ts

@@ -0,0 +1,35 @@
+import { IDropdownDefaultItem, TDropdownListProps, TDropdownGetItemKey, TDropdownGetItemLeftContent, TDropdownGetItemLabel, TDropdownGetItemDisabled, TDropdownGetItemOnClick, TDropdownGetItemGroupId, TDropdownDirection } from './types';
+export declare const DEFAULT_RECT_ELEMENT: DOMRect;
+export declare function withDefaultGetters<Item = IDropdownDefaultItem>(props: TDropdownListProps<Item>): {
+    getItemKey: TDropdownGetItemKey<Item>;
+    getItemLabel: TDropdownGetItemLabel<Item>;
+    getItemLeftContent: TDropdownGetItemLeftContent<Item>;
+    getItemDisabled: TDropdownGetItemDisabled<Item>;
+    getItemOnClick: TDropdownGetItemOnClick<Item>;
+    getItemGroupId: TDropdownGetItemGroupId<Item>;
+    disabled?: boolean | undefined;
+    size?: import('..').TQuenSize | undefined;
+    className?: string | undefined;
+    content?: React.ReactElement | undefined;
+    open?: boolean | undefined;
+    width?: string | undefined;
+    direction?: TDropdownDirection | undefined;
+    items?: Item[] | undefined;
+    onItemClick?: import('./types').TDropdownOnClick<Item> | undefined;
+    onClickOutside?: (() => void) | undefined;
+    sortGroup?: import('./types').TDropdownSortGroup | undefined;
+    onClickClose?: (() => void) | undefined;
+    notCloseOutside?: boolean | undefined;
+    anchorRef: import('react').RefObject<HTMLElement | null>;
+    top?: number;
+    left?: number;
+};
+interface IGetDirectionParams {
+    anchorRect: DOMRect;
+    dropdownRect: DOMRect;
+    direction: TDropdownDirection;
+    offset: number;
+}
+export declare const getDirection: ({ anchorRect, direction, dropdownRect, offset }: IGetDirectionParams) => TDropdownDirection;
+export declare const calculateRectElement: (el: Element | null) => DOMRect;
+export {};

package/dist/Dropdown/helpers.es.js

@@ -0,0 +1,112 @@
+const DEFAULT_RECT_ELEMENT = {
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => {
+  }
+};
+const defaultGetItemKey = (item) => item.key || item.label;
+const defaultGetItemLeadContent = (item) => item.leftContent;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemOnClick = (item) => item.onClick;
+const defaultGetItemGroupId = (item) => item == null ? void 0 : item.groupId;
+function withDefaultGetters(props) {
+  return {
+    ...props,
+    getItemKey: props.getItemKey || defaultGetItemKey,
+    getItemLabel: props.getItemLabel || defaultGetItemLabel,
+    getItemLeftContent: props.getItemLeftContent || defaultGetItemLeadContent,
+    getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+    getItemOnClick: props.getItemOnClick || defaultGetItemOnClick,
+    getItemGroupId: props.getItemGroupId || defaultGetItemGroupId
+  };
+}
+const getDirection = ({
+  anchorRect,
+  direction,
+  dropdownRect,
+  offset
+}) => {
+  const viewerSize = {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight
+  };
+  const isTop = anchorRect.y - dropdownRect.height - offset >= 0;
+  const isBottom = anchorRect.y + anchorRect.height + dropdownRect.height + offset <= viewerSize.height;
+  const isRight = anchorRect.right + anchorRect.width + dropdownRect.width + offset <= viewerSize.width;
+  const isLeft = anchorRect.x - dropdownRect.width - offset >= 0;
+  switch (direction) {
+    case "left":
+      if (isLeft) {
+        return "left";
+      }
+      return "right";
+    case "right":
+      if (isRight) {
+        return "right";
+      }
+      return "left";
+    case "top":
+      if (isTop) {
+        return "top";
+      }
+      return "bottom";
+    case "topRight":
+      if (isTop) {
+        return "topRight";
+      }
+      return "bottomRight";
+    case "topLeft":
+      if (isTop) {
+        return "topLeft";
+      }
+      return "bottomLeft";
+    case "bottom":
+      if (isBottom) {
+        return "bottom";
+      }
+      return "top";
+    case "bottomLeft":
+      if (isBottom) {
+        return "bottomLeft";
+      }
+      return "topLeft";
+    case "bottomRight":
+      if (isBottom) {
+        return "bottomRight";
+      }
+      return "topRight";
+    default:
+      return direction;
+  }
+};
+const calculateRectElement = (el) => {
+  if (el) {
+    const { width, height, top, left, bottom, right, x, y } = el.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left,
+      bottom,
+      right,
+      x,
+      y,
+      toJSON() {
+      }
+    };
+  }
+  return DEFAULT_RECT_ELEMENT;
+};
+export {
+  DEFAULT_RECT_ELEMENT,
+  calculateRectElement,
+  getDirection,
+  withDefaultGetters
+};

package/dist/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './Dropdown';
+export type { IDropdownProps, TDropdownListProps, TDropdownItemProps, IDropdownMappersItem, IDropdownDefaultItem, TDropdownGetItemDisabled, TDropdownGetItemOnClick, TDropdownGetItemGroupId, TDropdownDirection, TDropdownGetItemKey, TDropdownGetItemLeftContent, TDropdownGetItemLabel, TDropdownOnClick, TDropdownPortalProps, TDropdownSortGroup } from './types';

package/dist/Dropdown/styles.cjs.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const DropdownList = require("./DropdownList.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const MARGIN = 8;
+const getDirectionStyles = ({
+  direction,
+  anchorRect,
+  dropdownRect
+}) => {
+  switch (direction) {
+    case "top":
+      return styled.css`
+        left: ${anchorRect.left + anchorRect.width / 2 - dropdownRect.width / 2}px;
+        top: ${anchorRect.top - MARGIN - dropdownRect.height}px;
+      `;
+    case "bottom":
+      return styled.css`
+        top: ${anchorRect.bottom + MARGIN}px;
+        left: ${anchorRect.left + anchorRect.width / 2 - dropdownRect.width / 2}px;
+      `;
+    case "bottomRight":
+      return styled.css`
+        top: ${anchorRect.bottom + MARGIN}px;
+        left: ${anchorRect.right - dropdownRect.width}px;
+      `;
+    case "bottomLeft":
+      return styled.css`
+        top: ${anchorRect.bottom + MARGIN}px;
+        left: ${anchorRect.left}px;
+      `;
+    case "topLeft":
+      return styled.css`
+        top: ${anchorRect.top - MARGIN - dropdownRect.height}px;
+        left: ${anchorRect.left}px;
+      `;
+    case "topRight":
+      return styled.css`
+        top: ${anchorRect.top - MARGIN - dropdownRect.height}px;
+        left: ${anchorRect.right - dropdownRect.width}px;
+      `;
+    case "right":
+      return styled.css`
+        top: ${anchorRect.height / 2 - dropdownRect.height / 2 + anchorRect.top}px;
+        left: ${anchorRect.left + MARGIN + anchorRect.width}px;
+      `;
+    case "left":
+      return styled.css`
+        left: ${anchorRect.left - MARGIN - dropdownRect.width}px;
+        top: ${anchorRect.height / 2 - dropdownRect.height / 2 + anchorRect.top}px;
+      `;
+    default:
+      return styled.css``;
+  }
+};
+const getBorderRadius = (direction) => {
+  switch (direction) {
+    case "bottomLeft":
+      return "0 0.5rem 0.5rem 0.5rem";
+    case "bottomRight":
+      return "0.5rem 0 0.5rem 0.5rem";
+    case "topLeft":
+      return "0.5rem 0.5rem 0.5rem 0";
+    case "topRight":
+      return "0.5rem 0.5rem 0 0.5rem";
+    default:
+      return "0.5rem";
+  }
+};
+const DropdownWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+  height: max-content;
+`;
+const DropdownListWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["anchorRef", "width", "height", "direction"].includes(prop)
+})`
+  ${({ theme, direction }) => styled.css`
+    background: ${theme.colors.grayViolet[3]};
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-radius: ${getBorderRadius(direction)};
+    border: 1px solid ${theme.colors.grayViolet[9]};
+  `};
+  ${({ width }) => width && styled.css`
+      width: ${width};
+    `};
+
+  ${({ top, left }) => top && left && styled.css`
+      left: ${left}px;
+      top: ${top}px;
+      position: absolute;
+      z-index: 1000;
+    `};
+`;
+const DropdownListStyled = styled(DropdownList).withConfig({
+  shouldForwardProp: (prop) => ![
+    "direction",
+    "transitionStatus",
+    "anchorRect",
+    "dropdownRect",
+    "maxHeight",
+    "minWidth"
+  ].includes(prop)
+})`
+  position: absolute;
+  overflow-y: auto;
+  max-height: ${({ maxHeight }) => maxHeight}px;
+  height: ${({ height }) => height || "max-content"};
+  width: ${({ width }) => width || "max-content"};
+  min-width: ${({ minWidth }) => `${minWidth}px`};
+
+  ${({ transitionStatus }) => (transitionStatus === "preEnter" || transitionStatus === "exiting") && styled.css`
+      opacity: 0;
+      transform: scale(0.9);
+    `};
+
+  z-index: 1000;
+  ${getDirectionStyles};
+`;
+const DropdownItemsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+const DropdownItemStyled = styled(Text)`
+  justify-content: flex-start;
+  cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "pointer"};
+  padding: 0.25rem;
+  display: flex;
+  gap: 0.25rem;
+  
+  ${({ disabled }) => disabled ? styled.css`
+    background: ${({ theme }) => theme.colors.gray[3]};
+    color:  ${({ theme }) => theme.colors.grayViolet[1]};
+  ` : styled.css`
+    &:hover {
+      padding-left: calc(0.25rem - 2px);
+      background: ${({ theme }) => theme.colors.grayViolet[5]};
+      border-left: 2px solid
+      ${({ theme }) => theme.colors.violet[9]};
+    }
+  `}
+`;
+exports.DropdownItemStyled = DropdownItemStyled;
+exports.DropdownItemsWrapper = DropdownItemsWrapper;
+exports.DropdownListStyled = DropdownListStyled;
+exports.DropdownListWrapper = DropdownListWrapper;
+exports.DropdownWrapper = DropdownWrapper;

package/dist/Dropdown/styles.d.ts

@@ -0,0 +1,33 @@
+import { TransitionStatus } from 'react-transition-state';
+import { TDropdownDirection, IDropdownProps, TDropdownListProps } from './types';
+import { TQuenSize } from '../types/size';
+type IDropdownItemStyledProps = {
+    size: TQuenSize;
+    disabled?: boolean;
+};
+type TDropdownListStyledProps<ITEM> = TDropdownListProps<ITEM> & {
+    direction: TDropdownDirection;
+    anchorRect: DOMRect;
+    dropdownRect: DOMRect;
+    maxHeight: number;
+    height?: string;
+    transitionStatus: TransitionStatus;
+    minWidth: number;
+};
+type TDropdownStyledProps = Required<Pick<IDropdownProps, "direction">> & {
+    top?: number;
+    left?: number;
+    width?: string;
+};
+export declare const DropdownWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownListWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TDropdownStyledProps>> & string;
+export declare const DropdownListStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<IDropdownProps<unknown>, "children" | "height"> & {
+    top?: number;
+    left?: number;
+} & import('react').RefAttributes<HTMLDivElement>, TDropdownListStyledProps<any>>> & string & Omit<import('react').ForwardRefExoticComponent<Omit<IDropdownProps<unknown>, "children" | "height"> & {
+    top?: number;
+    left?: number;
+} & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const DropdownItemsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').ITextProps, IDropdownItemStyledProps>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/Dropdown/styles.es.js

@@ -0,0 +1,150 @@
+import styled, { css } from "styled-components";
+import DropdownList from "./DropdownList.es.js";
+import Text from "../typography/Text/Text.es.js";
+const MARGIN = 8;
+const getDirectionStyles = ({
+  direction,
+  anchorRect,
+  dropdownRect
+}) => {
+  switch (direction) {
+    case "top":
+      return css`
+        left: ${anchorRect.left + anchorRect.width / 2 - dropdownRect.width / 2}px;
+        top: ${anchorRect.top - MARGIN - dropdownRect.height}px;
+      `;
+    case "bottom":
+      return css`
+        top: ${anchorRect.bottom + MARGIN}px;
+        left: ${anchorRect.left + anchorRect.width / 2 - dropdownRect.width / 2}px;
+      `;
+    case "bottomRight":
+      return css`
+        top: ${anchorRect.bottom + MARGIN}px;
+        left: ${anchorRect.right - dropdownRect.width}px;
+      `;
+    case "bottomLeft":
+      return css`
+        top: ${anchorRect.bottom + MARGIN}px;
+        left: ${anchorRect.left}px;
+      `;
+    case "topLeft":
+      return css`
+        top: ${anchorRect.top - MARGIN - dropdownRect.height}px;
+        left: ${anchorRect.left}px;
+      `;
+    case "topRight":
+      return css`
+        top: ${anchorRect.top - MARGIN - dropdownRect.height}px;
+        left: ${anchorRect.right - dropdownRect.width}px;
+      `;
+    case "right":
+      return css`
+        top: ${anchorRect.height / 2 - dropdownRect.height / 2 + anchorRect.top}px;
+        left: ${anchorRect.left + MARGIN + anchorRect.width}px;
+      `;
+    case "left":
+      return css`
+        left: ${anchorRect.left - MARGIN - dropdownRect.width}px;
+        top: ${anchorRect.height / 2 - dropdownRect.height / 2 + anchorRect.top}px;
+      `;
+    default:
+      return css``;
+  }
+};
+const getBorderRadius = (direction) => {
+  switch (direction) {
+    case "bottomLeft":
+      return "0 0.5rem 0.5rem 0.5rem";
+    case "bottomRight":
+      return "0.5rem 0 0.5rem 0.5rem";
+    case "topLeft":
+      return "0.5rem 0.5rem 0.5rem 0";
+    case "topRight":
+      return "0.5rem 0.5rem 0 0.5rem";
+    default:
+      return "0.5rem";
+  }
+};
+const DropdownWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+  height: max-content;
+`;
+const DropdownListWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["anchorRef", "width", "height", "direction"].includes(prop)
+})`
+  ${({ theme, direction }) => css`
+    background: ${theme.colors.grayViolet[3]};
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-radius: ${getBorderRadius(direction)};
+    border: 1px solid ${theme.colors.grayViolet[9]};
+  `};
+  ${({ width }) => width && css`
+      width: ${width};
+    `};
+
+  ${({ top, left }) => top && left && css`
+      left: ${left}px;
+      top: ${top}px;
+      position: absolute;
+      z-index: 1000;
+    `};
+`;
+const DropdownListStyled = styled(DropdownList).withConfig({
+  shouldForwardProp: (prop) => ![
+    "direction",
+    "transitionStatus",
+    "anchorRect",
+    "dropdownRect",
+    "maxHeight",
+    "minWidth"
+  ].includes(prop)
+})`
+  position: absolute;
+  overflow-y: auto;
+  max-height: ${({ maxHeight }) => maxHeight}px;
+  height: ${({ height }) => height || "max-content"};
+  width: ${({ width }) => width || "max-content"};
+  min-width: ${({ minWidth }) => `${minWidth}px`};
+
+  ${({ transitionStatus }) => (transitionStatus === "preEnter" || transitionStatus === "exiting") && css`
+      opacity: 0;
+      transform: scale(0.9);
+    `};
+
+  z-index: 1000;
+  ${getDirectionStyles};
+`;
+const DropdownItemsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+const DropdownItemStyled = styled(Text)`
+  justify-content: flex-start;
+  cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "pointer"};
+  padding: 0.25rem;
+  display: flex;
+  gap: 0.25rem;
+  
+  ${({ disabled }) => disabled ? css`
+    background: ${({ theme }) => theme.colors.gray[3]};
+    color:  ${({ theme }) => theme.colors.grayViolet[1]};
+  ` : css`
+    &:hover {
+      padding-left: calc(0.25rem - 2px);
+      background: ${({ theme }) => theme.colors.grayViolet[5]};
+      border-left: 2px solid
+      ${({ theme }) => theme.colors.violet[9]};
+    }
+  `}
+`;
+export {
+  DropdownItemStyled,
+  DropdownItemsWrapper,
+  DropdownListStyled,
+  DropdownListWrapper,
+  DropdownWrapper
+};