@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.1

package/dist/v2/Pagination/Pagination.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export interface PaginationProps {
-    activePage: number;
-    children: React.ReactNode;
-    label?: string;
-    pageCount: number;
-}
-export declare const Pagination: ({ children, label, activePage, pageCount }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/v2/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/v2/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/v2/Pagination/PaginationContext.d.ts

@@ -1,6 +0,0 @@
-export interface PaginationContextValue {
-    activePage: number;
-    pageCount: number;
-}
-export declare const PaginationContext: import("react").Context<PaginationContextValue>;
-export declare const usePagination: () => PaginationContextValue;

package/dist/v2/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/v2/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/v2/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/v2/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/v2/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/v2/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/v2/Pagination/components.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { BaseLinkProps } from '../../BaseLink';
-import { BoxProps } from '../../Box';
-interface PaginationLinkProps extends BaseLinkProps {
-    active: boolean;
-}
-interface PaginationPageLinkProps extends PaginationLinkProps {
-    number: number;
-}
-interface DotsProps extends BoxProps {
-}
-export declare const PreviousLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export declare const NextLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export declare const PageLink: React.ForwardRefExoticComponent<PaginationPageLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export declare const Dots: ({ children, ...props }: DotsProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/v2/Pagination/components.js

@@ -1,83 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const PaginationContext = require('./PaginationContext.js');
-const utils = require('../../themes/utils.js');
-const BaseLink = require('../../BaseLink/BaseLink.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 React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const transientProps = {
-    active: true,
-};
-const LinkWrapper = styled__default.default(BaseLink.BaseLink).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 = React__default.default.forwardRef(({ children, ...props }, ref) => {
-    const { activePage } = PaginationContext.usePagination();
-    const disabled = activePage === 1;
-    return (jsxRuntime.jsxs(ActionLinkWrapper, { ref: ref, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(icons.ChevronLeft, { "aria-hidden": true })] }));
-});
-const NextLink = React__default.default.forwardRef(({ children, ...props }, ref) => {
-    const { activePage, pageCount } = PaginationContext.usePagination();
-    const disabled = activePage === pageCount;
-    return (jsxRuntime.jsxs(ActionLinkWrapper, { ref: ref, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(icons.ChevronRight, { "aria-hidden": true })] }));
-});
-const PageLink = React__default.default.forwardRef(({ number, children, ...props }, ref) => {
-    const { activePage } = PaginationContext.usePagination();
-    const isActive = activePage === number;
-    return (jsxRuntime.jsxs(PageLinkWrapper, { ref: ref, ...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 })] }));
-});
-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/v2/Pagination/components.mjs

@@ -1,71 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { ChevronLeft, ChevronRight } from '@strapi/icons';
-import styled from 'styled-components';
-import { usePagination } from './PaginationContext.mjs';
-import { buttonFocusStyle } from '../../themes/utils.mjs';
-import { BaseLink } from '../../BaseLink/BaseLink.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(BaseLink).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 = React__default.forwardRef(({ children, ...props }, ref) => {
-    const { activePage } = usePagination();
-    const disabled = activePage === 1;
-    return (jsxs(ActionLinkWrapper, { ref: ref, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(ChevronLeft, { "aria-hidden": true })] }));
-});
-const NextLink = React__default.forwardRef(({ children, ...props }, ref) => {
-    const { activePage, pageCount } = usePagination();
-    const disabled = activePage === pageCount;
-    return (jsxs(ActionLinkWrapper, { ref: ref, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(ChevronRight, { "aria-hidden": true })] }));
-});
-const PageLink = React__default.forwardRef(({ number, children, ...props }, ref) => {
-    const { activePage } = usePagination();
-    const isActive = activePage === number;
-    return (jsxs(PageLinkWrapper, { ref: ref, ...props, active: isActive, children: [jsx(VisuallyHidden, { children: children }), jsx(Typography, { "aria-hidden": true, fontWeight: isActive ? 'bold' : undefined, lineHeight: "revert", variant: "pi", children: number })] }));
-});
-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/v2/Pagination/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Pagination';
-export * from './components';

package/dist/v2/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/v2/Pagination/index.mjs

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

package/dist/v2/SimpleMenu/Menu.d.ts

@@ -1,56 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { BaseLink } from '../../BaseLink';
-import { BoxProps } from '../../Box';
-import { ButtonProps } from '../../Button';
-import { FlexProps } from '../../Flex';
-import { POPOVER_PLACEMENTS } from '../../Popover';
-import { TypographyProps } from '../../Typography';
-import { LinkProps } from '../Link';
-interface RootProps extends DropdownMenu.DropdownMenuProps {
-}
-interface TriggerProps extends ButtonProps {
-}
-interface ContentProps extends FlexProps<'div'> {
-    intersectionId?: string;
-    popoverPlacement?: (typeof POPOVER_PLACEMENTS)[number];
-}
-interface ItemSharedProps extends Pick<DropdownMenu.MenuItemProps, 'disabled' | 'onSelect'> {
-    children?: React.ReactNode;
-    isExternal?: boolean;
-    isFocused?: boolean;
-}
-interface ItemExternalLinkProps extends ItemSharedProps, Omit<LinkProps, 'onSelect'> {
-    as?: never;
-    isLink?: false;
-    isExternal?: true;
-}
-type ItemInternalLinkProps<TComponent extends React.ComponentType = typeof BaseLink> = ItemSharedProps & ComponentPropsWithoutRef<TComponent> & {
-    as?: TComponent;
-    isLink?: true;
-    isExternal?: false;
-};
-interface ItemButtonProps extends ItemSharedProps, Omit<BoxProps<'button'>, 'onSelect'> {
-    as?: never;
-    isLink?: false;
-    isExternal?: false;
-}
-type ItemProps<TComponent extends React.ComponentType = typeof BaseLink> = ItemButtonProps | ItemInternalLinkProps<TComponent> | ItemExternalLinkProps;
-interface LabelProps extends TypographyProps {
-}
-interface SubRootProps extends DropdownMenu.DropdownMenuSubProps {
-}
-interface SubTriggerProps extends BoxProps<'button'> {
-}
-interface SubContentProps extends FlexProps<'div'> {
-}
-declare const Root: import("react").FC<DropdownMenu.DropdownMenuProps>;
-declare const Trigger: import("react").ForwardRefExoticComponent<TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const Content: import("react").ForwardRefExoticComponent<ContentProps & import("react").RefAttributes<HTMLDivElement>>;
-declare const Item: ({ onSelect, disabled, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
-declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
-declare const SubRoot: import("react").FC<DropdownMenu.DropdownMenuSubProps>;
-declare const SubTrigger: import("react").ForwardRefExoticComponent<SubTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const SubContent: import("react").ForwardRefExoticComponent<SubContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export { Root, Trigger, Content, Item, Label, SubRoot, SubTrigger, SubContent };
-export type { TriggerProps, ContentProps, ItemProps, RootProps, SubRootProps, SubTriggerProps, SubContentProps, LabelProps, };

package/dist/v2/SimpleMenu/Menu.js

@@ -1,146 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const DropdownMenu = require('@radix-ui/react-dropdown-menu');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const theme = require('../../helpers/theme.js');
-const Link = require('../Link/Link.js');
-const Button = require('../../Button/Button.js');
-const Box = require('../../Box/Box.js');
-const Flex = require('../../Flex/Flex.js');
-const Typography = require('../../Typography/Typography.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 DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const MenuRoot = DropdownMenu__namespace.Root;
-const MenuTrigger = React.forwardRef(({ size, endIcon = jsxRuntime.jsx(icons.CarretDown, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": true }), ...props }, ref) => {
-    return (jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: jsxRuntime.jsx(Button.Button, { ref: ref, type: "button", variant: "ghost", endIcon: endIcon, paddingTop: size === 'S' ? 1 : 2, paddingBottom: size === 'S' ? 1 : 2, paddingLeft: size === 'S' ? 3 : 4, paddingRight: size === 'S' ? 3 : 4, ...props }) }));
-});
-const MenuContent = React.forwardRef(({ children, intersectionId, popoverPlacement = 'bottom-start', ...props }, ref) => {
-    const [side, align] = popoverPlacement.split('-');
-    return (jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenu__namespace.Content, { align: align, side: side, loop: true, asChild: true, children: jsxRuntime.jsxs(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...props, children: [children, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) }));
-});
-const Viewport = styled__default.default(Flex.Flex) `
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const MenuItem = ({ onSelect, disabled = false, ...props }) => {
-    return (jsxRuntime.jsx(DropdownMenu__namespace.Item, { asChild: true, onSelect: onSelect, disabled: disabled, children: props.isLink || props.isExternal ? (jsxRuntime.jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: jsxRuntime.jsx(Typography.Typography, { children: props.children }) })) : (jsxRuntime.jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: jsxRuntime.jsx(Typography.Typography, { children: props.children }) })) }));
-};
-const getOptionStyle = ({ theme }) => styled.css `
-  text-align: left;
-  width: 100%;
-  border-radius: ${theme.borderRadius};
-  padding: ${theme.spaces[2]} ${theme.spaces[4]};
-
-  ${Typography.Typography} {
-    color: inherit;
-  }
-
-  &[aria-disabled] {
-    cursor: not-allowed;
-
-    ${Typography.Typography} {
-      color: ${theme.colors.neutral500};
-    }
-  }
-
-  &[data-highlighted] {
-    background-color: ${theme.colors.primary100};
-  }
-
-  &:focus-visible {
-    outline: none;
-
-    &:after {
-      content: none;
-    }
-  }
-`;
-const OptionButton = styled__default.default(Flex.Flex) `
-  ${getOptionStyle}
-`;
-const OptionLink = styled__default.default(Link.Link) `
-  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
-  color: ${({ theme: theme$1, color }) => theme.extractStyleFromTheme(theme$1.colors, color, undefined)};
-  text-decoration: none;
-
-  &:hover {
-    color: unset;
-  }
-
-  svg > path,
-  &:focus-visible svg > path {
-    fill: currentColor;
-  }
-
-  ${getOptionStyle}
-`;
-const MenuLabel = React.forwardRef((props, ref) => (jsxRuntime.jsx(DropdownMenu__namespace.Label, { asChild: true, children: jsxRuntime.jsx(StyledLabel, { ref: ref, variant: "sigma", textColor: "neutral600", ...props }) })));
-const StyledLabel = styled__default.default(Typography.Typography) `
-  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
-`;
-const MenuSubRoot = DropdownMenu__namespace.Sub;
-const MenuSubTrigger = React.forwardRef(({ disabled = false, ...props }, ref) => {
-    return (jsxRuntime.jsx(DropdownMenu__namespace.SubTrigger, { asChild: true, disabled: disabled, children: jsxRuntime.jsxs(SubmenuTrigger, { ref: ref, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...props, children: [jsxRuntime.jsx(Typography.Typography, { children: props.children }), jsxRuntime.jsx(TriggerArrow, { height: 12, width: 12 })] }) }));
-});
-const SubmenuTrigger = styled__default.default(OptionButton) `
-  &[data-state='open'] {
-    background-color: ${({ theme }) => theme.colors.primary100};
-  }
-`;
-const TriggerArrow = styled__default.default(icons.ChevronRight) `
-  path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-const MenuSubContent = React.forwardRef((props, ref) => {
-    return (jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenu__namespace.SubContent, { sideOffset: 8, asChild: true, children: jsxRuntime.jsx(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...props }) }) }));
-});
-const Root = MenuRoot;
-const Trigger = MenuTrigger;
-const Content = MenuContent;
-const Item = MenuItem;
-const Label = MenuLabel;
-const SubRoot = MenuSubRoot;
-const SubTrigger = MenuSubTrigger;
-const SubContent = MenuSubContent;
-
-exports.Content = Content;
-exports.Item = Item;
-exports.Label = Label;
-exports.Root = Root;
-exports.SubContent = SubContent;
-exports.SubRoot = SubRoot;
-exports.SubTrigger = SubTrigger;
-exports.Trigger = Trigger;

package/dist/v2/SimpleMenu/Menu.mjs

@@ -1,112 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { CarretDown, ChevronRight } from '@strapi/icons';
-import styled, { css } from 'styled-components';
-import { extractStyleFromTheme } from '../../helpers/theme.mjs';
-import { Link } from '../Link/Link.mjs';
-import { Button } from '../../Button/Button.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-
-const MenuRoot = DropdownMenu.Root;
-const MenuTrigger = forwardRef(({ size, endIcon = jsx(CarretDown, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": true }), ...props }, ref) => {
-    return (jsx(DropdownMenu.Trigger, { asChild: true, children: jsx(Button, { ref: ref, type: "button", variant: "ghost", endIcon: endIcon, paddingTop: size === 'S' ? 1 : 2, paddingBottom: size === 'S' ? 1 : 2, paddingLeft: size === 'S' ? 3 : 4, paddingRight: size === 'S' ? 3 : 4, ...props }) }));
-});
-const MenuContent = forwardRef(({ children, intersectionId, popoverPlacement = 'bottom-start', ...props }, ref) => {
-    const [side, align] = popoverPlacement.split('-');
-    return (jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.Content, { align: align, side: side, loop: true, asChild: true, children: jsxs(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...props, children: [children, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) }));
-});
-const Viewport = styled(Flex) `
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const MenuItem = ({ onSelect, disabled = false, ...props }) => {
-    return (jsx(DropdownMenu.Item, { asChild: true, onSelect: onSelect, disabled: disabled, children: props.isLink || props.isExternal ? (jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: jsx(Typography, { children: props.children }) })) : (jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: jsx(Typography, { children: props.children }) })) }));
-};
-const getOptionStyle = ({ theme }) => css `
-  text-align: left;
-  width: 100%;
-  border-radius: ${theme.borderRadius};
-  padding: ${theme.spaces[2]} ${theme.spaces[4]};
-
-  ${Typography} {
-    color: inherit;
-  }
-
-  &[aria-disabled] {
-    cursor: not-allowed;
-
-    ${Typography} {
-      color: ${theme.colors.neutral500};
-    }
-  }
-
-  &[data-highlighted] {
-    background-color: ${theme.colors.primary100};
-  }
-
-  &:focus-visible {
-    outline: none;
-
-    &:after {
-      content: none;
-    }
-  }
-`;
-const OptionButton = styled(Flex) `
-  ${getOptionStyle}
-`;
-const OptionLink = styled(Link) `
-  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
-  color: ${({ theme, color }) => extractStyleFromTheme(theme.colors, color, undefined)};
-  text-decoration: none;
-
-  &:hover {
-    color: unset;
-  }
-
-  svg > path,
-  &:focus-visible svg > path {
-    fill: currentColor;
-  }
-
-  ${getOptionStyle}
-`;
-const MenuLabel = forwardRef((props, ref) => (jsx(DropdownMenu.Label, { asChild: true, children: jsx(StyledLabel, { ref: ref, variant: "sigma", textColor: "neutral600", ...props }) })));
-const StyledLabel = styled(Typography) `
-  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
-`;
-const MenuSubRoot = DropdownMenu.Sub;
-const MenuSubTrigger = forwardRef(({ disabled = false, ...props }, ref) => {
-    return (jsx(DropdownMenu.SubTrigger, { asChild: true, disabled: disabled, children: jsxs(SubmenuTrigger, { ref: ref, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...props, children: [jsx(Typography, { children: props.children }), jsx(TriggerArrow, { height: 12, width: 12 })] }) }));
-});
-const SubmenuTrigger = styled(OptionButton) `
-  &[data-state='open'] {
-    background-color: ${({ theme }) => theme.colors.primary100};
-  }
-`;
-const TriggerArrow = styled(ChevronRight) `
-  path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-const MenuSubContent = forwardRef((props, ref) => {
-    return (jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.SubContent, { sideOffset: 8, asChild: true, children: jsx(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...props }) }) }));
-});
-const Root = MenuRoot;
-const Trigger = MenuTrigger;
-const Content = MenuContent;
-const Item = MenuItem;
-const Label = MenuLabel;
-const SubRoot = MenuSubRoot;
-const SubTrigger = MenuSubTrigger;
-const SubContent = MenuSubContent;
-
-export { Content, Item, Label, Root, SubContent, SubRoot, SubTrigger, Trigger };