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

package/dist/KeyboardNavigable/KeyboardNavigable.mjs

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const KeyboardNavigable = ({ tagName, attributeName = '', ...props }) => {
+    const isValidFocusedElement = () => {
+        const focused = document.activeElement;
+        if (!focused) {
+            return false;
+        }
+        if (tagName) {
+            return focused.tagName.toLowerCase() === tagName;
+        }
+        return focused.hasAttribute(attributeName);
+    };
+    const queryElement = (parentEl) => {
+        if (tagName) {
+            return parentEl.querySelectorAll(tagName);
+        }
+        return parentEl.querySelectorAll(`[${attributeName}]`);
+    };
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case KeyboardKeys.RIGHT:
+            case KeyboardKeys.DOWN: {
+                if (isValidFocusedElement()) {
+                    e.preventDefault();
+                    const focused = document.activeElement;
+                    const allElements = [...queryElement(e.currentTarget)];
+                    const focusedIndex = allElements.findIndex((node) => node === focused);
+                    const nextIndex = focusedIndex + 1 < allElements.length ? focusedIndex + 1 : 0;
+                    allElements[nextIndex].focus();
+                }
+                break;
+            }
+            case KeyboardKeys.LEFT:
+            case KeyboardKeys.UP: {
+                if (isValidFocusedElement()) {
+                    e.preventDefault();
+                    const focused = document.activeElement;
+                    const allElements = [...queryElement(e.currentTarget)];
+                    const focusedIndex = allElements.findIndex((node) => node === focused);
+                    const nextIndex = focusedIndex - 1 > -1 ? focusedIndex - 1 : allElements.length - 1;
+                    allElements[nextIndex].focus();
+                }
+                break;
+            }
+            case KeyboardKeys.HOME: {
+                if (isValidFocusedElement()) {
+                    e.preventDefault();
+                    const allElements = queryElement(e.currentTarget);
+                    const focusElement = allElements.item(0);
+                    focusElement.focus();
+                }
+                break;
+            }
+            case KeyboardKeys.END: {
+                if (isValidFocusedElement()) {
+                    e.preventDefault();
+                    const allElements = queryElement(e.currentTarget);
+                    const focusElement = allElements.item(allElements.length - 1);
+                    focusElement.focus();
+                }
+                break;
+            }
+        }
+    };
+    return jsx(Box, { onKeyDown: handleKeyDown, ...props });
+};
+
+export { KeyboardNavigable };

package/dist/KeyboardNavigable/index.js

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

package/dist/KeyboardNavigable/index.mjs

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

package/dist/Layout/ActionLayout.js

@@ -1,6 +1,15 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { Flex as r } from "../Flex/Flex.js";
-const o = ({ startActions: t, endActions: e }) => !t && !e ? null : p(r, { justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 4, paddingLeft: 10, paddingRight: 10, children: [n(r, { gap: 2, wrap: "wrap", children: t }), n(r, { gap: 2, shrink: 0, wrap: "wrap", children: e })] });
-export {
-  o as ActionLayout
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Flex = require('../Flex/Flex.js');
+
+const ActionLayout = ({ startActions, endActions }) => {
+    if (!startActions && !endActions) {
+        return null;
+    }
+    return (jsxRuntime.jsxs(Flex.Flex, { justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 4, paddingLeft: 10, paddingRight: 10, children: [jsxRuntime.jsx(Flex.Flex, { gap: 2, wrap: "wrap", children: startActions }), jsxRuntime.jsx(Flex.Flex, { gap: 2, shrink: 0, wrap: "wrap", children: endActions })] }));
 };
+
+exports.ActionLayout = ActionLayout;

package/dist/Layout/ActionLayout.mjs

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex } from '../Flex/Flex.mjs';
+
+const ActionLayout = ({ startActions, endActions }) => {
+    if (!startActions && !endActions) {
+        return null;
+    }
+    return (jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 4, paddingLeft: 10, paddingRight: 10, children: [jsx(Flex, { gap: 2, wrap: "wrap", children: startActions }), jsx(Flex, { gap: 2, shrink: 0, wrap: "wrap", children: endActions })] }));
+};
+
+export { ActionLayout };

package/dist/Layout/ContentLayout.js

@@ -1,6 +1,12 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Box as r } from "../Box/Box.js";
-const d = ({ children: t }) => o(r, { paddingLeft: 10, paddingRight: 10, children: t });
-export {
-  d as ContentLayout
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Box = require('../Box/Box.js');
+
+const ContentLayout = ({ children }) => {
+    return (jsxRuntime.jsx(Box.Box, { paddingLeft: 10, paddingRight: 10, children: children }));
 };
+
+exports.ContentLayout = ContentLayout;

package/dist/Layout/ContentLayout.mjs

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../Box/Box.mjs';
+
+const ContentLayout = ({ children }) => {
+    return (jsx(Box, { paddingLeft: 10, paddingRight: 10, children: children }));
+};
+
+export { ContentLayout };

package/dist/Layout/GridLayout.js

@@ -1,9 +1,17 @@
-import i from "styled-components";
-const a = i.div`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const GridLayout = styled__default.default.div `
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: ${({ theme: t }) => t.spaces[4]};
+  grid-gap: ${({ theme }) => theme.spaces[4]};
 `;
-export {
-  a as GridLayout
-};
+
+exports.GridLayout = GridLayout;

package/dist/Layout/GridLayout.mjs

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const GridLayout = styled.div `
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: ${({ theme }) => theme.spaces[4]};
+`;
+
+export { GridLayout };

package/dist/Layout/HeaderLayout.js

@@ -1,32 +1,53 @@
-import { jsx as e, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import x, { useRef as R, useState as y, useEffect as L } from "react";
-import w from "styled-components";
-import { useElementOnScreen as B } from "../hooks/useElementOnScreen.js";
-import { useResizeObserver as S } from "../hooks/useResizeObserver.js";
-import { Box as n } from "../Box/Box.js";
-import { Flex as o } from "../Flex/Flex.js";
-import { Typography as u } from "../Typography/Typography.js";
-const b = (r) => {
-  const t = R(null), [i, d] = y(null), [a, h] = B({
-    root: null,
-    rootMargin: "0px",
-    threshold: 0
-  });
-  return S(a, () => {
-    a.current && d(a.current.getBoundingClientRect());
-  }), L(() => {
-    t.current && d(t.current.getBoundingClientRect());
-  }, [t]), l(m, { children: [e("div", { style: { height: i?.height }, ref: a, children: h && e(p, { ref: t, ...r }) }), !h && e(p, { ...r, sticky: !0, width: i?.width })] });
+'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 useElementOnScreen = require('../hooks/useElementOnScreen.js');
+const useResizeObserver = require('../hooks/useResizeObserver.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const HeaderLayout = (props) => {
+    const baseHeaderLayoutRef = React.useRef(null);
+    const [headerSize, setHeaderSize] = React.useState(null);
+    const [containerRef, isVisible] = useElementOnScreen.useElementOnScreen({
+        root: null,
+        rootMargin: '0px',
+        threshold: 0,
+    });
+    useResizeObserver.useResizeObserver(containerRef, () => {
+        if (containerRef.current) {
+            setHeaderSize(containerRef.current.getBoundingClientRect());
+        }
+    });
+    React.useEffect(() => {
+        if (baseHeaderLayoutRef.current) {
+            setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+        }
+    }, [baseHeaderLayoutRef]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: { height: headerSize?.height }, ref: containerRef, children: isVisible && jsxRuntime.jsx(BaseHeaderLayout, { ref: baseHeaderLayoutRef, ...props }) }), !isVisible && jsxRuntime.jsx(BaseHeaderLayout, { ...props, sticky: true, width: headerSize?.width })] }));
 };
-b.displayName = "HeaderLayout";
-const C = w(n)`
-  width: ${({ width: r }) => r ? `${r / 16}rem` : void 0};
-  z-index: ${({ theme: r }) => r.zIndices[1]};
-`, p = x.forwardRef(({ navigationAction: r, primaryAction: t, secondaryAction: i, subtitle: d, title: a, sticky: h, width: c, ...s }, g) => {
-  const f = typeof d == "string";
-  return h ? e(C, { paddingLeft: 6, paddingRight: 6, paddingTop: 3, paddingBottom: 3, position: "fixed", top: 0, right: 0, background: "neutral0", shadow: "tableShadow", width: c, "data-strapi-header-sticky": !0, children: l(o, { justifyContent: "space-between", children: [l(o, { children: [r && e(n, { paddingRight: 3, children: r }), l(n, { children: [e(u, { variant: "beta", as: "h1", ...s, children: a }), f ? e(u, { variant: "pi", textColor: "neutral600", children: d }) : d] }), i ? e(n, { paddingLeft: 4, children: i }) : null] }), e(o, { children: t ? e(n, { paddingLeft: 2, children: t }) : void 0 })] }) }) : l(n, { ref: g, paddingLeft: 10, paddingRight: 10, paddingBottom: 8, paddingTop: r ? 6 : 8, background: "neutral100", "data-strapi-header": !0, children: [r ? e(n, { paddingBottom: 2, children: r }) : null, l(o, { justifyContent: "space-between", children: [l(o, { minWidth: 0, children: [e(u, { as: "h1", variant: "alpha", ...s, children: a }), i ? e(n, { paddingLeft: 4, children: i }) : null] }), t] }), f ? e(u, { variant: "epsilon", textColor: "neutral600", as: "p", children: d }) : d] });
+HeaderLayout.displayName = 'HeaderLayout';
+const StickyBox = styled__default.default(Box.Box) `
+  width: ${({ width }) => (width ? `${width / 16}rem` : undefined)};
+  z-index: ${({ theme }) => theme.zIndices[1]};
+`;
+const BaseHeaderLayout = React__default.default.forwardRef(({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref) => {
+    const isSubtitleString = typeof subtitle === 'string';
+    if (sticky) {
+        return (jsxRuntime.jsx(StickyBox, { paddingLeft: 6, paddingRight: 6, paddingTop: 3, paddingBottom: 3, position: "fixed", top: 0, right: 0, background: "neutral0", shadow: "tableShadow", width: width, "data-strapi-header-sticky": true, children: jsxRuntime.jsxs(Flex.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsxs(Flex.Flex, { children: [navigationAction && jsxRuntime.jsx(Box.Box, { paddingRight: 3, children: navigationAction }), jsxRuntime.jsxs(Box.Box, { children: [jsxRuntime.jsx(Typography.Typography, { variant: "beta", as: "h1", ...props, children: title }), isSubtitleString ? (jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral600", children: subtitle })) : (subtitle)] }), secondaryAction ? jsxRuntime.jsx(Box.Box, { paddingLeft: 4, children: secondaryAction }) : null] }), jsxRuntime.jsx(Flex.Flex, { children: primaryAction ? jsxRuntime.jsx(Box.Box, { paddingLeft: 2, children: primaryAction }) : undefined })] }) }));
+    }
+    return (jsxRuntime.jsxs(Box.Box, { ref: ref, paddingLeft: 10, paddingRight: 10, paddingBottom: 8, paddingTop: navigationAction ? 6 : 8, background: "neutral100", "data-strapi-header": true, children: [navigationAction ? jsxRuntime.jsx(Box.Box, { paddingBottom: 2, children: navigationAction }) : null, jsxRuntime.jsxs(Flex.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsxs(Flex.Flex, { minWidth: 0, children: [jsxRuntime.jsx(Typography.Typography, { as: "h1", variant: "alpha", ...props, children: title }), secondaryAction ? jsxRuntime.jsx(Box.Box, { paddingLeft: 4, children: secondaryAction }) : null] }), primaryAction] }), isSubtitleString ? (jsxRuntime.jsx(Typography.Typography, { variant: "epsilon", textColor: "neutral600", as: "p", children: subtitle })) : (subtitle)] }));
 });
-export {
-  p as BaseHeaderLayout,
-  b as HeaderLayout
-};
+
+exports.BaseHeaderLayout = BaseHeaderLayout;
+exports.HeaderLayout = HeaderLayout;

package/dist/Layout/HeaderLayout.mjs

@@ -0,0 +1,43 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { useElementOnScreen } from '../hooks/useElementOnScreen.mjs';
+import { useResizeObserver } from '../hooks/useResizeObserver.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const HeaderLayout = (props) => {
+    const baseHeaderLayoutRef = useRef(null);
+    const [headerSize, setHeaderSize] = useState(null);
+    const [containerRef, isVisible] = useElementOnScreen({
+        root: null,
+        rootMargin: '0px',
+        threshold: 0,
+    });
+    useResizeObserver(containerRef, () => {
+        if (containerRef.current) {
+            setHeaderSize(containerRef.current.getBoundingClientRect());
+        }
+    });
+    useEffect(() => {
+        if (baseHeaderLayoutRef.current) {
+            setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+        }
+    }, [baseHeaderLayoutRef]);
+    return (jsxs(Fragment, { children: [jsx("div", { style: { height: headerSize?.height }, ref: containerRef, children: isVisible && jsx(BaseHeaderLayout, { ref: baseHeaderLayoutRef, ...props }) }), !isVisible && jsx(BaseHeaderLayout, { ...props, sticky: true, width: headerSize?.width })] }));
+};
+HeaderLayout.displayName = 'HeaderLayout';
+const StickyBox = styled(Box) `
+  width: ${({ width }) => (width ? `${width / 16}rem` : undefined)};
+  z-index: ${({ theme }) => theme.zIndices[1]};
+`;
+const BaseHeaderLayout = React__default.forwardRef(({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref) => {
+    const isSubtitleString = typeof subtitle === 'string';
+    if (sticky) {
+        return (jsx(StickyBox, { paddingLeft: 6, paddingRight: 6, paddingTop: 3, paddingBottom: 3, position: "fixed", top: 0, right: 0, background: "neutral0", shadow: "tableShadow", width: width, "data-strapi-header-sticky": true, children: jsxs(Flex, { justifyContent: "space-between", children: [jsxs(Flex, { children: [navigationAction && jsx(Box, { paddingRight: 3, children: navigationAction }), jsxs(Box, { children: [jsx(Typography, { variant: "beta", as: "h1", ...props, children: title }), isSubtitleString ? (jsx(Typography, { variant: "pi", textColor: "neutral600", children: subtitle })) : (subtitle)] }), secondaryAction ? jsx(Box, { paddingLeft: 4, children: secondaryAction }) : null] }), jsx(Flex, { children: primaryAction ? jsx(Box, { paddingLeft: 2, children: primaryAction }) : undefined })] }) }));
+    }
+    return (jsxs(Box, { ref: ref, paddingLeft: 10, paddingRight: 10, paddingBottom: 8, paddingTop: navigationAction ? 6 : 8, background: "neutral100", "data-strapi-header": true, children: [navigationAction ? jsx(Box, { paddingBottom: 2, children: navigationAction }) : null, jsxs(Flex, { justifyContent: "space-between", children: [jsxs(Flex, { minWidth: 0, children: [jsx(Typography, { as: "h1", variant: "alpha", ...props, children: title }), secondaryAction ? jsx(Box, { paddingLeft: 4, children: secondaryAction }) : null] }), primaryAction] }), isSubtitleString ? (jsx(Typography, { variant: "epsilon", textColor: "neutral600", as: "p", children: subtitle })) : (subtitle)] }));
+});
+
+export { BaseHeaderLayout, HeaderLayout };

package/dist/Layout/Layout.js

@@ -1,12 +1,24 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import r from "styled-components";
-import { Box as t } from "../Box/Box.js";
-const d = r(t)`
+'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 GridContainer = styled__default.default(Box.Box) `
   display: grid;
-  grid-template-columns: ${({ hasSideNav: o }) => o ? "auto 1fr" : "1fr"};
-`, m = r(t)`
+  grid-template-columns: ${({ hasSideNav }) => (hasSideNav ? `auto 1fr` : '1fr')};
+`;
+const OverflowingItem = styled__default.default(Box.Box) `
   overflow-x: hidden;
-`, f = ({ sideNav: o, children: e }) => i(d, { hasSideNav: !!o, children: [o, n(m, { paddingBottom: 10, children: e })] });
-export {
-  f as Layout
+`;
+const Layout = ({ sideNav, children }) => {
+    return (jsxRuntime.jsxs(GridContainer, { hasSideNav: Boolean(sideNav), children: [sideNav, jsxRuntime.jsx(OverflowingItem, { paddingBottom: 10, children: children })] }));
 };
+
+exports.Layout = Layout;

package/dist/Layout/Layout.mjs

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+
+const GridContainer = styled(Box) `
+  display: grid;
+  grid-template-columns: ${({ hasSideNav }) => (hasSideNav ? `auto 1fr` : '1fr')};
+`;
+const OverflowingItem = styled(Box) `
+  overflow-x: hidden;
+`;
+const Layout = ({ sideNav, children }) => {
+    return (jsxs(GridContainer, { hasSideNav: Boolean(sideNav), children: [sideNav, jsx(OverflowingItem, { paddingBottom: 10, children: children })] }));
+};
+
+export { Layout };

package/dist/Layout/TwoColsLayout.js

@@ -1,8 +1,14 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { Grid as i } from "../Grid/Grid.js";
-import { GridItem as o } from "../Grid/GridItem.js";
-import { Box as a } from "../Box/Box.js";
-const c = ({ startCol: d, endCol: t }) => e(i, { gap: 4, children: [r(o, { col: 9, s: 12, children: r(a, { hasRadius: !0, background: "neutral0", shadow: "tableShadow", children: d }) }), r(o, { col: 3, s: 12, children: r(a, { hasRadius: !0, background: "neutral0", shadow: "tableShadow", children: t }) })] });
-export {
-  c as TwoColsLayout
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Grid = require('../Grid/Grid.js');
+const GridItem = require('../Grid/GridItem.js');
+const Box = require('../Box/Box.js');
+
+const TwoColsLayout = ({ startCol, endCol }) => {
+    return (jsxRuntime.jsxs(Grid.Grid, { gap: 4, children: [jsxRuntime.jsx(GridItem.GridItem, { col: 9, s: 12, children: jsxRuntime.jsx(Box.Box, { hasRadius: true, background: "neutral0", shadow: "tableShadow", children: startCol }) }), jsxRuntime.jsx(GridItem.GridItem, { col: 3, s: 12, children: jsxRuntime.jsx(Box.Box, { hasRadius: true, background: "neutral0", shadow: "tableShadow", children: endCol }) })] }));
 };
+
+exports.TwoColsLayout = TwoColsLayout;

package/dist/Layout/TwoColsLayout.mjs

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Grid } from '../Grid/Grid.mjs';
+import { GridItem } from '../Grid/GridItem.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const TwoColsLayout = ({ startCol, endCol }) => {
+    return (jsxs(Grid, { gap: 4, children: [jsx(GridItem, { col: 9, s: 12, children: jsx(Box, { hasRadius: true, background: "neutral0", shadow: "tableShadow", children: startCol }) }), jsx(GridItem, { col: 3, s: 12, children: jsx(Box, { hasRadius: true, background: "neutral0", shadow: "tableShadow", children: endCol }) })] }));
+};
+
+export { TwoColsLayout };

package/dist/Layout/index.js

@@ -1,15 +1,20 @@
-import { Layout as r } from "./Layout.js";
-import { ActionLayout as a } from "./ActionLayout.js";
-import { ContentLayout as y } from "./ContentLayout.js";
-import { BaseHeaderLayout as f, HeaderLayout as m } from "./HeaderLayout.js";
-import { TwoColsLayout as x } from "./TwoColsLayout.js";
-import { GridLayout as n } from "./GridLayout.js";
-export {
-  a as ActionLayout,
-  f as BaseHeaderLayout,
-  y as ContentLayout,
-  n as GridLayout,
-  m as HeaderLayout,
-  r as Layout,
-  x as TwoColsLayout
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Layout = require('./Layout.js');
+const ActionLayout = require('./ActionLayout.js');
+const ContentLayout = require('./ContentLayout.js');
+const HeaderLayout = require('./HeaderLayout.js');
+const TwoColsLayout = require('./TwoColsLayout.js');
+const GridLayout = require('./GridLayout.js');
+
+
+
+exports.Layout = Layout.Layout;
+exports.ActionLayout = ActionLayout.ActionLayout;
+exports.ContentLayout = ContentLayout.ContentLayout;
+exports.BaseHeaderLayout = HeaderLayout.BaseHeaderLayout;
+exports.HeaderLayout = HeaderLayout.HeaderLayout;
+exports.TwoColsLayout = TwoColsLayout.TwoColsLayout;
+exports.GridLayout = GridLayout.GridLayout;

package/dist/Layout/index.mjs

@@ -0,0 +1,6 @@
+export { Layout } from './Layout.mjs';
+export { ActionLayout } from './ActionLayout.mjs';
+export { ContentLayout } from './ContentLayout.mjs';
+export { BaseHeaderLayout, HeaderLayout } from './HeaderLayout.mjs';
+export { TwoColsLayout } from './TwoColsLayout.mjs';
+export { GridLayout } from './GridLayout.mjs';

package/dist/Link/Link.js

@@ -1,17 +1,45 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import * as f from "react";
-import { ExternalLink as u } from "@strapi/icons";
-import { NavLink as g } from "react-router-dom";
-import s from "styled-components";
-import { buttonFocusStyle as y } from "../themes/utils.js";
-import { Typography as p } from "../Typography/Typography.js";
-import { Box as h } from "../Box/Box.js";
-const x = s.a`
+'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 reactRouterDom = require('react-router-dom');
+const styled = require('styled-components');
+const utils = require('../themes/utils.js');
+const Typography = require('../Typography/Typography.js');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const LinkWrapper = styled__default.default.a `
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  pointer-events: ${({ disabled: r }) => r ? "none" : void 0};
-  color: ${({ disabled: r, theme: o }) => r ? o.colors.neutral600 : o.colors.primary600};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
+  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral600 : theme.colors.primary600)};
 
   svg path {
     transition: fill 150ms ease-out;
@@ -22,23 +50,28 @@ const x = s.a`
     font-size: ${10 / 16}rem;
   }
 
-  ${p} {
+  ${Typography.Typography} {
     transition: color 150ms ease-out;
     color: currentColor;
   }
 
   &:hover {
-    color: ${({ theme: r }) => r.colors.primary500};
+    color: ${({ theme }) => theme.colors.primary500};
   }
 
   &:active {
-    color: ${({ theme: r }) => r.colors.primary700};
+    color: ${({ theme }) => theme.colors.primary700};
   }
 
-  ${y};
-`, t = s(h)`
+  ${utils.buttonFocusStyle};
+`;
+const IconWrapper = styled__default.default(Box.Box) `
   display: flex;
-`, z = f.forwardRef(({ children: r, href: o, to: i, disabled: n = !1, startIcon: a, endIcon: l, ...c }, d) => m(x, { as: i && !n ? g : "a", target: o ? "_blank" : void 0, rel: o ? "noreferrer noopener" : void 0, to: n ? void 0 : i, href: n ? "#" : o, disabled: n, ref: d, ...c, children: [a && e(t, { as: "span", "aria-hidden": !0, paddingRight: 2, children: a }), e(p, { children: r }), l && !o && e(t, { as: "span", "aria-hidden": !0, paddingLeft: 2, children: l }), o && e(t, { as: "span", "aria-hidden": !0, paddingLeft: 2, children: e(u, {}) })] }));
-export {
-  z as Link
-};
+`;
+const Link = React__namespace.forwardRef(({ children, href, to, disabled = false, startIcon, endIcon, ...restProps }, ref) => {
+    const target = href ? '_blank' : undefined;
+    const rel = href ? 'noreferrer noopener' : undefined;
+    return (jsxRuntime.jsxs(LinkWrapper, { as: to && !disabled ? reactRouterDom.NavLink : 'a', target: target, rel: rel, to: disabled ? undefined : to, href: disabled ? '#' : href, disabled: disabled, ref: ref, ...restProps, children: [startIcon && (jsxRuntime.jsx(IconWrapper, { as: "span", "aria-hidden": true, paddingRight: 2, children: startIcon })), jsxRuntime.jsx(Typography.Typography, { children: children }), endIcon && !href && (jsxRuntime.jsx(IconWrapper, { as: "span", "aria-hidden": true, paddingLeft: 2, children: endIcon })), href && (jsxRuntime.jsx(IconWrapper, { as: "span", "aria-hidden": true, paddingLeft: 2, children: jsxRuntime.jsx(icons.ExternalLink, {}) }))] }));
+});
+
+exports.Link = Link;

package/dist/Link/Link.mjs

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ExternalLink } from '@strapi/icons';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { buttonFocusStyle } from '../themes/utils.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const LinkWrapper = styled.a `
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
+  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral600 : theme.colors.primary600)};
+
+  svg path {
+    transition: fill 150ms ease-out;
+    fill: currentColor;
+  }
+
+  svg {
+    font-size: ${10 / 16}rem;
+  }
+
+  ${Typography} {
+    transition: color 150ms ease-out;
+    color: currentColor;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary500};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.primary700};
+  }
+
+  ${buttonFocusStyle};
+`;
+const IconWrapper = styled(Box) `
+  display: flex;
+`;
+const Link = React.forwardRef(({ children, href, to, disabled = false, startIcon, endIcon, ...restProps }, ref) => {
+    const target = href ? '_blank' : undefined;
+    const rel = href ? 'noreferrer noopener' : undefined;
+    return (jsxs(LinkWrapper, { as: to && !disabled ? NavLink : 'a', target: target, rel: rel, to: disabled ? undefined : to, href: disabled ? '#' : href, disabled: disabled, ref: ref, ...restProps, children: [startIcon && (jsx(IconWrapper, { as: "span", "aria-hidden": true, paddingRight: 2, children: startIcon })), jsx(Typography, { children: children }), endIcon && !href && (jsx(IconWrapper, { as: "span", "aria-hidden": true, paddingLeft: 2, children: endIcon })), href && (jsx(IconWrapper, { as: "span", "aria-hidden": true, paddingLeft: 2, children: jsx(ExternalLink, {}) }))] }));
+});
+
+export { Link };

package/dist/Link/index.js

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

package/dist/Link/index.mjs

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