@strapi/design-system 1.4.0-beta.2 → 1.4.1

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,55 +1,55 @@
-var B = Object.defineProperty;
+var G = Object.defineProperty;
 var g = Object.getOwnPropertySymbols;
-var H = Object.prototype.hasOwnProperty, M = Object.prototype.propertyIsEnumerable;
-var S = (t, r, i) => r in t ? B(t, r, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[r] = i, w = (t, r) => {
+var M = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var H = (t, r, i) => r in t ? G(t, r, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[r] = i, y = (t, r) => {
   for (var i in r || (r = {}))
-    H.call(r, i) && S(t, i, r[i]);
+    M.call(r, i) && H(t, i, r[i]);
   if (g)
     for (var i of g(r))
-      M.call(r, i) && S(t, i, r[i]);
+      w.call(r, i) && H(t, i, r[i]);
   return t;
 };
-var y = (t, r) => {
+var F = (t, r) => {
   var i = {};
   for (var a in t)
-    H.call(t, a) && r.indexOf(a) < 0 && (i[a] = t[a]);
+    M.call(t, a) && r.indexOf(a) < 0 && (i[a] = t[a]);
   if (t != null && g)
     for (var a of g(t))
-      r.indexOf(a) < 0 && M.call(t, a) && (i[a] = t[a]);
+      r.indexOf(a) < 0 && w.call(t, a) && (i[a] = t[a]);
   return i;
 };
-import n, { useState as F, useEffect as G } from "react";
-import { Stack as h } from "../Stack/Stack.js";
-import { DatePicker as J } from "../DatePicker/DatePicker.js";
-import { TimePicker as K } from "../TimePicker/TimePicker.js";
-import { Field as N } from "../Field/Field.js";
-import { FieldLabel as O } from "../Field/FieldLabel.js";
+import n, { useState as h, useEffect as J } from "react";
+import { Stack as V } from "../Stack/Stack.js";
+import { DatePicker as K } from "../DatePicker/DatePicker.js";
+import { TimePicker as N } from "../TimePicker/TimePicker.js";
+import { Field as O } from "../Field/Field.js";
+import { FieldLabel as Q } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as Q } from "../Field/FieldHint.js";
-import { FieldError as U } from "../Field/FieldError.js";
+import { FieldHint as U } from "../Field/FieldHint.js";
+import { FieldError as W } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { useId as V } from "../helpers/useId.js";
-import { parseDate as I } from "./parseDate.js";
-import { dateTimePickerDefaultProps as W, dateTimePickerPropTypes as X } from "./DateTimePickerProps.js";
-const _ = (Y) => {
-  var $ = Y, {
+import { useId as I } from "../helpers/useId.js";
+import { parseDate as _ } from "./parseDate.js";
+import { dateTimePickerDefaultProps as X, dateTimePickerPropTypes as Y } from "./DateTimePickerProps.js";
+const b = (Z) => {
+  var P = Z, {
     ariaLabel: t,
     clearLabel: r,
     disabled: i,
     error: a,
-    hint: b,
+    hint: v,
     label: f,
-    labelAction: v,
+    labelAction: x,
     onChange: m,
     onClear: T,
-    name: E,
-    required: x,
+    name: k,
+    required: E,
     selectButtonTitle: C,
-    size: k,
+    size: $,
     step: L,
     value: d
-  } = $, u = y($, [
+  } = P, u = F(P, [
     "ariaLabel",
     "clearLabel",
     "disabled",
@@ -66,7 +66,7 @@ const _ = (Y) => {
     "step",
     "value"
   ]);
-  const c = I(d), [s, p] = F(c), [D, l] = F(
+  const c = _(d), [s, p] = h(c), [D, l] = h(
     c ? `${c.getHours()}:${c.getMinutes()}:${c.getSeconds()}` : null
   ), R = (e) => {
     p(e);
@@ -76,68 +76,70 @@ const _ = (Y) => {
     l(e);
     const o = s ? new Date(s) : new Date();
     o.setHours(e.split(":")[0]), o.setMinutes(e.split(":")[1]), s || p(o), m && m(o);
-  }, q = () => {
-    p(void 0), l(void 0), T();
   }, z = () => {
+    p(void 0), l(void 0), T();
+  }, A = () => {
     l(void 0);
     let e;
     s && (e = new Date(s), e.setHours("00"), e.setMinutes("00")), m && m(e);
   };
-  G(() => {
+  J(() => {
     if (d && +d != +s) {
-      const e = I(d);
+      const e = _(d);
       p(e), l(
         e ? `${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}` : null
       );
     } else
       d || (p(void 0), l(void 0));
   }, [d, s]);
-  const P = V("datetime-label", u == null ? void 0 : u.id), A = V("datetimepicker");
-  return /* @__PURE__ */ n.createElement(N, {
-    name: E,
+  const S = I("datetime-label", u == null ? void 0 : u.id), B = I("datetimepicker");
+  return /* @__PURE__ */ n.createElement(O, {
+    name: k,
     role: "group",
-    "aria-labelledby": P,
-    hint: b,
-    error: a
-  }, /* @__PURE__ */ n.createElement(h, {
+    id: S,
+    "aria-labelledby": S,
+    hint: v,
+    error: a,
+    required: E
+  }, /* @__PURE__ */ n.createElement(V, {
     spacing: 1
-  }, f && /* @__PURE__ */ n.createElement(O, {
-    required: x,
-    action: v,
-    id: P
-  }, f), /* @__PURE__ */ n.createElement(h, {
+  }, f && /* @__PURE__ */ n.createElement(Q, {
+    action: x
+  }, f), /* @__PURE__ */ n.createElement(V, {
     horizontal: !0,
     spacing: 2
-  }, /* @__PURE__ */ n.createElement(J, w({
+  }, /* @__PURE__ */ n.createElement(K, y({
     "data-testid": "datetimepicker-date",
-    name: E,
+    name: k,
     ariaLabel: f || t,
     error: typeof a == "string",
     selectedDate: s,
     selectedDateLabel: (e) => `Date picker, current is ${e}`,
     onChange: R,
-    size: k,
-    onClear: T && q,
+    required: E,
+    size: $,
+    onClear: T && z,
     clearLabel: r,
     disabled: i
-  }, u)), /* @__PURE__ */ n.createElement(K, {
+  }, u)), /* @__PURE__ */ n.createElement(N, {
     "data-testid": "datetimepicker-time",
-    size: k,
+    size: $,
     "aria-label": f || t,
     error: typeof a == "string",
     value: D,
     onChange: j,
-    onClear: T && z,
+    onClear: T && A,
     clearLabel: r,
+    required: E,
     selectButtonTitle: C,
     disabled: i,
     step: L
-  })), /* @__PURE__ */ n.createElement(Q, null), /* @__PURE__ */ n.createElement(U, {
-    id: A
+  })), /* @__PURE__ */ n.createElement(U, null), /* @__PURE__ */ n.createElement(W, {
+    id: B
   })));
 };
-_.defaultProps = W;
-_.propTypes = X;
+b.defaultProps = X;
+b.propTypes = Y;
 export {
-  _ as DateTimePicker
+  b as DateTimePicker
 };

package/dist/Field/Field.cjs

@@ -1 +1 @@
-"use strict";var _=Object.defineProperty;var l=Object.getOwnPropertySymbols;var i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var n=(e,d,t)=>d in e?_(e,d,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[d]=t,f=(e,d)=>{for(var t in d||(d={}))i.call(d,t)&&n(e,t,d[t]);if(l)for(var t of l(d))s.call(d,t)&&n(e,t,d[t]);return e};var c=(e,d)=>{var t={};for(var o in e)i.call(e,o)&&d.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&l)for(var o of l(e))d.indexOf(o)<0&&s.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),b=require("prop-types"),q=require("./FieldContext.cjs"),F=require("../helpers/useId.cjs"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=y(m),r=y(b),u=O=>{var a=O,{children:e,name:d,error:t,hint:o,id:v}=a,g=c(a,["children","name","error","hint","id"]);const T=F.useId("field",v);return p.default.createElement("div",f({},g),p.default.createElement(q.FieldContext.Provider,{value:{name:d,id:T,error:t,hint:o}},e))};u.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0};u.propTypes={children:r.default.node.isRequired,error:r.default.oneOfType([r.default.string,r.default.bool]),hint:r.default.oneOfType([r.default.string,r.default.node,r.default.arrayOf(r.default.node)]),id:r.default.oneOfType([r.default.string,r.default.number]),name:r.default.string};exports.Field=u;
+"use strict";var _=Object.defineProperty;var l=Object.getOwnPropertySymbols;var n=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var i=(e,d,t)=>d in e?_(e,d,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[d]=t,s=(e,d)=>{for(var t in d||(d={}))n.call(d,t)&&i(e,t,d[t]);if(l)for(var t of l(d))f.call(d,t)&&i(e,t,d[t]);return e};var c=(e,d)=>{var t={};for(var o in e)n.call(e,o)&&d.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&l)for(var o of l(e))d.indexOf(o)<0&&f.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),m=require("prop-types"),F=require("./FieldContext.cjs"),O=require("../helpers/useId.cjs"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=y(b),r=y(m),u=P=>{var a=P,{children:e,name:d,error:t,hint:o,id:v,required:g}=a,q=c(a,["children","name","error","hint","id","required"]);const T=O.useId("field",v);return p.default.createElement("div",s({},q),p.default.createElement(F.FieldContext.Provider,{value:{name:d,id:T,error:t,hint:o,required:g}},e))};u.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0,required:!1};u.propTypes={children:r.default.node.isRequired,error:r.default.oneOfType([r.default.string,r.default.bool]),hint:r.default.oneOfType([r.default.string,r.default.node,r.default.arrayOf(r.default.node)]),id:r.default.oneOfType([r.default.string,r.default.number]),name:r.default.string,required:r.default.bool};exports.Field=u;

package/dist/Field/Field.js

@@ -1,46 +1,48 @@
-var g = Object.defineProperty;
-var n = Object.getOwnPropertySymbols;
+var T = Object.defineProperty;
+var t = Object.getOwnPropertySymbols;
 var m = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
-var p = (e, o, r) => o in e ? g(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, f = (e, o) => {
+var p = (e, o, r) => o in e ? T(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, f = (e, o) => {
   for (var r in o || (o = {}))
     m.call(o, r) && p(e, r, o[r]);
-  if (n)
-    for (var r of n(o))
+  if (t)
+    for (var r of t(o))
       a.call(o, r) && p(e, r, o[r]);
   return e;
 };
-var s = (e, o) => {
+var l = (e, o) => {
   var r = {};
-  for (var t in e)
-    m.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
-  if (e != null && n)
-    for (var t of n(e))
-      o.indexOf(t) < 0 && a.call(e, t) && (r[t] = e[t]);
+  for (var d in e)
+    m.call(e, d) && o.indexOf(d) < 0 && (r[d] = e[d]);
+  if (e != null && t)
+    for (var d of t(e))
+      o.indexOf(d) < 0 && a.call(e, d) && (r[d] = e[d]);
   return r;
 };
-import l from "react";
+import s from "react";
 import i from "prop-types";
-import { FieldContext as T } from "./FieldContext.js";
-import { useId as O } from "../helpers/useId.js";
+import { FieldContext as O } from "./FieldContext.js";
+import { useId as b } from "../helpers/useId.js";
 const u = (h) => {
-  var d = h, { children: e, name: o, error: r, hint: t, id: v } = d, c = s(d, ["children", "name", "error", "hint", "id"]);
-  const y = O("field", v);
-  return /* @__PURE__ */ l.createElement("div", f({}, c), /* @__PURE__ */ l.createElement(T.Provider, {
-    value: { name: o, id: y, error: r, hint: t }
+  var n = h, { children: e, name: o, error: r, hint: d, id: v, required: c } = n, y = l(n, ["children", "name", "error", "hint", "id", "required"]);
+  const g = b("field", v);
+  return /* @__PURE__ */ s.createElement("div", f({}, y), /* @__PURE__ */ s.createElement(O.Provider, {
+    value: { name: o, id: g, error: r, hint: d, required: c }
   }, e));
 };
 u.defaultProps = {
   error: void 0,
   hint: void 0,
   id: void 0,
-  name: void 0
+  name: void 0,
+  required: !1
 };
 u.propTypes = {
   children: i.node.isRequired,
   error: i.oneOfType([i.string, i.bool]),
   hint: i.oneOfType([i.string, i.node, i.arrayOf(i.node)]),
   id: i.oneOfType([i.string, i.number]),
-  name: i.string
+  name: i.string,
+  required: i.bool
 };
 export {
   u as Field

package/dist/Field/FieldInput.cjs

@@ -1,4 +1,4 @@
-"use strict";var k=Object.defineProperty;var a=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var b=(e,t,o)=>t in e?k(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,y=(e,t)=>{for(var o in t||(t={}))h.call(t,o)&&b(e,o,t[o]);if(a)for(var o of a(t))$.call(t,o)&&b(e,o,t[o]);return e};var m=(e,t)=>{var o={};for(var r in e)h.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&a)for(var r of a(e))t.indexOf(r)<0&&$.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),z=require("styled-components"),D=require("prop-types"),E=require("../themes/sizes.cjs"),M=require("../themes/utils.cjs"),O=require("./FieldContext.cjs"),P=require("../Flex/Flex.cjs"),x=require("../Box/Box.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=u(_),j=u(z),n=u(D),F={S:6.5,M:10.5},T=j.default.input`
+"use strict";var z=Object.defineProperty;var n=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var b=(e,t,o)=>t in e?z(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,y=(e,t)=>{for(var o in t||(t={}))h.call(t,o)&&b(e,o,t[o]);if(n)for(var o of n(t))$.call(t,o)&&b(e,o,t[o]);return e};var m=(e,t)=>{var o={};for(var r in e)h.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&n)for(var r of n(e))t.indexOf(r)<0&&$.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react"),D=require("styled-components"),E=require("prop-types"),M=require("../themes/sizes.cjs"),O=require("../themes/utils.cjs"),P=require("./FieldContext.cjs"),T=require("../Flex/Flex.cjs"),x=require("../Box/Box.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=u(q),_=u(D),a=u(E),F={S:6.5,M:10.5},L=_.default.input`
   border: none;
   border-radius: ${({theme:e})=>e.borderRadius};
   padding-bottom: ${({size:e})=>`${F[e]/16}rem`};
@@ -29,15 +29,15 @@
     outline: none;
     box-shadow: none;
   }
-`,q=j.default(P.Flex)`
+`,j=_.default(T.Flex)`
   border: 1px solid ${({theme:e,hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
   border-radius: ${({theme:e})=>e.borderRadius};
   background: ${({theme:e})=>e.colors.neutral0};
-  ${M.inputFocusStyle()}
+  ${O.inputFocusStyle()}
 
   ${({theme:e,disabled:t})=>t?`
     color: ${e.colors.neutral600};
     background: ${e.colors.neutral150};
   
   `:void 0}
-`,i=_.forwardRef((L,I)=>{var p=L,{endAction:e,startAction:t,disabled:o,onChange:r,size:c}=p,B=m(p,["endAction","startAction","disabled","onChange","size"]);const{id:d,error:f,hint:R,name:v}=O.useField();let l;f?l=`${d}-error`:R&&(l=`${d}-hint`);const g=Boolean(f),w=C=>{o||r(C)};return s.default.createElement(q,{size:c,justifyContent:"space-between",hasError:g,disabled:o},t&&s.default.createElement(x.Box,{paddingLeft:3,paddingRight:2},t),s.default.createElement(T,y({id:d,name:v,ref:I,"aria-describedby":l,"aria-invalid":g,"aria-disabled":o,hasLeftAction:Boolean(t),hasRightAction:Boolean(e),onChange:w,size:c},B)),e&&s.default.createElement(x.Box,{paddingLeft:2,paddingRight:3},e))});i.displayName="FieldInput";i.defaultProps={disabled:!1,endAction:void 0,size:"M",startAction:void 0,onChange(){}};i.propTypes={disabled:n.default.bool,endAction:n.default.element,onChange:n.default.func,size:n.default.oneOf(Object.keys(E.sizes.input)),startAction:n.default.element};exports.FieldInput=i;exports.InputWrapper=q;
+`,i=q.forwardRef((S,I)=>{var p=S,{endAction:e,startAction:t,disabled:o,onChange:r,size:c}=p,B=m(p,["endAction","startAction","disabled","onChange","size"]);const{id:d,error:f,hint:R,name:v,required:w}=P.useField();let l;f?l=`${d}-error`:R&&(l=`${d}-hint`);const g=Boolean(f),C=k=>{o||r(k)};return s.default.createElement(j,{size:c,justifyContent:"space-between",hasError:g,disabled:o},t&&s.default.createElement(x.Box,{paddingLeft:3,paddingRight:2},t),s.default.createElement(L,y({id:d,name:v,ref:I,"aria-describedby":l,"aria-invalid":g,"aria-disabled":o,hasLeftAction:Boolean(t),hasRightAction:Boolean(e),onChange:C,"aria-required":w,size:c},B)),e&&s.default.createElement(x.Box,{paddingLeft:2,paddingRight:3},e))});i.displayName="FieldInput";i.defaultProps={disabled:!1,endAction:void 0,size:"M",startAction:void 0,onChange(){}};i.propTypes={disabled:a.default.bool,endAction:a.default.element,onChange:a.default.func,size:a.default.oneOf(Object.keys(M.sizes.input)),startAction:a.default.element};exports.FieldInput=i;exports.InputWrapper=j;

package/dist/Field/FieldInput.js

@@ -1,11 +1,11 @@
-var F = Object.defineProperty;
-var a = Object.getOwnPropertySymbols;
+var B = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
 var g = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
-var f = (e, o, r) => o in e ? F(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, h = (e, o) => {
+var f = (e, o, r) => o in e ? B(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, h = (e, o) => {
   for (var r in o || (o = {}))
     g.call(o, r) && f(e, r, o[r]);
-  if (a)
-    for (var r of a(o))
+  if (n)
+    for (var r of n(o))
       b.call(o, r) && f(e, r, o[r]);
   return e;
 };
@@ -13,23 +13,23 @@ var $ = (e, o) => {
   var r = {};
   for (var t in e)
     g.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
-  if (e != null && a)
-    for (var t of a(e))
+  if (e != null && n)
+    for (var t of n(e))
       o.indexOf(t) < 0 && b.call(e, t) && (r[t] = e[t]);
   return r;
 };
-import i, { forwardRef as B } from "react";
+import i, { forwardRef as D } from "react";
 import R from "styled-components";
-import n from "prop-types";
-import { sizes as D } from "../themes/sizes.js";
-import { inputFocusStyle as O } from "../themes/utils.js";
-import { useField as z } from "./FieldContext.js";
-import { Flex as A } from "../Flex/Flex.js";
+import a from "prop-types";
+import { sizes as O } from "../themes/sizes.js";
+import { inputFocusStyle as z } from "../themes/utils.js";
+import { useField as A } from "./FieldContext.js";
+import { Flex as L } from "../Flex/Flex.js";
 import { Box as y } from "../Box/Box.js";
 const w = {
   S: 6.5,
   M: 10.5
-}, L = R.input`
+}, M = R.input`
   border: none;
   border-radius: ${({ theme: e }) => e.borderRadius};
   padding-bottom: ${({ size: e }) => `${w[e] / 16}rem`};
@@ -60,26 +60,26 @@ const w = {
     outline: none;
     box-shadow: none;
   }
-`, M = R(A)`
+`, P = R(L)`
   border: 1px solid ${({ theme: e, hasError: o }) => o ? e.colors.danger600 : e.colors.neutral200};
   border-radius: ${({ theme: e }) => e.borderRadius};
   background: ${({ theme: e }) => e.colors.neutral0};
-  ${O()}
+  ${z()}
 
   ${({ theme: e, disabled: o }) => o ? `
     color: ${e.colors.neutral600};
     background: ${e.colors.neutral150};
   
   ` : void 0}
-`, l = B((P, I) => {
-  var c = P, { endAction: e, startAction: o, disabled: r, onChange: t, size: p } = c, k = $(c, ["endAction", "startAction", "disabled", "onChange", "size"]);
-  const { id: d, error: u, hint: v, name: x } = z();
+`, l = D((T, I) => {
+  var c = T, { endAction: e, startAction: o, disabled: r, onChange: t, size: p } = c, k = $(c, ["endAction", "startAction", "disabled", "onChange", "size"]);
+  const { id: d, error: u, hint: v, name: x, required: C } = A();
   let s;
   u ? s = `${d}-error` : v && (s = `${d}-hint`);
-  const m = Boolean(u), C = (E) => {
-    r || t(E);
+  const m = Boolean(u), E = (F) => {
+    r || t(F);
   };
-  return /* @__PURE__ */ i.createElement(M, {
+  return /* @__PURE__ */ i.createElement(P, {
     size: p,
     justifyContent: "space-between",
     hasError: m,
@@ -87,7 +87,7 @@ const w = {
   }, o && /* @__PURE__ */ i.createElement(y, {
     paddingLeft: 3,
     paddingRight: 2
-  }, o), /* @__PURE__ */ i.createElement(L, h({
+  }, o), /* @__PURE__ */ i.createElement(M, h({
     id: d,
     name: x,
     ref: I,
@@ -96,7 +96,8 @@ const w = {
     "aria-disabled": r,
     hasLeftAction: Boolean(o),
     hasRightAction: Boolean(e),
-    onChange: C,
+    onChange: E,
+    "aria-required": C,
     size: p
   }, k)), e && /* @__PURE__ */ i.createElement(y, {
     paddingLeft: 2,
@@ -113,13 +114,13 @@ l.defaultProps = {
   }
 };
 l.propTypes = {
-  disabled: n.bool,
-  endAction: n.element,
-  onChange: n.func,
-  size: n.oneOf(Object.keys(D.input)),
-  startAction: n.element
+  disabled: a.bool,
+  endAction: a.element,
+  onChange: a.func,
+  size: a.oneOf(Object.keys(O.input)),
+  startAction: a.element
 };
 export {
   l as FieldInput,
-  M as InputWrapper
+  P as InputWrapper
 };

package/dist/Field/FieldLabel.cjs

@@ -1,9 +1,9 @@
-"use strict";var T=Object.defineProperty;var r=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var d=(e,l,t)=>l in e?T(e,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[l]=t,f=(e,l)=>{for(var t in l||(l={}))u.call(l,t)&&d(e,t,l[t]);if(r)for(var t of r(l))p.call(l,t)&&d(e,t,l[t]);return e};var y=(e,l)=>{var t={};for(var o in e)u.call(e,o)&&l.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&r)for(var o of r(e))l.indexOf(o)<0&&p.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),_=require("styled-components"),b=require("prop-types"),g=require("../Flex/Flex.cjs"),q=require("./FieldContext.cjs"),h=require("../Typography/Typography.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=s(x),F=s(_),n=s(b),j=F.default(h.Typography)`
+"use strict";var b=Object.defineProperty;var l=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var u=(e,r,t)=>r in e?b(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))c.call(r,t)&&u(e,t,r[t]);if(l)for(var t of l(r))p.call(r,t)&&u(e,t,r[t]);return e};var y=(e,r)=>{var t={};for(var o in e)c.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&l)for(var o of l(e))r.indexOf(o)<0&&p.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),_=require("styled-components"),v=require("prop-types"),g=require("../Flex/Flex.cjs"),j=require("./FieldContext.cjs"),h=require("../Typography/Typography.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(x),m=n(_),i=n(v),L=m.default(h.Typography)`
   line-height: 0;
-`,v=F.default(g.Flex)`
+`,C=m.default(g.Flex)`
   line-height: 0;
 
   svg path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,i=C=>{var c=C,{children:e,required:l,action:t}=c,o=y(c,["children","required","action"]);const{id:m}=q.useField();return a.default.createElement(h.Typography,f({variant:"pi",textColor:"neutral800",htmlFor:m,fontWeight:"bold",as:"label",required:l},o),a.default.createElement(g.Flex,{alignItems:"center"},e,l&&a.default.createElement(j,{textColor:"danger600"},"*"),t&&a.default.createElement(v,{marginLeft:1},t)))};i.defaultProps={required:!1,action:void 0};i.propTypes={action:n.default.element,children:n.default.node.isRequired,required:n.default.bool};exports.FieldLabel=i;
+`,d=E=>{var s=E,{children:e,action:r,required:t}=s,o=y(s,["children","action","required"]);const{id:q,required:F}=j.useField(),T=F||t;return t!==void 0&&console.warn('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'),a.default.createElement(h.Typography,f({variant:"pi",textColor:"neutral800",htmlFor:q,fontWeight:"bold",as:"label"},o),a.default.createElement(g.Flex,{alignItems:"center"},e,T&&a.default.createElement(L,{textColor:"danger600"},"*"),r&&a.default.createElement(C,{marginLeft:1},r)))};d.defaultProps={action:void 0,required:void 0};d.propTypes={action:i.default.element,children:i.default.node.isRequired,required:i.default.bool};exports.FieldLabel=d;

package/dist/Field/FieldLabel.js

@@ -1,64 +1,65 @@
 var b = Object.defineProperty;
-var l = Object.getOwnPropertySymbols;
-var p = Object.prototype.hasOwnProperty, s = 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, c = (e, r) => {
-  for (var t in r || (r = {}))
-    p.call(r, t) && m(e, t, r[t]);
-  if (l)
-    for (var t of l(r))
-      s.call(r, t) && m(e, t, r[t]);
+var i = Object.getOwnPropertySymbols;
+var s = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var d = (e, o, r) => o in e ? b(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, m = (e, o) => {
+  for (var r in o || (o = {}))
+    s.call(o, r) && d(e, r, o[r]);
+  if (i)
+    for (var r of i(o))
+      p.call(o, r) && d(e, r, o[r]);
   return e;
 };
-var d = (e, r) => {
-  var t = {};
-  for (var o in e)
-    p.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
-  if (e != null && l)
-    for (var o of l(e))
-      r.indexOf(o) < 0 && s.call(e, o) && (t[o] = e[o]);
-  return t;
+var c = (e, o) => {
+  var r = {};
+  for (var t in e)
+    s.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
+  if (e != null && i)
+    for (var t of i(e))
+      o.indexOf(t) < 0 && p.call(e, t) && (r[t] = e[t]);
+  return r;
 };
-import i from "react";
-import f from "styled-components";
-import n from "prop-types";
+import n from "react";
+import u from "styled-components";
+import l from "prop-types";
 import { Flex as h } from "../Flex/Flex.js";
-import { useField as x } from "./FieldContext.js";
-import { Typography as g } from "../Typography/Typography.js";
-const E = f(g)`
+import { useField as v } from "./FieldContext.js";
+import { Typography as f } from "../Typography/Typography.js";
+const x = u(f)`
   line-height: 0;
-`, F = f(h)`
+`, T = u(h)`
   line-height: 0;
 
   svg path {
     fill: ${({ theme: e }) => e.colors.neutral500};
   }
-`, u = (T) => {
-  var a = T, { children: e, required: r, action: t } = a, o = d(a, ["children", "required", "action"]);
-  const { id: y } = x();
-  return /* @__PURE__ */ i.createElement(g, c({
+`, g = (E) => {
+  var a = E, { children: e, action: o, required: r } = a, t = c(a, ["children", "action", "required"]);
+  const { id: q, required: y } = v(), F = y || r;
+  return r !== void 0 && console.warn(
+    'Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'
+  ), /* @__PURE__ */ n.createElement(f, m({
     variant: "pi",
     textColor: "neutral800",
-    htmlFor: y,
+    htmlFor: q,
     fontWeight: "bold",
-    as: "label",
-    required: r
-  }, o), /* @__PURE__ */ i.createElement(h, {
+    as: "label"
+  }, t), /* @__PURE__ */ n.createElement(h, {
     alignItems: "center"
-  }, e, r && /* @__PURE__ */ i.createElement(E, {
+  }, e, F && /* @__PURE__ */ n.createElement(x, {
     textColor: "danger600"
-  }, "*"), t && /* @__PURE__ */ i.createElement(F, {
+  }, "*"), o && /* @__PURE__ */ n.createElement(T, {
     marginLeft: 1
-  }, t)));
+  }, o)));
 };
-u.defaultProps = {
-  required: !1,
-  action: void 0
+g.defaultProps = {
+  action: void 0,
+  required: void 0
 };
-u.propTypes = {
-  action: n.element,
-  children: n.node.isRequired,
-  required: n.bool
+g.propTypes = {
+  action: l.element,
+  children: l.node.isRequired,
+  required: l.bool
 };
 export {
-  u as FieldLabel
+  g as FieldLabel
 };

package/dist/Link/Link.cjs

@@ -1,4 +1,4 @@
-"use strict";var b=Object.defineProperty;var a=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var p=(e,t,r)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,v=(e,t)=>{for(var r in t||(t={}))y.call(t,r)&&p(e,r,t[r]);if(a)for(var r of a(t))m.call(t,r)&&p(e,r,t[r]);return e};var g=(e,t)=>{var r={};for(var o in e)y.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&m.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),q=require("prop-types"),T=require("styled-components"),$=require("@strapi/icons/ExternalLink"),j=require("react-router-dom"),h=require("../Typography/Typography.cjs"),R=require("../Box/Box.cjs"),B=require("../themes/utils.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(k),l=i(q),_=i(T),P=i($),I=_.default.a`
+"use strict";var q=Object.defineProperty;var a=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var p=(e,t,r)=>t in e?q(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,v=(e,t)=>{for(var r in t||(t={}))y.call(t,r)&&p(e,r,t[r]);if(a)for(var r of a(t))m.call(t,r)&&p(e,r,t[r]);return e};var g=(e,t)=>{var r={};for(var o in e)y.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&m.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),T=require("prop-types"),$=require("styled-components"),R=require("@strapi/icons/ExternalLink"),j=require("react-router-dom"),_=require("../Typography/Typography.cjs"),B=require("../Box/Box.cjs"),P=require("../themes/utils.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(h),l=i(T),E=i($),w=i(R),I=E.default.a`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -14,7 +14,7 @@
     font-size: ${10/16}rem;
   }
 
-  ${h.Typography} {
+  ${_.Typography} {
     transition: color 150ms ease-out;
     color: currentColor;
   }
@@ -27,7 +27,7 @@
     color: ${({theme:e})=>e.colors.primary700};
   }
 
-  ${B.buttonFocusStyle};
-`,d=_.default(R.Box)`
+  ${P.buttonFocusStyle};
+`,d=E.default(B.Box)`
   display: flex;
-`,s=S=>{var f=S,{href:e,to:t,children:r,disabled:o,startIcon:u,endIcon:c}=f,E=g(f,["href","to","children","disabled","startIcon","endIcon"]);const L=e?"_blank":void 0,x=e?"noreferrer noopener":void 0;return n.default.createElement(I,v({as:t&&!o?j.NavLink:"a",target:L,rel:x,to:o?void 0:t,href:o?"#":e,disabled:o},E),u&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingRight:2},u),n.default.createElement(h.Typography,null,r),c&&!e&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingLeft:2},c),e&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingLeft:2},n.default.createElement(P.default,null)))};s.displayName="Link";s.defaultProps={endIcon:void 0,href:void 0,to:void 0,disabled:!1,startIcon:void 0};s.propTypes={children:l.default.node.isRequired,disabled:l.default.bool,endIcon:l.default.element,href(e){if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},startIcon:l.default.element,to(e){if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")}};exports.Link=s;
+`,s=h.forwardRef((S,x)=>{var f=S,{href:e,to:t,children:r,disabled:o,startIcon:u,endIcon:c}=f,L=g(f,["href","to","children","disabled","startIcon","endIcon"]);const b=e?"_blank":void 0,k=e?"noreferrer noopener":void 0;return n.default.createElement(I,v({as:t&&!o?j.NavLink:"a",target:b,rel:k,to:o?void 0:t,href:o?"#":e,disabled:o,ref:x},L),u&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingRight:2},u),n.default.createElement(_.Typography,null,r),c&&!e&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingLeft:2},c),e&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingLeft:2},n.default.createElement(w.default,null)))});s.displayName="Link";s.defaultProps={endIcon:void 0,href:void 0,to:void 0,disabled:!1,startIcon:void 0};s.propTypes={children:l.default.node.isRequired,disabled:l.default.bool,endIcon:l.default.element,href(e){if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},startIcon:l.default.element,to(e){if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")}};exports.Link=s;