@veeqo/ui 12.4.0-beta-9 → 12.5.0

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs

@@ -4,7 +4,7 @@ var React = require('react');
 var reactUse = require('react-use');
 var utils = require('../utils.cjs');
 
-const useSetScrollPosition = (containerRef, children) => {
+const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, onFetchMoreViews, isLoadingMoreViews = false, }) => {
     var _a;
     const [leftDisabled, setLeftDisabled] = React.useState(true);
     const [rightDisabled, setRightDisabled] = React.useState(false);
@@ -31,11 +31,16 @@ const useSetScrollPosition = (containerRef, children) => {
                 (_h = document.getElementById('left-arrow')) === null || _h === undefined ? undefined : _h.focus();
             }
             setRightDisabled(true);
+            // Check if we've reached the end and should fetch more data
+            // Only fetches more when not already loading more views and has more views to load
+            if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {
+                onFetchMoreViews();
+            }
         }
         else {
             setRightDisabled(false);
         }
-    }, [containerRef]);
+    }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);
     const handleResize = React.useCallback(() => {
         if (!containerRef.current)
             return;
@@ -62,58 +67,81 @@ const useSetScrollPosition = (containerRef, children) => {
             behavior: 'smooth',
         });
     }, [containerRef, viewStartPositions]);
+    // Initialize view positions when container first has children
+    React.useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length) || viewStartPositions.length > 0)
+            return;
+        setViewStartPositions(utils.createViewPositionArray(containerRef.current));
+    }, [containerRef, viewStartPositions.length]);
+    // Handle new item addition - scroll to end and update positions
+    React.useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        const childrenCount = containerRef.current.children.length;
+        const positionsCount = viewStartPositions.length;
+        const totalChildren = React.Children.count(children);
+        const shouldScrollToNewItem = childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;
+        if (!shouldScrollToNewItem)
+            return;
+        containerRef.current.scrollTo({
+            left: containerRef.current.scrollWidth - containerRef.current.clientWidth,
+            top: 0,
+            behavior: 'smooth',
+        });
+        // Compute the x position of the new item
+        const lastChildRect = (_c = containerRef.current.children[positionsCount - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect();
+        const newPosition = viewStartPositions[positionsCount - 1] + ((_d = lastChildRect === null || lastChildRect === undefined ? undefined : lastChildRect.x) !== null && _d !== undefined ? _d : 0) - 20;
+        setViewStartPositions([...viewStartPositions, newPosition]);
+    }, [containerRef, children, viewStartPositions]);
+    // Handle active tab changes - scroll to active tab
+    React.useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        if (activeTab === prevActiveTab || activeTab === null)
+            return;
+        if (containerRef.current.children.length !== viewStartPositions.length)
+            return;
+        const index = Array.from(containerRef.current.children).indexOf(activeTab);
+        if (index === -1)
+            return;
+        containerRef.current.scrollTo({
+            left: viewStartPositions[index],
+            top: 0,
+            behavior: 'smooth',
+        });
+    }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);
+    // Handle fetching more views - recompute positions
+    React.useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        if (viewStartPositions.length >= containerRef.current.children.length)
+            return;
+        const currentScrollLeft = containerRef.current.scrollLeft;
+        // Temporarily reset scroll to 0 to get accurate positions
+        containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });
+        // Recompute positions from scroll position 0
+        setViewStartPositions(utils.createViewPositionArray(containerRef.current));
+        // Restore the user's scroll position
+        containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });
+    }, [containerRef, viewStartPositions.length]);
+    // Handle window resize and scroll event listeners
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
         if (!(containerRef === null || containerRef === undefined ? undefined : containerRef.current))
             return;
-        if (((_a = containerRef.current.children) === null || _a === undefined ? undefined : _a.length) &&
-            ((_b = containerRef.current.children) === null || _b === undefined ? undefined : _b.length) !== viewStartPositions.length &&
-            viewStartPositions.length > 0 &&
-            viewStartPositions.length < children.length) {
-            // scrolls to the last view, when a new item is added
-            containerRef.current.scrollTo({
-                left: containerRef.current.scrollWidth - containerRef.current.clientWidth,
-                top: 0,
-                behavior: 'smooth',
-            });
-            // computes the x position of the new item
-            setViewStartPositions([
-                ...viewStartPositions,
-                viewStartPositions[viewStartPositions.length - 1] +
-                    ((_d = (_c = containerRef.current.children[viewStartPositions.length - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect().x) !== null && _d !== undefined ? _d : 0) -
-                    20,
-            ]);
-        }
-        if (((_e = containerRef.current.children) === null || _e === undefined ? undefined : _e.length) && viewStartPositions.length === 0) {
-            setViewStartPositions(utils.createViewPositionArray(containerRef.current));
-        }
-        // scrolls to active tab when page loads
-        if (activeTab !== prevActiveTab &&
-            activeTab !== null &&
-            ((_f = containerRef.current.children) === null || _f === undefined ? undefined : _f.length) === viewStartPositions.length) {
-            const index = Array.from(containerRef.current.children).indexOf(activeTab);
-            containerRef.current.scrollTo({
-                left: viewStartPositions[index],
-                top: 0,
-                behavior: 'smooth',
-            });
-        }
+        const container = containerRef.current;
         handleResize();
         window.addEventListener('resize', handleResize);
-        (_g = containerRef.current) === null || _g === undefined ? undefined : _g.addEventListener('scroll', handleScroll);
+        container.addEventListener('scroll', handleScroll);
         // eslint-disable-next-line consistent-return
         return () => {
             window.removeEventListener('resize', handleResize);
+            container.removeEventListener('scroll', handleScroll);
         };
-    }, [
-        containerRef,
-        children,
-        handleResize,
-        handleScroll,
-        viewStartPositions,
-        activeTab,
-        prevActiveTab,
-    ]);
+    }, [containerRef, handleResize, handleScroll]);
     return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };
 };
 

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSetScrollPosition.cjs","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import { MutableRefObject, ReactNode, useCallback, useEffect, useState } from 'react';\nimport { usePrevious } from 'react-use';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\n\nexport const useSetScrollPosition = (\n  containerRef: MutableRefObject<HTMLDivElement>,\n  children: ReactNode,\n) => {\n  const [leftDisabled, setLeftDisabled] = useState(true);\n  const [rightDisabled, setRightDisabled] = useState(false);\n  const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n  const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n  const prevActiveTab = usePrevious(activeTab);\n\n  const handleScroll = useCallback(() => {\n    if (containerRef.current?.scrollLeft > 0) {\n      setLeftDisabled(false);\n    } else {\n      if (document.getElementById('left-arrow') === document.activeElement) {\n        document.getElementById('right-arrow')?.focus();\n      }\n      setLeftDisabled(true);\n    }\n\n    const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n    const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n    const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n    // -10 to prevent javascript assertion errors on floating points\n    if (containerRef.current?.scrollLeft >= maxScrollLeft - 10) {\n      if (document.getElementById('right-arrow') === document.activeElement) {\n        document.getElementById('left-arrow')?.focus();\n      }\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const handleResize = useCallback(() => {\n    if (!containerRef.current) return;\n    if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const toNextScrollPosition = useCallback(() => {\n    const newPosition = getNextViewPosition(\n      viewStartPositions,\n      containerRef.current.scrollLeft,\n      containerRef.current.clientWidth,\n    );\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  const toPrevScrollPosition = useCallback(() => {\n    const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  useEffect(() => {\n    if (!containerRef?.current) return;\n\n    if (\n      containerRef.current.children?.length &&\n      containerRef.current.children?.length !== viewStartPositions.length &&\n      viewStartPositions.length > 0 &&\n      viewStartPositions.length < (children as ReactNode[]).length\n    ) {\n      // scrolls to the last view, when a new item is added\n      containerRef.current.scrollTo({\n        left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n        top: 0,\n        behavior: 'smooth',\n      });\n      // computes the x position of the new item\n      setViewStartPositions([\n        ...viewStartPositions,\n        viewStartPositions[viewStartPositions.length - 1] +\n          (containerRef.current.children[viewStartPositions.length - 1]?.getBoundingClientRect()\n            .x ?? 0) -\n          20,\n      ]);\n    }\n\n    if (containerRef.current.children?.length && viewStartPositions.length === 0) {\n      setViewStartPositions(createViewPositionArray(containerRef.current));\n    }\n\n    // scrolls to active tab when page loads\n    if (\n      activeTab !== prevActiveTab &&\n      activeTab !== null &&\n      containerRef.current.children?.length === viewStartPositions.length\n    ) {\n      const index = Array.from(containerRef.current.children).indexOf(activeTab);\n\n      containerRef.current.scrollTo({\n        left: viewStartPositions[index],\n        top: 0,\n        behavior: 'smooth',\n      });\n    }\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    containerRef.current?.addEventListener('scroll', handleScroll);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      window.removeEventListener('resize', handleResize);\n    };\n  }, [\n    containerRef,\n    children,\n    handleResize,\n    handleScroll,\n    viewStartPositions,\n    activeTab,\n    prevActiveTab,\n  ]);\n\n  return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":["useState","usePrevious","useCallback","getNextViewPosition","getPrevViewPosition","useEffect","createViewPositionArray"],"mappings":"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"}
+{"version":3,"file":"useSetScrollPosition.cjs","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import { MutableRefObject, ReactNode, useCallback, useEffect, useState, Children } from 'react';\nimport { usePrevious } from 'react-use';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\n\ntype UseSetScrollPositionProps = {\n  containerRef: MutableRefObject<HTMLDivElement>;\n  children: ReactNode;\n  hasMoreViews?: boolean;\n  onFetchMoreViews?: () => void;\n  isLoadingMoreViews?: boolean;\n};\n\nexport const useSetScrollPosition = ({\n  containerRef,\n  children,\n  hasMoreViews = false,\n  onFetchMoreViews,\n  isLoadingMoreViews = false,\n}: UseSetScrollPositionProps) => {\n  const [leftDisabled, setLeftDisabled] = useState(true);\n  const [rightDisabled, setRightDisabled] = useState(false);\n  const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n  const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n  const prevActiveTab = usePrevious(activeTab);\n\n  const handleScroll = useCallback(() => {\n    if (containerRef.current?.scrollLeft > 0) {\n      setLeftDisabled(false);\n    } else {\n      if (document.getElementById('left-arrow') === document.activeElement) {\n        document.getElementById('right-arrow')?.focus();\n      }\n      setLeftDisabled(true);\n    }\n\n    const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n    const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n    const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n    // -10 to prevent javascript assertion errors on floating points\n    if (containerRef.current?.scrollLeft >= maxScrollLeft - 10) {\n      if (document.getElementById('right-arrow') === document.activeElement) {\n        document.getElementById('left-arrow')?.focus();\n      }\n      setRightDisabled(true);\n\n      // Check if we've reached the end and should fetch more data\n      // Only fetches more when not already loading more views and has more views to load\n      if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {\n        onFetchMoreViews();\n      }\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);\n\n  const handleResize = useCallback(() => {\n    if (!containerRef.current) return;\n    if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const toNextScrollPosition = useCallback(() => {\n    const newPosition = getNextViewPosition(\n      viewStartPositions,\n      containerRef.current.scrollLeft,\n      containerRef.current.clientWidth,\n    );\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  const toPrevScrollPosition = useCallback(() => {\n    const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  // Initialize view positions when container first has children\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length || viewStartPositions.length > 0) return;\n\n    setViewStartPositions(createViewPositionArray(containerRef.current));\n  }, [containerRef, viewStartPositions.length]);\n\n  // Handle new item addition - scroll to end and update positions\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n\n    const childrenCount = containerRef.current.children.length;\n    const positionsCount = viewStartPositions.length;\n    const totalChildren = Children.count(children);\n\n    const shouldScrollToNewItem =\n      childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;\n\n    if (!shouldScrollToNewItem) return;\n\n    containerRef.current.scrollTo({\n      left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n      top: 0,\n      behavior: 'smooth',\n    });\n\n    // Compute the x position of the new item\n    const lastChildRect =\n      containerRef.current.children[positionsCount - 1]?.getBoundingClientRect();\n    const newPosition = viewStartPositions[positionsCount - 1] + (lastChildRect?.x ?? 0) - 20;\n\n    setViewStartPositions([...viewStartPositions, newPosition]);\n  }, [containerRef, children, viewStartPositions]);\n\n  // Handle active tab changes - scroll to active tab\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n    if (activeTab === prevActiveTab || activeTab === null) return;\n    if (containerRef.current.children.length !== viewStartPositions.length) return;\n\n    const index = Array.from(containerRef.current.children).indexOf(activeTab);\n    if (index === -1) return;\n\n    containerRef.current.scrollTo({\n      left: viewStartPositions[index],\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);\n\n  // Handle fetching more views - recompute positions\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n    if (viewStartPositions.length >= containerRef.current.children.length) return;\n\n    const currentScrollLeft = containerRef.current.scrollLeft;\n\n    // Temporarily reset scroll to 0 to get accurate positions\n    containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });\n\n    // Recompute positions from scroll position 0\n    setViewStartPositions(createViewPositionArray(containerRef.current));\n\n    // Restore the user's scroll position\n    containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });\n  }, [containerRef, viewStartPositions.length]);\n\n  // Handle window resize and scroll event listeners\n  useEffect(() => {\n    if (!containerRef?.current) return;\n\n    const container = containerRef.current;\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    container.addEventListener('scroll', handleScroll);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      window.removeEventListener('resize', handleResize);\n      container.removeEventListener('scroll', handleScroll);\n    };\n  }, [containerRef, handleResize, handleScroll]);\n\n  return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":["useState","usePrevious","useCallback","getNextViewPosition","getPrevViewPosition","useEffect","createViewPositionArray","Children"],"mappings":"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"}

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.d.ts

@@ -1,7 +1,15 @@
 import { MutableRefObject, ReactNode } from 'react';
-export declare const useSetScrollPosition: (containerRef: MutableRefObject<HTMLDivElement>, children: ReactNode) => {
+type UseSetScrollPositionProps = {
+    containerRef: MutableRefObject<HTMLDivElement>;
+    children: ReactNode;
+    hasMoreViews?: boolean;
+    onFetchMoreViews?: () => void;
+    isLoadingMoreViews?: boolean;
+};
+export declare const useSetScrollPosition: ({ containerRef, children, hasMoreViews, onFetchMoreViews, isLoadingMoreViews, }: UseSetScrollPositionProps) => {
     rightDisabled: boolean;
     leftDisabled: boolean;
     toNextScrollPosition: () => void;
     toPrevScrollPosition: () => void;
 };
+export {};

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.js

@@ -1,8 +1,8 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, Children } from 'react';
 import { usePrevious } from 'react-use';
 import { getNextViewPosition, getPrevViewPosition, createViewPositionArray } from '../utils.js';
 
-const useSetScrollPosition = (containerRef, children) => {
+const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, onFetchMoreViews, isLoadingMoreViews = false, }) => {
     var _a;
     const [leftDisabled, setLeftDisabled] = useState(true);
     const [rightDisabled, setRightDisabled] = useState(false);
@@ -29,11 +29,16 @@ const useSetScrollPosition = (containerRef, children) => {
                 (_h = document.getElementById('left-arrow')) === null || _h === undefined ? undefined : _h.focus();
             }
             setRightDisabled(true);
+            // Check if we've reached the end and should fetch more data
+            // Only fetches more when not already loading more views and has more views to load
+            if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {
+                onFetchMoreViews();
+            }
         }
         else {
             setRightDisabled(false);
         }
-    }, [containerRef]);
+    }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);
     const handleResize = useCallback(() => {
         if (!containerRef.current)
             return;
@@ -60,58 +65,81 @@ const useSetScrollPosition = (containerRef, children) => {
             behavior: 'smooth',
         });
     }, [containerRef, viewStartPositions]);
+    // Initialize view positions when container first has children
+    useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length) || viewStartPositions.length > 0)
+            return;
+        setViewStartPositions(createViewPositionArray(containerRef.current));
+    }, [containerRef, viewStartPositions.length]);
+    // Handle new item addition - scroll to end and update positions
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        const childrenCount = containerRef.current.children.length;
+        const positionsCount = viewStartPositions.length;
+        const totalChildren = Children.count(children);
+        const shouldScrollToNewItem = childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;
+        if (!shouldScrollToNewItem)
+            return;
+        containerRef.current.scrollTo({
+            left: containerRef.current.scrollWidth - containerRef.current.clientWidth,
+            top: 0,
+            behavior: 'smooth',
+        });
+        // Compute the x position of the new item
+        const lastChildRect = (_c = containerRef.current.children[positionsCount - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect();
+        const newPosition = viewStartPositions[positionsCount - 1] + ((_d = lastChildRect === null || lastChildRect === undefined ? undefined : lastChildRect.x) !== null && _d !== undefined ? _d : 0) - 20;
+        setViewStartPositions([...viewStartPositions, newPosition]);
+    }, [containerRef, children, viewStartPositions]);
+    // Handle active tab changes - scroll to active tab
+    useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        if (activeTab === prevActiveTab || activeTab === null)
+            return;
+        if (containerRef.current.children.length !== viewStartPositions.length)
+            return;
+        const index = Array.from(containerRef.current.children).indexOf(activeTab);
+        if (index === -1)
+            return;
+        containerRef.current.scrollTo({
+            left: viewStartPositions[index],
+            top: 0,
+            behavior: 'smooth',
+        });
+    }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);
+    // Handle fetching more views - recompute positions
+    useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        if (viewStartPositions.length >= containerRef.current.children.length)
+            return;
+        const currentScrollLeft = containerRef.current.scrollLeft;
+        // Temporarily reset scroll to 0 to get accurate positions
+        containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });
+        // Recompute positions from scroll position 0
+        setViewStartPositions(createViewPositionArray(containerRef.current));
+        // Restore the user's scroll position
+        containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });
+    }, [containerRef, viewStartPositions.length]);
+    // Handle window resize and scroll event listeners
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
         if (!(containerRef === null || containerRef === undefined ? undefined : containerRef.current))
             return;
-        if (((_a = containerRef.current.children) === null || _a === undefined ? undefined : _a.length) &&
-            ((_b = containerRef.current.children) === null || _b === undefined ? undefined : _b.length) !== viewStartPositions.length &&
-            viewStartPositions.length > 0 &&
-            viewStartPositions.length < children.length) {
-            // scrolls to the last view, when a new item is added
-            containerRef.current.scrollTo({
-                left: containerRef.current.scrollWidth - containerRef.current.clientWidth,
-                top: 0,
-                behavior: 'smooth',
-            });
-            // computes the x position of the new item
-            setViewStartPositions([
-                ...viewStartPositions,
-                viewStartPositions[viewStartPositions.length - 1] +
-                    ((_d = (_c = containerRef.current.children[viewStartPositions.length - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect().x) !== null && _d !== undefined ? _d : 0) -
-                    20,
-            ]);
-        }
-        if (((_e = containerRef.current.children) === null || _e === undefined ? undefined : _e.length) && viewStartPositions.length === 0) {
-            setViewStartPositions(createViewPositionArray(containerRef.current));
-        }
-        // scrolls to active tab when page loads
-        if (activeTab !== prevActiveTab &&
-            activeTab !== null &&
-            ((_f = containerRef.current.children) === null || _f === undefined ? undefined : _f.length) === viewStartPositions.length) {
-            const index = Array.from(containerRef.current.children).indexOf(activeTab);
-            containerRef.current.scrollTo({
-                left: viewStartPositions[index],
-                top: 0,
-                behavior: 'smooth',
-            });
-        }
+        const container = containerRef.current;
         handleResize();
         window.addEventListener('resize', handleResize);
-        (_g = containerRef.current) === null || _g === undefined ? undefined : _g.addEventListener('scroll', handleScroll);
+        container.addEventListener('scroll', handleScroll);
         // eslint-disable-next-line consistent-return
         return () => {
             window.removeEventListener('resize', handleResize);
+            container.removeEventListener('scroll', handleScroll);
         };
-    }, [
-        containerRef,
-        children,
-        handleResize,
-        handleScroll,
-        viewStartPositions,
-        activeTab,
-        prevActiveTab,
-    ]);
+    }, [containerRef, handleResize, handleScroll]);
     return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };
 };
 

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSetScrollPosition.js","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import { MutableRefObject, ReactNode, useCallback, useEffect, useState } from 'react';\nimport { usePrevious } from 'react-use';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\n\nexport const useSetScrollPosition = (\n  containerRef: MutableRefObject<HTMLDivElement>,\n  children: ReactNode,\n) => {\n  const [leftDisabled, setLeftDisabled] = useState(true);\n  const [rightDisabled, setRightDisabled] = useState(false);\n  const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n  const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n  const prevActiveTab = usePrevious(activeTab);\n\n  const handleScroll = useCallback(() => {\n    if (containerRef.current?.scrollLeft > 0) {\n      setLeftDisabled(false);\n    } else {\n      if (document.getElementById('left-arrow') === document.activeElement) {\n        document.getElementById('right-arrow')?.focus();\n      }\n      setLeftDisabled(true);\n    }\n\n    const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n    const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n    const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n    // -10 to prevent javascript assertion errors on floating points\n    if (containerRef.current?.scrollLeft >= maxScrollLeft - 10) {\n      if (document.getElementById('right-arrow') === document.activeElement) {\n        document.getElementById('left-arrow')?.focus();\n      }\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const handleResize = useCallback(() => {\n    if (!containerRef.current) return;\n    if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const toNextScrollPosition = useCallback(() => {\n    const newPosition = getNextViewPosition(\n      viewStartPositions,\n      containerRef.current.scrollLeft,\n      containerRef.current.clientWidth,\n    );\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  const toPrevScrollPosition = useCallback(() => {\n    const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  useEffect(() => {\n    if (!containerRef?.current) return;\n\n    if (\n      containerRef.current.children?.length &&\n      containerRef.current.children?.length !== viewStartPositions.length &&\n      viewStartPositions.length > 0 &&\n      viewStartPositions.length < (children as ReactNode[]).length\n    ) {\n      // scrolls to the last view, when a new item is added\n      containerRef.current.scrollTo({\n        left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n        top: 0,\n        behavior: 'smooth',\n      });\n      // computes the x position of the new item\n      setViewStartPositions([\n        ...viewStartPositions,\n        viewStartPositions[viewStartPositions.length - 1] +\n          (containerRef.current.children[viewStartPositions.length - 1]?.getBoundingClientRect()\n            .x ?? 0) -\n          20,\n      ]);\n    }\n\n    if (containerRef.current.children?.length && viewStartPositions.length === 0) {\n      setViewStartPositions(createViewPositionArray(containerRef.current));\n    }\n\n    // scrolls to active tab when page loads\n    if (\n      activeTab !== prevActiveTab &&\n      activeTab !== null &&\n      containerRef.current.children?.length === viewStartPositions.length\n    ) {\n      const index = Array.from(containerRef.current.children).indexOf(activeTab);\n\n      containerRef.current.scrollTo({\n        left: viewStartPositions[index],\n        top: 0,\n        behavior: 'smooth',\n      });\n    }\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    containerRef.current?.addEventListener('scroll', handleScroll);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      window.removeEventListener('resize', handleResize);\n    };\n  }, [\n    containerRef,\n    children,\n    handleResize,\n    handleScroll,\n    viewStartPositions,\n    activeTab,\n    prevActiveTab,\n  ]);\n\n  return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSetScrollPosition.js","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import { MutableRefObject, ReactNode, useCallback, useEffect, useState, Children } from 'react';\nimport { usePrevious } from 'react-use';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\n\ntype UseSetScrollPositionProps = {\n  containerRef: MutableRefObject<HTMLDivElement>;\n  children: ReactNode;\n  hasMoreViews?: boolean;\n  onFetchMoreViews?: () => void;\n  isLoadingMoreViews?: boolean;\n};\n\nexport const useSetScrollPosition = ({\n  containerRef,\n  children,\n  hasMoreViews = false,\n  onFetchMoreViews,\n  isLoadingMoreViews = false,\n}: UseSetScrollPositionProps) => {\n  const [leftDisabled, setLeftDisabled] = useState(true);\n  const [rightDisabled, setRightDisabled] = useState(false);\n  const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n  const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n  const prevActiveTab = usePrevious(activeTab);\n\n  const handleScroll = useCallback(() => {\n    if (containerRef.current?.scrollLeft > 0) {\n      setLeftDisabled(false);\n    } else {\n      if (document.getElementById('left-arrow') === document.activeElement) {\n        document.getElementById('right-arrow')?.focus();\n      }\n      setLeftDisabled(true);\n    }\n\n    const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n    const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n    const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n    // -10 to prevent javascript assertion errors on floating points\n    if (containerRef.current?.scrollLeft >= maxScrollLeft - 10) {\n      if (document.getElementById('right-arrow') === document.activeElement) {\n        document.getElementById('left-arrow')?.focus();\n      }\n      setRightDisabled(true);\n\n      // Check if we've reached the end and should fetch more data\n      // Only fetches more when not already loading more views and has more views to load\n      if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {\n        onFetchMoreViews();\n      }\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);\n\n  const handleResize = useCallback(() => {\n    if (!containerRef.current) return;\n    if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const toNextScrollPosition = useCallback(() => {\n    const newPosition = getNextViewPosition(\n      viewStartPositions,\n      containerRef.current.scrollLeft,\n      containerRef.current.clientWidth,\n    );\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  const toPrevScrollPosition = useCallback(() => {\n    const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  // Initialize view positions when container first has children\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length || viewStartPositions.length > 0) return;\n\n    setViewStartPositions(createViewPositionArray(containerRef.current));\n  }, [containerRef, viewStartPositions.length]);\n\n  // Handle new item addition - scroll to end and update positions\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n\n    const childrenCount = containerRef.current.children.length;\n    const positionsCount = viewStartPositions.length;\n    const totalChildren = Children.count(children);\n\n    const shouldScrollToNewItem =\n      childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;\n\n    if (!shouldScrollToNewItem) return;\n\n    containerRef.current.scrollTo({\n      left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n      top: 0,\n      behavior: 'smooth',\n    });\n\n    // Compute the x position of the new item\n    const lastChildRect =\n      containerRef.current.children[positionsCount - 1]?.getBoundingClientRect();\n    const newPosition = viewStartPositions[positionsCount - 1] + (lastChildRect?.x ?? 0) - 20;\n\n    setViewStartPositions([...viewStartPositions, newPosition]);\n  }, [containerRef, children, viewStartPositions]);\n\n  // Handle active tab changes - scroll to active tab\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n    if (activeTab === prevActiveTab || activeTab === null) return;\n    if (containerRef.current.children.length !== viewStartPositions.length) return;\n\n    const index = Array.from(containerRef.current.children).indexOf(activeTab);\n    if (index === -1) return;\n\n    containerRef.current.scrollTo({\n      left: viewStartPositions[index],\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);\n\n  // Handle fetching more views - recompute positions\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n    if (viewStartPositions.length >= containerRef.current.children.length) return;\n\n    const currentScrollLeft = containerRef.current.scrollLeft;\n\n    // Temporarily reset scroll to 0 to get accurate positions\n    containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });\n\n    // Recompute positions from scroll position 0\n    setViewStartPositions(createViewPositionArray(containerRef.current));\n\n    // Restore the user's scroll position\n    containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });\n  }, [containerRef, viewStartPositions.length]);\n\n  // Handle window resize and scroll event listeners\n  useEffect(() => {\n    if (!containerRef?.current) return;\n\n    const container = containerRef.current;\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    container.addEventListener('scroll', handleScroll);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      window.removeEventListener('resize', handleResize);\n      container.removeEventListener('scroll', handleScroll);\n    };\n  }, [containerRef, handleResize, handleScroll]);\n\n  return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":[],"mappings":"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"}

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

@@ -4,6 +4,24 @@ export type ViewContainerProps = {
     children?: ReactNode;
     /** Event handler for when the menu icon is clicked (can be used to enable popover) */
     onClickMenu?: () => void;
+    /** reduces padding around the container */
+    compact?: boolean;
+    /** changes the appearance of the container */
+    appearance?: 'primary' | 'secondary';
+    /** Slot for the menu button */
+    menuButtonSlot?: ReactNode;
+    /** aria-controls attribute for the menu button */
     ariaMenuControls?: string;
+    /** aria-expanded attribute for the menu button */
     ariaMenuExpanded?: boolean;
+    /** indicates when there is more views to be loaded */
+    hasMoreViews?: boolean;
+    /** Callback to fetch more views when at the end of the list */
+    onFetchMoreViews?: () => void;
+    /** indicates when more views are currently being loaded */
+    isLoadingMoreViews?: boolean;
+    /** Additional className for the container */
+    className?: string;
+    /** Additional styles for the container */
+    style?: React.CSSProperties;
 };

package/dist/utils/forms/form.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._fullStyles_1j3kl_1 {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1j3kl_1:disabled, ._fullStyles_1j3kl_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1j3kl_1._compact_1j3kl_13 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1j3kl_1._error_1j3kl_17 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1j3kl_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1j3kl_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_1j3kl_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1j3kl_41 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}");
-var formStyles = {"fullStyles":"_fullStyles_1j3kl_1","compact":"_compact_1j3kl_13","error":"_error_1j3kl_17","base":"_base_1j3kl_41","inputGroup":"_inputGroup_1j3kl_62"};
+___$insertStyle("._fullStyles_1e3xu_1 {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1e3xu_1:disabled, ._fullStyles_1e3xu_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1e3xu_1._compact_1e3xu_13 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1e3xu_1._error_1e3xu_17 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1e3xu_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1e3xu_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_1e3xu_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1e3xu_41 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_1e3xu_41._inputGroup_1e3xu_63:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1e3xu_41._inputGroup_1e3xu_63:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1e3xu_41._inputGroup_1e3xu_63:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_1e3xu_63 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_1e3xu_63 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_1e3xu_63 > *:focus, ._inputGroup_1e3xu_63 > *:active {\n  z-index: 5;\n}\n._inputGroup_1e3xu_63 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_1e3xu_63 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_1e3xu_63 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
+var formStyles = {"fullStyles":"_fullStyles_1e3xu_1","compact":"_compact_1e3xu_13","error":"_error_1e3xu_17","base":"_base_1e3xu_41","inputGroup":"_inputGroup_1e3xu_63"};
 
 module.exports = formStyles;
 //# sourceMappingURL=form.module.scss.cjs.map

package/dist/utils/forms/form.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"form.module.scss.cjs","sources":["../../../src/utils/forms/form.module.scss"],"sourcesContent":[".fullStyles {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-light);\n    cursor: not-allowed;\n  }\n\n  &.compact {\n    --outline-size: 2px;\n    min-height: var(--sizes-8);\n  }\n\n  &.error {\n    --border-color: var(--colors-secondary-red-base);\n    --shadow-color: var(--colors-secondary-red-light);\n  }\n\n  &:focus {\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n\n  &::placeholder {\n    font-family: var(--text-placeholder-font-family);\n    font-style: var(--text-placeholder-font-style);\n    font-weight: var(--text-placeholder-font-weight);\n    font-size: var(--text-placeholder-font-size);\n    line-height: var(--text-placeholder-line-height);\n    color: var(--text-placeholder-color);\n    text-decoration: var(--text-placeholder-text-decoration);\n    letter-spacing: var(--text-placeholder-letter-spacing);\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n\n.base {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  &.inputGroup {\n    &:first-child {\n      padding-right: calc(var(--sizes-3) - var(--sizes-1));\n    }\n\n    &:last-child {\n      padding-left: var(--sizes-2);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      padding-inline: var(--sizes-2);\n    }\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,43EAAA;AACA,iBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"form.module.scss.cjs","sources":["../../../src/utils/forms/form.module.scss"],"sourcesContent":[".fullStyles {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-light);\n    cursor: not-allowed;\n  }\n\n  &.compact {\n    --outline-size: 2px;\n    min-height: var(--sizes-8);\n  }\n\n  &.error {\n    --border-color: var(--colors-secondary-red-base);\n    --shadow-color: var(--colors-secondary-red-light);\n  }\n\n  &:focus {\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n\n  &::placeholder {\n    font-family: var(--text-placeholder-font-family);\n    font-style: var(--text-placeholder-font-style);\n    font-weight: var(--text-placeholder-font-weight);\n    font-size: var(--text-placeholder-font-size);\n    line-height: var(--text-placeholder-line-height);\n    color: var(--text-placeholder-color);\n    text-decoration: var(--text-placeholder-text-decoration);\n    letter-spacing: var(--text-placeholder-letter-spacing);\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n\n.base {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n  &.inputGroup {\n    &:first-child {\n      padding-right: calc(var(--sizes-3) - var(--sizes-1));\n    }\n\n    &:last-child {\n      padding-left: var(--sizes-2);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      padding-inline: var(--sizes-2);\n    }\n  }\n}\n\n/** InputGroup styles from the InputGroup component */\n.inputGroup {\n  display: flex;\n\n  /* Remove inline margins from all children */\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  /* Bring in-focus and active children to the front to maintain outlines */\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  /* Remove inline borders for children in the middle */\n  & > *:not(:first-child):not(:last-child) {\n    border-radius: 0 !important;\n    border-inline: 0 !important;\n  }\n\n  /* Remove right border radius from first child */\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n    border-right: 0 !important;\n  }\n\n  /* Remove left border radius from last child */\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-left: 0 !important;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,s9GAAA;AACA,iBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

package/dist/utils/forms/form.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._fullStyles_1j3kl_1 {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1j3kl_1:disabled, ._fullStyles_1j3kl_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1j3kl_1._compact_1j3kl_13 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1j3kl_1._error_1j3kl_17 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1j3kl_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1j3kl_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_1j3kl_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1j3kl_41 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}");
-var formStyles = {"fullStyles":"_fullStyles_1j3kl_1","compact":"_compact_1j3kl_13","error":"_error_1j3kl_17","base":"_base_1j3kl_41","inputGroup":"_inputGroup_1j3kl_62"};
+insertStyle("._fullStyles_1e3xu_1 {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1e3xu_1:disabled, ._fullStyles_1e3xu_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1e3xu_1._compact_1e3xu_13 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1e3xu_1._error_1e3xu_17 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1e3xu_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1e3xu_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_1e3xu_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1e3xu_41 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_1e3xu_41._inputGroup_1e3xu_63:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1e3xu_41._inputGroup_1e3xu_63:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1e3xu_41._inputGroup_1e3xu_63:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_1e3xu_63 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_1e3xu_63 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_1e3xu_63 > *:focus, ._inputGroup_1e3xu_63 > *:active {\n  z-index: 5;\n}\n._inputGroup_1e3xu_63 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_1e3xu_63 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_1e3xu_63 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
+var formStyles = {"fullStyles":"_fullStyles_1e3xu_1","compact":"_compact_1e3xu_13","error":"_error_1e3xu_17","base":"_base_1e3xu_41","inputGroup":"_inputGroup_1e3xu_63"};
 
 export { formStyles as default };
 //# sourceMappingURL=form.module.scss.js.map

package/dist/utils/forms/form.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.module.scss.js","sources":["../../../src/utils/forms/form.module.scss"],"sourcesContent":[".fullStyles {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-light);\n    cursor: not-allowed;\n  }\n\n  &.compact {\n    --outline-size: 2px;\n    min-height: var(--sizes-8);\n  }\n\n  &.error {\n    --border-color: var(--colors-secondary-red-base);\n    --shadow-color: var(--colors-secondary-red-light);\n  }\n\n  &:focus {\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n\n  &::placeholder {\n    font-family: var(--text-placeholder-font-family);\n    font-style: var(--text-placeholder-font-style);\n    font-weight: var(--text-placeholder-font-weight);\n    font-size: var(--text-placeholder-font-size);\n    line-height: var(--text-placeholder-line-height);\n    color: var(--text-placeholder-color);\n    text-decoration: var(--text-placeholder-text-decoration);\n    letter-spacing: var(--text-placeholder-letter-spacing);\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n\n.base {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  &.inputGroup {\n    &:first-child {\n      padding-right: calc(var(--sizes-3) - var(--sizes-1));\n    }\n\n    &:last-child {\n      padding-left: var(--sizes-2);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      padding-inline: var(--sizes-2);\n    }\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,43EAAA;AACA,iBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"form.module.scss.js","sources":["../../../src/utils/forms/form.module.scss"],"sourcesContent":[".fullStyles {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-light);\n    cursor: not-allowed;\n  }\n\n  &.compact {\n    --outline-size: 2px;\n    min-height: var(--sizes-8);\n  }\n\n  &.error {\n    --border-color: var(--colors-secondary-red-base);\n    --shadow-color: var(--colors-secondary-red-light);\n  }\n\n  &:focus {\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n\n  &::placeholder {\n    font-family: var(--text-placeholder-font-family);\n    font-style: var(--text-placeholder-font-style);\n    font-weight: var(--text-placeholder-font-weight);\n    font-size: var(--text-placeholder-font-size);\n    line-height: var(--text-placeholder-line-height);\n    color: var(--text-placeholder-color);\n    text-decoration: var(--text-placeholder-text-decoration);\n    letter-spacing: var(--text-placeholder-letter-spacing);\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n\n.base {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n  &.inputGroup {\n    &:first-child {\n      padding-right: calc(var(--sizes-3) - var(--sizes-1));\n    }\n\n    &:last-child {\n      padding-left: var(--sizes-2);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      padding-inline: var(--sizes-2);\n    }\n  }\n}\n\n/** InputGroup styles from the InputGroup component */\n.inputGroup {\n  display: flex;\n\n  /* Remove inline margins from all children */\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  /* Bring in-focus and active children to the front to maintain outlines */\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  /* Remove inline borders for children in the middle */\n  & > *:not(:first-child):not(:last-child) {\n    border-radius: 0 !important;\n    border-inline: 0 !important;\n  }\n\n  /* Remove right border radius from first child */\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n    border-right: 0 !important;\n  }\n\n  /* Remove left border radius from last child */\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-left: 0 !important;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,s9GAAA;AACA,iBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "12.4.0-beta-9",
+  "version": "12.5.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",

package/dist/components/UploadFile/components/DropCopy/DropCopy.cjs

@@ -1,28 +0,0 @@
-'use strict';
-
-var React = require('react');
-var framerMotion = require('framer-motion');
-var index = require('../../../../theme/index.cjs');
-var sizes = require('../../../../theme/modules/sizes.cjs');
-var Text = require('../../../Text/Text.cjs');
-var FlexCol = require('../../../Flex/FlexCol/FlexCol.cjs');
-var ArrowDownIcon = require('../../../../icons/design-system/components/ArrowDownIcon.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const DropCopy = () => (React__default.default.createElement(FlexCol.FlexCol, { alignItems: "center", gap: "sm", style: { pointerEvents: 'none' } },
-    React__default.default.createElement("div", { style: { height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
-        React__default.default.createElement(framerMotion.motion.div, { animate: {
-                y: [0, 8, 0],
-            }, transition: {
-                duration: 1,
-                repeat: Infinity,
-                ease: 'easeInOut',
-            } },
-            React__default.default.createElement(ArrowDownIcon.ReactComponent, { height: 24, width: 24 }))),
-    React__default.default.createElement(Text.Text, { variant: "body", style: { paddingTop: sizes.sizes.sm, color: index.theme.colors.neutral.ink.base } }, "Drop to upload")));
-
-exports.DropCopy = DropCopy;
-//# sourceMappingURL=DropCopy.cjs.map

package/dist/components/UploadFile/components/DropCopy/DropCopy.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropCopy.cjs","sources":["../../../../../src/components/UploadFile/components/DropCopy/DropCopy.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { theme } from 'Theme';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Text } from '../../../Text';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowDownIcon } from '../../../../icons';\n\nexport const DropCopy = () => (\n  <FlexCol alignItems=\"center\" gap=\"sm\" style={{ pointerEvents: 'none' }}>\n    <div style={{ height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n      <motion.div\n        animate={{\n          y: [0, 8, 0],\n        }}\n        transition={{\n          duration: 1,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        }}\n      >\n        <ArrowDownIcon height={24} width={24} />\n      </motion.div>\n    </div>\n    <Text variant=\"body\" style={{ paddingTop: sizes.sm, color: theme.colors.neutral.ink.base }}>\n      Drop to upload\n    </Text>\n  </FlexCol>\n);\n"],"names":["React","FlexCol","motion","ArrowDownIcon","Text","sizes","theme"],"mappings":";;;;;;;;;;;;;;AAQa,MAAA,QAAQ,GAAG,OACtBA,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAA;AACpE,IAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA;AACzF,QAAAA,sBAAA,CAAA,aAAA,CAACE,mBAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE;AACP,gBAAA,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACb,aAAA,EACD,UAAU,EAAE;AACV,gBAAA,QAAQ,EAAE,CAAC;AACX,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,IAAI,EAAE,WAAW;AAClB,aAAA,EAAA;YAEDF,sBAAC,CAAA,aAAA,CAAAG,4BAAa,EAAC,EAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAI,CAAA,CAC7B,CACT;AACN,IAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAEC,WAAK,CAAC,EAAE,EAAE,KAAK,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,EAEnF,EAAA,gBAAA,CAAA,CACC;;;;"}

package/dist/components/UploadFile/components/DropCopy/DropCopy.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DropCopy: () => React.JSX.Element;

package/dist/components/UploadFile/components/DropCopy/DropCopy.js

@@ -1,22 +0,0 @@
-import React__default from 'react';
-import { motion } from 'framer-motion';
-import { theme } from '../../../../theme/index.js';
-import { sizes } from '../../../../theme/modules/sizes.js';
-import { Text } from '../../../Text/Text.js';
-import { FlexCol } from '../../../Flex/FlexCol/FlexCol.js';
-import { ReactComponent as ArrowDownIcon } from '../../../../icons/design-system/components/ArrowDownIcon.js';
-
-const DropCopy = () => (React__default.createElement(FlexCol, { alignItems: "center", gap: "sm", style: { pointerEvents: 'none' } },
-    React__default.createElement("div", { style: { height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
-        React__default.createElement(motion.div, { animate: {
-                y: [0, 8, 0],
-            }, transition: {
-                duration: 1,
-                repeat: Infinity,
-                ease: 'easeInOut',
-            } },
-            React__default.createElement(ArrowDownIcon, { height: 24, width: 24 }))),
-    React__default.createElement(Text, { variant: "body", style: { paddingTop: sizes.sm, color: theme.colors.neutral.ink.base } }, "Drop to upload")));
-
-export { DropCopy };
-//# sourceMappingURL=DropCopy.js.map