@strapi/design-system 1.7.10 → 1.8.1

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,56 +1,100 @@
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import { useControllableState as P } from "../hooks/useControllableState.js";
-import { useId as V } from "../hooks/useId.js";
-import { DatePicker as j } from "../DatePicker/DatePicker.js";
-import { TimePicker as q } from "../TimePicker/TimePicker.js";
-import { Field as v } from "../Field/Field.js";
-import { Flex as C } from "../Flex/Flex.js";
-import { FieldLabel as z } from "../Field/FieldLabel.js";
-import { FieldHint as B } from "../Field/FieldHint.js";
-import { FieldError as E } from "../Field/FieldError.js";
-const Z = ({ ariaLabel: a, clearLabel: n = "clear", disabled: f = !1, error: d, hint: c, id: b, label: m, labelAction: I, onChange: T, onClear: g, name: $, required: u = !1, selectButtonTitle: w = "select", size: h = "M", step: y = 1, value: F, ...H }) => {
-  const M = A(F), [t, o] = P({
-    prop: M,
-    onChange: T
-  }), i = t ? `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}` : void 0, k = (e) => {
-    if (i) {
-      const [s, p] = i.split(":");
-      e.setHours(parseInt(s, 10)), e.setMinutes(parseInt(p, 10));
+import { jsx as o, jsxs as P } from "react/jsx-runtime";
+import U from "react";
+import { getLocalTimeZone as b, parseAbsoluteToLocal as Z, toCalendarDateTime as v } from "@internationalized/date";
+import $ from "styled-components";
+import { DatePickerInput as G } from "../DatePicker/DatePicker.js";
+import { useDesignSystem as J } from "../DesignSystemProvider.js";
+import { once as K } from "../helpers/deprecations.js";
+import { useControllableState as Q } from "../hooks/useControllableState.js";
+import { useDateFormatter as W } from "../hooks/useDateFormatter.js";
+import { useId as I } from "../hooks/useId.js";
+import { TimePickerInput as X } from "../TimePicker/TimePicker.js";
+import { Field as Y } from "../Field/Field.js";
+import { Flex as L } from "../Flex/Flex.js";
+import { FieldLabel as ee } from "../Field/FieldLabel.js";
+import { VisuallyHidden as S } from "../VisuallyHidden/VisuallyHidden.js";
+import { FieldHint as te } from "../Field/FieldHint.js";
+import { FieldError as re } from "../Field/FieldError.js";
+const xe = ({
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  ariaLabel: n,
+  clearLabel: d = "clear",
+  dateLabel: p = "Choose date",
+  timeLabel: a = "Choose time",
+  disabled: s = !1,
+  error: h,
+  hint: V,
+  id: _,
+  label: N,
+  labelAction: R,
+  onChange: k,
+  onClear: c,
+  name: j,
+  required: D = !1,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  selectButtonTitle: ae,
+  size: C = "M",
+  step: z,
+  value: g,
+  initialDate: w,
+  ...B
+}) => {
+  const x = U.useRef(null), [t, f] = Q({
+    defaultProp: w ? m(w, !1) : void 0,
+    prop: g ? m(g, !1) : g ?? void 0,
+    onChange(e) {
+      k && k(e?.toDate(b()));
     }
-    o(e);
-  }, x = (e) => {
-    const s = t ? new Date(t) : /* @__PURE__ */ new Date(), [p, N] = e.split(":");
-    s.setHours(parseInt(p, 10)), s.setMinutes(parseInt(N, 10)), o(s);
-  }, S = () => {
-    o(void 0), g && g();
-  }, L = () => {
-    let e = t ? new Date(t) : /* @__PURE__ */ new Date();
-    e.setHours(0), e.setMinutes(0), o(e);
-  }, l = V(b);
-  return r(v, { name: $, role: "group", id: l, "aria-labelledby": l, hint: c, error: d, required: u, children: D(C, { direction: "column", alignItems: "stretch", gap: 1, children: [r(z, { action: I, children: m }), D(C, { gap: 2, children: [r(j, { ariaLabel: m || a, selectedDate: t, selectedDateLabel: (e) => `Date picker, current is ${e}`, onChange: k, error: typeof d == "string", hint: typeof c == "string", required: u, size: h, onClear: S, clearLabel: `${n} date`, disabled: f, id: l, ...H }), r(q, {
-    size: h,
-    "aria-label": m || a,
-    error: typeof d == "string",
-    hint: typeof c == "string",
-    value: i,
-    onChange: x,
-    /**
-     * In reality the time picker is only cleared when there is no date otherwise it's just 00:00
-     * and we should show that for accurate UX and therefore you cannot clear it when it's 00:00.
-     */
-    onClear: i !== void 0 && i !== "0:0:0" ? L : void 0,
-    clearLabel: `${n} time`,
-    required: u,
-    selectButtonTitle: w,
-    disabled: f,
-    step: y,
-    id: l
-  })] }), r(B, {}), r(E, {})] }) });
-}, A = (a) => {
-  const n = Date.parse(a);
-  if (!Number.isNaN(n))
-    return new Date(n);
-};
+  }), H = J("DateTimePicker"), O = W(H.locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: !1
+  }), l = t ? O.format(t.toDate(b())) : "", q = (e) => {
+    let r = e ? m(e) : void 0;
+    if (!(r && t && r.compare(t) === 0)) {
+      if (l && r) {
+        const [u, T] = l.split(":");
+        r = r.set({ hour: parseInt(u, 10), minute: parseInt(T, 10) });
+      }
+      f(r);
+    }
+  }, A = (e) => {
+    if (!e)
+      return;
+    const [r, u] = e.split(":"), T = t ? t.set({ hour: parseInt(r, 10), minute: parseInt(u, 10) }) : m(/* @__PURE__ */ new Date()).set({ hour: parseInt(r, 10), minute: parseInt(u, 10) });
+    f(T);
+  }, E = (e) => {
+    f(void 0), c && c(e);
+  }, M = () => {
+    const e = t ? t.set({ hour: 0, minute: 0 }) : m(/* @__PURE__ */ new Date());
+    f(e);
+  }, i = I(_), y = I(), F = I();
+  return o(Y, { name: j, as: "fieldset", id: i, "aria-labelledby": i, hint: V, error: h, required: D, children: P(L, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [o(ee, { onClick: () => {
+    x.current.focus();
+  }, as: "legend", id: i, action: R, children: N }), P(L, { flex: "1", gap: 1, children: [o(S, { as: "label", htmlFor: F, children: p }), o(ie, { ...B, selectedDate: t?.toDate(b()), onChange: q, error: typeof h == "string", required: D, size: C, onClear: c ? E : void 0, clearLabel: `${d} date`, disabled: s, id: F, ref: x, "aria-describedby": `${i}-hint ${i}-error` }), o(S, { as: "label", htmlFor: y, children: a }), o(ne, { size: C, error: typeof h == "string", value: l, onChange: A, onClear: c && l !== void 0 && l !== "00:00" ? M : void 0, clearLabel: `${d} time`, required: D, disabled: s, step: z, id: y, "aria-describedby": `${i}-hint ${i}-error` })] }), o(te, {}), o(re, {})] }) });
+}, oe = K(console.warn), m = (n, d = !0) => {
+  if (typeof n == "string") {
+    oe("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");
+    const s = Date.parse(n);
+    Number.isNaN(s) ? n = /* @__PURE__ */ new Date() : n = new Date(s);
+  }
+  const p = n.toISOString();
+  let a = Z(p);
+  return d && (a = a.set({ hour: 0, minute: 0 })), v(a);
+}, ie = $(G)`
+  flex: 1 1 70%;
+  min-width: 120px;
+`, ne = $(X)`
+  flex: 1 1 30%;
+  min-width: 120px;
+`;
 export {
-  Z as DateTimePicker
+  xe as DateTimePicker,
+  m as convertUTCDateToCalendarDateTime
 };

package/dist/DateTimePicker/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateTimePicker.cjs");exports.DateTimePicker=e.DateTimePicker;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateTimePicker.cjs");exports.DateTimePicker=e.DateTimePicker;exports.convertUTCDateToCalendarDateTime=e.convertUTCDateToCalendarDateTime;

package/dist/DateTimePicker/index.js

@@ -1,4 +1,5 @@
-import { DateTimePicker as i } from "./DateTimePicker.js";
+import { DateTimePicker as r, convertUTCDateToCalendarDateTime as t } from "./DateTimePicker.js";
 export {
-  i as DateTimePicker
+  r as DateTimePicker,
+  t as convertUTCDateToCalendarDateTime
 };

package/dist/DesignSystemProvider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./helpers/context.cjs"),s=require("./ThemeProvider/ThemeProvider.cjs"),t="en-EN",r=()=>typeof navigator>"u"?t:navigator.language?navigator.language:t,[a,u]=o.createContext("StrapiDesignSystem",{locale:r()}),c=({locale:n=r(),...i})=>e.jsx(a,{locale:n,children:e.jsx(s.ThemeProvider,{...i})});exports.DesignSystemProvider=c;exports.useDesignSystem=u;

package/dist/DesignSystemProvider.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as i } from "./helpers/context.js";
+import { ThemeProvider as a } from "./ThemeProvider/ThemeProvider.js";
+const r = "en-EN", t = () => typeof navigator > "u" ? r : navigator.language ? navigator.language : r, [s, l] = i("StrapiDesignSystem", {
+  locale: t()
+}), u = ({ locale: o = t(), ...n }) => e(s, { locale: o, children: e(a, { ...n }) });
+export {
+  u as DesignSystemProvider,
+  l as useDesignSystem
+};

package/dist/Grid/Grid.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("styled-components"),i=require("../helpers/handleResponsiveValues.cjs"),d=require("../Box/Box.cjs"),l=e=>e&&e.__esModule?e:{default:e},n=l(o),u=n.default(d.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("styled-components"),d=require("../helpers/handleResponsiveValues.cjs"),l=require("../Box/Box.cjs"),n=e=>e&&e.__esModule?e:{default:e},u=n(i),a=u.default(l.Box)`
   display: grid;
   grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
-  ${({theme:e,gap:t})=>i("gap",t,e)}
-`,a=({gap:e="0",gridCols:t=12,...r})=>s.jsx(u,{gap:e,gridCols:t,...r});exports.Grid=a;
+  ${({theme:e,gap:t})=>d("gap",t,e)}
+`,c=e=>{const{gap:t="0",gridCols:r=12,...s}=e;return o.jsx(a,{gap:t,gridCols:r,...s})};exports.Grid=c;

package/dist/Grid/Grid.js

@@ -1,12 +1,15 @@
 import { jsx as e } from "react/jsx-runtime";
-import t from "styled-components";
+import s from "styled-components";
 import i from "../helpers/handleResponsiveValues.js";
 import { Box as m } from "../Box/Box.js";
-const s = t(m)`
+const a = s(m)`
   display: grid;
   grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
   ${({ theme: r, gap: o }) => i("gap", o, r)}
-`, f = ({ gap: r = "0", gridCols: o = 12, ...p }) => e(s, { gap: r, gridCols: o, ...p });
+`, f = (r) => {
+  const { gap: o = "0", gridCols: p = 12, ...t } = r;
+  return e(a, { gap: o, gridCols: p, ...t });
+};
 export {
   f as Grid
 };

package/dist/MainNav/MainNav.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const a=require("prop-types"),s=require("styled-components"),i=require("./MainNavContext.cjs"),l=require("../Flex/Flex.cjs"),r=e=>e&&e.__esModule?e:{default:e},u=r(a),d=r(s),c=d.default(l.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),o=require("./MainNavContext.cjs"),a=require("../Flex/Flex.cjs"),i=e=>e&&e.__esModule?e:{default:e},s=i(r),l=s.default(a.Flex)`
   width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
   border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,t=({condensed:e,...n})=>o.jsx(i.MainNavContext.Provider,{value:e,children:o.jsx(c,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n})});t.defaultProps={condensed:!1};t.propTypes={condensed:u.default.bool};exports.MainNav=t;
+`,u=({condensed:e=!1,...n})=>t.jsx(o.MainNavContext.Provider,{value:e,children:t.jsx(l,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n})});exports.MainNav=u;

package/dist/MainNav/MainNav.js

@@ -1,33 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
-import "react";
-import n from "prop-types";
-import i from "styled-components";
-import { MainNavContext as a } from "./MainNavContext.js";
-import { Flex as p } from "../Flex/Flex.js";
-const m = i(p)`
-  width: ${({ condensed: o }) => o ? "max-content" : `${224 / 16}rem`};
-  border-right: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, t = ({ condensed: o, ...e }) => /* @__PURE__ */ r(a.Provider, { value: o, children: /* @__PURE__ */ r(
-  m,
-  {
-    alignItems: "normal",
-    as: "nav",
-    background: "neutral0",
-    condensed: o,
-    direction: "column",
-    height: "100vh",
-    position: "sticky",
-    top: 0,
-    zIndex: 2,
-    ...e
-  }
-) });
-t.defaultProps = {
-  condensed: !1
-};
-t.propTypes = {
-  condensed: n.bool
-};
+import { jsx as o } from "react/jsx-runtime";
+import n from "styled-components";
+import { MainNavContext as e } from "./MainNavContext.js";
+import { Flex as i } from "../Flex/Flex.js";
+const a = n(i)`
+  width: ${({ condensed: r }) => r ? "max-content" : `${224 / 16}rem`};
+  border-right: 1px solid ${({ theme: r }) => r.colors.neutral150};
+`, c = ({ condensed: r = !1, ...t }) => o(e.Provider, { value: r, children: o(a, { alignItems: "normal", as: "nav", background: "neutral0", condensed: r, direction: "column", height: "100vh", position: "sticky", top: 0, zIndex: 2, ...t }) });
 export {
-  t as MainNav
+  c as MainNav
 };

package/dist/MainNav/MainNavContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(),n=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(!1),a=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=a;

package/dist/MainNav/MainNavContext.js

@@ -1,5 +1,5 @@
 import { createContext as t, useContext as e } from "react";
-const o = t(), a = () => e(o);
+const o = t(!1), a = () => e(o);
 export {
   o as MainNavContext,
   a as useMainNav

package/dist/MainNav/NavBrand.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const x=require("prop-types"),t=require("react-router-dom"),g=require("styled-components"),f=require("./MainNavContext.cjs"),d=require("../Box/Box.cjs"),l=require("../VisuallyHidden/VisuallyHidden.cjs"),j=require("../Flex/Flex.cjs"),u=require("../Typography/Typography.cjs"),p=e=>e&&e.__esModule?e:{default:e},n=p(x),h=p(g),c=h.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react-router-dom"),u=require("styled-components"),p=require("./MainNavContext.cjs"),d=require("../Box/Box.cjs"),a=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Flex/Flex.cjs"),o=require("../Typography/Typography.cjs"),x=e=>e&&e.__esModule?e:{default:e},l=x(u),c=l.default.div`
   svg,
   img {
     border-radius: ${({theme:e})=>e.borderRadius};
@@ -6,7 +6,7 @@
     height: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
     width: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
   }
-`,y=h.default(t.NavLink)`
+`,g=l.default(i.NavLink)`
   text-decoration: unset;
   color: inherit;
-`,s=({workplace:e,title:a,icon:o,to:i})=>f.useMainNav()?r.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:r.jsx(c,{condensed:!0,children:r.jsxs(t.NavLink,{to:i,children:[o,r.jsxs(l.VisuallyHidden,{children:[r.jsx("span",{children:a}),r.jsx("span",{children:e})]})]})})}):r.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:r.jsxs(j.Flex,{children:[r.jsx(c,{as:t.NavLink,to:i,"aria-hidden":!0,tabIndex:-1,children:o}),r.jsxs(d.Box,{paddingLeft:2,children:[r.jsx(u.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span",children:r.jsxs(y,{to:i,children:[a,r.jsx(l.VisuallyHidden,{as:"span",children:e})]})}),r.jsx(u.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0,children:e})]})]})});s.defaultProps={to:"/"};s.propTypes={icon:n.default.node.isRequired,title:n.default.string.isRequired,to:n.default.string,workplace:n.default.string.isRequired};exports.NavBrand=s;
+`,j=({workplace:e,title:t,icon:s,to:r="/"})=>p.useMainNav()?n.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsx(c,{condensed:!0,children:n.jsxs(i.NavLink,{to:r,children:[s,n.jsxs(a.VisuallyHidden,{children:[n.jsx("span",{children:t}),n.jsx("span",{children:e})]})]})})}):n.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(h.Flex,{children:[n.jsx(c,{as:i.NavLink,to:r,"aria-hidden":!0,tabIndex:-1,children:s}),n.jsxs(d.Box,{paddingLeft:2,children:[n.jsx(o.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span",children:n.jsxs(g,{to:r,children:[t,n.jsx(a.VisuallyHidden,{as:"span",children:e})]})}),n.jsx(o.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0,children:e})]})]})});exports.NavBrand=j;

package/dist/MainNav/NavBrand.js

@@ -1,14 +1,12 @@
-import { jsx as i, jsxs as e } from "react/jsx-runtime";
-import "react";
-import n from "prop-types";
-import { NavLink as o } from "react-router-dom";
-import h from "styled-components";
-import { useMainNav as g } from "./MainNavContext.js";
-import { Box as t } from "../Box/Box.js";
-import { VisuallyHidden as s } from "../VisuallyHidden/VisuallyHidden.js";
-import { Flex as f } from "../Flex/Flex.js";
-import { Typography as m } from "../Typography/Typography.js";
-const c = h.div`
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { NavLink as t } from "react-router-dom";
+import c from "styled-components";
+import { useMainNav as m } from "./MainNavContext.js";
+import { Box as e } from "../Box/Box.js";
+import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
+import { Flex as l } from "../Flex/Flex.js";
+import { Typography as s } from "../Typography/Typography.js";
+const h = c.div`
   svg,
   img {
     border-radius: ${({ theme: r }) => r.borderRadius};
@@ -16,34 +14,10 @@ const c = h.div`
     height: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
     width: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
   }
-`, u = h(o)`
+`, g = c(t)`
   text-decoration: unset;
   color: inherit;
-`, l = ({ workplace: r, title: a, icon: p, to: d }) => g() ? /* @__PURE__ */ i(t, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ i(c, { condensed: !0, children: /* @__PURE__ */ e(o, { to: d, children: [
-  p,
-  /* @__PURE__ */ e(s, { children: [
-    /* @__PURE__ */ i("span", { children: a }),
-    /* @__PURE__ */ i("span", { children: r })
-  ] })
-] }) }) }) : /* @__PURE__ */ i(t, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ e(f, { children: [
-  /* @__PURE__ */ i(c, { as: o, to: d, "aria-hidden": !0, tabIndex: -1, children: p }),
-  /* @__PURE__ */ e(t, { paddingLeft: 2, children: [
-    /* @__PURE__ */ i(m, { fontWeight: "bold", textColor: "neutral800", as: "span", children: /* @__PURE__ */ e(u, { to: d, children: [
-      a,
-      /* @__PURE__ */ i(s, { as: "span", children: r })
-    ] }) }),
-    /* @__PURE__ */ i(m, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })
-  ] })
-] }) });
-l.defaultProps = {
-  to: "/"
-};
-l.propTypes = {
-  icon: n.node.isRequired,
-  title: n.string.isRequired,
-  to: n.string,
-  workplace: n.string.isRequired
-};
+`, N = ({ workplace: r, title: o, icon: a, to: i = "/" }) => m() ? n(e, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: n(h, { condensed: !0, children: d(t, { to: i, children: [a, d(p, { children: [n("span", { children: o }), n("span", { children: r })] })] }) }) }) : n(e, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: d(l, { children: [n(h, { as: t, to: i, "aria-hidden": !0, tabIndex: -1, children: a }), d(e, { paddingLeft: 2, children: [n(s, { fontWeight: "bold", textColor: "neutral800", as: "span", children: d(g, { to: i, children: [o, n(p, { as: "span", children: r })] }) }), n(s, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })] })] }) });
 export {
-  l as NavBrand
+  N as NavBrand
 };

package/dist/MainNav/NavCondense.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const s=require("@strapi/icons"),d=require("prop-types"),a=require("styled-components"),u=require("./MainNavContext.cjs"),l=require("../Icon/Icon.cjs"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),o=e=>e&&e.__esModule?e:{default:e},h=o(d),p=o(a),g=p.default.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("@strapi/icons"),s=require("styled-components"),i=require("./MainNavContext.cjs"),d=require("../Icon/Icon.cjs"),a=require("../VisuallyHidden/VisuallyHidden.cjs"),u=e=>e&&e.__esModule?e:{default:e},l=u(s),c=l.default.button`
   background: ${({theme:e})=>e.colors.neutral0};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
   border-radius: ${({theme:e})=>e.borderRadius};
@@ -17,4 +17,4 @@
     width: ${6/16}rem;
     height: ${9/16}rem;
   }
-`,i=({children:e,...t})=>{const n=u.useMainNav();return r.jsxs(g,{as:"button",condensed:n,...t,children:[r.jsx(l.Icon,{as:n?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),r.jsx(c.VisuallyHidden,{children:e})]})};i.propTypes={children:h.default.string.isRequired};exports.NavCondense=i;
+`,h=({children:e,...t})=>{const r=i.useMainNav();return n.jsxs(c,{as:"button",condensed:r,...t,children:[n.jsx(d.Icon,{as:r?o.ChevronRight:o.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.jsx(a.VisuallyHidden,{children:e})]})};exports.NavCondense=h;

package/dist/MainNav/NavCondense.js

@@ -1,22 +1,20 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import "react";
-import { ChevronRight as n, ChevronLeft as s } from "@strapi/icons";
-import d from "prop-types";
-import a from "styled-components";
-import { useMainNav as m } from "./MainNavContext.js";
-import { Icon as p } from "../Icon/Icon.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { ChevronRight as i, ChevronLeft as s } from "@strapi/icons";
+import d from "styled-components";
+import { useMainNav as a } from "./MainNavContext.js";
+import { Icon as m } from "../Icon/Icon.js";
 import { VisuallyHidden as h } from "../VisuallyHidden/VisuallyHidden.js";
-const l = a.button`
-  background: ${({ theme: r }) => r.colors.neutral0};
-  border: 1px solid ${({ theme: r }) => r.colors.neutral150};
-  border-radius: ${({ theme: r }) => r.borderRadius};
+const l = d.button`
+  background: ${({ theme: e }) => e.colors.neutral0};
+  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
+  border-radius: ${({ theme: e }) => e.borderRadius};
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   bottom: ${(9 + 4) / 16}rem; // 9 is the height of the svg and 4 is the padding below
-  right: ${({ theme: r, condensed: e }) => e ? 0 : r.spaces[5]};
-  transform: ${({ condensed: r }) => r ? "translateX(50%)" : void 0};
+  right: ${({ theme: e, condensed: r }) => r ? 0 : e.spaces[5]};
+  transform: ${({ condensed: e }) => e ? "translateX(50%)" : void 0};
   z-index: 2;
   width: ${18 / 16}rem;
   height: ${25 / 16}rem;
@@ -25,16 +23,10 @@ const l = a.button`
     width: ${6 / 16}rem;
     height: ${9 / 16}rem;
   }
-`, c = ({ children: r, ...e }) => {
-  const o = m();
-  return /* @__PURE__ */ i(l, { as: "button", condensed: o, ...e, children: [
-    /* @__PURE__ */ t(p, { as: o ? n : s, "aria-hidden": !0, color: "neutral600" }),
-    /* @__PURE__ */ t(h, { children: r })
-  ] });
-};
-c.propTypes = {
-  children: d.string.isRequired
+`, b = ({ children: e, ...r }) => {
+  const o = a();
+  return n(l, { as: "button", condensed: o, ...r, children: [t(m, { as: o ? i : s, "aria-hidden": !0, color: "neutral600" }), t(h, { children: e })] });
 };
 export {
-  c as NavCondense
+  b as NavCondense
 };

package/dist/MainNav/NavFooter.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const t=require("prop-types"),s=require("../Box/Box.cjs"),i=e=>e&&e.__esModule?e:{default:e},u=i(t),o=({children:e})=>r.jsx(s.Box,{position:"relative",children:e});o.displayName="NavFooter";o.propTypes={children:u.default.node.isRequired};exports.NavFooter=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("../Box/Box.cjs"),r=({children:e})=>o.jsx(t.Box,{position:"relative",children:e});exports.NavFooter=r;

package/dist/MainNav/NavFooter.js

@@ -1,12 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import p from "prop-types";
-import { Box as i } from "../Box/Box.js";
-const o = ({ children: r }) => /* @__PURE__ */ e(i, { position: "relative", children: r });
-o.displayName = "NavFooter";
-o.propTypes = {
-  children: p.node.isRequired
-};
+import { jsx as r } from "react/jsx-runtime";
+import { Box as t } from "../Box/Box.js";
+const m = ({ children: o }) => r(t, { position: "relative", children: o });
 export {
-  o as NavFooter
+  m as NavFooter
 };

package/dist/MainNav/NavLink.cjs

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

package/dist/MainNav/NavLink.js

@@ -1,20 +1,18 @@
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import "react";
-import e from "prop-types";
-import { NavLink as g } from "react-router-dom";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { NavLink as u } from "react-router-dom";
 import s from "styled-components";
-import { useMainNav as f } from "./MainNavContext.js";
-import { Box as v } from "../Box/Box.js";
+import { useMainNav as $ } from "./MainNavContext.js";
+import { Box as g } from "../Box/Box.js";
 import { Typography as i } from "../Typography/Typography.js";
-import { Flex as $ } from "../Flex/Flex.js";
-import { Badge as b } from "../Badge/Badge.js";
-import { Tooltip as y } from "../Tooltip/Tooltip.js";
-const p = s(v)`
+import { Flex as m } from "../Flex/Flex.js";
+import { Badge as f } from "../Badge/Badge.js";
+import { Tooltip as v } from "../Tooltip/Tooltip.js";
+const c = s(g)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`, m = s(g)`
+`, p = s(u)`
   position: relative;
   text-decoration: none;
   display: block;
@@ -53,9 +51,9 @@ const p = s(v)`
       font-weight: 500;
     }
   }
-`, u = s($)`
+`, d = s(m)`
   padding: ${({ theme: r }) => `${r.spaces[2]} ${r.spaces[3]}`};
-`, h = s(b)`
+`, h = s(f)`
   ${({ theme: r, condensed: a }) => a && `
 	  position: absolute;
     // Values based on visual aspect 
@@ -77,27 +75,7 @@ const p = s(v)`
   padding: ${({ theme: r }) => `0 ${r.spaces[2]}`};
   border-radius: ${({ theme: r }) => r.spaces[10]};
   background: ${({ theme: r }) => r.colors.primary600};
-`, l = ({ children: r, icon: a, badgeContent: n, badgeAriaLabel: c, ...d }) => f() ? /* @__PURE__ */ o(y, { position: "right", label: r, children: /* @__PURE__ */ o(m, { ...d, children: /* @__PURE__ */ t(u, { as: "span", children: [
-  /* @__PURE__ */ o(p, { "aria-hidden": !0, paddingRight: 0, as: "span", children: a }),
-  n && /* @__PURE__ */ o(h, { condensed: !0, "aria-label": c, children: n })
-] }) }) }) : /* @__PURE__ */ o(m, { ...d, children: /* @__PURE__ */ t(u, { as: "span", justifyContent: "space-between", children: [
-  /* @__PURE__ */ t($, { children: [
-    /* @__PURE__ */ o(p, { "aria-hidden": !0, paddingRight: 3, as: "span", children: a }),
-    /* @__PURE__ */ o(i, { children: r })
-  ] }),
-  n && /* @__PURE__ */ o(h, { 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.node.isRequired,
-  icon: e.node.isRequired
-};
+`, M = ({ children: r, icon: a, badgeContent: e, badgeAriaLabel: t, ...l }) => $() ? o(v, { position: "right", label: r, children: o(p, { ...l, children: n(d, { as: "span", children: [o(c, { "aria-hidden": !0, paddingRight: 0, as: "span", children: a }), e && o(h, { condensed: !0, "aria-label": t, children: e })] }) }) }) : o(p, { ...l, children: n(d, { as: "span", justifyContent: "space-between", children: [n(m, { children: [o(c, { "aria-hidden": !0, paddingRight: 3, as: "span", children: a }), o(i, { children: r })] }), e && o(h, { justifyContent: "center", "aria-label": t, children: e })] }) });
 export {
-  l as NavLink
+  M as NavLink
 };

package/dist/MainNav/NavSection.cjs

@@ -1 +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"),h=require("../Divider/Divider.cjs"),i=require("../Flex/Flex.cjs"),l=require("../Box/Box.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,spacing:a=2,horizontal:r=!1,...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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),x=require("./MainNavContext.cjs"),g=require("../Divider/Divider.cjs"),r=require("../Flex/Flex.cjs"),l=require("../Box/Box.cjs"),p=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Typography/Typography.cjs"),m=n=>n&&n.__esModule?n:{default:n},o=m(u),j=({label:n,children:a,spacing:d=2,horizontal:t=!1,...c})=>x.useMainNav()?e.jsxs(r.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(g.Divider,{}),e.jsx(p.VisuallyHidden,{children:e.jsx("span",{children:n})})]}),e.jsx(r.Flex,{as:"ul",gap:d,direction:t?"row":"column",alignItems:t?"center":"stretch",...c,children:o.default.Children.map(a,(i,s)=>e.jsx("li",{children:i},s))})]}):e.jsxs(r.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(h.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e.jsx(r.Flex,{as:"ul",gap:d,direction:t?"row":"column",alignItems:t?"center":"stretch",...c,children:o.default.Children.map(a,(i,s)=>e.jsx("li",{children:i},s))})]});exports.NavSection=j;