@strapi/design-system 1.8.0 → 1.8.2

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),U=require("react"),d=require("@internationalized/date"),A=require("styled-components"),G=require("../DatePicker/DatePicker.cjs"),J=require("../DesignSystemProvider.cjs"),K=require("../hooks/useControllableState.cjs"),N=require("../hooks/useDateFormatter.cjs"),x=require("../hooks/useId.cjs"),Q=require("../TimePicker/TimePicker.cjs"),W=require("../Field/Field.cjs"),j=require("../Flex/Flex.cjs"),X=require("../Field/FieldLabel.cjs"),k=require("../VisuallyHidden/VisuallyHidden.cjs"),Y=require("../Field/FieldHint.cjs"),ee=require("../Field/FieldError.cjs"),S=i=>i&&i.__esModule?i:{default:i},te=S(U),L=S(A),ne=({ariaLabel:i,clearLabel:c="clear",dateLabel:h="Choose date",timeLabel:o="Choose time",disabled:b=!1,error:D,hint:_,id:$,label:w,labelAction:V,onChange:q,onClear:u,name:H,required:p=!1,selectButtonTitle:se,size:I="M",step:R,value:T,initialDate:F,...v})=>{const C=te.default.useRef(null),[n,m]=K.useControllableState({defaultProp:F?a(F,!1):void 0,prop:T?a(T,!1):T??void 0,onChange(e){q&&q(e?.toDate(d.getLocalTimeZone()))}}),M=J.useDesignSystem("DateTimePicker"),Z=N.useDateFormatter(M.locale,{hour:"2-digit",minute:"2-digit",hour12:!1}),l=n?Z.format(n.toDate(d.getLocalTimeZone())):"",z=e=>{let r=e?a(e):void 0;if(!(r&&n&&r.compare(n)===0)){if(l&&r){const[f,g]=l.split(":");r=r.set({hour:parseInt(f,10),minute:parseInt(g,10)})}m(r)}},B=e=>{if(!e)return;const[r,f]=e.split(":"),g=n?n.set({hour:parseInt(r,10),minute:parseInt(f,10)}):a(new Date).set({hour:parseInt(r,10),minute:parseInt(f,10)});m(g)},E=e=>{m(void 0),u&&u(e)},O=()=>{const e=n?n.set({hour:0,minute:0}):a(new Date);m(e)},s=x.useId($),y=x.useId(),P=x.useId();return t.jsx(W.Field,{name:H,as:"fieldset",id:s,"aria-labelledby":s,hint:_,error:D,required:p,children:t.jsxs(j.Flex,{as:"span",direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(X.FieldLabel,{onClick:()=>{C.current.focus()},as:"legend",id:s,action:V,children:w}),t.jsxs(j.Flex,{flex:"1",gap:1,children:[t.jsx(k.VisuallyHidden,{as:"label",htmlFor:P,children:h}),t.jsx(re,{...v,selectedDate:n?.toDate(d.getLocalTimeZone()),onChange:z,error:typeof D=="string",required:p,size:I,onClear:u?E:void 0,clearLabel:`${c} date`,disabled:b,id:P,ref:C,"aria-describedby":`${s}-hint ${s}-error`}),t.jsx(k.VisuallyHidden,{as:"label",htmlFor:y,children:o}),t.jsx(ie,{size:I,error:typeof D=="string",value:l,onChange:B,onClear:u&&l!==void 0&&l!=="00:00"?O:void 0,clearLabel:`${c} time`,required:p,disabled:b,step:R,id:y,"aria-describedby":`${s}-hint ${s}-error`})]}),t.jsx(Y.FieldHint,{}),t.jsx(ee.FieldError,{})]})})},a=(i,c=!0)=>{const h=i.toISOString();let o=d.parseAbsoluteToLocal(h);return c&&(o=o.set({hour:0,minute:0})),d.toCalendarDateTime(o)},re=L.default(G.DatePickerInput)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),E=require("react"),d=require("@internationalized/date"),U=require("styled-components"),A=require("../DatePicker/DatePicker.cjs"),G=require("../DesignSystemProvider.cjs"),J=require("../helpers/deprecations.cjs"),K=require("../hooks/useControllableState.cjs"),Q=require("../hooks/useDateFormatter.cjs"),x=require("../hooks/useId.cjs"),W=require("../TimePicker/TimePicker.cjs"),X=require("../Field/Field.cjs"),P=require("../Flex/Flex.cjs"),Y=require("../Field/FieldLabel.cjs"),j=require("../VisuallyHidden/VisuallyHidden.cjs"),ee=require("../Field/FieldHint.cjs"),te=require("../Field/FieldError.cjs"),w=e=>e&&e.__esModule?e:{default:e},ne=w(E),S=w(U),re=({ariaLabel:e,clearLabel:u="clear",dateLabel:D="Choose date",timeLabel:o="Choose time",disabled:l=!1,error:p,hint:L,id:_,label:V,labelAction:H,onChange:q,onClear:m,name:R,required:g=!1,selectButtonTitle:oe,size:I="M",step:$,value:T,initialDate:y,...v})=>{const F=ne.default.useRef(null),[r,f]=K.useControllableState({defaultProp:y?a(y,!1):void 0,prop:T?a(T,!1):T??void 0,onChange(t){q&&q(t?.toDate(d.getLocalTimeZone()))}}),M=G.useDesignSystem("DateTimePicker"),N=Q.useDateFormatter(M.locale,{hour:"2-digit",minute:"2-digit",hour12:!1}),c=r?N.format(r.toDate(d.getLocalTimeZone())):"",O=t=>{let i=t?a(t):void 0;if(!(i&&r&&i.compare(r)===0)){if(c&&i){const[h,b]=c.split(":");i=i.set({hour:parseInt(h,10),minute:parseInt(b,10)})}f(i)}},Z=t=>{if(!t)return;const[i,h]=t.split(":"),b=r?r.set({hour:parseInt(i,10),minute:parseInt(h,10)}):a(new Date).set({hour:parseInt(i,10),minute:parseInt(h,10)});f(b)},z=t=>{f(void 0),m&&m(t)},B=()=>{const t=r?r.set({hour:0,minute:0}):a(new Date);f(t)},s=x.useId(_),k=x.useId(),C=x.useId();return n.jsx(X.Field,{name:R,as:"fieldset",id:s,"aria-labelledby":s,hint:L,error:p,required:g,children:n.jsxs(P.Flex,{as:"span",direction:"column",alignItems:"stretch",gap:1,children:[n.jsx(Y.FieldLabel,{onClick:()=>{F.current.focus()},as:"legend",id:s,action:H,children:V}),n.jsxs(P.Flex,{flex:"1",gap:1,children:[n.jsx(j.VisuallyHidden,{as:"label",htmlFor:C,children:D}),n.jsx(se,{...v,selectedDate:r?.toDate(d.getLocalTimeZone()),onChange:O,error:typeof p=="string",required:g,size:I,onClear:m?z:void 0,clearLabel:`${u} date`,disabled:l,id:C,ref:F,"aria-describedby":`${s}-hint ${s}-error`}),n.jsx(j.VisuallyHidden,{as:"label",htmlFor:k,children:o}),n.jsx(ae,{size:I,error:typeof p=="string",value:c,onChange:Z,onClear:m&&c!==void 0&&c!=="00:00"?B:void 0,clearLabel:`${u} time`,required:g,disabled:l,step:$,id:k,"aria-describedby":`${s}-hint ${s}-error`})]}),n.jsx(ee.FieldHint,{}),n.jsx(te.FieldError,{})]})})},ie=J.once(console.warn),a=(e,u=!0)=>{if(typeof e=="string"){ie("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 l=Date.parse(e);Number.isNaN(l)?e=new Date:e=new Date(l)}const D=e.toISOString();let o=d.parseAbsoluteToLocal(D);return u&&(o=o.set({hour:0,minute:0})),d.toCalendarDateTime(o)},se=S.default(A.DatePickerInput)`
   flex: 1 1 70%;
   min-width: 120px;
-`,ie=L.default(Q.TimePickerInput)`
+`,ae=S.default(W.TimePickerInput)`
   flex: 1 1 30%;
   min-width: 120px;
-`;exports.DateTimePicker=ne;exports.convertUTCDateToCalendarDateTime=a;
+`;exports.DateTimePicker=re;exports.convertUTCDateToCalendarDateTime=a;

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,94 +1,100 @@
-import { jsx as i, jsxs as w } from "react/jsx-runtime";
-import Z from "react";
-import { getLocalTimeZone as g, parseAbsoluteToLocal as v, toCalendarDateTime as G } from "@internationalized/date";
+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 J } from "../DatePicker/DatePicker.js";
-import { useDesignSystem as K } from "../DesignSystemProvider.js";
-import { useControllableState as N } from "../hooks/useControllableState.js";
-import { useDateFormatter as Q } from "../hooks/useDateFormatter.js";
-import { useId as T } from "../hooks/useId.js";
-import { TimePickerInput as W } from "../TimePicker/TimePicker.js";
-import { Field as X } from "../Field/Field.js";
+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 Y } from "../Field/FieldLabel.js";
+import { FieldLabel as ee } from "../Field/FieldLabel.js";
 import { VisuallyHidden as S } from "../VisuallyHidden/VisuallyHidden.js";
-import { FieldHint as ee } from "../Field/FieldHint.js";
-import { FieldError as te } from "../Field/FieldError.js";
-const Ce = ({
+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: b,
-  clearLabel: l = "clear",
-  dateLabel: u = "Choose date",
-  timeLabel: n = "Choose time",
-  disabled: I = !1,
-  error: f,
+  ariaLabel: n,
+  clearLabel: d = "clear",
+  dateLabel: p = "Choose date",
+  timeLabel: a = "Choose time",
+  disabled: s = !1,
+  error: h,
   hint: V,
   id: _,
-  label: R,
-  labelAction: j,
-  onChange: C,
-  onClear: d,
-  name: z,
-  required: p = !1,
+  label: N,
+  labelAction: R,
+  onChange: k,
+  onClear: c,
+  name: j,
+  required: D = !1,
   /**
    * @preserve
    * @deprecated This is no longer used.
    */
-  selectButtonTitle: oe,
-  size: x = "M",
-  step: B,
-  value: h,
-  initialDate: F,
-  ...H
+  selectButtonTitle: ae,
+  size: C = "M",
+  step: z,
+  value: g,
+  initialDate: w,
+  ...B
 }) => {
-  const k = Z.useRef(null), [t, m] = N({
-    defaultProp: F ? s(F, !1) : void 0,
-    prop: h ? s(h, !1) : h ?? void 0,
+  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) {
-      C && C(e?.toDate(g()));
+      k && k(e?.toDate(b()));
     }
-  }), q = K("DateTimePicker"), A = Q(q.locale, {
+  }), H = J("DateTimePicker"), O = W(H.locale, {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !1
-  }), a = t ? A.format(t.toDate(g())) : "", E = (e) => {
-    let r = e ? s(e) : void 0;
+  }), l = t ? O.format(t.toDate(b())) : "", q = (e) => {
+    let r = e ? m(e) : void 0;
     if (!(r && t && r.compare(t) === 0)) {
-      if (a && r) {
-        const [c, D] = a.split(":");
-        r = r.set({ hour: parseInt(c, 10), minute: parseInt(D, 10) });
+      if (l && r) {
+        const [u, T] = l.split(":");
+        r = r.set({ hour: parseInt(u, 10), minute: parseInt(T, 10) });
       }
-      m(r);
+      f(r);
     }
-  }, M = (e) => {
+  }, A = (e) => {
     if (!e)
       return;
-    const [r, c] = e.split(":"), D = t ? t.set({ hour: parseInt(r, 10), minute: parseInt(c, 10) }) : s(/* @__PURE__ */ new Date()).set({ hour: parseInt(r, 10), minute: parseInt(c, 10) });
-    m(D);
-  }, O = (e) => {
-    m(void 0), d && d(e);
-  }, U = () => {
-    const e = t ? t.set({ hour: 0, minute: 0 }) : s(/* @__PURE__ */ new Date());
-    m(e);
-  }, o = T(_), y = T(), P = T();
-  return i(X, { name: z, as: "fieldset", id: o, "aria-labelledby": o, hint: V, error: f, required: p, children: w(L, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [i(Y, { onClick: () => {
-    k.current.focus();
-  }, as: "legend", id: o, action: j, children: R }), w(L, { flex: "1", gap: 1, children: [i(S, { as: "label", htmlFor: P, children: u }), i(re, { ...H, selectedDate: t?.toDate(g()), onChange: E, error: typeof f == "string", required: p, size: x, onClear: d ? O : void 0, clearLabel: `${l} date`, disabled: I, id: P, ref: k, "aria-describedby": `${o}-hint ${o}-error` }), i(S, { as: "label", htmlFor: y, children: n }), i(ie, { size: x, error: typeof f == "string", value: a, onChange: M, onClear: d && a !== void 0 && a !== "00:00" ? U : void 0, clearLabel: `${l} time`, required: p, disabled: I, step: B, id: y, "aria-describedby": `${o}-hint ${o}-error` })] }), i(ee, {}), i(te, {})] }) });
-}, s = (b, l = !0) => {
-  const u = b.toISOString();
-  let n = v(u);
-  return l && (n = n.set({ hour: 0, minute: 0 })), G(n);
-}, re = $(J)`
+    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;
-`, ie = $(W)`
+`, ne = $(X)`
   flex: 1 1 30%;
   min-width: 120px;
 `;
 export {
-  Ce as DateTimePicker,
-  s as convertUTCDateToCalendarDateTime
+  xe as DateTimePicker,
+  m as convertUTCDateToCalendarDateTime
 };

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
 };