@strapi/design-system 1.7.9 → 1.8.0

package/README.md

@@ -1,25 +1,13 @@
-<p align="center">
-  <a href="https://strapi.io">
-    <img src="./assets/logo.svg" width="318px" alt="Strapi logo" />
-  </a>
-</p>
-<p align="center">
-<a style='margin-right:10px' href="https://design-system.strapi.io/">Documentation</a>|<a style='margin-left:10px' href="https://design-system-git-main-strapijs.vercel.app/">Try components</a></p>
-<br />
+# Strapi Design System
 
 [![Version](https://img.shields.io/npm/v/@strapi/design-system?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)
 [![Downloads](https://img.shields.io/npm/dt/@strapi/design-system.svg?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)
 [![Discord Shield](https://img.shields.io/discord/811989166782021633?style=flat&colorA=4945ff&colorB=4945ff&label=discord&logo=discord&logoColor=f0f0ff)](https://discord.gg/strapi)
 
-# Welcome! 👋👋👋
-
-Strapi Design System provides guidelines and tools to help anyone make Strapi's contributions more cohesive and to build
-plugins more efficiently.
+<b>A UI component library for creating amazing Strapi extensions.</b>
 
 ## Installation
 
-Install Strapi Design System and its peer dependencies:
-
 ```sh
 $ yarn add react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
 
@@ -30,13 +18,17 @@ $ npm i react react-dom @strapi/design-system @strapi/icons styled-components re
 
 ## Getting Started
 
-Wrap your application with the `ThemeProvider` and pass the default `lightTheme` or `darkTheme` provided by `@strapi/design-system`.
+Wrap your application with the `DesignSystemProvider`. You can additionally pass a theme and/or locale, although you don't have to as we have default values for both.
 
 ```jsx
-import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { DesignSystemProvider, lightTheme } from '@strapi/design-system';
 
 function MyApp({ children }) {
-  return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;
+  return (
+    <DesignSystemProvider locale="en-GB" theme={lightTheme}>
+      {children}
+    </DesignSystemProvider>
+  );
 }
 
 export default App;

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/Combobox/Combobox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),pe=require("react"),P=require("@strapi/icons"),n=require("@strapi/ui-primitives"),be=require("styled-components"),xe=require("../helpers/strings.cjs"),j=require("../hooks/useControllableState.cjs"),E=require("../hooks/useId.cjs"),fe=require("../hooks/useIntersection.cjs"),ge=require("../themes/utils.cjs"),me=require("../Loader/Loader.cjs"),y=require("../Box/Box.cjs"),d=require("../Typography/Typography.cjs"),Ce=require("../Field/Field.cjs"),h=require("../Flex/Flex.cjs"),$e=require("../Field/FieldLabel.cjs"),je=require("../Field/FieldHint.cjs"),ye=require("../Field/FieldError.cjs"),Ie=e=>e&&e.__esModule?e:{default:e};function we(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(r,l,a.get?a:{enumerable:!0,get:()=>e[l]})}}return r.default=e,Object.freeze(r)}const p=we(pe),s=Ie(be),z=({children:e,clearLabel:r="clear",creatable:l=!1,createMessage:a=c=>`Create "${c}"`,defaultFilterValue:x,defaultTextValue:f,defaultOpen:D=!1,open:H,onOpenChange:L,disabled:g=!1,error:m,filterValue:M,hasMoreItems:N=!1,hint:W,id:U,label:A,labelAction:G,loading:C=!1,loadingMessage:J="Loading content...",noOptionsMessage:K=()=>"No results found",onChange:I,onClear:$,onCreateOption:w,onFilterValueChange:Q,onInputChange:q,onTextValueChange:X,onLoadMore:F,placeholder:Y="Select or enter a value",required:T=!1,startIcon:v,textValue:Z,value:R})=>{const[c,ee]=j.useControllableState({prop:H,defaultProp:D,onChange:L}),[i,V]=j.useControllableState({prop:Z,defaultProp:f,onChange:X}),[oe,O]=j.useControllableState({prop:M,defaultProp:x,onChange:Q}),k=p.useRef(null),S=p.useRef(null),re=p.useRef(null),u=E.useId(U),te=t=>{$&&!g&&(V(""),O(""),$(t),S.current.focus())},ne=t=>{ee(t)},le=t=>{V(t)},se=t=>{O(t)},ae=t=>{q&&q(t)},ie=t=>{I&&I(t)},de=E.useId(),B=`intersection-${xe.stripReactIdOfColon(de)}`,ce=t=>{F&&N&&!C&&F(t)},_=()=>{w&&i&&w(i)};fe.useIntersection(k,ce,{selectorToWatch:`#${B}`,skipWhen:!c});const ue=`${u}-hint`,he=`${u}-error`;return o.jsx(Ce.Field,{hint:W,error:m,id:u,required:T,children:o.jsxs(h.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx($e.FieldLabel,{action:G,children:A}),o.jsxs(n.Combobox.Root,{autocomplete:l?"list":"both",open:c,onOpenChange:ne,onTextValueChange:le,textValue:i,allowCustomValue:!0,disabled:g,required:T,value:R===null?void 0:R,onValueChange:ie,filterValue:oe,onFilterValueChange:se,children:[o.jsxs(Te,{$hasError:!!m,children:[o.jsxs(h.Flex,{flex:"1",as:"span",gap:3,children:[v?o.jsx(y.Box,{as:"span","aria-hidden":!0,children:v}):null,o.jsx(ve,{placeholder:Y,id:u,"aria-invalid":!!m,"aria-labelledby":`${ue} ${he}`,onChange:ae,ref:S})]}),o.jsxs(h.Flex,{as:"span",gap:3,children:[i&&$?o.jsx(Fe,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:te,"aria-disabled":g,"aria-label":r,title:r,ref:re,children:o.jsx(P.Cross,{})}):null,o.jsx(Re,{children:o.jsx(P.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Ve,{sideOffset:4,children:o.jsxs(Oe,{ref:k,children:[e,l?o.jsx(n.Combobox.CreateItem,{onPointerUp:_,onClick:_,asChild:!0,children:o.jsx(b,{children:o.jsx(d.Typography,{children:a(i??"")})})}):null,!l&&!C?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(b,{$hasHover:!1,children:o.jsx(d.Typography,{children:K(i??"")})})}):null,C?o.jsx(h.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(me.Loader,{small:!0,children:J})}):null,o.jsx(y.Box,{id:B,width:"100%",height:"1px"})]})})})]}),o.jsx(je.FieldHint,{}),o.jsx(ye.FieldError,{})]})})},qe=e=>o.jsx(z,{...e,creatable:!0}),Fe=s.default(y.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),me=require("react"),M=require("@strapi/icons"),n=require("@strapi/ui-primitives"),Ce=require("styled-components"),$e=require("../helpers/strings.cjs"),j=require("../hooks/useControllableState.cjs"),I=require("../hooks/useId.cjs"),je=require("../hooks/useIntersection.cjs"),N=require("../themes/utils.cjs"),Ie=require("../Loader/Loader.cjs"),y=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),ye=require("../Field/Field.cjs"),we=require("../Field/FieldLabel.cjs"),qe=require("../Field/FieldHint.cjs"),Fe=require("../Field/FieldError.cjs"),Te=e=>e&&e.__esModule?e:{default:e};function ve(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const p=ve(me),a=Te(Ce),H=({allowCustomValue:e,autocomplete:r,children:s,className:i,clearLabel:d="clear",creatable:l=!1,createMessage:g=$=>`Create "${$}"`,defaultFilterValue:h,defaultTextValue:w,defaultOpen:W=!1,open:U,onOpenChange:A,disabled:f=!1,error:q,filterValue:G,hasMoreItems:J=!1,id:F,isPrintableCharacter:K,loading:m=!1,loadingMessage:Q="Loading content...",noOptionsMessage:X=()=>"No results found",onChange:T,onClear:C,onCreateOption:v,onFilterValueChange:Y,onInputChange:R,onTextValueChange:Z,onLoadMore:k,placeholder:ee="Select or enter a value",required:oe=!1,size:re="M",startIcon:O,textValue:te,value:V,...ne})=>{const[$,se]=j.useControllableState({prop:U,defaultProp:W,onChange:A}),[c,S]=j.useControllableState({prop:te,defaultProp:e&&!w?V:w,onChange:Z}),[le,B]=j.useControllableState({prop:G,defaultProp:h,onChange:Y}),P=p.useRef(null),_=p.useRef(null),ie=p.useRef(null),ae=t=>{C&&!f&&(S(""),B(""),C(t),_.current.focus())},de=t=>{se(t)},ce=t=>{S(t)},ue=t=>{B(t)},he=t=>{R&&R(t)},be=t=>{T&&T(t)},pe=t=>{k&&J&&!m&&k(t)},z=()=>{v&&c&&v(c)},E=I.useId(F),xe=I.useId(),D=`intersection-${$e.stripReactIdOfColon(xe)}`;je.useIntersection(P,pe,{selectorToWatch:`#${D}`,skipWhen:!$});const ge=`${E}-hint`,fe=`${E}-error`;return o.jsxs(n.Combobox.Root,{autocomplete:r||(l?"list":"both"),onOpenChange:de,onTextValueChange:ce,textValue:c,allowCustomValue:l||e,disabled:f,required:oe,value:V,onValueChange:be,filterValue:le,onFilterValueChange:ue,isPrintableCharacter:K,children:[o.jsxs(Oe,{$hasError:!!q,$size:re,className:i,children:[o.jsxs(b.Flex,{flex:"1",as:"span",gap:3,children:[O?o.jsx(y.Box,{as:"span","aria-hidden":!0,children:O}):null,o.jsx(Ve,{placeholder:ee,id:F,"aria-invalid":!!q,"aria-describedby":`${ge} ${fe}`,onChange:he,ref:_,...ne})]}),o.jsxs(b.Flex,{as:"span",gap:3,children:[c&&C?o.jsx(ke,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:ae,"aria-disabled":f,"aria-label":d,title:d,ref:ie,children:o.jsx(M.Cross,{})}):null,o.jsx(Se,{children:o.jsx(M.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Be,{sideOffset:4,children:o.jsxs(Pe,{ref:P,children:[s,l?o.jsx(n.Combobox.CreateItem,{onPointerUp:z,onClick:z,asChild:!0,children:o.jsx(x,{children:o.jsx(u.Typography,{children:g(c??"")})})}):null,!l&&!m?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(x,{$hasHover:!1,children:o.jsx(u.Typography,{children:X(c??"")})})}):null,m?o.jsx(b.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(Ie.Loader,{small:!0,children:Q})}):null,o.jsx(y.Box,{id:D,width:"100%",height:"1px"})]})})})]})},L=({error:e,hint:r,id:s,label:i,labelAction:d,required:l=!1,...g})=>{const h=I.useId(s);return o.jsx(ye.Field,{hint:r,error:e,id:h,required:l,children:o.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx(we.FieldLabel,{action:d,children:i}),o.jsx(H,{id:h,error:e,required:l,...g}),o.jsx(qe.FieldHint,{}),o.jsx(Fe.FieldError,{})]})})},Re=e=>o.jsx(L,{...e,creatable:!0}),ke=a.default(y.Box)`
   border: none;
 
   svg {
@@ -9,7 +9,7 @@
   svg path {
     fill: ${({theme:e})=>e.colors.neutral600};
   }
-`,Te=s.default(n.Combobox.Trigger)`
+`,Oe=a.default(n.Combobox.Trigger)`
   position: relative;
   border: 1px solid ${({theme:e,$hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
   padding-right: ${({theme:e})=>e.spaces[3]};
@@ -21,6 +21,7 @@
   align-items: center;
   justify-content: space-between;
   gap: ${({theme:e})=>e.spaces[4]};
+  min-height: ${({theme:e,$size:r})=>N.getThemeSize("input")({theme:e,size:r})};
 
   &[data-disabled] {
     color: ${({theme:e})=>e.colors.neutral600};
@@ -33,12 +34,12 @@
     outline: none;
   }
 
-  ${({theme:e,$hasError:r})=>ge.inputFocusStyle()({theme:e,hasError:r})};
-`,ve=s.default(n.Combobox.TextInput)`
+  ${({theme:e,$hasError:r})=>N.inputFocusStyle()({theme:e,hasError:r})};
+`,Ve=a.default(n.Combobox.TextInput)`
   width: 100%;
   font-size: ${14/16}rem;
   color: ${({theme:e})=>e.colors.neutral800};
-  min-height: ${40/16}rem;
+  padding: 0;
   border: none;
   background-color: transparent;
 
@@ -49,7 +50,7 @@
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`,Re=s.default(n.Combobox.Icon)`
+`,Se=a.default(n.Combobox.Icon)`
   & > svg {
     width: ${6/16}rem;
 
@@ -61,7 +62,7 @@
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`,Ve=s.default(n.Combobox.Content)`
+`,Be=a.default(n.Combobox.Content)`
   background: ${({theme:e})=>e.colors.neutral0};
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
@@ -70,9 +71,9 @@
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({theme:e})=>e.zIndices[1]};
-`,Oe=s.default(n.Combobox.Viewport)`
+`,Pe=a.default(n.Combobox.Viewport)`
   padding: ${({theme:e})=>e.spaces[1]};
-`,ke=p.forwardRef(({children:e,value:r,disabled:l,textValue:a,...x},f)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:l,textValue:a,children:o.jsx(b,{ref:f,...x,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(d.Typography,{children:e})})})})),b=s.default.div`
+`,_e=p.forwardRef(({children:e,value:r,disabled:s,textValue:i,...d},l)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:s,textValue:i,children:o.jsx(x,{ref:l,...d,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(u.Typography,{children:e})})})})),x=a.default.div`
   width: 100%;
   border: none;
   text-align: left;
@@ -82,10 +83,10 @@
   border-radius: ${({theme:e})=>e.borderRadius};
   user-select: none;
 
-  &[data-selected] {
+  &[data-state='checked'] {
     background-color: ${({theme:e})=>e.colors.primary100};
 
-    ${d.Typography} {
+    ${u.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: bold;
     }
@@ -98,9 +99,9 @@
   }
 
   &[data-highlighted] {
-    ${d.Typography} {
+    ${u.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: bold;
     }
   }
-`;exports.Combobox=z;exports.CreatableCombobox=qe;exports.Option=ke;exports.OptionBox=b;
+`;exports.Combobox=L;exports.ComboboxInput=H;exports.CreatableCombobox=Re;exports.Option=_e;exports.OptionBox=x;