@strapi/design-system 1.9.0 → 1.10.0

package/dist/SimpleMenu/SimpleMenu.js

@@ -1,28 +1,40 @@
-import { jsx as t, jsxs as F } from "react/jsx-runtime";
-import x, { useRef as S, useEffect as E, useState as $, Children as _, cloneElement as H } from "react";
-import { CarretDown as U } from "@strapi/icons";
-import { useCallbackRef as P } from "@strapi/ui-primitives";
-import { NavLink as q } from "react-router-dom";
-import m from "styled-components";
-import { getOptionStyle as b } from "./utils.js";
-import { KeyboardKeys as r } from "../helpers/keyboardKeys.js";
-import { useId as z } from "../hooks/useId.js";
-import { Link as G } from "../Link/Link.js";
-import { Button as L } from "../Button/Button.js";
-import { Popover as J } from "../Popover/Popover.js";
-import { Box as k } from "../Box/Box.js";
-import { Typography as R } from "../Typography/Typography.js";
-import { Flex as Q } from "../Flex/Flex.js";
-const X = m.button`
+'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 uiPrimitives = require('@strapi/ui-primitives');
+const reactRouterDom = require('react-router-dom');
+const styled = require('styled-components');
+const utils = require('./utils.js');
+const keyboardKeys = require('../helpers/keyboardKeys.js');
+const useId = require('../hooks/useId.js');
+const Link = require('../Link/Link.js');
+const Button = require('../Button/Button.js');
+const Popover = require('../Popover/Popover.js');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const OptionButton = styled__default.default.button `
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${b}
-`, Y = m(q)`
+  ${utils.getOptionStyle}
+`;
+const OptionLink = styled__default.default(reactRouterDom.NavLink) `
   text-decoration: none;
-  ${b}
-`, Z = m(G)`
+  ${utils.getOptionStyle}
+`;
+const OptionExternalLink = styled__default.default(Link.Link) `
   /* Removing Link hover effect */
   &:hover {
     color: currentColor;
@@ -30,80 +42,147 @@ const X = m.button`
 
   &:focus-visible {
     /* Removing Link focus-visible after properties and reset to global outline */
-    outline: 2px solid ${({ theme: n }) => n.colors.primary600};
+    outline: 2px solid ${({ theme }) => theme.colors.primary600};
     outline-offset: 2px;
     &:after {
       content: none;
     }
   }
 
-  ${b}
-`, ee = m.span`
+  ${utils.getOptionStyle}
+`;
+const IconWrapper = styled__default.default.span `
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, ne = m(L)`
-  padding: ${({ theme: n }) => `${n.spaces[1]} ${n.spaces[3]}`};
-`, xe = ({ children: n, onClick: h = () => {
-}, to: i, isFocused: s = !1, href: c, ...D }) => {
-  const a = S();
-  E(() => {
-    s && a.current && a.current.focus();
-  }, [s]);
-  const l = {
-    tabIndex: s ? 0 : -1,
-    ref: a,
-    role: "menuitem",
-    ...D
-  }, u = (y) => {
-    (y.key === r.SPACE || y.key === r.ENTER) && h();
-  };
-  return i && !c ? t(Y, { to: i, ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) }) : c && !i ? t(Z, { isExternal: !0, href: c, ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) }) : t(X, { onKeyDown: u, onMouseDown: h, type: "button", ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) });
-}, Ee = ({ label: n, children: h, id: i, as: s, onOpen: c = () => {
-}, onClose: D = () => {
-}, size: a = "M", popoverPlacement: l = "bottom-start", onReachEnd: u, ...y }) => {
-  const d = S(void 0), I = z(i), C = S(!1), [f, p] = $(!1), [v, w] = $(0), g = _.toArray(h), O = s || (a === "S" ? ne : L), B = !!u && typeof u == "function";
-  E(() => {
-    if (["string", "number"].includes(typeof n)) {
-      const e = g.findIndex((o) => x.isValidElement(o) && o.props.children === n || o === n);
-      e !== -1 && w(e);
+`;
+const StyledButtonSmall = styled__default.default(Button.Button) `
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[3]}`};
+`;
+const MenuItem = ({ children, onClick = () => { }, to, isFocused = false, href, ...props }) => {
+    const menuItemRef = React.useRef();
+    React.useEffect(() => {
+        if (isFocused && menuItemRef.current) {
+            menuItemRef.current.focus();
+        }
+    }, [isFocused]);
+    const menuItemProps = {
+        tabIndex: isFocused ? 0 : -1,
+        ref: menuItemRef,
+        role: 'menuitem',
+        ...props,
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === keyboardKeys.KeyboardKeys.SPACE || e.key === keyboardKeys.KeyboardKeys.ENTER) {
+            onClick();
+        }
+    };
+    if (to && !href) {
+        return (jsxRuntime.jsx(OptionLink, { to: to, ...menuItemProps, children: jsxRuntime.jsx(Box.Box, { padding: 2, children: jsxRuntime.jsx(Typography.Typography, { children: children }) }) }));
     }
-  }, [n]);
-  const K = P(c), M = P(D);
-  E(() => {
-    C?.current ? f ? K() : M() : C.current = !0;
-  }, [C, M, K, f]), E(() => {
-    x.isValidElement(n) && v === -1 && d.current.focus();
-  }, [n, v]);
-  const T = (e) => {
-    f && (e.key === r.ESCAPE && (e.stopPropagation(), p(!1), d.current.focus()), e.key === r.DOWN && w((o) => o === g.length - 1 ? 0 : o + 1), e.key === r.UP && w((o) => o === 0 ? g.length - 1 : o - 1));
-  }, A = (e) => {
-    (e.key === r.ENTER || e.key === r.SPACE) && p((o) => !o);
-  }, V = (e) => {
-    e.preventDefault(), e.currentTarget.contains(e.relatedTarget) || p(!1);
-  }, N = (e) => {
-    e.preventDefault(), p((o) => !o);
-  }, j = () => {
-    B && u();
-  }, W = g.map((e, o) => (
+    if (href && !to) {
+        return (jsxRuntime.jsx(OptionExternalLink, { isExternal: true, href: href, ...menuItemProps, children: jsxRuntime.jsx(Box.Box, { padding: 2, children: jsxRuntime.jsx(Typography.Typography, { children: children }) }) }));
+    }
+    return (jsxRuntime.jsx(OptionButton, { onKeyDown: handleKeyDown, onMouseDown: onClick, type: "button", ...menuItemProps, children: jsxRuntime.jsx(Box.Box, { padding: 2, children: jsxRuntime.jsx(Typography.Typography, { children: children }) }) }));
+};
+const SimpleMenu = ({ label, children, id, as: asComp, onOpen = () => { }, onClose = () => { }, size = 'M', popoverPlacement = 'bottom-start', onReachEnd, ...props }) => {
+    const menuButtonRef = React.useRef(undefined);
+    const menuId = useId.useId(id);
+    const didMount = React.useRef(false);
+    const [visible, setVisible] = React.useState(false);
+    const [focusedItemIndex, setFocusItem] = React.useState(0);
+    const childrenArray = React.Children.toArray(children);
+    const DefaultComponent = size === 'S' ? StyledButtonSmall : Button.Button;
+    const Component = asComp || DefaultComponent;
+    const shouldHandleReachEnd = !!onReachEnd && typeof onReachEnd === 'function';
+    React.useEffect(() => {
+        if (['string', 'number'].includes(typeof label)) {
+            // Useful to focus the selected item in the list
+            const defaultItemIndexToFocus = childrenArray.findIndex((c) => (React__default.default.isValidElement(c) && c.props.children === label) || c === label);
+            if (defaultItemIndexToFocus !== -1) {
+                setFocusItem(defaultItemIndexToFocus);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [label]);
+    const handleOpen = uiPrimitives.useCallbackRef(onOpen);
+    const handleClose = uiPrimitives.useCallbackRef(onClose);
+    React.useEffect(() => {
+        if (didMount?.current) {
+            if (visible) {
+                handleOpen();
+            }
+            else {
+                handleClose();
+            }
+        }
+        else {
+            didMount.current = true;
+        }
+    }, [didMount, handleClose, handleOpen, visible]);
+    /* in case `label` is a custom react component, we know it is going to be
+        a child of the menu button.
+    */
+    React.useEffect(() => {
+        if (React__default.default.isValidElement(label) && focusedItemIndex === -1) {
+            menuButtonRef.current.focus();
+        }
+    }, [label, focusedItemIndex]);
+    const handleWrapperKeyDown = (e) => {
+        if (visible) {
+            if (e.key === keyboardKeys.KeyboardKeys.ESCAPE) {
+                e.stopPropagation();
+                setVisible(false);
+                menuButtonRef.current.focus();
+            }
+            if (e.key === keyboardKeys.KeyboardKeys.DOWN) {
+                setFocusItem((prev) => (prev === childrenArray.length - 1 ? 0 : prev + 1));
+            }
+            if (e.key === keyboardKeys.KeyboardKeys.UP) {
+                setFocusItem((prev) => (prev === 0 ? childrenArray.length - 1 : prev - 1));
+            }
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === keyboardKeys.KeyboardKeys.ENTER || e.key === keyboardKeys.KeyboardKeys.SPACE) {
+            setVisible((prevVisible) => !prevVisible);
+        }
+    };
+    const handleBlur = (e) => {
+        e.preventDefault();
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setVisible(false);
+        }
+    };
+    const handleMenuButtonMouseDown = (e) => {
+        e.preventDefault();
+        setVisible((prevVisible) => !prevVisible);
+    };
+    const handleReachEnd = () => {
+        if (shouldHandleReachEnd) {
+            onReachEnd();
+        }
+    };
+    const childrenClone = childrenArray.map((child, index) => (
     // eslint-disable-next-line react/no-array-index-key
-    t(Q, { as: "li", justifyContent: "center", role: "menuitem", children: x.isValidElement(e) ? H(e, {
-      onClick() {
-        e.props.onClick(), p(!1), d.current.focus();
-      },
-      isFocused: v === o
-    }) : e }, o)
-  ));
-  return (
+    jsxRuntime.jsx(Flex.Flex, { as: "li", justifyContent: "center", role: "menuitem", children: React__default.default.isValidElement(child)
+            ? React.cloneElement(child, {
+                onClick() {
+                    child.props.onClick();
+                    setVisible(false);
+                    menuButtonRef.current.focus();
+                },
+                isFocused: focusedItemIndex === index,
+            })
+            : child }, index)));
+    return (
     // TODO: review why we need to eslint it and how to solve this issue.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    F("div", { onKeyDown: T, children: [t(O, { label: x.isValidElement(n) ? null : n, "aria-haspopup": !0, "aria-expanded": f, "aria-controls": I, onKeyDown: A, onMouseDown: N, ref: d, type: "button", variant: "ghost", endIcon: t(ee, { children: t(U, { "aria-hidden": !0 }) }), ...y, children: n }), f && t(J, { onBlur: V, placement: l, source: d, onReachEnd: j, intersectionId: B ? `popover-${I}` : void 0, spacing: 4, children: t(k, { role: "menu", as: "ul", padding: 1, id: I, children: W }) })] })
-  );
-};
-export {
-  xe as MenuItem,
-  Ee as SimpleMenu
+    jsxRuntime.jsxs("div", { onKeyDown: handleWrapperKeyDown, children: [jsxRuntime.jsx(Component, { label: React__default.default.isValidElement(label) ? null : label, "aria-haspopup": true, "aria-expanded": visible, "aria-controls": menuId, onKeyDown: handleKeyDown, onMouseDown: handleMenuButtonMouseDown, ref: menuButtonRef, type: "button", variant: "ghost", endIcon: jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true }) }), ...props, children: label }), visible && (jsxRuntime.jsx(Popover.Popover, { onBlur: handleBlur, placement: popoverPlacement, source: menuButtonRef, onReachEnd: handleReachEnd, intersectionId: shouldHandleReachEnd ? `popover-${menuId}` : undefined, spacing: 4, children: jsxRuntime.jsx(Box.Box, { role: "menu", as: "ul", padding: 1, id: menuId, children: childrenClone }) }))] }));
 };
+
+exports.MenuItem = MenuItem;
+exports.SimpleMenu = SimpleMenu;

package/dist/SimpleMenu/SimpleMenu.mjs

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useRef, useEffect, useState, Children, cloneElement } from 'react';
+import { CarretDown } from '@strapi/icons';
+import { useCallbackRef } from '@strapi/ui-primitives';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { getOptionStyle } from './utils.mjs';
+import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { Link } from '../Link/Link.mjs';
+import { Button } from '../Button/Button.mjs';
+import { Popover } from '../Popover/Popover.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const OptionButton = styled.button `
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  ${getOptionStyle}
+`;
+const OptionLink = styled(NavLink) `
+  text-decoration: none;
+  ${getOptionStyle}
+`;
+const OptionExternalLink = styled(Link) `
+  /* Removing Link hover effect */
+  &:hover {
+    color: currentColor;
+  }
+
+  &:focus-visible {
+    /* Removing Link focus-visible after properties and reset to global outline */
+    outline: 2px solid ${({ theme }) => theme.colors.primary600};
+    outline-offset: 2px;
+    &:after {
+      content: none;
+    }
+  }
+
+  ${getOptionStyle}
+`;
+const IconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  svg {
+    height: 4px;
+    width: 6px;
+  }
+`;
+const StyledButtonSmall = styled(Button) `
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[3]}`};
+`;
+const MenuItem = ({ children, onClick = () => { }, to, isFocused = false, href, ...props }) => {
+    const menuItemRef = useRef();
+    useEffect(() => {
+        if (isFocused && menuItemRef.current) {
+            menuItemRef.current.focus();
+        }
+    }, [isFocused]);
+    const menuItemProps = {
+        tabIndex: isFocused ? 0 : -1,
+        ref: menuItemRef,
+        role: 'menuitem',
+        ...props,
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === KeyboardKeys.SPACE || e.key === KeyboardKeys.ENTER) {
+            onClick();
+        }
+    };
+    if (to && !href) {
+        return (jsx(OptionLink, { to: to, ...menuItemProps, children: jsx(Box, { padding: 2, children: jsx(Typography, { children: children }) }) }));
+    }
+    if (href && !to) {
+        return (jsx(OptionExternalLink, { isExternal: true, href: href, ...menuItemProps, children: jsx(Box, { padding: 2, children: jsx(Typography, { children: children }) }) }));
+    }
+    return (jsx(OptionButton, { onKeyDown: handleKeyDown, onMouseDown: onClick, type: "button", ...menuItemProps, children: jsx(Box, { padding: 2, children: jsx(Typography, { children: children }) }) }));
+};
+const SimpleMenu = ({ label, children, id, as: asComp, onOpen = () => { }, onClose = () => { }, size = 'M', popoverPlacement = 'bottom-start', onReachEnd, ...props }) => {
+    const menuButtonRef = useRef(undefined);
+    const menuId = useId(id);
+    const didMount = useRef(false);
+    const [visible, setVisible] = useState(false);
+    const [focusedItemIndex, setFocusItem] = useState(0);
+    const childrenArray = Children.toArray(children);
+    const DefaultComponent = size === 'S' ? StyledButtonSmall : Button;
+    const Component = asComp || DefaultComponent;
+    const shouldHandleReachEnd = !!onReachEnd && typeof onReachEnd === 'function';
+    useEffect(() => {
+        if (['string', 'number'].includes(typeof label)) {
+            // Useful to focus the selected item in the list
+            const defaultItemIndexToFocus = childrenArray.findIndex((c) => (React__default.isValidElement(c) && c.props.children === label) || c === label);
+            if (defaultItemIndexToFocus !== -1) {
+                setFocusItem(defaultItemIndexToFocus);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [label]);
+    const handleOpen = useCallbackRef(onOpen);
+    const handleClose = useCallbackRef(onClose);
+    useEffect(() => {
+        if (didMount?.current) {
+            if (visible) {
+                handleOpen();
+            }
+            else {
+                handleClose();
+            }
+        }
+        else {
+            didMount.current = true;
+        }
+    }, [didMount, handleClose, handleOpen, visible]);
+    /* in case `label` is a custom react component, we know it is going to be
+        a child of the menu button.
+    */
+    useEffect(() => {
+        if (React__default.isValidElement(label) && focusedItemIndex === -1) {
+            menuButtonRef.current.focus();
+        }
+    }, [label, focusedItemIndex]);
+    const handleWrapperKeyDown = (e) => {
+        if (visible) {
+            if (e.key === KeyboardKeys.ESCAPE) {
+                e.stopPropagation();
+                setVisible(false);
+                menuButtonRef.current.focus();
+            }
+            if (e.key === KeyboardKeys.DOWN) {
+                setFocusItem((prev) => (prev === childrenArray.length - 1 ? 0 : prev + 1));
+            }
+            if (e.key === KeyboardKeys.UP) {
+                setFocusItem((prev) => (prev === 0 ? childrenArray.length - 1 : prev - 1));
+            }
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === KeyboardKeys.ENTER || e.key === KeyboardKeys.SPACE) {
+            setVisible((prevVisible) => !prevVisible);
+        }
+    };
+    const handleBlur = (e) => {
+        e.preventDefault();
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setVisible(false);
+        }
+    };
+    const handleMenuButtonMouseDown = (e) => {
+        e.preventDefault();
+        setVisible((prevVisible) => !prevVisible);
+    };
+    const handleReachEnd = () => {
+        if (shouldHandleReachEnd) {
+            onReachEnd();
+        }
+    };
+    const childrenClone = childrenArray.map((child, index) => (
+    // eslint-disable-next-line react/no-array-index-key
+    jsx(Flex, { as: "li", justifyContent: "center", role: "menuitem", children: React__default.isValidElement(child)
+            ? cloneElement(child, {
+                onClick() {
+                    child.props.onClick();
+                    setVisible(false);
+                    menuButtonRef.current.focus();
+                },
+                isFocused: focusedItemIndex === index,
+            })
+            : child }, index)));
+    return (
+    // TODO: review why we need to eslint it and how to solve this issue.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsxs("div", { onKeyDown: handleWrapperKeyDown, children: [jsx(Component, { label: React__default.isValidElement(label) ? null : label, "aria-haspopup": true, "aria-expanded": visible, "aria-controls": menuId, onKeyDown: handleKeyDown, onMouseDown: handleMenuButtonMouseDown, ref: menuButtonRef, type: "button", variant: "ghost", endIcon: jsx(IconWrapper, { children: jsx(CarretDown, { "aria-hidden": true }) }), ...props, children: label }), visible && (jsx(Popover, { onBlur: handleBlur, placement: popoverPlacement, source: menuButtonRef, onReachEnd: handleReachEnd, intersectionId: shouldHandleReachEnd ? `popover-${menuId}` : undefined, spacing: 4, children: jsx(Box, { role: "menu", as: "ul", padding: 1, id: menuId, children: childrenClone }) }))] }));
+};
+
+export { MenuItem, SimpleMenu };

package/dist/SimpleMenu/index.js

@@ -1,5 +1,10 @@
-import { MenuItem as n, SimpleMenu as o } from "./SimpleMenu.js";
-export {
-  n as MenuItem,
-  o as SimpleMenu
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const SimpleMenu = require('./SimpleMenu.js');
+
+
+
+exports.MenuItem = SimpleMenu.MenuItem;
+exports.SimpleMenu = SimpleMenu.SimpleMenu;

package/dist/SimpleMenu/index.mjs

@@ -0,0 +1 @@
+export { MenuItem, SimpleMenu } from './SimpleMenu.mjs';

package/dist/SimpleMenu/utils.js

@@ -1,15 +1,18 @@
-const r = ({ theme: o }) => `
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const getOptionStyle = ({ theme }) => `
     text-align: left;
     width: 100%;
-    color: ${o.colors.neutral800};
-    border-radius: ${o.borderRadius};
+    color: ${theme.colors.neutral800};
+    border-radius: ${theme.borderRadius};
     &:focus {
-        background-color: ${o.colors.primary100};
+        background-color: ${theme.colors.primary100};
     }
     &:not([aria-disabled]):hover {
-        background-color: ${o.colors.primary100};
+        background-color: ${theme.colors.primary100};
     }
 `;
-export {
-  r as getOptionStyle
-};
+
+exports.getOptionStyle = getOptionStyle;

package/dist/SimpleMenu/utils.mjs

@@ -0,0 +1,14 @@
+const getOptionStyle = ({ theme }) => `
+    text-align: left;
+    width: 100%;
+    color: ${theme.colors.neutral800};
+    border-radius: ${theme.borderRadius};
+    &:focus {
+        background-color: ${theme.colors.primary100};
+    }
+    &:not([aria-disabled]):hover {
+        background-color: ${theme.colors.primary100};
+    }
+`;
+
+export { getOptionStyle };

package/dist/Stack/Stack.js

@@ -1,35 +1,57 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import a from "styled-components";
-import { extractStyleFromTheme as s } from "../helpers/theme.js";
-import { Flex as m } from "../Flex/Flex.js";
-const c = {
-  size: !0,
-  spacing: !0
-}, f = a(m).withConfig({
-  shouldForwardProp: (e, r) => !c[e] && r(e)
-})`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const theme = require('../helpers/theme.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+/**
+ * Prevents these attributes from being spread on the DOM node
+ */
+const transientProps = {
+    size: true,
+    spacing: true,
+};
+const StackV = styled__default.default(Flex.Flex).withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
   & > * {
     margin-top: 0;
     margin-bottom: 0;
   }
 
   & > * + * {
-    margin-top: ${({ theme: e, spacing: r }) => s(e.spaces, r, void 0)};
+    margin-top: ${({ theme: theme$1, spacing }) => theme.extractStyleFromTheme(theme$1.spaces, spacing, undefined)};
   }
-`, g = a(m).withConfig({
-  shouldForwardProp: (e, r) => !c[e] && r(e)
-})`
+`;
+const StackH = styled__default.default(Flex.Flex).withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
   & > * {
     margin-left: 0;
     margin-right: 0;
   }
 
   & > * + * {
-    margin-left: ${({ theme: e, spacing: r }) => s(e.spaces, r, void 0)};
+    margin-left: ${({ theme: theme$1, spacing }) => theme.extractStyleFromTheme(theme$1.spaces, spacing, undefined)};
   }
-`, l = d(({ horizontal: e = !1, spacing: r, size: t, ...o }, i) => (t && console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'), e ? n(g, { ref: i, spacing: r || t, ...o }) : n(f, { direction: "column", alignItems: "stretch", ref: i, spacing: r || t, ...o })));
-l.displayName = "Stack";
-export {
-  l as Stack
-};
+`;
+const Stack = React.forwardRef(({ horizontal = false, spacing, size, ...props }, ref) => {
+    if (size) {
+        console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead');
+    }
+    if (horizontal) {
+        return jsxRuntime.jsx(StackH, { ref: ref, spacing: spacing || size, ...props });
+    }
+    return jsxRuntime.jsx(StackV, { direction: "column", alignItems: "stretch", ref: ref, spacing: spacing || size, ...props });
+});
+Stack.displayName = 'Stack';
+
+exports.Stack = Stack;

package/dist/Stack/Stack.mjs

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { extractStyleFromTheme } from '../helpers/theme.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+/**
+ * Prevents these attributes from being spread on the DOM node
+ */
+const transientProps = {
+    size: true,
+    spacing: true,
+};
+const StackV = styled(Flex).withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  & > * + * {
+    margin-top: ${({ theme, spacing }) => extractStyleFromTheme(theme.spaces, spacing, undefined)};
+  }
+`;
+const StackH = styled(Flex).withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
+  & > * {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  & > * + * {
+    margin-left: ${({ theme, spacing }) => extractStyleFromTheme(theme.spaces, spacing, undefined)};
+  }
+`;
+const Stack = forwardRef(({ horizontal = false, spacing, size, ...props }, ref) => {
+    if (size) {
+        console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead');
+    }
+    if (horizontal) {
+        return jsx(StackH, { ref: ref, spacing: spacing || size, ...props });
+    }
+    return jsx(StackV, { direction: "column", alignItems: "stretch", ref: ref, spacing: spacing || size, ...props });
+});
+Stack.displayName = 'Stack';
+
+export { Stack };

package/dist/Stack/index.js

@@ -1,4 +1,9 @@
-import { Stack as t } from "./Stack.js";
-export {
-  t as Stack
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Stack = require('./Stack.js');
+
+
+
+exports.Stack = Stack.Stack;