@infomaximum/ui-kit 0.9.1

package/dist/components/Tag/components/Checkable/Checkable.styles.js

@@ -0,0 +1,35 @@
+import { getCheckableTokens } from "./Checkable.tokens.js";
+const getCheckableStyle = (checked) => ({
+  wrapper: (theme) => {
+    const checkableTokens = getCheckableTokens(theme);
+    const checkedBorder = `1px solid transparent`;
+    return {
+      height: theme.x5,
+      boxSizing: "border-box",
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: `0px ${theme.paddingM}px`,
+      borderRadius: theme.borderRadiusM,
+      ...theme.typography.body3,
+      transition: "background .3s, border .3s, color .3s",
+      cursor: "pointer",
+      background: checked ? checkableTokens.tagCheckableBgChecked : checkableTokens.tagCheckableBg,
+      border: checked ? checkedBorder : `1px solid ${checkableTokens.tagCheckableBorder}`,
+      color: checked ? checkableTokens.tagCheckableTextChecked : checkableTokens.tagCheckableText,
+      ":hover": {
+        background: checked ? checkableTokens.tagCheckableHover : checkableTokens.tagCheckableBg,
+        border: checked ? checkedBorder : `1px solid ${checkableTokens.tagCheckableHover}`,
+        color: checked ? checkableTokens.tagCheckableTextChecked : checkableTokens.tagCheckableHover
+      },
+      ":active": {
+        background: checked ? checkableTokens.tagCheckableActive : checkableTokens.tagCheckableBg,
+        border: checked ? checkedBorder : `1px solid ${checkableTokens.tagCheckableActive}`,
+        color: checked ? checkableTokens.tagCheckableTextChecked : checkableTokens.tagCheckableActive
+      }
+    };
+  }
+});
+export {
+  getCheckableStyle
+};

package/dist/components/Tag/components/Checkable/Checkable.tokens.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from 'themes';
+export declare const getCheckableTokens: (theme: Theme) => {
+    tagCheckableBg: "#FFFFFF";
+    tagCheckableBgChecked: "#0CB3B3";
+    tagCheckableText: "#262626";
+    tagCheckableTextChecked: "#FFFFFF";
+    tagCheckableBorder: "#D9D9D9";
+    tagCheckableHover: "#50CCC4";
+    tagCheckableActive: "#03888C";
+};

package/dist/components/Tag/components/Checkable/Checkable.tokens.js

@@ -0,0 +1,12 @@
+const getCheckableTokens = (theme) => ({
+  tagCheckableBg: theme.bgContainer,
+  tagCheckableBgChecked: theme.primaryBase,
+  tagCheckableText: theme.textPrimary,
+  tagCheckableTextChecked: theme.textContrast,
+  tagCheckableBorder: theme.lineBorder,
+  tagCheckableHover: theme.primaryHover,
+  tagCheckableActive: theme.primaryActive
+});
+export {
+  getCheckableTokens
+};

package/dist/components/Tag/components/Checkable/Checkable.types.d.ts

@@ -0,0 +1,12 @@
+import { Interpolation } from '@emotion/react';
+import { MouseEvent } from 'react';
+import { Theme } from '../../../../themes';
+export interface CheckableProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    styles?: {
+        wrapper?: (theme: Theme) => Interpolation;
+    };
+    onChange?: (checked: boolean) => void;
+    onClick?: (checked: boolean, e: MouseEvent<HTMLSpanElement>) => void;
+}

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

@@ -0,0 +1,3 @@
+export { Tag } from './Tag';
+export type { TagProps } from './Tag.types';
+export type { CheckableProps } from './components/Checkable/Checkable.types';

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefExoticComponent, MemoExoticComponent, RefAttributes } from 'react';
+import { TimePickerProps, WithRangePicker } from './TimePicker.types';
+import { PickerRef } from 'rc-picker';
+export declare const TimePicker: MemoExoticComponent<ForwardRefExoticComponent<TimePickerProps & RefAttributes<PickerRef>>> & WithRangePicker;

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,13 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { RangePicker } from "./components/RangePicker/RangePicker.js";
+import { SinglePicker } from "../InternalPicker/pickers/SinglePicker/SinglePicker.js";
+import { defaultProps } from "./TimePicker.utils.js";
+const TimePickerComponent = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SinglePicker, { ...defaultProps, ref, ...props });
+});
+const TimePicker = memo(TimePickerComponent);
+TimePicker.RangePicker = RangePicker;
+export {
+  TimePicker
+};

package/dist/components/TimePicker/TimePicker.types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { RangePickerProps } from './components/RangePicker/RangePicker.types';
+import { SinglePickerProps } from '../InternalPicker';
+export interface TimePickerProps extends SinglePickerProps {
+}
+export interface WithRangePicker {
+    RangePicker: ComponentType<RangePickerProps>;
+}

package/dist/components/TimePicker/TimePicker.utils.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultProps: {
+    picker: "time";
+    suffixIcon: import("@emotion/react/jsx-runtime").JSX.Element;
+};

package/dist/components/TimePicker/TimePicker.utils.js

@@ -0,0 +1,9 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { ClockCircleOutlined } from "@infomaximum/icons";
+const defaultProps = {
+  picker: "time",
+  suffixIcon: /* @__PURE__ */ jsx(ClockCircleOutlined, {})
+};
+export {
+  defaultProps
+};

package/dist/components/TimePicker/components/RangePicker/RangePicker.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefExoticComponent, MemoExoticComponent, RefAttributes } from 'react';
+import { RangePickerProps } from './RangePicker.types';
+import { RangePickerRef } from 'rc-picker/lib/interface';
+export declare const RangePicker: MemoExoticComponent<ForwardRefExoticComponent<RangePickerProps & RefAttributes<RangePickerRef>>>;

package/dist/components/TimePicker/components/RangePicker/RangePicker.js

@@ -0,0 +1,11 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { RangePicker as RangePicker$1 } from "../../../InternalPicker/pickers/RangePicker/RangePicker.js";
+import { defaultProps } from "../../TimePicker.utils.js";
+const RangePickerComponent = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(RangePicker$1, { ...defaultProps, ref, ...props });
+});
+const RangePicker = memo(RangePickerComponent);
+export {
+  RangePicker
+};

package/dist/components/TimePicker/components/RangePicker/RangePicker.types.d.ts

@@ -0,0 +1,3 @@
+import { RangePickerProps as InternalRangePickerProps } from '../../../InternalPicker';
+export interface RangePickerProps extends InternalRangePickerProps {
+}

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

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps } from './TimePicker.types';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import { TooltipProps } from './Tooltip.types';
+export declare const Tooltip: FC<PropsWithChildren<TooltipProps>>;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,22 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { BaseTooltip } from "../BaseTooltip/BaseTooltip.js";
+import { TooltipFloatingElement } from "./components/TooltipFloatingElement/TooltipFloatingElement.js";
+import { getTooltipTokens } from "./Tooltip.tokens.js";
+import { withThemeProvider } from "../../hocs/withThemeProvider.js";
+import { useTheme } from "../../hooks/useTheme/useTheme.js";
+const TooltipComponent = memo(({
+  title,
+  children,
+  styles,
+  trigger,
+  ...baseProps
+}) => {
+  const theme = useTheme();
+  const tooltipTokens = getTooltipTokens(theme);
+  return /* @__PURE__ */ jsx(BaseTooltip, { ...baseProps, trigger: trigger ? [trigger] : void 0, floatingElement: /* @__PURE__ */ jsx(TooltipFloatingElement, { title, styles: styles == null ? void 0 : styles.floatingElement }), arrowColor: tooltipTokens.tooltipBg, children });
+});
+const Tooltip = withThemeProvider(TooltipComponent);
+export {
+  Tooltip
+};

package/dist/components/Tooltip/Tooltip.tokens.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from 'themes';
+export declare const getTooltipTokens: (theme: Theme) => {
+    tooltipBg: "#262626";
+    tooltipText: "#FFFFFF";
+    tooltipMinWidth: 32;
+    tooltipMaxWidth: number;
+    tooltipPaddingVertical: 2;
+    tooltipPaddingHorizontal: 6;
+    tooltipZIndexPopup: number;
+};

package/dist/components/Tooltip/Tooltip.tokens.js

@@ -0,0 +1,12 @@
+const getTooltipTokens = (theme) => ({
+  tooltipBg: theme.bgFloatContrast,
+  tooltipText: theme.textContrast,
+  tooltipMinWidth: theme.x8,
+  tooltipMaxWidth: 520,
+  tooltipPaddingVertical: theme.x05,
+  tooltipPaddingHorizontal: theme.x1AndHalf,
+  tooltipZIndexPopup: 1070
+});
+export {
+  getTooltipTokens
+};

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,12 @@
+import { Interpolation } from '@emotion/react';
+import { BaseTooltipProps } from '../BaseTooltip/BaseTooltip.types';
+import { ReactNode } from 'react';
+import { Theme } from '../../themes';
+export type TooltipTriggerType = "hover" | "focus" | "click";
+export interface TooltipProps extends Omit<BaseTooltipProps, "floatingElement" | "arrowColor" | "trigger"> {
+    title?: ReactNode | (() => ReactNode);
+    trigger?: TooltipTriggerType;
+    styles?: {
+        floatingElement?: (theme: Theme) => Interpolation;
+    };
+}

package/dist/components/Tooltip/components/TooltipFloatingElement/TooltipFloatingElement.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TooltipFloatingElementProps } from './TooltipFloatingElement.type';
+export declare const TooltipFloatingElement: FC<TooltipFloatingElementProps>;

package/dist/components/Tooltip/components/TooltipFloatingElement/TooltipFloatingElement.js

@@ -0,0 +1,15 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { isFunction } from "lodash-es";
+import { tooltipFloatingElementStyle } from "./TooltipFloatingElement.styles.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const TooltipFloatingElement = ({
+  title,
+  styles
+}) => {
+  const theme = useTheme();
+  const content = isFunction(title) ? title() : title;
+  return /* @__PURE__ */ jsx("div", { css: [tooltipFloatingElementStyle(theme), styles == null ? void 0 : styles(theme), process.env.NODE_ENV === "production" ? "" : ";label:TooltipFloatingElement;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVG9vbHRpcC9jb21wb25lbnRzL1Rvb2x0aXBGbG9hdGluZ0VsZW1lbnQvVG9vbHRpcEZsb2F0aW5nRWxlbWVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV2MiLCJmaWxlIjoiL2J1aWxkcy9mcm9udGVuZC9saWJzL3VpLWtpdC9zcmMvY29tcG9uZW50cy9Ub29sdGlwL2NvbXBvbmVudHMvVG9vbHRpcEZsb2F0aW5nRWxlbWVudC9Ub29sdGlwRmxvYXRpbmdFbGVtZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgRkMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVG9vbHRpcEZsb2F0aW5nRWxlbWVudFByb3BzIH0gZnJvbSBcIi4vVG9vbHRpcEZsb2F0aW5nRWxlbWVudC50eXBlXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgaXNGdW5jdGlvbiB9IGZyb20gXCJsb2Rhc2gtZXNcIjtcbmltcG9ydCB7IHRvb2x0aXBGbG9hdGluZ0VsZW1lbnRTdHlsZSB9IGZyb20gXCIuL1Rvb2x0aXBGbG9hdGluZ0VsZW1lbnQuc3R5bGVzXCI7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwRmxvYXRpbmdFbGVtZW50OiBGQzxUb29sdGlwRmxvYXRpbmdFbGVtZW50UHJvcHM+ID0gKHsgdGl0bGUsIHN0eWxlcyB9KSA9PiB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICBjb25zdCBjb250ZW50ID0gaXNGdW5jdGlvbih0aXRsZSkgPyB0aXRsZSgpIDogdGl0bGU7XG5cbiAgcmV0dXJuIDxkaXYgY3NzPXtbdG9vbHRpcEZsb2F0aW5nRWxlbWVudFN0eWxlKHRoZW1lKSwgc3R5bGVzPy4odGhlbWUpXX0+e2NvbnRlbnR9PC9kaXY+O1xufTtcbiJdfQ== */"], children: content });
+};
+export {
+  TooltipFloatingElement
+};

package/dist/components/Tooltip/components/TooltipFloatingElement/TooltipFloatingElement.styles.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from 'themes';
+export declare const tooltipFloatingElementStyle: (theme: Theme) => {
+    fontFamily: "Roboto";
+    fontSize: 12;
+    lineHeight: "20px";
+    display: string;
+    padding: string;
+    minWidth: 32;
+    maxWidth: number;
+    borderRadius: 4;
+    alignItems: string;
+    background: "#262626";
+    color: "#FFFFFF";
+    boxShadow: `0 3px 6px -4px rgba(${number}, ${number}, ${number}, 0.12), 0 6px 16px 0 rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 8px rgba(${number}, ${number}, ${number}, 0.05)`;
+};

package/dist/components/Tooltip/components/TooltipFloatingElement/TooltipFloatingElement.styles.js

@@ -0,0 +1,19 @@
+import { getTooltipTokens } from "../../Tooltip.tokens.js";
+const tooltipFloatingElementStyle = (theme) => {
+  const tooltipTokens = getTooltipTokens(theme);
+  return {
+    display: "flex",
+    padding: `${tooltipTokens.tooltipPaddingVertical}px ${tooltipTokens.tooltipPaddingHorizontal}px`,
+    minWidth: tooltipTokens.tooltipMinWidth,
+    maxWidth: tooltipTokens.tooltipMaxWidth,
+    borderRadius: theme.borderRadiusM,
+    alignItems: "center",
+    background: tooltipTokens.tooltipBg,
+    color: tooltipTokens.tooltipText,
+    boxShadow: theme.shadow2,
+    ...theme.typography.body3
+  };
+};
+export {
+  tooltipFloatingElementStyle
+};

package/dist/components/Tooltip/components/TooltipFloatingElement/TooltipFloatingElement.type.d.ts

@@ -0,0 +1,6 @@
+import { Interpolation } from '@emotion/react';
+import { TooltipProps } from 'components/Tooltip/Tooltip.types';
+import { Theme } from 'themes';
+export interface TooltipFloatingElementProps extends Pick<TooltipProps, "title"> {
+    styles?: (theme: Theme) => Interpolation;
+}

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

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip.types';

package/dist/components/Upload/Upload.d.ts

@@ -0,0 +1,3 @@
+import { ComponentType } from 'react';
+import { UploadProps, WithDragger } from './Upload.types';
+export declare const Upload: ComponentType<UploadProps> & WithDragger;

package/dist/components/Upload/Upload.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import "react";
+import { useMergedState } from "rc-util";
+import { InternalUpload } from "./components/InternalUpload/InternalUpload.js";
+import { Dragger } from "./components/Dragger/Dragger.js";
+import { UploadList } from "./components/UploadList/UploadList.js";
+import { isBoolean } from "lodash-es";
+import { getDragUploadWrapperStyle, dragUploadChildrenWrapperStyle, wrapperStyle } from "./Upload.styles.js";
+import { getUploadTokens } from "./Upload.tokens.js";
+import { useDnd } from "./hooks/useDnd/useDnd.js";
+import { removeFileItem, updateFileList } from "./utils/modifyFileList.js";
+import { file2Obj } from "./utils/file2obj.js";
+import { useTheme } from "../../hooks/useTheme/useTheme.js";
+const UploadComponent = (props) => {
+  const {
+    defaultFileList,
+    fileList,
+    maxCount = 1,
+    accept,
+    disabled,
+    hasControlInside = true,
+    listType = "text",
+    multiple = false,
+    name,
+    showUploadList = true,
+    type = "select",
+    beforeUpload = () => false,
+    onChange,
+    onDrop,
+    onRemove,
+    children
+  } = props;
+  const theme = useTheme();
+  const uploadTokens = getUploadTokens(theme);
+  const {
+    dragState,
+    ...dndHandlers
+  } = useDnd({
+    onDrop
+  });
+  const [mergedFileList, setMergedFileList] = useMergedState(defaultFileList || [], {
+    value: fileList,
+    postState: (list) => list ?? []
+  });
+  const onInternalChange = (file, changedFileList) => {
+    let cloneList = [...changedFileList];
+    let exceedMaxCount = false;
+    if (maxCount === 1) {
+      cloneList = cloneList.slice(-1);
+    } else if (maxCount) {
+      exceedMaxCount = cloneList.length > maxCount;
+      cloneList = cloneList.slice(0, maxCount);
+    }
+    setMergedFileList(cloneList);
+    if (!exceedMaxCount || "status" in file && file.status === "removed" || cloneList.some((f) => f.uid === file.uid)) {
+      onChange == null ? void 0 : onChange({
+        file,
+        fileList: cloneList
+      });
+    }
+  };
+  const handleBatchStart = (files) => {
+    const objectFileList = files.map(file2Obj);
+    let newFileList = [...mergedFileList];
+    objectFileList.forEach((fileObj) => {
+      newFileList = updateFileList(fileObj, newFileList);
+    });
+    objectFileList.forEach((fileObj) => {
+      onInternalChange(fileObj.originFile, newFileList);
+    });
+  };
+  const handleRemove = (file) => {
+    onRemove == null ? void 0 : onRemove(file);
+    let currentFile;
+    const removedFileList = removeFileItem(file, mergedFileList);
+    if (removedFileList) {
+      currentFile = {
+        ...file,
+        status: "removed"
+      };
+      mergedFileList.forEach((item) => {
+        const matchKey = currentFile.uid !== void 0 ? "uid" : "name";
+        if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
+          item.status = "removed";
+        }
+      });
+      onInternalChange(currentFile, removedFileList);
+    }
+  };
+  const uploadList = (() => {
+    if (!showUploadList) {
+      return;
+    }
+    const {
+      showRemoveIcon,
+      removeIcon
+    } = isBoolean(showUploadList) ? {} : showUploadList;
+    return /* @__PURE__ */ jsx(UploadList, { listType, items: mergedFileList, disabled, removeIcon, showRemoveIcon, onRemove: handleRemove });
+  })();
+  const getWrappedContent = (content) => /* @__PURE__ */ jsx("span", { css: wrapperStyle(theme), children: content });
+  const internalUploadProps = {
+    hasControlInside,
+    accept,
+    disabled,
+    multiple,
+    name,
+    beforeUpload,
+    onBatchStart: handleBatchStart
+  };
+  if (type === "drag") {
+    return getWrappedContent(/* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { ...dndHandlers, css: getDragUploadWrapperStyle(uploadTokens, disabled, dragState)(theme), children: /* @__PURE__ */ jsx(InternalUpload, { ...internalUploadProps, children: /* @__PURE__ */ jsx("div", { css: dragUploadChildrenWrapperStyle(theme), children }) }) }),
+      uploadList
+    ] }));
+  }
+  return getWrappedContent(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(InternalUpload, { ...internalUploadProps, children }),
+    uploadList
+  ] }));
+};
+const Upload = UploadComponent;
+Upload.Dragger = Dragger;
+export {
+  Upload
+};

package/dist/components/Upload/Upload.styles.d.ts

@@ -0,0 +1,31 @@
+import { Theme } from 'themes';
+import { UploadTokens } from './Upload.tokens';
+export declare const wrapperStyle: (theme: Theme) => {
+    readonly fontFamily: "Roboto";
+    readonly fontSize: 14;
+    readonly lineHeight: "20px";
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly rowGap: 8;
+};
+export declare const getDragUploadWrapperStyle: (uploadTokens: UploadTokens, disabled: boolean | undefined, dragState: string) => (theme: Theme) => {
+    cursor: string;
+    border: string;
+    background: "#F0F0F0" | "#FAFAFA";
+    borderRadius: 8;
+    padding: number;
+    borderColor: "#50CCC4" | undefined;
+    ":hover": {
+        borderColor: "#50CCC4" | undefined;
+    };
+};
+export declare const dragUploadChildrenWrapperStyle: (theme: Theme) => {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly rowGap: 16;
+    readonly alignItems: "center";
+    readonly textAlign: "center";
+    readonly p: {
+        readonly margin: 0;
+    };
+};

package/dist/components/Upload/Upload.styles.js

@@ -0,0 +1,32 @@
+const wrapperStyle = (theme) => ({
+  display: "flex",
+  flexDirection: "column",
+  rowGap: theme.spaceM,
+  ...theme.typography.body2
+});
+const getDragUploadWrapperStyle = (uploadTokens, disabled, dragState) => (theme) => ({
+  cursor: disabled ? "not-allowed" : "pointer",
+  border: `1px dashed ${uploadTokens.uploadBorder}`,
+  background: disabled ? uploadTokens.uploadDraggerBgDisabled : uploadTokens.uploadDraggerBg,
+  borderRadius: theme.borderRadiusL,
+  padding: theme.paddingXL - 1,
+  borderColor: dragState === "dragover" && !disabled ? uploadTokens.uploadDraggerBorderHover : void 0,
+  ":hover": {
+    borderColor: disabled ? void 0 : uploadTokens.uploadDraggerBorderHover
+  }
+});
+const dragUploadChildrenWrapperStyle = (theme) => ({
+  display: "flex",
+  flexDirection: "column",
+  rowGap: theme.spaceXL,
+  alignItems: "center",
+  textAlign: "center",
+  p: {
+    margin: 0
+  }
+});
+export {
+  dragUploadChildrenWrapperStyle,
+  getDragUploadWrapperStyle,
+  wrapperStyle
+};

package/dist/components/Upload/Upload.tokens.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from 'themes';
+export declare const getUploadTokens: (theme: Theme) => {
+    uploadText: "#262626";
+    uploadTextSecondary: "#8C8C8C";
+    uploadTextDisabled: "#8C8C8C";
+    uploadBgHover: "#F5F5F5";
+    uploadBorder: "#D9D9D9";
+    uploadDanger: "#FF4D4F";
+    uploadDraggerBg: "#FAFAFA";
+    uploadDraggerBgDisabled: "#F0F0F0";
+    uploadDraggerIcon: "#0CB3B3";
+    uploadDraggerBorderHover: "#50CCC4";
+    uploadFileHeight: number;
+    uploadThumbnailSize: number;
+};
+export type UploadTokens = ReturnType<typeof getUploadTokens>;

package/dist/components/Upload/Upload.tokens.js

@@ -0,0 +1,17 @@
+const getUploadTokens = (theme) => ({
+  uploadText: theme.textPrimary,
+  uploadTextSecondary: theme.textSecondary,
+  uploadTextDisabled: theme.textDisabled,
+  uploadBgHover: theme.bgContainerHover,
+  uploadBorder: theme.lineBorder,
+  uploadDanger: theme.dangerBase,
+  uploadDraggerBg: theme.bgComplimentary,
+  uploadDraggerBgDisabled: theme.bgContainerDisabled,
+  uploadDraggerIcon: theme.primaryBase,
+  uploadDraggerBorderHover: theme.primaryHover,
+  uploadFileHeight: 24,
+  uploadThumbnailSize: 48
+});
+export {
+  getUploadTokens
+};

package/dist/components/Upload/Upload.types.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType, DragEvent, ReactNode } from 'react';
+import { FileWithUid, InternalUploadProps } from './components/InternalUpload/InternalUpload.types';
+import { DraggerProps } from './components/Dragger/Dragger.types';
+export interface UploadProps extends Omit<InternalUploadProps, "onBatchStart"> {
+    defaultFileList?: UploadFile[];
+    fileList?: UploadFile[];
+    maxCount?: number;
+    onChange?: (info: {
+        file: FileWithUid | UploadFile;
+        fileList: UploadFile[];
+    }) => void;
+    onDrop?: (e: DragEvent<HTMLDivElement>) => void;
+    onRemove?: (file: UploadFile) => void;
+    listType?: ListType;
+    type?: "drag" | "select";
+    showUploadList?: boolean | {
+        showRemoveIcon?: boolean;
+        removeIcon?: ReactNode;
+    };
+}
+export interface WithDragger {
+    Dragger: ComponentType<DraggerProps>;
+}
+export interface UploadFile extends Pick<FileObj, "uid" | "name">, Partial<Pick<FileObj, "type" | "size" | "originFile">> {
+    status?: UploadStatus;
+    thumbUrl?: string;
+    url?: string;
+    response?: string;
+}
+export interface FileObj extends Pick<FileWithUid, "uid" | "name" | "type" | "size" | "lastModified"> {
+    originFile: FileWithUid;
+}
+export type UploadStatus = "uploading" | "done" | "error" | "removed";
+export type ListType = "text" | "picture";

package/dist/components/Upload/components/Dragger/Dragger.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DraggerProps } from './Dragger.types';
+export declare const Dragger: FC<DraggerProps>;

package/dist/components/Upload/components/Dragger/Dragger.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { Upload } from "../../Upload.js";
+import { InboxOutlined } from "@infomaximum/icons";
+import { getIconWrapperStyle, getInfoStyle, getTitleStyle, getCaptionStyle } from "./Dragger.styles.js";
+import { getUploadTokens } from "../../Upload.tokens.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const DraggerComponent = (props) => {
+  const {
+    hasControlInside = false,
+    title,
+    caption,
+    children,
+    ...restProps
+  } = props;
+  const theme = useTheme();
+  const uploadTokens = getUploadTokens(theme);
+  const getDefaultDraggerChildren = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("p", { css: getIconWrapperStyle(uploadTokens, restProps.disabled)(theme), children: /* @__PURE__ */ jsx(InboxOutlined, {}) }),
+    (title || caption) && /* @__PURE__ */ jsxs("div", { css: getInfoStyle(uploadTokens, restProps.disabled)(theme), children: [
+      title && /* @__PURE__ */ jsx("p", { css: getTitleStyle(uploadTokens, restProps.disabled)(theme), children: title }),
+      caption && /* @__PURE__ */ jsx("p", { css: getCaptionStyle(uploadTokens, restProps.disabled), children: caption })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(Upload, { hasControlInside, ...restProps, type: "drag", children: children || getDefaultDraggerChildren() });
+};
+const Dragger = DraggerComponent;
+export {
+  Dragger
+};

package/dist/components/Upload/components/Dragger/Dragger.styles.d.ts

@@ -0,0 +1,22 @@
+import { Theme } from 'themes';
+import { UploadTokens } from '../../Upload.tokens';
+export declare const getIconWrapperStyle: (uploadTokens: UploadTokens, disabled: boolean | undefined) => (theme: Theme) => {
+    readonly display: "flex";
+    readonly fontSize: 32;
+    readonly color: "#8C8C8C" | "#0CB3B3";
+};
+export declare const getInfoStyle: (uploadTokens: UploadTokens, disabled: boolean | undefined) => (theme: Theme) => {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly rowGap: 4;
+    readonly color: "#8C8C8C" | undefined;
+};
+export declare const getTitleStyle: (uploadTokens: UploadTokens, disabled: boolean | undefined) => (theme: Theme) => {
+    color: "#262626" | undefined;
+    fontFamily: "Roboto";
+    fontSize: 16;
+    lineHeight: "24px";
+};
+export declare const getCaptionStyle: (uploadTokens: UploadTokens, disabled: boolean | undefined) => {
+    color: "#8C8C8C" | undefined;
+};

package/dist/components/Upload/components/Dragger/Dragger.styles.js

@@ -0,0 +1,24 @@
+const getIconWrapperStyle = (uploadTokens, disabled) => (theme) => ({
+  display: "flex",
+  fontSize: theme.iconXL,
+  color: disabled ? uploadTokens.uploadTextDisabled : uploadTokens.uploadDraggerIcon
+});
+const getInfoStyle = (uploadTokens, disabled) => (theme) => ({
+  display: "flex",
+  flexDirection: "column",
+  rowGap: theme.spaceXS,
+  color: disabled ? uploadTokens.uploadTextDisabled : void 0
+});
+const getTitleStyle = (uploadTokens, disabled) => (theme) => ({
+  ...theme.typography.body1,
+  color: disabled ? void 0 : uploadTokens.uploadText
+});
+const getCaptionStyle = (uploadTokens, disabled) => ({
+  color: disabled ? void 0 : uploadTokens.uploadTextSecondary
+});
+export {
+  getCaptionStyle,
+  getIconWrapperStyle,
+  getInfoStyle,
+  getTitleStyle
+};