@strapi/design-system 1.3.1-alpha.0 → 1.3.1

package/dist/Tooltip/Tooltip.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),q=require("prop-types"),v=require("styled-components"),j=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),_=require("../Portal/Portal.cjs"),H=require("./hooks/useTooltipHandlers.cjs"),P=require("./hooks/useTooltipLayout.cjs"),n=require("../helpers/useId.cjs"),E=require("../VisuallyHidden/VisuallyHidden.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(m),o=r(q),I=r(v),R=I.default(j.Box)`
+"use strict";var E=Object.defineProperty;var r=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var g=(e,o,t)=>o in e?E(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,n=(e,o)=>{for(var t in o||(o={}))T.call(o,t)&&g(e,t,o[t]);if(r)for(var t of r(o))b.call(o,t)&&g(e,t,o[t]);return e};var u=(e,o)=>{var t={};for(var l in e)T.call(e,l)&&o.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&r)for(var l of r(e))o.indexOf(l)<0&&b.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("react"),R=require("prop-types"),B=require("styled-components"),L=require("../Box/Box.cjs"),V=require("../Typography/Typography.cjs"),k=require("../Portal/Portal.cjs"),M=require("./hooks/useTooltipHandlers.cjs"),S=require("./hooks/useTooltipLayout.cjs"),h=require("../helpers/useId.cjs"),W=require("../VisuallyHidden/VisuallyHidden.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=p(I),i=p(R),z=p(B),C=z.default(L.Box)`
   position: absolute;
   /* z-index exist because of its position inside Modals */
   z-index: 4;
   display: ${({visible:e})=>e?"revert":"none"};
-`,a=({children:e,label:d,description:l,delay:u,position:p,id:c,...f})=>{const s=n.useId("tooltip",c),y=n.useId("description"),{visible:i,...g}=H.useTooltipHandlers(u),{tooltipWrapperRef:T,toggleSourceRef:b}=P.useTooltipLayout(i,p),h=t.default.cloneElement(e,{tabIndex:0,"aria-labelledby":d?s:void 0,"aria-describedby":l?s:void 0,...g});return t.default.createElement(t.default.Fragment,null,t.default.createElement(_.Portal,null,t.default.createElement(R,{id:s,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:T,visible:i,...f},i&&t.default.createElement(E.VisuallyHidden,{id:y},l),t.default.createElement(x.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0"},d||l))),t.default.createElement("span",{ref:b},h))};a.defaultProps={delay:500,id:void 0,position:"top",label:void 0,description:void 0};a.propTypes={children:o.default.node.isRequired,delay:o.default.number,description:o.default.string,id:o.default.string,label:o.default.string,position:o.default.oneOf(["top","left","bottom","right"])};exports.Tooltip=a;
+`,c=O=>{var f=O,{children:e,label:o,description:t,delay:l,position:m,id:q}=f,v=u(f,["children","label","description","delay","position","id"]);const a=h.useId("tooltip",q),j=h.useId("description"),y=M.useTooltipHandlers(l),{visible:d}=y,x=u(y,["visible"]),{tooltipWrapperRef:_,toggleSourceRef:H}=S.useTooltipLayout(d,m),P=s.default.cloneElement(e,n({tabIndex:0,"aria-labelledby":o?a:void 0,"aria-describedby":t?a:void 0},x));return s.default.createElement(s.default.Fragment,null,s.default.createElement(k.Portal,null,s.default.createElement(C,n({id:a,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:_,visible:d},v),d&&s.default.createElement(W.VisuallyHidden,{id:j},t),s.default.createElement(V.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0"},o||t))),s.default.createElement("span",{ref:H},P))};c.defaultProps={delay:500,id:void 0,position:"top",label:void 0,description:void 0};c.propTypes={children:i.default.node.isRequired,delay:i.default.number,description:i.default.string,id:i.default.string,label:i.default.string,position:i.default.oneOf(["top","left","bottom","right"])};exports.Tooltip=c;

package/dist/Tooltip/Tooltip.js

@@ -1,60 +1,79 @@
-import o from "react";
-import e from "prop-types";
-import v from "styled-components";
-import { Box as x } from "../Box/Box.js";
-import { Typography as E } from "../Typography/Typography.js";
-import { Portal as T } from "../Portal/Portal.js";
-import { useTooltipHandlers as h } from "./hooks/useTooltipHandlers.js";
-import { useTooltipLayout as R } from "./hooks/useTooltipLayout.js";
-import { useId as p } from "../helpers/useId.js";
-import { VisuallyHidden as I } from "../VisuallyHidden/VisuallyHidden.js";
-const H = v(x)`
+var P = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var f = (o, t, e) => t in o ? P(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, d = (o, t) => {
+  for (var e in t || (t = {}))
+    u.call(t, e) && f(o, e, t[e]);
+  if (n)
+    for (var e of n(t))
+      b.call(t, e) && f(o, e, t[e]);
+  return o;
+};
+var s = (o, t) => {
+  var e = {};
+  for (var i in o)
+    u.call(o, i) && t.indexOf(i) < 0 && (e[i] = o[i]);
+  if (o != null && n)
+    for (var i of n(o))
+      t.indexOf(i) < 0 && b.call(o, i) && (e[i] = o[i]);
+  return e;
+};
+import r from "react";
+import l from "prop-types";
+import W from "styled-components";
+import { Box as z } from "../Box/Box.js";
+import { Typography as C } from "../Typography/Typography.js";
+import { Portal as _ } from "../Portal/Portal.js";
+import { useTooltipHandlers as k } from "./hooks/useTooltipHandlers.js";
+import { useTooltipLayout as q } from "./hooks/useTooltipLayout.js";
+import { useId as y } from "../helpers/useId.js";
+import { VisuallyHidden as B } from "../VisuallyHidden/VisuallyHidden.js";
+const F = W(z)`
   position: absolute;
   /* z-index exist because of its position inside Modals */
   z-index: 4;
-  display: ${({ visible: t }) => t ? "revert" : "none"};
-`, a = ({ children: t, label: n, description: i, delay: d, position: s, id: m, ...c }) => {
-  const r = p("tooltip", m), f = p("description"), { visible: l, ...u } = h(d), { tooltipWrapperRef: b, toggleSourceRef: y } = R(l, s), g = o.cloneElement(t, {
+  display: ${({ visible: o }) => o ? "revert" : "none"};
+`, g = (L) => {
+  var m = L, { children: o, label: t, description: e, delay: i, position: v, id: x } = m, E = s(m, ["children", "label", "description", "delay", "position", "id"]);
+  const p = y("tooltip", x), T = y("description"), c = k(i), { visible: a } = c, h = s(c, ["visible"]), { tooltipWrapperRef: R, toggleSourceRef: I } = q(a, v), H = r.cloneElement(o, d({
     tabIndex: 0,
-    "aria-labelledby": n ? r : void 0,
-    "aria-describedby": i ? r : void 0,
-    ...u
-  });
-  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(T, null, /* @__PURE__ */ o.createElement(H, {
-    id: r,
+    "aria-labelledby": t ? p : void 0,
+    "aria-describedby": e ? p : void 0
+  }, h));
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(_, null, /* @__PURE__ */ r.createElement(F, d({
+    id: p,
     background: "neutral900",
     hasRadius: !0,
     padding: 2,
     role: "tooltip",
-    ref: b,
-    visible: l,
-    ...c
-  }, l && /* @__PURE__ */ o.createElement(I, {
-    id: f
-  }, i), /* @__PURE__ */ o.createElement(E, {
+    ref: R,
+    visible: a
+  }, E), a && /* @__PURE__ */ r.createElement(B, {
+    id: T
+  }, e), /* @__PURE__ */ r.createElement(C, {
     as: "p",
     variant: "pi",
     fontWeight: "bold",
     textColor: "neutral0"
-  }, n || i))), /* @__PURE__ */ o.createElement("span", {
-    ref: y
-  }, g));
+  }, t || e))), /* @__PURE__ */ r.createElement("span", {
+    ref: I
+  }, H));
 };
-a.defaultProps = {
+g.defaultProps = {
   delay: 500,
   id: void 0,
   position: "top",
   label: void 0,
   description: void 0
 };
-a.propTypes = {
-  children: e.node.isRequired,
-  delay: e.number,
-  description: e.string,
-  id: e.string,
-  label: e.string,
-  position: e.oneOf(["top", "left", "bottom", "right"])
+g.propTypes = {
+  children: l.node.isRequired,
+  delay: l.number,
+  description: l.string,
+  id: l.string,
+  label: l.string,
+  position: l.oneOf(["top", "left", "bottom", "right"])
 };
 export {
-  a as Tooltip
+  g as Tooltip
 };

package/dist/Typography/TypographyProps.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),i=require("prop-types"),r=require("./constants.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=a(l),t=a(i),o=e=>p.default.createElement("div",{...e}),s={ellipsis:!1,fontWeight:void 0,fontSize:void 0,lineHeight:void 0,textColor:void 0,textAlign:void 0,textTransform:void 0,variant:r.OMEGA},n={ellipsis:t.default.bool,fontSize:t.default.oneOfType([t.default.number,t.default.string]),fontWeight:t.default.string,lineHeight:t.default.oneOfType([t.default.number,t.default.string]),textAlign:t.default.string,textColor:t.default.string,textTransform:t.default.string,variant:t.default.oneOf(r.TEXT_VARIANTS)};o.defaultProps=s;o.propTypes=n;exports.TypographyProps=o;exports.typographyDefaultProps=s;exports.typographyPropTypes=n;
+"use strict";var d=Object.defineProperty;var s=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var n=(t,o,r)=>o in t?d(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r,l=(t,o)=>{for(var r in o||(o={}))y.call(o,r)&&n(t,r,o[r]);if(s)for(var r of s(o))g.call(o,r)&&n(t,r,o[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),T=require("prop-types"),i=require("./constants.cjs"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},v=p(c),e=p(T),a=t=>v.default.createElement("div",l({},t)),f={ellipsis:!1,fontWeight:void 0,fontSize:void 0,lineHeight:void 0,textColor:void 0,textAlign:void 0,textTransform:void 0,variant:i.OMEGA},u={ellipsis:e.default.bool,fontSize:e.default.oneOfType([e.default.number,e.default.string]),fontWeight:e.default.string,lineHeight:e.default.oneOfType([e.default.number,e.default.string]),textAlign:e.default.string,textColor:e.default.string,textTransform:e.default.string,variant:e.default.oneOf(i.TEXT_VARIANTS)};a.defaultProps=f;a.propTypes=u;exports.TypographyProps=a;exports.typographyDefaultProps=f;exports.typographyPropTypes=u;

package/dist/Typography/TypographyProps.js

@@ -1,9 +1,18 @@
-import r from "react";
+var f = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var n = (r, o, e) => o in r ? f(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, p = (r, o) => {
+  for (var e in o || (o = {}))
+    l.call(o, e) && n(r, e, o[e]);
+  if (i)
+    for (var e of i(o))
+      a.call(o, e) && n(r, e, o[e]);
+  return r;
+};
+import g from "react";
 import t from "prop-types";
-import { TEXT_VARIANTS as i, OMEGA as n } from "./constants.js";
-const o = (e) => /* @__PURE__ */ r.createElement("div", {
-  ...e
-}), p = {
+import { TEXT_VARIANTS as m, OMEGA as y } from "./constants.js";
+const s = (r) => /* @__PURE__ */ g.createElement("div", p({}, r)), T = {
   ellipsis: !1,
   fontWeight: void 0,
   fontSize: void 0,
@@ -11,8 +20,8 @@ const o = (e) => /* @__PURE__ */ r.createElement("div", {
   textColor: void 0,
   textAlign: void 0,
   textTransform: void 0,
-  variant: n
-}, s = {
+  variant: y
+}, d = {
   ellipsis: t.bool,
   fontSize: t.oneOfType([t.number, t.string]),
   fontWeight: t.string,
@@ -20,12 +29,12 @@ const o = (e) => /* @__PURE__ */ r.createElement("div", {
   textAlign: t.string,
   textColor: t.string,
   textTransform: t.string,
-  variant: t.oneOf(i)
+  variant: t.oneOf(m)
 };
-o.defaultProps = p;
-o.propTypes = s;
+s.defaultProps = T;
+s.propTypes = d;
 export {
-  o as TypographyProps,
-  p as typographyDefaultProps,
-  s as typographyPropTypes
+  s as TypographyProps,
+  T as typographyDefaultProps,
+  d as typographyPropTypes
 };

package/dist/helpers/getDefaultLocale.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="en-EN",a=()=>typeof navigator>"u"?e:navigator.language?navigator.language:navigator.userLanguage?navigator.userLanguage:e;exports.getDefaultLocale=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="en-EN",a=()=>typeof navigator=="undefined"?e:navigator.language?navigator.language:navigator.userLanguage?navigator.userLanguage:e;exports.getDefaultLocale=a;

package/dist/helpers/getDefaultLocale.js

@@ -1,4 +1,4 @@
-const a = "en-EN", e = () => typeof navigator > "u" ? a : navigator.language ? navigator.language : navigator.userLanguage ? navigator.userLanguage : a;
+const a = "en-EN", e = () => typeof navigator == "undefined" ? a : navigator.language ? navigator.language : navigator.userLanguage ? navigator.userLanguage : a;
 export {
   e as getDefaultLocale
 };

package/dist/helpers/handleResponsiveValues.cjs

@@ -1,5 +1,5 @@
-"use strict";const l=(a,s,e)=>{let i=s;if(!Array.isArray(s)&&typeof s=="object"&&(i=[s?.desktop,s?.tablet,s?.mobile]),i===void 0)return;if(Array.isArray(i)){const[d,o,t]=i;let r=`${a}: ${e.spaces[d]};`;return o!==void 0&&(r+=`${e.mediaQueries.tablet}{
-          ${a}: ${e.spaces[o]};
-        }`),t!==void 0&&(r+=`${e.mediaQueries.mobile}{
-          ${a}: ${e.spaces[t]};
-        }`),r}const c=e.spaces[i]||i;return`${a}: ${c};`};module.exports=l;
+"use strict";const e=(o,s,i)=>{let r=s;if(!Array.isArray(s)&&typeof s=="object"&&(r=[s==null?void 0:s.desktop,s==null?void 0:s.tablet,s==null?void 0:s.mobile]),r===void 0)return;if(Array.isArray(r)){const[n,c,d]=r;let t=`${o}: ${i.spaces[n]};`;return c!==void 0&&(t+=`${i.mediaQueries.tablet}{
+          ${o}: ${i.spaces[c]};
+        }`),d!==void 0&&(t+=`${i.mediaQueries.mobile}{
+          ${o}: ${i.spaces[d]};
+        }`),t}const $=i.spaces[r]||r;return`${o}: ${$};`};module.exports=e;

package/dist/helpers/handleResponsiveValues.js

@@ -1,19 +1,19 @@
-const $ = (i, s, a) => {
-  let e = s;
-  if (!Array.isArray(s) && typeof s == "object" && (e = [s?.desktop, s?.tablet, s?.mobile]), e === void 0)
+const a = (o, s, i) => {
+  let r = s;
+  if (!Array.isArray(s) && typeof s == "object" && (r = [s == null ? void 0 : s.desktop, s == null ? void 0 : s.tablet, s == null ? void 0 : s.mobile]), r === void 0)
     return;
-  if (Array.isArray(e)) {
-    const [l, o, t] = e;
-    let r = `${i}: ${a.spaces[l]};`;
-    return o !== void 0 && (r += `${a.mediaQueries.tablet}{
-          ${i}: ${a.spaces[o]};
-        }`), t !== void 0 && (r += `${a.mediaQueries.mobile}{
-          ${i}: ${a.spaces[t]};
-        }`), r;
+  if (Array.isArray(r)) {
+    const [n, d, $] = r;
+    let t = `${o}: ${i.spaces[n]};`;
+    return d !== void 0 && (t += `${i.mediaQueries.tablet}{
+          ${o}: ${i.spaces[d]};
+        }`), $ !== void 0 && (t += `${i.mediaQueries.mobile}{
+          ${o}: ${i.spaces[$]};
+        }`), t;
   }
-  const d = a.spaces[e] || e;
-  return `${i}: ${d};`;
+  const c = i.spaces[r] || r;
+  return `${o}: ${c};`;
 };
 export {
-  $ as default
+  a as default
 };

package/dist/themes/darkTheme/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./dark-colors.cjs"),o=require("./dark-shadows.cjs"),r=require("../common-theme.cjs"),s={colors:e.darkColorTokenObject.color,shadows:o.darkShadowTokenObject.shadow,...r.commonTheme};exports.darkTheme=s;
+"use strict";var d=Object.defineProperty;var s=Object.getOwnPropertySymbols;var t=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var c=(r,e,o)=>e in r?d(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,a=(r,e)=>{for(var o in e||(e={}))t.call(e,o)&&c(r,o,e[o]);if(s)for(var o of s(e))m.call(e,o)&&c(r,o,e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./dark-colors.cjs"),h=require("./dark-shadows.cjs"),k=require("../common-theme.cjs"),l=a({colors:n.darkColorTokenObject.color,shadows:h.darkShadowTokenObject.shadow},k.commonTheme);exports.darkTheme=l;

package/dist/themes/darkTheme/index.js

@@ -1,11 +1,21 @@
-import { darkColorTokenObject as o } from "./dark-colors.js";
-import { darkShadowTokenObject as r } from "./dark-shadows.js";
-import { commonTheme as m } from "../common-theme.js";
-const c = {
-  colors: o.color,
-  shadows: r.shadow,
-  ...m
+var c = Object.defineProperty;
+var e = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var t = (m, o, r) => o in m ? c(m, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : m[o] = r, a = (m, o) => {
+  for (var r in o || (o = {}))
+    d.call(o, r) && t(m, r, o[r]);
+  if (e)
+    for (var r of e(o))
+      h.call(o, r) && t(m, r, o[r]);
+  return m;
 };
+import { darkColorTokenObject as k } from "./dark-colors.js";
+import { darkShadowTokenObject as s } from "./dark-shadows.js";
+import { commonTheme as n } from "../common-theme.js";
+const l = a({
+  colors: k.color,
+  shadows: s.shadow
+}, n);
 export {
-  c as darkTheme
+  l as darkTheme
 };

package/dist/themes/extendTheme.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./lightTheme/index.cjs"),s=e=>`
-${e}
+"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertySymbols;var a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var h=(t,e,o)=>e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,c=(t,e)=>{for(var o in e||(e={}))a.call(e,o)&&h(t,o,e[o]);if(s)for(var o of s(e))l.call(e,o)&&h(t,o,e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./lightTheme/index.cjs"),m=t=>`
+${t}
 
 The following is an example:
 
@@ -7,7 +7,7 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system/themes';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(c.lightTheme).map(t=>`${t}: /* put the overrides for the ${t} key */,`).join(`
+    ${Object.keys(d.lightTheme).map(e=>`${e}: /* put the overrides for the ${e} key */,`).join(`
 `)}
 })
-`,r=e=>e&&typeof e=="object"&&!Array.isArray(e),h=(e,t)=>{const n={...e};return r(e)&&r(t)&&Object.keys(t).forEach(o=>{r(t[o])&&e.hasOwnProperty(o)?n[o]=h(e[o],t[o]):n[o]=t[o]}),n},m=(e,t)=>{if(!r(e)){const n=s("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(n)}if(!r(t)){const n=s("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(n)}return h(e,t)};exports.extendTheme=m;
+`,r=t=>t&&typeof t=="object"&&!Array.isArray(t),u=(t,e)=>{const o=c({},t);return r(t)&&r(e)&&Object.keys(e).forEach(n=>{r(e[n])&&t.hasOwnProperty(n)?o[n]=u(t[n],e[n]):o[n]=e[n]}),o},f=(t,e)=>{if(!r(t)){const o=m("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(o)}if(!r(e)){const o=m("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(o)}return u(t,e)};exports.extendTheme=f;

package/dist/themes/extendTheme.js

@@ -1,6 +1,17 @@
-import { lightTheme as m } from "./lightTheme/index.js";
-const h = (e) => `
-${e}
+var f = Object.defineProperty;
+var h = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var s = (t, e, o) => e in t ? f(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, m = (t, e) => {
+  for (var o in e || (e = {}))
+    p.call(e, o) && s(t, o, e[o]);
+  if (h)
+    for (var o of h(e))
+      u.call(e, o) && s(t, o, e[o]);
+  return t;
+};
+import { lightTheme as i } from "./lightTheme/index.js";
+const c = (t) => `
+${t}
 
 The following is an example:
 
@@ -8,29 +19,29 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system/themes';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(m).map((t) => `${t}: /* put the overrides for the ${t} key */,`).join(`
+    ${Object.keys(i).map((e) => `${e}: /* put the overrides for the ${e} key */,`).join(`
 `)}
 })
-`, r = (e) => e && typeof e == "object" && !Array.isArray(e), s = (e, t) => {
-  const n = { ...e };
-  return r(e) && r(t) && Object.keys(t).forEach((o) => {
-    r(t[o]) && e.hasOwnProperty(o) ? n[o] = s(e[o], t[o]) : n[o] = t[o];
-  }), n;
-}, a = (e, t) => {
-  if (!r(e)) {
-    const n = h(
+`, r = (t) => t && typeof t == "object" && !Array.isArray(t), a = (t, e) => {
+  const o = m({}, t);
+  return r(t) && r(e) && Object.keys(e).forEach((n) => {
+    r(e[n]) && t.hasOwnProperty(n) ? o[n] = a(t[n], e[n]) : o[n] = e[n];
+  }), o;
+}, b = (t, e) => {
+  if (!r(t)) {
+    const o = c(
       "The first argument should be an object and corresponds to the theme you want to extend."
     );
-    throw new Error(n);
+    throw new Error(o);
   }
-  if (!r(t)) {
-    const n = h(
+  if (!r(e)) {
+    const o = c(
       "The second argument should be an object and corresponds to the keys of the theme you want to override."
     );
-    throw new Error(n);
+    throw new Error(o);
   }
-  return s(e, t);
+  return a(t, e);
 };
 export {
-  a as extendTheme
+  b as extendTheme
 };

package/dist/themes/lightTheme/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./light-colors.cjs"),o=require("./light-shadows.cjs"),t=require("../common-theme.cjs"),s={colors:e.lightColorTokenObject.color,shadows:o.lightShadowTokenObject.shadow,...t.commonTheme};exports.lightTheme=s;
+"use strict";var c=Object.defineProperty;var s=Object.getOwnPropertySymbols;var r=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;var h=(t,e,o)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,l=(t,e)=>{for(var o in e||(e={}))r.call(e,o)&&h(t,o,e[o]);if(s)for(var o of s(e))i.call(e,o)&&h(t,o,e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("./light-colors.cjs"),n=require("./light-shadows.cjs"),g=require("../common-theme.cjs"),u=l({colors:m.lightColorTokenObject.color,shadows:n.lightShadowTokenObject.shadow},g.commonTheme);exports.lightTheme=u;

package/dist/themes/lightTheme/index.js

@@ -1,11 +1,21 @@
-import { lightColorTokenObject as o } from "./light-colors.js";
-import { lightShadowTokenObject as m } from "./light-shadows.js";
-import { commonTheme as r } from "../common-theme.js";
-const c = {
-  colors: o.color,
-  shadows: m.shadow,
-  ...r
+var c = Object.defineProperty;
+var t = Object.getOwnPropertySymbols;
+var i = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var e = (r, o, m) => o in r ? c(r, o, { enumerable: !0, configurable: !0, writable: !0, value: m }) : r[o] = m, h = (r, o) => {
+  for (var m in o || (o = {}))
+    i.call(o, m) && e(r, m, o[m]);
+  if (t)
+    for (var m of t(o))
+      l.call(o, m) && e(r, m, o[m]);
+  return r;
 };
+import { lightColorTokenObject as s } from "./light-colors.js";
+import { lightShadowTokenObject as n } from "./light-shadows.js";
+import { commonTheme as p } from "../common-theme.js";
+const g = h({
+  colors: s.color,
+  shadows: n.shadow
+}, p);
 export {
-  c as lightTheme
+  g as lightTheme
 };

package/dist/v2/Breadcrumbs/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),h=require("prop-types"),p=require("styled-components"),m=require("../../Box/Box.cjs"),y=require("./Divider.cjs"),s=require("../../Flex/Flex.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(l),t=i(h),b=i(p),g=b.default(s.Flex)`
+"use strict";var _=Object.defineProperty;var i=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var f=(e,r,t)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,m=(e,r)=>{for(var t in r||(r={}))h.call(r,t)&&f(e,t,r[t]);if(i)for(var t of i(r))p.call(r,t)&&f(e,t,r[t]);return e};var y=(e,r)=>{var t={};for(var a in e)h.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&i)for(var a of i(e))r.indexOf(a)<0&&p.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),q=require("prop-types"),B=require("styled-components"),D=require("../../Box/Box.cjs"),T=require("./Divider.cjs"),b=require("../../Flex/Flex.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=d(o),l=d(q),j=d(B),F=j.default(b.Flex)`
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
@@ -6,4 +6,4 @@
   :first-child {
     margin-left: ${({theme:e})=>`calc(-1*${e.spaces[2]})`};
   }
-`,n=({label:e,children:o,...d})=>{const a=l.Children.toArray(o);return r.default.createElement(m.Box,{"aria-label":e,...d},r.default.createElement(g,{as:"ol",horizontal:!0},l.Children.map(a,(c,u)=>{const f=a.length>1&&u+1<a.length;return r.default.createElement(s.Flex,{inline:!0,as:"li"},c,f&&r.default.createElement(y.Divider,null))})))};n.displayName="Breadcrumbs";n.propTypes={children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,label:t.default.string.isRequired};exports.Breadcrumbs=n;
+`,c=a=>{var u=a,{label:e,children:r}=u,t=y(u,["label","children"]);const s=o.Children.toArray(r);return n.default.createElement(D.Box,m({"aria-label":e},t),n.default.createElement(F,{as:"ol",horizontal:!0},o.Children.map(s,(g,v)=>{const x=s.length>1&&v+1<s.length;return n.default.createElement(b.Flex,{inline:!0,as:"li"},g,x&&n.default.createElement(T.Divider,null))})))};c.displayName="Breadcrumbs";c.propTypes={children:l.default.oneOfType([l.default.arrayOf(l.default.node),l.default.node]).isRequired,label:l.default.string.isRequired};exports.Breadcrumbs=c;

package/dist/v2/Breadcrumbs/Breadcrumbs.js

@@ -1,38 +1,58 @@
-import r, { Children as a } from "react";
-import e from "prop-types";
-import h from "styled-components";
-import { Box as p } from "../../Box/Box.js";
-import { Divider as f } from "./Divider.js";
-import { Flex as n } from "../../Flex/Flex.js";
-const u = h(n)`
+var x = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var m = (e, t, r) => t in e ? x(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, h = (e, t) => {
+  for (var r in t || (t = {}))
+    d.call(t, r) && m(e, r, t[r]);
+  if (n)
+    for (var r of n(t))
+      c.call(t, r) && m(e, r, t[r]);
+  return e;
+};
+var p = (e, t) => {
+  var r = {};
+  for (var i in e)
+    d.call(e, i) && t.indexOf(i) < 0 && (r[i] = e[i]);
+  if (e != null && n)
+    for (var i of n(e))
+      t.indexOf(i) < 0 && c.call(e, i) && (r[i] = e[i]);
+  return r;
+};
+import o, { Children as f } from "react";
+import a from "prop-types";
+import E from "styled-components";
+import { Box as T } from "../../Box/Box.js";
+import { Divider as A } from "./Divider.js";
+import { Flex as u } from "../../Flex/Flex.js";
+const B = E(u)`
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
   // the same amount it has inner padding
   :first-child {
-    margin-left: ${({ theme: t }) => `calc(-1*${t.spaces[2]})`};
+    margin-left: ${({ theme: e }) => `calc(-1*${e.spaces[2]})`};
   }
-`, o = ({ label: t, children: l, ...s }) => {
-  const i = a.toArray(l);
-  return /* @__PURE__ */ r.createElement(p, {
-    "aria-label": t,
-    ...s
-  }, /* @__PURE__ */ r.createElement(u, {
+`, y = (i) => {
+  var s = i, { label: e, children: t } = s, r = p(s, ["label", "children"]);
+  const l = f.toArray(t);
+  return /* @__PURE__ */ o.createElement(T, h({
+    "aria-label": e
+  }, r), /* @__PURE__ */ o.createElement(B, {
     as: "ol",
     horizontal: !0
-  }, a.map(i, (m, d) => {
-    const c = i.length > 1 && d + 1 < i.length;
-    return /* @__PURE__ */ r.createElement(n, {
+  }, f.map(l, (b, g) => {
+    const v = l.length > 1 && g + 1 < l.length;
+    return /* @__PURE__ */ o.createElement(u, {
       inline: !0,
       as: "li"
-    }, m, c && /* @__PURE__ */ r.createElement(f, null));
+    }, b, v && /* @__PURE__ */ o.createElement(A, null));
   })));
 };
-o.displayName = "Breadcrumbs";
-o.propTypes = {
-  children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
-  label: e.string.isRequired
+y.displayName = "Breadcrumbs";
+y.propTypes = {
+  children: a.oneOfType([a.arrayOf(a.node), a.node]).isRequired,
+  label: a.string.isRequired
 };
 export {
-  o as Breadcrumbs
+  y as Breadcrumbs
 };

package/dist/v2/Breadcrumbs/Crumb.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),d=require("prop-types"),l=require("../../Box/Box.cjs"),i=require("../../Typography/Typography.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=p(n),a=p(d),t=({children:e,isCurrent:o,...u})=>r.default.createElement(l.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1},r.default.createElement(i.Typography,{variant:"pi",textColor:"neutral800",fontWeight:o?"bold":"normal","aria-current":o,...u},e));t.displayName="Crumb";t.defaultProps={isCurrent:!1};t.propTypes={children:a.default.node.isRequired,isCurrent:a.default.bool};exports.Crumb=t;
+"use strict";var g=Object.defineProperty;var a=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var n=(e,t,o)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,i=(e,t)=>{for(var o in t||(t={}))d.call(t,o)&&n(e,o,t[o]);if(a)for(var o of a(t))l.call(t,o)&&n(e,o,t[o]);return e};var s=(e,t)=>{var o={};for(var r in e)d.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&a)for(var r of a(e))t.indexOf(r)<0&&l.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),T=require("prop-types"),b=require("../../Box/Box.cjs"),h=require("../../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=f(m),y=f(T),p=r=>{var u=r,{children:e,isCurrent:t}=u,o=s(u,["children","isCurrent"]);return c.default.createElement(b.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1},c.default.createElement(h.Typography,i({variant:"pi",textColor:"neutral800",fontWeight:t?"bold":"normal","aria-current":t},o),e))};p.displayName="Crumb";p.defaultProps={isCurrent:!1};p.propTypes={children:y.default.node.isRequired,isCurrent:y.default.bool};exports.Crumb=p;

package/dist/v2/Breadcrumbs/Crumb.js

@@ -1,27 +1,49 @@
-import o from "react";
-import t from "prop-types";
-import { Box as i } from "../../Box/Box.js";
-import { Typography as d } from "../../Typography/Typography.js";
-const r = ({ children: p, isCurrent: e, ...a }) => /* @__PURE__ */ o.createElement(i, {
-  paddingLeft: 2,
-  paddingRight: 2,
-  paddingTop: 1,
-  paddingBottom: 1
-}, /* @__PURE__ */ o.createElement(d, {
-  variant: "pi",
-  textColor: "neutral800",
-  fontWeight: e ? "bold" : "normal",
-  "aria-current": e,
-  ...a
-}, p));
-r.displayName = "Crumb";
-r.defaultProps = {
+var g = Object.defineProperty;
+var p = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var d = (r, e, o) => e in r ? g(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, l = (r, e) => {
+  for (var o in e || (e = {}))
+    m.call(e, o) && d(r, o, e[o]);
+  if (p)
+    for (var o of p(e))
+      n.call(e, o) && d(r, o, e[o]);
+  return r;
+};
+var f = (r, e) => {
+  var o = {};
+  for (var t in r)
+    m.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
+  if (r != null && p)
+    for (var t of p(r))
+      e.indexOf(t) < 0 && n.call(r, t) && (o[t] = r[t]);
+  return o;
+};
+import s from "react";
+import u from "prop-types";
+import { Box as c } from "../../Box/Box.js";
+import { Typography as y } from "../../Typography/Typography.js";
+const a = (t) => {
+  var i = t, { children: r, isCurrent: e } = i, o = f(i, ["children", "isCurrent"]);
+  return /* @__PURE__ */ s.createElement(c, {
+    paddingLeft: 2,
+    paddingRight: 2,
+    paddingTop: 1,
+    paddingBottom: 1
+  }, /* @__PURE__ */ s.createElement(y, l({
+    variant: "pi",
+    textColor: "neutral800",
+    fontWeight: e ? "bold" : "normal",
+    "aria-current": e
+  }, o), r));
+};
+a.displayName = "Crumb";
+a.defaultProps = {
   isCurrent: !1
 };
-r.propTypes = {
-  children: t.node.isRequired,
-  isCurrent: t.bool
+a.propTypes = {
+  children: u.node.isRequired,
+  isCurrent: u.bool
 };
 export {
-  r as Crumb
+  a as Crumb
 };