@strapi/design-system 0.0.0-3cf3ff39

package/dist/v2/MainNav/NavLink.js

@@ -0,0 +1,103 @@
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import f from "react";
+import e from "prop-types";
+import t from "styled-components";
+import { useMainNav as y } from "./MainNavContext.js";
+import { Box as b } from "../../Box/Box.js";
+import { BaseLink as v } from "../../BaseLink/BaseLink.js";
+import { Typography as i } from "../../Typography/Typography.js";
+import { Flex as $ } from "../../Flex/Flex.js";
+import { Badge as k } from "../../Badge/Badge.js";
+import { Tooltip as x } from "../../Tooltip/Tooltip.js";
+const m = t(b)`
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`, u = t(v)`
+  position: relative;
+  text-decoration: none;
+  display: block;
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  background: ${({ theme: r }) => r.colors.neutral0};
+
+  ${i} {
+    color: ${({ theme: r }) => r.colors.neutral600};
+  }
+
+  svg path {
+    fill: ${({ theme: r }) => r.colors.neutral500};
+  }
+
+  &:hover {
+    background: ${({ theme: r }) => r.colors.neutral100};
+
+    ${i} {
+      color: ${({ theme: r }) => r.colors.neutral700};
+    }
+
+    svg path {
+      fill: ${({ theme: r }) => r.colors.neutral600};
+    }
+  }
+
+  &.active {
+    background: ${({ theme: r }) => r.colors.primary100};
+
+    svg path {
+      fill: ${({ theme: r }) => r.colors.primary600};
+    }
+
+    ${i} {
+      color: ${({ theme: r }) => r.colors.primary600};
+      font-weight: 500;
+    }
+  }
+`, h = t($)`
+  padding: ${({ theme: r }) => `${r.spaces[2]} ${r.spaces[3]}`};
+`, g = t(k)`
+  ${({ theme: r, condensed: a }) => a && `
+	  position: absolute;
+    // Values based on visual aspect 
+    top: -${r.spaces[3]};
+    right:  -${r.spaces[1]};
+  `}
+
+  ${i} {
+    //find a solution to remove !important
+    color: ${({ theme: r }) => r.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};
+`, l = f.forwardRef(({ children: r, icon: a, badgeContent: n, badgeAriaLabel: c, ...d }, p) => y() ? /* @__PURE__ */ o(u, { ref: p, ...d, children: /* @__PURE__ */ o(x, { position: "right", label: r, children: /* @__PURE__ */ s(h, { as: "span", justifyContent: "center", children: [
+  /* @__PURE__ */ o(m, { "aria-hidden": !0, paddingRight: 0, as: "span", children: a }),
+  n && /* @__PURE__ */ o(g, { condensed: !0, "aria-label": c, children: n })
+] }) }) }) : /* @__PURE__ */ o(u, { ref: p, ...d, children: /* @__PURE__ */ s(h, { as: "span", justifyContent: "space-between", children: [
+  /* @__PURE__ */ s($, { children: [
+    /* @__PURE__ */ o(m, { "aria-hidden": !0, paddingRight: 3, as: "span", children: a }),
+    /* @__PURE__ */ o(i, { children: r })
+  ] }),
+  n && /* @__PURE__ */ o(g, { justifyContent: "center", "aria-label": c, children: n })
+] }) }));
+l.displayName = "NavLink";
+l.defaultProps = {
+  badgeContent: void 0,
+  badgeAriaLabel: void 0
+};
+l.propTypes = {
+  badgeAriaLabel: e.string,
+  badgeContent: e.oneOfType([e.string, e.number]),
+  children: e.string.isRequired,
+  icon: e.node.isRequired
+};
+export {
+  l as NavLink
+};

package/dist/v2/MainNav/NavSection.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),x=require("prop-types"),g=require("./MainNavContext.cjs"),i=require("../../Flex/Flex.cjs"),l=require("../../Box/Box.cjs"),h=require("../../Divider/Divider.cjs"),m=require("../../VisuallyHidden/VisuallyHidden.cjs"),j=require("../../Typography/Typography.cjs"),q=n=>n&&n.__esModule?n:{default:n},u=q(x),p=({label:n,children:d,horizontal:r=!1,spacing:a=2,...c})=>g.useMainNav()?e.jsxs(i.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsxs(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span",children:[e.jsx(h.Divider,{}),e.jsx(m.VisuallyHidden,{children:e.jsx("span",{children:n})})]}),e.jsx(i.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...c,children:o.Children.map(d,(t,s)=>e.jsx("li",{children:t},s))})]}):e.jsxs(i.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsx(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span",children:e.jsx(j.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e.jsx(i.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...c,children:o.Children.map(d,(t,s)=>e.jsx("li",{children:t},s))})]});p.propTypes={children:u.default.node.isRequired,label:u.default.string.isRequired};exports.NavSection=p;

package/dist/v2/MainNav/NavSection.js

@@ -0,0 +1,46 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { Children as m } from "react";
+import p from "prop-types";
+import { useMainNav as u } from "./MainNavContext.js";
+import { Flex as i } from "../../Flex/Flex.js";
+import { Box as l } from "../../Box/Box.js";
+import { Divider as g } from "../../Divider/Divider.js";
+import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
+import { Typography as f } from "../../Typography/Typography.js";
+const x = ({ label: o, children: a, horizontal: e = !1, spacing: s = 2, ...c }) => u() ? /* @__PURE__ */ d(i, { direction: "column", alignItems: "stretch", gap: 2, children: [
+  /* @__PURE__ */ d(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [
+    /* @__PURE__ */ r(g, {}),
+    /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r("span", { children: o }) })
+  ] }),
+  /* @__PURE__ */ r(
+    i,
+    {
+      as: "ul",
+      gap: s,
+      direction: e ? "row" : "column",
+      alignItems: e ? "center" : "stretch",
+      ...c,
+      children: m.map(a, (n, t) => /* @__PURE__ */ r("li", { children: n }, t))
+    }
+  )
+] }) : /* @__PURE__ */ d(i, { direction: "column", alignItems: "stretch", gap: 2, children: [
+  /* @__PURE__ */ r(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: /* @__PURE__ */ r(f, { variant: "sigma", textColor: "neutral600", children: o }) }),
+  /* @__PURE__ */ r(
+    i,
+    {
+      as: "ul",
+      gap: s,
+      direction: e ? "row" : "column",
+      alignItems: e ? "center" : "stretch",
+      ...c,
+      children: m.map(a, (n, t) => /* @__PURE__ */ r("li", { children: n }, t))
+    }
+  )
+] });
+x.propTypes = {
+  children: p.node.isRequired,
+  label: p.string.isRequired
+};
+export {
+  x as NavSection
+};

package/dist/v2/MainNav/NavSections.cjs

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),u=require("prop-types"),a=require("styled-components"),p=require("../../Box/Box.cjs"),f=require("../../Flex/Flex.cjs"),o=e=>e&&e.__esModule?e:{default:e},g=o(u),x=o(a),y=x.default(p.Box)`
+  flex-grow: 1;
+  overflow-y: auto;
+`,n=({children:e,spacing:s=4,horizontal:r=!1,...i})=>t.jsx(y,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8,children:t.jsx(f.Flex,{as:"ul",gap:s,direction:r?"row":"column",alignItems:r?"center":"stretch",...i,children:c.Children.map(e,(d,l)=>t.jsx("li",{children:d},l))})});n.propTypes={children:g.default.node.isRequired};exports.NavSections=n;

package/dist/v2/MainNav/NavSections.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Children as d } from "react";
+import m from "prop-types";
+import l from "styled-components";
+import { Box as s } from "../../Box/Box.js";
+import { Flex as c } from "../../Flex/Flex.js";
+const a = l(s)`
+  flex-grow: 1;
+  overflow-y: auto;
+`, f = ({ children: e, spacing: i = 4, horizontal: o = !1, ...t }) => /* @__PURE__ */ r(a, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: /* @__PURE__ */ r(
+  c,
+  {
+    as: "ul",
+    gap: i,
+    direction: o ? "row" : "column",
+    alignItems: o ? "center" : "stretch",
+    ...t,
+    children: d.map(e, (p, n) => /* @__PURE__ */ r("li", { children: p }, n))
+  }
+) });
+f.propTypes = {
+  children: m.node.isRequired
+};
+export {
+  f as NavSections
+};

package/dist/v2/MainNav/NavUser.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),x=require("prop-types"),f=require("styled-components"),y=require("./MainNavContext.cjs"),d=require("../../Box/Box.cjs"),v=require("../../Flex/Flex.cjs"),a=require("../../Avatar/Avatar.cjs"),g=require("../../VisuallyHidden/VisuallyHidden.cjs"),j=require("../../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},q=i(p),s=i(x),h=i(f),_=h.default(d.Box)`
+  border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,r=q.default.forwardRef(({src:e,children:n,initials:l,...u},c)=>{const o=y.useMainNav();return t.jsx(_,{paddingTop:3,paddingBottom:3,paddingLeft:5,paddingRight:5,...u,children:t.jsxs(v.Flex,{as:"button",justifyContent:o?"center":void 0,ref:c,children:[e?t.jsx(a.Avatar,{src:e,alt:"","aria-hidden":!0}):t.jsx(a.Initials,{children:l}),o?t.jsx(g.VisuallyHidden,{children:t.jsx("span",{children:n})}):t.jsx(d.Box,{width:`${130/16}rem`,paddingLeft:2,as:"span",children:t.jsx(j.Typography,{ellipsis:!0,textColor:"neutral600",children:n})})]})})});r.displayName="NavUser";r.defaultProps={src:void 0,initials:void 0};r.propTypes={children:s.default.node.isRequired,initials:s.default.node,src:s.default.string};exports.NavUser=r;

package/dist/v2/MainNav/NavUser.js

@@ -0,0 +1,32 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import m from "react";
+import i from "prop-types";
+import f from "styled-components";
+import { useMainNav as c } from "./MainNavContext.js";
+import { Box as n } from "../../Box/Box.js";
+import { Flex as u } from "../../Flex/Flex.js";
+import { Avatar as h, Initials as g } from "../../Avatar/Avatar.js";
+import { VisuallyHidden as v } from "../../VisuallyHidden/VisuallyHidden.js";
+import { Typography as x } from "../../Typography/Typography.js";
+const y = f(n)`
+  border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
+`, t = m.forwardRef(({ src: o, children: e, initials: a, ...s }, p) => {
+  const d = c();
+  return /* @__PURE__ */ r(y, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...s, children: /* @__PURE__ */ l(u, { as: "button", justifyContent: d ? "center" : void 0, ref: p, children: [
+    o ? /* @__PURE__ */ r(h, { src: o, alt: "", "aria-hidden": !0 }) : /* @__PURE__ */ r(g, { children: a }),
+    d ? /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r("span", { children: e }) }) : /* @__PURE__ */ r(n, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: /* @__PURE__ */ r(x, { ellipsis: !0, textColor: "neutral600", children: e }) })
+  ] }) });
+});
+t.displayName = "NavUser";
+t.defaultProps = {
+  src: void 0,
+  initials: void 0
+};
+t.propTypes = {
+  children: i.node.isRequired,
+  initials: i.node,
+  src: i.string
+};
+export {
+  t as NavUser
+};

package/dist/v2/MainNav/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MainNav.cjs"),a=require("./NavBrand.cjs"),n=require("./NavCondense.cjs"),r=require("./NavFooter.cjs"),o=require("./NavLink.cjs"),v=require("./NavSection.cjs"),N=require("./NavSections.cjs"),i=require("./NavUser.cjs");exports.MainNav=e.MainNav;exports.NavBrand=a.NavBrand;exports.NavCondense=n.NavCondense;exports.NavFooter=r.NavFooter;exports.NavLink=o.NavLink;exports.NavSection=v.NavSection;exports.NavSections=N.NavSections;exports.NavUser=i.NavUser;

package/dist/v2/MainNav/index.js

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

package/dist/v2/Pagination/Pagination.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("react"),g=require("prop-types"),b=require("styled-components"),P=require("./PaginationContext.cjs"),_=require("../../Flex/Flex.cjs"),s=e=>e&&e.__esModule?e:{default:e};function m(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const l=m(p),a=s(g),u=s(b),j=u.default.nav``,x=u.default(_.Flex)`
+  & > * + * {
+    margin-left: ${({theme:e})=>e.spaces[1]};
+  }
+`,o=({children:e,label:n,activePage:t,pageCount:r})=>{const c=l.useMemo(()=>({activePage:t,pageCount:r}),[t,r]);return i.jsx(P.PaginationContext.Provider,{value:c,children:i.jsx(j,{"aria-label":n,children:i.jsx(x,{as:"ul",children:l.Children.map(e,(d,f)=>i.jsx("li",{children:d},f))})})})};o.defaultProps={label:"pagination"};o.propTypes={activePage:a.default.number.isRequired,children:a.default.node.isRequired,label:a.default.string,pageCount:a.default.number.isRequired};exports.Pagination=o;

package/dist/v2/Pagination/Pagination.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as t from "react";
+import e from "prop-types";
+import a from "styled-components";
+import { PaginationContext as c } from "./PaginationContext.js";
+import { Flex as u } from "../../Flex/Flex.js";
+const f = a.nav``, g = a(u)`
+  & > * + * {
+    margin-left: ${({ theme: i }) => i.spaces[1]};
+  }
+`, l = ({ children: i, label: s, activePage: n, pageCount: o }) => {
+  const p = t.useMemo(() => ({ activePage: n, pageCount: o }), [n, o]);
+  return /* @__PURE__ */ r(c.Provider, { value: p, children: /* @__PURE__ */ r(f, { "aria-label": s, children: /* @__PURE__ */ r(g, { as: "ul", children: t.Children.map(i, (m, d) => /* @__PURE__ */ r("li", { children: m }, d)) }) }) });
+};
+l.defaultProps = {
+  label: "pagination"
+};
+l.propTypes = {
+  activePage: e.number.isRequired,
+  children: e.node.isRequired,
+  label: e.string,
+  pageCount: e.number.isRequired
+};
+export {
+  l as Pagination
+};

package/dist/v2/Pagination/PaginationContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext({activePage:1,pageCount:1}),n=()=>t.useContext(e);exports.PaginationContext=e;exports.usePagination=n;

package/dist/v2/Pagination/PaginationContext.js

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

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

@@ -0,0 +1 @@
+"use strict";const M="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0tMC4wMDAxOTU1MDMgMS4xNzVMMy44MTY0NyA1TC0wLjAwMDE5NTUwMyA4LjgyNUwxLjE3NDggMTBMNi4xNzQ4IDVMMS4xNzQ4IDBMLTAuMDAwMTk1NTAzIDEuMTc1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";module.exports=M;

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

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

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

@@ -0,0 +1 @@
+"use strict";const I="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02LjE3NSA4LjgyNUwyLjM1ODMzIDVMNi4xNzUgMS4xNzVMNSAwTDAgNUw1IDEwTDYuMTc1IDguODI1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";module.exports=I;

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

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

package/dist/v2/Pagination/components.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),L=require("react"),g=require("@strapi/icons"),j=require("prop-types"),q=require("styled-components"),u=require("./PaginationContext.cjs"),R=require("../../themes/utils.cjs"),m=require("../../Typography/Typography.cjs"),w=require("../../BaseLink/BaseLink.cjs"),l=require("../../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&e.__esModule?e:{default:e},p=c(L),d=c(j),n=c(q),x=n.default(m.Typography)`
+  line-height: revert;
+`,T={active:!0},h=n.default(w.BaseLink).withConfig({shouldForwardProp:(e,i)=>!T[e]&&i(e)})`
+  padding: ${({theme:e})=>e.spaces[3]};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  box-shadow: ${({active:e,theme:i})=>e?i.shadows.filterShadow:void 0};
+  text-decoration: none;
+  display: flex;
+
+  ${R.buttonFocusStyle}
+`,$=n.default(h)`
+  color: ${({theme:e,active:i})=>i?e.colors.primary700:e.colors.neutral800};
+  background: ${({theme:e,active:i})=>i?e.colors.neutral0:void 0};
+
+  &:hover {
+    box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+  }
+`,P=n.default(h)`
+  font-size: 0.7rem;
+  svg path {
+    fill: ${e=>e["aria-disabled"]?e.theme.colors.neutral300:e.theme.colors.neutral600};
+  }
+
+  &:focus,
+  &:hover {
+    svg path {
+      fill: ${e=>e["aria-disabled"]?e.theme.colors.neutral300:e.theme.colors.neutral700};
+    }
+  }
+
+  ${e=>e["aria-disabled"]?`
+  pointer-events: none;
+    `:void 0}
+`,_=n.default(h)`
+  color: ${({theme:e})=>e.colors.neutral800};
+`,f=p.default.forwardRef(({children:e,...i},a)=>{const{activePage:s}=u.usePagination(),t=s===1;return r.jsxs(P,{ref:a,"aria-disabled":t,tabIndex:t?-1:void 0,...i,children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(g.ChevronLeft,{"aria-hidden":!0})]})});f.displayName="PreviousLink";const v=p.default.forwardRef(({children:e,...i},a)=>{const{activePage:s,pageCount:t}=u.usePagination(),o=s===t;return r.jsxs(P,{ref:a,"aria-disabled":o,tabIndex:o?-1:void 0,...i,children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(g.ChevronRight,{"aria-hidden":!0})]})});v.displayName="NextLink";const y=p.default.forwardRef(({number:e,children:i,...a},s)=>{const{activePage:t}=u.usePagination(),o=t===e;return r.jsxs($,{ref:s,...a,active:o,children:[r.jsx(l.VisuallyHidden,{children:i}),r.jsx(x,{"aria-hidden":!0,variant:"pi",fontWeight:o?"bold":null,children:e})]})});y.displayName="PageLink";const b=({children:e,...i})=>r.jsxs(_,{...i,as:"div",children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(x,{"aria-hidden":!0,variant:"pi",children:"…"})]});y.propTypes={children:d.default.node.isRequired,number:d.default.number.isRequired};const k={children:d.default.node.isRequired};v.propTypes=k;f.propTypes=k;b.propTypes={children:d.default.node.isRequired};exports.Dots=b;exports.NextLink=v;exports.PageLink=y;exports.PreviousLink=f;

package/dist/v2/Pagination/components.js

@@ -0,0 +1,95 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import p from "react";
+import { ChevronLeft as P, ChevronRight as x } from "@strapi/icons";
+import d from "prop-types";
+import s from "styled-components";
+import { usePagination as h } from "./PaginationContext.js";
+import { buttonFocusStyle as k } from "../../themes/utils.js";
+import { Typography as w } from "../../Typography/Typography.js";
+import { BaseLink as L } from "../../BaseLink/BaseLink.js";
+import { VisuallyHidden as c } from "../../VisuallyHidden/VisuallyHidden.js";
+const m = s(w)`
+  line-height: revert;
+`, $ = {
+  active: !0
+}, u = s(L).withConfig({
+  shouldForwardProp: (e, r) => !$[e] && r(e)
+})`
+  padding: ${({ theme: e }) => e.spaces[3]};
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  box-shadow: ${({ active: e, theme: r }) => e ? r.shadows.filterShadow : void 0};
+  text-decoration: none;
+  display: flex;
+
+  ${k}
+`, R = s(u)`
+  color: ${({ theme: e, active: r }) => r ? e.colors.primary700 : e.colors.neutral800};
+  background: ${({ theme: e, active: r }) => r ? e.colors.neutral0 : void 0};
+
+  &:hover {
+    box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+  }
+`, f = s(u)`
+  font-size: 0.7rem;
+  svg path {
+    fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral600};
+  }
+
+  &:focus,
+  &:hover {
+    svg path {
+      fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral700};
+    }
+  }
+
+  ${(e) => e["aria-disabled"] ? `
+  pointer-events: none;
+    ` : void 0}
+`, T = s(u)`
+  color: ${({ theme: e }) => e.colors.neutral800};
+`, v = p.forwardRef(({ children: e, ...r }, a) => {
+  const { activePage: t } = h(), i = t === 1;
+  return /* @__PURE__ */ l(f, { ref: a, "aria-disabled": i, tabIndex: i ? -1 : void 0, ...r, children: [
+    /* @__PURE__ */ o(c, { children: e }),
+    /* @__PURE__ */ o(P, { "aria-hidden": !0 })
+  ] });
+});
+v.displayName = "PreviousLink";
+const g = p.forwardRef(({ children: e, ...r }, a) => {
+  const { activePage: t, pageCount: i } = h(), n = t === i;
+  return /* @__PURE__ */ l(f, { ref: a, "aria-disabled": n, tabIndex: n ? -1 : void 0, ...r, children: [
+    /* @__PURE__ */ o(c, { children: e }),
+    /* @__PURE__ */ o(x, { "aria-hidden": !0 })
+  ] });
+});
+g.displayName = "NextLink";
+const b = p.forwardRef(({ number: e, children: r, ...a }, t) => {
+  const { activePage: i } = h(), n = i === e;
+  return /* @__PURE__ */ l(R, { ref: t, ...a, active: n, children: [
+    /* @__PURE__ */ o(c, { children: r }),
+    /* @__PURE__ */ o(m, { "aria-hidden": !0, variant: "pi", fontWeight: n ? "bold" : null, children: e })
+  ] });
+});
+b.displayName = "PageLink";
+const N = ({ children: e, ...r }) => /* @__PURE__ */ l(T, { ...r, as: "div", children: [
+  /* @__PURE__ */ o(c, { children: e }),
+  /* @__PURE__ */ o(m, { "aria-hidden": !0, variant: "pi", children: "…" })
+] });
+b.propTypes = {
+  children: d.node.isRequired,
+  number: d.number.isRequired
+};
+const y = {
+  children: d.node.isRequired
+};
+g.propTypes = y;
+v.propTypes = y;
+N.propTypes = {
+  children: d.node.isRequired
+};
+export {
+  N as Dots,
+  g as NextLink,
+  b as PageLink,
+  v as PreviousLink
+};

package/dist/v2/Pagination/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Pagination.cjs"),i=require("./components.cjs");exports.Pagination=e.Pagination;exports.Dots=i.Dots;exports.NextLink=i.NextLink;exports.PageLink=i.PageLink;exports.PreviousLink=i.PreviousLink;

package/dist/v2/Pagination/index.js

@@ -0,0 +1,9 @@
+import { Pagination as e } from "./Pagination.js";
+import { Dots as r, NextLink as t, PageLink as a, PreviousLink as k } from "./components.js";
+export {
+  r as Dots,
+  t as NextLink,
+  a as PageLink,
+  e as Pagination,
+  k as PreviousLink
+};

package/dist/v2/SimpleMenu/Menu.cjs

@@ -0,0 +1,65 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),y=require("@radix-ui/react-dropdown-menu"),d=require("@strapi/icons"),c=require("styled-components"),S=require("../../helpers/theme.cjs"),w=require("../Link/Link.cjs"),j=require("../../Button/Button.cjs"),m=require("../../Box/Box.cjs"),u=require("../../Flex/Flex.cjs"),i=require("../../Typography/Typography.cjs"),T=e=>e&&e.__esModule?e:{default:e};function C(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const n=C(y),a=T(c),R=n.Root,$=l.forwardRef(({size:e,...r},o)=>t.jsx(n.Trigger,{asChild:!0,children:t.jsx(j.Button,{ref:o,type:"button",variant:"ghost",endIcon:t.jsx(d.CarretDown,{width:`${6/16}rem`,height:`${4/16}rem`,"aria-hidden":!0}),paddingTop:e==="S"?1:2,paddingBottom:e==="S"?1:2,paddingLeft:e==="S"?3:4,paddingRight:e==="S"?3:4,...r})})),v=l.forwardRef(({children:e,intersectionId:r,popoverPlacement:o="bottom-start",...s},p)=>{const[f,x]=o.split("-");return t.jsx(n.Portal,{children:t.jsx(n.Content,{align:x,side:f,loop:!0,asChild:!0,children:t.jsxs(h,{ref:p,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",position:"relative",overflow:"auto",...s,children:[e,t.jsx(m.Box,{id:r,width:"100%",height:"1px"})]})})})}),h=a.default(u.Flex)`
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`,k=({onSelect:e,disabled:r=!1,...o})=>t.jsx(n.Item,{asChild:!0,onSelect:e,disabled:r,children:o.isLink||o.isExternal?t.jsx(M,{color:"neutral800",...o,isExternal:o.isExternal??!1,children:t.jsx(i.Typography,{children:o.children})}):t.jsx(b,{cursor:"pointer",color:"neutral800",background:"transparent",borderStyle:"none",...o,children:t.jsx(i.Typography,{children:o.children})})}),g=({theme:e})=>c.css`
+  text-align: left;
+  width: 100%;
+  border-radius: ${e.borderRadius};
+  padding: ${e.spaces[2]} ${e.spaces[4]};
+
+  ${i.Typography} {
+    color: inherit;
+  }
+
+  &[aria-disabled] {
+    cursor: not-allowed;
+
+    ${i.Typography} {
+      color: ${e.colors.neutral500};
+    }
+  }
+
+  &[data-highlighted] {
+    background-color: ${e.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &:after {
+      content: none;
+    }
+  }
+`,b=a.default(u.Flex)`
+  ${g}
+`,M=a.default(w.Link)`
+  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
+  color: ${({theme:e,color:r})=>S.extractStyleFromTheme(e.colors,r,void 0)};
+  text-decoration: none;
+
+  &:hover {
+    color: unset;
+  }
+
+  svg > path,
+  &:focus-visible svg > path {
+    fill: currentColor;
+  }
+
+  ${g}
+`,q=l.forwardRef((e,r)=>t.jsx(n.Label,{asChild:!0,children:t.jsx(L,{ref:r,variant:"sigma",textColor:"neutral600",...e})})),L=a.default(i.Typography)`
+  padding: ${({theme:e})=>e.spaces[2]} ${({theme:e})=>e.spaces[4]};
+`,O=n.Sub,_=l.forwardRef(({disabled:e=!1,...r},o)=>t.jsx(n.SubTrigger,{asChild:!0,disabled:e,children:t.jsxs(B,{ref:o,color:"neutral800",as:"button",type:"button",background:"transparent",borderStyle:"none",gap:5,...r,children:[t.jsx(i.Typography,{children:r.children}),t.jsx(I,{height:12,width:12})]})})),B=a.default(b)`
+  &[data-state='open'] {
+    background-color: ${({theme:e})=>e.colors.primary100};
+  }
+`,I=a.default(d.ChevronRight)`
+  path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+`,D=l.forwardRef((e,r)=>t.jsx(n.Portal,{children:t.jsx(n.SubContent,{sideOffset:8,asChild:!0,children:t.jsx(h,{ref:r,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",...e})})})),P=R,F=$,E=v,W=k,H=q,A=O,N=_,V=D;exports.Content=E;exports.Item=W;exports.Label=H;exports.Root=P;exports.SubContent=V;exports.SubRoot=A;exports.SubTrigger=N;exports.Trigger=F;

package/dist/v2/SimpleMenu/Menu.js

@@ -0,0 +1,89 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import * as n from "@radix-ui/react-dropdown-menu";
+import { CarretDown as f, ChevronRight as S } from "@strapi/icons";
+import l, { css as w } from "styled-components";
+import { extractStyleFromTheme as x } from "../../helpers/theme.js";
+import { Link as y } from "../Link/Link.js";
+import { Button as C } from "../../Button/Button.js";
+import { Box as $ } from "../../Box/Box.js";
+import { Flex as s } from "../../Flex/Flex.js";
+import { Typography as i } from "../../Typography/Typography.js";
+const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, children: e(C, { ref: t, type: "button", variant: "ghost", endIcon: e(f, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": !0 }), paddingTop: r === "S" ? 1 : 2, paddingBottom: r === "S" ? 1 : 2, paddingLeft: r === "S" ? 3 : 4, paddingRight: r === "S" ? 3 : 4, ...o }) })), R = a(({ children: r, intersectionId: o, popoverPlacement: t = "bottom-start", ...g }, p) => {
+  const [b, m] = t.split("-");
+  return e(n.Portal, { children: e(n.Content, { align: m, side: b, loop: !0, asChild: !0, children: d(c, { ref: p, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...g, children: [r, e($, { id: o, width: "100%", height: "1px" })] }) }) });
+}), c = l(s)`
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`, T = ({ onSelect: r, disabled: o = !1, ...t }) => e(n.Item, { asChild: !0, onSelect: r, disabled: o, children: t.isLink || t.isExternal ? e(L, { color: "neutral800", ...t, isExternal: t.isExternal ?? !1, children: e(i, { children: t.children }) }) : e(h, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...t, children: e(i, { children: t.children }) }) }), u = ({ theme: r }) => w`
+  text-align: left;
+  width: 100%;
+  border-radius: ${r.borderRadius};
+  padding: ${r.spaces[2]} ${r.spaces[4]};
+
+  ${i} {
+    color: inherit;
+  }
+
+  &[aria-disabled] {
+    cursor: not-allowed;
+
+    ${i} {
+      color: ${r.colors.neutral500};
+    }
+  }
+
+  &[data-highlighted] {
+    background-color: ${r.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &:after {
+      content: none;
+    }
+  }
+`, h = l(s)`
+  ${u}
+`, L = l(y)`
+  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
+  color: ${({ theme: r, color: o }) => x(r.colors, o, void 0)};
+  text-decoration: none;
+
+  &:hover {
+    color: unset;
+  }
+
+  svg > path,
+  &:focus-visible svg > path {
+    fill: currentColor;
+  }
+
+  ${u}
+`, M = a((r, o) => e(n.Label, { asChild: !0, children: e(I, { ref: o, variant: "sigma", textColor: "neutral600", ...r }) })), I = l(i)`
+  padding: ${({ theme: r }) => r.spaces[2]} ${({ theme: r }) => r.spaces[4]};
+`, B = n.Sub, O = a(({ disabled: r = !1, ...o }, t) => e(n.SubTrigger, { asChild: !0, disabled: r, children: d(E, { ref: t, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...o, children: [e(i, { children: o.children }), e(W, { height: 12, width: 12 })] }) })), E = l(h)`
+  &[data-state='open'] {
+    background-color: ${({ theme: r }) => r.colors.primary100};
+  }
+`, W = l(S)`
+  path {
+    fill: ${({ theme: r }) => r.colors.neutral500};
+  }
+`, j = a((r, o) => e(n.Portal, { children: e(n.SubContent, { sideOffset: 8, asChild: !0, children: e(c, { ref: o, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", ...r }) }) })), N = v, Q = k, U = R, X = T, Y = M, Z = B, _ = O, z = j;
+export {
+  U as Content,
+  X as Item,
+  Y as Label,
+  N as Root,
+  z as SubContent,
+  Z as SubRoot,
+  _ as SubTrigger,
+  Q as Trigger
+};

package/dist/v2/SimpleMenu/SimpleMenu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),n=require("./Menu.cjs"),p=require("../../helpers/strings.cjs"),M=require("../../hooks/useId.cjs"),q=require("../../hooks/useIntersection.cjs"),R=({children:l,onOpen:s,onClose:r,popoverPlacement:a,onReachEnd:o,...c})=>{const d=u.useRef(null),[I,f]=u.useState(!1),h=e=>{o&&o(e)},g=e=>{e&&typeof s=="function"?s():!e&&typeof r=="function"&&r(),f(e)},m=M.useId(),i=`intersection-${p.stripReactIdOfColon(m)}`;return q.useIntersection(d,h,{selectorToWatch:`#${i}`,skipWhen:!I}),t.jsxs(n.Root,{onOpenChange:g,children:[t.jsx(n.Trigger,{...c,children:c.label}),t.jsx(n.Content,{intersectionId:i,popoverPlacement:a,children:l})]})},j=n.Item;exports.Menu=n;exports.MenuItem=j;exports.SimpleMenu=R;