@strapi/design-system 1.7.8 → 1.7.10

package/dist/Alert/Alert.cjs

@@ -1,35 +1,29 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("@strapi/icons"),p=require("styled-components"),l=require("./utils.cjs"),g=require("../themes/utils.cjs"),t=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),i=require("../Typography/Typography.cjs"),j=e=>e&&e.__esModule?e:{default:e},d=j(p),B=d.default(t.Box)`
-  flex: 1;
-  flex-wrap: wrap;
-  display: flex;
-  flex-direction: row;
-`,C=d.default(t.Box)`
-  border: 1px solid ${l.handleBorderColor};
-  background: ${l.handleBackgroundColor};
-  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
-`,y=d.default.button`
-  border: none;
-  background: transparent;
-  font-size: ${12/16}rem;
-  svg path {
-    fill: ${({theme:e})=>e.colors.neutral700};
-  }
-  margin-top: ${({theme:e})=>e.spaces[1]};
-  ${g.buttonFocusStyle};
-`,$=d.default(t.Box)`
-  font-size: ${20/16}rem;
-  svg path {
-    fill: ${l.handleIconColor};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("@strapi/icons"),p=require("styled-components"),l=require("./utils.cjs"),f=require("../themes/utils.cjs"),u=require("../Box/Box.cjs"),a=require("../Flex/Flex.cjs"),d=require("../Typography/Typography.cjs"),C=e=>e&&e.__esModule?e:{default:e},i=C(p),j=i.default(u.Box)`
+  svg {
+    height: 100%;
+    width: 100%;
+
+    path {
+      fill: ${({theme:e})=>e.colors.neutral700};
+    }
   }
-`,b=({variant:e,...o})=>e==="success"?r.jsx(s.CheckCircle,{...o}):e==="danger"||e==="warning"?r.jsx(s.ExclamationMarkCircle,{...o}):r.jsx(s.Information,{...o}),m=d.default(t.Box)`
-  // Checked with the designers, validated
-  padding-top: 1px;
 
-  & a > span {
-    color: ${l.handleIconColor};
+  ${f.buttonFocusStyle};
+`,b=i.default(a.Flex)`
+  svg {
+    height: 100%;
+    width: 100%;
 
-    svg path {
+    path {
       fill: ${l.handleIconColor};
     }
   }
-`,q=({title:e,children:o,variant:n="default",onClose:c,closeLabel:u,titleAs:x="p",action:a,...h})=>r.jsx(C,{hasRadius:!0,paddingLeft:5,paddingRight:6,paddingTop:5,variant:n,...h,children:r.jsxs(f.Flex,{alignItems:"flex-start",children:[r.jsx($,{paddingRight:3,variant:n,children:r.jsx(b,{variant:n,"aria-hidden":!0})}),r.jsxs(B,{role:n==="danger"?"alert":"status",children:[r.jsx(t.Box,{paddingBottom:2,paddingRight:1,children:r.jsx(i.Typography,{fontWeight:"bold",textColor:"neutral800",as:x,children:e})}),r.jsx(t.Box,{paddingBottom:a?2:5,paddingRight:2,children:r.jsx(i.Typography,{as:"p",textColor:"neutral800",children:o})}),a&&r.jsx(m,{paddingBottom:5,variant:n,children:a})]}),r.jsx(y,{onClick:c,"aria-label":u,children:r.jsx(s.Cross,{"aria-hidden":!0})})]})});exports.Alert=q;
+`,m=({variant:e,...o})=>e==="success"?r.jsx(n.CheckCircle,{...o}):e==="danger"||e==="warning"?r.jsx(n.ExclamationMarkCircle,{...o}):r.jsx(n.Information,{...o}),y=i.default(u.Box)`
+  & a > span {
+    color: ${l.handleIconColor};
+  }
+
+  svg path {
+    fill: ${l.handleIconColor};
+  }
+`,w=({title:e,children:o,variant:t="default",onClose:c,closeLabel:h,titleAs:g="p",action:s,...x})=>r.jsxs(a.Flex,{alignItems:"flex-start",background:l.handleBackgroundColor(t),borderColor:l.handleBorderColor(t),boxShadow:"filterShadow",gap:3,hasRadius:!0,padding:5,paddingRight:6,variant:t,...x,children:[r.jsx(b,{height:`${20/16}rem`,shrink:0,variant:t,width:`${20/16}rem`,children:r.jsx(m,{"aria-hidden":!0,variant:t})}),r.jsxs(a.Flex,{alignItems:"start",gap:s?2:1,wrap:"wrap",role:t==="danger"?"alert":"status",width:"100%",children:[r.jsx(d.Typography,{fontWeight:"bold",textColor:"neutral800",as:g,children:e}),r.jsx(d.Typography,{as:"p",textColor:"neutral800",children:o}),s&&r.jsx(y,{variant:t,children:s})]}),r.jsx(j,{as:"button",background:"transparent",borderColor:void 0,height:`${12/16}rem`,marginTop:1,onClick:c,width:`${12/16}rem`,"aria-label":h,children:r.jsx(n.Cross,{"aria-hidden":!0})})]});exports.Alert=w;

package/dist/Alert/Alert.js

@@ -1,46 +1,40 @@
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { Cross as f, CheckCircle as m, ExclamationMarkCircle as u, Information as x } from "@strapi/icons";
-import d from "styled-components";
-import { handleBorderColor as C, handleBackgroundColor as $, handleIconColor as l } from "./utils.js";
-import { buttonFocusStyle as b } from "../themes/utils.js";
-import { Box as t } from "../Box/Box.js";
-import { Flex as B } from "../Flex/Flex.js";
-import { Typography as s } from "../Typography/Typography.js";
-const w = d(t)`
-  flex: 1;
-  flex-wrap: wrap;
-  display: flex;
-  flex-direction: row;
-`, k = d(t)`
-  border: 1px solid ${C};
-  background: ${$};
-  box-shadow: ${({ theme: o }) => o.shadows.filterShadow};
-`, y = d.button`
-  border: none;
-  background: transparent;
-  font-size: ${12 / 16}rem;
-  svg path {
-    fill: ${({ theme: o }) => o.colors.neutral700};
-  }
-  margin-top: ${({ theme: o }) => o.spaces[1]};
-  ${b};
-`, A = d(t)`
-  font-size: ${20 / 16}rem;
-  svg path {
-    fill: ${l};
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { Cross as u, CheckCircle as f, ExclamationMarkCircle as C, Information as x } from "@strapi/icons";
+import a from "styled-components";
+import { handleIconColor as n, handleBackgroundColor as w, handleBorderColor as b } from "./utils.js";
+import { buttonFocusStyle as $ } from "../themes/utils.js";
+import { Box as s } from "../Box/Box.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { Typography as h } from "../Typography/Typography.js";
+const k = a(s)`
+  svg {
+    height: 100%;
+    width: 100%;
+
+    path {
+      fill: ${({ theme: o }) => o.colors.neutral700};
+    }
   }
-`, I = ({ variant: o, ...e }) => o === "success" ? r(m, { ...e }) : o === "danger" || o === "warning" ? r(u, { ...e }) : r(x, { ...e }), R = d(t)`
-  // Checked with the designers, validated
-  padding-top: 1px;
 
-  & a > span {
-    color: ${l};
+  ${$};
+`, I = a(i)`
+  svg {
+    height: 100%;
+    width: 100%;
 
-    svg path {
-      fill: ${l};
+    path {
+      fill: ${n};
     }
   }
-`, L = ({ title: o, children: e, variant: n = "default", onClose: p, closeLabel: c, titleAs: h = "p", action: i, ...g }) => r(k, { hasRadius: !0, paddingLeft: 5, paddingRight: 6, paddingTop: 5, variant: n, ...g, children: a(B, { alignItems: "flex-start", children: [r(A, { paddingRight: 3, variant: n, children: r(I, { variant: n, "aria-hidden": !0 }) }), a(w, { role: n === "danger" ? "alert" : "status", children: [r(t, { paddingBottom: 2, paddingRight: 1, children: r(s, { fontWeight: "bold", textColor: "neutral800", as: h, children: o }) }), r(t, { paddingBottom: i ? 2 : 5, paddingRight: 2, children: r(s, { as: "p", textColor: "neutral800", children: e }) }), i && r(R, { paddingBottom: 5, variant: n, children: i })] }), r(y, { onClick: p, "aria-label": c, children: r(f, { "aria-hidden": !0 }) })] }) });
+`, B = ({ variant: o, ...e }) => o === "success" ? r(f, { ...e }) : o === "danger" || o === "warning" ? r(C, { ...e }) : r(x, { ...e }), y = a(s)`
+  & a > span {
+    color: ${n};
+  }
+
+  svg path {
+    fill: ${n};
+  }
+`, M = ({ title: o, children: e, variant: t = "default", onClose: c, closeLabel: m, titleAs: g = "p", action: l, ...p }) => d(i, { alignItems: "flex-start", background: w(t), borderColor: b(t), boxShadow: "filterShadow", gap: 3, hasRadius: !0, padding: 5, paddingRight: 6, variant: t, ...p, children: [r(I, { height: `${20 / 16}rem`, shrink: 0, variant: t, width: `${20 / 16}rem`, children: r(B, { "aria-hidden": !0, variant: t }) }), d(i, { alignItems: "start", gap: l ? 2 : 1, wrap: "wrap", role: t === "danger" ? "alert" : "status", width: "100%", children: [r(h, { fontWeight: "bold", textColor: "neutral800", as: g, children: o }), r(h, { as: "p", textColor: "neutral800", children: e }), l && r(y, { variant: t, children: l })] }), r(k, { as: "button", background: "transparent", borderColor: void 0, height: `${12 / 16}rem`, marginTop: 1, onClick: c, width: `${12 / 16}rem`, "aria-label": m, children: r(u, { "aria-hidden": !0 }) })] });
 export {
-  L as Alert
+  M as Alert
 };

package/dist/Alert/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=({theme:r,variant:o})=>o==="danger"?r.colors.danger100:o==="success"?r.colors.success100:o==="warning"?r.colors.warning100:r.colors.primary100,s=({theme:r,variant:o})=>o==="danger"?r.colors.danger200:o==="success"?r.colors.success200:o==="warning"?r.colors.warning200:r.colors.primary200,c=({theme:r,variant:o})=>o==="danger"?r.colors.danger700:o==="success"?r.colors.success700:o==="warning"?r.colors.warning700:r.colors.primary700;exports.handleBackgroundColor=n;exports.handleBorderColor=s;exports.handleIconColor=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=r=>{switch(r){case"danger":return"danger100";case"success":return"success100";case"warning":return"warning100";default:return"primary100"}},e=r=>o(r).replace("100","200"),c=({theme:r,variant:n})=>n==="danger"?r.colors.danger700:n==="success"?r.colors.success700:n==="warning"?r.colors.warning700:r.colors.primary700;exports.handleBackgroundColor=o;exports.handleBorderColor=e;exports.handleIconColor=c;

package/dist/Alert/utils.js

@@ -1,6 +1,17 @@
-const s = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger100 : o === "success" ? r.colors.success100 : o === "warning" ? r.colors.warning100 : r.colors.primary100, n = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger200 : o === "success" ? r.colors.success200 : o === "warning" ? r.colors.warning200 : r.colors.primary200, c = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger700 : o === "success" ? r.colors.success700 : o === "warning" ? r.colors.warning700 : r.colors.primary700;
+const s = (r) => {
+  switch (r) {
+    case "danger":
+      return "danger100";
+    case "success":
+      return "success100";
+    case "warning":
+      return "warning100";
+    default:
+      return "primary100";
+  }
+}, c = (r) => s(r).replace("100", "200"), e = ({ theme: r, variant: n }) => n === "danger" ? r.colors.danger700 : n === "success" ? r.colors.success700 : n === "warning" ? r.colors.warning700 : r.colors.primary700;
 export {
   s as handleBackgroundColor,
-  n as handleBorderColor,
-  c as handleIconColor
+  c as handleBorderColor,
+  e as handleIconColor
 };

package/dist/Button/Button.cjs

@@ -1,16 +1,21 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),j=require("@strapi/icons"),c=require("styled-components"),u=require("./constants.cjs"),r=require("./utils.cjs"),v=require("../BaseButton/BaseButton.cjs"),_=require("../Box/Box.cjs"),$=require("../Typography/Typography.cjs"),T=require("../Flex/Flex.cjs"),f=e=>e&&e.__esModule?e:{default:e},D=f(S),g=f(c),R=c.keyframes`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),v=require("@strapi/icons"),c=require("styled-components"),l=require("./constants.cjs"),r=require("./utils.cjs"),j=require("../BaseButton/BaseButton.cjs"),_=require("../Box/Box.cjs"),$=require("../Typography/Typography.cjs"),T=require("../Flex/Flex.cjs"),f=e=>e&&e.__esModule?e:{default:e},D=f(S),g=f(c),R=c.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,C=g.default.div`
+`,w=g.default(v.Loader)`
   animation: ${R} 2s infinite linear;
   will-change: transform;
-`,y=g.default(v.BaseButton)`
+`,h=g.default(j.BaseButton)`
   height: ${({theme:e,size:n})=>e.sizes.button[n]};
 
+  svg {
+    height: ${12/16}rem;
+    width: auto;
+  }
+
   &[aria-disabled='true'] {
     ${r.getDisabledStyle}
 
@@ -28,4 +33,4 @@
   }
 
   ${r.getVariantStyle}
-`,p=D.default.forwardRef(({variant:e=u.DEFAULT,startIcon:n,endIcon:s,disabled:h=!1,children:b,onClick:d,size:l=u.BUTTON_SIZES[0],loading:a=!1,fullWidth:i=!1,...m},x)=>{const o=h||a,B=q=>{!o&&d&&d(q)};return t.jsxs(y,{ref:x,"aria-disabled":o,disabled:o,size:l,variant:e,onClick:B,fullWidth:i,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:i,justifyContent:i?"center":void 0,paddingLeft:4,paddingRight:4,width:i?"100%":void 0,...m,children:[(n||a)&&t.jsx(_.Box,{"aria-hidden":!0,children:a?t.jsx(C,{children:t.jsx(j.Loader,{})}):n}),t.jsx($.Typography,{variant:l==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,textColor:"buttonNeutral0",children:b}),s&&t.jsx(T.Flex,{"aria-hidden":!0,children:s})]})});p.displayName="Button";exports.Button=p;exports.ButtonWrapper=y;
+`,y=D.default.forwardRef(({variant:e=l.DEFAULT,startIcon:n,endIcon:s,disabled:b=!1,children:p,onClick:d,size:u=l.BUTTON_SIZES[0],loading:a=!1,fullWidth:i=!1,...m},B)=>{const o=b||a,x=q=>{!o&&d&&d(q)};return t.jsxs(h,{ref:B,"aria-disabled":o,disabled:o,size:u,variant:e,onClick:x,fullWidth:i,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:i,justifyContent:i?"center":void 0,paddingLeft:4,paddingRight:4,width:i?"100%":void 0,...m,children:[(n||a)&&t.jsx(_.Box,{"aria-hidden":!0,children:a?t.jsx(w,{}):n}),t.jsx($.Typography,{variant:u==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,textColor:"buttonNeutral0",children:p}),s&&t.jsx(T.Flex,{"aria-hidden":!0,children:s})]})});y.displayName="Button";exports.Button=y;exports.ButtonWrapper=h;

package/dist/Button/Button.js

@@ -1,36 +1,41 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
 import b from "react";
 import { Loader as y } from "@strapi/icons";
-import s, { keyframes as v } from "styled-components";
-import { DEFAULT as B, BUTTON_SIZES as S } from "./constants.js";
-import { getDisabledStyle as l, getHoverStyle as $, getActiveStyle as x, getVariantStyle as C } from "./utils.js";
+import f, { keyframes as v } from "styled-components";
+import { DEFAULT as $, BUTTON_SIZES as B } from "./constants.js";
+import { getDisabledStyle as s, getHoverStyle as S, getActiveStyle as x, getVariantStyle as C } from "./utils.js";
 import { BaseButton as k } from "../BaseButton/BaseButton.js";
-import { Box as L } from "../Box/Box.js";
-import { Typography as T } from "../Typography/Typography.js";
-import { Flex as j } from "../Flex/Flex.js";
-const w = v`
+import { Box as w } from "../Box/Box.js";
+import { Typography as L } from "../Typography/Typography.js";
+import { Flex as T } from "../Flex/Flex.js";
+const j = v`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`, D = s.div`
-  animation: ${w} 2s infinite linear;
+`, A = f(y)`
+  animation: ${j} 2s infinite linear;
   will-change: transform;
-`, N = s(k)`
-  height: ${({ theme: i, size: e }) => i.sizes.button[e]};
+`, D = f(k)`
+  height: ${({ theme: i, size: t }) => i.sizes.button[t]};
+
+  svg {
+    height: ${12 / 16}rem;
+    width: auto;
+  }
 
   &[aria-disabled='true'] {
-    ${l}
+    ${s}
 
     &:active {
-      ${l}
+      ${s}
     }
   }
 
   &:hover {
-    ${$}
+    ${S}
   }
 
   &:active {
@@ -38,14 +43,14 @@ const w = v`
   }
 
   ${C}
-`, R = b.forwardRef(({ variant: i = B, startIcon: e, endIcon: n, disabled: f = !1, children: p, onClick: d, size: m = S[0], loading: o = !1, fullWidth: r = !1, ...c }, u) => {
-  const a = f || o;
-  return h(N, { ref: u, "aria-disabled": a, disabled: a, size: m, variant: i, onClick: (g) => {
-    !a && d && d(g);
-  }, fullWidth: r, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: r, justifyContent: r ? "center" : void 0, paddingLeft: 4, paddingRight: 4, width: r ? "100%" : void 0, ...c, children: [(e || o) && t(L, { "aria-hidden": !0, children: o ? t(D, { children: t(y, {}) }) : e }), t(T, { variant: m === "S" ? "pi" : void 0, fontWeight: "bold", lineHeight: 0, textColor: "buttonNeutral0", children: p }), n && t(j, { "aria-hidden": !0, children: n })] });
+`, N = b.forwardRef(({ variant: i = $, startIcon: t, endIcon: n, disabled: l = !1, children: p, onClick: d, size: m = B[0], loading: o = !1, fullWidth: e = !1, ...c }, h) => {
+  const a = l || o;
+  return g(D, { ref: h, "aria-disabled": a, disabled: a, size: m, variant: i, onClick: (u) => {
+    !a && d && d(u);
+  }, fullWidth: e, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: e, justifyContent: e ? "center" : void 0, paddingLeft: 4, paddingRight: 4, width: e ? "100%" : void 0, ...c, children: [(t || o) && r(w, { "aria-hidden": !0, children: o ? r(A, {}) : t }), r(L, { variant: m === "S" ? "pi" : void 0, fontWeight: "bold", lineHeight: 0, textColor: "buttonNeutral0", children: p }), n && r(T, { "aria-hidden": !0, children: n })] });
 });
-R.displayName = "Button";
+N.displayName = "Button";
 export {
-  R as Button,
-  N as ButtonWrapper
+  N as Button,
+  D as ButtonWrapper
 };

package/dist/CarouselInput/CarouselImage.cjs

@@ -1,3 +1,3 @@
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),u=require("styled-components"),n=require("../Typography/utils.cjs"),a=require("../Box/Box.cjs"),c=require("../Tooltip/Tooltip.cjs"),d=e=>e&&e.__esModule?e:{default:e},g=d(u),r=g.default(a.Box)`
   ${n.ellipsisStyle({ellipsis:!0})}
-`,m=e=>{const[s,o]=l.useState(!1),i=()=>{o(!0)};return s?t.jsx(c.Tooltip,{description:e.alt??"",children:t.jsx(r,{as:"img",height:"100%",...e})}):t.jsx(r,{as:"img",height:"100%",...e,onError:i})};exports.CarouselImage=m;
+`,m=e=>{const[s,o]=l.useState(!1),i=()=>{o(!0)};return s?t.jsx(c.Tooltip,{description:e.alt??"",children:t.jsx(r,{as:"img",height:"100%",maxWidth:"100%",...e})}):t.jsx(r,{as:"img",height:"100%",maxWidth:"100%",...e,onError:i})};exports.CarouselImage=m;

package/dist/CarouselInput/CarouselImage.js

@@ -6,12 +6,12 @@ import { Box as n } from "../Box/Box.js";
 import { Tooltip as f } from "../Tooltip/Tooltip.js";
 const o = l(n)`
   ${a({ ellipsis: !0 })}
-`, E = (r) => {
+`, x = (r) => {
   const [e, i] = s(!1), m = () => {
     i(!0);
   };
-  return e ? t(f, { description: r.alt ?? "", children: t(o, { as: "img", height: "100%", ...r }) }) : t(o, { as: "img", height: "100%", ...r, onError: m });
+  return e ? t(f, { description: r.alt ?? "", children: t(o, { as: "img", height: "100%", maxWidth: "100%", ...r }) }) : t(o, { as: "img", height: "100%", maxWidth: "100%", ...r, onError: m });
 };
 export {
-  E as CarouselImage
+  x as CarouselImage
 };

package/dist/CarouselInput/CarouselSlide.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("../Flex/Flex.cjs"),s=({label:e,children:l,selected:r=!1,...i})=>t.jsx(o.Flex,{display:r?"flex":"none",role:"group","aria-roledescription":"slide","aria-label":e,justifyContent:"center",height:"124px",...i,children:l});exports.CarouselSlide=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("../Flex/Flex.cjs"),o=({label:e,children:i,selected:l=!1,...r})=>t.jsx(n.Flex,{alignItems:"center",display:l?"flex":"none",role:"group","aria-roledescription":"slide","aria-label":e,justifyContent:"center",height:"124px",width:"100%",...r,children:i});exports.CarouselSlide=o;

package/dist/CarouselInput/CarouselSlide.js

@@ -1,6 +1,6 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { Flex as t } from "../Flex/Flex.js";
-const s = ({ label: e, children: r, selected: o = !1, ...i }) => l(t, { display: o ? "flex" : "none", role: "group", "aria-roledescription": "slide", "aria-label": e, justifyContent: "center", height: "124px", ...i, children: r });
+const s = ({ label: e, children: r, selected: i = !1, ...l }) => o(t, { alignItems: "center", display: i ? "flex" : "none", role: "group", "aria-roledescription": "slide", "aria-label": e, justifyContent: "center", height: "124px", width: "100%", ...l, children: r });
 export {
   s as CarouselSlide
 };

package/dist/Flex/Flex.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),l=require("../Box/Box.cjs"),i=e=>e&&e.__esModule?e:{default:e},r=i(n),s={direction:!0},u=r.default(l.Box).withConfig({shouldForwardProp:(e,t)=>!s[e]&&t(e)})`
   align-items: ${({alignItems:e="center"})=>e};
-  display: ${({inline:e})=>e?"inline-flex":"flex"};
+  display: ${({display:e="flex",inline:t})=>t?"inline-flex":e};
   flex-direction: ${({direction:e="row"})=>e};
   flex-shrink: ${({shrink:e})=>e};
   flex-wrap: ${({wrap:e})=>e};

package/dist/Flex/Flex.js

@@ -7,7 +7,7 @@ const n = {
   shouldForwardProp: (e, o) => !n[e] && o(e)
 })`
   align-items: ${({ alignItems: e = "center" }) => e};
-  display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
+  display: ${({ display: e = "flex", inline: o }) => o ? "inline-flex" : e};
   flex-direction: ${({ direction: e = "row" }) => e};
   flex-shrink: ${({ shrink: e }) => e};
   flex-wrap: ${({ wrap: e }) => e};

package/dist/Layout/ActionLayout.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../Flex/Flex.cjs"),i=({startActions:r,endActions:n})=>!r||!n?null:e.jsxs(t.Flex,{justifyContent:"space-between",alignItems:"flex-start",paddingBottom:4,paddingLeft:10,paddingRight:10,children:[e.jsx(t.Flex,{gap:2,wrap:"wrap",children:r}),e.jsx(t.Flex,{gap:2,shrink:0,wrap:"wrap",children:n})]});exports.ActionLayout=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../Flex/Flex.cjs"),i=({startActions:r,endActions:n})=>!r&&!n?null:e.jsxs(t.Flex,{justifyContent:"space-between",alignItems:"flex-start",paddingBottom:4,paddingLeft:10,paddingRight:10,children:[e.jsx(t.Flex,{gap:2,wrap:"wrap",children:r}),e.jsx(t.Flex,{gap:2,shrink:0,wrap:"wrap",children:n})]});exports.ActionLayout=i;

package/dist/Layout/ActionLayout.js

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as n } from "react/jsx-runtime";
 import { Flex as r } from "../Flex/Flex.js";
-const o = ({ startActions: t, endActions: e }) => !t || !e ? null : p(r, { justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 4, paddingLeft: 10, paddingRight: 10, children: [n(r, { gap: 2, wrap: "wrap", children: t }), n(r, { gap: 2, shrink: 0, wrap: "wrap", children: e })] });
+const o = ({ startActions: t, endActions: e }) => !t && !e ? null : p(r, { justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 4, paddingLeft: 10, paddingRight: 10, children: [n(r, { gap: 2, wrap: "wrap", children: t }), n(r, { gap: 2, shrink: 0, wrap: "wrap", children: e })] });
 export {
   o as ActionLayout
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.8",
+  "version": "1.7.10",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "@radix-ui/react-dismissable-layer": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-focus-scope": "1.0.2",
-    "@strapi/ui-primitives": "^1.7.8",
+    "@strapi/ui-primitives": "^1.7.10",
     "@uiw/react-codemirror": "^4.19.16",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.7.8",
+    "@strapi/icons": "^1.7.10",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -64,5 +64,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "d82da913a5a9f8d8abd785e95f893fa4100d5793"
+  "gitHead": "c5116e561a1373177b9bfe2dc5a8a0abb1260900"
 }