@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts

@@ -1,11 +1,276 @@
-import { ContextMenuAlignment } from '../constants/alignment';
-export declare const StyledMotionContextMenuContent: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
-    position: ContextMenuAlignment;
-} & {
+/// <reference types="react" />
+/// <reference types="react" />
+import { ContextMenuAlignment } from '../../../types/contextMenu';
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+type StyledMotionContextMenuContentProps = WithTheme<{
+    $position: ContextMenuAlignment;
+}>;
+export declare const StyledMotionContextMenuContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledMotionContextMenuContentProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledContextMenuContentItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>;
-export declare const StyledContextMenuContentItem: import("styled-components").StyledComponent<"div", any, {
-    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>;
-export declare const StyledContextMenuContentItemIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledContextMenuContentItemText: import("styled-components").StyledComponent<"div", any, {}, never>;
+}>>;
+export declare const StyledContextMenuContentItemIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledContextMenuContentItemText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export {};

package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js

@@ -1,15 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledMotionContextMenuContent = exports.StyledContextMenuContentItemText = exports.StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItem = void 0;
-var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _alignment = require("../constants/alignment");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+import { ContextMenuAlignment } from '../../../types/contextMenu';
+export const StyledMotionContextMenuContent = styled(motion.div)`
     background-color: ${_ref => {
   let {
     theme
@@ -17,7 +9,7 @@ const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMot
   return theme['001'];
 }};
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 2px;
+    border-radius: 3px;
     box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
     color: ${_ref2 => {
   let {
@@ -28,10 +20,9 @@ const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMot
     position: absolute;
     z-index: 0;
 
-    ::after {
+    &::after {
         background-color: inherit;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        border-bottom-right-radius: 2px;
         border-right: 1px solid rgba(0, 0, 0, 0.1);
         box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
         content: '';
@@ -42,31 +33,31 @@ const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMot
 
         ${_ref3 => {
   let {
-    position
+    $position
   } = _ref3;
-  switch (position) {
-    case _alignment.ContextMenuAlignment.TopLeft:
-      return (0, _styledComponents.css)`
-                        bottom: -8px;
+  switch ($position) {
+    case ContextMenuAlignment.TopLeft:
+      return css`
+                        bottom: -7px;
                         right: 13px;
                         transform: rotate(45deg);
                     `;
-    case _alignment.ContextMenuAlignment.BottomLeft:
-      return (0, _styledComponents.css)`
-                        top: -8px;
+    case ContextMenuAlignment.BottomLeft:
+      return css`
+                        top: -7px;
                         right: 13px;
                         transform: rotate(225deg);
                     `;
-    case _alignment.ContextMenuAlignment.TopRight:
-      return (0, _styledComponents.css)`
+    case ContextMenuAlignment.TopRight:
+      return css`
                         transform: rotate(45deg);
-                        bottom: -8px;
+                        bottom: -7px;
                         left: 13px;
                     `;
-    case _alignment.ContextMenuAlignment.BottomRight:
-      return (0, _styledComponents.css)`
+    case ContextMenuAlignment.BottomRight:
+      return css`
                         transform: rotate(225deg);
-                        top: -8px;
+                        top: -7px;
                         left: 13px;
                     `;
     default:
@@ -75,7 +66,7 @@ const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMot
 }}
     }
 
-    ::before {
+    &::before {
         background-color: inherit;
         bottom: 0;
         content: '';
@@ -86,14 +77,13 @@ const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMot
         z-index: -1;
     }
 `;
-exports.StyledMotionContextMenuContent = StyledMotionContextMenuContent;
-const StyledContextMenuContentItem = _styledComponents.default.div`
+export const StyledContextMenuContentItem = styled.div`
     cursor: pointer;
     display: flex;
     padding: 5px 8px 5px 5px;
     transition: background-color 0.3s ease;
 
-    :hover {
+    &:hover {
         background-color: ${_ref4 => {
   let {
     theme
@@ -102,16 +92,13 @@ const StyledContextMenuContentItem = _styledComponents.default.div`
 }};
     }
 `;
-exports.StyledContextMenuContentItem = StyledContextMenuContentItem;
-const StyledContextMenuContentItemIconWrapper = _styledComponents.default.div`
+export const StyledContextMenuContentItemIconWrapper = styled.div`
     flex: 0 0 auto;
     margin: 0 8px 0 3px;
     width: 20px;
 `;
-exports.StyledContextMenuContentItemIconWrapper = StyledContextMenuContentItemIconWrapper;
-const StyledContextMenuContentItemText = _styledComponents.default.div`
+export const StyledContextMenuContentItemText = styled.div`
     flex: 0 0 auto;
     white-space: nowrap;
 `;
-exports.StyledContextMenuContentItemText = StyledContextMenuContentItemText;
 //# sourceMappingURL=ContextMenuContent.styles.js.map

package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContent.styles.js","names":["StyledMotionContextMenuContent","styled","motion","div","theme","text","position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../constants/alignment';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n    position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n    motion.div\n)<StyledMotionContextMenuContentProps>`\n    background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 2px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 2px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ position }) => {\n            switch (position) {\n                case ContextMenuAlignment.TopLeft:\n                    return css`\n                        bottom: -8px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomLeft:\n                    return css`\n                        top: -8px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case ContextMenuAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -8px;\n                        left: 13px;\n                    `;\n                case ContextMenuAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -8px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    :hover {\n        background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n            theme['secondary-103']};\n    }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AAA8D;AAAA;AAMvD,MAAMA,8BAA8B,GAAG,IAAAC,yBAAM,EAChDC,oBAAM,CAACC,GAAG,CACyB;AACvC,wBAAwB;EAAA,IAAC;IAAEC;EAA2C,CAAC;EAAA,OAAKA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzF;AACA;AACA;AACA,aAAa;EAAA,IAAC;IAAEA;EAA2C,CAAC;EAAA,OAAKA,KAAK,CAACC,IAAI;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,SAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC;EACX,QAAQA,QAAQ;IACZ,KAAKC,+BAAoB,CAACC,OAAO;MAC7B,OAAO,IAAAC,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,+BAAoB,CAACG,UAAU;MAChC,OAAO,IAAAD,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,+BAAoB,CAACI,QAAQ;MAC9B,OAAO,IAAAF,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,+BAAoB,CAACK,WAAW;MACjC,OAAO,IAAAH,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOI,SAAS;EAAC;AAE7B,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAIK,MAAMC,4BAA4B,GAAGb,yBAAM,CAACE,GAAuC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B;EAAA,IAAC;IAAEC;EAAyC,CAAC;EAAA,OAC7DA,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACnC;AACA,CAAC;AAAC;AAEK,MAAMW,uCAAuC,GAAGd,yBAAM,CAACE,GAAI;AAClE;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMa,gCAAgC,GAAGf,yBAAM,CAACE,GAAI;AAC3D;AACA;AACA,CAAC;AAAC"}
+{"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","_ref","theme","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n    $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n    motion.div,\n)<StyledMotionContextMenuContentProps>`\n    background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position }) => {\n            switch ($position) {\n                case ContextMenuAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case ContextMenuAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 13px;\n                    `;\n                case ContextMenuAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    &:hover {\n        background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n            theme['secondary-103']};\n    }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,4BAA4B;AAOjE,OAAO,MAAMC,8BAA8B,GAAGH,MAAM,CAChDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzF;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAA2C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKR,oBAAoB,CAACS,OAAO;MAC7B,OAAOV,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACU,UAAU;MAChC,OAAOX,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACW,QAAQ;MAC9B,OAAOZ,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACY,WAAW;MACjC,OAAOb,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOc,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGhB,MAAM,CAACI,GAAuC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4Ba,KAAA;EAAA,IAAC;IAAEX;EAAyC,CAAC,GAAAW,KAAA;EAAA,OAC7DX,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACnC;AACA,CAAC;AAED,OAAO,MAAMY,uCAAuC,GAAGlB,MAAM,CAACI,GAAI;AAClE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMe,gCAAgC,GAAGnB,MAAM,CAACI,GAAI;AAC3D;AACA;AACA,CAAC"}

package/lib/components/file-input/FileInput.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+export type FileInputProps = {
+    /**
+     * An array of icons that should be displayed inside the FileInput
+     */
+    icons?: string[];
+    /**
+     * The maximum amount of Files that can be uploaded.
+     */
+    maxFiles?: number;
+    /**
+     * A function to be executed when files are added.
+     */
+    onAdd?: (files: File[]) => void;
+    /**
+     * Function to be executed when the maximum amount of Files are reached.
+     */
+    onMaxFilesReached?: () => void;
+    /**
+     * A function to be executed when a file is removed.
+     */
+    onRemove?: (file: File) => void;
+    /**
+     * The text that should be displayed inside the FileInput
+     */
+    placeholder?: string;
+};
+declare const FileInput: FC<FileInputProps>;
+export default FileInput;

package/lib/components/file-input/FileInput.js

@@ -0,0 +1,112 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useMemo, useState } from 'react';
+import { filterDuplicateFile } from '../../utils/file';
+import { selectFiles } from '../../utils/fileDialog';
+import Icon from '../icon/Icon';
+import List from '../list/List';
+import FileListItem from './file-list/FileListItem';
+import { StyledFileInput, StyledFileInputContainer, StyledFileInputText, StyledMotionFileInputList } from './FileInput.styles';
+const FileInput = _ref => {
+  let {
+    icons = ['fa fa-upload'],
+    onMaxFilesReached,
+    maxFiles,
+    onRemove,
+    onAdd,
+    placeholder = 'Dateien hinzufügen'
+  } = _ref;
+  const [internalFiles, setInternalFiles] = useState([]);
+  const handleAddFiles = useCallback(files => {
+    const newFileItems = [];
+    files.forEach(file => {
+      if (file && !filterDuplicateFile({
+        files: internalFiles,
+        newFile: file
+      })) {
+        newFileItems.push(file);
+      }
+    });
+    if (newFileItems.length > 0 && typeof onAdd === 'function') {
+      onAdd(newFileItems);
+    }
+    setInternalFiles(prevState => [...prevState, ...newFileItems]);
+  }, [internalFiles, onAdd]);
+  const handleDeleteFile = useCallback(fileName => {
+    let fileToDelete;
+    const filteredFiles = internalFiles.filter(file => {
+      const {
+        name
+      } = file;
+      if (name === fileName) {
+        fileToDelete = file;
+      }
+      return name !== fileName;
+    });
+    setInternalFiles(filteredFiles);
+    if (!fileToDelete || typeof onRemove !== 'function') {
+      return;
+    }
+    onRemove(fileToDelete);
+  }, [internalFiles, onRemove]);
+  const isDisabled = useMemo(() => {
+    if (maxFiles) {
+      if (internalFiles.length >= maxFiles) {
+        if (typeof onMaxFilesReached === 'function') {
+          onMaxFilesReached();
+        }
+        return true;
+      }
+    }
+    return false;
+  }, [internalFiles.length, maxFiles, onMaxFilesReached]);
+  const handleClick = useCallback(async () => {
+    if (isDisabled) {
+      return;
+    }
+    const files = await selectFiles({
+      multiple: true
+    });
+    handleAddFiles(files);
+  }, [handleAddFiles, isDisabled]);
+  const handleDrop = useCallback(e => {
+    e.preventDefault();
+    const draggedFiles = Array.from(e.dataTransfer.files);
+    handleAddFiles(draggedFiles);
+  }, [handleAddFiles]);
+  const content = useMemo(() => {
+    const items = internalFiles.map(file => /*#__PURE__*/React.createElement(StyledMotionFileInputList, {
+      animate: {
+        height: 'auto',
+        opacity: 1
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      key: file.name,
+      transition: {
+        duration: 0.25,
+        type: 'tween'
+      }
+    }, /*#__PURE__*/React.createElement(FileListItem, {
+      fileType: file.type,
+      fileName: file.name,
+      fileSize: file.size,
+      onRemove: handleDeleteFile
+    })));
+    return items;
+  }, [handleDeleteFile, internalFiles]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileInput, null, /*#__PURE__*/React.createElement(StyledFileInputContainer, {
+    $isDisabled: isDisabled,
+    onClick: () => void handleClick(),
+    onDragOver: e => e.preventDefault(),
+    onDrop: e => void handleDrop(e)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: icons
+  }), /*#__PURE__*/React.createElement(StyledFileInputText, null, placeholder)), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, content))), [content, handleClick, handleDrop, icons, isDisabled, placeholder]);
+};
+FileInput.displayName = 'FileInput';
+export default FileInput;
+//# sourceMappingURL=FileInput.js.map

package/lib/components/file-input/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","names":["AnimatePresence","React","useCallback","useMemo","useState","filterDuplicateFile","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledMotionFileInputList","FileInput","_ref","icons","onMaxFilesReached","maxFiles","onRemove","onAdd","placeholder","internalFiles","setInternalFiles","handleAddFiles","files","newFileItems","forEach","file","newFile","push","length","prevState","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","isDisabled","handleClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","items","map","createElement","animate","height","opacity","exit","key","transition","duration","type","fileType","fileSize","size","$isDisabled","onClick","onDragOver","onDrop","initial","displayName"],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { filterDuplicateFile } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n    StyledFileInput,\n    StyledFileInputContainer,\n    StyledFileInputText,\n    StyledMotionFileInputList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    icons?: string[];\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File) => void;\n    /**\n     * The text that should be displayed inside the FileInput\n     */\n    placeholder?: string;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n    icons = ['fa fa-upload'],\n    onMaxFilesReached,\n    maxFiles,\n    onRemove,\n    onAdd,\n    placeholder = 'Dateien hinzufügen',\n}) => {\n    const [internalFiles, setInternalFiles] = useState<File[]>([]);\n\n    const handleAddFiles = useCallback(\n        (files: File[]) => {\n            const newFileItems: File[] = [];\n\n            files.forEach((file) => {\n                if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                    newFileItems.push(file);\n                }\n            });\n\n            if (newFileItems.length > 0 && typeof onAdd === 'function') {\n                onAdd(newFileItems);\n            }\n\n            setInternalFiles((prevState) => [...prevState, ...newFileItems]);\n        },\n        [internalFiles, onAdd],\n    );\n\n    const handleDeleteFile = useCallback(\n        (fileName?: string) => {\n            let fileToDelete: File | undefined;\n\n            const filteredFiles = internalFiles.filter((file) => {\n                const { name } = file;\n\n                if (name === fileName) {\n                    fileToDelete = file;\n                }\n\n                return name !== fileName;\n            });\n\n            setInternalFiles(filteredFiles);\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [internalFiles, onRemove],\n    );\n\n    const isDisabled = useMemo(() => {\n        if (maxFiles) {\n            if (internalFiles.length >= maxFiles) {\n                if (typeof onMaxFilesReached === 'function') {\n                    onMaxFilesReached();\n                }\n\n                return true;\n            }\n        }\n\n        return false;\n    }, [internalFiles.length, maxFiles, onMaxFilesReached]);\n\n    const handleClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const files = await selectFiles({\n            multiple: true,\n        });\n\n        handleAddFiles(files);\n    }, [handleAddFiles, isDisabled]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [handleAddFiles],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = internalFiles.map((file) => (\n            <StyledMotionFileInputList\n                animate={{ height: 'auto', opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                key={file.name}\n                transition={{ duration: 0.25, type: 'tween' }}\n            >\n                <FileListItem\n                    fileType={file.type}\n                    fileName={file.name}\n                    fileSize={file.size}\n                    onRemove={handleDeleteFile}\n                />\n            </StyledMotionFileInputList>\n        ));\n\n        return items;\n    }, [handleDeleteFile, internalFiles]);\n\n    return useMemo(\n        () => (\n            <StyledFileInput>\n                <StyledFileInputContainer\n                    $isDisabled={isDisabled}\n                    onClick={() => void handleClick()}\n                    onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n                    onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n                >\n                    <Icon icons={icons} />\n                    <StyledFileInputText>{placeholder}</StyledFileInputText>\n                </StyledFileInputContainer>\n                <List>\n                    <AnimatePresence initial={false}>{content}</AnimatePresence>\n                </List>\n            </StyledFileInput>\n        ),\n        [content, handleClick, handleDrop, icons, isDisabled, placeholder],\n    );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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"}