@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/themes/darkTheme/dark-colors.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a={color:{alternative100:"#181826",alternative200:"#4a4a6a",alternative500:"#ac73e6",alternative600:"#ac73e6",alternative700:"#e0c1f4",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#181826",danger200:"#4a4a6a",danger500:"#ee5e52",danger600:"#ee5e52",danger700:"#ee5e52",neutral0:"#212134",neutral100:"#181826",neutral1000:"#ffffff",neutral150:"#32324d",neutral200:"#4a4a6a",neutral300:"#666687",neutral400:"#a5a5ba",neutral500:"#c0c0cf",neutral600:"#a5a5ba",neutral700:"#eaeaef",neutral800:"#ffffff",neutral900:"#ffffff",primary100:"#181826",primary200:"#4a4a6a",primary500:"#4945ff",primary600:"#7b79ff",primary700:"#7b79ff",secondary100:"#181826",secondary200:"#4a4a6a",secondary500:"#66b7f1",secondary600:"#66b7f1",secondary700:"#b8e1ff",success100:"#181826",success200:"#4a4a6a",success500:"#5cb176",success600:"#5cb176",success700:"#c6f0c2",warning100:"#181826",warning200:"#4a4a6a",warning500:"#f29d41",warning600:"#f29d41",warning700:"#fae7b9"}};exports.darkColorTokenObject=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a={color:{alternative100:"#181826",alternative200:"#4a4a6a",alternative500:"#ac73e6",alternative600:"#ac73e6",alternative700:"#e0c1f4",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#181826",danger200:"#4a4a6a",danger500:"#ee5e52",danger600:"#ee5e52",danger700:"#ee5e52",neutral0:"#212134",neutral100:"#181826",neutral1000:"#ffffff",neutral150:"#32324d",neutral200:"#4a4a6a",neutral300:"#666687",neutral400:"#a5a5ba",neutral500:"#c0c0cf",neutral600:"#a5a5ba",neutral700:"#eaeaef",neutral800:"#ffffff",neutral900:"#ffffff",primary100:"#181826",primary200:"#4a4a6a",primary500:"#4945ff",primary600:"#7b79ff",primary700:"#7b79ff",secondary100:"#181826",secondary200:"#4a4a6a",secondary500:"#66b7f1",secondary600:"#66b7f1",secondary700:"#b8e1ff",success100:"#181826",success200:"#4a4a6a",success500:"#5cb176",success600:"#5cb176",success700:"#c6f0c2",warning100:"#181826",warning200:"#4a4a6a",warning500:"#f29d41",warning600:"#f29d41",warning700:"#fae7b9"}};exports.darkColorTokenObject=a;

package/dist/themes/darkTheme/dark-shadows.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p={shadow:{filterShadow:"1px 1px 10px rgba(3, 3, 5, 0.35)",focus:"inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",focusShadow:"0px 0px 6px rgba(76, 191, 255, 0.75)",popupShadow:"1px 1px 10px rgba(3, 3, 5, 0.35)",tableShadow:"1px 1px 10px rgba(3, 3, 5, 0.2)"}};exports.darkShadowTokenObject=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p={shadow:{filterShadow:"1px 1px 10px rgba(3, 3, 5, 0.35)",focus:"inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",focusShadow:"0px 0px 6px rgba(76, 191, 255, 0.75)",popupShadow:"1px 1px 10px rgba(3, 3, 5, 0.35)",tableShadow:"1px 1px 10px rgba(3, 3, 5, 0.2)"}};exports.darkShadowTokenObject=p;

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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./dark-colors.cjs"),e=require("./dark-shadows.cjs"),r=require("../common-theme.cjs"),a={colors:o.darkColorTokenObject.color,shadows:e.darkShadowTokenObject.shadow,...r.commonTheme};exports.darkTheme=a;

package/dist/themes/extendTheme.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./lightTheme/index.cjs"),r=require("../helpers/objects.cjs"),n=t=>`
-${t}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lodash"),d=require("./lightTheme/index.cjs"),n=require("../helpers/objects.cjs"),h=r=>`
+${r}
 
 The following is an example:
 
@@ -7,7 +7,7 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(s.lightTheme).map(e=>`${e}: /* put the overrides for the ${e} key */,`).join(`
+    ${Object.keys(d.lightTheme).map(t=>`${t}: /* put the overrides for the ${t} key */,`).join(`
 `)}
 })
-`,h=(t,e)=>{if(!r.isObject(t)){const o=n("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(o)}if(!r.isObject(e)){const o=n("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(o)}return r.mergeDeep(t??{},e??{})};exports.extendTheme=h;
+`,a=(r,t)=>{if(!n.isObject(r)){const e=h("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(e)}if(!n.isObject(t)){const e=h("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(e)}function c(e,s){if(Array.isArray(e))return s;if(n.isObject(e)&&n.isObject(s))return o.merge(e,s)}const i=o.cloneDeep(r??{}),m=o.cloneDeep(t??{});return o.assignWith(i,m,c),i};exports.extendTheme=a;

package/dist/themes/extendTheme.js

@@ -1,6 +1,7 @@
-import { lightTheme as h } from "./lightTheme/index.js";
-import { isObject as r, mergeDeep as m } from "../helpers/objects.js";
-const n = (t) => `
+import { cloneDeep as m, assignWith as c, merge as a } from "lodash";
+import { lightTheme as f } from "./lightTheme/index.js";
+import { isObject as o } from "../helpers/objects.js";
+const i = (t) => `
 ${t}
 
 The following is an example:
@@ -9,20 +10,27 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(h).map((e) => `${e}: /* put the overrides for the ${e} key */,`).join(`
+    ${Object.keys(f).map((r) => `${r}: /* put the overrides for the ${r} key */,`).join(`
 `)}
 })
-`, a = (t, e) => {
-  if (!r(t)) {
-    const o = n("The first argument should be an object and corresponds to the theme you want to extend.");
-    throw new Error(o);
+`, g = (t, r) => {
+  if (!o(t)) {
+    const e = i("The first argument should be an object and corresponds to the theme you want to extend.");
+    throw new Error(e);
   }
-  if (!r(e)) {
-    const o = n("The second argument should be an object and corresponds to the keys of the theme you want to override.");
-    throw new Error(o);
+  if (!o(r)) {
+    const e = i("The second argument should be an object and corresponds to the keys of the theme you want to override.");
+    throw new Error(e);
   }
-  return m(t ?? {}, e ?? {});
+  function h(e, n) {
+    if (Array.isArray(e))
+      return n;
+    if (o(e) && o(n))
+      return a(e, n);
+  }
+  const s = m(t ?? {}), d = m(r ?? {});
+  return c(s, d, h), s;
 };
 export {
-  a as extendTheme
+  g as extendTheme
 };

package/dist/themes/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./lightTheme/index.cjs"),i=require("./darkTheme/index.cjs"),u=require("./extendTheme.cjs"),e=require("./utils.cjs");exports.lightTheme=t.lightTheme;exports.darkTheme=i.darkTheme;exports.extendTheme=u.extendTheme;exports.buttonFocusStyle=e.buttonFocusStyle;exports.getThemeSize=e.getThemeSize;exports.inputFocusStyle=e.inputFocusStyle;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./lightTheme/index.cjs"),i=require("./darkTheme/index.cjs"),u=require("./extendTheme.cjs"),e=require("./utils.cjs");exports.lightTheme=t.lightTheme;exports.darkTheme=i.darkTheme;exports.extendTheme=u.extendTheme;exports.buttonFocusStyle=e.buttonFocusStyle;exports.getThemeSize=e.getThemeSize;exports.inputFocusStyle=e.inputFocusStyle;

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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./light-colors.cjs"),e=require("./light-shadows.cjs"),t=require("../common-theme.cjs"),h={colors:o.lightColorTokenObject.color,shadows:e.lightShadowTokenObject.shadow,...t.commonTheme};exports.lightTheme=h;

package/dist/themes/lightTheme/light-colors.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={color:{alternative100:"#f6ecfc",alternative200:"#e0c1f4",alternative500:"#ac73e6",alternative600:"#9736e8",alternative700:"#8312d1",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#fcecea",danger200:"#f5c0b8",danger500:"#ee5e52",danger600:"#d02b20",danger700:"#b72b1a",neutral0:"#ffffff",neutral100:"#f6f6f9",neutral1000:"#181826",neutral150:"#eaeaef",neutral200:"#dcdce4",neutral300:"#c0c0cf",neutral400:"#a5a5ba",neutral500:"#8e8ea9",neutral600:"#666687",neutral700:"#4a4a6a",neutral800:"#32324d",neutral900:"#212134",primary100:"#f0f0ff",primary200:"#d9d8ff",primary500:"#7b79ff",primary600:"#4945ff",primary700:"#271fe0",secondary100:"#eaf5ff",secondary200:"#b8e1ff",secondary500:"#66b7f1",secondary600:"#0c75af",secondary700:"#006096",success100:"#eafbe7",success200:"#c6f0c2",success500:"#5cb176",success600:"#328048",success700:"#2f6846",warning100:"#fdf4dc",warning200:"#fae7b9",warning500:"#f29d41",warning600:"#d9822f",warning700:"#be5d01"}};exports.lightColorTokenObject=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={color:{alternative100:"#f6ecfc",alternative200:"#e0c1f4",alternative500:"#ac73e6",alternative600:"#9736e8",alternative700:"#8312d1",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#fcecea",danger200:"#f5c0b8",danger500:"#ee5e52",danger600:"#d02b20",danger700:"#b72b1a",neutral0:"#ffffff",neutral100:"#f6f6f9",neutral1000:"#181826",neutral150:"#eaeaef",neutral200:"#dcdce4",neutral300:"#c0c0cf",neutral400:"#a5a5ba",neutral500:"#8e8ea9",neutral600:"#666687",neutral700:"#4a4a6a",neutral800:"#32324d",neutral900:"#212134",primary100:"#f0f0ff",primary200:"#d9d8ff",primary500:"#7b79ff",primary600:"#4945ff",primary700:"#271fe0",secondary100:"#eaf5ff",secondary200:"#b8e1ff",secondary500:"#66b7f1",secondary600:"#0c75af",secondary700:"#006096",success100:"#eafbe7",success200:"#c6f0c2",success500:"#5cb176",success600:"#328048",success700:"#2f6846",warning100:"#fdf4dc",warning200:"#fae7b9",warning500:"#f29d41",warning600:"#d9822f",warning700:"#be5d01"}};exports.lightColorTokenObject=e;

package/dist/themes/lightTheme/light-shadows.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p={shadow:{filterShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)",focus:"inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",focusShadow:"0px 0px 6px rgba(76, 191, 255, 0.75)",popupShadow:"0px 2px 15px rgba(33, 33, 52, 0.1)",tableShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)"}};exports.lightShadowTokenObject=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p={shadow:{filterShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)",focus:"inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",focusShadow:"0px 0px 6px rgba(76, 191, 255, 0.75)",popupShadow:"0px 2px 15px rgba(33, 33, 52, 0.1)",tableShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)"}};exports.lightShadowTokenObject=p;

package/dist/themes/sizes.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={input:{S:`${32/16}rem`,M:`${40/16}rem`},accordions:{S:`${48/16}rem`,M:`${88/16}rem`},badge:{S:`${16/16}rem`,M:`${24/16}rem`},button:{S:`${32/16}rem`,M:`${36/16}rem`,L:`${40/16}rem`}};exports.sizes=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={input:{S:`${32/16}rem`,M:`${40/16}rem`},accordions:{S:`${48/16}rem`,M:`${88/16}rem`},badge:{S:`${16/16}rem`,M:`${24/16}rem`},button:{S:`${32/16}rem`,M:`${36/16}rem`,L:`${40/16}rem`}};exports.sizes=e;

package/dist/themes/sizes.js

@@ -1,18 +1,18 @@
 const e = {
   input: {
-    S: `${2}rem`,
+    S: "2rem",
     M: `${2.5}rem`
   },
   accordions: {
-    S: `${3}rem`,
+    S: "3rem",
     M: `${5.5}rem`
   },
   badge: {
-    S: `${1}rem`,
+    S: "1rem",
     M: `${1.5}rem`
   },
   button: {
-    S: `${2}rem`,
+    S: "2rem",
     M: `${2.25}rem`,
     L: `${2.5}rem`
   }

package/dist/themes/utils.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=t=>({theme:o,size:r})=>o.sizes[t][r],i=(t="&")=>({theme:o,hasError:r})=>`
+"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;
@@ -8,10 +8,10 @@
         border: 1px solid ${r?o.colors.danger600:o.colors.primary600};
         box-shadow: ${r?o.colors.danger600:o.colors.primary600} 0px 0px 0px 2px;
       }
-    `,n=({theme:t})=>`
+    `,n=({theme:t})=>e.css`
   position: relative;
   outline: none;
-  
+
   &:after {
     transition-property: all;
     transition-duration: 0.2s;
@@ -38,4 +38,4 @@
       border: 2px solid ${t.colors.primary600};
     }
   }
-`;exports.buttonFocusStyle=n;exports.getThemeSize=e;exports.inputFocusStyle=i;
+`;exports.buttonFocusStyle=n;exports.getThemeSize=s;exports.inputFocusStyle=i;

package/dist/themes/utils.js

@@ -1,4 +1,5 @@
-const i = (t) => ({ theme: o, size: r }) => o.sizes[t][r], n = (t = "&") => ({ theme: o, hasError: r }) => `
+import { css as i } from "styled-components";
+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;
@@ -8,10 +9,10 @@ const i = (t) => ({ theme: o, size: r }) => o.sizes[t][r], n = (t = "&") => ({ t
         border: 1px solid ${r ? o.colors.danger600 : o.colors.primary600};
         box-shadow: ${r ? o.colors.danger600 : o.colors.primary600} 0px 0px 0px 2px;
       }
-    `, s = ({ theme: t }) => `
+    `, e = ({ theme: t }) => i`
   position: relative;
   outline: none;
-  
+
   &:after {
     transition-property: all;
     transition-duration: 0.2s;
@@ -40,7 +41,7 @@ const i = (t) => ({ theme: o, size: r }) => o.sizes[t][r], n = (t = "&") => ({ t
   }
 `;
 export {
-  s as buttonFocusStyle,
-  i as getThemeSize,
-  n as inputFocusStyle
+  e as buttonFocusStyle,
+  s as getThemeSize,
+  p as inputFocusStyle
 };

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("./Divider.cjs"),y=require("../../Box/Box.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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),u=require("styled-components"),h=require("./Divider.cjs"),s=require("../../Flex/Flex.cjs"),m=require("../../Box/Box.cjs"),b=e=>e&&e.__esModule?e:{default:e},f=b(u),x=f.default(s.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(y.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(m.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;
+`,n=({label:e,children:a,...l})=>{const r=i.Children.toArray(a);return t.jsx(m.Box,{"aria-label":e,...l,children:t.jsx(x,{as:"ol",children:i.Children.map(r,(o,c)=>{const d=r.length>1&&c+1<r.length;return t.jsxs(s.Flex,{inline:!0,as:"li",children:[o,d&&t.jsx(h.Divider,{})]})})})})};n.displayName="Breadcrumbs";exports.Breadcrumbs=n;

package/dist/v2/Breadcrumbs/Breadcrumbs.js

@@ -1,29 +1,25 @@
-import r, { Children as a } from "react";
-import e from "prop-types";
-import h from "styled-components";
-import { Divider as p } from "./Divider.js";
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { Children as t } from "react";
+import d from "styled-components";
+import { Divider as c } from "./Divider.js";
+import { Flex as a } from "../../Flex/Flex.js";
 import { Box as f } from "../../Box/Box.js";
-import { Flex as n } from "../../Flex/Flex.js";
-const u = h(n)`
+const p = d(a)`
   // 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(f, { "aria-label": t, ...s }, /* @__PURE__ */ r.createElement(u, { as: "ol", horizontal: !0 }, a.map(i, (m, d) => {
-    const c = i.length > 1 && d + 1 < i.length;
-    return /* @__PURE__ */ r.createElement(n, { inline: !0, as: "li" }, m, c && /* @__PURE__ */ r.createElement(p, null));
-  })));
-};
-o.displayName = "Breadcrumbs";
-o.propTypes = {
-  children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
-  label: e.string.isRequired
+`, b = ({ label: e, children: n, ...o }) => {
+  const r = t.toArray(n);
+  return i(f, { "aria-label": e, ...o, children: i(p, { as: "ol", children: t.map(r, (s, l) => {
+    const m = r.length > 1 && l + 1 < r.length;
+    return h(a, { inline: !0, as: "li", children: [s, m && i(c, {})] });
+  }) }) });
 };
+b.displayName = "Breadcrumbs";
 export {
-  o as Breadcrumbs
+  b 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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../Box/Box.cjs"),n=require("../../Typography/Typography.cjs"),t=({children:o,isCurrent:e=!1,...i})=>r.jsx(a.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1,children:r.jsx(n.Typography,{variant:"pi",textColor:"neutral800",fontWeight:e?"bold":"normal","aria-current":e,...i,children:o})});t.displayName="Crumb";exports.Crumb=t;

package/dist/v2/Breadcrumbs/Crumb.js

@@ -1,26 +1,8 @@
-import o from "react";
-import t from "prop-types";
+import { jsx as r } from "react/jsx-runtime";
 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 = {
-  isCurrent: !1
-};
-r.propTypes = {
-  children: t.node.isRequired,
-  isCurrent: t.bool
-};
+import { Typography as p } from "../../Typography/Typography.js";
+const d = ({ children: t, isCurrent: o = !1, ...a }) => r(i, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: r(p, { variant: "pi", textColor: "neutral800", fontWeight: o ? "bold" : "normal", "aria-current": o, ...a, children: t }) });
+d.displayName = "Crumb";
 export {
-  r as Crumb
+  d as Crumb
 };

package/dist/v2/Breadcrumbs/CrumbLink.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),a=require("prop-types"),i=require("styled-components"),l=require("../../BaseLink/BaseLink.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=o(n),r=o(a),u=o(i),d=u.default(l.BaseLink)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("styled-components"),s=require("../../BaseLink/BaseLink.cjs"),i=e=>e&&e.__esModule?e:{default:e},l=i(n),u=l.default(s.BaseLink)`
   border-radius: ${({theme:e})=>e.borderRadius};
   color: ${({theme:e})=>e.colors.neutral600};
   font-size: ${({theme:e})=>e.fontSizes[1]};
@@ -11,4 +11,4 @@
     background-color: ${({theme:e})=>e.colors.neutral200};
     color: ${({theme:e})=>e.colors.neutral700};
   }
-`,t=({children:e,...s})=>c.default.createElement(d,{...s},e);t.displayName="CrumbLink";t.defaultProps={to:void 0};t.propTypes={children:r.default.node.isRequired,to:r.default.string};exports.CrumbLink=t;
+`,o=({children:e,...r})=>t.jsx(u,{...r,children:e});o.displayName="CrumbLink";exports.CrumbLink=o;

package/dist/v2/Breadcrumbs/CrumbLink.js

@@ -1,8 +1,7 @@
-import i from "react";
-import e from "prop-types";
-import s from "styled-components";
+import { jsx as e } from "react/jsx-runtime";
+import i from "styled-components";
 import { BaseLink as n } from "../../BaseLink/BaseLink.js";
-const l = s(n)`
+const s = i(n)`
   border-radius: ${({ theme: o }) => o.borderRadius};
   color: ${({ theme: o }) => o.colors.neutral600};
   font-size: ${({ theme: o }) => o.fontSizes[1]};
@@ -15,15 +14,8 @@ const l = s(n)`
     background-color: ${({ theme: o }) => o.colors.neutral200};
     color: ${({ theme: o }) => o.colors.neutral700};
   }
-`, r = ({ children: o, ...t }) => /* @__PURE__ */ i.createElement(l, { ...t }, o);
-r.displayName = "CrumbLink";
-r.defaultProps = {
-  to: void 0
-};
-r.propTypes = {
-  children: e.node.isRequired,
-  to: e.string
-};
+`, t = ({ children: o, ...r }) => e(s, { ...r, children: o });
+t.displayName = "CrumbLink";
 export {
-  r as CrumbLink
+  t as CrumbLink
 };

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs

@@ -1,8 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),s=require("@strapi/icons"),a=require("prop-types"),c=require("styled-components"),i=require("../../Button/Button.cjs"),d=require("../SimpleMenu/SimpleMenu.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=u(l),t=u(a),p=u(c),f=p.default(i.Button)`
-  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("styled-components"),s=require("../SimpleMenu/SimpleMenu.cjs"),l=require("../../Button/Button.cjs"),r=e=>e&&e.__esModule?e:{default:e},i=r(o),c=i.default(l.Button)`
+  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[2]}`};
+  height: unset;
 
   :hover,
   :focus {
     background-color: ${({theme:e})=>e.colors.neutral200};
   }
-`,o=({children:e,...r})=>n.default.createElement(d.SimpleMenu,{noBorder:!0,icon:n.default.createElement(s.CarretDown,null),as:f,size:"S",...r},e);o.displayName="CrumbSimpleMenu";o.propTypes={"aria-label":t.default.string.isRequired,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired};exports.CrumbSimpleMenu=o;
+`,t=({children:e,...u})=>n.jsx(s.SimpleMenu,{endIcon:null,as:c,size:"S",...u,children:e});t.displayName="CrumbSimpleMenu";exports.CrumbSimpleMenu=t;

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js

@@ -1,22 +1,17 @@
-import o from "react";
-import { CarretDown as i } from "@strapi/icons";
-import r from "prop-types";
-import p from "styled-components";
-import { Button as m } from "../../Button/Button.js";
-import { SimpleMenu as a } from "../SimpleMenu/SimpleMenu.js";
-const l = p(m)`
-  padding: ${({ theme: e }) => `${e.spaces[1]} ${e.spaces[3]}`};
+import { jsx as r } from "react/jsx-runtime";
+import n from "styled-components";
+import { SimpleMenu as t } from "../SimpleMenu/SimpleMenu.js";
+import { Button as s } from "../../Button/Button.js";
+const m = n(s)`
+  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[2]}`};
+  height: unset;
 
   :hover,
   :focus {
-    background-color: ${({ theme: e }) => e.colors.neutral200};
+    background-color: ${({ theme: o }) => o.colors.neutral200};
   }
-`, t = ({ children: e, ...n }) => /* @__PURE__ */ o.createElement(a, { noBorder: !0, icon: /* @__PURE__ */ o.createElement(i, null), as: l, size: "S", ...n }, e);
-t.displayName = "CrumbSimpleMenu";
-t.propTypes = {
-  "aria-label": r.string.isRequired,
-  children: r.oneOfType([r.arrayOf(r.node), r.node]).isRequired
-};
+`, i = ({ children: o, ...e }) => r(t, { endIcon: null, as: m, size: "S", ...e, children: o });
+i.displayName = "CrumbSimpleMenu";
 export {
-  t as CrumbSimpleMenu
+  i as CrumbSimpleMenu
 };

package/dist/v2/Breadcrumbs/Divider.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),o=require("../../Box/Box.cjs"),i=require("../../Typography/Typography.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(a),r=()=>t.default.createElement(o.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1},t.default.createElement(i.Typography,{variant:"pi",textColor:"neutral500"},"/"));r.displayName="Divider";exports.Divider=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../Box/Box.cjs"),t=require("../../Typography/Typography.cjs"),r=()=>e.jsx(i.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1,children:e.jsx(t.Typography,{variant:"pi",textColor:"neutral500",children:"/"})});r.displayName="Divider";exports.Divider=r;

package/dist/v2/Breadcrumbs/Divider.js

@@ -1,8 +1,8 @@
-import e from "react";
-import { Box as r } from "../../Box/Box.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Box as i } from "../../Box/Box.js";
 import { Typography as t } from "../../Typography/Typography.js";
-const i = () => /* @__PURE__ */ e.createElement(r, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1 }, /* @__PURE__ */ e.createElement(t, { variant: "pi", textColor: "neutral500" }, "/"));
-i.displayName = "Divider";
+const e = () => r(i, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1, children: r(t, { variant: "pi", textColor: "neutral500", children: "/" }) });
+e.displayName = "Divider";
 export {
-  i as Divider
+  e as Divider
 };

package/dist/v2/Breadcrumbs/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./Breadcrumbs.cjs"),e=require("./Crumb.cjs"),u=require("./CrumbLink.cjs"),m=require("./CrumbSimpleMenu.cjs");exports.Breadcrumbs=r.Breadcrumbs;exports.Crumb=e.Crumb;exports.CrumbLink=u.CrumbLink;exports.CrumbSimpleMenu=m.CrumbSimpleMenu;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Breadcrumbs.cjs"),e=require("./Crumb.cjs"),u=require("./CrumbLink.cjs"),m=require("./CrumbSimpleMenu.cjs");exports.Breadcrumbs=r.Breadcrumbs;exports.Crumb=e.Crumb;exports.CrumbLink=u.CrumbLink;exports.CrumbSimpleMenu=m.CrumbSimpleMenu;

package/dist/v2/Link/Link.cjs

@@ -1,23 +1,25 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),y=require("@strapi/icons"),m=require("prop-types"),g=require("styled-components"),h=require("../../BaseLink/BaseLink.cjs"),v=require("../../Box/Box.cjs"),L=require("../../themes/utils.cjs"),k=require("../../Typography/Typography.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(f),a=l(m),u=l(g),q=u.default(h.BaseLink)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),d=require("@strapi/icons"),f=require("styled-components"),y=require("../../themes/utils.cjs"),m=require("../../BaseLink/BaseLink.cjs"),x=require("../../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},g=i(p),k=i(f),q=k.default(m.BaseLink)`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
+  gap: ${({theme:e})=>e.spaces[2]};
   pointer-events: ${({disabled:e})=>e?"none":void 0};
 
-  svg path {
-    fill: ${({disabled:e,theme:r})=>e?r.colors.neutral600:r.colors.primary600};
-  }
-
   svg {
     font-size: ${10/16}rem;
+
+    path {
+      fill: ${({disabled:e,theme:r})=>e?r.colors.neutral600:r.colors.primary600};
+    }
+  }
+
+  &:hover {
+    color: ${({theme:e})=>e.colors.primary500};
   }
 
-  &:hover,
   &:active {
-    color: ${({theme:e})=>e.colors.primary800};
+    color: ${({theme:e})=>e.colors.primary700};
   }
 
-  ${L.buttonFocusStyle};
-`,s=u.default(v.Box)`
-  display: flex;
-`,n=t.default.forwardRef(({children:e,href:r,disabled:i,startIcon:d,endIcon:o,...c},p)=>t.default.createElement(q,{ref:p,href:r,disabled:i,...c},d&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingRight:2},d),t.default.createElement(k.Typography,{textColor:i?"neutral600":"primary600"},e),o&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingLeft:2},o),r&&!o&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingLeft:2},t.default.createElement(y.ExternalLink,null))));n.displayName="Link";n.defaultProps={as:void 0,href:void 0,disabled:!1,startIcon:void 0,endIcon:void 0};n.propTypes={as:a.default.elementType,children:a.default.node.isRequired,disabled:a.default.bool,endIcon:a.default.element,href:a.default.string,startIcon:a.default.element};exports.Link=n;
+  ${y.buttonFocusStyle};
+`,l=g.default.forwardRef(({children:e,href:r,disabled:o=!1,startIcon:a,endIcon:n,isExternal:s=!0,...c},u)=>t.jsxs(q,{ref:u,href:r,disabled:o,isExternal:s,...c,children:[a,t.jsx(x.Typography,{textColor:o?"neutral600":"primary600",children:e}),n,r&&!n&&s&&t.jsx(d.ExternalLink,{})]}));l.displayName="Link";exports.Link=l;

package/dist/v2/Link/Link.js

@@ -1,50 +1,36 @@
-import r from "react";
-import { ExternalLink as c } from "@strapi/icons";
-import t from "prop-types";
-import s from "styled-components";
-import { BaseLink as f } from "../../BaseLink/BaseLink.js";
-import { Box as y } from "../../Box/Box.js";
-import { buttonFocusStyle as u } from "../../themes/utils.js";
-import { Typography as v } from "../../Typography/Typography.js";
-const g = s(f)`
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import m from "react";
+import { ExternalLink as f } from "@strapi/icons";
+import c from "styled-components";
+import { buttonFocusStyle as y } from "../../themes/utils.js";
+import { BaseLink as d } from "../../BaseLink/BaseLink.js";
+import { Typography as u } from "../../Typography/Typography.js";
+const x = c(d)`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  pointer-events: ${({ disabled: e }) => e ? "none" : void 0};
-
-  svg path {
-    fill: ${({ disabled: e, theme: o }) => e ? o.colors.neutral600 : o.colors.primary600};
-  }
+  gap: ${({ theme: r }) => r.spaces[2]};
+  pointer-events: ${({ disabled: r }) => r ? "none" : void 0};
 
   svg {
     font-size: ${10 / 16}rem;
+
+    path {
+      fill: ${({ disabled: r, theme: o }) => r ? o.colors.neutral600 : o.colors.primary600};
+    }
+  }
+
+  &:hover {
+    color: ${({ theme: r }) => r.colors.primary500};
   }
 
-  &:hover,
   &:active {
-    color: ${({ theme: e }) => e.colors.primary800};
+    color: ${({ theme: r }) => r.colors.primary700};
   }
 
-  ${u};
-`, a = s(y)`
-  display: flex;
-`, i = r.forwardRef(({ children: e, href: o, disabled: l, startIcon: p, endIcon: n, ...d }, m) => /* @__PURE__ */ r.createElement(g, { ref: m, href: o, disabled: l, ...d }, p && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingRight: 2 }, p), /* @__PURE__ */ r.createElement(v, { textColor: l ? "neutral600" : "primary600" }, e), n && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingLeft: 2 }, n), o && !n && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingLeft: 2 }, /* @__PURE__ */ r.createElement(c, null))));
-i.displayName = "Link";
-i.defaultProps = {
-  as: void 0,
-  href: void 0,
-  disabled: !1,
-  startIcon: void 0,
-  endIcon: void 0
-};
-i.propTypes = {
-  as: t.elementType,
-  children: t.node.isRequired,
-  disabled: t.bool,
-  endIcon: t.element,
-  href: t.string,
-  startIcon: t.element
-};
+  ${y};
+`, $ = m.forwardRef(({ children: r, href: o, disabled: e = !1, startIcon: a, endIcon: t, isExternal: i = !0, ...l }, p) => s(x, { ref: p, href: o, disabled: e, isExternal: i, ...l, children: [a, n(u, { textColor: e ? "neutral600" : "primary600", children: r }), t, o && !t && i && n(f, {})] }));
+$.displayName = "Link";
 export {
-  i as Link
+  $ as Link
 };

package/dist/v2/Link/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Link.cjs");exports.Link=e.Link;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Link.cjs");exports.Link=e.Link;

package/dist/v2/LinkButton/LinkButton.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),h=require("react"),x=require("styled-components"),j=require("../../BaseButton/BaseButton.cjs"),d=require("../../BaseLink/BaseLink.cjs"),t=require("../../Button/utils.cjs"),l=require("../../Flex/Flex.cjs"),b=require("../../Typography/Typography.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},L=c(h),k=c(x),v=k.default(j.BaseButtonWrapper)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),b=require("react"),x=require("styled-components"),t=require("../../Button/utils.cjs"),B=require("../../BaseButton/BaseButton.cjs"),s=require("../../BaseLink/BaseLink.cjs"),l=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},v=c(b),k=c(x),q=k.default(B.BaseButtonWrapper)`
   text-decoration: none;
 
   &[aria-disabled='true'] {
@@ -17,4 +17,4 @@
   }
 
   ${t.getVariantStyle}
-`,p=L.default.forwardRef(({variant:e="default",startIcon:r,endIcon:i,disabled:o=!1,children:g,size:a="S",as:y=d.BaseLink,...f},B)=>{const s=a==="S"?2:"10px",u=4;return n.jsxs(v,{ref:B,"aria-disabled":o,size:a,variant:e,background:"buttonPrimary600",borderColor:"buttonPrimary600",hasRadius:!0,gap:2,inline:!0,paddingBottom:s,paddingLeft:u,paddingRight:u,paddingTop:s,pointerEvents:o?"none":void 0,...f,as:y||d.BaseLink,children:[r&&n.jsx(l.Flex,{"aria-hidden":!0,children:r}),n.jsx(b.Typography,{variant:a==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:g}),i&&n.jsx(l.Flex,{"aria-hidden":!0,children:i})]})});p.displayName="LinkButton";exports.LinkButton=p;
+`,p=v.default.forwardRef(({variant:e="default",startIcon:i,endIcon:a,disabled:o=!1,children:g,size:r="S",as:f=s.BaseLink,...y},h)=>{const d=r==="S"?2:"10px",u=4;return n.jsxs(q,{ref:h,"aria-disabled":o,size:r,variant:e,background:"buttonPrimary600",borderColor:"buttonPrimary600",hasRadius:!0,gap:2,inline:!0,paddingBottom:d,paddingLeft:u,paddingRight:u,paddingTop:d,pointerEvents:o?"none":void 0,...y,as:f||s.BaseLink,children:[i&&n.jsx(l.Flex,{"aria-hidden":!0,children:i}),n.jsx(S.Typography,{variant:r==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:g}),a&&n.jsx(l.Flex,{"aria-hidden":!0,children:a})]})});p.displayName="LinkButton";exports.LinkButton=p;