@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/themes/lightTheme/index.mjs

@@ -0,0 +1,11 @@
+import { lightColorTokenObject } from './light-colors.mjs';
+import { lightShadowTokenObject } from './light-shadows.mjs';
+import { commonTheme } from '../common-theme.mjs';
+
+const lightTheme = {
+    colors: lightColorTokenObject.color,
+    shadows: lightShadowTokenObject.shadow,
+    ...commonTheme,
+};
+
+export { lightTheme };

package/dist/themes/lightTheme/light-colors.js

@@ -1,52 +1,55 @@
-const e = {
-  color: {
-    alternative100: "#f6ecfc",
-    alternative200: "#e0c1f4",
-    alternative500: "#ac73e6",
-    alternative600: "#9736e8",
-    alternative700: "#8312d1",
-    buttonNeutral0: "#ffffff",
-    buttonPrimary500: "#7b79ff",
-    buttonPrimary600: "#4945ff",
-    danger100: "#fcecea",
-    danger200: "#f5c0b8",
-    danger500: "#ee5e52",
-    danger600: "#d02b20",
-    danger700: "#b72b1a",
-    neutral0: "#ffffff",
-    neutral100: "#f6f6f9",
-    neutral1000: "#181826",
-    neutral150: "#eaeaef",
-    neutral200: "#dcdce4",
-    neutral300: "#c0c0cf",
-    neutral400: "#a5a5ba",
-    neutral500: "#8e8ea9",
-    neutral600: "#666687",
-    neutral700: "#4a4a6a",
-    neutral800: "#32324d",
-    neutral900: "#212134",
-    primary100: "#f0f0ff",
-    primary200: "#d9d8ff",
-    primary500: "#7b79ff",
-    primary600: "#4945ff",
-    primary700: "#271fe0",
-    secondary100: "#eaf5ff",
-    secondary200: "#b8e1ff",
-    secondary500: "#66b7f1",
-    secondary600: "#0c75af",
-    secondary700: "#006096",
-    success100: "#eafbe7",
-    success200: "#c6f0c2",
-    success500: "#5cb176",
-    success600: "#328048",
-    success700: "#2f6846",
-    warning100: "#fdf4dc",
-    warning200: "#fae7b9",
-    warning500: "#f29d41",
-    warning600: "#d9822f",
-    warning700: "#be5d01"
-  }
-};
-export {
-  e as lightColorTokenObject
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const lightColorTokenObject = {
+    color: {
+        alternative100: '#f6ecfc',
+        alternative200: '#e0c1f4',
+        alternative500: '#ac73e6',
+        alternative600: '#9736e8',
+        alternative700: '#8312d1',
+        buttonNeutral0: '#ffffff',
+        buttonPrimary500: '#7b79ff',
+        buttonPrimary600: '#4945ff',
+        danger100: '#fcecea',
+        danger200: '#f5c0b8',
+        danger500: '#ee5e52',
+        danger600: '#d02b20',
+        danger700: '#b72b1a',
+        neutral0: '#ffffff',
+        neutral100: '#f6f6f9',
+        neutral1000: '#181826',
+        neutral150: '#eaeaef',
+        neutral200: '#dcdce4',
+        neutral300: '#c0c0cf',
+        neutral400: '#a5a5ba',
+        neutral500: '#8e8ea9',
+        neutral600: '#666687',
+        neutral700: '#4a4a6a',
+        neutral800: '#32324d',
+        neutral900: '#212134',
+        primary100: '#f0f0ff',
+        primary200: '#d9d8ff',
+        primary500: '#7b79ff',
+        primary600: '#4945ff',
+        primary700: '#271fe0',
+        secondary100: '#eaf5ff',
+        secondary200: '#b8e1ff',
+        secondary500: '#66b7f1',
+        secondary600: '#0c75af',
+        secondary700: '#006096',
+        success100: '#eafbe7',
+        success200: '#c6f0c2',
+        success500: '#5cb176',
+        success600: '#328048',
+        success700: '#2f6846',
+        warning100: '#fdf4dc',
+        warning200: '#fae7b9',
+        warning500: '#f29d41',
+        warning600: '#d9822f',
+        warning700: '#be5d01',
+    },
 };
+
+exports.lightColorTokenObject = lightColorTokenObject;

package/dist/themes/lightTheme/light-colors.mjs

@@ -0,0 +1,51 @@
+const lightColorTokenObject = {
+    color: {
+        alternative100: '#f6ecfc',
+        alternative200: '#e0c1f4',
+        alternative500: '#ac73e6',
+        alternative600: '#9736e8',
+        alternative700: '#8312d1',
+        buttonNeutral0: '#ffffff',
+        buttonPrimary500: '#7b79ff',
+        buttonPrimary600: '#4945ff',
+        danger100: '#fcecea',
+        danger200: '#f5c0b8',
+        danger500: '#ee5e52',
+        danger600: '#d02b20',
+        danger700: '#b72b1a',
+        neutral0: '#ffffff',
+        neutral100: '#f6f6f9',
+        neutral1000: '#181826',
+        neutral150: '#eaeaef',
+        neutral200: '#dcdce4',
+        neutral300: '#c0c0cf',
+        neutral400: '#a5a5ba',
+        neutral500: '#8e8ea9',
+        neutral600: '#666687',
+        neutral700: '#4a4a6a',
+        neutral800: '#32324d',
+        neutral900: '#212134',
+        primary100: '#f0f0ff',
+        primary200: '#d9d8ff',
+        primary500: '#7b79ff',
+        primary600: '#4945ff',
+        primary700: '#271fe0',
+        secondary100: '#eaf5ff',
+        secondary200: '#b8e1ff',
+        secondary500: '#66b7f1',
+        secondary600: '#0c75af',
+        secondary700: '#006096',
+        success100: '#eafbe7',
+        success200: '#c6f0c2',
+        success500: '#5cb176',
+        success600: '#328048',
+        success700: '#2f6846',
+        warning100: '#fdf4dc',
+        warning200: '#fae7b9',
+        warning500: '#f29d41',
+        warning600: '#d9822f',
+        warning700: '#be5d01',
+    },
+};
+
+export { lightColorTokenObject };

package/dist/themes/lightTheme/light-shadows.js

@@ -1,12 +1,15 @@
-const p = {
-  shadow: {
-    filterShadow: "0px 1px 4px rgba(33, 33, 52, 0.1)",
-    focus: "inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",
-    focusShadow: "0px 0px 6px rgba(76, 191, 255, 0.75)",
-    popupShadow: "0px 2px 15px rgba(33, 33, 52, 0.1)",
-    tableShadow: "0px 1px 4px rgba(33, 33, 52, 0.1)"
-  }
-};
-export {
-  p as lightShadowTokenObject
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const lightShadowTokenObject = {
+    shadow: {
+        filterShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
+        focus: 'inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)',
+        focusShadow: '0px 0px 6px rgba(76, 191, 255, 0.75)',
+        popupShadow: '0px 2px 15px rgba(33, 33, 52, 0.1)',
+        tableShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
+    },
 };
+
+exports.lightShadowTokenObject = lightShadowTokenObject;

package/dist/themes/lightTheme/light-shadows.mjs

@@ -0,0 +1,11 @@
+const lightShadowTokenObject = {
+    shadow: {
+        filterShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
+        focus: 'inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)',
+        focusShadow: '0px 0px 6px rgba(76, 191, 255, 0.75)',
+        popupShadow: '0px 2px 15px rgba(33, 33, 52, 0.1)',
+        tableShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
+    },
+};
+
+export { lightShadowTokenObject };

package/dist/themes/sizes.js

@@ -1,22 +1,25 @@
-const e = {
-  input: {
-    S: "2rem",
-    M: `${2.5}rem`
-  },
-  accordions: {
-    S: "3rem",
-    M: `${5.5}rem`
-  },
-  badge: {
-    S: "1rem",
-    M: `${1.5}rem`
-  },
-  button: {
-    S: "2rem",
-    M: `${2.25}rem`,
-    L: `${2.5}rem`
-  }
-};
-export {
-  e as sizes
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const sizes = {
+    input: {
+        S: `${32 / 16}rem`,
+        M: `${40 / 16}rem`,
+    },
+    accordions: {
+        S: `${48 / 16}rem`,
+        M: `${88 / 16}rem`,
+    },
+    badge: {
+        S: `${16 / 16}rem`,
+        M: `${24 / 16}rem`,
+    },
+    button: {
+        S: `${32 / 16}rem`,
+        M: `${36 / 16}rem`,
+        L: `${40 / 16}rem`,
+    },
 };
+
+exports.sizes = sizes;

package/dist/themes/sizes.mjs

@@ -0,0 +1,21 @@
+const sizes = {
+    input: {
+        S: `${32 / 16}rem`,
+        M: `${40 / 16}rem`,
+    },
+    accordions: {
+        S: `${48 / 16}rem`,
+        M: `${88 / 16}rem`,
+    },
+    badge: {
+        S: `${16 / 16}rem`,
+        M: `${24 / 16}rem`,
+    },
+    button: {
+        S: `${32 / 16}rem`,
+        M: `${36 / 16}rem`,
+        L: `${40 / 16}rem`,
+    },
+};
+
+export { sizes };

package/dist/themes/utils.js

@@ -1,15 +1,24 @@
-import { css as i } from "styled-components";
-const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r = !1 }) => i`
-      outline: none;
-      box-shadow: 0;
-      transition-property: border-color, box-shadow, fill;
-      transition-duration: 0.2s;
+'use strict';
 
-      ${t}:focus-within {
-        border: 1px solid ${r ? o.colors.danger600 : o.colors.primary600};
-        box-shadow: ${r ? o.colors.danger600 : o.colors.primary600} 0px 0px 0px 2px;
-      }
-    `, e = ({ theme: t }) => i`
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+
+const getThemeSize = (type) => {
+    return ({ theme, size }) => theme.sizes[type][size];
+};
+const inputFocusStyle = (rootElement = '&') => ({ theme, hasError = false }) => styled.css `
+    outline: none;
+    box-shadow: 0;
+    transition-property: border-color, box-shadow, fill;
+    transition-duration: 0.2s;
+
+    ${rootElement}:focus-within {
+      border: 1px solid ${hasError ? theme.colors.danger600 : theme.colors.primary600};
+      box-shadow: ${hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
+    }
+  `;
+const buttonFocusStyle = ({ theme }) => styled.css `
   position: relative;
   outline: none;
 
@@ -36,12 +45,11 @@ const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ t
       bottom: -5px;
       left: -5px;
       right: -5px;
-      border: 2px solid ${t.colors.primary600};
+      border: 2px solid ${theme.colors.primary600};
     }
   }
 `;
-export {
-  e as buttonFocusStyle,
-  s as getThemeSize,
-  p as inputFocusStyle
-};
+
+exports.buttonFocusStyle = buttonFocusStyle;
+exports.getThemeSize = getThemeSize;
+exports.inputFocusStyle = inputFocusStyle;

package/dist/themes/utils.mjs

@@ -0,0 +1,49 @@
+import { css } from 'styled-components';
+
+const getThemeSize = (type) => {
+    return ({ theme, size }) => theme.sizes[type][size];
+};
+const inputFocusStyle = (rootElement = '&') => ({ theme, hasError = false }) => css `
+    outline: none;
+    box-shadow: 0;
+    transition-property: border-color, box-shadow, fill;
+    transition-duration: 0.2s;
+
+    ${rootElement}:focus-within {
+      border: 1px solid ${hasError ? theme.colors.danger600 : theme.colors.primary600};
+      box-shadow: ${hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
+    }
+  `;
+const buttonFocusStyle = ({ theme }) => css `
+  position: relative;
+  outline: none;
+
+  &:after {
+    transition-property: all;
+    transition-duration: 0.2s;
+    border-radius: 8px;
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    border: 2px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: none;
+    &:after {
+      border-radius: 8px;
+      content: '';
+      position: absolute;
+      top: -5px;
+      bottom: -5px;
+      left: -5px;
+      right: -5px;
+      border: 2px solid ${theme.colors.primary600};
+    }
+  }
+`;
+
+export { buttonFocusStyle, getThemeSize, inputFocusStyle };

package/dist/v2/Breadcrumbs/Breadcrumbs.js

@@ -1,25 +1,34 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import { Children as t } from "react";
-import d from "styled-components";
-import { Divider as c } from "./Divider.js";
-import { Flex as a } from "../../Flex/Flex.js";
-import { Box as f } from "../../Box/Box.js";
-const p = d(a)`
+'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 Divider = require('./Divider.js');
+const Flex = require('../../Flex/Flex.js');
+const Box = require('../../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const AlignedList = styled__default.default(Flex.Flex) `
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
   // the same amount it has inner padding
   :first-child {
-    margin-left: ${({ theme: e }) => `calc(-1*${e.spaces[2]})`};
+    margin-left: ${({ theme }) => `calc(-1*${theme.spaces[2]})`};
   }
-`, b = ({ label: e, children: n, ...o }) => {
-  const r = t.toArray(n);
-  return i(f, { "aria-label": e, ...o, children: i(p, { as: "ol", children: t.map(r, (s, l) => {
-    const m = r.length > 1 && l + 1 < r.length;
-    return h(a, { inline: !0, as: "li", children: [s, m && i(c, {})] });
-  }) }) });
-};
-b.displayName = "Breadcrumbs";
-export {
-  b as Breadcrumbs
+`;
+const Breadcrumbs = ({ label, children, ...props }) => {
+    const childrenArray = React.Children.toArray(children);
+    return (jsxRuntime.jsx(Box.Box, { "aria-label": label, ...props, children: jsxRuntime.jsx(AlignedList, { as: "ol", children: React.Children.map(childrenArray, (child, index) => {
+                const shouldDisplayDivider = childrenArray.length > 1 && index + 1 < childrenArray.length;
+                return (jsxRuntime.jsxs(Flex.Flex, { inline: true, as: "li", children: [child, shouldDisplayDivider && jsxRuntime.jsx(Divider.Divider, {})] }));
+            }) }) }));
 };
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+exports.Breadcrumbs = Breadcrumbs;

package/dist/v2/Breadcrumbs/Breadcrumbs.mjs

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Children } from 'react';
+import styled from 'styled-components';
+import { Divider } from './Divider.mjs';
+import { Flex } from '../../Flex/Flex.mjs';
+import { Box } from '../../Box/Box.mjs';
+
+const AlignedList = styled(Flex) `
+  // CrumbLinks do have padding-x, because they need to have a
+  // interaction effect, which mis-aligns the breadcrumbs on the left.
+  // This normalizes the behavior by moving the first item to left by
+  // the same amount it has inner padding
+  :first-child {
+    margin-left: ${({ theme }) => `calc(-1*${theme.spaces[2]})`};
+  }
+`;
+const Breadcrumbs = ({ label, children, ...props }) => {
+    const childrenArray = Children.toArray(children);
+    return (jsx(Box, { "aria-label": label, ...props, children: jsx(AlignedList, { as: "ol", children: Children.map(childrenArray, (child, index) => {
+                const shouldDisplayDivider = childrenArray.length > 1 && index + 1 < childrenArray.length;
+                return (jsxs(Flex, { inline: true, as: "li", children: [child, shouldDisplayDivider && jsx(Divider, {})] }));
+            }) }) }));
+};
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export { Breadcrumbs };

package/dist/v2/Breadcrumbs/Crumb.js

@@ -1,8 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Box as i } from "../../Box/Box.js";
-import { Typography as p } from "../../Typography/Typography.js";
-const d = ({ children: t, isCurrent: o = !1, ...a }) => r(i, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: r(p, { variant: "pi", textColor: "neutral800", fontWeight: o ? "bold" : "normal", "aria-current": o, ...a, children: t }) });
-d.displayName = "Crumb";
-export {
-  d as Crumb
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Box = require('../../Box/Box.js');
+const Typography = require('../../Typography/Typography.js');
+
+const Crumb = ({ children, isCurrent = false, ...props }) => (jsxRuntime.jsx(Box.Box, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral800", fontWeight: isCurrent ? 'bold' : 'normal', "aria-current": isCurrent, ...props, children: children }) }));
+Crumb.displayName = 'Crumb';
+
+exports.Crumb = Crumb;

package/dist/v2/Breadcrumbs/Crumb.mjs

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../../Box/Box.mjs';
+import { Typography } from '../../Typography/Typography.mjs';
+
+const Crumb = ({ children, isCurrent = false, ...props }) => (jsx(Box, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: jsx(Typography, { variant: "pi", textColor: "neutral800", fontWeight: isCurrent ? 'bold' : 'normal', "aria-current": isCurrent, ...props, children: children }) }));
+Crumb.displayName = 'Crumb';
+
+export { Crumb };

package/dist/v2/Breadcrumbs/CrumbLink.js

@@ -1,21 +1,30 @@
-import { jsx as e } from "react/jsx-runtime";
-import i from "styled-components";
-import { BaseLink as n } from "../../BaseLink/BaseLink.js";
-const s = i(n)`
-  border-radius: ${({ theme: o }) => o.borderRadius};
-  color: ${({ theme: o }) => o.colors.neutral600};
-  font-size: ${({ theme: o }) => o.fontSizes[1]};
-  line-height: ${({ theme: o }) => o.lineHeights[4]};
-  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[2]}`};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const BaseLink = require('../../BaseLink/BaseLink.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledLink = styled__default.default(BaseLink.BaseLink) `
+  border-radius: ${({ theme }) => theme.borderRadius};
+  color: ${({ theme }) => theme.colors.neutral600};
+  font-size: ${({ theme }) => theme.fontSizes[1]};
+  line-height: ${({ theme }) => theme.lineHeights[4]};
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
   text-decoration: none;
 
   :hover,
   :focus {
-    background-color: ${({ theme: o }) => o.colors.neutral200};
-    color: ${({ theme: o }) => o.colors.neutral700};
+    background-color: ${({ theme }) => theme.colors.neutral200};
+    color: ${({ theme }) => theme.colors.neutral700};
   }
-`, t = ({ children: o, ...r }) => e(s, { ...r, children: o });
-t.displayName = "CrumbLink";
-export {
-  t as CrumbLink
-};
+`;
+const CrumbLink = ({ children, ...props }) => jsxRuntime.jsx(StyledLink, { ...props, children: children });
+CrumbLink.displayName = 'CrumbLink';
+
+exports.CrumbLink = CrumbLink;

package/dist/v2/Breadcrumbs/CrumbLink.mjs

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { BaseLink } from '../../BaseLink/BaseLink.mjs';
+
+const StyledLink = styled(BaseLink) `
+  border-radius: ${({ theme }) => theme.borderRadius};
+  color: ${({ theme }) => theme.colors.neutral600};
+  font-size: ${({ theme }) => theme.fontSizes[1]};
+  line-height: ${({ theme }) => theme.lineHeights[4]};
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
+  text-decoration: none;
+
+  :hover,
+  :focus {
+    background-color: ${({ theme }) => theme.colors.neutral200};
+    color: ${({ theme }) => theme.colors.neutral700};
+  }
+`;
+const CrumbLink = ({ children, ...props }) => jsx(StyledLink, { ...props, children: children });
+CrumbLink.displayName = 'CrumbLink';
+
+export { CrumbLink };

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js

@@ -1,17 +1,26 @@
-import { jsx as r } from "react/jsx-runtime";
-import n from "styled-components";
-import { SimpleMenu as t } from "../SimpleMenu/SimpleMenu.js";
-import { Button as s } from "../../Button/Button.js";
-const m = n(s)`
-  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[2]}`};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const SimpleMenu = require('../SimpleMenu/SimpleMenu.js');
+const Button = require('../../Button/Button.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledButton = styled__default.default(Button.Button) `
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
   height: unset;
 
   :hover,
   :focus {
-    background-color: ${({ theme: o }) => o.colors.neutral200};
+    background-color: ${({ theme }) => theme.colors.neutral200};
   }
-`, i = ({ children: o, ...e }) => r(t, { endIcon: null, as: m, size: "S", ...e, children: o });
-i.displayName = "CrumbSimpleMenu";
-export {
-  i as CrumbSimpleMenu
-};
+`;
+const CrumbSimpleMenu = ({ children, ...props }) => (jsxRuntime.jsx(SimpleMenu.SimpleMenu, { endIcon: null, as: StyledButton, size: "S", ...props, children: children }));
+CrumbSimpleMenu.displayName = 'CrumbSimpleMenu';
+
+exports.CrumbSimpleMenu = CrumbSimpleMenu;

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { SimpleMenu } from '../SimpleMenu/SimpleMenu.mjs';
+import { Button } from '../../Button/Button.mjs';
+
+const StyledButton = styled(Button) `
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
+  height: unset;
+
+  :hover,
+  :focus {
+    background-color: ${({ theme }) => theme.colors.neutral200};
+  }
+`;
+const CrumbSimpleMenu = ({ children, ...props }) => (jsx(SimpleMenu, { endIcon: null, as: StyledButton, size: "S", ...props, children: children }));
+CrumbSimpleMenu.displayName = 'CrumbSimpleMenu';
+
+export { CrumbSimpleMenu };