@strapi/design-system 1.4.1 → 1.4.2

package/dist/Alert/Alert.cjs

@@ -1,4 +1,4 @@
-"use strict";var b=Object.defineProperty;var u=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var m=(e,r,t)=>r in e?b(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,d=(e,r)=>{for(var t in r||(r={}))x.call(r,t)&&m(e,t,r[t]);if(u)for(var t of u(r))y.call(r,t)&&m(e,t,r[t]);return e};var g=(e,r)=>{var t={};for(var l in e)x.call(e,l)&&r.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&u)for(var l of u(e))r.indexOf(l)<0&&y.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("react"),T=require("prop-types"),$=require("styled-components"),k=require("@strapi/icons/Information"),A=require("@strapi/icons/CheckCircle"),I=require("@strapi/icons/ExclamationMarkCircle"),j=require("@strapi/icons/Cross"),s=require("../Box/Box.cjs"),C=require("../Typography/Typography.cjs"),w=require("../Flex/Flex.cjs"),i=require("./utils.cjs"),v=require("../themes/utils.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(R),o=n(T),c=n($),F=n(k),M=n(A),P=n(I),S=n(j),L=c.default(s.Box)`
+"use strict";var b=Object.defineProperty;var u=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var m=(e,r,t)=>r in e?b(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,d=(e,r)=>{for(var t in r||(r={}))x.call(r,t)&&m(e,t,r[t]);if(u)for(var t of u(r))y.call(r,t)&&m(e,t,r[t]);return e};var g=(e,r)=>{var t={};for(var l in e)x.call(e,l)&&r.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&u)for(var l of u(e))r.indexOf(l)<0&&y.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("react"),T=require("prop-types"),$=require("styled-components"),k=require("@strapi/icons/Information"),w=require("@strapi/icons/CheckCircle"),A=require("@strapi/icons/ExclamationMarkCircle"),I=require("@strapi/icons/Cross"),s=require("../Box/Box.cjs"),C=require("../Typography/Typography.cjs"),j=require("../Flex/Flex.cjs"),i=require("./utils.cjs"),v=require("../themes/utils.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(R),o=n(T),c=n($),F=n(k),M=n(w),P=n(A),S=n(I),L=c.default(s.Box)`
   flex: 1;
   flex-wrap: wrap;
   display: flex;
@@ -21,7 +21,7 @@
   svg path {
     fill: ${i.handleIconColor};
   }
-`,E=t=>{var l=t,{variant:e}=l,r=g(l,["variant"]);return e==="success"?a.default.createElement(M.default,d({},r)):e==="danger"?a.default.createElement(P.default,d({},r)):a.default.createElement(F.default,d({},r))},D=c.default(s.Box)`
+`,E=t=>{var l=t,{variant:e}=l,r=g(l,["variant"]);return e==="success"?a.default.createElement(M.default,d({},r)):e==="danger"||e==="warning"?a.default.createElement(P.default,d({},r)):a.default.createElement(F.default,d({},r))},D=c.default(s.Box)`
   // Checked with the designers, validated
   padding-top: 1px;
 
@@ -32,4 +32,4 @@
       fill: ${i.handleIconColor};
     }
   }
-`,f=G=>{var h=G,{title:e,children:r,variant:t,onClose:l,closeLabel:q,titleAs:B,action:p}=h,_=g(h,["title","children","variant","onClose","closeLabel","titleAs","action"]);return a.default.createElement(W,d({hasRadius:!0,paddingLeft:5,paddingRight:6,paddingTop:5,variant:t},_),a.default.createElement(w.Flex,{alignItems:"flex-start"},a.default.createElement(O,{paddingRight:3,variant:t},a.default.createElement(E,{variant:t,"aria-hidden":!0})),a.default.createElement(L,{role:t==="danger"?"alert":"status"},a.default.createElement(s.Box,{paddingBottom:2,paddingRight:1},a.default.createElement(C.Typography,{fontWeight:"bold",textColor:"neutral800",as:B},e)),a.default.createElement(s.Box,{paddingBottom:p?2:5,paddingRight:2},a.default.createElement(C.Typography,{as:"p",textColor:"neutral800"},r)),p&&a.default.createElement(D,{paddingBottom:5,variant:t},p)),a.default.createElement(z,{onClick:l,"aria-label":q},a.default.createElement(S.default,{"aria-hidden":!0}))))};f.defaultProps={action:void 0,variant:"default",titleAs:"p"};f.propTypes={action:o.default.element,children:o.default.node.isRequired,closeLabel:o.default.string.isRequired,onClose:o.default.func.isRequired,title:o.default.string.isRequired,titleAs:o.default.string,variant:o.default.oneOf(["danger","success","default"])};E.propTypes={variant:f.propTypes.variant.isRequired};exports.Alert=f;
+`,f=G=>{var h=G,{title:e,children:r,variant:t,onClose:l,closeLabel:q,titleAs:B,action:p}=h,_=g(h,["title","children","variant","onClose","closeLabel","titleAs","action"]);return a.default.createElement(W,d({hasRadius:!0,paddingLeft:5,paddingRight:6,paddingTop:5,variant:t},_),a.default.createElement(j.Flex,{alignItems:"flex-start"},a.default.createElement(O,{paddingRight:3,variant:t},a.default.createElement(E,{variant:t,"aria-hidden":!0})),a.default.createElement(L,{role:t==="danger"?"alert":"status"},a.default.createElement(s.Box,{paddingBottom:2,paddingRight:1},a.default.createElement(C.Typography,{fontWeight:"bold",textColor:"neutral800",as:B},e)),a.default.createElement(s.Box,{paddingBottom:p?2:5,paddingRight:2},a.default.createElement(C.Typography,{as:"p",textColor:"neutral800"},r)),p&&a.default.createElement(D,{paddingBottom:5,variant:t},p)),a.default.createElement(z,{onClick:l,"aria-label":q},a.default.createElement(S.default,{"aria-hidden":!0}))))};f.defaultProps={action:void 0,variant:"default",titleAs:"p"};f.propTypes={action:o.default.element,children:o.default.node.isRequired,closeLabel:o.default.string.isRequired,onClose:o.default.func.isRequired,title:o.default.string.isRequired,titleAs:o.default.string,variant:o.default.oneOf(["danger","success","default","warning"])};E.propTypes={variant:f.propTypes.variant.isRequired};exports.Alert=f;

package/dist/Alert/Alert.js

@@ -1,7 +1,7 @@
 var y = Object.defineProperty;
 var s = Object.getOwnPropertySymbols;
 var h = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
-var u = (e, r, t) => r in e ? y(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, i = (e, r) => {
+var u = (e, r, t) => r in e ? y(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, l = (e, r) => {
   for (var t in r || (r = {}))
     h.call(r, t) && u(e, t, r[t]);
   if (s)
@@ -21,21 +21,21 @@ var m = (e, r) => {
 import o from "react";
 import a from "prop-types";
 import d from "styled-components";
-import B from "@strapi/icons/Information";
-import A from "@strapi/icons/CheckCircle";
-import k from "@strapi/icons/ExclamationMarkCircle";
-import w from "@strapi/icons/Cross";
-import { Box as l } from "../Box/Box.js";
+import w from "@strapi/icons/Information";
+import B from "@strapi/icons/CheckCircle";
+import A from "@strapi/icons/ExclamationMarkCircle";
+import k from "@strapi/icons/Cross";
+import { Box as i } from "../Box/Box.js";
 import { Typography as x } from "../Typography/Typography.js";
 import { Flex as T } from "../Flex/Flex.js";
 import { handleBorderColor as q, handleBackgroundColor as I, handleIconColor as c } from "./utils.js";
 import { buttonFocusStyle as v } from "../themes/utils.js";
-const W = d(l)`
+const W = d(i)`
   flex: 1;
   flex-wrap: wrap;
   display: flex;
   flex-direction: row;
-`, z = d(l)`
+`, z = d(i)`
   border: 1px solid ${q};
   background: ${I};
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
@@ -48,15 +48,15 @@ const W = d(l)`
   }
   margin-top: ${({ theme: e }) => e.spaces[1]};
   ${v};
-`, L = d(l)`
+`, L = d(i)`
   font-size: ${20 / 16}rem;
   svg path {
     fill: ${c};
   }
 `, C = (t) => {
   var n = t, { variant: e } = n, r = m(n, ["variant"]);
-  return e === "success" ? /* @__PURE__ */ o.createElement(A, i({}, r)) : e === "danger" ? /* @__PURE__ */ o.createElement(k, i({}, r)) : /* @__PURE__ */ o.createElement(B, i({}, r));
-}, P = d(l)`
+  return e === "success" ? /* @__PURE__ */ o.createElement(B, l({}, r)) : e === "danger" || e === "warning" ? /* @__PURE__ */ o.createElement(A, l({}, r)) : /* @__PURE__ */ o.createElement(w, l({}, r));
+}, P = d(i)`
   // Checked with the designers, validated
   padding-top: 1px;
 
@@ -69,7 +69,7 @@ const W = d(l)`
   }
 `, f = (S) => {
   var g = S, { title: e, children: r, variant: t, onClose: n, closeLabel: R, titleAs: $, action: p } = g, b = m(g, ["title", "children", "variant", "onClose", "closeLabel", "titleAs", "action"]);
-  return /* @__PURE__ */ o.createElement(z, i({
+  return /* @__PURE__ */ o.createElement(z, l({
     hasRadius: !0,
     paddingLeft: 5,
     paddingRight: 6,
@@ -85,14 +85,14 @@ const W = d(l)`
     "aria-hidden": !0
   })), /* @__PURE__ */ o.createElement(W, {
     role: t === "danger" ? "alert" : "status"
-  }, /* @__PURE__ */ o.createElement(l, {
+  }, /* @__PURE__ */ o.createElement(i, {
     paddingBottom: 2,
     paddingRight: 1
   }, /* @__PURE__ */ o.createElement(x, {
     fontWeight: "bold",
     textColor: "neutral800",
     as: $
-  }, e)), /* @__PURE__ */ o.createElement(l, {
+  }, e)), /* @__PURE__ */ o.createElement(i, {
     paddingBottom: p ? 2 : 5,
     paddingRight: 2
   }, /* @__PURE__ */ o.createElement(x, {
@@ -104,7 +104,7 @@ const W = d(l)`
   }, p)), /* @__PURE__ */ o.createElement(F, {
     onClick: n,
     "aria-label": R
-  }, /* @__PURE__ */ o.createElement(w, {
+  }, /* @__PURE__ */ o.createElement(k, {
     "aria-hidden": !0
   }))));
 };
@@ -120,7 +120,7 @@ f.propTypes = {
   onClose: a.func.isRequired,
   title: a.string.isRequired,
   titleAs: a.string,
-  variant: a.oneOf(["danger", "success", "default"])
+  variant: a.oneOf(["danger", "success", "default", "warning"])
 };
 C.propTypes = {
   variant: f.propTypes.variant.isRequired

package/dist/Alert/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=({theme:r,variant:o})=>o==="danger"?r.colors.danger100:o==="success"?r.colors.success100:r.colors.primary100,c=({theme:r,variant:o})=>o==="danger"?r.colors.danger200:o==="success"?r.colors.success200:r.colors.primary200,e=({theme:r,variant:o})=>o==="danger"?r.colors.danger700:o==="success"?r.colors.success700:r.colors.primary700;exports.handleBackgroundColor=s;exports.handleBorderColor=c;exports.handleIconColor=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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;

package/dist/Alert/utils.js

@@ -1,6 +1,6 @@
-const s = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger100 : o === "success" ? r.colors.success100 : r.colors.primary100, c = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger200 : o === "success" ? r.colors.success200 : r.colors.primary200, n = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger700 : o === "success" ? r.colors.success700 : r.colors.primary700;
+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;
 export {
   s as handleBackgroundColor,
-  c as handleBorderColor,
-  n as handleIconColor
+  n as handleBorderColor,
+  c as handleIconColor
 };

package/dist/Avatar/Avatar.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),f=require("styled-components"),v=require("prop-types"),t=require("./constants.cjs"),g=require("../Typography/Typography.cjs"),h=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=l(d),o=l(f),r=l(v),y=o.default.img`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),f=require("styled-components"),v=require("prop-types"),t=require("./constants.cjs"),g=require("../Typography/Typography.cjs"),h=require("../Flex/Flex.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=s(c),o=s(f),a=s(v),y=o.default.img`
   border-radius: 50%;
   object-fit: cover;
   display: block;
@@ -14,7 +14,7 @@
   position: absolute;
   transform: translate(-${(t.previewSize-t.avatarSize)/2}px, -100%);
   margin-top: -${({theme:e})=>e.spaces[1]};
-`,S=o.default.div`
+`,x=o.default.div`
   z-index: 1;
   border-radius: 30%;
   position: absolute;
@@ -22,8 +22,8 @@
   height: ${t.avatarSize/16}rem;
   background: ${({theme:e})=>e.colors.neutral0};
   opacity: 0.4;
-`,s=({src:e,alt:c,preview:i})=>{const[n,u]=d.useState(!1);return a.default.createElement("span",null,i&&n?a.default.createElement(b,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:i===!0?e:i}):null,a.default.createElement(m,{hovering:i&&n,onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1)},i&&n?a.default.createElement(S,null):null,a.default.createElement(y,{src:e,alt:c,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})))},x=o.default(h.Flex)`
+`,u=({src:e,alt:l,preview:r})=>{const[n,p]=c.useState(!1);return i.default.createElement("span",null,r&&n?i.default.createElement(b,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:r===!0?e:r}):null,i.default.createElement(m,{hovering:r&&n,onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1)},r&&n?i.default.createElement(x,null):null,i.default.createElement(y,{src:e,alt:l,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})))},S=o.default(h.Flex)`
   span {
     line-height: 0;
   }
-`,p=({children:e})=>a.default.createElement(x,{borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,background:"primary600",justifyContent:"center"},a.default.createElement(g.Typography,{fontWeight:"bold",textColor:"buttonNeutral0",fontSize:0,textTransform:"uppercase"},e));p.propTypes={children:r.default.node.isRequired};s.defaultProps={alt:void 0,preview:void 0};s.propTypes={alt:r.default.string,preview:r.default.oneOfType([r.default.string,r.default.bool]),src:r.default.string.isRequired};exports.Avatar=s;exports.Initials=p;
+`,d=({children:e,background:l,textColor:r})=>i.default.createElement(S,{background:l,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center"},i.default.createElement(g.Typography,{fontSize:0,fontWeight:"bold",textColor:r,textTransform:"uppercase"},e));d.defaultProps={background:"primary600",textColor:"buttonNeutral0"};d.propTypes={background:a.default.string,children:a.default.node.isRequired,textColor:a.default.string};u.defaultProps={alt:void 0,preview:void 0};u.propTypes={alt:a.default.string,preview:a.default.oneOfType([a.default.string,a.default.bool]),src:a.default.string.isRequired};exports.Avatar=u;exports.Initials=d;

package/dist/Avatar/Avatar.js

@@ -1,26 +1,26 @@
-import r, { useState as m } from "react";
+import i, { useState as m } from "react";
 import a from "styled-components";
-import i from "prop-types";
-import { avatarSize as t, previewSize as s } from "./constants.js";
-import { Typography as c } from "../Typography/Typography.js";
-import { Flex as u } from "../Flex/Flex.js";
+import r from "prop-types";
+import { avatarSize as t, previewSize as l } from "./constants.js";
+import { Typography as u } from "../Typography/Typography.js";
+import { Flex as g } from "../Flex/Flex.js";
 const h = a.img`
   border-radius: 50%;
   object-fit: cover;
   display: block;
   position: relative;
-`, g = a.div`
+`, f = a.div`
   position: relative;
   width: ${t / 16}rem;
   height: ${t / 16}rem;
   z-index: ${({ hovering: e }) => e ? 1 : void 0};
-`, f = a.img`
+`, v = a.img`
   border-radius: 50%;
   object-fit: cover;
   position: absolute;
-  transform: translate(-${(s - t) / 2}px, -100%);
+  transform: translate(-${(l - t) / 2}px, -100%);
   margin-top: -${({ theme: e }) => e.spaces[1]};
-`, v = a.div`
+`, b = a.div`
   z-index: 1;
   border-radius: 30%;
   position: absolute;
@@ -28,53 +28,59 @@ const h = a.img`
   height: ${t / 16}rem;
   background: ${({ theme: e }) => e.colors.neutral0};
   opacity: 0.4;
-`, p = ({ src: e, alt: d, preview: o }) => {
-  const [n, l] = m(!1);
-  return /* @__PURE__ */ r.createElement("span", null, o && n ? /* @__PURE__ */ r.createElement(f, {
+`, d = ({ src: e, alt: n, preview: o }) => {
+  const [s, p] = m(!1);
+  return /* @__PURE__ */ i.createElement("span", null, o && s ? /* @__PURE__ */ i.createElement(v, {
     "aria-hidden": !0,
     alt: "",
-    width: `${s}px`,
-    height: `${s}px`,
+    width: `${l}px`,
+    height: `${l}px`,
     src: o === !0 ? e : o
-  }) : null, /* @__PURE__ */ r.createElement(g, {
-    hovering: o && n,
-    onMouseEnter: () => l(!0),
-    onMouseLeave: () => l(!1)
-  }, o && n ? /* @__PURE__ */ r.createElement(v, null) : null, /* @__PURE__ */ r.createElement(h, {
+  }) : null, /* @__PURE__ */ i.createElement(f, {
+    hovering: o && s,
+    onMouseEnter: () => p(!0),
+    onMouseLeave: () => p(!1)
+  }, o && s ? /* @__PURE__ */ i.createElement(b, null) : null, /* @__PURE__ */ i.createElement(h, {
     src: e,
-    alt: d,
+    alt: n,
     width: `${t}px`,
     height: `${t}px`
   })));
-}, b = a(u)`
+}, x = a(g)`
   span {
     line-height: 0;
   }
-`, $ = ({ children: e }) => /* @__PURE__ */ r.createElement(b, {
+`, c = ({ children: e, background: n, textColor: o }) => /* @__PURE__ */ i.createElement(x, {
+  background: n,
   borderRadius: "50%",
   width: `${t}px`,
   height: `${t}px`,
-  background: "primary600",
   justifyContent: "center"
-}, /* @__PURE__ */ r.createElement(c, {
-  fontWeight: "bold",
-  textColor: "buttonNeutral0",
+}, /* @__PURE__ */ i.createElement(u, {
   fontSize: 0,
+  fontWeight: "bold",
+  textColor: o,
   textTransform: "uppercase"
 }, e));
-$.propTypes = {
-  children: i.node.isRequired
+c.defaultProps = {
+  background: "primary600",
+  textColor: "buttonNeutral0"
+};
+c.propTypes = {
+  background: r.string,
+  children: r.node.isRequired,
+  textColor: r.string
 };
-p.defaultProps = {
+d.defaultProps = {
   alt: void 0,
   preview: void 0
 };
-p.propTypes = {
-  alt: i.string,
-  preview: i.oneOfType([i.string, i.bool]),
-  src: i.string.isRequired
+d.propTypes = {
+  alt: r.string,
+  preview: r.oneOfType([r.string, r.bool]),
+  src: r.string.isRequired
 };
 export {
-  p as Avatar,
-  $ as Initials
+  d as Avatar,
+  c as Initials
 };

package/dist/DatePicker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";var W=Object.defineProperty;var c=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var P=(e,a,t)=>a in e?W(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,j=(e,a)=>{for(var t in a||(a={}))I.call(a,t)&&P(e,t,a[t]);if(c)for(var t of c(a))_.call(a,t)&&P(e,t,a[t]);return e};var y=(e,a)=>{var t={};for(var n in e)I.call(e,n)&&a.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&c)for(var n of c(e))a.indexOf(n)<0&&_.call(e,n)&&(t[n]=e[n]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),A=require("prop-types"),V=require("@strapi/icons/Calendar"),w=require("@strapi/icons/Cross"),F=require("../themes/sizes.cjs"),G=require("../TextInput/TextInput.cjs"),D=require("./components.cjs"),H=require("./DatePickerCalendar.cjs"),R=require("./utils/formatDate.cjs"),J=require("../helpers/useId.cjs"),K=require("../helpers/getDefaultLocale.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=u(i),r=u(A),N=u(V),Q=u(w),g=U=>{var C=U,{ariaLabel:e,initialDate:a,selectedDate:t,onChange:n,label:d,locale:E,selectedDateLabel:T,onClear:b,clearLabel:L,disabled:o,id:x}=C,z=y(C,["ariaLabel","initialDate","selectedDate","onChange","label","locale","selectedDateLabel","onClear","clearLabel","disabled","id"]);const O=J.useId("datepicker",x),[m,f]=i.useState(!1),s=i.useRef(null),v=i.useRef(null),h=E||K.getDefaultLocale(),k=t?R.formatDate(t,h):"",q=()=>{o||f(p=>!p)},S=()=>{o||(b(),v.current.focus())},B=p=>{n(p),f(!1)},M=()=>{f(!1)};return l.default.createElement(D.DatePickerWrapper,{bold:m},l.default.createElement(G.TextInput,j({ref:s,onClick:q,onChange:()=>{},value:k,startAction:l.default.createElement(D.DatePickerButton,{ref:v,onClick:q,"aria-label":t?T(R.formatDate(t,h)):d||e,type:"button","aria-disabled":o},l.default.createElement(N.default,{"aria-hidden":!0})),endAction:b&&k?l.default.createElement(D.IconBox,{as:"button",onClick:S,"aria-label":L,"aria-disabled":o},l.default.createElement(Q.default,null)):void 0,"aria-autocomplete":"none",label:d,"aria-label":e,disabled:o,id:O},z)),s.current&&s.current.inputWrapperRef&&m&&l.default.createElement(H.DatePickerCalendar,{selectedDate:t,initialDate:a,onChange:B,onEscape:M,popoverSource:s.current.inputWrapperRef,label:d||e}))};g.defaultProps={ariaLabel:void 0,clearLabel:void 0,disabled:!1,id:void 0,label:void 0,locale:void 0,initialDate:new Date,onClear:void 0,placeholder:void 0,selectedDate:void 0,size:"M"};g.propTypes={ariaLabel:r.default.string,clearLabel:r.default.string,disabled:r.default.bool,id:r.default.string,initialDate:r.default.instanceOf(Date),label:r.default.string,locale:r.default.string,onChange:r.default.func.isRequired,onClear:r.default.func,placeholder:r.default.string,selectedDate:r.default.instanceOf(Date),selectedDateLabel:r.default.func.isRequired,size:r.default.oneOf(Object.keys(F.sizes.input))};exports.DatePicker=g;
+"use strict";var V=Object.defineProperty;var s=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var P=(e,a,t)=>a in e?V(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,j=(e,a)=>{for(var t in a||(a={}))I.call(a,t)&&P(e,t,a[t]);if(s)for(var t of s(a))_.call(a,t)&&P(e,t,a[t]);return e};var y=(e,a)=>{var t={};for(var r in e)I.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&s)for(var r of s(e))a.indexOf(r)<0&&_.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),w=require("prop-types"),F=require("@strapi/icons/Calendar"),G=require("@strapi/icons/Cross"),H=require("../themes/sizes.cjs"),J=require("../TextInput/TextInput.cjs"),D=require("./components.cjs"),K=require("./DatePickerCalendar.cjs"),R=require("./utils/formatDate.cjs"),N=require("../helpers/useId.cjs"),Q=require("../helpers/getDefaultLocale.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=u(c),n=u(w),U=u(F),X=u(G),m=Y=>{var b=Y,{ariaLabel:e,initialDate:a,selectedDate:t,onChange:r,label:d,locale:E,selectedDateLabel:T,onClear:g,clearLabel:x,disabled:o,id:L,minDate:O,maxDate:z}=b,S=y(b,["ariaLabel","initialDate","selectedDate","onChange","label","locale","selectedDateLabel","onClear","clearLabel","disabled","id","minDate","maxDate"]);const B=N.useId("datepicker",L),[C,f]=c.useState(!1),i=c.useRef(null),v=c.useRef(null),h=E||Q.getDefaultLocale(),k=t?R.formatDate(t,h):"",q=()=>{o||f(p=>!p)},M=()=>{o||(g(),v.current.focus())},W=p=>{r(p),f(!1)},A=()=>{f(!1)};return l.default.createElement(D.DatePickerWrapper,{bold:C},l.default.createElement(J.TextInput,j({ref:i,onClick:q,onChange:()=>{},value:k,startAction:l.default.createElement(D.DatePickerButton,{ref:v,onClick:q,"aria-label":t?T(R.formatDate(t,h)):d||e,type:"button","aria-disabled":o},l.default.createElement(U.default,{"aria-hidden":!0})),endAction:g&&k?l.default.createElement(D.IconBox,{as:"button",onClick:M,"aria-label":x,"aria-disabled":o},l.default.createElement(X.default,null)):void 0,"aria-autocomplete":"none",label:d,"aria-label":e,disabled:o,id:B},S)),i.current&&i.current.inputWrapperRef&&C&&l.default.createElement(K.DatePickerCalendar,{selectedDate:t,initialDate:a,onChange:W,onEscape:A,popoverSource:i.current.inputWrapperRef,label:d||e,minDate:O,maxDate:z}))};m.defaultProps={ariaLabel:void 0,clearLabel:void 0,disabled:!1,id:void 0,label:void 0,locale:void 0,initialDate:new Date,minDate:void 0,maxDate:void 0,onClear:void 0,placeholder:void 0,selectedDate:void 0,size:"M"};m.propTypes={ariaLabel:n.default.string,clearLabel:n.default.string,disabled:n.default.bool,id:n.default.string,initialDate:n.default.instanceOf(Date),label:n.default.string,locale:n.default.string,maxDate:n.default.instanceOf(Date),minDate:n.default.instanceOf(Date),onChange:n.default.func.isRequired,onClear:n.default.func,placeholder:n.default.string,selectedDate:n.default.instanceOf(Date),selectedDateLabel:n.default.func.isRequired,size:n.default.oneOf(Object.keys(H.sizes.input))};exports.DatePicker=m;

package/dist/DatePicker/DatePicker.js

@@ -1,48 +1,50 @@
-var S = Object.defineProperty;
+var _ = Object.defineProperty;
 var c = Object.getOwnPropertySymbols;
 var h = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
-var D = (t, r, e) => r in t ? S(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e, E = (t, r) => {
-  for (var e in r || (r = {}))
-    h.call(r, e) && D(t, e, r[e]);
+var C = (t, a, e) => a in t ? _(t, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[a] = e, E = (t, a) => {
+  for (var e in a || (a = {}))
+    h.call(a, e) && C(t, e, a[e]);
   if (c)
-    for (var e of c(r))
-      k.call(r, e) && D(t, e, r[e]);
+    for (var e of c(a))
+      k.call(a, e) && C(t, e, a[e]);
   return t;
 };
-var R = (t, r) => {
+var R = (t, a) => {
   var e = {};
   for (var o in t)
-    h.call(t, o) && r.indexOf(o) < 0 && (e[o] = t[o]);
+    h.call(t, o) && a.indexOf(o) < 0 && (e[o] = t[o]);
   if (t != null && c)
     for (var o of c(t))
-      r.indexOf(o) < 0 && k.call(t, o) && (e[o] = t[o]);
+      a.indexOf(o) < 0 && k.call(t, o) && (e[o] = t[o]);
   return e;
 };
-import n, { useState as V, useRef as P } from "react";
-import a from "prop-types";
-import _ from "@strapi/icons/Calendar";
-import j from "@strapi/icons/Cross";
-import { sizes as w } from "../themes/sizes.js";
-import { TextInput as M } from "../TextInput/TextInput.js";
-import { DatePickerWrapper as F, DatePickerButton as G, IconBox as H } from "./components.js";
-import { DatePickerCalendar as J } from "./DatePickerCalendar.js";
-import { formatDate as y } from "./utils/formatDate.js";
-import { useId as K } from "../helpers/useId.js";
-import { getDefaultLocale as N } from "../helpers/getDefaultLocale.js";
-const I = (Q) => {
-  var d = Q, {
+import n, { useState as j, useRef as P } from "react";
+import r from "prop-types";
+import w from "@strapi/icons/Calendar";
+import M from "@strapi/icons/Cross";
+import { sizes as F } from "../themes/sizes.js";
+import { TextInput as G } from "../TextInput/TextInput.js";
+import { DatePickerWrapper as H, DatePickerButton as J, IconBox as K } from "./components.js";
+import { DatePickerCalendar as N } from "./DatePickerCalendar.js";
+import { formatDate as O } from "./utils/formatDate.js";
+import { useId as Q } from "../helpers/useId.js";
+import { getDefaultLocale as U } from "../helpers/getDefaultLocale.js";
+const x = (X) => {
+  var u = X, {
     ariaLabel: t,
-    initialDate: r,
+    initialDate: a,
     selectedDate: e,
     onChange: o,
     label: s,
-    locale: L,
-    selectedDateLabel: O,
-    onClear: u,
-    clearLabel: x,
+    locale: y,
+    selectedDateLabel: I,
+    onClear: m,
+    clearLabel: L,
     disabled: i,
-    id: z
-  } = d, B = R(d, [
+    id: z,
+    minDate: B,
+    maxDate: T
+  } = u, W = R(u, [
     "ariaLabel",
     "initialDate",
     "selectedDate",
@@ -53,55 +55,59 @@ const I = (Q) => {
     "onClear",
     "clearLabel",
     "disabled",
-    "id"
+    "id",
+    "minDate",
+    "maxDate"
   ]);
-  const T = K("datepicker", z), [m, p] = V(!1), l = P(null), b = P(null), g = L || N(), v = e ? y(e, g) : "", C = () => {
-    i || p((f) => !f);
-  }, W = () => {
-    i || (u(), b.current.focus());
-  }, q = (f) => {
-    o(f), p(!1);
+  const q = Q("datepicker", z), [d, f] = j(!1), l = P(null), D = P(null), b = y || U(), g = e ? O(e, b) : "", v = () => {
+    i || f((p) => !p);
   }, A = () => {
-    p(!1);
+    i || (m(), D.current.focus());
+  }, S = (p) => {
+    o(p), f(!1);
+  }, V = () => {
+    f(!1);
   };
-  return /* @__PURE__ */ n.createElement(F, {
-    bold: m
-  }, /* @__PURE__ */ n.createElement(M, E({
+  return /* @__PURE__ */ n.createElement(H, {
+    bold: d
+  }, /* @__PURE__ */ n.createElement(G, E({
     ref: l,
-    onClick: C,
+    onClick: v,
     onChange: () => {
     },
-    value: v,
-    startAction: /* @__PURE__ */ n.createElement(G, {
-      ref: b,
-      onClick: C,
-      "aria-label": e ? O(y(e, g)) : s || t,
+    value: g,
+    startAction: /* @__PURE__ */ n.createElement(J, {
+      ref: D,
+      onClick: v,
+      "aria-label": e ? I(O(e, b)) : s || t,
       type: "button",
       "aria-disabled": i
-    }, /* @__PURE__ */ n.createElement(_, {
+    }, /* @__PURE__ */ n.createElement(w, {
       "aria-hidden": !0
     })),
-    endAction: u && v ? /* @__PURE__ */ n.createElement(H, {
+    endAction: m && g ? /* @__PURE__ */ n.createElement(K, {
       as: "button",
-      onClick: W,
-      "aria-label": x,
+      onClick: A,
+      "aria-label": L,
       "aria-disabled": i
-    }, /* @__PURE__ */ n.createElement(j, null)) : void 0,
+    }, /* @__PURE__ */ n.createElement(M, null)) : void 0,
     "aria-autocomplete": "none",
     label: s,
     "aria-label": t,
     disabled: i,
-    id: T
-  }, B)), l.current && l.current.inputWrapperRef && m && /* @__PURE__ */ n.createElement(J, {
+    id: q
+  }, W)), l.current && l.current.inputWrapperRef && d && /* @__PURE__ */ n.createElement(N, {
     selectedDate: e,
-    initialDate: r,
-    onChange: q,
-    onEscape: A,
+    initialDate: a,
+    onChange: S,
+    onEscape: V,
     popoverSource: l.current.inputWrapperRef,
-    label: s || t
+    label: s || t,
+    minDate: B,
+    maxDate: T
   }));
 };
-I.defaultProps = {
+x.defaultProps = {
   ariaLabel: void 0,
   clearLabel: void 0,
   disabled: !1,
@@ -109,26 +115,30 @@ I.defaultProps = {
   label: void 0,
   locale: void 0,
   initialDate: new Date(),
+  minDate: void 0,
+  maxDate: void 0,
   onClear: void 0,
   placeholder: void 0,
   selectedDate: void 0,
   size: "M"
 };
-I.propTypes = {
-  ariaLabel: a.string,
-  clearLabel: a.string,
-  disabled: a.bool,
-  id: a.string,
-  initialDate: a.instanceOf(Date),
-  label: a.string,
-  locale: a.string,
-  onChange: a.func.isRequired,
-  onClear: a.func,
-  placeholder: a.string,
-  selectedDate: a.instanceOf(Date),
-  selectedDateLabel: a.func.isRequired,
-  size: a.oneOf(Object.keys(w.input))
+x.propTypes = {
+  ariaLabel: r.string,
+  clearLabel: r.string,
+  disabled: r.bool,
+  id: r.string,
+  initialDate: r.instanceOf(Date),
+  label: r.string,
+  locale: r.string,
+  maxDate: r.instanceOf(Date),
+  minDate: r.instanceOf(Date),
+  onChange: r.func.isRequired,
+  onClear: r.func,
+  placeholder: r.string,
+  selectedDate: r.instanceOf(Date),
+  selectedDateLabel: r.func.isRequired,
+  size: r.oneOf(Object.keys(F.input))
 };
 export {
-  I as DatePicker
+  x as DatePicker
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -31,7 +31,7 @@
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/react": "^6.5.13",
-    "@strapi/icons": "^1.4.1",
+    "@strapi/icons": "^1.4.2",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
@@ -51,7 +51,7 @@
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
-    "@strapi/icons": "^1.4.1",
+    "@strapi/icons": "^1.4.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
@@ -71,5 +71,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": "50393ea4408afcbc45386001bb5d30559b6f02da"
+  "gitHead": "7f8ee2fc8d6e79e5931955f6224ddffee8f9ac3d"
 }