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

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.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 };

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

@@ -1,62 +0,0 @@
-import * as Menu from './Menu';
-interface SimpleMenuProps extends Omit<Menu.TriggerProps, 'children'>, Pick<Menu.ContentProps, 'popoverPlacement' | 'intersectionId'> {
-    children?: React.ReactNode;
-    label?: React.ReactNode;
-    onOpen?: () => void;
-    onClose?: () => void;
-    /**
-     * Callback function to be called when the popover reaches the end of the scrollable content
-     */
-    onReachEnd?: (entry: IntersectionObserverEntry) => void;
-}
-declare const SimpleMenu: ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }: SimpleMenuProps) => import("react/jsx-runtime").JSX.Element;
-declare const MenuItem: ({ onSelect, disabled, ...props }: Menu.ItemProps<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
-    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
-    background?: import("../../types").DefaultThemeOrCSSProp<"colors", "background">;
-    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
-    borderColor?: keyof import("../../themes/colors").Colors | undefined;
-    color?: keyof import("../../themes/colors").Colors | undefined;
-    flex?: import("csstype").Property.Flex<string | number> | undefined;
-    fontSize?: import("../../types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
-    grow?: import("csstype").Property.FlexGrow | undefined;
-    hasRadius?: boolean | undefined;
-    hiddenS?: boolean | undefined;
-    hiddenXS?: boolean | undefined;
-    padding?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"padding">; /**
-     * We need to know when the select is open because only then will viewportRef
-     * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
-     */
-    paddingBottom?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
-    paddingLeft?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
-    paddingRight?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
-    paddingTop?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
-    marginLeft?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
-    marginBottom?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
-    marginRight?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
-    marginTop?: import("../../helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
-    shadow?: keyof import("../../themes/colors").Shadows | undefined;
-    shrink?: import("csstype").Property.FlexShrink | undefined;
-    lineHeight?: import("../../types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
-    width?: import("../../types").DefaultThemeOrCSSProp<"spaces", "width">;
-    minWidth?: import("../../types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
-    maxWidth?: import("../../types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
-    height?: import("../../types").DefaultThemeOrCSSProp<"spaces", "height">;
-    minHeight?: import("../../types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
-    maxHeight?: import("../../types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
-    top?: import("../../types").DefaultThemeOrCSSProp<"spaces", "top">;
-    left?: import("../../types").DefaultThemeOrCSSProp<"spaces", "left">;
-    bottom?: import("../../types").DefaultThemeOrCSSProp<"spaces", "bottom">;
-    right?: import("../../types").DefaultThemeOrCSSProp<"spaces", "right">;
-    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
-    borderStyle?: import("csstype").Property.BorderStyle | undefined;
-    borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
-    children?: import("react").ReactNode;
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    disabled?: boolean | undefined;
-    isExternal?: boolean | undefined;
-} & import("react").RefAttributes<HTMLAnchorElement>>>) => import("react/jsx-runtime").JSX.Element;
-type MenuItemProps = Menu.ItemProps;
-export { SimpleMenu, MenuItem, Menu };
-export type { SimpleMenuProps, MenuItemProps };