@quen-ui/components 0.0.14 → 1.0.1

package/dist/Dropdown/Dropdown.es.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, useLayoutEffect } from "react";
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { useTransitionState } from "react-transition-state";
+import { useOnClickOutside } from "@quen-ui/hooks";
 import { DropdownWrapper } from "./styles.es.js";
 import DropdownPortal from "./DropdownPortal.es.js";
 import { DEFAULT_RECT_ELEMENT, calculateRectElement } from "./helpers.es.js";
@@ -11,20 +12,37 @@ const Dropdown = ({
   direction = "bottom",
   width,
   anchorRef,
+  onClickClose,
   ...props
 }) => {
   const [anchorRect, setAnchorRect] = useState(DEFAULT_RECT_ELEMENT);
+  const dropdownRef = useRef(null);
   const [containerDropdown, setContainerDropdown] = useState(null);
   const [state, toggle] = useTransitionState({
     timeout: 500,
     unmountOnExit: true,
     initialEntered: open
   });
+  useOnClickOutside(
+    anchorRef,
+    () => {
+      if (typeof open === "undefined") {
+        toggle(false);
+        onClickClose?.();
+      }
+    },
+    {
+      excludeRef: dropdownRef
+    }
+  );
   const calculateAnchorRect = () => {
     if (anchorRef && anchorRef.current) {
       setAnchorRect(calculateRectElement(anchorRef.current));
     }
   };
+  const handleClickAnchorRef = () => {
+    toggle();
+  };
   useEffect(() => {
     window.addEventListener("resize", calculateAnchorRect);
     window.addEventListener("scroll", calculateAnchorRect, true);
@@ -34,7 +52,17 @@ const Dropdown = ({
     };
   }, [anchorRect]);
   useEffect(() => {
-    toggle(open);
+    if (typeof open === "undefined") {
+      anchorRef.current?.addEventListener("click", handleClickAnchorRef);
+    }
+    return () => {
+      anchorRef.current?.removeEventListener("click", handleClickAnchorRef);
+    };
+  }, [anchorRef]);
+  useEffect(() => {
+    if (typeof open !== "undefined") {
+      toggle(open);
+    }
   }, [open]);
   useLayoutEffect(() => {
     calculateAnchorRect();
@@ -55,7 +83,8 @@ const Dropdown = ({
         transitionStatus: state.status,
         anchorRef,
         anchorRect,
-        width: width || "max-content"
+        width: width || "max-content",
+        ref: dropdownRef
       }
     ),
     containerDropdown

package/dist/Dropdown/DropdownItem.cjs.js

@@ -11,19 +11,18 @@ const DropdownItem = ({
   size
 }) => {
   const handleClick = (event) => {
-    var _a;
     event.preventDefault();
-    (_a = getItemOnClick == null ? void 0 : getItemOnClick(item)) == null ? void 0 : _a(item, event);
-    onItemClick == null ? void 0 : onItemClick(item, event);
+    getItemOnClick?.(item)?.(item, event);
+    onItemClick?.(item, event);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.DropdownItemStyled,
     {
       size,
-      isDisabled: getItemDisabled == null ? void 0 : getItemDisabled(item),
+      disabled: getItemDisabled?.(item),
       onClick: handleClick,
       children: [
-        getItemLeftContent == null ? void 0 : getItemLeftContent(item),
+        getItemLeftContent?.(item),
         getItemLabel(item)
       ]
     }

package/dist/Dropdown/DropdownItem.es.js

@@ -10,19 +10,18 @@ const DropdownItem = ({
   size
 }) => {
   const handleClick = (event) => {
-    var _a;
     event.preventDefault();
-    (_a = getItemOnClick == null ? void 0 : getItemOnClick(item)) == null ? void 0 : _a(item, event);
-    onItemClick == null ? void 0 : onItemClick(item, event);
+    getItemOnClick?.(item)?.(item, event);
+    onItemClick?.(item, event);
   };
   return /* @__PURE__ */ jsxs(
     DropdownItemStyled,
     {
       size,
-      isDisabled: getItemDisabled == null ? void 0 : getItemDisabled(item),
+      disabled: getItemDisabled?.(item),
       onClick: handleClick,
       children: [
-        getItemLeftContent == null ? void 0 : getItemLeftContent(item),
+        getItemLeftContent?.(item),
         getItemLabel(item)
       ]
     }

package/dist/Dropdown/DropdownList.cjs.js

@@ -61,6 +61,7 @@ const DropdownList = (props, ref) => {
       direction,
       className,
       width,
+      isContent: Boolean(content),
       ...otherProps,
       children: content ? content : groups.map((groupItems, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownItemsWrapper, { children: groupItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -74,10 +75,10 @@ const DropdownList = (props, ref) => {
             getItemOnClick,
             onItemClick: otherProps.onItemClick
           },
-          getItemKey == null ? void 0 : getItemKey(item)
+          getItemKey?.(item)
         )) }),
         index !== groups.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal" })
-      ] }, getItemGroupId == null ? void 0 : getItemGroupId(groupItems[0])))
+      ] }, getItemGroupId?.(groupItems[0])))
     }
   );
 };

package/dist/Dropdown/DropdownList.es.js

@@ -5,7 +5,7 @@ import Divider from "../Divider/Divider.es.js";
 import { DropdownListWrapper, DropdownItemsWrapper } from "./styles.es.js";
 import { withDefaultGetters } from "./helpers.es.js";
 import DropdownItem from "./DropdownItem.es.js";
-const DropdownList = (props, ref) => {
+const DropdownList$1 = (props, ref) => {
   const {
     items = [],
     sortGroup,
@@ -60,6 +60,7 @@ const DropdownList = (props, ref) => {
       direction,
       className,
       width,
+      isContent: Boolean(content),
       ...otherProps,
       children: content ? content : groups.map((groupItems, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
         /* @__PURE__ */ jsx(DropdownItemsWrapper, { children: groupItems.map((item) => /* @__PURE__ */ jsx(
@@ -73,14 +74,14 @@ const DropdownList = (props, ref) => {
             getItemOnClick,
             onItemClick: otherProps.onItemClick
           },
-          getItemKey == null ? void 0 : getItemKey(item)
+          getItemKey?.(item)
         )) }),
         index !== groups.length - 1 && /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })
-      ] }, getItemGroupId == null ? void 0 : getItemGroupId(groupItems[0])))
+      ] }, getItemGroupId?.(groupItems[0])))
     }
   );
 };
-const DropdownList$1 = forwardRef(DropdownList);
+const DropdownList = forwardRef(DropdownList$1);
 export {
-  DropdownList$1 as default
+  DropdownList as default
 };

package/dist/Dropdown/DropdownPortal.cjs.js

@@ -9,19 +9,18 @@ const DropdownPortal = ({
   height,
   transitionStatus,
   ...props
-}) => {
+}, ref) => {
   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));
+    setDropdownRect(helpers.calculateRectElement(ref.current));
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     styles.DropdownListStyled,
@@ -31,11 +30,15 @@ const DropdownPortal = ({
       anchorRect,
       dropdownRect,
       maxHeight,
-      ref: dropdownRef,
+      ref,
       height,
       minWidth: anchorRect.width,
+      isContent: Boolean(props.content),
       ...props
     }
   );
 };
-module.exports = DropdownPortal;
+const DropdownPortal$1 = React.forwardRef(
+  DropdownPortal
+);
+module.exports = DropdownPortal$1;

package/dist/Dropdown/DropdownPortal.d.ts

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

package/dist/Dropdown/DropdownPortal.es.js

@@ -1,26 +1,25 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useMemo, useRef, useLayoutEffect } from "react";
+import { forwardRef, useState, useMemo, useLayoutEffect } from "react";
 import { DEFAULT_RECT_ELEMENT, getDirection, calculateRectElement } from "./helpers.es.js";
 import { DropdownListStyled } from "./styles.es.js";
-const DropdownPortal = ({
+const DropdownPortal$1 = ({
   direction,
   anchorRect,
   height,
   transitionStatus,
   ...props
-}) => {
+}, ref) => {
   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));
+    setDropdownRect(calculateRectElement(ref.current));
   }, []);
   return /* @__PURE__ */ jsx(
     DropdownListStyled,
@@ -30,13 +29,17 @@ const DropdownPortal = ({
       anchorRect,
       dropdownRect,
       maxHeight,
-      ref: dropdownRef,
+      ref,
       height,
       minWidth: anchorRect.width,
+      isContent: Boolean(props.content),
       ...props
     }
   );
 };
+const DropdownPortal = forwardRef(
+  DropdownPortal$1
+);
 export {
   DropdownPortal as default
 };

package/dist/Dropdown/helpers.cjs.js

@@ -17,7 +17,7 @@ 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;
+const defaultGetItemGroupId = (item) => item?.groupId;
 function withDefaultGetters(props) {
   return {
     ...props,

package/dist/Dropdown/helpers.es.js

@@ -15,7 +15,7 @@ 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;
+const defaultGetItemGroupId = (item) => item?.groupId;
 function withDefaultGetters(props) {
   return {
     ...props,

package/dist/Dropdown/styles.cjs.js

@@ -54,18 +54,19 @@ const getDirectionStyles = ({
       return styled.css``;
   }
 };
-const getBorderRadius = (direction) => {
+const getBorderRadius = (direction, theme) => {
+  const { radius } = theme.components.Dropdown;
   switch (direction) {
     case "bottomLeft":
-      return "0 0.5rem 0.5rem 0.5rem";
+      return `0 ${radius} ${radius} ${radius}`;
     case "bottomRight":
-      return "0.5rem 0 0.5rem 0.5rem";
+      return `${radius} 0 ${radius} ${radius}`;
     case "topLeft":
-      return "0.5rem 0.5rem 0.5rem 0";
+      return `${radius} ${radius} ${radius} 0`;
     case "topRight":
-      return "0.5rem 0.5rem 0 0.5rem";
+      return `${radius} ${radius} 0 ${radius}`;
     default:
-      return "0.5rem";
+      return radius;
   }
 };
 const DropdownWrapper = styled.div`
@@ -74,14 +75,14 @@ const DropdownWrapper = styled.div`
   height: max-content;
 `;
 const DropdownListWrapper = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["anchorRef", "width", "height", "direction"].includes(prop)
+  shouldForwardProp: (prop) => !["anchorRef", "width", "height", "direction", "isContent"].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]};
+  ${({ theme, direction, isContent }) => styled.css`
+    background: ${theme.components.Dropdown.background};
+    padding-top: ${!isContent && "0.5rem"};
+    padding-bottom: ${!isContent && "0.5rem"};
+    border-radius: ${getBorderRadius(direction, theme)};
+    border: 1px solid ${theme.components.Dropdown.borderColor};
   `};
   ${({ width }) => width && styled.css`
       width: ${width};
@@ -101,7 +102,8 @@ const DropdownListStyled = styled(DropdownList).withConfig({
     "anchorRect",
     "dropdownRect",
     "maxHeight",
-    "minWidth"
+    "minWidth",
+    "isContent"
   ].includes(prop)
 })`
   position: absolute;
@@ -109,7 +111,7 @@ const DropdownListStyled = styled(DropdownList).withConfig({
   max-height: ${({ maxHeight }) => maxHeight}px;
   height: ${({ height }) => height || "max-content"};
   width: ${({ width }) => width || "max-content"};
-  min-width: ${({ minWidth }) => `${minWidth}px`};
+  min-width: ${({ minWidth, isContent }) => isContent ? "max-content" : `${minWidth}px`};
 
   ${({ transitionStatus }) => (transitionStatus === "preEnter" || transitionStatus === "exiting") && styled.css`
       opacity: 0;
@@ -126,22 +128,21 @@ const DropdownItemsWrapper = styled.div`
 `;
 const DropdownItemStyled = styled(Text)`
   justify-content: flex-start;
-  cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "pointer"};
+  cursor: ${({ disabled }) => disabled ? "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]};
-    }
-  `}
+          background: ${({ theme }) => theme.components.Dropdown.disabledBackground};
+          color: ${({ theme }) => theme.components.Dropdown.disabledColor};
+        ` : styled.css`
+          &:hover {
+            padding-left: calc(0.25rem - 2px);
+            background: ${({ theme }) => theme.components.Dropdown.hoverBackground};
+            border-left: 2px solid ${({ theme }) => theme.components.Dropdown.borderLeftColor};
+          }
+        `}
 `;
 exports.DropdownItemStyled = DropdownItemStyled;
 exports.DropdownItemsWrapper = DropdownItemsWrapper;

package/dist/Dropdown/styles.d.ts

@@ -13,11 +13,13 @@ type TDropdownListStyledProps<ITEM> = TDropdownListProps<ITEM> & {
     height?: string;
     transitionStatus: TransitionStatus;
     minWidth: number;
+    isContent?: boolean;
 };
 type TDropdownStyledProps = Required<Pick<IDropdownProps, "direction">> & {
     top?: number;
     left?: number;
     width?: string;
+    isContent?: boolean;
 };
 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;

package/dist/Dropdown/styles.es.js

@@ -52,18 +52,19 @@ const getDirectionStyles = ({
       return css``;
   }
 };
-const getBorderRadius = (direction) => {
+const getBorderRadius = (direction, theme) => {
+  const { radius } = theme.components.Dropdown;
   switch (direction) {
     case "bottomLeft":
-      return "0 0.5rem 0.5rem 0.5rem";
+      return `0 ${radius} ${radius} ${radius}`;
     case "bottomRight":
-      return "0.5rem 0 0.5rem 0.5rem";
+      return `${radius} 0 ${radius} ${radius}`;
     case "topLeft":
-      return "0.5rem 0.5rem 0.5rem 0";
+      return `${radius} ${radius} ${radius} 0`;
     case "topRight":
-      return "0.5rem 0.5rem 0 0.5rem";
+      return `${radius} ${radius} 0 ${radius}`;
     default:
-      return "0.5rem";
+      return radius;
   }
 };
 const DropdownWrapper = styled.div`
@@ -72,14 +73,14 @@ const DropdownWrapper = styled.div`
   height: max-content;
 `;
 const DropdownListWrapper = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["anchorRef", "width", "height", "direction"].includes(prop)
+  shouldForwardProp: (prop) => !["anchorRef", "width", "height", "direction", "isContent"].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]};
+  ${({ theme, direction, isContent }) => css`
+    background: ${theme.components.Dropdown.background};
+    padding-top: ${!isContent && "0.5rem"};
+    padding-bottom: ${!isContent && "0.5rem"};
+    border-radius: ${getBorderRadius(direction, theme)};
+    border: 1px solid ${theme.components.Dropdown.borderColor};
   `};
   ${({ width }) => width && css`
       width: ${width};
@@ -99,7 +100,8 @@ const DropdownListStyled = styled(DropdownList).withConfig({
     "anchorRect",
     "dropdownRect",
     "maxHeight",
-    "minWidth"
+    "minWidth",
+    "isContent"
   ].includes(prop)
 })`
   position: absolute;
@@ -107,7 +109,7 @@ const DropdownListStyled = styled(DropdownList).withConfig({
   max-height: ${({ maxHeight }) => maxHeight}px;
   height: ${({ height }) => height || "max-content"};
   width: ${({ width }) => width || "max-content"};
-  min-width: ${({ minWidth }) => `${minWidth}px`};
+  min-width: ${({ minWidth, isContent }) => isContent ? "max-content" : `${minWidth}px`};
 
   ${({ transitionStatus }) => (transitionStatus === "preEnter" || transitionStatus === "exiting") && css`
       opacity: 0;
@@ -124,22 +126,21 @@ const DropdownItemsWrapper = styled.div`
 `;
 const DropdownItemStyled = styled(Text)`
   justify-content: flex-start;
-  cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "pointer"};
+  cursor: ${({ disabled }) => disabled ? "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]};
-    }
-  `}
+          background: ${({ theme }) => theme.components.Dropdown.disabledBackground};
+          color: ${({ theme }) => theme.components.Dropdown.disabledColor};
+        ` : css`
+          &:hover {
+            padding-left: calc(0.25rem - 2px);
+            background: ${({ theme }) => theme.components.Dropdown.hoverBackground};
+            border-left: 2px solid ${({ theme }) => theme.components.Dropdown.borderLeftColor};
+          }
+        `}
 `;
 export {
   DropdownItemStyled,

package/dist/EmptyState/EmptyState.cjs.js

@@ -0,0 +1,51 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Flex = require("../Flex/Flex.cjs.js");
+const Title = require("../typography/Title/Title.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const box = require("../assets/box.svg.cjs.js");
+const EmptyState = ({
+  image,
+  imageStyle,
+  className,
+  style,
+  title = "No data",
+  description = "There is no data",
+  children
+}) => {
+  const Image = React.useMemo(() => {
+    if (image) {
+      if (typeof image === "string") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: image,
+            alt: title,
+            style: imageStyle || { width: "64px", height: "64px" }
+          }
+        );
+      }
+      return image;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(box, { width: 64, height: 64, style: imageStyle });
+  }, [image]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Flex,
+    {
+      direction: "column",
+      className,
+      style,
+      align: "center",
+      justify: "center",
+      gap: "xs",
+      children: [
+        Image,
+        /* @__PURE__ */ jsxRuntime.jsx(Title, { size: "s", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { children: description }),
+        children
+      ]
+    }
+  );
+};
+module.exports = EmptyState;

package/dist/EmptyState/EmptyState.d.ts

@@ -0,0 +1,3 @@
+import { IEmptyStateProps } from './types';
+declare const EmptyState: ({ image, imageStyle, className, style, title, description, children }: IEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

package/dist/EmptyState/EmptyState.es.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Flex from "../Flex/Flex.es.js";
+import Title from "../typography/Title/Title.es.js";
+import Text from "../typography/Text/Text.es.js";
+import SvgBox from "../assets/box.svg.es.js";
+const EmptyState = ({
+  image,
+  imageStyle,
+  className,
+  style,
+  title = "No data",
+  description = "There is no data",
+  children
+}) => {
+  const Image = useMemo(() => {
+    if (image) {
+      if (typeof image === "string") {
+        return /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image,
+            alt: title,
+            style: imageStyle || { width: "64px", height: "64px" }
+          }
+        );
+      }
+      return image;
+    }
+    return /* @__PURE__ */ jsx(SvgBox, { width: 64, height: 64, style: imageStyle });
+  }, [image]);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      className,
+      style,
+      align: "center",
+      justify: "center",
+      gap: "xs",
+      children: [
+        Image,
+        /* @__PURE__ */ jsx(Title, { size: "s", children: title }),
+        /* @__PURE__ */ jsx(Text, { children: description }),
+        children
+      ]
+    }
+  );
+};
+export {
+  EmptyState as default
+};

package/dist/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EmptyState } from './EmptyState';
+export type { IEmptyStateProps } from './types';

package/dist/EmptyState/types.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface IEmptyStateProps {
+    title?: string;
+    description?: ReactNode;
+    image?: ReactNode;
+    imageStyle?: CSSProperties;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}

package/dist/Flex/Flex.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { IFlexProps } from './types';
-declare const Flex: React.ForwardRefExoticComponent<IFlexProps & React.RefAttributes<unknown>>;
+declare const Flex: React.ForwardRefExoticComponent<Omit<IFlexProps, "ref"> & React.RefAttributes<unknown>>;
 export default Flex;

package/dist/Flex/types.d.ts

@@ -20,4 +20,5 @@ export interface IFlexProps {
     /** Main-axis alignment (justify-content) */
     justify?: "start" | "center" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
     wrap?: "wrap" | "wrap-reverse" | "no-wrap";
+    [key: string]: any;
 }