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

package/dist/v2/MainNav/NavFooter.mjs

@@ -0,0 +1,8 @@
+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/v2/MainNav/NavLink.js

@@ -1,82 +1,102 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import $ from "react";
-import t from "styled-components";
-import { useMainNav as f } from "./MainNavContext.js";
-import { Box as g } from "../../Box/Box.js";
-import { BaseLink as v } from "../../BaseLink/BaseLink.js";
-import { Typography as e } from "../../Typography/Typography.js";
-import { Flex as h } from "../../Flex/Flex.js";
-import { Badge as y } from "../../Badge/Badge.js";
-import { Tooltip as b } from "../../Tooltip/Tooltip.js";
-const p = t(g)`
+'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 MainNavContext = require('./MainNavContext.js');
+const Box = require('../../Box/Box.js');
+const BaseLink = require('../../BaseLink/BaseLink.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 React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const IconBox = styled__default.default(Box.Box) `
   svg {
     width: 1rem;
     height: 1rem;
   }
-`, d = t(v)`
+`;
+const MainNavLinkWrapper = styled__default.default(BaseLink.BaseLink) `
   position: relative;
   text-decoration: none;
   display: block;
-  border-radius: ${({ theme: r }) => r.borderRadius};
-  background: ${({ theme: r }) => r.colors.neutral0};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
 
-  ${e} {
-    color: ${({ theme: r }) => r.colors.neutral600};
+  ${Typography.Typography} {
+    color: ${({ theme }) => theme.colors.neutral600};
   }
 
   svg path {
-    fill: ${({ theme: r }) => r.colors.neutral500};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
 
   &:hover {
-    background: ${({ theme: r }) => r.colors.neutral100};
+    background: ${({ theme }) => theme.colors.neutral100};
 
-    ${e} {
-      color: ${({ theme: r }) => r.colors.neutral700};
+    ${Typography.Typography} {
+      color: ${({ theme }) => theme.colors.neutral700};
     }
 
     svg path {
-      fill: ${({ theme: r }) => r.colors.neutral600};
+      fill: ${({ theme }) => theme.colors.neutral600};
     }
   }
 
   &.active {
-    background: ${({ theme: r }) => r.colors.primary100};
+    background: ${({ theme }) => theme.colors.primary100};
 
     svg path {
-      fill: ${({ theme: r }) => r.colors.primary600};
+      fill: ${({ theme }) => theme.colors.primary600};
     }
 
-    ${e} {
-      color: ${({ theme: r }) => r.colors.primary600};
+    ${Typography.Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
       font-weight: 500;
     }
   }
-`, m = t(h)`
-  padding: ${({ theme: r }) => `${r.spaces[2]} ${r.spaces[3]}`};
-`, u = t(y)`
-  ${({ theme: r, condensed: i }) => i && `
+`;
+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: -${r.spaces[3]};
-    right:  -${r.spaces[1]};
+    top: -${theme.spaces[3]};
+    right:  -${theme.spaces[1]};
   `}
 
-  ${e} {
+  ${Typography.Typography} {
     //find a solution to remove !important
-    color: ${({ theme: r }) => r.colors.neutral0} !important;
+    color: ${({ theme }) => theme.colors.neutral0} !important;
     line-height: 0;
   }
 
   display: flex;
   justify-content: center;
   align-items: center;
-  min-width: ${({ theme: r }) => r.spaces[6]};
-  height: ${({ theme: r }) => r.spaces[5]};
-  padding: ${({ theme: r }) => `0 ${r.spaces[2]}`};
-  border-radius: ${({ theme: r }) => r.spaces[10]};
-  background: ${({ theme: r }) => r.colors.primary600};
-`, C = $.forwardRef(({ children: r, icon: i, badgeContent: a, badgeAriaLabel: n, ...l }, c) => f() ? o(d, { ref: c, ...l, children: o(b, { position: "right", label: r, children: s(m, { as: "span", justifyContent: "center", children: [o(p, { "aria-hidden": !0, paddingRight: 0, as: "span", children: i }), a && o(u, { condensed: !0, "aria-label": n, children: a })] }) }) }) : o(d, { ref: c, ...l, children: s(m, { as: "span", justifyContent: "space-between", children: [s(h, { children: [o(p, { "aria-hidden": !0, paddingRight: 3, as: "span", children: i }), o(e, { children: r })] }), a && o(u, { justifyContent: "center", "aria-label": n, children: a })] }) }));
-export {
-  C as NavLink
-};
+  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 = React__default.default.forwardRef(({ children, icon, badgeContent, badgeAriaLabel, ...props }, ref) => {
+    const condensed = MainNavContext.useMainNav();
+    if (condensed) {
+        return (jsxRuntime.jsx(MainNavLinkWrapper, { ref: ref, ...props, children: jsxRuntime.jsx(Tooltip.Tooltip, { position: "right", label: children, children: jsxRuntime.jsxs(MainNavRow, { as: "span", justifyContent: "center", 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, { ref: ref, ...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/v2/MainNav/NavLink.mjs

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { useMainNav } from './MainNavContext.mjs';
+import { Box } from '../../Box/Box.mjs';
+import { BaseLink } from '../../BaseLink/BaseLink.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(BaseLink) `
+  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 = React__default.forwardRef(({ children, icon, badgeContent, badgeAriaLabel, ...props }, ref) => {
+    const condensed = useMainNav();
+    if (condensed) {
+        return (jsx(MainNavLinkWrapper, { ref: ref, ...props, children: jsx(Tooltip, { position: "right", label: children, children: jsxs(MainNavRow, { as: "span", justifyContent: "center", 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, { ref: ref, ...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/v2/MainNav/NavSection.js

@@ -1,12 +1,28 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { Children as s } from "react";
-import { useMainNav as p } from "./MainNavContext.js";
-import { Flex as e } from "../../Flex/Flex.js";
-import { Box as l } from "../../Box/Box.js";
-import { Divider as u } from "../../Divider/Divider.js";
-import { VisuallyHidden as g } from "../../VisuallyHidden/VisuallyHidden.js";
-import { Typography as h } from "../../Typography/Typography.js";
-const k = ({ label: o, children: a, horizontal: n = !1, spacing: c = 2, ...m }) => p() ? d(e, { direction: "column", alignItems: "stretch", gap: 2, children: [d(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [r(u, {}), r(g, { children: r("span", { children: o }) })] }), r(e, { as: "ul", gap: c, direction: n ? "row" : "column", alignItems: n ? "center" : "stretch", ...m, children: s.map(a, (i, t) => r("li", { children: i }, t)) })] }) : d(e, { direction: "column", alignItems: "stretch", gap: 2, children: [r(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: r(h, { variant: "sigma", textColor: "neutral600", children: o }) }), r(e, { as: "ul", gap: c, direction: n ? "row" : "column", alignItems: n ? "center" : "stretch", ...m, children: s.map(a, (i, t) => r("li", { children: i }, t)) })] });
-export {
-  k as NavSection
+'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 Flex = require('../../Flex/Flex.js');
+const Box = require('../../Box/Box.js');
+const Divider = require('../../Divider/Divider.js');
+const VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
+const Typography = require('../../Typography/Typography.js');
+
+const NavSection = ({ label, children, horizontal = false, spacing = 2, ...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.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.Children.map(children, (child, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return jsxRuntime.jsx("li", { children: child }, index);
+                }) })] }));
 };
+
+exports.NavSection = NavSection;

package/dist/v2/MainNav/NavSection.mjs

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Children } from 'react';
+import { useMainNav } from './MainNavContext.mjs';
+import { Flex } from '../../Flex/Flex.mjs';
+import { Box } from '../../Box/Box.mjs';
+import { Divider } from '../../Divider/Divider.mjs';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
+import { Typography } from '../../Typography/Typography.mjs';
+
+const NavSection = ({ label, children, horizontal = false, spacing = 2, ...props }) => {
+    const condensed = useMainNav();
+    if (condensed) {
+        return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsxs(Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: true, as: "span", children: [jsx(Divider, {}), jsx(VisuallyHidden, { children: jsx("span", { children: label }) })] }), jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: Children.map(children, (child, index) => {
+                        // eslint-disable-next-line react/no-array-index-key
+                        return jsx("li", { children: child }, index);
+                    }) })] }));
+    }
+    return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsx(Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: true, as: "span", children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: Children.map(children, (child, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return jsx("li", { children: child }, index);
+                }) })] }));
+};
+
+export { NavSection };

package/dist/v2/MainNav/NavSections.js

@@ -1,12 +1,26 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Children as m } from "react";
-import p from "styled-components";
-import { Box as l } from "../../Box/Box.js";
-import { Flex as a } from "../../Flex/Flex.js";
-const c = p(l)`
+'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 Box = require('../../Box/Box.js');
+const Flex = require('../../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const BoxGrow = styled__default.default(Box.Box) `
   flex-grow: 1;
   overflow-y: auto;
-`, u = ({ children: t, spacing: e = 4, horizontal: r = !1, ...i }) => o(c, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: o(a, { as: "ul", gap: e, direction: r ? "row" : "column", alignItems: r ? "center" : "stretch", ...i, children: m.map(t, (n, d) => o("li", { children: n }, d)) }) });
-export {
-  u as NavSections
+`;
+const NavSections = ({ children, spacing = 4, horizontal = false, ...props }) => {
+    return (jsxRuntime.jsx(BoxGrow, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React.Children.map(children, (child, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                return jsxRuntime.jsx("li", { children: child }, index);
+            }) }) }));
 };
+
+exports.NavSections = NavSections;

package/dist/v2/MainNav/NavSections.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children } from 'react';
+import styled from 'styled-components';
+import { Box } from '../../Box/Box.mjs';
+import { Flex } from '../../Flex/Flex.mjs';
+
+const BoxGrow = styled(Box) `
+  flex-grow: 1;
+  overflow-y: auto;
+`;
+const NavSections = ({ children, spacing = 4, horizontal = false, ...props }) => {
+    return (jsx(BoxGrow, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: Children.map(children, (child, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                return jsx("li", { children: child }, index);
+            }) }) }));
+};
+
+export { NavSections };

package/dist/v2/MainNav/NavUser.js

@@ -1,18 +1,28 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import s from "react";
-import l from "styled-components";
-import { useMainNav as m } from "./MainNavContext.js";
-import { Box as i } from "../../Box/Box.js";
-import { Flex as f } from "../../Flex/Flex.js";
-import { Avatar as c, Initials as u } from "../../Avatar/Avatar.js";
-import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
-import { Typography as x } from "../../Typography/Typography.js";
-const g = l(i)`
-  border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, L = s.forwardRef(({ src: o, children: t, initials: n, ...d }, a) => {
-  const e = m();
-  return r(g, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...d, children: p(f, { as: "button", justifyContent: e ? "center" : void 0, ref: a, children: [o ? r(c, { src: o, alt: "", "aria-hidden": !0 }) : r(u, { children: n }), e ? r(h, { children: r("span", { children: t }) }) : r(i, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: r(x, { ellipsis: !0, textColor: "neutral600", children: t }) })] }) });
+'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 MainNavContext = require('./MainNavContext.js');
+const Box = require('../../Box/Box.js');
+const Flex = require('../../Flex/Flex.js');
+const Avatar = require('../../Avatar/Avatar.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 styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const NavUserBox = styled__default.default(Box.Box) `
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const NavUser = React__default.default.forwardRef(({ src, children, initials, ...props }, ref) => {
+    const condensed = MainNavContext.useMainNav();
+    return (jsxRuntime.jsx(NavUserBox, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...props, children: jsxRuntime.jsxs(Flex.Flex, { as: "button", justifyContent: condensed ? 'center' : undefined, ref: ref, children: [src ? jsxRuntime.jsx(Avatar.Avatar, { src: src, alt: "", "aria-hidden": true }) : jsxRuntime.jsx(Avatar.Initials, { children: initials }), condensed ? (jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: jsxRuntime.jsx("span", { children: children }) })) : (jsxRuntime.jsx(Box.Box, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: jsxRuntime.jsx(Typography.Typography, { ellipsis: true, textColor: "neutral600", children: children }) }))] }) }));
 });
-export {
-  L as NavUser
-};
+
+exports.NavUser = NavUser;

package/dist/v2/MainNav/NavUser.mjs

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { useMainNav } from './MainNavContext.mjs';
+import { Box } from '../../Box/Box.mjs';
+import { Flex } from '../../Flex/Flex.mjs';
+import { Avatar, Initials } from '../../Avatar/Avatar.mjs';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
+import { Typography } from '../../Typography/Typography.mjs';
+
+const NavUserBox = styled(Box) `
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const NavUser = React__default.forwardRef(({ src, children, initials, ...props }, ref) => {
+    const condensed = useMainNav();
+    return (jsx(NavUserBox, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...props, children: jsxs(Flex, { as: "button", justifyContent: condensed ? 'center' : undefined, ref: ref, children: [src ? jsx(Avatar, { src: src, alt: "", "aria-hidden": true }) : jsx(Initials, { children: initials }), condensed ? (jsx(VisuallyHidden, { children: jsx("span", { children: children }) })) : (jsx(Box, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: jsx(Typography, { ellipsis: true, textColor: "neutral600", children: children }) }))] }) }));
+});
+
+export { NavUser };

package/dist/v2/MainNav/index.js

@@ -1,18 +1,23 @@
-import { MainNav as e } from "./MainNav.js";
-import { NavBrand as a } from "./NavBrand.js";
-import { NavCondense as m } from "./NavCondense.js";
-import { NavFooter as v } from "./NavFooter.js";
-import { NavLink as N } from "./NavLink.js";
-import { NavSection as i } from "./NavSection.js";
-import { NavSections as c } from "./NavSections.js";
-import { NavUser as S } from "./NavUser.js";
-export {
-  e as MainNav,
-  a as NavBrand,
-  m as NavCondense,
-  v as NavFooter,
-  N as NavLink,
-  i as NavSection,
-  c as NavSections,
-  S as NavUser
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const MainNav = require('./MainNav.js');
+const NavBrand = require('./NavBrand.js');
+const NavCondense = require('./NavCondense.js');
+const NavFooter = require('./NavFooter.js');
+const NavLink = require('./NavLink.js');
+const NavSection = require('./NavSection.js');
+const NavSections = require('./NavSections.js');
+const NavUser = require('./NavUser.js');
+
+
+
+exports.MainNav = MainNav.MainNav;
+exports.NavBrand = NavBrand.NavBrand;
+exports.NavCondense = NavCondense.NavCondense;
+exports.NavFooter = NavFooter.NavFooter;
+exports.NavLink = NavLink.NavLink;
+exports.NavSection = NavSection.NavSection;
+exports.NavSections = NavSections.NavSections;
+exports.NavUser = NavUser.NavUser;

package/dist/v2/MainNav/index.mjs

@@ -0,0 +1,8 @@
+export { MainNav } from './MainNav.mjs';
+export { NavBrand } from './NavBrand.mjs';
+export { NavCondense } from './NavCondense.mjs';
+export { NavFooter } from './NavFooter.mjs';
+export { NavLink } from './NavLink.mjs';
+export { NavSection } from './NavSection.mjs';
+export { NavSections } from './NavSections.mjs';
+export { NavUser } from './NavUser.mjs';

package/dist/v2/Pagination/Pagination.js

@@ -1,12 +1,39 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as n from "react";
-import { PaginationContext as c } from "./PaginationContext.js";
-import { Box as p } from "../../Box/Box.js";
-import { Flex as s } from "../../Flex/Flex.js";
-const u = ({ children: t, label: a = "Pagination", activePage: o, pageCount: i }) => {
-  const e = n.useMemo(() => ({ activePage: o, pageCount: i }), [o, i]);
-  return r(c.Provider, { value: e, children: r(p, { "aria-label": a, as: "nav", children: r(s, { as: "ol", gap: 1, children: n.Children.map(t, (m, l) => r("li", { children: m }, l)) }) }) });
-};
-export {
-  u as Pagination
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const PaginationContext = require('./PaginationContext.js');
+const Box = require('../../Box/Box.js');
+const Flex = require('../../Flex/Flex.js');
+
+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 Pagination = ({ children, label = 'Pagination', activePage, pageCount }) => {
+    const context = React__namespace.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
+    return (jsxRuntime.jsx(PaginationContext.PaginationContext.Provider, { value: context, children: jsxRuntime.jsx(Box.Box, { "aria-label": label, as: "nav", children: jsxRuntime.jsx(Flex.Flex, { as: "ol", gap: 1, children: React__namespace.Children.map(children, (child, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return jsxRuntime.jsx("li", { children: child }, index);
+                }) }) }) }));
 };
+
+exports.Pagination = Pagination;

package/dist/v2/Pagination/Pagination.mjs

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { PaginationContext } from './PaginationContext.mjs';
+import { Box } from '../../Box/Box.mjs';
+import { Flex } from '../../Flex/Flex.mjs';
+
+const Pagination = ({ children, label = 'Pagination', activePage, pageCount }) => {
+    const context = React.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
+    return (jsx(PaginationContext.Provider, { value: context, children: jsx(Box, { "aria-label": label, as: "nav", children: jsx(Flex, { as: "ol", gap: 1, children: React.Children.map(children, (child, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return jsx("li", { children: child }, index);
+                }) }) }) }));
+};
+
+export { Pagination };

package/dist/v2/Pagination/PaginationContext.js

@@ -1,6 +1,11 @@
-import { createContext as t, useContext as e } from "react";
-const o = t({ activePage: 1, pageCount: 1 }), a = () => e(o);
-export {
-  o as PaginationContext,
-  a as usePagination
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const PaginationContext = React.createContext({ activePage: 1, pageCount: 1 });
+const usePagination = () => React.useContext(PaginationContext);
+
+exports.PaginationContext = PaginationContext;
+exports.usePagination = usePagination;

package/dist/v2/Pagination/PaginationContext.mjs

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+
+const PaginationContext = createContext({ activePage: 1, pageCount: 1 });
+const usePagination = () => useContext(PaginationContext);
+
+export { PaginationContext, usePagination };

package/dist/v2/Pagination/assets/next.svg.js

@@ -1,4 +1,5 @@
-const M = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0tMC4wMDAxOTU1MDMgMS4xNzVMMy44MTY0NyA1TC0wLjAwMDE5NTUwMyA4LjgyNUwxLjE3NDggMTBMNi4xNzQ4IDVMMS4xNzQ4IDBMLTAuMDAwMTk1NTAzIDEuMTc1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";
-export {
-  M as default
-};
+'use strict';
+
+const next = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0tMC4wMDAxOTU1MDMgMS4xNzVMMy44MTY0NyA1TC0wLjAwMDE5NTUwMyA4LjgyNUwxLjE3NDggMTBMNi4xNzQ4IDVMMS4xNzQ4IDBMLTAuMDAwMTk1NTAzIDEuMTc1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";
+
+module.exports = next;

package/dist/v2/Pagination/assets/next.svg.mjs

@@ -0,0 +1,3 @@
+const next = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0tMC4wMDAxOTU1MDMgMS4xNzVMMy44MTY0NyA1TC0wLjAwMDE5NTUwMyA4LjgyNUwxLjE3NDggMTBMNi4xNzQ4IDVMMS4xNzQ4IDBMLTAuMDAwMTk1NTAzIDEuMTc1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";
+
+export { next as default };

package/dist/v2/Pagination/assets/previous.svg.js

@@ -1,4 +1,5 @@
-const I = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02LjE3NSA4LjgyNUwyLjM1ODMzIDVMNi4xNzUgMS4xNzVMNSAwTDAgNUw1IDEwTDYuMTc1IDguODI1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";
-export {
-  I as default
-};
+'use strict';
+
+const previous = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02LjE3NSA4LjgyNUwyLjM1ODMzIDVMNi4xNzUgMS4xNzVMNSAwTDAgNUw1IDEwTDYuMTc1IDguODI1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";
+
+module.exports = previous;

package/dist/v2/Pagination/assets/previous.svg.mjs

@@ -0,0 +1,3 @@
+const previous = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02LjE3NSA4LjgyNUwyLjM1ODMzIDVMNi4xNzUgMS4xNzVMNSAwTDAgNUw1IDEwTDYuMTc1IDguODI1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";
+
+export { previous as default };