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

package/dist/themes/darkTheme/dark-colors.js

@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const darkColorTokenObject = {
-    color: {
-        alternative100: '#181826',
-        alternative200: '#4a4a6a',
-        alternative500: '#ac73e6',
-        alternative600: '#ac73e6',
-        alternative700: '#e0c1f4',
-        buttonNeutral0: '#ffffff',
-        buttonPrimary500: '#7b79ff',
-        buttonPrimary600: '#4945ff',
-        danger100: '#181826',
-        danger200: '#4a4a6a',
-        danger500: '#ee5e52',
-        danger600: '#ee5e52',
-        danger700: '#ee5e52',
-        neutral0: '#212134',
-        neutral100: '#181826',
-        neutral1000: '#ffffff',
-        neutral150: '#32324d',
-        neutral200: '#4a4a6a',
-        neutral300: '#666687',
-        neutral400: '#a5a5ba',
-        neutral500: '#c0c0cf',
-        neutral600: '#a5a5ba',
-        neutral700: '#eaeaef',
-        neutral800: '#ffffff',
-        neutral900: '#ffffff',
-        primary100: '#181826',
-        primary200: '#4a4a6a',
-        primary500: '#4945ff',
-        primary600: '#7b79ff',
-        primary700: '#7b79ff',
-        secondary100: '#181826',
-        secondary200: '#4a4a6a',
-        secondary500: '#66b7f1',
-        secondary600: '#66b7f1',
-        secondary700: '#b8e1ff',
-        success100: '#181826',
-        success200: '#4a4a6a',
-        success500: '#5cb176',
-        success600: '#5cb176',
-        success700: '#c6f0c2',
-        warning100: '#181826',
-        warning200: '#4a4a6a',
-        warning500: '#f29d41',
-        warning600: '#f29d41',
-        warning700: '#fae7b9',
-    },
-};
-
-exports.darkColorTokenObject = darkColorTokenObject;

package/dist/themes/darkTheme/dark-colors.mjs

@@ -1,51 +0,0 @@
-const darkColorTokenObject = {
-    color: {
-        alternative100: '#181826',
-        alternative200: '#4a4a6a',
-        alternative500: '#ac73e6',
-        alternative600: '#ac73e6',
-        alternative700: '#e0c1f4',
-        buttonNeutral0: '#ffffff',
-        buttonPrimary500: '#7b79ff',
-        buttonPrimary600: '#4945ff',
-        danger100: '#181826',
-        danger200: '#4a4a6a',
-        danger500: '#ee5e52',
-        danger600: '#ee5e52',
-        danger700: '#ee5e52',
-        neutral0: '#212134',
-        neutral100: '#181826',
-        neutral1000: '#ffffff',
-        neutral150: '#32324d',
-        neutral200: '#4a4a6a',
-        neutral300: '#666687',
-        neutral400: '#a5a5ba',
-        neutral500: '#c0c0cf',
-        neutral600: '#a5a5ba',
-        neutral700: '#eaeaef',
-        neutral800: '#ffffff',
-        neutral900: '#ffffff',
-        primary100: '#181826',
-        primary200: '#4a4a6a',
-        primary500: '#4945ff',
-        primary600: '#7b79ff',
-        primary700: '#7b79ff',
-        secondary100: '#181826',
-        secondary200: '#4a4a6a',
-        secondary500: '#66b7f1',
-        secondary600: '#66b7f1',
-        secondary700: '#b8e1ff',
-        success100: '#181826',
-        success200: '#4a4a6a',
-        success500: '#5cb176',
-        success600: '#5cb176',
-        success700: '#c6f0c2',
-        warning100: '#181826',
-        warning200: '#4a4a6a',
-        warning500: '#f29d41',
-        warning600: '#f29d41',
-        warning700: '#fae7b9',
-    },
-};
-
-export { darkColorTokenObject };

package/dist/themes/darkTheme/dark-shadows.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const darkShadowTokenObject = {
-    shadow: {
-        filterShadow: '1px 1px 10px rgba(3, 3, 5, 0.35)',
-        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: '1px 1px 10px rgba(3, 3, 5, 0.35)',
-        tableShadow: '1px 1px 10px rgba(3, 3, 5, 0.2)',
-    },
-};
-
-exports.darkShadowTokenObject = darkShadowTokenObject;

package/dist/themes/darkTheme/dark-shadows.mjs

@@ -1,11 +0,0 @@
-const darkShadowTokenObject = {
-    shadow: {
-        filterShadow: '1px 1px 10px rgba(3, 3, 5, 0.35)',
-        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: '1px 1px 10px rgba(3, 3, 5, 0.35)',
-        tableShadow: '1px 1px 10px rgba(3, 3, 5, 0.2)',
-    },
-};
-
-export { darkShadowTokenObject };

package/dist/themes/darkTheme/index.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const darkColors = require('./dark-colors.js');
-const darkShadows = require('./dark-shadows.js');
-const commonTheme = require('../common-theme.js');
-
-const darkTheme = {
-    colors: darkColors.darkColorTokenObject.color,
-    shadows: darkShadows.darkShadowTokenObject.shadow,
-    ...commonTheme.commonTheme,
-};
-
-exports.darkTheme = darkTheme;

package/dist/themes/darkTheme/index.mjs

@@ -1,11 +0,0 @@
-import { darkColorTokenObject } from './dark-colors.mjs';
-import { darkShadowTokenObject } from './dark-shadows.mjs';
-import { commonTheme } from '../common-theme.mjs';
-
-const darkTheme = {
-    colors: darkColorTokenObject.color,
-    shadows: darkShadowTokenObject.shadow,
-    ...commonTheme,
-};
-
-export { darkTheme };

package/dist/themes/extendTheme.js

@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const lodash = require('lodash');
-const index = require('./lightTheme/index.js');
-const objects = require('../helpers/objects.js');
-
-const generateError = (customMessage) => `
-${customMessage}
-
-The following is an example:
-
-
-import { lightTheme, extendTheme } from '@strapi/design-system';
-
-const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(index.lightTheme)
-    .map((key) => `${key}: /* put the overrides for the ${key} key */,`)
-    .join('\n')}
-})
-`;
-const extendTheme = (theme, overrides) => {
-    if (!objects.isObject(theme)) {
-        const error = generateError('The first argument should be an object and corresponds to the theme you want to extend.');
-        throw new Error(error);
-    }
-    if (!objects.isObject(overrides)) {
-        const error = generateError('The second argument should be an object and corresponds to the keys of the theme you want to override.');
-        throw new Error(error);
-    }
-    function customizer(objValue, srcValue) {
-        if (Array.isArray(objValue)) {
-            return srcValue;
-        }
-        if (objects.isObject(objValue) && objects.isObject(srcValue)) {
-            return lodash.merge(objValue, srcValue);
-        }
-        return undefined;
-    }
-    const masterTheme = lodash.cloneDeep(theme ?? {});
-    const masterOverrides = lodash.cloneDeep(overrides ?? {});
-    lodash.assignWith(masterTheme, masterOverrides, customizer);
-    return masterTheme;
-};
-
-exports.extendTheme = extendTheme;

package/dist/themes/extendTheme.mjs

@@ -1,43 +0,0 @@
-import { cloneDeep, assignWith, merge } from 'lodash';
-import { lightTheme } from './lightTheme/index.mjs';
-import { isObject } from '../helpers/objects.mjs';
-
-const generateError = (customMessage) => `
-${customMessage}
-
-The following is an example:
-
-
-import { lightTheme, extendTheme } from '@strapi/design-system';
-
-const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(lightTheme)
-    .map((key) => `${key}: /* put the overrides for the ${key} key */,`)
-    .join('\n')}
-})
-`;
-const extendTheme = (theme, overrides) => {
-    if (!isObject(theme)) {
-        const error = generateError('The first argument should be an object and corresponds to the theme you want to extend.');
-        throw new Error(error);
-    }
-    if (!isObject(overrides)) {
-        const error = generateError('The second argument should be an object and corresponds to the keys of the theme you want to override.');
-        throw new Error(error);
-    }
-    function customizer(objValue, srcValue) {
-        if (Array.isArray(objValue)) {
-            return srcValue;
-        }
-        if (isObject(objValue) && isObject(srcValue)) {
-            return merge(objValue, srcValue);
-        }
-        return undefined;
-    }
-    const masterTheme = cloneDeep(theme ?? {});
-    const masterOverrides = cloneDeep(overrides ?? {});
-    assignWith(masterTheme, masterOverrides, customizer);
-    return masterTheme;
-};
-
-export { extendTheme };

package/dist/themes/index.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const index = require('./lightTheme/index.js');
-const index$1 = require('./darkTheme/index.js');
-const extendTheme = require('./extendTheme.js');
-const utils = require('./utils.js');
-
-
-
-exports.lightTheme = index.lightTheme;
-exports.darkTheme = index$1.darkTheme;
-exports.extendTheme = extendTheme.extendTheme;
-exports.buttonFocusStyle = utils.buttonFocusStyle;
-exports.getThemeSize = utils.getThemeSize;
-exports.inputFocusStyle = utils.inputFocusStyle;

package/dist/themes/index.mjs

@@ -1,4 +0,0 @@
-export { lightTheme } from './lightTheme/index.mjs';
-export { darkTheme } from './darkTheme/index.mjs';
-export { extendTheme } from './extendTheme.mjs';
-export { buttonFocusStyle, getThemeSize, inputFocusStyle } from './utils.mjs';

package/dist/themes/lightTheme/index.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const lightColors = require('./light-colors.js');
-const lightShadows = require('./light-shadows.js');
-const commonTheme = require('../common-theme.js');
-
-const lightTheme = {
-    colors: lightColors.lightColorTokenObject.color,
-    shadows: lightShadows.lightShadowTokenObject.shadow,
-    ...commonTheme.commonTheme,
-};
-
-exports.lightTheme = lightTheme;

package/dist/themes/lightTheme/index.mjs

@@ -1,11 +0,0 @@
-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,55 +0,0 @@
-'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

@@ -1,51 +0,0 @@
-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,15 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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,25 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-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,55 +0,0 @@
-'use strict';
-
-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;
-
-  &: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};
-    }
-  }
-`;
-
-exports.buttonFocusStyle = buttonFocusStyle;
-exports.getThemeSize = getThemeSize;
-exports.inputFocusStyle = inputFocusStyle;

package/dist/themes/utils.mjs

@@ -1,49 +0,0 @@
-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/types.js

@@ -1,2 +0,0 @@
-'use strict';
-

package/dist/types.mjs

@@ -1 +0,0 @@
-

package/dist/v2/Breadcrumbs/Breadcrumbs.js

@@ -1,34 +0,0 @@
-'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 }) => `calc(-1*${theme.spaces[2]})`};
-  }
-`;
-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

@@ -1,26 +0,0 @@
-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 };