@strapi/design-system 0.0.0-599b75fb-test

package/dist/MainNav/NavLink.cjs

@@ -0,0 +1,69 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),$=require("prop-types"),h=require("react-router-dom"),v=require("styled-components"),b=require("./MainNavContext.cjs"),T=require("../Badge/Badge.cjs"),x=require("../Box/Box.cjs"),y=require("../Flex/Flex.cjs"),q=require("../Tooltip/Tooltip.cjs"),o=require("../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(m),a=i($),l=i(v),u=l.default(x.Box)`
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`,p=l.default(h.NavLink)`
+  position: relative;
+  text-decoration: none;
+  display: block;
+  border-radius: ${({theme:e})=>e.borderRadius};
+  background: ${({theme:e})=>e.colors.neutral0};
+
+  ${o.Typography} {
+    color: ${({theme:e})=>e.colors.neutral600};
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+
+  &:hover {
+    background: ${({theme:e})=>e.colors.neutral100};
+
+    ${o.Typography} {
+      color: ${({theme:e})=>e.colors.neutral700};
+    }
+
+    svg path {
+      fill: ${({theme:e})=>e.colors.neutral600};
+    }
+  }
+
+  &.active {
+    background: ${({theme:e})=>e.colors.primary100};
+
+    svg path {
+      fill: ${({theme:e})=>e.colors.primary600};
+    }
+
+    ${o.Typography} {
+      color: ${({theme:e})=>e.colors.primary600};
+      font-weight: 500;
+    }
+  }
+`,f=l.default(y.Flex)`
+  padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
+`,g=l.default(T.Badge)`
+  ${({theme:e,condensed:r})=>r&&`
+	  position: absolute;
+    // Values based on visual aspect 
+    top: -${e.spaces[3]};
+    right:  -${e.spaces[1]};
+  `}
+
+  ${o.Typography} {
+    //find a solution to remove !important
+    color: ${({theme:e})=>e.colors.neutral0} !important;
+    line-height: 0;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: ${({theme:e})=>e.spaces[6]};
+  height: ${({theme:e})=>e.spaces[5]};
+  padding: ${({theme:e})=>`0 ${e.spaces[2]}`};
+  border-radius: ${({theme:e})=>e.spaces[10]};
+  background: ${({theme:e})=>e.colors.primary600};
+`,s=({children:e,icon:r,badgeContent:n,badgeAriaLabel:c,...d})=>b.useMainNav()?t.default.createElement(q.Tooltip,{position:"right",label:e},t.default.createElement(p,{...d},t.default.createElement(f,{as:"span"},t.default.createElement(u,{"aria-hidden":!0,paddingRight:0,as:"span"},r),n&&t.default.createElement(g,{condensed:!0,"aria-label":c},n)))):t.default.createElement(p,{...d},t.default.createElement(f,{as:"span",justifyContent:"space-between"},t.default.createElement(y.Flex,null,t.default.createElement(u,{"aria-hidden":!0,paddingRight:3,as:"span"},r),t.default.createElement(o.Typography,null,e)),n&&t.default.createElement(g,{justifyContent:"center","aria-label":c},n)));s.displayName="NavLink";s.defaultProps={badgeContent:void 0,badgeAriaLabel:void 0};s.propTypes={badgeAriaLabel:a.default.string,badgeContent:a.default.oneOfType([a.default.string,a.default.number]),children:a.default.node.isRequired,icon:a.default.node.isRequired};exports.NavLink=s;

package/dist/MainNav/NavLink.js

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

package/dist/MainNav/NavSection.cjs

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

package/dist/MainNav/NavSection.js

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

package/dist/MainNav/NavSections.cjs

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

package/dist/MainNav/NavSections.js

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

package/dist/MainNav/NavUser.cjs

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

package/dist/MainNav/NavUser.js

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

package/dist/MainNav/index.cjs

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

package/dist/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/ModalLayout/ModalBody.cjs

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),a=require("styled-components"),d=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(o),r=t(a),c=r.default(d.Box)`
+  overflow: auto;
+  max-height: 60vh;
+`,u=e=>l.default.createElement(c,{padding:7,...e});exports.ModalBody=u;

package/dist/ModalLayout/ModalBody.js

@@ -0,0 +1,10 @@
+import t from "react";
+import r from "styled-components";
+import { Box as e } from "../Box/Box.js";
+const a = r(e)`
+  overflow: auto;
+  max-height: 60vh;
+`, l = (o) => /* @__PURE__ */ t.createElement(a, { padding: 7, ...o });
+export {
+  l as ModalBody
+};

package/dist/ModalLayout/ModalContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext(),o=()=>e.useContext(t);exports.ModalContext=t;exports.useModal=o;

package/dist/ModalLayout/ModalContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(), r = () => o(e);
+export {
+  e as ModalContext,
+  r as useModal
+};

package/dist/ModalLayout/ModalFooter.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),c=require("prop-types"),i=require("styled-components"),p=require("../Box/Box.cjs"),n=require("../Flex/Flex.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(u),a=o(c),l=o(i),f=l.default(p.Box)`
+  border-radius: 0 0 ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius};
+  border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,d=l.default(n.Flex)`
+  & > * + * {
+    margin-left: ${({theme:e})=>e.spaces[2]};
+  }
+`,r=({startActions:e,endActions:s})=>t.default.createElement(f,{paddingTop:4,paddingBottom:4,paddingLeft:5,paddingRight:5,background:"neutral100"},t.default.createElement(n.Flex,{justifyContent:"space-between"},t.default.createElement(d,null,e),t.default.createElement(d,null,s)));r.defaultProps={endActions:void 0,startActions:void 0};r.propTypes={endActions:a.default.node,startActions:a.default.node};exports.ModalFooter=r;

package/dist/ModalLayout/ModalFooter.js

@@ -0,0 +1,24 @@
+import o from "react";
+import t from "prop-types";
+import n from "styled-components";
+import { Box as i } from "../Box/Box.js";
+import { Flex as d } from "../Flex/Flex.js";
+const s = n(i)`
+  border-radius: 0 0 ${({ theme: e }) => e.borderRadius} ${({ theme: e }) => e.borderRadius};
+  border-top: 1px solid ${({ theme: e }) => e.colors.neutral150};
+`, r = n(d)`
+  & > * + * {
+    margin-left: ${({ theme: e }) => e.spaces[2]};
+  }
+`, a = ({ startActions: e, endActions: p }) => /* @__PURE__ */ o.createElement(s, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100" }, /* @__PURE__ */ o.createElement(d, { justifyContent: "space-between" }, /* @__PURE__ */ o.createElement(r, null, e), /* @__PURE__ */ o.createElement(r, null, p)));
+a.defaultProps = {
+  endActions: void 0,
+  startActions: void 0
+};
+a.propTypes = {
+  endActions: t.node,
+  startActions: t.node
+};
+export {
+  a as ModalFooter
+};

package/dist/ModalLayout/ModalHeader.cjs

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),d=require("@strapi/icons"),c=require("prop-types"),u=require("styled-components"),i=require("./ModalContext.cjs"),p=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),b=require("../IconButton/IconButton.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(s),n=o(c),x=o(u),y=x.default(p.Box)`
+  border-radius: ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius} 0 0;
+  border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,r=({children:e,closeLabel:a})=>{const l=i.useModal();return t.default.createElement(y,{paddingTop:4,paddingBottom:4,paddingLeft:5,paddingRight:5,background:"neutral100"},t.default.createElement(f.Flex,{justifyContent:"space-between"},e,t.default.createElement(b.IconButton,{onClick:l,"aria-label":a,icon:t.default.createElement(d.Cross,null)})))};r.defaultProps={closeLabel:"Close the modal"};r.propTypes={children:n.default.node.isRequired,closeLabel:n.default.string};exports.ModalHeader=r;

package/dist/ModalLayout/ModalHeader.js

@@ -0,0 +1,25 @@
+import o from "react";
+import { Cross as l } from "@strapi/icons";
+import r from "prop-types";
+import n from "styled-components";
+import { useModal as i } from "./ModalContext.js";
+import { Box as p } from "../Box/Box.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { IconButton as s } from "../IconButton/IconButton.js";
+const c = n(p)`
+  border-radius: ${({ theme: e }) => e.borderRadius} ${({ theme: e }) => e.borderRadius} 0 0;
+  border-bottom: 1px solid ${({ theme: e }) => e.colors.neutral150};
+`, t = ({ children: e, closeLabel: a }) => {
+  const d = i();
+  return /* @__PURE__ */ o.createElement(c, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100" }, /* @__PURE__ */ o.createElement(m, { justifyContent: "space-between" }, e, /* @__PURE__ */ o.createElement(s, { onClick: d, "aria-label": a, icon: /* @__PURE__ */ o.createElement(l, null) })));
+};
+t.defaultProps = {
+  closeLabel: "Close the modal"
+};
+t.propTypes = {
+  children: r.node.isRequired,
+  closeLabel: r.string
+};
+export {
+  t as ModalHeader
+};

package/dist/ModalLayout/ModalLayout.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("prop-types"),d=require("styled-components"),p=require("./ModalContext.cjs"),f=require("../Box/Box.cjs"),y=require("../DismissibleLayer/DismissibleLayer.cjs"),m=require("../Flex/Flex.cjs"),x=require("../FocusTrap/FocusTrap.cjs"),b=require("../hooks/useLockScroll.cjs"),q=require("../Portal/Portal.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(c),r=o(i),a=o(d),g=a.default(m.Flex)`
+  inset: 0;
+  background: ${({theme:e})=>`${e.colors.neutral800}1F`};
+`,j=a.default(f.Box)`
+  width: ${830/16}rem;
+`,l=({onClose:e,labelledBy:s,...u})=>(b(!0),t.default.createElement(q.Portal,null,t.default.createElement(p.ModalContext.Provider,{value:e},t.default.createElement(g,{justifyContent:"center",paddingLeft:8,paddingRight:8,position:"fixed",zIndex:4},t.default.createElement(x.FocusTrap,null,t.default.createElement(y.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(j,{"aria-labelledby":s,onClick:n=>n.stopPropagation(),background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog","aria-modal":!0,...u})))))));l.propTypes={labelledBy:r.default.string.isRequired,onClose:r.default.func.isRequired};exports.ModalLayout=l;

package/dist/ModalLayout/ModalLayout.js

@@ -0,0 +1,35 @@
+import e from "react";
+import r from "prop-types";
+import t from "styled-components";
+import { ModalContext as l } from "./ModalContext.js";
+import { Box as m } from "../Box/Box.js";
+import { DismissibleLayer as p } from "../DismissibleLayer/DismissibleLayer.js";
+import { Flex as d } from "../Flex/Flex.js";
+import { FocusTrap as s } from "../FocusTrap/FocusTrap.js";
+import u from "../hooks/useLockScroll.js";
+import { Portal as c } from "../Portal/Portal.js";
+const f = t(d)`
+  inset: 0;
+  background: ${({ theme: o }) => `${o.colors.neutral800}1F`};
+`, y = t(m)`
+  width: ${830 / 16}rem;
+`, g = ({ onClose: o, labelledBy: a, ...i }) => (u(!0), /* @__PURE__ */ e.createElement(c, null, /* @__PURE__ */ e.createElement(l.Provider, { value: o }, /* @__PURE__ */ e.createElement(f, { justifyContent: "center", paddingLeft: 8, paddingRight: 8, position: "fixed", zIndex: 4 }, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement(p, { onEscapeKeyDown: o, onPointerDownOutside: o }, /* @__PURE__ */ e.createElement(
+  y,
+  {
+    "aria-labelledby": a,
+    onClick: (n) => n.stopPropagation(),
+    background: "neutral0",
+    hasRadius: !0,
+    shadow: "popupShadow",
+    role: "dialog",
+    "aria-modal": !0,
+    ...i
+  }
+)))))));
+g.propTypes = {
+  labelledBy: r.string.isRequired,
+  onClose: r.func.isRequired
+};
+export {
+  g as ModalLayout
+};

package/dist/ModalLayout/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./ModalLayout.cjs"),e=require("./ModalHeader.cjs"),a=require("./ModalFooter.cjs"),d=require("./ModalBody.cjs");exports.ModalLayout=o.ModalLayout;exports.ModalHeader=e.ModalHeader;exports.ModalFooter=a.ModalFooter;exports.ModalBody=d.ModalBody;

package/dist/ModalLayout/index.js

@@ -0,0 +1,10 @@
+import { ModalLayout as e } from "./ModalLayout.js";
+import { ModalHeader as d } from "./ModalHeader.js";
+import { ModalFooter as f } from "./ModalFooter.js";
+import { ModalBody as m } from "./ModalBody.js";
+export {
+  m as ModalBody,
+  f as ModalFooter,
+  d as ModalHeader,
+  e as ModalLayout
+};

package/dist/NumberInput/NumberInput.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),y=require("@internationalized/number"),q=require("@strapi/icons"),O=require("prop-types"),T=require("styled-components"),$=require("../Field/Field.cjs"),B=require("../Field/FieldLabel.cjs"),H=require("../Field/FieldInput.cjs"),M=require("../Field/FieldHint.cjs"),U=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const W=require("../Flex/Flex.cjs"),X=require("../helpers/getDefaultLocale.cjs"),h=require("../helpers/keyboardKeys.cjs"),Y=require("../hooks/useControllableState.cjs"),G=require("../hooks/useId.cjs"),I=require("../Icon/Icon.cjs"),J=require("../themes/sizes.cjs"),m=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},a=m(f),t=m(O),Q=m(T),v=Q.default.button`
+  display: flex;
+  height: 1rem;
+  align-items: ${({reverse:r})=>r?"flex-end":"flex-start"};
+  transform: translateY(${({reverse:r})=>r?"-2px":"2px"});
+  cursor: ${({disabled:r})=>r?"not-allowed":void 0};
+  svg {
+    display: block;
+    height: ${4/16}rem;
+    transform: ${({reverse:r})=>r?"rotateX(180deg)":void 0};
+  }
+`,Z="",d=a.default.forwardRef(({size:r,startAction:N,name:j,hint:w,error:E,label:p,labelAction:x,locale:D,id:A,onValueChange:C,value:k,step:o,required:V,disabled:u,..._},L)=>{const P=G.useId(A),b=D||X.getDefaultLocale(),s=f.useRef(new y.NumberParser(b,{style:"decimal"})),c=f.useRef(new y.NumberFormatter(b,{maximumFractionDigits:20})),[l,R]=Y.useControllableState({prop(e){const n=String(k);return isNaN(n)||n!==e&&e!==""?e:n},defaultProp:Z,onChange(e){const n=s.current.parse(e);C(isNaN(n)?void 0:n)}}),i=e=>{R(String(e))},K=({target:{value:e}})=>{s.current.isValidPartialNumber(e)&&i(e)},F=()=>{if(!l){i(o);return}const e=s.current.parse(l),n=isNaN(e)?o:e+o;i(c.current.format(n))},g=()=>{if(!l){i(-o);return}const e=s.current.parse(l),n=isNaN(e)?-o:e-o;i(c.current.format(n))},S=e=>{if(!u)switch(e.key){case h.KeyboardKeys.DOWN:{e.preventDefault(),g();break}case h.KeyboardKeys.UP:{e.preventDefault(),F();break}}},z=()=>{if(l){const e=s.current.parse(l),n=isNaN(e)?"":c.current.format(e);i(n)}};return a.default.createElement($.Field,{name:j,hint:w,error:E,id:P,required:V},a.default.createElement(W.Flex,{direction:"column",alignItems:"stretch",gap:1},p&&a.default.createElement(B.FieldLabel,{action:x},p),a.default.createElement(H.FieldInput,{ref:L,startAction:N,disabled:u,type:"text",inputmode:"decimal",onChange:K,onKeyDown:S,onBlur:z,value:l,size:r,endAction:a.default.createElement(a.default.Fragment,null,a.default.createElement(v,{disabled:u,"aria-hidden":!0,reverse:!0,onClick:F,tabIndex:-1,type:"button","data-testid":"ArrowUp"},a.default.createElement(I.Icon,{as:q.CarretDown,color:"neutral500"})),a.default.createElement(v,{disabled:u,"aria-hidden":!0,onClick:g,tabIndex:-1,type:"button","data-testid":"ArrowDown"},a.default.createElement(I.Icon,{as:q.CarretDown,color:"neutral500"}))),..._}),a.default.createElement(M.FieldHint,null),a.default.createElement(U.FieldError,null)))});d.displayName="NumberInput";d.defaultProps={"aria-label":void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,labelAction:void 0,locale:void 0,required:!1,size:"M",startAction:void 0,step:1,value:void 0};d.propTypes={"aria-label":t.default.string,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.string,label:t.default.string,labelAction:t.default.element,locale:t.default.string,name:t.default.string.isRequired,onValueChange:t.default.func.isRequired,required:t.default.bool,size:t.default.oneOf(Object.keys(J.sizes.input)),startAction:t.default.element,step:t.default.number,value:t.default.number};exports.NumberInput=d;

package/dist/NumberInput/NumberInput.js

@@ -0,0 +1,172 @@
+import t, { useRef as g } from "react";
+import { NumberParser as S, NumberFormatter as T } from "@internationalized/number";
+import { CarretDown as v } from "@strapi/icons";
+import r from "prop-types";
+import z from "styled-components";
+import { Field as B } from "../Field/Field.js";
+import { FieldLabel as U } from "../Field/FieldLabel.js";
+import { FieldInput as _ } from "../Field/FieldInput.js";
+import { FieldHint as j } from "../Field/FieldHint.js";
+import { FieldError as H } from "../Field/FieldError.js";
+import "../Field/FieldContext.js";
+import "../Field/FieldAction.js";
+import { Flex as M } from "../Flex/Flex.js";
+import { getDefaultLocale as W } from "../helpers/getDefaultLocale.js";
+import { KeyboardKeys as N } from "../helpers/keyboardKeys.js";
+import { useControllableState as X } from "../hooks/useControllableState.js";
+import { useId as Y } from "../hooks/useId.js";
+import { Icon as y } from "../Icon/Icon.js";
+import { sizes as G } from "../themes/sizes.js";
+const h = z.button`
+  display: flex;
+  height: 1rem;
+  align-items: ${({ reverse: n }) => n ? "flex-end" : "flex-start"};
+  transform: translateY(${({ reverse: n }) => n ? "-2px" : "2px"});
+  cursor: ${({ disabled: n }) => n ? "not-allowed" : void 0};
+  svg {
+    display: block;
+    height: ${4 / 16}rem;
+    transform: ${({ reverse: n }) => n ? "rotateX(180deg)" : void 0};
+  }
+`, J = "", u = t.forwardRef(
+  ({
+    size: n,
+    startAction: w,
+    name: E,
+    hint: I,
+    error: x,
+    label: d,
+    labelAction: A,
+    locale: V,
+    id: F,
+    onValueChange: D,
+    value: C,
+    step: i,
+    required: k,
+    disabled: s,
+    ...P
+  }, R) => {
+    const O = Y(F), p = V || W(), m = g(new S(p, { style: "decimal" })), c = g(new T(p, { maximumFractionDigits: 20 })), [a, $] = X({
+      prop(e) {
+        const o = String(C);
+        return isNaN(o) || o !== e && e !== "" ? e : o;
+      },
+      defaultProp: J,
+      onChange(e) {
+        const o = m.current.parse(e);
+        D(isNaN(o) ? void 0 : o);
+      }
+    }), l = (e) => {
+      $(String(e));
+    }, q = ({ target: { value: e } }) => {
+      m.current.isValidPartialNumber(e) && l(e);
+    }, f = () => {
+      if (!a) {
+        l(i);
+        return;
+      }
+      const e = m.current.parse(a), o = isNaN(e) ? i : e + i;
+      l(c.current.format(o));
+    }, b = () => {
+      if (!a) {
+        l(-i);
+        return;
+      }
+      const e = m.current.parse(a), o = isNaN(e) ? -i : e - i;
+      l(c.current.format(o));
+    }, K = (e) => {
+      if (!s)
+        switch (e.key) {
+          case N.DOWN: {
+            e.preventDefault(), b();
+            break;
+          }
+          case N.UP: {
+            e.preventDefault(), f();
+            break;
+          }
+        }
+    }, L = () => {
+      if (a) {
+        const e = m.current.parse(a), o = isNaN(e) ? "" : c.current.format(e);
+        l(o);
+      }
+    };
+    return /* @__PURE__ */ t.createElement(B, { name: E, hint: I, error: x, id: O, required: k }, /* @__PURE__ */ t.createElement(M, { direction: "column", alignItems: "stretch", gap: 1 }, d && /* @__PURE__ */ t.createElement(U, { action: A }, d), /* @__PURE__ */ t.createElement(
+      _,
+      {
+        ref: R,
+        startAction: w,
+        disabled: s,
+        type: "text",
+        inputmode: "decimal",
+        onChange: q,
+        onKeyDown: K,
+        onBlur: L,
+        value: a,
+        size: n,
+        endAction: /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+          h,
+          {
+            disabled: s,
+            "aria-hidden": !0,
+            reverse: !0,
+            onClick: f,
+            tabIndex: -1,
+            type: "button",
+            "data-testid": "ArrowUp"
+          },
+          /* @__PURE__ */ t.createElement(y, { as: v, color: "neutral500" })
+        ), /* @__PURE__ */ t.createElement(
+          h,
+          {
+            disabled: s,
+            "aria-hidden": !0,
+            onClick: b,
+            tabIndex: -1,
+            type: "button",
+            "data-testid": "ArrowDown"
+          },
+          /* @__PURE__ */ t.createElement(y, { as: v, color: "neutral500" })
+        )),
+        ...P
+      }
+    ), /* @__PURE__ */ t.createElement(j, null), /* @__PURE__ */ t.createElement(H, null)));
+  }
+);
+u.displayName = "NumberInput";
+u.defaultProps = {
+  "aria-label": void 0,
+  disabled: !1,
+  error: void 0,
+  hint: void 0,
+  id: void 0,
+  label: void 0,
+  labelAction: void 0,
+  locale: void 0,
+  required: !1,
+  size: "M",
+  startAction: void 0,
+  step: 1,
+  value: void 0
+};
+u.propTypes = {
+  "aria-label": r.string,
+  disabled: r.bool,
+  error: r.string,
+  hint: r.oneOfType([r.string, r.node, r.arrayOf(r.node)]),
+  id: r.string,
+  label: r.string,
+  labelAction: r.element,
+  locale: r.string,
+  name: r.string.isRequired,
+  onValueChange: r.func.isRequired,
+  required: r.bool,
+  size: r.oneOf(Object.keys(G.input)),
+  startAction: r.element,
+  step: r.number,
+  value: r.number
+};
+export {
+  u as NumberInput
+};