@strapi/design-system 1.7.6 → 1.7.8

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,32 +1,30 @@
-import { jsxs as c, jsx as l } from "react/jsx-runtime";
-import L from "react";
-import t from "prop-types";
-import a from "styled-components";
-import { sizes as j } from "../themes/sizes.js";
-import { inputFocusStyle as q } from "../themes/utils.js";
-import { Box as z } from "../Box/Box.js";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import R from "react";
+import i from "styled-components";
+import { inputFocusStyle as T } from "../themes/utils.js";
+import { Box as L } from "../Box/Box.js";
 import { Flex as W } from "../Flex/Flex.js";
-import { useField as S } from "../Field/FieldContext.js";
-import { VisuallyHidden as B } from "../VisuallyHidden/VisuallyHidden.js";
+import { useField as j } from "../Field/FieldContext.js";
+import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
 import { Typography as h } from "../Typography/Typography.js";
-const F = a.label`
+const B = i.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`, I = a(z)`
+`, S = i(L)`
   cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${q()}
-`, g = a(W).attrs({
+  ${T()}
+`, g = i(W).attrs({
   hasRadius: !0
 })`
-  background-color: ${({ theme: e, checked: n, disabled: i }) => n ? i ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
+  background-color: ${({ theme: e, checked: o, disabled: n }) => o ? n ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
   border: 1px solid
-    ${({ theme: e, checked: n, disabled: i }) => n && n !== null ? i ? e.colors.neutral300 : e.colors.neutral200 : i ? e.colors.neutral150 : e.colors.neutral100};
+    ${({ theme: e, checked: o, disabled: n }) => o && o !== null ? n ? e.colors.neutral300 : e.colors.neutral200 : n ? e.colors.neutral150 : e.colors.neutral100};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -38,7 +36,7 @@ const F = a.label`
   */
   padding-top: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
   padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
-`, M = a.input`
+`, F = i.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -46,110 +44,16 @@ const F = a.label`
   top: 0;
   z-index: 1;
   width: 100%;
-`, u = L.forwardRef(
-  ({ size: e, onLabel: n, offLabel: i, children: b, checked: r, disabled: o, onChange: x, ...m }, y) => {
-    const { error: C, hint: w, id: d, name: v, required: $ } = S(), f = "neutral600";
-    let k = !r && r !== null ? "danger700" : f, R = r ? "primary600" : f;
-    const T = (p) => {
-      o || x(p);
-    };
-    let s;
-    return C ? s = `${d}-error` : w && (s = `${d}-hint`), /* @__PURE__ */ c(F, { children: [
-      /* @__PURE__ */ l(B, { children: b }),
-      /* @__PURE__ */ c(
-        I,
-        {
-          hasRadius: !0,
-          disabled: o,
-          padding: 1,
-          display: "flex",
-          background: o ? "neutral150" : "neutral100",
-          borderStyle: "solid",
-          borderWidth: "1px",
-          borderColor: "neutral200",
-          children: [
-            /* @__PURE__ */ l(
-              g,
-              {
-                size: e,
-                paddingLeft: 3,
-                paddingRight: 3,
-                justifyContent: "center",
-                alignItems: "center",
-                "aria-hidden": !0,
-                checked: r === null ? !1 : !r,
-                disabled: o,
-                children: /* @__PURE__ */ l(
-                  h,
-                  {
-                    variant: "pi",
-                    fontWeight: "bold",
-                    textTransform: "uppercase",
-                    textColor: o ? "neutral700" : k,
-                    children: i
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ l(
-              g,
-              {
-                size: e,
-                paddingLeft: 3,
-                paddingRight: 3,
-                justifyContent: "center",
-                alignItems: "center",
-                "aria-hidden": !0,
-                checked: r === null ? !1 : r,
-                disabled: o,
-                children: /* @__PURE__ */ l(
-                  h,
-                  {
-                    variant: "pi",
-                    fontWeight: "bold",
-                    textTransform: "uppercase",
-                    textColor: o ? "neutral700" : R,
-                    children: n
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ l(
-              M,
-              {
-                type: "checkbox",
-                "aria-disabled": o,
-                "aria-describedby": s,
-                onChange: (p) => T(p),
-                name: v,
-                ref: y,
-                "aria-required": $,
-                ...m,
-                checked: !(r === null || !r)
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-);
-u.displayName = "ToggleCheckbox";
-u.defaultProps = {
-  disabled: !1,
-  checked: !1,
-  onChange: void 0,
-  size: "M"
-};
-u.propTypes = {
-  checked: t.bool,
-  children: t.string.isRequired,
-  disabled: t.bool,
-  offLabel: t.string.isRequired,
-  onChange: t.func,
-  onLabel: t.string.isRequired,
-  size: t.oneOf(Object.keys(j.input))
-};
+`, I = R.forwardRef(({ size: e = "M", onLabel: o, offLabel: n, children: x, checked: r = !1, disabled: t = !1, onChange: s, ...b }, m) => {
+  const { error: d, hint: y, id: p, name: w, required: C } = j(), f = "neutral600";
+  let $ = !r && r !== null ? "danger700" : f, v = r ? "primary600" : f;
+  const k = (u) => {
+    t || s && s(u);
+  };
+  let l;
+  return d ? l = `${p}-error` : y && (l = `${p}-hint`), c(B, { children: [a(z, { children: x }), c(S, { hasRadius: !0, disabled: t, padding: 1, display: "flex", background: t ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", hasError: !!d, children: [a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : !r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : $, children: n }) }), a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : v, children: o }) }), a(F, { type: "checkbox", "aria-disabled": t, "aria-describedby": l, onChange: (u) => k(u), name: w, ref: m, "aria-required": C, ...b, checked: !(r === null || !r) })] })] });
+});
+I.displayName = "ToggleCheckbox";
 export {
-  u as ToggleCheckbox
+  I as ToggleCheckbox
 };

package/dist/ToggleInput/ToggleInput.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const T=require("prop-types"),j=require("styled-components"),y=require("../hooks/useId.cjs"),m=require("../themes/sizes.cjs"),v=require("../ToggleCheckbox/ToggleCheckbox.cjs"),I=require("../Field/Field.cjs"),_=require("../TextButton/TextButton.cjs"),u=require("../Flex/Flex.cjs"),k=require("../Field/FieldLabel.cjs"),C=require("../Field/FieldHint.cjs"),O=require("../Field/FieldError.cjs"),a=l=>l&&l.__esModule?l:{default:l},e=a(T),c=a(j),z=c.default(I.Field)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("styled-components"),p=require("../hooks/useId.cjs"),m=require("../ToggleCheckbox/ToggleCheckbox.cjs"),T=require("../Field/Field.cjs"),I=require("../TextButton/TextButton.cjs"),o=require("../Flex/Flex.cjs"),y=require("../Field/FieldLabel.cjs"),_=require("../Field/FieldHint.cjs"),b=require("../Field/FieldError.cjs"),k=t=>t&&t.__esModule?t:{default:t},d=k(j),B=d.default(T.Field)`
   max-width: 320px;
-`,P=c.default(_.TextButton)`
+`,C=d.default(I.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,r=({disabled:l,size:f,error:g,hint:p,label:i,name:x,labelAction:b,required:q,id:h,onClear:d,clearLabel:n,checked:o,...F})=>{const s=y.useId(h);return t.jsx(z,{name:x,hint:p,error:g,id:s,required:q,children:t.jsxs(u.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsxs(u.Flex,{children:[t.jsx(k.FieldLabel,{action:b,children:i}),n&&d&&o!==null&&!l&&t.jsx(P,{onClick:d,children:n})]}),t.jsx(v.ToggleCheckbox,{id:s,size:f,checked:o,disabled:l,...F,children:i}),t.jsx(C.FieldHint,{}),t.jsx(O.FieldError,{})]})})};r.displayName="ToggleInput";r.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};r.propTypes={checked:e.default.bool,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.node,name:e.default.string,onClear:e.default.func,required:e.default.bool,size:e.default.oneOf(Object.keys(m.sizes.input))};exports.ToggleInput=r;
+`,u=({disabled:t=!1,size:c="M",error:a,hint:x,label:r,name:g,labelAction:f,required:F=!1,id:h,onClear:i,clearLabel:n,checked:l=!1,...q})=>{const s=p.useId(h);return e.jsx(B,{name:g,hint:x,error:a,id:s,required:F,children:e.jsxs(o.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsxs(o.Flex,{children:[e.jsx(y.FieldLabel,{action:f,children:r}),n&&i&&l!==null&&!t&&e.jsx(C,{onClick:i,children:n})]}),e.jsx(m.ToggleCheckbox,{id:s,size:c,checked:l,disabled:t,...q,children:r}),e.jsx(_.FieldHint,{}),e.jsx(b.FieldError,{})]})})};u.displayName="ToggleInput";exports.ToggleInput=u;

package/dist/ToggleInput/ToggleInput.js

@@ -1,76 +1,23 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import "react";
-import e from "prop-types";
-import a from "styled-components";
-import { useId as T } from "../hooks/useId.js";
-import { sizes as v } from "../themes/sizes.js";
-import { ToggleCheckbox as F } from "../ToggleCheckbox/ToggleCheckbox.js";
-import { Field as I } from "../Field/Field.js";
-import { TextButton as k } from "../TextButton/TextButton.js";
-import { Flex as p } from "../Flex/Flex.js";
-import { FieldLabel as C } from "../Field/FieldLabel.js";
-import { FieldHint as O } from "../Field/FieldHint.js";
-import { FieldError as j } from "../Field/FieldError.js";
-const z = a(I)`
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import p from "styled-components";
+import { useId as F } from "../hooks/useId.js";
+import { ToggleCheckbox as I } from "../ToggleCheckbox/ToggleCheckbox.js";
+import { Field as T } from "../Field/Field.js";
+import { TextButton as j } from "../TextButton/TextButton.js";
+import { Flex as d } from "../Flex/Flex.js";
+import { FieldLabel as k } from "../Field/FieldLabel.js";
+import { FieldHint as y } from "../Field/FieldHint.js";
+import { FieldError as B } from "../Field/FieldError.js";
+const C = p(T)`
   max-width: 320px;
-`, q = a(k)`
+`, q = p(j)`
   align-self: flex-end;
   margin-left: auto;
-`, r = ({
-  disabled: i,
-  size: c,
-  error: f,
-  hint: g,
-  label: t,
-  name: u,
-  labelAction: h,
-  required: b,
-  id: x,
-  onClear: n,
-  clearLabel: l,
-  checked: d,
-  ...y
-}) => {
-  const m = T(x);
-  return /* @__PURE__ */ o(z, { name: u, hint: g, error: f, id: m, required: b, children: /* @__PURE__ */ s(p, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ o(C, { action: h, children: t }),
-      l && n && d !== null && !i && /* @__PURE__ */ o(q, { onClick: n, children: l })
-    ] }),
-    /* @__PURE__ */ o(F, { id: m, size: c, checked: d, disabled: i, ...y, children: t }),
-    /* @__PURE__ */ o(O, {}),
-    /* @__PURE__ */ o(j, {})
-  ] }) });
-};
-r.displayName = "ToggleInput";
-r.defaultProps = {
-  checked: !1,
-  clearLabel: void 0,
-  disabled: !1,
-  error: void 0,
-  hint: void 0,
-  id: void 0,
-  label: "",
-  labelAction: void 0,
-  name: "",
-  onClear: void 0,
-  required: !1,
-  size: "M"
-};
-r.propTypes = {
-  checked: e.bool,
-  clearLabel: e.string,
-  disabled: e.bool,
-  error: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  id: e.string,
-  label: e.string,
-  labelAction: e.node,
-  name: e.string,
-  onClear: e.func,
-  required: e.bool,
-  size: e.oneOf(Object.keys(v.input))
+`, w = ({ disabled: e = !1, size: s = "M", error: f, hint: c, label: o, name: a, labelAction: g, required: h = !1, id: u, onClear: i, clearLabel: t, checked: n = !1, ...x }) => {
+  const l = F(u);
+  return r(C, { name: a, hint: c, error: f, id: l, required: h, children: m(d, { direction: "column", alignItems: "stretch", gap: 1, children: [m(d, { children: [r(k, { action: g, children: o }), t && i && n !== null && !e && r(q, { onClick: i, children: t })] }), r(I, { id: l, size: s, checked: n, disabled: e, ...x, children: o }), r(y, {}), r(B, {})] }) });
 };
+w.displayName = "ToggleInput";
 export {
-  r as ToggleInput
+  w as ToggleInput
 };

package/dist/Typography/Typography.cjs

@@ -6,7 +6,7 @@
   // overwrite a variant attribute
   font-weight: ${({theme:e,fontWeight:t})=>r.extractStyleFromTheme(e.fontWeights,t,void 0)};
   font-size: ${({theme:e,fontSize:t})=>r.extractStyleFromTheme(e.fontSizes,t,void 0)};
-  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,void 0)};
+  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,t)};
   color: ${o.handleColor};
   text-align: ${({textAlign:e})=>e};
   text-decoration: ${({textDecoration:e})=>e};

package/dist/Typography/Typography.js

@@ -1,25 +1,25 @@
-import i from "styled-components";
-import { variantStyle as r, ellipsisStyle as n, handleColor as a } from "./utils.js";
+import r from "styled-components";
+import { variantStyle as i, ellipsisStyle as n, handleColor as a } from "./utils.js";
 import { extractStyleFromTheme as o } from "../helpers/theme.js";
 const s = {
   fontSize: !0,
   fontWeight: !0
-}, d = i.span.withConfig({
+}, m = r.span.withConfig({
   shouldForwardProp: (t, e) => !s[t] && e(t)
 })`
-  ${r}
+  ${i}
   ${n}
 
   // These properties need to come after {variantStyle}, because they might
   // overwrite a variant attribute
   font-weight: ${({ theme: t, fontWeight: e }) => o(t.fontWeights, e, void 0)};
   font-size: ${({ theme: t, fontSize: e }) => o(t.fontSizes, e, void 0)};
-  line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, void 0)};
+  line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, e)};
   color: ${a};
   text-align: ${({ textAlign: t }) => t};
   text-decoration: ${({ textDecoration: t }) => t};
   text-transform: ${({ textTransform: t }) => t};
 `;
 export {
-  d as Typography
+  m as Typography
 };

package/dist/hooks/useControllableState.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@strapi/ui-primitives");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,l=typeof e=="function"?e(t):e,d=r?l:t,a=f.useCallbackRef(n),b=u.useCallback(s=>{if(r){const i=typeof s=="function"?s(l):s;i!==l&&(a(i),c(s))}else c(s)},[r,l,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=f.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@strapi/ui-primitives");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,l=e instanceof Function?e(t):e,d=r?l:t,a=f.useCallbackRef(n),b=u.useCallback(s=>{if(r){const i=typeof s=="function"?s(l):s;i!==l&&(a(i),c(s))}else c(s)},[r,l,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=f.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;

package/dist/hooks/useControllableState.js

@@ -1,14 +1,14 @@
 import * as r from "react";
 import { useCallbackRef as i } from "@strapi/ui-primitives";
-function R({ prop: n, defaultProp: u, onChange: c = () => {
+function S({ prop: n, defaultProp: u, onChange: c = () => {
 } }) {
-  const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = typeof n == "function" ? n(t) : n, d = o ? l : t, f = i(c), C = r.useCallback((s) => {
+  const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = n instanceof Function ? n(t) : n, d = o ? l : t, a = i(c), C = r.useCallback((s) => {
     if (o) {
-      const a = typeof s == "function" ? s(l) : s;
-      a !== l && (f(a), e(s));
+      const f = typeof s == "function" ? s(l) : s;
+      f !== l && (a(f), e(s));
     } else
       e(s);
-  }, [o, l, e, f]);
+  }, [o, l, e, a]);
   return [d, C];
 }
 function m({ defaultProp: n, onChange: u }) {
@@ -18,5 +18,5 @@ function m({ defaultProp: n, onChange: u }) {
   }, [t, e, o]), c;
 }
 export {
-  R as useControllableState
+  S as useControllableState
 };

package/dist/themes/utils.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=t=>({theme:o,size:r})=>o.sizes[t][r],s=(t="&")=>({theme:o,hasError:r})=>e.css`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),s=t=>({theme:o,size:r})=>o.sizes[t][r],i=(t="&")=>({theme:o,hasError:r=!1})=>e.css`
       outline: none;
       box-shadow: 0;
       transition-property: border-color, box-shadow, fill;
@@ -38,4 +38,4 @@
       border: 2px solid ${t.colors.primary600};
     }
   }
-`;exports.buttonFocusStyle=n;exports.getThemeSize=i;exports.inputFocusStyle=s;
+`;exports.buttonFocusStyle=n;exports.getThemeSize=s;exports.inputFocusStyle=i;

package/dist/themes/utils.js

@@ -1,5 +1,5 @@
 import { css as i } from "styled-components";
-const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r }) => i`
+const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r = !1 }) => i`
       outline: none;
       box-shadow: 0;
       transition-property: border-color, box-shadow, fill;

package/dist/v2/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/v2/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/v2/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/v2/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/v2/MainNav/NavBrand.cjs

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

package/dist/v2/MainNav/NavBrand.js

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

package/dist/v2/MainNav/NavCondense.cjs

@@ -1,10 +1,7 @@
-"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("../../Flex/Flex.cjs"),a=require("../../Icon/Icon.cjs"),u=require("../../VisuallyHidden/VisuallyHidden.cjs"),l=e=>e&&e.__esModule?e:{default:e},c=l(s),h=c.default(d.Flex).attrs(e=>({justifyContent:"center",...e}))`
   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:e,condensed:t})=>t?0:e.spaces[5]};
@@ -17,4 +14,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;
+`,g=({children:e,...t})=>{const r=i.useMainNav();return n.jsxs(h,{as:"button",condensed:r,...t,children:[n.jsx(a.Icon,{as:r?o.ChevronRight:o.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.jsx(u.VisuallyHidden,{children:e})]})};exports.NavCondense=g;

package/dist/v2/MainNav/NavCondense.js

@@ -1,18 +1,17 @@
-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 { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
-const l = a.button`
+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 { Flex as m } from "../../Flex/Flex.js";
+import { Icon as h } from "../../Icon/Icon.js";
+import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
+const c = d(m).attrs((r) => ({
+  justifyContent: "center",
+  ...r
+}))`
   background: ${({ theme: r }) => r.colors.neutral0};
   border: 1px solid ${({ theme: r }) => r.colors.neutral150};
   border-radius: ${({ theme: r }) => r.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]};
@@ -25,16 +24,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
+`, x = ({ children: r, ...e }) => {
+  const o = a();
+  return n(c, { as: "button", condensed: o, ...e, children: [t(h, { as: o ? i : s, "aria-hidden": !0, color: "neutral600" }), t(l, { children: r })] });
 };
 export {
-  c as NavCondense
+  x as NavCondense
 };

package/dist/v2/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;