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

package/dist/Loader/Loader.mjs

@@ -1,24 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
-import loaderSvg from './assets/loader.svg.mjs';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-
-const rotation = keyframes `
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-const LoaderImg = styled.img `
-  animation: ${rotation} 1s infinite linear;
-  will-change: transform;
-  ${({ small, theme }) => small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}
-`;
-const Loader = React.forwardRef(({ children, small = false, ...props }, ref) => {
-    return (jsxs("div", { role: "alert", "aria-live": "assertive", ref: ref, ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(LoaderImg, { src: loaderSvg, "aria-hidden": true, small: small })] }));
-});
-
-export { Loader };

package/dist/Loader/assets/loader.svg.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const loaderSvg = "data:image/svg+xml,%3csvg%20width='63'%20height='63'%20viewBox='0%200%2063%2063'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M42.5563%2011.9816C39.484%2010.3071%2035.8575%209.29097%2032.3354%209.13521C28.6443%208.92888%2024.8295%209.72318%2021.3336%2011.4129C20.9123%2011.5901%2020.5376%2011.8101%2020.1722%2012.0249L20.0108%2012.1179C19.8774%2012.1951%2019.7441%2012.2724%2019.608%2012.3536C19.3253%2012.5146%2019.0492%2012.6744%2018.7544%2012.8792C18.5463%2013.0329%2018.3395%2013.1759%2018.1301%2013.323C17.5658%2013.7208%2016.9868%2014.1317%2016.4983%2014.5979C14.8476%2015.9524%2013.5571%2017.6075%2012.6071%2018.9214C10.4365%2022.1566%209.08622%2025.9567%208.80702%2029.6143L8.7764%2030.1588C8.73328%2030.9196%208.68476%2031.7057%208.75353%2032.4555C8.76648%2032.6084%208.7661%2032.7638%208.77506%2032.914C8.78895%2033.229%208.80152%2033.5373%208.846%2033.8672L9.07396%2035.4221C9.09756%2035.5764%209.1198%2035.7413%209.1633%2035.9263L9.65919%2037.9272L10.138%2039.2823C10.2729%2039.6673%2010.4158%2040.0751%2010.6%2040.43C12.0292%2043.637%2014.1425%2046.4578%2016.7063%2048.585C19.0508%2050.5296%2021.824%2052.0023%2024.7491%2052.8452L26.2371%2053.2376C26.3781%2053.2693%2026.4926%2053.2889%2026.6031%2053.3058L26.7775%2053.3311C27.0052%2053.3636%2027.2195%2053.3986%2027.4445%2053.435C27.8598%2053.5076%2028.2672%2053.5748%2028.7079%2053.6183L30.5641%2053.7229C30.9516%2053.7249%2031.3352%2053.7068%2031.7081%2053.6874C31.9039%2053.681%2032.0984%2053.6681%2032.3288%2053.662C34.5253%2053.4772%2036.5106%2053.0634%2038.0516%2052.4652C38.1769%2052.4171%2038.3008%2052.3796%2038.4234%2052.3355C38.6727%2052.2499%2038.9259%2052.167%2039.1432%2052.0599L40.8591%2051.2626L42.5702%2050.266C42.9009%2050.0682%2043.0205%2049.6414%2042.8282%2049.2984C42.632%2048.9526%2042.2034%2048.8308%2041.8634%2049.0166L40.1792%2049.9218L38.4995%2050.6224C38.3169%2050.6953%2038.121%2050.7534%2037.9224%2050.8155C37.7838%2050.8489%2037.6518%2050.8983%2037.5012%2050.9408C36.0711%2051.435%2034.2445%2051.7425%2032.244%2051.8346C32.0442%2051.8383%2031.8471%2051.8379%2031.654%2051.8403C31.3051%2051.8414%2030.9602%2051.8451%2030.6392%2051.8305L28.9177%2051.6725C28.5476%2051.619%2028.1695%2051.5427%2027.7848%2051.4678C27.5639%2051.4167%2027.3376%2051.3737%2027.1299%2051.3374L26.9529%2051.2987C26.8704%2051.2834%2026.7772%2051.2667%2026.7333%2051.2543L25.3466%2050.8322C22.7651%2049.9789%2020.33%2048.5729%2018.2942%2046.7557C16.1056%2044.7951%2014.3339%2042.2335%2013.1742%2039.3582C12.0276%2036.6013%2011.5988%2033.2792%2011.9716%2030.0076C12.3145%2027.0213%2013.3948%2024.1635%2015.1858%2021.5083C15.3034%2021.3339%2015.421%2021.1596%2015.5212%2021.0196C16.4309%2019.8688%2017.5408%2018.5589%2018.9483%2017.496C19.3367%2017.1525%2019.7862%2016.856%2020.2611%2016.5478C20.4878%2016.4009%2020.7079%2016.2553%2020.8907%2016.1306C21.0974%2016.0048%2021.3188%2015.8831%2021.5348%2015.7694C21.6761%2015.6975%2021.8162%2015.619%2021.9388%2015.5576L22.1002%2015.4646C22.4002%2015.3037%2022.6749%2015.1546%2022.9908%2015.039L24.1186%2014.5715C24.3399%2014.4844%2024.5718%2014.4159%2024.7997%2014.3447C24.953%2014.2982%2025.0982%2014.2635%2025.2635%2014.2078C25.786%2014.0182%2026.3283%2013.9112%2026.9105%2013.7965C27.117%2013.7571%2027.3302%2013.7163%2027.5608%2013.6585C27.7553%2013.611%2027.9737%2013.5969%2028.2082%2013.5762C28.364%2013.5603%2028.5172%2013.5483%2028.6318%2013.5333C28.7876%2013.5173%2028.9342%2013.5066%2029.0927%2013.4867C29.3285%2013.4555%2029.5456%2013.4347%2029.7494%2013.4337C30.0237%2013.44%2030.2994%2013.4357%2030.5777%2013.4274C31.0811%2013.421%2031.5579%2013.4197%2032.0318%2013.4914C34.9664%2013.7352%2037.7144%2014.6085%2040.2052%2016.0868C42.3489%2017.3655%2044.2716%2019.1525%2045.7607%2021.264C47.0255%2023.0628%2047.9756%2025.0528%2048.4928%2027.0393C48.572%2027.3176%2048.6299%2027.5931%2048.6839%2027.8659C48.7154%2028.0428%2048.7563%2028.2145%2048.7892%2028.3636C48.8037%2028.4541%2048.8208%2028.5406%2048.8445%2028.6258C48.8749%2028.7443%2048.8986%2028.864%2048.9116%2028.9651L48.9793%2029.6047C48.9922%2029.7748%2049.0132%2029.9331%2049.0301%2030.0887C49.0668%2030.3268%2049.0889%2030.5608%2049.0964%2030.7561L49.1083%2031.9001C49.1312%2032.3307%2049.089%2032.7116%2049.0522%2033.0673C49.0384%2033.2598%2049.0126%2033.4443%2049.0123%2033.5824C48.9961%2033.6926%2048.9918%2033.7935%2048.9836%2033.8917C48.9753%2034.0072%2048.9724%2034.1148%2048.9414%2034.2554L48.5449%2036.3059C48.3134%2037.8623%2049.3793%2039.3365%2050.9488%2039.5822C52.0417%2039.7601%2053.1536%2039.2819%2053.7711%2038.3664C54.0063%2038.0176%2054.1604%2037.6257%2054.2227%2037.2064L54.5217%2035.2574C54.5514%2035.0756%2054.572%2034.83%2054.5846%2034.5791L54.6028%2034.2338C54.6098%2034.0598%2054.6223%2033.8779%2054.6347%2033.6788C54.6734%2033.1052%2054.7163%2032.4479%2054.6619%2031.8058L54.5867%2030.4289C54.5622%2030.0952%2054.5097%2029.76%2054.4559%2029.4181C54.431%2029.2572%2054.4048%2029.0896%2054.3826%2028.9074L54.2687%2028.104C54.2332%2027.9244%2054.1804%2027.7273%2054.1329%2027.5396L54.0643%2027.2454C54.0195%2027.071%2053.9773%2026.8927%2053.9338%2026.7076C53.8455%2026.3309%2053.7479%2025.9422%2053.613%2025.5571C52.84%2023.0292%2051.5383%2020.5194%2049.8338%2018.2799C47.8544%2015.682%2045.3333%2013.5087%2042.5563%2011.9816Z'%20fill='%234945FF'/%3e%3c/svg%3e";
-
-module.exports = loaderSvg;

package/dist/Loader/assets/loader.svg.mjs

@@ -1,3 +0,0 @@
-const loaderSvg = "data:image/svg+xml,%3csvg%20width='63'%20height='63'%20viewBox='0%200%2063%2063'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M42.5563%2011.9816C39.484%2010.3071%2035.8575%209.29097%2032.3354%209.13521C28.6443%208.92888%2024.8295%209.72318%2021.3336%2011.4129C20.9123%2011.5901%2020.5376%2011.8101%2020.1722%2012.0249L20.0108%2012.1179C19.8774%2012.1951%2019.7441%2012.2724%2019.608%2012.3536C19.3253%2012.5146%2019.0492%2012.6744%2018.7544%2012.8792C18.5463%2013.0329%2018.3395%2013.1759%2018.1301%2013.323C17.5658%2013.7208%2016.9868%2014.1317%2016.4983%2014.5979C14.8476%2015.9524%2013.5571%2017.6075%2012.6071%2018.9214C10.4365%2022.1566%209.08622%2025.9567%208.80702%2029.6143L8.7764%2030.1588C8.73328%2030.9196%208.68476%2031.7057%208.75353%2032.4555C8.76648%2032.6084%208.7661%2032.7638%208.77506%2032.914C8.78895%2033.229%208.80152%2033.5373%208.846%2033.8672L9.07396%2035.4221C9.09756%2035.5764%209.1198%2035.7413%209.1633%2035.9263L9.65919%2037.9272L10.138%2039.2823C10.2729%2039.6673%2010.4158%2040.0751%2010.6%2040.43C12.0292%2043.637%2014.1425%2046.4578%2016.7063%2048.585C19.0508%2050.5296%2021.824%2052.0023%2024.7491%2052.8452L26.2371%2053.2376C26.3781%2053.2693%2026.4926%2053.2889%2026.6031%2053.3058L26.7775%2053.3311C27.0052%2053.3636%2027.2195%2053.3986%2027.4445%2053.435C27.8598%2053.5076%2028.2672%2053.5748%2028.7079%2053.6183L30.5641%2053.7229C30.9516%2053.7249%2031.3352%2053.7068%2031.7081%2053.6874C31.9039%2053.681%2032.0984%2053.6681%2032.3288%2053.662C34.5253%2053.4772%2036.5106%2053.0634%2038.0516%2052.4652C38.1769%2052.4171%2038.3008%2052.3796%2038.4234%2052.3355C38.6727%2052.2499%2038.9259%2052.167%2039.1432%2052.0599L40.8591%2051.2626L42.5702%2050.266C42.9009%2050.0682%2043.0205%2049.6414%2042.8282%2049.2984C42.632%2048.9526%2042.2034%2048.8308%2041.8634%2049.0166L40.1792%2049.9218L38.4995%2050.6224C38.3169%2050.6953%2038.121%2050.7534%2037.9224%2050.8155C37.7838%2050.8489%2037.6518%2050.8983%2037.5012%2050.9408C36.0711%2051.435%2034.2445%2051.7425%2032.244%2051.8346C32.0442%2051.8383%2031.8471%2051.8379%2031.654%2051.8403C31.3051%2051.8414%2030.9602%2051.8451%2030.6392%2051.8305L28.9177%2051.6725C28.5476%2051.619%2028.1695%2051.5427%2027.7848%2051.4678C27.5639%2051.4167%2027.3376%2051.3737%2027.1299%2051.3374L26.9529%2051.2987C26.8704%2051.2834%2026.7772%2051.2667%2026.7333%2051.2543L25.3466%2050.8322C22.7651%2049.9789%2020.33%2048.5729%2018.2942%2046.7557C16.1056%2044.7951%2014.3339%2042.2335%2013.1742%2039.3582C12.0276%2036.6013%2011.5988%2033.2792%2011.9716%2030.0076C12.3145%2027.0213%2013.3948%2024.1635%2015.1858%2021.5083C15.3034%2021.3339%2015.421%2021.1596%2015.5212%2021.0196C16.4309%2019.8688%2017.5408%2018.5589%2018.9483%2017.496C19.3367%2017.1525%2019.7862%2016.856%2020.2611%2016.5478C20.4878%2016.4009%2020.7079%2016.2553%2020.8907%2016.1306C21.0974%2016.0048%2021.3188%2015.8831%2021.5348%2015.7694C21.6761%2015.6975%2021.8162%2015.619%2021.9388%2015.5576L22.1002%2015.4646C22.4002%2015.3037%2022.6749%2015.1546%2022.9908%2015.039L24.1186%2014.5715C24.3399%2014.4844%2024.5718%2014.4159%2024.7997%2014.3447C24.953%2014.2982%2025.0982%2014.2635%2025.2635%2014.2078C25.786%2014.0182%2026.3283%2013.9112%2026.9105%2013.7965C27.117%2013.7571%2027.3302%2013.7163%2027.5608%2013.6585C27.7553%2013.611%2027.9737%2013.5969%2028.2082%2013.5762C28.364%2013.5603%2028.5172%2013.5483%2028.6318%2013.5333C28.7876%2013.5173%2028.9342%2013.5066%2029.0927%2013.4867C29.3285%2013.4555%2029.5456%2013.4347%2029.7494%2013.4337C30.0237%2013.44%2030.2994%2013.4357%2030.5777%2013.4274C31.0811%2013.421%2031.5579%2013.4197%2032.0318%2013.4914C34.9664%2013.7352%2037.7144%2014.6085%2040.2052%2016.0868C42.3489%2017.3655%2044.2716%2019.1525%2045.7607%2021.264C47.0255%2023.0628%2047.9756%2025.0528%2048.4928%2027.0393C48.572%2027.3176%2048.6299%2027.5931%2048.6839%2027.8659C48.7154%2028.0428%2048.7563%2028.2145%2048.7892%2028.3636C48.8037%2028.4541%2048.8208%2028.5406%2048.8445%2028.6258C48.8749%2028.7443%2048.8986%2028.864%2048.9116%2028.9651L48.9793%2029.6047C48.9922%2029.7748%2049.0132%2029.9331%2049.0301%2030.0887C49.0668%2030.3268%2049.0889%2030.5608%2049.0964%2030.7561L49.1083%2031.9001C49.1312%2032.3307%2049.089%2032.7116%2049.0522%2033.0673C49.0384%2033.2598%2049.0126%2033.4443%2049.0123%2033.5824C48.9961%2033.6926%2048.9918%2033.7935%2048.9836%2033.8917C48.9753%2034.0072%2048.9724%2034.1148%2048.9414%2034.2554L48.5449%2036.3059C48.3134%2037.8623%2049.3793%2039.3365%2050.9488%2039.5822C52.0417%2039.7601%2053.1536%2039.2819%2053.7711%2038.3664C54.0063%2038.0176%2054.1604%2037.6257%2054.2227%2037.2064L54.5217%2035.2574C54.5514%2035.0756%2054.572%2034.83%2054.5846%2034.5791L54.6028%2034.2338C54.6098%2034.0598%2054.6223%2033.8779%2054.6347%2033.6788C54.6734%2033.1052%2054.7163%2032.4479%2054.6619%2031.8058L54.5867%2030.4289C54.5622%2030.0952%2054.5097%2029.76%2054.4559%2029.4181C54.431%2029.2572%2054.4048%2029.0896%2054.3826%2028.9074L54.2687%2028.104C54.2332%2027.9244%2054.1804%2027.7273%2054.1329%2027.5396L54.0643%2027.2454C54.0195%2027.071%2053.9773%2026.8927%2053.9338%2026.7076C53.8455%2026.3309%2053.7479%2025.9422%2053.613%2025.5571C52.84%2023.0292%2051.5383%2020.5194%2049.8338%2018.2799C47.8544%2015.682%2045.3333%2013.5087%2042.5563%2011.9816Z'%20fill='%234945FF'/%3e%3c/svg%3e";
-
-export { loaderSvg as default };

package/dist/Loader/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Loader = require('./Loader.js');
-
-
-
-exports.Loader = Loader.Loader;

package/dist/Loader/index.mjs

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

package/dist/Main/Main.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const MainWrapper = styled__default.default(Box.Box) `
-  // To prevent global outline on focus visible to force an outline when Main is focused
-  &:focus-visible {
-    outline: none;
-  }
-`;
-const Main = ({ labelledBy = 'main-content-title', ...props }) => {
-    return jsxRuntime.jsx(MainWrapper, { "aria-labelledby": labelledBy, as: "main", id: "main-content", tabIndex: -1, ...props });
-};
-
-exports.Main = Main;

package/dist/Main/Main.mjs

@@ -1,15 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Box } from '../Box/Box.mjs';
-
-const MainWrapper = styled(Box) `
-  // To prevent global outline on focus visible to force an outline when Main is focused
-  &:focus-visible {
-    outline: none;
-  }
-`;
-const Main = ({ labelledBy = 'main-content-title', ...props }) => {
-    return jsx(MainWrapper, { "aria-labelledby": labelledBy, as: "main", id: "main-content", tabIndex: -1, ...props });
-};
-
-export { Main };

package/dist/Main/SkipToContent.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const AnchorBox = styled__default.default(Box.Box) `
-  text-decoration: none;
-
-  &:focus {
-    left: ${({ theme }) => theme.spaces[3]};
-    top: ${({ theme }) => theme.spaces[3]};
-  }
-`;
-const SkipToContent = ({ children }) => {
-    return (jsxRuntime.jsx(AnchorBox, { as: "a", href: "#main-content", background: "primary600", color: "neutral0", left: "-100%", padding: 3, position: "absolute", top: "-100%", hasRadius: true, zIndex: 9999, children: children }));
-};
-
-exports.SkipToContent = SkipToContent;

package/dist/Main/SkipToContent.mjs

@@ -1,17 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Box } from '../Box/Box.mjs';
-
-const AnchorBox = styled(Box) `
-  text-decoration: none;
-
-  &:focus {
-    left: ${({ theme }) => theme.spaces[3]};
-    top: ${({ theme }) => theme.spaces[3]};
-  }
-`;
-const SkipToContent = ({ children }) => {
-    return (jsx(AnchorBox, { as: "a", href: "#main-content", background: "primary600", color: "neutral0", left: "-100%", padding: 3, position: "absolute", top: "-100%", hasRadius: true, zIndex: 9999, children: children }));
-};
-
-export { SkipToContent };

package/dist/Main/index.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Main = require('./Main.js');
-const SkipToContent = require('./SkipToContent.js');
-
-
-
-exports.Main = Main.Main;
-exports.SkipToContent = SkipToContent.SkipToContent;

package/dist/Main/index.mjs

@@ -1,2 +0,0 @@
-export { Main } from './Main.mjs';
-export { SkipToContent } from './SkipToContent.mjs';

package/dist/MainNav/MainNav.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const MainNavContext = require('./MainNavContext.js');
-const Flex = require('../Flex/Flex.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const MainNavWrapper = styled__default.default(Flex.Flex) `
-  width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const MainNav = ({ condensed = false, ...props }) => {
-    return (jsxRuntime.jsx(MainNavContext.MainNavContext.Provider, { value: condensed, children: jsxRuntime.jsx(MainNavWrapper, { alignItems: "normal", as: "nav", background: "neutral0", condensed: condensed, direction: "column", height: "100vh", position: "sticky", top: 0, zIndex: 2, ...props }) }));
-};
-
-exports.MainNav = MainNav;

package/dist/MainNav/MainNav.mjs

@@ -1,14 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { MainNavContext } from './MainNavContext.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-const MainNavWrapper = styled(Flex) `
-  width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const MainNav = ({ condensed = false, ...props }) => {
-    return (jsx(MainNavContext.Provider, { value: condensed, children: jsx(MainNavWrapper, { alignItems: "normal", as: "nav", background: "neutral0", condensed: condensed, direction: "column", height: "100vh", position: "sticky", top: 0, zIndex: 2, ...props }) }));
-};
-
-export { MainNav };

package/dist/MainNav/MainNavContext.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const MainNavContext = React.createContext(false);
-const useMainNav = () => React.useContext(MainNavContext);
-
-exports.MainNavContext = MainNavContext;
-exports.useMainNav = useMainNav;

package/dist/MainNav/MainNavContext.mjs

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const MainNavContext = createContext(false);
-const useMainNav = () => useContext(MainNavContext);
-
-export { MainNavContext, useMainNav };

package/dist/MainNav/NavBrand.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactRouterDom = require('react-router-dom');
-const styled = require('styled-components');
-const MainNavContext = require('./MainNavContext.js');
-const Box = require('../Box/Box.js');
-const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const Flex = require('../Flex/Flex.js');
-const Typography = require('../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const BrandIconWrapper = styled__default.default.div `
-  svg,
-  img {
-    border-radius: ${({ theme }) => theme.borderRadius};
-    object-fit: contain;
-    height: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
-    width: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
-  }
-`;
-const NavLinkWrapper = styled__default.default(reactRouterDom.NavLink) `
-  text-decoration: unset;
-  color: inherit;
-`;
-const NavBrand = ({ workplace, title, icon, to = '/' }) => {
-    const condensed = MainNavContext.useMainNav();
-    if (condensed) {
-        return (jsxRuntime.jsx(Box.Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxRuntime.jsx(BrandIconWrapper, { condensed: true, children: jsxRuntime.jsxs(reactRouterDom.NavLink, { to: to, children: [icon, jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [jsxRuntime.jsx("span", { children: title }), jsxRuntime.jsx("span", { children: workplace })] })] }) }) }));
-    }
-    return (jsxRuntime.jsx(Box.Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxRuntime.jsxs(Flex.Flex, { children: [jsxRuntime.jsx(BrandIconWrapper, { as: reactRouterDom.NavLink, to: to, "aria-hidden": true, tabIndex: -1, children: icon }), jsxRuntime.jsxs(Box.Box, { paddingLeft: 2, children: [jsxRuntime.jsx(Typography.Typography, { fontWeight: "bold", textColor: "neutral800", as: "span", children: jsxRuntime.jsxs(NavLinkWrapper, { to: to, children: [title, jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { as: "span", children: workplace })] }) }), jsxRuntime.jsx(Typography.Typography, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": true, children: workplace })] })] }) }));
-};
-
-exports.NavBrand = NavBrand;

package/dist/MainNav/NavBrand.mjs

@@ -1,31 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-import { useMainNav } from './MainNavContext.mjs';
-import { Box } from '../Box/Box.mjs';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const BrandIconWrapper = styled.div `
-  svg,
-  img {
-    border-radius: ${({ theme }) => theme.borderRadius};
-    object-fit: contain;
-    height: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
-    width: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
-  }
-`;
-const NavLinkWrapper = styled(NavLink) `
-  text-decoration: unset;
-  color: inherit;
-`;
-const NavBrand = ({ workplace, title, icon, to = '/' }) => {
-    const condensed = useMainNav();
-    if (condensed) {
-        return (jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsx(BrandIconWrapper, { condensed: true, children: jsxs(NavLink, { to: to, children: [icon, jsxs(VisuallyHidden, { children: [jsx("span", { children: title }), jsx("span", { children: workplace })] })] }) }) }));
-    }
-    return (jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxs(Flex, { children: [jsx(BrandIconWrapper, { as: NavLink, to: to, "aria-hidden": true, tabIndex: -1, children: icon }), jsxs(Box, { paddingLeft: 2, children: [jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: "span", children: jsxs(NavLinkWrapper, { to: to, children: [title, jsx(VisuallyHidden, { as: "span", children: workplace })] }) }), jsx(Typography, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": true, children: workplace })] })] }) }));
-};
-
-export { NavBrand };

package/dist/MainNav/NavCondense.js

@@ -1,41 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const MainNavContext = require('./MainNavContext.js');
-const Icon = require('../Icon/Icon.js');
-const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const NavCondenseWrapper = styled__default.default.button `
-  background: ${({ theme }) => theme.colors.neutral0};
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  bottom: ${(9 + 4) / 16}rem; // 9 is the height of the svg and 4 is the padding below
-  right: ${({ theme, condensed }) => (condensed ? 0 : theme.spaces[5])};
-  transform: ${({ condensed }) => (condensed ? `translateX(50%)` : undefined)};
-  z-index: 2;
-  width: ${18 / 16}rem;
-  height: ${25 / 16}rem;
-
-  svg {
-    width: ${6 / 16}rem;
-    height: ${9 / 16}rem;
-  }
-`;
-const NavCondense = ({ children, ...props }) => {
-    const condensed = MainNavContext.useMainNav();
-    return (jsxRuntime.jsxs(NavCondenseWrapper, { as: "button", condensed: condensed, ...props, children: [jsxRuntime.jsx(Icon.Icon, { as: condensed ? icons.ChevronRight : icons.ChevronLeft, "aria-hidden": true, color: "neutral600" }), jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children })] }));
-};
-
-exports.NavCondense = NavCondense;

package/dist/MainNav/NavCondense.mjs

@@ -1,33 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronRight, ChevronLeft } from '@strapi/icons';
-import styled from 'styled-components';
-import { useMainNav } from './MainNavContext.mjs';
-import { Icon } from '../Icon/Icon.mjs';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-
-const NavCondenseWrapper = styled.button `
-  background: ${({ theme }) => theme.colors.neutral0};
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  bottom: ${(9 + 4) / 16}rem; // 9 is the height of the svg and 4 is the padding below
-  right: ${({ theme, condensed }) => (condensed ? 0 : theme.spaces[5])};
-  transform: ${({ condensed }) => (condensed ? `translateX(50%)` : undefined)};
-  z-index: 2;
-  width: ${18 / 16}rem;
-  height: ${25 / 16}rem;
-
-  svg {
-    width: ${6 / 16}rem;
-    height: ${9 / 16}rem;
-  }
-`;
-const NavCondense = ({ children, ...props }) => {
-    const condensed = useMainNav();
-    return (jsxs(NavCondenseWrapper, { as: "button", condensed: condensed, ...props, children: [jsx(Icon, { as: condensed ? ChevronRight : ChevronLeft, "aria-hidden": true, color: "neutral600" }), jsx(VisuallyHidden, { children: children })] }));
-};
-
-export { NavCondense };

package/dist/MainNav/NavFooter.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const Box = require('../Box/Box.js');
-
-const NavFooter = ({ children }) => {
-    return jsxRuntime.jsx(Box.Box, { position: "relative", children: children });
-};
-
-exports.NavFooter = NavFooter;

package/dist/MainNav/NavFooter.mjs

@@ -1,8 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Box } from '../Box/Box.mjs';
-
-const NavFooter = ({ children }) => {
-    return jsx(Box, { position: "relative", children: children });
-};
-
-export { NavFooter };

package/dist/MainNav/NavLink.js

@@ -1,100 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactRouterDom = require('react-router-dom');
-const styled = require('styled-components');
-const MainNavContext = require('./MainNavContext.js');
-const Box = require('../Box/Box.js');
-const Typography = require('../Typography/Typography.js');
-const Flex = require('../Flex/Flex.js');
-const Badge = require('../Badge/Badge.js');
-const Tooltip = require('../Tooltip/Tooltip.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const IconBox = styled__default.default(Box.Box) `
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-`;
-const MainNavLinkWrapper = styled__default.default(reactRouterDom.NavLink) `
-  position: relative;
-  text-decoration: none;
-  display: block;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-
-  ${Typography.Typography} {
-    color: ${({ theme }) => theme.colors.neutral600};
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.neutral100};
-
-    ${Typography.Typography} {
-      color: ${({ theme }) => theme.colors.neutral700};
-    }
-
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-
-  &.active {
-    background: ${({ theme }) => theme.colors.primary100};
-
-    svg path {
-      fill: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${Typography.Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-      font-weight: 500;
-    }
-  }
-`;
-const MainNavRow = styled__default.default(Flex.Flex) `
-  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`};
-`;
-const CustomBadge = styled__default.default(Badge.Badge) `
-  ${({ theme, condensed }) => condensed &&
-    `
-	  position: absolute;
-    // Values based on visual aspect 
-    top: -${theme.spaces[3]};
-    right:  -${theme.spaces[1]};
-  `}
-
-  ${Typography.Typography} {
-    //find a solution to remove !important
-    color: ${({ theme }) => theme.colors.neutral0} !important;
-    line-height: 0;
-  }
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: ${({ theme }) => theme.spaces[6]};
-  height: ${({ theme }) => theme.spaces[5]};
-  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
-  border-radius: ${({ theme }) => theme.spaces[10]};
-  background: ${({ theme }) => theme.colors.primary600};
-`;
-const NavLink = ({ children, icon, badgeContent, badgeAriaLabel, ...props }) => {
-    const condensed = MainNavContext.useMainNav();
-    if (condensed) {
-        return (jsxRuntime.jsx(Tooltip.Tooltip, { position: "right", label: children, children: jsxRuntime.jsx(MainNavLinkWrapper, { ...props, children: jsxRuntime.jsxs(MainNavRow, { as: "span", children: [jsxRuntime.jsx(IconBox, { "aria-hidden": true, paddingRight: 0, as: "span", children: icon }), badgeContent && (jsxRuntime.jsx(CustomBadge, { condensed: true, "aria-label": badgeAriaLabel, children: badgeContent }))] }) }) }));
-    }
-    return (jsxRuntime.jsx(MainNavLinkWrapper, { ...props, children: jsxRuntime.jsxs(MainNavRow, { as: "span", justifyContent: "space-between", children: [jsxRuntime.jsxs(Flex.Flex, { children: [jsxRuntime.jsx(IconBox, { "aria-hidden": true, paddingRight: 3, as: "span", children: icon }), jsxRuntime.jsx(Typography.Typography, { children: children })] }), badgeContent && (jsxRuntime.jsx(CustomBadge, { justifyContent: "center", "aria-label": badgeAriaLabel, children: badgeContent }))] }) }));
-};
-
-exports.NavLink = NavLink;

package/dist/MainNav/NavLink.mjs

@@ -1,92 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { NavLink as NavLink$1 } from 'react-router-dom';
-import styled from 'styled-components';
-import { useMainNav } from './MainNavContext.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Badge } from '../Badge/Badge.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
-
-const IconBox = styled(Box) `
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-`;
-const MainNavLinkWrapper = styled(NavLink$1) `
-  position: relative;
-  text-decoration: none;
-  display: block;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-
-  ${Typography} {
-    color: ${({ theme }) => theme.colors.neutral600};
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.neutral100};
-
-    ${Typography} {
-      color: ${({ theme }) => theme.colors.neutral700};
-    }
-
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-
-  &.active {
-    background: ${({ theme }) => theme.colors.primary100};
-
-    svg path {
-      fill: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-      font-weight: 500;
-    }
-  }
-`;
-const MainNavRow = styled(Flex) `
-  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`};
-`;
-const CustomBadge = styled(Badge) `
-  ${({ theme, condensed }) => condensed &&
-    `
-	  position: absolute;
-    // Values based on visual aspect 
-    top: -${theme.spaces[3]};
-    right:  -${theme.spaces[1]};
-  `}
-
-  ${Typography} {
-    //find a solution to remove !important
-    color: ${({ theme }) => theme.colors.neutral0} !important;
-    line-height: 0;
-  }
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: ${({ theme }) => theme.spaces[6]};
-  height: ${({ theme }) => theme.spaces[5]};
-  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
-  border-radius: ${({ theme }) => theme.spaces[10]};
-  background: ${({ theme }) => theme.colors.primary600};
-`;
-const NavLink = ({ children, icon, badgeContent, badgeAriaLabel, ...props }) => {
-    const condensed = useMainNav();
-    if (condensed) {
-        return (jsx(Tooltip, { position: "right", label: children, children: jsx(MainNavLinkWrapper, { ...props, children: jsxs(MainNavRow, { as: "span", children: [jsx(IconBox, { "aria-hidden": true, paddingRight: 0, as: "span", children: icon }), badgeContent && (jsx(CustomBadge, { condensed: true, "aria-label": badgeAriaLabel, children: badgeContent }))] }) }) }));
-    }
-    return (jsx(MainNavLinkWrapper, { ...props, children: jsxs(MainNavRow, { as: "span", justifyContent: "space-between", children: [jsxs(Flex, { children: [jsx(IconBox, { "aria-hidden": true, paddingRight: 3, as: "span", children: icon }), jsx(Typography, { children: children })] }), badgeContent && (jsx(CustomBadge, { justifyContent: "center", "aria-label": badgeAriaLabel, children: badgeContent }))] }) }));
-};
-
-export { NavLink };

package/dist/MainNav/NavSection.js

@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const MainNavContext = require('./MainNavContext.js');
-const Divider = require('../Divider/Divider.js');
-const Flex = require('../Flex/Flex.js');
-const Box = require('../Box/Box.js');
-const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const Typography = require('../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const React__default = /*#__PURE__*/_interopDefault(React);
-
-const NavSection = ({ label, children, spacing = 2, horizontal = false, ...props }) => {
-    const condensed = MainNavContext.useMainNav();
-    if (condensed) {
-        return (jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsxRuntime.jsxs(Box.Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: true, as: "span", children: [jsxRuntime.jsx(Divider.Divider, {}), jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: jsxRuntime.jsx("span", { children: label }) })] }), jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.default.Children.map(children, (child, index) => {
-                        // eslint-disable-next-line react/no-array-index-key
-                        return jsxRuntime.jsx("li", { children: child }, index);
-                    }) })] }));
-    }
-    return (jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsxRuntime.jsx(Box.Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: true, as: "span", children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.default.Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsxRuntime.jsx("li", { children: child }, index);
-                }) })] }));
-};
-
-exports.NavSection = NavSection;