@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.2

package/components/releaseNotes/ReleaseNotes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReleaseNotes.js","sources":["../../../src/components/releaseNotes/ReleaseNotes.tsx"],"sourcesContent":["import type React from 'react';\nimport { isArray, map, toPairs } from 'es-toolkit/compat';\n\nexport type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];\n\nexport type NoteProps = {\n    version: string;\n    note: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nconst Note = (props: NoteProps) => {\n    const { note, version } = props;\n    const { date, content } = note;\n    return (\n        <div className='panel panel-default' key={`${version}-note`}>\n            <div className='panel-heading'>\n                <div className='display-flex justify-content-between'>\n                    <span className='text-size-16 text-medium'>{`${version}`}</span>\n                    <span className='text-thin'>{date}</span>\n                </div>\n            </div>\n            <div className='panel-body white-space-pre-line'>\n                {isArray(content) ? (\n                    <ul className='margin-bottom-0 margin-left-5 padding-left-25'>\n                        {map(content, (item: React.ReactNode) => (\n                            <li key={`${version}-note-${Math.random()}`}>{item}</li>\n                        ))}\n                    </ul>\n                ) : (\n                    <div>{content}</div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport type ReleaseNotesData = {\n    [key: string]: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nexport type ReleaseNotesProps = {\n    /**\n     * Translated release notes of the following shape:\n     *\n     * @example\n     *\n     * ```tsx\n     * {\n     *     \"0.1.2\": {\n     *         date: '23.07.2018',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Map view within the tour history table\n     *                 • Modern map design as used in the Beta of the fleet monitor\n     *                 • Works with all event types\n     *             </div>\n     *         ),\n     *     }\n     * }\n     * ```\n     */\n    releaseNotes: ReleaseNotesData;\n};\n\nconst ReleaseNotes = (props: ReleaseNotesProps) => {\n    const { releaseNotes, ...remainingProps } = props;\n    return (\n        <div {...remainingProps}>\n            {map(toPairs(releaseNotes), ([key, note]) => (\n                <Note key={key} note={note} version={key} />\n            ))}\n        </div>\n    );\n};\n\nexport default ReleaseNotes;\n"],"names":["Note","props","note","version","date","content","jsxs","jsx","isArray","map","item","ReleaseNotes","releaseNotes","remainingProps","toPairs","key"],"mappings":";;AAaA,MAAMA,IAAO,CAACC,MAAqB;AAC/B,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYF,GACpB,EAAE,MAAAG,GAAM,SAAAC,EAAA,IAAYH;AAC1B,SACI,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAU,iBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,GAAGJ,CAAO,IAAG;AAAA,MACzD,gBAAAI,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAK;AAAA,IAAA,EAAA,CACtC,EAAA,CACJ;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mCACV,UAAAC,EAAQH,CAAO,IACZ,gBAAAE,EAAC,MAAA,EAAG,WAAU,iDACT,UAAAE,EAAIJ,GAAS,CAACK,MACX,gBAAAH,EAAC,MAAA,EAA6C,UAAAG,EAAA,GAArC,GAAGP,CAAO,SAAS,KAAK,OAAA,CAAQ,EAAU,CACtD,EAAA,CACL,IAEA,gBAAAI,EAAC,OAAA,EAAK,aAAQ,EAAA,CAEtB;AAAA,EAAA,EAAA,GAjBsC,GAAGJ,CAAO,OAkBpD;AAER,GAiCMQ,IAAe,CAACV,MAA6B;AAC/C,QAAM,EAAE,cAAAW,GAAc,GAAGC,EAAA,IAAmBZ;AAC5C,SACI,gBAAAM,EAAC,SAAK,GAAGM,GACJ,YAAIC,EAAQF,CAAY,GAAG,CAAC,CAACG,GAAKb,CAAI,wBAClCF,GAAA,EAAe,MAAAE,GAAY,SAASa,EAAA,GAA1BA,CAA+B,CAC7C,GACL;AAER;"}

package/components/resizer/Resizer.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';
+import { MouseEvent, TouchEvent, PropsWithChildren } from 'react';
 declare const HORIZONTAL = "x";
 declare const VERTICAL = "y";
 declare const LEFT = "left";

package/components/resizer/Resizer.js

@@ -1,130 +1,104 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-const HORIZONTAL = 'x';
-const VERTICAL = 'y';
-const LEFT = 'left';
-const RIGHT = 'right';
-const TOP = 'top';
-const BOTTOM = 'bottom';
-const createListeners = (targetNode, onEnd, onMove) => {
-    if (!targetNode) {
-        return;
+import { jsx as N } from "react/jsx-runtime";
+import { useRef as m, useEffect as X } from "react";
+import Y from "classnames";
+import { noop as h } from "es-toolkit/function";
+const z = "x", D = "y", M = "left", O = "right", P = "top", S = "bottom", w = (i, s, n) => {
+  if (!i)
+    return;
+  const t = i.ownerDocument;
+  return t.addEventListener("mouseup", s), t.addEventListener("mousemove", n), t.addEventListener("touchend", s), t.addEventListener("touchmove", n), {
+    remove: () => {
+      t.removeEventListener("mouseup", s), t.removeEventListener("mousemove", n), t.removeEventListener("touchend", s), t.removeEventListener("touchmove", n);
     }
-    // The read-only ownerDocument property of the Node interface returns
-    // the top-level document object of the node.
-    const ownerDocument = targetNode.ownerDocument;
-    ownerDocument.addEventListener('mouseup', onEnd);
-    ownerDocument.addEventListener('mousemove', onMove);
-    ownerDocument.addEventListener('touchend', onEnd);
-    ownerDocument.addEventListener('touchmove', onMove);
-    return {
-        remove: () => {
-            ownerDocument.removeEventListener('mouseup', onEnd);
-            ownerDocument.removeEventListener('mousemove', onMove);
-            ownerDocument.removeEventListener('touchend', onEnd);
-            ownerDocument.removeEventListener('touchmove', onMove);
-        },
-    };
+  };
+}, o = (i) => {
+  const {
+    className: s = "",
+    direction: n = z,
+    position: t = O,
+    onResizeStart: E = h,
+    onResize: d = h,
+    onResizeEnd: x = h,
+    children: y,
+    ...I
+  } = i, u = m(null), l = m(null), f = m(!1), c = m({ x: 0, y: 0 });
+  X(() => () => {
+    R();
+  }, []);
+  const v = (e) => {
+    if (window.TouchEvent && e instanceof window.TouchEvent)
+      return e.touches[0].clientX;
+    if (e instanceof MouseEvent)
+      return e.clientX;
+    throw new Error("Unsupported event type");
+  }, T = (e) => {
+    if (window.TouchEvent && e instanceof window.TouchEvent)
+      return e.touches[0].clientY;
+    if (e instanceof MouseEvent)
+      return e.clientY;
+    throw new Error("Unsupported event type");
+  }, g = (e) => {
+    f.current = !0;
+    const r = e.nativeEvent, { clientX: a, clientY: H } = r;
+    c.current = {
+      x: a,
+      y: H
+    }, E(e), u.current = w(l.current, L, p);
+  }, A = (e) => {
+    f.current = !0;
+    const a = e.nativeEvent.touches[0];
+    c.current = {
+      x: a.clientX,
+      y: a.clientY
+    }, E(e), u.current = w(l.current, L, p);
+  }, p = (e) => {
+    if (f.current) {
+      if (n === o.HORIZONTAL) {
+        const r = c.current.x - v(e);
+        r !== 0 && d(r);
+      }
+      if (n === o.VERTICAL) {
+        const r = c.current.y - T(e);
+        r !== 0 && d(r);
+      }
+      c.current = {
+        x: v(e),
+        y: T(e)
+      };
+    }
+  }, L = (e) => {
+    f.current = !1, x(e), R();
+  }, R = () => {
+    u.current && u.current.remove();
+  }, C = Y(
+    "Resizer",
+    n === "x" && "resize-horizontal",
+    n === "y" && "resize-vertical",
+    t === "left" && "resize-left",
+    t === "right" && "resize-right",
+    t === "top" && "resize-top",
+    t === "bottom" && "resize-bottom",
+    s && s
+  );
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      ref: l,
+      className: C,
+      onMouseDown: g,
+      onTouchStart: A,
+      ...I,
+      children: y
+    }
+  );
 };
-const Resizer = (props) => {
-    const { className = '', direction = HORIZONTAL, position = RIGHT, onResizeStart = noop, onResize = noop, onResizeEnd = noop, children, ...remainingProps } = props;
-    const eventsRef = useRef(null);
-    // Use refs here instead of local state as the move event listener fired before the state is set
-    // and then it would work with outdated state at that time.
-    const elementRef = useRef(null);
-    const isDragRef = useRef(false);
-    const startPositionRef = useRef({ x: 0, y: 0 });
-    useEffect(() => {
-        return () => {
-            removeListeners();
-        };
-    }, []);
-    const getClientX = (event) => {
-        // Note: some browsers don't provide the global "TouchEvent" constructor!
-        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
-            return event.touches[0].clientX;
-        }
-        if (event instanceof MouseEvent) {
-            return event.clientX;
-        }
-        throw new Error('Unsupported event type');
-    };
-    const getClientY = (event) => {
-        // Note: some browsers don't provide the global "TouchEvent" constructor!
-        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
-            return event.touches[0].clientY;
-        }
-        if (event instanceof MouseEvent) {
-            return event.clientY;
-        }
-        throw new Error('Unsupported event type');
-    };
-    const handleMouseStart = (event) => {
-        isDragRef.current = true;
-        // Use the native event to check for the event type. Otherwise the type check
-        // fails and the start position would be { x: 0, y: 0 }.
-        const mouseEvent = event.nativeEvent;
-        const { clientX, clientY } = mouseEvent;
-        startPositionRef.current = {
-            x: clientX,
-            y: clientY,
-        };
-        onResizeStart(event);
-        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);
-    };
-    const handleTouchStart = (event) => {
-        isDragRef.current = true;
-        // Use the native event to check for the event type. Otherwise the type check
-        // fails and the start position would be { x: 0, y: 0 }.
-        const touchEvent = event.nativeEvent;
-        const firstTouch = touchEvent.touches[0];
-        startPositionRef.current = {
-            x: firstTouch.clientX,
-            y: firstTouch.clientY,
-        };
-        onResizeStart(event);
-        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);
-    };
-    const handleMove = (event) => {
-        if (!isDragRef.current) {
-            return;
-        }
-        if (direction === Resizer.HORIZONTAL) {
-            const diff = startPositionRef.current.x - getClientX(event);
-            if (diff !== 0) {
-                onResize(diff);
-            }
-        }
-        if (direction === Resizer.VERTICAL) {
-            const diff = startPositionRef.current.y - getClientY(event);
-            if (diff !== 0) {
-                onResize(diff);
-            }
-        }
-        startPositionRef.current = {
-            x: getClientX(event),
-            y: getClientY(event),
-        };
-    };
-    const handleEnd = (event) => {
-        isDragRef.current = false;
-        onResizeEnd(event);
-        removeListeners();
-    };
-    const removeListeners = () => {
-        if (eventsRef.current) {
-            eventsRef.current.remove();
-        }
-    };
-    const wrapperClasses = classNames('Resizer', direction === 'x' && 'resize-horizontal', direction === 'y' && 'resize-vertical', position === 'left' && 'resize-left', position === 'right' && 'resize-right', position === 'top' && 'resize-top', position === 'bottom' && 'resize-bottom', className && className);
-    return (_jsx("div", { ref: elementRef, className: wrapperClasses, onMouseDown: handleMouseStart, onTouchStart: handleTouchStart, ...remainingProps, children: children }));
+o.HORIZONTAL = z;
+o.VERTICAL = D;
+o.LEFT = M;
+o.RIGHT = O;
+o.TOP = P;
+o.BOTTOM = S;
+export {
+  o as default
 };
-Resizer.HORIZONTAL = HORIZONTAL;
-Resizer.VERTICAL = VERTICAL;
-Resizer.LEFT = LEFT;
-Resizer.RIGHT = RIGHT;
-Resizer.TOP = TOP;
-Resizer.BOTTOM = BOTTOM;
-export default Resizer;
+//# sourceMappingURL=Resizer.js.map

package/components/resizer/Resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.js","sources":["../../../src/components/resizer/Resizer.tsx"],"sourcesContent":["import React, { useEffect, useRef, type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nconst HORIZONTAL = 'x';\nconst VERTICAL = 'y';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst TOP = 'top';\nconst BOTTOM = 'bottom';\n\nexport type ResizerProps = {\n    /**\n     * Defines where the resize handle is positioned relative to the element to resize.\n     *\n     * Possible values are:\n     * `Resizer.LEFT`, `Resizer.RIGHT`, `Resizer.TOP`, `Resizer.BOTTOM` or\n     * `left`, `right`, `top`, `bottom`.\n     */\n    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;\n\n    /**\n     * Defines on which axis to resize.\n     *\n     * Possible values are:\n     * `Resizer.HORIZONTAL`, `Resizer.VERTICAL` or `x`, `y`.\n     */\n    direction?: typeof HORIZONTAL | typeof VERTICAL;\n\n    /**\n     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.\n     * @param event\n     * @returns\n     */\n    onResizeStart?: (event: MouseEvent | TouchEvent) => void;\n\n    /**\n     * Callback when the resize handle is moved. The function returns the distant between the last\n     * position and the mouse movement. Means you can either subtract or add this diff to the elements\n     * width you want to change.\n     * @param diff\n     * @returns\n     */\n    onResize?: (diff: number) => void;\n\n    /**\n     * Callback when the resize ends, means when the handle is released. It returns the respective event.\n     * @param event\n     * @returns\n     */\n    onResizeEnd?: (event: Event) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype Position = {\n    x: number;\n    y: number;\n};\n\nconst createListeners = (\n    targetNode: HTMLDivElement | null,\n    onEnd: (event: Event) => void,\n    onMove: (event: Event) => void\n) => {\n    if (!targetNode) {\n        return;\n    }\n\n    // The read-only ownerDocument property of the Node interface returns\n    // the top-level document object of the node.\n    const ownerDocument = targetNode.ownerDocument;\n\n    ownerDocument.addEventListener('mouseup', onEnd);\n    ownerDocument.addEventListener('mousemove', onMove);\n    ownerDocument.addEventListener('touchend', onEnd);\n    ownerDocument.addEventListener('touchmove', onMove);\n    return {\n        remove: () => {\n            ownerDocument.removeEventListener('mouseup', onEnd);\n            ownerDocument.removeEventListener('mousemove', onMove);\n            ownerDocument.removeEventListener('touchend', onEnd);\n            ownerDocument.removeEventListener('touchmove', onMove);\n        },\n    };\n};\n\nconst Resizer = (props: PropsWithChildren<ResizerProps>) => {\n    const {\n        className = '',\n        direction = HORIZONTAL,\n        position = RIGHT,\n        onResizeStart = noop,\n        onResize = noop,\n        onResizeEnd = noop,\n        children,\n        ...remainingProps\n    } = props;\n\n    const eventsRef = useRef<{ remove: () => void } | undefined | null>(null);\n\n    // Use refs here instead of local state as the move event listener fired before the state is set\n    // and then it would work with outdated state at that time.\n    const elementRef = useRef<HTMLDivElement>(null);\n    const isDragRef = useRef<boolean>(false);\n    const startPositionRef = useRef<Position>({ x: 0, y: 0 });\n\n    useEffect(() => {\n        return () => {\n            removeListeners();\n        };\n    }, []);\n\n    const getClientX = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientX;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientX;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const getClientY = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientY;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientY;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const handleMouseStart = (event: React.MouseEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const mouseEvent = event.nativeEvent;\n        const { clientX, clientY } = mouseEvent;\n        startPositionRef.current = {\n            x: clientX,\n            y: clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const touchEvent = event.nativeEvent;\n        const firstTouch = touchEvent.touches[0];\n        startPositionRef.current = {\n            x: firstTouch.clientX,\n            y: firstTouch.clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleMove = (event: Event) => {\n        if (!isDragRef.current) {\n            return;\n        }\n\n        if (direction === Resizer.HORIZONTAL) {\n            const diff = startPositionRef.current.x - getClientX(event);\n\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        if (direction === Resizer.VERTICAL) {\n            const diff = startPositionRef.current.y - getClientY(event);\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        startPositionRef.current = {\n            x: getClientX(event),\n            y: getClientY(event),\n        };\n    };\n\n    const handleEnd = (event: Event) => {\n        isDragRef.current = false;\n        onResizeEnd(event);\n        removeListeners();\n    };\n\n    const removeListeners = () => {\n        if (eventsRef.current) {\n            eventsRef.current.remove();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'Resizer',\n        direction === 'x' && 'resize-horizontal',\n        direction === 'y' && 'resize-vertical',\n        position === 'left' && 'resize-left',\n        position === 'right' && 'resize-right',\n        position === 'top' && 'resize-top',\n        position === 'bottom' && 'resize-bottom',\n        className && className\n    );\n\n    return (\n        <div\n            ref={elementRef}\n            className={wrapperClasses}\n            onMouseDown={handleMouseStart}\n            onTouchStart={handleTouchStart}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nResizer.HORIZONTAL = HORIZONTAL as typeof HORIZONTAL;\nResizer.VERTICAL = VERTICAL as typeof VERTICAL;\n\nResizer.LEFT = LEFT as typeof LEFT;\nResizer.RIGHT = RIGHT as typeof RIGHT;\nResizer.TOP = TOP as typeof TOP;\nResizer.BOTTOM = BOTTOM as typeof BOTTOM;\n\nexport default Resizer;\n"],"names":["HORIZONTAL","VERTICAL","LEFT","RIGHT","TOP","BOTTOM","createListeners","targetNode","onEnd","onMove","ownerDocument","Resizer","props","className","direction","position","onResizeStart","noop","onResize","onResizeEnd","children","remainingProps","eventsRef","useRef","elementRef","isDragRef","startPositionRef","useEffect","removeListeners","getClientX","event","getClientY","handleMouseStart","mouseEvent","clientX","clientY","handleEnd","handleMove","handleTouchStart","firstTouch","diff","wrapperClasses","classNames","jsx"],"mappings":"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"}

package/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactHTML } from 'react';
+import { ReactHTML } from 'react';
 export type ResponsiveColumnStripeProps = {
     /**
      * The minimum width in pixel of a single column.
@@ -75,7 +75,7 @@ export type ResponsiveColumnStripeProps = {
      */
     className?: string;
 };
-declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const ResponsiveColumnStripe: import('react').ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export default ResponsiveColumnStripe;

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,136 +1,134 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, useEffect, useRef, useState, } from 'react';
-import classNames from 'classnames';
-import findIndex from 'lodash/fp/findIndex';
-import chunk from 'lodash/fp/chunk';
-import { AnimatePresence, motion } from 'framer-motion';
-import noop from 'lodash/noop';
-import useAfterMount from '../../hooks/useAfterMount';
-import useElementSize from '../../hooks/useElementSize';
-import usePrevious from '../../hooks/usePrevious';
-const MIN_WITH_THRESHOLD = 10;
-const DEFAULT_TRANSITION = { duration: 0.2 };
-const ANIMATION_NEXT = 'page';
-const ANIMATION_BACK = 'pageBack';
-const COLUMN_ITEM_CLASSNAME = 'ColumnItem';
-const variants = {
-    pageEnter: pageDirection => ({
-        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-        opacity: 0,
-    }),
-    pageCenter: () => ({ x: 0, opacity: 1 }),
-};
-const getFirstColumnItem = (node) => {
-    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {
-        return node;
-    }
-    return getFirstColumnItem(node.children[0]);
-};
-const ResponsiveColumnStripe = forwardRef((props, ref) => {
-    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop, onNextClick = noop, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children, ...remainingProps } = props;
-    const [currentPage, setCurrentPage] = useState(activePage);
-    const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);
-    const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);
-    const [isResizePage, setIsResizePage] = useState(false);
-    // The base for reacting on changing width of the wrapping element.
-    // It uses a ResizeObserver under the hood.
-    const columnWrapperRef = useRef(null);
-    const [columnWrapperWidth] = useElementSize(columnWrapperRef);
-    const previousPage = usePrevious(currentPage);
-    const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
-    useAfterMount(() => {
-        setEnableInitialAnimation(true);
+import { jsx as o, jsxs as S } from "react/jsx-runtime";
+import { forwardRef as re, useState as c, useRef as ie, useEffect as le, Children as ce, cloneElement as me } from "react";
+import m from "classnames";
+import { noop as M, chunk as W, findIndex as ue } from "es-toolkit/compat";
+import { AnimatePresence as pe, motion as de } from "motion/react";
+import ge from "../../hooks/useAfterMount.js";
+import fe from "../../hooks/useElementSize.js";
+import Ce from "../../hooks/usePrevious.js";
+const Ne = 10, he = { duration: 0.2 }, L = "page", ve = "pageBack", _ = "ColumnItem", Pe = {
+  pageEnter: (n) => ({
+    x: n === L ? "60%" : "-60%",
+    opacity: 0
+  }),
+  pageCenter: () => ({ x: 0, opacity: 1 })
+}, O = (n) => [...n.classList].includes(_) ? n : O(n.children[0]), Ee = re(
+  (n, z) => {
+    const {
+      minColumnWith: h = 300,
+      minColumns: v = 1,
+      maxColumns: P = 5,
+      stretchLastItems: F = !0,
+      activePage: a = 0,
+      asType: D = "div",
+      onPreviousClick: H = M,
+      onNextClick: $ = M,
+      buttonClassName: xe = "",
+      columnsWrapperClassName: j = "",
+      className: U = "",
+      disableAnimation: x = !1,
+      children: r,
+      ...V
+    } = n, [s, u] = c(a), [t, y] = c(P), [K, X] = c(!1), [A, d] = c(!1), i = ie(null), [I] = fe(i), q = Ce(s), k = s > q ? L : ve;
+    ge(() => {
+      X(!0);
     });
-    // Update active page from outside to be used as controlled component
-    const [previousActivePage, setPreviousActivePage] = useState(activePage);
-    if (Number.isFinite(activePage) && activePage !== previousActivePage) {
-        setCurrentPage(activePage);
-        setPreviousActivePage(activePage);
-    }
-    const updatePageOnColumnsSizeChange = (firstItem, perPage) => {
-        // Split children in page chunks
-        const pages = chunk(perPage)(children);
-        // find the currently rendered first item inside the chunks.
-        // The found chunk index is the new page to render.
-        // example of chunks => [['a', 'b', 'c'], ['d']]
-        const targetPage = findIndex((page) => page.some(pageItem => pageItem.key === firstItem.dataset['key']))(pages);
-        if (targetPage !== currentPage) {
-            setCurrentPage(targetPage);
-        }
+    const [G, J] = c(a);
+    Number.isFinite(a) && a !== G && (u(a), J(a));
+    const T = (e, g) => {
+      const f = W(r, g), p = ue(
+        f,
+        (C) => C.some((N) => N.key === e.dataset.key)
+      );
+      p !== s && u(p);
     };
-    // When the container size changes, adapt the amount of columns to be rendered according
-    // to the given min width of a single item. The new amount of columns also has to respect
-    // the lower and upper limit. When updating the amount, the current page hse to be updated as well.
-    useEffect(() => {
-        if (!columnWrapperRef.current) {
-            return;
-        }
-        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
-        if (!firstItem) {
-            return;
-        }
-        // Get the width of the first column to calculate how many columns fit in one page
-        // according to the given minWidth per column
-        const columnWidth = firstItem.getBoundingClientRect().width;
-        // Limit columns per page for given min and max values
-        const allowForLessColumns = columnsPerPage - 1 >= minColumns;
-        const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;
-        // The threshold is required to avoid jumping between bigger and smaller after the columns per page
-        // has changed, and it continues to resize
-        const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
-        const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
-        // During resizing, we don't want any animation
-        setIsResizePage(true);
-        if (goBigger) {
-            const newValue = columnsPerPage + 1;
-            setColumnsPerPage(newValue);
-            updatePageOnColumnsSizeChange(firstItem, newValue);
-            return;
-        }
-        if (goSmaller) {
-            const newValue = columnsPerPage - 1;
-            setColumnsPerPage(newValue);
-            updatePageOnColumnsSizeChange(firstItem, newValue);
-            return;
-        }
-    }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
-    const handlePrevClick = () => {
-        setIsResizePage(false);
-        const pageNumber = currentPage - 1;
-        setCurrentPage(pageNumber);
-        onPreviousClick(pageNumber, columnsPerPage);
+    le(() => {
+      if (!i.current)
+        return;
+      const e = O(i.current.children[0]);
+      if (!e)
+        return;
+      const g = e.getBoundingClientRect().width, f = t - 1 >= v, p = t + 1 <= P, C = f && g + Ne <= h, N = p && (t + 1) * h <= I;
+      if (d(!0), N) {
+        const l = t + 1;
+        y(l), T(e, l);
+        return;
+      }
+      if (C) {
+        const l = t - 1;
+        y(l), T(e, l);
+        return;
+      }
+    }, [I, i.current, r, t]);
+    const Q = () => {
+      d(!1);
+      const e = s - 1;
+      u(e), H(e, t);
+    }, Y = () => {
+      d(!1);
+      const e = s + 1;
+      u(e), $(e, t);
     };
-    const handleNextClick = () => {
-        setIsResizePage(false);
-        const pageNumber = currentPage + 1;
-        setCurrentPage(pageNumber);
-        onNextClick(pageNumber, columnsPerPage);
-    };
-    if (!children) {
-        return null;
-    }
-    // Split the children/columns in chunks according to the current columns per page size
-    // and get the current page chunk for rendering
-    const columnsToDisplay = chunk(columnsPerPage)(children)[currentPage];
-    const showPageButtons = minColumns < children.length;
-    const disablePreviousPage = currentPage === 0;
-    const disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
-    const wrapperClassName = classNames('ResponsiveColumnStripe', 'display-flex align-items-center', 'overflow-hidden', className);
-    const baseButtonClassName = classNames('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12');
-    const disabledButtonClassName = 'pointer-events-none opacity-30';
-    const previousButtonClassName = classNames('PreviousButton', baseButtonClassName, disablePreviousPage && disabledButtonClassName);
-    const nextButtonClassName = classNames('NextButton', baseButtonClassName, disableNextPage && disabledButtonClassName);
-    const mergedColumnsWrapperClassName = classNames('ColumnWrapper', 'flex-1-1', 'display-flex', columnsWrapperClassName);
-    const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
-    // Use the given custom component type "div" or any other. Clone the children to inject certain
-    // properties that are required to stretch the items and deal with their size.
-    const columns = (_jsx(ComponentType, { className: mergedColumnsWrapperClassName, children: Children.map(columnsToDisplay, column => cloneElement(column, {
-            className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,
-            // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
-            'data-key': column.key,
-        })) }));
-    return (_jsxs("div", { ...remainingProps, ref: ref, className: wrapperClassName, children: [showPageButtons && (_jsx("div", { className: previousButtonClassName, onClick: handlePrevClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsxs("div", { className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef, children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
-                    // @ts-ignore-next-line
-                    _jsx(AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION, children: columns }, currentPage) }))] }), showPageButtons && (_jsx("div", { className: nextButtonClassName, onClick: handleNextClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] }));
-});
-export default ResponsiveColumnStripe;
+    if (!r)
+      return null;
+    const Z = W(r, t)[s], b = v < r.length, ee = s === 0, w = s === Math.ceil(r.length / t) - 1, te = m(
+      "ResponsiveColumnStripe",
+      "display-flex align-items-center",
+      "overflow-hidden",
+      U
+    ), B = m(
+      "align-items-center",
+      "align-self-stretch",
+      "display-flex",
+      "hover-scale-105",
+      "hover-text-color-darkest",
+      "padding-10",
+      "cursor-pointer",
+      "text-color-darker",
+      "text-size-12"
+    ), E = "pointer-events-none opacity-30", se = m(
+      "PreviousButton",
+      B,
+      ee && E
+    ), ne = m(
+      "NextButton",
+      B,
+      w && E
+    ), oe = m(
+      "ColumnWrapper",
+      "flex-1-1",
+      "display-flex",
+      j
+    ), ae = w && !F ? "flex-0-1" : "flex-1-1", R = /* @__PURE__ */ o(D, { className: oe, children: ce.map(
+      Z,
+      (e) => me(e, {
+        className: `${_} ${ae} ${e.props?.className || ""}`,
+        // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
+        "data-key": e.key
+      })
+    ) });
+    return /* @__PURE__ */ S("div", { ...V, ref: z, className: te, children: [
+      b && /* @__PURE__ */ o("div", { className: se, onClick: Q, children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-chevron-left" }) }),
+      /* @__PURE__ */ S("div", { className: "ColumnsArea flex-1-1 overflow-hidden", ref: i, children: [
+        x || A ? R : null,
+        !x && !A && /* @__PURE__ */ o(pe, { mode: "wait", custom: k, children: /* @__PURE__ */ o(
+          de.div,
+          {
+            variants: Pe,
+            initial: K ? "pageEnter" : !1,
+            animate: "pageCenter",
+            custom: k,
+            transition: he,
+            children: R
+          },
+          s
+        ) })
+      ] }),
+      b && /* @__PURE__ */ o("div", { className: ne, onClick: Y, children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-chevron-right" }) })
+    ] });
+  }
+);
+export {
+  Ee as default
+};
+//# sourceMappingURL=ResponsiveColumnStripe.js.map

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveColumnStripe.js","sources":["../../../src/components/responsiveColumnStripe/ResponsiveColumnStripe.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    forwardRef,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactHTML,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { chunk, findIndex, noop } from 'es-toolkit/compat';\nimport { AnimatePresence, motion, type Variants } from 'motion/react';\n\nimport useAfterMount from '../../hooks/useAfterMount';\nimport useElementSize from '../../hooks/useElementSize';\nimport usePrevious from '../../hooks/usePrevious';\n\nconst MIN_WITH_THRESHOLD = 10;\n\nconst DEFAULT_TRANSITION = { duration: 0.2 };\n\nconst ANIMATION_NEXT = 'page';\nconst ANIMATION_BACK = 'pageBack';\n\nconst COLUMN_ITEM_CLASSNAME = 'ColumnItem';\n\nconst variants: Variants = {\n    pageEnter: pageDirection => ({\n        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',\n        opacity: 0,\n    }),\n    pageCenter: () => ({ x: 0, opacity: 1 }),\n};\n\nconst getFirstColumnItem = (node: Element): HTMLElement => {\n    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {\n        return node as HTMLElement;\n    }\n    return getFirstColumnItem(node.children[0] as HTMLElement);\n};\n\nexport type ResponsiveColumnStripeProps = {\n    /**\n     * The minimum width in pixel of a single column.\n     *\n     * This value determines how many columns are shown per page depending on the parent width.\n     *\n     * @default 300\n     */\n    minColumnWith?: number;\n\n    /**\n     * The minimum amount of columns that should be shown per page.\n     *\n     * @default 1\n     */\n    minColumns?: number;\n\n    /**\n     * The maximum amount of columns that should be shown per page.\n     *\n     * @default 5\n     */\n    maxColumns?: number;\n\n    /**\n     * Defines whether the items on the last page are stretched out to fill the space.\n     *\n     * @default false\n     */\n    stretchLastItems?: boolean;\n\n    /**\n     * The page that shall be shown.\n     *\n     * This can be used to control the pages from outside.\n     *\n     * @default 0\n     */\n    activePage?: number;\n\n    /**\n     * The DOM element type of the wrapping column element.\n     *\n     * If you need a list, this might be set to \"ul\".\n     *\n     * @default 'div'\n     */\n    asType?: keyof ReactHTML;\n\n    /**\n     * Set to true to skip animating pages.\n     *\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Callback function for when the previous page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Callback function for when the next page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Additional classes set to the navigation buttons.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional classes set to the component wrapper element.\n     */\n    columnsWrapperClassName?: string;\n\n    /**\n     * Additional classes set to the column wrapper element.\n     */\n    className?: string;\n};\n\nconst ResponsiveColumnStripe = forwardRef<HTMLDivElement, PropsWithChildren<ResponsiveColumnStripeProps>>(\n    (props, ref) => {\n        const {\n            minColumnWith = 300,\n            minColumns = 1,\n            maxColumns = 5,\n            stretchLastItems = true,\n            activePage = 0,\n            asType: ComponentType = 'div',\n            onPreviousClick = noop,\n            onNextClick = noop,\n            buttonClassName = '',\n            columnsWrapperClassName = '',\n            className = '',\n            disableAnimation = false,\n            children,\n            ...remainingProps\n        } = props;\n\n        const [currentPage, setCurrentPage] = useState(activePage);\n        const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);\n        const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);\n\n        const [isResizePage, setIsResizePage] = useState(false);\n\n        // The base for reacting on changing width of the wrapping element.\n        // It uses a ResizeObserver under the hood.\n        const columnWrapperRef = useRef<HTMLDivElement>(null);\n        const [columnWrapperWidth] = useElementSize(columnWrapperRef);\n\n        const previousPage = usePrevious(currentPage);\n        const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;\n\n        useAfterMount(() => {\n            setEnableInitialAnimation(true);\n        });\n\n        // Update active page from outside to be used as controlled component\n        const [previousActivePage, setPreviousActivePage] = useState(activePage);\n        if (Number.isFinite(activePage) && activePage !== previousActivePage) {\n            setCurrentPage(activePage);\n            setPreviousActivePage(activePage);\n        }\n\n        const updatePageOnColumnsSizeChange = (firstItem: HTMLElement, perPage: number) => {\n            // Split children in page chunks\n            const pages = chunk(children as ReactElement[], perPage);\n\n            // find the currently rendered first item inside the chunks.\n            // The found chunk index is the new page to render.\n            // example of chunks => [['a', 'b', 'c'], ['d']]\n            const targetPage = findIndex(pages, (page: ReactElement[]) =>\n                page.some(pageItem => pageItem.key === firstItem.dataset['key'])\n            );\n\n            if (targetPage !== currentPage) {\n                setCurrentPage(targetPage);\n            }\n        };\n\n        // When the container size changes, adapt the amount of columns to be rendered according\n        // to the given min width of a single item. The new amount of columns also has to respect\n        // the lower and upper limit. When updating the amount, the current page hse to be updated as well.\n        useEffect(() => {\n            if (!columnWrapperRef.current) {\n                return;\n            }\n\n            const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);\n            if (!firstItem) {\n                return;\n            }\n\n            // Get the width of the first column to calculate how many columns fit in one page\n            // according to the given minWidth per column\n            const columnWidth = firstItem.getBoundingClientRect().width;\n\n            // Limit columns per page for given min and max values\n            const allowForLessColumns = columnsPerPage - 1 >= minColumns;\n            const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;\n\n            // The threshold is required to avoid jumping between bigger and smaller after the columns per page\n            // has changed, and it continues to resize\n            const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;\n            const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth!;\n\n            // During resizing, we don't want any animation\n            setIsResizePage(true);\n\n            if (goBigger) {\n                const newValue = columnsPerPage + 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n\n            if (goSmaller) {\n                const newValue = columnsPerPage - 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n        }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);\n\n        const handlePrevClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage - 1;\n            setCurrentPage(pageNumber);\n            onPreviousClick(pageNumber, columnsPerPage);\n        };\n\n        const handleNextClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage + 1;\n            setCurrentPage(pageNumber);\n            onNextClick(pageNumber, columnsPerPage);\n        };\n\n        if (!children) {\n            return null;\n        }\n\n        // Split the children/columns in chunks according to the current columns per page size\n        // and get the current page chunk for rendering\n        const columnsToDisplay = chunk(children as ReactElement[], columnsPerPage)[currentPage];\n\n        const showPageButtons = minColumns < (children as ReactElement[]).length;\n\n        const disablePreviousPage = currentPage === 0;\n        const disableNextPage = currentPage === Math.ceil((children as ReactElement[]).length / columnsPerPage) - 1;\n\n        const wrapperClassName = classNames(\n            'ResponsiveColumnStripe',\n            'display-flex align-items-center',\n            'overflow-hidden',\n            className\n        );\n\n        const baseButtonClassName = classNames(\n            'align-items-center',\n            'align-self-stretch',\n            'display-flex',\n            'hover-scale-105',\n            'hover-text-color-darkest',\n            'padding-10',\n            'cursor-pointer',\n            'text-color-darker',\n            'text-size-12'\n        );\n\n        const disabledButtonClassName = 'pointer-events-none opacity-30';\n\n        const previousButtonClassName = classNames(\n            'PreviousButton',\n            baseButtonClassName,\n            disablePreviousPage && disabledButtonClassName\n        );\n\n        const nextButtonClassName = classNames(\n            'NextButton',\n            baseButtonClassName,\n            disableNextPage && disabledButtonClassName\n        );\n\n        const mergedColumnsWrapperClassName = classNames(\n            'ColumnWrapper',\n            'flex-1-1',\n            'display-flex',\n            columnsWrapperClassName\n        );\n\n        const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';\n\n        // Use the given custom component type \"div\" or any other. Clone the children to inject certain\n        // properties that are required to stretch the items and deal with their size.\n        const columns = (\n            <ComponentType className={mergedColumnsWrapperClassName}>\n                {Children.map(columnsToDisplay, column =>\n                    cloneElement(column, {\n                        className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,\n                        // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },\n                        'data-key': column.key,\n                    })\n                )}\n            </ComponentType>\n        );\n\n        return (\n            <div {...remainingProps} ref={ref} className={wrapperClassName}>\n                {showPageButtons && (\n                    <div className={previousButtonClassName} onClick={handlePrevClick}>\n                        <span className='rioglyph rioglyph-chevron-left' />\n                    </div>\n                )}\n                <div className='ColumnsArea flex-1-1 overflow-hidden' ref={columnWrapperRef}>\n                    {disableAnimation || isResizePage ? columns : null}\n                    {!disableAnimation && !isResizePage && (\n                        <AnimatePresence mode='wait' custom={animationDirection}>\n                            <motion.div\n                                key={currentPage}\n                                variants={variants}\n                                initial={enableInitialAnimation ? 'pageEnter' : false}\n                                animate='pageCenter'\n                                custom={animationDirection}\n                                transition={DEFAULT_TRANSITION}\n                            >\n                                {columns}\n                            </motion.div>\n                        </AnimatePresence>\n                    )}\n                </div>\n                {showPageButtons && (\n                    <div className={nextButtonClassName} onClick={handleNextClick}>\n                        <span className='rioglyph rioglyph-chevron-right' />\n                    </div>\n                )}\n            </div>\n        );\n    }\n);\n\nexport default ResponsiveColumnStripe;\n"],"names":["MIN_WITH_THRESHOLD","DEFAULT_TRANSITION","ANIMATION_NEXT","ANIMATION_BACK","COLUMN_ITEM_CLASSNAME","variants","pageDirection","getFirstColumnItem","node","ResponsiveColumnStripe","forwardRef","props","ref","minColumnWith","minColumns","maxColumns","stretchLastItems","activePage","ComponentType","onPreviousClick","noop","onNextClick","buttonClassName","columnsWrapperClassName","className","disableAnimation","children","remainingProps","currentPage","setCurrentPage","useState","columnsPerPage","setColumnsPerPage","enableInitialAnimation","setEnableInitialAnimation","isResizePage","setIsResizePage","columnWrapperRef","useRef","columnWrapperWidth","useElementSize","previousPage","usePrevious","animationDirection","useAfterMount","previousActivePage","setPreviousActivePage","updatePageOnColumnsSizeChange","firstItem","perPage","pages","chunk","targetPage","findIndex","page","pageItem","useEffect","columnWidth","allowForLessColumns","allowForMoreColumns","goSmaller","goBigger","newValue","handlePrevClick","pageNumber","handleNextClick","columnsToDisplay","showPageButtons","disablePreviousPage","disableNextPage","wrapperClassName","classNames","baseButtonClassName","disabledButtonClassName","previousButtonClassName","nextButtonClassName","mergedColumnsWrapperClassName","columnClassName","columns","jsx","Children","column","cloneElement","jsxs","AnimatePresence","motion"],"mappings":"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"}