@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/Pagination/Pagination.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const PaginationContext = require('./PaginationContext.js');
-const Box = require('../Box/Box.js');
-const Flex = require('../Flex/Flex.js');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-    if (e) {
-        for (const k in e) {
-            if (k !== 'default') {
-                const d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: () => e[k]
-                });
-            }
-        }
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-const Pagination = ({ children, label = 'Pagination', activePage, pageCount }) => {
-    const context = React__namespace.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
-    return (jsxRuntime.jsx(PaginationContext.PaginationContext.Provider, { value: context, children: jsxRuntime.jsx(Box.Box, { "aria-label": label, as: "nav", children: jsxRuntime.jsx(Flex.Flex, { as: "ol", gap: 1, children: React__namespace.Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsxRuntime.jsx("li", { children: child }, index);
-                }) }) }) }));
-};
-
-exports.Pagination = Pagination;

package/dist/Pagination/Pagination.mjs

@@ -1,15 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { PaginationContext } from './PaginationContext.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-const Pagination = ({ children, label = 'Pagination', activePage, pageCount }) => {
-    const context = React.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
-    return (jsx(PaginationContext.Provider, { value: context, children: jsx(Box, { "aria-label": label, as: "nav", children: jsx(Flex, { as: "ol", gap: 1, children: React.Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsx("li", { children: child }, index);
-                }) }) }) }));
-};
-
-export { Pagination };

package/dist/Pagination/PaginationContext.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const PaginationContext = React.createContext({ activePage: 1, pageCount: 1 });
-const usePagination = () => React.useContext(PaginationContext);
-
-exports.PaginationContext = PaginationContext;
-exports.usePagination = usePagination;

package/dist/Pagination/PaginationContext.mjs

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const PaginationContext = createContext({ activePage: 1, pageCount: 1 });
-const usePagination = () => useContext(PaginationContext);
-
-export { PaginationContext, usePagination };

package/dist/Pagination/assets/next.svg.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const next = "data:image/svg+xml,%3csvg%20width='7'%20height='10'%20viewBox='0%200%207%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M-0.000195503%201.175L3.81647%205L-0.000195503%208.825L1.1748%2010L6.1748%205L1.1748%200L-0.000195503%201.175Z'%20fill='%238E8EA9'/%3e%3c/svg%3e";
-
-module.exports = next;

package/dist/Pagination/assets/next.svg.mjs

@@ -1,3 +0,0 @@
-const next = "data:image/svg+xml,%3csvg%20width='7'%20height='10'%20viewBox='0%200%207%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M-0.000195503%201.175L3.81647%205L-0.000195503%208.825L1.1748%2010L6.1748%205L1.1748%200L-0.000195503%201.175Z'%20fill='%238E8EA9'/%3e%3c/svg%3e";
-
-export { next as default };

package/dist/Pagination/assets/previous.svg.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const previous = "data:image/svg+xml,%3csvg%20width='7'%20height='10'%20viewBox='0%200%207%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6.175%208.825L2.35833%205L6.175%201.175L5%200L0%205L5%2010L6.175%208.825Z'%20fill='%238E8EA9'/%3e%3c/svg%3e";
-
-module.exports = previous;

package/dist/Pagination/assets/previous.svg.mjs

@@ -1,3 +0,0 @@
-const previous = "data:image/svg+xml,%3csvg%20width='7'%20height='10'%20viewBox='0%200%207%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6.175%208.825L2.35833%205L6.175%201.175L5%200L0%205L5%2010L6.175%208.825Z'%20fill='%238E8EA9'/%3e%3c/svg%3e";
-
-export { previous as default };

package/dist/Pagination/components.js

@@ -1,84 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const icons = require('@strapi/icons');
-const reactRouterDom = require('react-router-dom');
-const styled = require('styled-components');
-const PaginationContext = require('./PaginationContext.js');
-const utils = require('../themes/utils.js');
-const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const Typography = require('../Typography/Typography.js');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const transientProps = {
-    active: true,
-};
-const LinkWrapper = styled__default.default(reactRouterDom.NavLink).withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  padding: ${({ theme }) => theme.spaces[3]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  box-shadow: ${({ active, theme }) => (active ? theme.shadows.filterShadow : undefined)};
-  text-decoration: none;
-  display: flex;
-
-  ${utils.buttonFocusStyle}
-`;
-const PageLinkWrapper = styled__default.default(LinkWrapper) `
-  color: ${({ theme, active }) => (active ? theme.colors.primary700 : theme.colors.neutral800)};
-  background: ${({ theme, active }) => (active ? theme.colors.neutral0 : undefined)};
-
-  &:hover {
-    box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  }
-`;
-const ActionLinkWrapper = styled__default.default(LinkWrapper) `
-  font-size: ${11 / 16}rem;
-
-  svg path {
-    fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600)};
-  }
-
-  &:focus,
-  &:hover {
-    svg path {
-      fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700)};
-    }
-  }
-
-  ${(p) => p['aria-disabled']
-    ? `
-  pointer-events: none;
-    `
-    : undefined}
-`;
-const PreviousLink = ({ children, to, ...props }) => {
-    const { activePage } = PaginationContext.usePagination();
-    const disabled = activePage === 1;
-    return (jsxRuntime.jsxs(ActionLinkWrapper, { to: disabled ? '#' : to, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(icons.ChevronLeft, { "aria-hidden": true })] }));
-};
-PreviousLink.displayName = 'PreviousLink';
-const NextLink = ({ children, to, ...props }) => {
-    const { activePage, pageCount } = PaginationContext.usePagination();
-    const disabled = activePage === pageCount;
-    return (jsxRuntime.jsxs(ActionLinkWrapper, { to: disabled ? '#' : to, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(icons.ChevronRight, { "aria-hidden": true })] }));
-};
-NextLink.displayName = 'NextLink';
-const PageLink = ({ number, children, ...props }) => {
-    const { activePage } = PaginationContext.usePagination();
-    const isActive = activePage === number;
-    return (jsxRuntime.jsxs(PageLinkWrapper, { ...props, active: isActive, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(Typography.Typography, { "aria-hidden": true, fontWeight: isActive ? 'bold' : undefined, lineHeight: "revert", variant: "pi", children: number })] }));
-};
-PageLink.displayName = 'PageLink';
-const Dots = ({ children, ...props }) => (jsxRuntime.jsxs(Box.Box, { ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(Typography.Typography, { "aria-hidden": true, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "\u2026" })] }));
-
-exports.Dots = Dots;
-exports.NextLink = NextLink;
-exports.PageLink = PageLink;
-exports.PreviousLink = PreviousLink;

package/dist/Pagination/components.mjs

@@ -1,73 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronLeft, ChevronRight } from '@strapi/icons';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-import { usePagination } from './PaginationContext.mjs';
-import { buttonFocusStyle } from '../themes/utils.mjs';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { Box } from '../Box/Box.mjs';
-
-const transientProps = {
-    active: true,
-};
-const LinkWrapper = styled(NavLink).withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  padding: ${({ theme }) => theme.spaces[3]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  box-shadow: ${({ active, theme }) => (active ? theme.shadows.filterShadow : undefined)};
-  text-decoration: none;
-  display: flex;
-
-  ${buttonFocusStyle}
-`;
-const PageLinkWrapper = styled(LinkWrapper) `
-  color: ${({ theme, active }) => (active ? theme.colors.primary700 : theme.colors.neutral800)};
-  background: ${({ theme, active }) => (active ? theme.colors.neutral0 : undefined)};
-
-  &:hover {
-    box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  }
-`;
-const ActionLinkWrapper = styled(LinkWrapper) `
-  font-size: ${11 / 16}rem;
-
-  svg path {
-    fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600)};
-  }
-
-  &:focus,
-  &:hover {
-    svg path {
-      fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700)};
-    }
-  }
-
-  ${(p) => p['aria-disabled']
-    ? `
-  pointer-events: none;
-    `
-    : undefined}
-`;
-const PreviousLink = ({ children, to, ...props }) => {
-    const { activePage } = usePagination();
-    const disabled = activePage === 1;
-    return (jsxs(ActionLinkWrapper, { to: disabled ? '#' : to, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(ChevronLeft, { "aria-hidden": true })] }));
-};
-PreviousLink.displayName = 'PreviousLink';
-const NextLink = ({ children, to, ...props }) => {
-    const { activePage, pageCount } = usePagination();
-    const disabled = activePage === pageCount;
-    return (jsxs(ActionLinkWrapper, { to: disabled ? '#' : to, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(ChevronRight, { "aria-hidden": true })] }));
-};
-NextLink.displayName = 'NextLink';
-const PageLink = ({ number, children, ...props }) => {
-    const { activePage } = usePagination();
-    const isActive = activePage === number;
-    return (jsxs(PageLinkWrapper, { ...props, active: isActive, children: [jsx(VisuallyHidden, { children: children }), jsx(Typography, { "aria-hidden": true, fontWeight: isActive ? 'bold' : undefined, lineHeight: "revert", variant: "pi", children: number })] }));
-};
-PageLink.displayName = 'PageLink';
-const Dots = ({ children, ...props }) => (jsxs(Box, { ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(Typography, { "aria-hidden": true, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "\u2026" })] }));
-
-export { Dots, NextLink, PageLink, PreviousLink };

package/dist/Pagination/index.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Pagination = require('./Pagination.js');
-const components = require('./components.js');
-
-
-
-exports.Pagination = Pagination.Pagination;
-exports.Dots = components.Dots;
-exports.NextLink = components.NextLink;
-exports.PageLink = components.PageLink;
-exports.PreviousLink = components.PreviousLink;

package/dist/Pagination/index.mjs

@@ -1,2 +0,0 @@
-export { Pagination } from './Pagination.mjs';
-export { Dots, NextLink, PageLink, PreviousLink } from './components.mjs';

package/dist/Popover/Popover.js

@@ -1,166 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const reactDom = require('@floating-ui/react-dom');
-const reactFocusScope = require('@radix-ui/react-focus-scope');
-const uiPrimitives = require('@strapi/ui-primitives');
-const ariaHidden = require('aria-hidden');
-const reactRemoveScroll = require('react-remove-scroll');
-const styled = require('styled-components');
-const index = require('../DismissibleLayer/index.js');
-const strings = require('../helpers/strings.js');
-const useComposeRefs = require('../hooks/useComposeRefs.js');
-const useId = require('../hooks/useId.js');
-const useIntersection = require('../hooks/useIntersection.js');
-const Box = require('../Box/Box.js');
-const Portal = require('../Portal/Portal.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const POPOVER_PLACEMENTS = [
-    'top',
-    'top-start',
-    'top-end',
-    'right',
-    'right-start',
-    'right-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'left',
-    'left-start',
-    'left-end',
-];
-const PopoverWrapper = styled__default.default(Box.Box) `
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  z-index: ${({ theme }) => theme.zIndices[0]};
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const Content = React__namespace.forwardRef(({ source, children, spacing = 0, fullWidth = false, placement = 'bottom-start', centered = false, onEscapeKeyDown, onPointerDownOutside, onDismiss, onFocusOutside, ...props }, forwardedRef) => {
-    const [content, setContent] = React__namespace.useState(null);
-    const [width, setWidth] = React__namespace.useState(undefined);
-    const isRightClickOutsideRef = React__namespace.useRef(false);
-    const { x, y, refs, strategy } = reactDom.useFloating({
-        strategy: 'fixed',
-        placement: centered ? 'bottom' : placement,
-        middleware: [
-            reactDom.offset({
-                mainAxis: spacing,
-            }),
-            reactDom.shift(),
-            reactDom.flip(),
-        ],
-        elements: {
-            reference: source.current,
-        },
-        whileElementsMounted: reactDom.autoUpdate,
-    });
-    React__namespace.useLayoutEffect(() => {
-        if (fullWidth) {
-            setWidth(source.current.offsetWidth);
-        }
-    }, [fullWidth, source]);
-    // aria-hide everything except the content (better supported equivalent to setting aria-modal)
-    React__namespace.useEffect(() => {
-        if (content)
-            return ariaHidden.hideOthers(content);
-    }, [content]);
-    const handleDismiss = uiPrimitives.useCallbackRef(onDismiss);
-    React__namespace.useEffect(() => {
-        const close = () => {
-            handleDismiss();
-        };
-        window.addEventListener('blur', close);
-        window.addEventListener('resize', close);
-        return () => {
-            window.removeEventListener('blur', close);
-            window.removeEventListener('resize', close);
-        };
-    }, [handleDismiss]);
-    const composedRefs = useComposeRefs.useComposedRefs(forwardedRef, (node) => setContent(node), refs.setFloating);
-    return (jsxRuntime.jsx(reactRemoveScroll.RemoveScroll, { allowPinchZoom: true, children: jsxRuntime.jsx(reactFocusScope.FocusScope, { asChild: true, loop: true, 
-            // we make sure we're not trapping once it's been closed
-            // (closed !== unmounted when animating out)
-            trapped: true, onUnmountAutoFocus: (event) => {
-                event.preventDefault();
-                if (!isRightClickOutsideRef.current)
-                    source.current?.focus({ preventScroll: true });
-            }, children: jsxRuntime.jsx(index.DismissibleLayer, { asChild: true, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: uiPrimitives.composeEventHandlers(onPointerDownOutside, (event) => {
-                    const originalEvent = event.detail.originalEvent;
-                    const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-                    const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-                    isRightClickOutsideRef.current = isRightClick;
-                }, { checkForDefaultPrevented: false }), 
-                // When focus is trapped, a `focusout` event may still happen.
-                // We make sure we don't trigger our `onDismiss` in such case.
-                onFocusOutside: uiPrimitives.composeEventHandlers(onFocusOutside, (event) => event.preventDefault(), {
-                    checkForDefaultPrevented: false,
-                }), onDismiss: onDismiss, children: jsxRuntime.jsx(PopoverWrapper, { ref: composedRefs, style: {
-                        left: x,
-                        top: y,
-                        position: strategy,
-                        width: width || undefined,
-                    }, hasRadius: true, background: "neutral0", padding: 1, ...props, children: children }) }) }) }));
-});
-const Scrolling = ({ children, intersectionId, onReachEnd, ...props }) => {
-    const popoverRef = React__namespace.useRef(null);
-    const generatedIntersectionId = useId.useId();
-    useIntersection.useIntersection(popoverRef, onReachEnd ?? (() => { }), {
-        selectorToWatch: `#${strings.stripReactIdOfColon(generatedIntersectionId)}`,
-        skipWhen: !intersectionId || !onReachEnd,
-    });
-    return (jsxRuntime.jsxs(PopoverScrollable, { ref: popoverRef, ...props, children: [children, intersectionId && onReachEnd && (jsxRuntime.jsx(Box.Box, { id: strings.stripReactIdOfColon(generatedIntersectionId), width: "100%", height: "1px" }))] }));
-};
-const PopoverScrollable = styled__default.default(Box.Box) `
-  // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
-  max-height: ${3 * 5}rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: ${({ theme }) => theme.colors.neutral0};
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.colors.neutral150};
-    border-radius: ${({ theme }) => theme.borderRadius};
-    margin-right: 10px;
-  }
-`;
-const Popover = ({ children, source, spacing, fullWidth, placement, centered, onEscapeKeyDown, onPointerDownOutside, onDismiss, ...restProps }) => {
-    return (jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(Content, { source: source, spacing: spacing, fullWidth: fullWidth, placement: placement, centered: centered, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onDismiss: onDismiss, children: jsxRuntime.jsx(Scrolling, { ...restProps, children: children }) }) }));
-};
-
-exports.Content = Content;
-exports.POPOVER_PLACEMENTS = POPOVER_PLACEMENTS;
-exports.Popover = Popover;
-exports.Scrolling = Scrolling;

package/dist/Popover/Popover.mjs

@@ -1,136 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useFloating, offset, shift, flip, autoUpdate } from '@floating-ui/react-dom';
-import { FocusScope } from '@radix-ui/react-focus-scope';
-import { useCallbackRef, composeEventHandlers } from '@strapi/ui-primitives';
-import { hideOthers } from 'aria-hidden';
-import { RemoveScroll } from 'react-remove-scroll';
-import styled from 'styled-components';
-import { DismissibleLayer } from '../DismissibleLayer/index.mjs';
-import { stripReactIdOfColon } from '../helpers/strings.mjs';
-import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { useIntersection } from '../hooks/useIntersection.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Portal } from '../Portal/Portal.mjs';
-
-const POPOVER_PLACEMENTS = [
-    'top',
-    'top-start',
-    'top-end',
-    'right',
-    'right-start',
-    'right-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'left',
-    'left-start',
-    'left-end',
-];
-const PopoverWrapper = styled(Box) `
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  z-index: ${({ theme }) => theme.zIndices[0]};
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const Content = React.forwardRef(({ source, children, spacing = 0, fullWidth = false, placement = 'bottom-start', centered = false, onEscapeKeyDown, onPointerDownOutside, onDismiss, onFocusOutside, ...props }, forwardedRef) => {
-    const [content, setContent] = React.useState(null);
-    const [width, setWidth] = React.useState(undefined);
-    const isRightClickOutsideRef = React.useRef(false);
-    const { x, y, refs, strategy } = useFloating({
-        strategy: 'fixed',
-        placement: centered ? 'bottom' : placement,
-        middleware: [
-            offset({
-                mainAxis: spacing,
-            }),
-            shift(),
-            flip(),
-        ],
-        elements: {
-            reference: source.current,
-        },
-        whileElementsMounted: autoUpdate,
-    });
-    React.useLayoutEffect(() => {
-        if (fullWidth) {
-            setWidth(source.current.offsetWidth);
-        }
-    }, [fullWidth, source]);
-    // aria-hide everything except the content (better supported equivalent to setting aria-modal)
-    React.useEffect(() => {
-        if (content)
-            return hideOthers(content);
-    }, [content]);
-    const handleDismiss = useCallbackRef(onDismiss);
-    React.useEffect(() => {
-        const close = () => {
-            handleDismiss();
-        };
-        window.addEventListener('blur', close);
-        window.addEventListener('resize', close);
-        return () => {
-            window.removeEventListener('blur', close);
-            window.removeEventListener('resize', close);
-        };
-    }, [handleDismiss]);
-    const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node), refs.setFloating);
-    return (jsx(RemoveScroll, { allowPinchZoom: true, children: jsx(FocusScope, { asChild: true, loop: true, 
-            // we make sure we're not trapping once it's been closed
-            // (closed !== unmounted when animating out)
-            trapped: true, onUnmountAutoFocus: (event) => {
-                event.preventDefault();
-                if (!isRightClickOutsideRef.current)
-                    source.current?.focus({ preventScroll: true });
-            }, children: jsx(DismissibleLayer, { asChild: true, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: composeEventHandlers(onPointerDownOutside, (event) => {
-                    const originalEvent = event.detail.originalEvent;
-                    const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-                    const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-                    isRightClickOutsideRef.current = isRightClick;
-                }, { checkForDefaultPrevented: false }), 
-                // When focus is trapped, a `focusout` event may still happen.
-                // We make sure we don't trigger our `onDismiss` in such case.
-                onFocusOutside: composeEventHandlers(onFocusOutside, (event) => event.preventDefault(), {
-                    checkForDefaultPrevented: false,
-                }), onDismiss: onDismiss, children: jsx(PopoverWrapper, { ref: composedRefs, style: {
-                        left: x,
-                        top: y,
-                        position: strategy,
-                        width: width || undefined,
-                    }, hasRadius: true, background: "neutral0", padding: 1, ...props, children: children }) }) }) }));
-});
-const Scrolling = ({ children, intersectionId, onReachEnd, ...props }) => {
-    const popoverRef = React.useRef(null);
-    const generatedIntersectionId = useId();
-    useIntersection(popoverRef, onReachEnd ?? (() => { }), {
-        selectorToWatch: `#${stripReactIdOfColon(generatedIntersectionId)}`,
-        skipWhen: !intersectionId || !onReachEnd,
-    });
-    return (jsxs(PopoverScrollable, { ref: popoverRef, ...props, children: [children, intersectionId && onReachEnd && (jsx(Box, { id: stripReactIdOfColon(generatedIntersectionId), width: "100%", height: "1px" }))] }));
-};
-const PopoverScrollable = styled(Box) `
-  // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
-  max-height: ${3 * 5}rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: ${({ theme }) => theme.colors.neutral0};
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.colors.neutral150};
-    border-radius: ${({ theme }) => theme.borderRadius};
-    margin-right: 10px;
-  }
-`;
-const Popover = ({ children, source, spacing, fullWidth, placement, centered, onEscapeKeyDown, onPointerDownOutside, onDismiss, ...restProps }) => {
-    return (jsx(Portal, { children: jsx(Content, { source: source, spacing: spacing, fullWidth: fullWidth, placement: placement, centered: centered, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onDismiss: onDismiss, children: jsx(Scrolling, { ...restProps, children: children }) }) }));
-};
-
-export { Content, POPOVER_PLACEMENTS, Popover, Scrolling };

package/dist/Popover/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Popover = require('./Popover.js');
-const primitives = require('./primitives.js');
-
-
-
-exports.POPOVER_PLACEMENTS = Popover.POPOVER_PLACEMENTS;
-exports.Popover = Popover.Popover;
-exports.PopoverPrimitives = primitives;

package/dist/Popover/index.mjs

@@ -1,3 +0,0 @@
-export { POPOVER_PLACEMENTS, Popover } from './Popover.mjs';
-import * as primitives from './primitives.mjs';
-export { primitives as PopoverPrimitives };

package/dist/Popover/primitives.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Popover = require('./Popover.js');
-
-
-
-exports.Content = Popover.Content;
-exports.Scrolling = Popover.Scrolling;

package/dist/Popover/primitives.mjs

@@ -1 +0,0 @@
-export { Content, Scrolling } from './Popover.mjs';

package/dist/Portal/Portal.js

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const reactDom = require('react-dom');
-const Box = require('../Box/Box.js');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-    if (e) {
-        for (const k in e) {
-            if (k !== 'default') {
-                const d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: () => e[k]
-                });
-            }
-        }
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-const Portal = React__namespace.forwardRef(({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
-    return container ? reactDom.createPortal(jsxRuntime.jsx(Box.Box, { ref: forwardedRef, ...portalProps }), container) : null;
-});
-Portal.displayName = 'Portal';
-
-exports.Portal = Portal;

package/dist/Portal/Portal.mjs

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-import { Box } from '../Box/Box.mjs';
-
-const Portal = React.forwardRef(({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
-    return container ? createPortal(jsx(Box, { ref: forwardedRef, ...portalProps }), container) : null;
-});
-Portal.displayName = 'Portal';
-
-export { Portal };