@chayns-components/core 5.0.0-beta.48 → 5.0.0-beta.482

package/lib/components/truncation/Truncation.js

@@ -0,0 +1,132 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ClampPosition } from '../../types/truncation';
+import { truncateElement } from '../../utils/truncation';
+import { StyledMotionTruncationContent, StyledTruncation, StyledTruncationClamp, StyledTruncationClampWrapper, StyledTruncationPseudoContent } from './Truncation.styles';
+const Truncation = _ref => {
+  let {
+    collapsedHeight = 150,
+    clampPosition = ClampPosition.Right,
+    isOpen,
+    moreLabel = 'Mehr',
+    lessLabel = 'Weniger',
+    onChange,
+    children
+  } = _ref;
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [showClamp, setShowClamp] = useState(true);
+  const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);
+  const [originalHeight, setOriginalHeight] = useState(0);
+  const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);
+  const [hasSizeChanged, setHasSizeChanged] = useState(false);
+  const [initialRender, setInitialRender] = useState(true);
+  const [originalSmallHeight, setOriginalSmallHeight] = useState(0);
+  const [originalBigHeight, setOriginalBigHeight] = useState(0);
+  useEffect(() => {
+    setInitialRender(false);
+  }, []);
+  const pseudoChildrenRef = useRef(null);
+  const childrenRef = useRef(null);
+  const originalChildrenRef = useRef(null);
+  useEffect(() => {
+    if (typeof isOpen === 'boolean') {
+      setInternalIsOpen(isOpen);
+      setShowClamp(!isOpen);
+    }
+  }, [isOpen]);
+
+  // Changes the state of the truncation
+  const handleClampClick = useCallback(event => {
+    setInternalIsOpen(current => {
+      if (typeof onChange === 'function') {
+        onChange(event, !current);
+      }
+      return !current;
+    });
+  }, [onChange]);
+  const handleAnimationEnd = useCallback(() => {
+    setHasSizeChanged(false);
+    setShouldShowCollapsedElement(!internalIsOpen);
+  }, [internalIsOpen]);
+  useEffect(() => {
+    if (!pseudoChildrenRef.current) {
+      return;
+    }
+    setOriginalHeight(pseudoChildrenRef.current.offsetHeight);
+    setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);
+    truncateElement(pseudoChildrenRef.current, collapsedHeight);
+    setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);
+    setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);
+  }, [collapsedHeight, pseudoChildrenRef]);
+
+  // Checks if the clamp should be shown
+  useEffect(() => {
+    if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {
+      setShowClamp(originalHeight > newCollapsedHeight);
+    }
+  }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);
+  useEffect(() => {
+    if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {
+      while (childrenRef.current.firstChild) {
+        childrenRef.current.removeChild(childrenRef.current.firstChild);
+      }
+      childrenRef.current.appendChild(shouldShowCollapsedElement && !internalIsOpen ? pseudoChildrenRef.current : originalChildrenRef.current);
+      childrenRef.current.children[0].style.visibility = 'visible';
+    }
+  }, [children, internalIsOpen, shouldShowCollapsedElement]);
+  useEffect(() => {
+    if (originalChildrenRef.current) {
+      const resizeObserver = new ResizeObserver(entries => {
+        if (entries && entries[0]) {
+          const observedHeight = entries[0].contentRect.height;
+          setOriginalHeight(observedHeight < originalBigHeight ? originalBigHeight : observedHeight);
+          setHasSizeChanged(true);
+        }
+      });
+      resizeObserver.observe(originalChildrenRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return () => {};
+  }, [originalBigHeight]);
+  useEffect(() => {
+    if (pseudoChildrenRef.current) {
+      const resizeObserver = new ResizeObserver(entries => {
+        if (entries && entries[0]) {
+          const observedHeight = entries[0].contentRect.height;
+          setNewCollapsedHeight(observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight);
+          setHasSizeChanged(true);
+        }
+      });
+      resizeObserver.observe(pseudoChildrenRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return () => {};
+  }, [originalSmallHeight]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTruncation, {
+    className: "beta-chayns-truncation"
+  }, /*#__PURE__*/React.createElement(StyledTruncationPseudoContent, {
+    ref: pseudoChildrenRef
+  }, children), /*#__PURE__*/React.createElement(StyledTruncationPseudoContent, {
+    ref: originalChildrenRef
+  }, children), /*#__PURE__*/React.createElement(StyledMotionTruncationContent, {
+    animate: {
+      height: internalIsOpen ? originalHeight : newCollapsedHeight
+    },
+    initial: false,
+    transition: {
+      type: 'tween',
+      duration: hasSizeChanged ? 0 : 0.2
+    },
+    onAnimationComplete: handleAnimationEnd,
+    ref: childrenRef
+  }), showClamp && /*#__PURE__*/React.createElement(StyledTruncationClampWrapper, {
+    $position: clampPosition
+  }, /*#__PURE__*/React.createElement(StyledTruncationClamp, {
+    onClick: handleClampClick
+  }, internalIsOpen ? lessLabel : moreLabel))), [children, clampPosition, handleAnimationEnd, handleClampClick, hasSizeChanged, internalIsOpen, lessLabel, moreLabel, newCollapsedHeight, originalHeight, showClamp]);
+};
+export default Truncation;
+//# sourceMappingURL=Truncation.js.map

package/lib/components/truncation/Truncation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","ClampPosition","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Truncation","_ref","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","pseudoChildrenRef","childrenRef","originalChildrenRef","handleClampClick","event","current","handleAnimationEnd","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","createElement","className","ref","animate","initial","transition","type","duration","onAnimationComplete","$position","onClick"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampWrapper,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [internalIsOpen, setInternalIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n    const [hasSizeChanged, setHasSizeChanged] = useState(false);\n    const [initialRender, setInitialRender] = useState(true);\n\n    const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n    const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n    useEffect(() => {\n        setInitialRender(false);\n    }, []);\n\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n            setShowClamp(!isOpen);\n        }\n    }, [isOpen]);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        setHasSizeChanged(false);\n        setShouldShowCollapsedElement(!internalIsOpen);\n    }, [internalIsOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            while (childrenRef.current.firstChild) {\n                childrenRef.current.removeChild(childrenRef.current.firstChild);\n            }\n\n            childrenRef.current.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? pseudoChildrenRef.current\n                    : originalChildrenRef.current,\n            );\n\n            (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n        }\n    }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n    useEffect(() => {\n        if (originalChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n                    setOriginalHeight(\n                        observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n                    );\n                    setHasSizeChanged(true);\n                }\n            });\n\n            resizeObserver.observe(originalChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalBigHeight]);\n\n    useEffect(() => {\n        if (pseudoChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n                    setNewCollapsedHeight(\n                        observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n                    );\n                    setHasSizeChanged(true);\n                }\n            });\n\n            resizeObserver.observe(pseudoChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalSmallHeight]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\">\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n                    onAnimationComplete={handleAnimationEnd}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClampWrapper $position={clampPosition}>\n                        <StyledTruncationClamp onClick={handleClampClick}>\n                            {internalIsOpen ? lessLabel : moreLabel}\n                        </StyledTruncationClamp>\n                    </StyledTruncationClampWrapper>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            clampPosition,\n            handleAnimationEnd,\n            handleClampClick,\n            hasSizeChanged,\n            internalIsOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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"}

package/lib/components/truncation/Truncation.styles.d.ts

@@ -0,0 +1,277 @@
+/// <reference types="react" />
+/// <reference types="react" />
+import { ClampPosition } from '../../types/truncation';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledTruncation: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledMotionTruncationContent: 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>, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTruncationPseudoContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledTruncationClampWrapperProps = WithTheme<{
+    $position: ClampPosition;
+}>;
+export declare const StyledTruncationClampWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTruncationClampWrapperProps>>;
+export declare const StyledTruncationClamp: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
+export {};

package/lib/components/truncation/Truncation.styles.js

@@ -0,0 +1,44 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+import { ClampPosition } from '../../types/truncation';
+export const StyledTruncation = styled.div`
+    position: relative;
+`;
+
+// Fix framer-motion bug
+export const StyledMotionTruncationContent = styled(motion.div)`
+    overflow: hidden;
+`;
+export const StyledTruncationPseudoContent = styled.div`
+    visibility: hidden;
+    position: absolute;
+    width: fit-content;
+`;
+export const StyledTruncationClampWrapper = styled.div`
+    display: flex;
+
+    ${_ref => {
+  let {
+    $position
+  } = _ref;
+  switch ($position) {
+    case ClampPosition.Left:
+      return css`
+                    justify-content: left;
+                `;
+    case ClampPosition.Middle:
+      return css`
+                    justify-content: center;
+                `;
+    default:
+      return css`
+                    justify-content: right;
+                `;
+  }
+}}
+`;
+export const StyledTruncationClamp = styled.a`
+    cursor: pointer;
+    z-index: 2;
+`;
+//# sourceMappingURL=Truncation.styles.js.map

package/lib/components/truncation/Truncation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","_ref","$position","Left","Middle","StyledTruncationClamp","a"],"sources":["../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTruncation = styled.div`\n    position: relative;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n    visibility: hidden;\n    position: absolute;\n    width: fit-content;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n    display: flex;\n\n    ${({ $position }) => {\n        switch ($position) {\n            case ClampPosition.Left:\n                return css`\n                    justify-content: left;\n                `;\n            case ClampPosition.Middle:\n                return css`\n                    justify-content: center;\n                `;\n            default:\n                return css`\n                    justify-content: right;\n                `;\n        }\n    }}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n    cursor: pointer;\n    z-index: 2;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAI;AAC3C;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAsB;AACpF;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGN,MAAM,CAACI,GAAI;AACxD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,GAAGP,MAAM,CAACI,GAAuC;AAC1F;AACA;AACA,MAAMI,IAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,IAAA;EACZ,QAAQC,SAAS;IACb,KAAKP,aAAa,CAACQ,IAAI;MACnB,OAAOT,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAKC,aAAa,CAACS,MAAM;MACrB,OAAOV,GAAI;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAI;AAC3B;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC;AAED,OAAO,MAAMW,qBAAqB,GAAGZ,MAAM,CAACa,CAAE;AAC9C;AACA;AACA,CAAC"}

package/lib/constants/mentionFinder.d.ts

@@ -0,0 +1,4 @@
+export declare enum MentionFinderPopupAlignment {
+    Top = 0,
+    Bottom = 1
+}

package/lib/constants/mentionFinder.js

@@ -0,0 +1,6 @@
+export let MentionFinderPopupAlignment = /*#__PURE__*/function (MentionFinderPopupAlignment) {
+  MentionFinderPopupAlignment[MentionFinderPopupAlignment["Top"] = 0] = "Top";
+  MentionFinderPopupAlignment[MentionFinderPopupAlignment["Bottom"] = 1] = "Bottom";
+  return MentionFinderPopupAlignment;
+}({});
+//# sourceMappingURL=mentionFinder.js.map

package/lib/constants/mentionFinder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mentionFinder.js","names":["MentionFinderPopupAlignment"],"sources":["../../src/constants/mentionFinder.ts"],"sourcesContent":["export enum MentionFinderPopupAlignment {\n    Top,\n    Bottom,\n}\n"],"mappings":"AAAA,WAAYA,2BAA2B,0BAA3BA,2BAA2B;EAA3BA,2BAA2B,CAA3BA,2BAA2B;EAA3BA,2BAA2B,CAA3BA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA"}

package/lib/constants/numberInput.d.ts

@@ -0,0 +1,5 @@
+export declare const NUMBER_CLEAR_REGEX: RegExp;
+export declare const INTEGER_TEST: RegExp;
+export declare const DECIMAL_TEST: RegExp;
+export declare const MONEY_TEST: RegExp;
+export declare const TIME_TEST: RegExp;

package/lib/constants/numberInput.js

@@ -0,0 +1,6 @@
+export const NUMBER_CLEAR_REGEX = /[^\d,.:]/gi;
+export const INTEGER_TEST = /^[1-9][0-9]*$/;
+export const DECIMAL_TEST = /^(0|[1-9][0-9]*)?(\.[0-9]*)?$/;
+export const MONEY_TEST = /^(0|[1-9][0-9]*)?(\.[0-9]{0,2})?$/;
+export const TIME_TEST = /^\d{1,2}(:\d{1,2})?$/;
+//# sourceMappingURL=numberInput.js.map

package/lib/constants/numberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberInput.js","names":["NUMBER_CLEAR_REGEX","INTEGER_TEST","DECIMAL_TEST","MONEY_TEST","TIME_TEST"],"sources":["../../src/constants/numberInput.ts"],"sourcesContent":["export const NUMBER_CLEAR_REGEX = /[^\\d,.:]/gi;\nexport const INTEGER_TEST = /^[1-9][0-9]*$/;\nexport const DECIMAL_TEST = /^(0|[1-9][0-9]*)?(\\.[0-9]*)?$/;\nexport const MONEY_TEST = /^(0|[1-9][0-9]*)?(\\.[0-9]{0,2})?$/;\nexport const TIME_TEST = /^\\d{1,2}(:\\d{1,2})?$/;\n"],"mappings":"AAAA,OAAO,MAAMA,kBAAkB,GAAG,YAAY;AAC9C,OAAO,MAAMC,YAAY,GAAG,eAAe;AAC3C,OAAO,MAAMC,YAAY,GAAG,+BAA+B;AAC3D,OAAO,MAAMC,UAAU,GAAG,mCAAmC;AAC7D,OAAO,MAAMC,SAAS,GAAG,sBAAsB"}

package/lib/constants/signature.d.ts

@@ -0,0 +1 @@
+export declare const SIGNATURE_SERVER_URL = "https://webapi.tobit.com/AccountService/v1.0/General/PersonKeyValue/signature";

package/lib/constants/signature.js

@@ -0,0 +1,2 @@
+export const SIGNATURE_SERVER_URL = 'https://webapi.tobit.com/AccountService/v1.0/General/PersonKeyValue/signature';
+//# sourceMappingURL=signature.js.map

package/lib/constants/signature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature.js","names":["SIGNATURE_SERVER_URL"],"sources":["../../src/constants/signature.ts"],"sourcesContent":["export const SIGNATURE_SERVER_URL =\n    'https://webapi.tobit.com/AccountService/v1.0/General/PersonKeyValue/signature';\n"],"mappings":"AAAA,OAAO,MAAMA,oBAAoB,GAC7B,+EAA+E"}

package/lib/hooks/useElementSize.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useElementSize: (ref: MutableRefObject<HTMLDivElement | null>) => DOMRectReadOnly | undefined;

package/lib/hooks/useElementSize.js

@@ -0,0 +1,9 @@
+import useResizeObserver from '@react-hook/resize-observer';
+import { useLayoutEffect, useState } from 'react';
+export const useElementSize = ref => {
+  const [size, setSize] = useState();
+  useLayoutEffect(() => setSize(ref.current?.getBoundingClientRect()), [ref]);
+  useResizeObserver(ref, entry => setSize(entry.contentRect));
+  return size;
+};
+//# sourceMappingURL=useElementSize.js.map

package/lib/hooks/useElementSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementSize.js","names":["useResizeObserver","useLayoutEffect","useState","useElementSize","ref","size","setSize","current","getBoundingClientRect","entry","contentRect"],"sources":["../../src/hooks/useElementSize.ts"],"sourcesContent":["import useResizeObserver from '@react-hook/resize-observer';\nimport { MutableRefObject, useLayoutEffect, useState } from 'react';\n\nexport const useElementSize = (\n    ref: MutableRefObject<HTMLDivElement | null>,\n): DOMRectReadOnly | undefined => {\n    const [size, setSize] = useState<DOMRectReadOnly>();\n\n    useLayoutEffect(() => setSize(ref.current?.getBoundingClientRect()), [ref]);\n\n    useResizeObserver(ref, (entry) => setSize((entry as ResizeObserverEntry).contentRect));\n\n    return size;\n};\n"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,6BAA6B;AAC3D,SAA2BC,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AAEnE,OAAO,MAAMC,cAAc,GACvBC,GAA4C,IACd;EAC9B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGJ,QAAQ,CAAkB,CAAC;EAEnDD,eAAe,CAAC,MAAMK,OAAO,CAACF,GAAG,CAACG,OAAO,EAAEC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAACJ,GAAG,CAAC,CAAC;EAE3EJ,iBAAiB,CAACI,GAAG,EAAGK,KAAK,IAAKH,OAAO,CAAEG,KAAK,CAAyBC,WAAW,CAAC,CAAC;EAEtF,OAAOL,IAAI;AACf,CAAC"}

package/lib/hooks/uuid.js

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useUuid = void 0;
-var _react = require("react");
-var _uuid = require("uuid");
-const useUuid = () => {
-  const [uuid] = (0, _react.useState)((0, _uuid.v4)());
+import { useState } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+export const useUuid = () => {
+  const [uuid] = useState(uuidV4());
   return uuid;
 };
-exports.useUuid = useUuid;
 //# sourceMappingURL=uuid.js.map

package/lib/hooks/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","names":["useUuid","uuid","useState","uuidV4"],"sources":["../../src/hooks/uuid.ts"],"sourcesContent":["import { useState } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nexport const useUuid = () => {\n    const [uuid] = useState(uuidV4());\n\n    return uuid;\n};\n"],"mappings":";;;;;;AAAA;AACA;AAEO,MAAMA,OAAO,GAAG,MAAM;EACzB,MAAM,CAACC,IAAI,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAAC,QAAM,GAAE,CAAC;EAEjC,OAAOF,IAAI;AACf,CAAC;AAAC"}
+{"version":3,"file":"uuid.js","names":["useState","v4","uuidV4","useUuid","uuid"],"sources":["../../src/hooks/uuid.ts"],"sourcesContent":["import { useState } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nexport const useUuid = () => {\n    const [uuid] = useState(uuidV4());\n\n    return uuid;\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,OAAO,MAAMC,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM,CAACC,IAAI,CAAC,GAAGJ,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC;EAEjC,OAAOE,IAAI;AACf,CAAC"}