@strapi/design-system 1.7.0 → 1.7.2-alpha.0

package/dist/Tag/Tag.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),c=require("styled-components"),p=require("../Flex/Flex.cjs"),u=require("../Typography/Typography.cjs"),d=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},i=d(c),g=({children:r,icon:t,disabled:e=!1,onClick:a,...l})=>{const s=n=>{e||!a||a(n)};return o.jsxs(y,{as:"button",background:e?"neutral200":"primary100",color:e?"neutral700":"primary600",paddingLeft:3,paddingRight:3,onClick:s,"aria-disabled":e,disabled:e,borderWidth:"1px",borderStyle:"solid",borderColor:e?"neutral300":"primary200",hasRadius:!0,height:`${32/16}rem`,gap:2,...l,children:[o.jsx(h,{$disabled:e,variant:"pi",fontWeight:"bold",as:"span",children:r}),t]})},y=i.default(p.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("styled-components"),u=require("../Flex/Flex.cjs"),c=require("../Typography/Typography.cjs"),p=r=>r&&r.__esModule?r:{default:r},i=p(d),g=({children:r,icon:e,disabled:t=!1,onClick:a,...l})=>{const n=s=>{t||!a||a(s)};return o.jsxs(h,{as:"button",background:t?"neutral200":"primary100",color:t?"neutral700":"primary600",paddingLeft:3,paddingRight:3,onClick:n,"aria-disabled":t,disabled:t,borderWidth:"1px",borderStyle:"solid",borderColor:t?"neutral300":"primary200",hasRadius:!0,height:`${32/16}rem`,gap:2,...l,children:[o.jsx(y,{$disabled:t,variant:"pi",fontWeight:"bold",as:"span",children:r}),e]})},h=i.default(u.Flex)`
   & > svg {
     height: ${8/16}rem;
     width: ${8/16}rem;
   }
 
   & > svg path {
-    fill: ${({theme:r,...t})=>t["aria-disabled"]?r.colors.neutral600:r.colors.primary600};
+    fill: ${({theme:r,...e})=>e["aria-disabled"]?r.colors.neutral600:r.colors.primary600};
   }
-`,h=i.default(u.Typography)`
+`,y=i.default(c.Typography)`
   color: inherit;
-  border-right: 1px solid ${({theme:r,$disabled:t})=>t?r.colors.neutral300:r.colors.primary200};
+  border-right: 1px solid ${({theme:r,$disabled:e})=>e?r.colors.neutral300:r.colors.primary200};
   padding-right: ${({theme:r})=>r.spaces[2]};
 `;exports.Tag=g;

package/dist/Tag/Tag.js

@@ -2,58 +2,21 @@ import { jsxs as n, jsx as p } from "react/jsx-runtime";
 import t from "styled-components";
 import { Flex as s } from "../Flex/Flex.js";
 import { Typography as d } from "../Typography/Typography.js";
-const x = ({
-  children: r,
-  icon: a,
-  disabled: o = !1,
-  onClick: i,
-  ...e
-}) => n(g, {
-  as: "button",
-  background: o ? "neutral200" : "primary100",
-  color: o ? "neutral700" : "primary600",
-  paddingLeft: 3,
-  paddingRight: 3,
-  onClick: (l) => {
-    o || !i || i(l);
-  },
-  "aria-disabled": o,
-  disabled: o,
-  borderWidth: "1px",
-  borderStyle: "solid",
-  borderColor: o ? "neutral300" : "primary200",
-  hasRadius: !0,
-  height: `${32 / 16}rem`,
-  gap: 2,
-  ...e,
-  children: [p(c, {
-    $disabled: o,
-    variant: "pi",
-    fontWeight: "bold",
-    as: "span",
-    children: r
-  }), a]
-}), g = t(s)`
+const x = ({ children: r, icon: a, disabled: o = !1, onClick: i, ...e }) => n(g, { as: "button", background: o ? "neutral200" : "primary100", color: o ? "neutral700" : "primary600", paddingLeft: 3, paddingRight: 3, onClick: (l) => {
+  o || !i || i(l);
+}, "aria-disabled": o, disabled: o, borderWidth: "1px", borderStyle: "solid", borderColor: o ? "neutral300" : "primary200", hasRadius: !0, height: `${32 / 16}rem`, gap: 2, ...e, children: [p(c, { $disabled: o, variant: "pi", fontWeight: "bold", as: "span", children: r }), a] }), g = t(s)`
   & > svg {
     height: ${8 / 16}rem;
     width: ${8 / 16}rem;
   }
 
   & > svg path {
-    fill: ${({
-  theme: r,
-  ...a
-}) => a["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600};
+    fill: ${({ theme: r, ...a }) => a["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600};
   }
 `, c = t(d)`
   color: inherit;
-  border-right: 1px solid ${({
-  theme: r,
-  $disabled: a
-}) => a ? r.colors.neutral300 : r.colors.primary200};
-  padding-right: ${({
-  theme: r
-}) => r.spaces[2]};
+  border-right: 1px solid ${({ theme: r, $disabled: a }) => a ? r.colors.neutral300 : r.colors.primary200};
+  padding-right: ${({ theme: r }) => r.spaces[2]};
 `;
 export {
   x as Tag

package/dist/Tag/index.cjs

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

package/dist/TextButton/TextButton.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),y=require("react"),g=require("@strapi/icons"),c=require("styled-components"),m=require("../Flex/Flex.cjs"),b=require("../themes/utils.cjs"),j=require("../Typography/Typography.cjs"),x=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function h(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const T=h(y),l=x(c),_=c.keyframes`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),y=require("react"),g=require("@strapi/icons"),l=require("styled-components"),b=require("../themes/utils.cjs"),m=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),h=e=>e&&e.__esModule?e:{default:e};function j(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const _=j(y),u=h(l),T=l.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,v=l.default.div`
-  animation: ${_} 2s infinite linear;
+`,q=u.default.div`
+  animation: ${T} 2s infinite linear;
   will-change: transform;
-`,q=l.default(m.Flex)`
+`,v=u.default(m.Flex)`
   border: none;
 
   &[aria-disabled='true'] {
@@ -23,4 +23,4 @@
   }
 
   ${b.buttonFocusStyle}
-`,u=T.forwardRef(({children:e,startIcon:r,endIcon:t,onClick:n,disabled:a=!1,loading:s=!1,...d},p)=>{const f=n&&!a?n:void 0,i=a||s;return o.jsxs(q,{ref:p,"aria-disabled":i,onClick:f,as:"button",type:"button",background:"transparent",gap:2,...d,children:[s?o.jsx(v,{"aria-hidden":!0,children:o.jsx(g.Loader,{})}):r,o.jsx(j.Typography,{variant:"pi",textColor:i?"neutral600":"primary600",children:e}),t]})});u.displayName="TextButton";exports.TextButton=u;
+`,c=_.forwardRef(({children:e,startIcon:r,endIcon:t,onClick:n,disabled:a=!1,loading:s=!1,...d},f)=>{const p=n&&!a?n:void 0,i=a||s;return o.jsxs(v,{ref:f,"aria-disabled":i,onClick:p,as:"button",type:"button",background:"transparent",gap:2,...d,children:[s?o.jsx(q,{"aria-hidden":!0,children:o.jsx(g.Loader,{})}):r,o.jsx(x.Typography,{variant:"pi",textColor:i?"neutral600":"primary600",children:e}),t]})});c.displayName="TextButton";exports.TextButton=c;

package/dist/TextButton/TextButton.js

@@ -2,8 +2,8 @@ import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import * as c from "react";
 import { Loader as u } from "@strapi/icons";
 import i, { keyframes as h } from "styled-components";
-import { Flex as y } from "../Flex/Flex.js";
-import { buttonFocusStyle as g } from "../themes/utils.js";
+import { buttonFocusStyle as y } from "../themes/utils.js";
+import { Flex as g } from "../Flex/Flex.js";
 import { Typography as x } from "../Typography/Typography.js";
 const b = h`
   from {
@@ -15,53 +15,24 @@ const b = h`
 `, v = i.div`
   animation: ${b} 2s infinite linear;
   will-change: transform;
-`, T = i(y)`
+`, T = i(g)`
   border: none;
 
   &[aria-disabled='true'] {
     pointer-events: none;
     svg path {
-      fill: ${({
-  theme: r
-}) => r.colors.neutral600};
+      fill: ${({ theme: r }) => r.colors.neutral600};
     }
   }
 
   svg path {
-    fill: ${({
-  theme: r
-}) => r.colors.primary600};
+    fill: ${({ theme: r }) => r.colors.primary600};
   }
 
-  ${g}
-`, $ = c.forwardRef(({
-  children: r,
-  startIcon: s,
-  endIcon: l,
-  onClick: o,
-  disabled: e = !1,
-  loading: a = !1,
-  ...p
-}, m) => {
+  ${y}
+`, $ = c.forwardRef(({ children: r, startIcon: s, endIcon: l, onClick: o, disabled: e = !1, loading: a = !1, ...p }, m) => {
   const f = o && !e ? o : void 0, n = e || a;
-  return d(T, {
-    ref: m,
-    "aria-disabled": n,
-    onClick: f,
-    as: "button",
-    type: "button",
-    background: "transparent",
-    gap: 2,
-    ...p,
-    children: [a ? t(v, {
-      "aria-hidden": !0,
-      children: t(u, {})
-    }) : s, t(x, {
-      variant: "pi",
-      textColor: n ? "neutral600" : "primary600",
-      children: r
-    }), l]
-  });
+  return d(T, { ref: m, "aria-disabled": n, onClick: f, as: "button", type: "button", background: "transparent", gap: 2, ...p, children: [a ? t(v, { "aria-hidden": !0, children: t(u, {}) }) : s, t(x, { variant: "pi", textColor: n ? "neutral600" : "primary600", children: r }), l] });
 });
 $.displayName = "TextButton";
 export {

package/dist/TextButton/index.cjs

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

package/dist/TextInput/TextInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("react"),x=require("../Field/Field.cjs"),p=require("../Field/FieldLabel.cjs"),I=require("../Field/FieldInput.cjs"),q=require("../Field/FieldHint.cjs"),h=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const m=require("../Flex/Flex.cjs"),f=require("../hooks/useId.cjs"),n=i.forwardRef(({name:s,hint:d,error:c,label:r,labelAction:u,id:o,required:F,...t},a)=>{const j=f.useId(o),l=i.useRef(null);if(!r&&!t["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return i.useImperativeHandle(a,()=>({inputWrapperRef:l})),e.jsx("div",{ref:l,children:e.jsx(x.Field,{name:s,hint:d,error:c,id:j,required:F,children:e.jsxs(m.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r&&e.jsx(p.FieldLabel,{action:u,children:r}),e.jsx(I.FieldInput,{...t}),e.jsx(q.FieldHint,{}),e.jsx(h.FieldError,{})]})})})});n.displayName="TextInput";exports.TextInput=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),F=require("../hooks/useId.cjs"),I=require("../Field/FieldInput.cjs"),q=require("../Field/Field.cjs"),j=require("../Flex/Flex.cjs"),h=require("../Field/FieldLabel.cjs"),m=require("../Field/FieldHint.cjs"),f=require("../Field/FieldError.cjs"),s=t.forwardRef(({name:l,hint:d,error:o,label:r,labelAction:u,id:c,required:a,...i},p)=>{const x=F.useId(c),n=t.useRef(null);if(!r&&!i["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return t.useImperativeHandle(p,()=>({inputWrapperRef:n})),e.jsx("div",{ref:n,children:e.jsx(q.Field,{name:l,hint:d,error:o,id:x,required:a,children:e.jsxs(j.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r&&e.jsx(h.FieldLabel,{action:u,children:r}),e.jsx(I.FieldInput,{...i}),e.jsx(m.FieldHint,{}),e.jsx(f.FieldError,{})]})})})});s.displayName="TextInput";exports.TextInput=s;

package/dist/TextInput/TextInput.js

@@ -1,50 +1,19 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as c, useRef as u, useImperativeHandle as h } from "react";
-import { Field as I } from "../Field/Field.js";
-import { FieldLabel as x } from "../Field/FieldLabel.js";
-import { FieldInput as F } from "../Field/FieldInput.js";
-import { FieldHint as T } from "../Field/FieldHint.js";
-import { FieldError as g } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as w } from "../Flex/Flex.js";
-import { useId as R } from "../hooks/useId.js";
-const b = c(({
-  name: t,
-  hint: n,
-  error: m,
-  label: e,
-  labelAction: p,
-  id: d,
-  required: a,
-  ...i
-}, l) => {
-  const f = R(d), o = u(null);
+import { useId as I } from "../hooks/useId.js";
+import { FieldInput as x } from "../Field/FieldInput.js";
+import { Field as F } from "../Field/Field.js";
+import { Flex as T } from "../Flex/Flex.js";
+import { FieldLabel as g } from "../Field/FieldLabel.js";
+import { FieldHint as w } from "../Field/FieldHint.js";
+import { FieldError as R } from "../Field/FieldError.js";
+const b = c(({ name: t, hint: n, error: m, label: e, labelAction: p, id: d, required: a, ...i }, l) => {
+  const f = I(d), o = u(null);
   if (!e && !i["aria-label"])
     throw new Error('The TextInput component needs a "label" or an "aria-label" props');
   return h(l, () => ({
     inputWrapperRef: o
-  })), r("div", {
-    ref: o,
-    children: r(I, {
-      name: t,
-      hint: n,
-      error: m,
-      id: f,
-      required: a,
-      children: s(w, {
-        direction: "column",
-        alignItems: "stretch",
-        gap: 1,
-        children: [e && r(x, {
-          action: p,
-          children: e
-        }), r(F, {
-          ...i
-        }), r(T, {}), r(g, {})]
-      })
-    })
-  });
+  })), r("div", { ref: o, children: r(F, { name: t, hint: n, error: m, id: f, required: a, children: s(T, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(g, { action: p, children: e }), r(x, { ...i }), r(w, {}), r(R, {})] }) }) });
 });
 b.displayName = "TextInput";
 export {

package/dist/TextInput/index.cjs

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

package/dist/Textarea/Textarea.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),g=require("prop-types"),q=require("styled-components"),x=require("./TextareaInput.cjs"),y=require("../Field/Field.cjs"),T=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const b=require("../Field/FieldHint.cjs"),j=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const d=require("../Flex/Flex.cjs"),v=require("../hooks/useId.cjs"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=a(h),e=a(g),E=a(q),I=E.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("react"),q=require("prop-types"),m=require("styled-components"),T=require("./TextareaInput.cjs"),v=require("../hooks/useId.cjs"),y=require("../Field/Field.cjs"),d=require("../Flex/Flex.cjs"),F=require("../Field/FieldLabel.cjs"),b=require("../Field/FieldHint.cjs"),j=require("../Field/FieldError.cjs"),l=t=>t&&t.__esModule?t:{default:t},_=l(g),e=l(q),I=l(m),O=I.default.div`
   & textarea {
     // TODO: remove when we'll have fonts in the theme
     height: ${80/16}rem;
@@ -12,4 +12,4 @@
     color: ${({theme:t})=>t.colors.neutral500};
     opacity: 1;
   }
-`,r=l.default.forwardRef(({name:t,hint:n,error:o,label:i,children:u,labelAction:s,id:c,required:f,...F},p)=>{const m=v.useId(c);return l.default.createElement(I,null,l.default.createElement(y.Field,{name:t,hint:n,error:o,id:m,required:f},l.default.createElement(d.Flex,{direction:"column",alignItems:"stretch",gap:1},i&&l.default.createElement(d.Flex,null,l.default.createElement(T.FieldLabel,{action:s},i)),l.default.createElement(x.TextareaInput,{ref:p,as:"textarea",value:u,...F}),l.default.createElement(b.FieldHint,null),l.default.createElement(j.FieldError,null))))});r.displayName="Textarea";r.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,children:"",required:!1};r.propTypes={"aria-label":e.default.string,children:e.default.string,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool};exports.Textarea=r;
+`,i=_.default.forwardRef(({name:t,hint:n,error:o,label:a,children:s,labelAction:u,id:c,required:f,...h},x)=>{const p=v.useId(c);return r.jsx(O,{children:r.jsx(y.Field,{name:t,hint:n,error:o,id:p,required:f,children:r.jsxs(d.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[a&&r.jsx(d.Flex,{children:r.jsx(F.FieldLabel,{action:u,children:a})}),r.jsx(T.TextareaInput,{ref:x,as:"textarea",value:s,...h}),r.jsx(b.FieldHint,{}),r.jsx(j.FieldError,{})]})})})});i.displayName="Textarea";i.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,children:"",required:!1};i.propTypes={"aria-label":e.default.string,children:e.default.string,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool};exports.Textarea=i;

package/dist/Textarea/Textarea.js

@@ -1,17 +1,15 @@
-import r from "react";
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import u from "react";
 import e from "prop-types";
-import u from "styled-components";
-import { TextareaInput as g } from "./TextareaInput.js";
-import { Field as v } from "../Field/Field.js";
-import { FieldLabel as x } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as E } from "../Field/FieldHint.js";
-import { FieldError as T } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
+import x from "styled-components";
+import { TextareaInput as v } from "./TextareaInput.js";
+import { useId as T } from "../hooks/useId.js";
+import { Field as b } from "../Field/Field.js";
 import { Flex as a } from "../Flex/Flex.js";
-import { useId as b } from "../hooks/useId.js";
-const y = u.div`
+import { FieldLabel as y } from "../Field/FieldLabel.js";
+import { FieldHint as F } from "../Field/FieldHint.js";
+import { FieldError as w } from "../Field/FieldError.js";
+const I = x.div`
   & textarea {
     // TODO: remove when we'll have fonts in the theme
     height: ${80 / 16}rem;
@@ -22,17 +20,22 @@ const y = u.div`
     font-weight: 400;
     font-size: ${14 / 16}rem;
     line-height: 1.43;
-    color: ${({ theme: t }) => t.colors.neutral500};
+    color: ${({ theme: i }) => i.colors.neutral500};
     opacity: 1;
   }
-`, i = r.forwardRef(
-  ({ name: t, hint: l, error: n, label: o, children: m, labelAction: d, id: p, required: c, ...s }, f) => {
-    const h = b(p);
-    return /* @__PURE__ */ r.createElement(y, null, /* @__PURE__ */ r.createElement(v, { name: t, hint: l, error: n, id: h, required: c }, /* @__PURE__ */ r.createElement(a, { direction: "column", alignItems: "stretch", gap: 1 }, o && /* @__PURE__ */ r.createElement(a, null, /* @__PURE__ */ r.createElement(x, { action: d }, o)), /* @__PURE__ */ r.createElement(g, { ref: f, as: "textarea", value: m, ...s }), /* @__PURE__ */ r.createElement(E, null), /* @__PURE__ */ r.createElement(T, null))));
+`, t = u.forwardRef(
+  ({ name: i, hint: l, error: n, label: o, children: d, labelAction: m, id: s, required: p, ...h }, c) => {
+    const f = T(s);
+    return /* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(b, { name: i, hint: l, error: n, id: f, required: p, children: /* @__PURE__ */ g(a, { direction: "column", alignItems: "stretch", gap: 1, children: [
+      o && /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(y, { action: m, children: o }) }),
+      /* @__PURE__ */ r(v, { ref: c, as: "textarea", value: d, ...h }),
+      /* @__PURE__ */ r(F, {}),
+      /* @__PURE__ */ r(w, {})
+    ] }) }) });
   }
 );
-i.displayName = "Textarea";
-i.defaultProps = {
+t.displayName = "Textarea";
+t.defaultProps = {
   "aria-label": void 0,
   label: void 0,
   labelAction: void 0,
@@ -42,7 +45,7 @@ i.defaultProps = {
   children: "",
   required: !1
 };
-i.propTypes = {
+t.propTypes = {
   "aria-label": e.string,
   children: e.string,
   error: e.string,
@@ -54,5 +57,5 @@ i.propTypes = {
   required: e.bool
 };
 export {
-  i as Textarea
+  t as Textarea
 };

package/dist/Textarea/TextareaInput.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),b=require("prop-types"),$=require("styled-components");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");require("react/jsx-runtime");const g=require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");require("../Field/FieldAction.cjs");const q=require("../themes/utils.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=s(d),F=s(b),c=s($),T=c.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),$=require("react"),b=require("prop-types"),y=require("styled-components"),g=require("../themes/utils.cjs"),x=require("../Field/FieldContext.cjs"),l=e=>e&&e.__esModule?e:{default:e},T=l(b),d=l(y),q=d.default.div`
   border: 1px solid ${({theme:e,hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
   border-radius: ${({theme:e})=>e.borderRadius};
 
@@ -8,8 +8,8 @@
   padding-bottom: ${({theme:e})=>`${e.spaces[3]}`};
 
   background: ${({theme:e,disabled:r})=>r?e.colors.neutral150:e.colors.neutral0};
-  ${q.inputFocusStyle()}
-`,j=c.default.textarea`
+  ${g.inputFocusStyle()}
+`,h=d.default.textarea`
   display: block;
   width: 100%;
   font-weight: 400;
@@ -27,4 +27,4 @@
   &:focus-within {
     outline: none;
   }
-`,t=d.forwardRef(({disabled:e,...r},u)=>{const{id:o,error:l,hint:p,name:f,required:y}=g.useField();let a;l?a=`${o}-error`:p&&(a=`${o}-hint`);const i=Boolean(l);return n.default.createElement(T,{hasError:i,disabled:e},n.default.createElement(j,{id:o,name:f,ref:u,"aria-describedby":a,"aria-invalid":i,disabled:e,hasError:i,"aria-required":y,...r}))});t.displayName="TextareaInput";t.defaultProps={disabled:!1};t.propTypes={disabled:F.default.bool};exports.TextareaInput=t;
+`,o=$.forwardRef(({disabled:e,...r},u)=>{const{id:t,error:n,hint:c,name:p,required:f}=x.useField();let a;n?a=`${t}-error`:c&&(a=`${t}-hint`);const s=!!n;return i.jsx(q,{hasError:s,disabled:e,children:i.jsx(h,{id:t,name:p,ref:u,"aria-describedby":a,"aria-invalid":s,disabled:e,hasError:s,"aria-required":f,...r})})});o.displayName="TextareaInput";o.defaultProps={disabled:!1};o.propTypes={disabled:T.default.bool};exports.TextareaInput=o;

package/dist/Textarea/TextareaInput.js

@@ -1,15 +1,10 @@
-import s, { forwardRef as m } from "react";
-import f from "prop-types";
-import p from "styled-components";
-import "../Field/Field.js";
-import "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import "react/jsx-runtime";
-import { useField as $ } from "../Field/FieldContext.js";
-import "../Typography/Typography.js";
-import "../Field/FieldAction.js";
-import { inputFocusStyle as b } from "../themes/utils.js";
-const g = p.div`
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import $ from "prop-types";
+import d from "styled-components";
+import { inputFocusStyle as m } from "../themes/utils.js";
+import { useField as b } from "../Field/FieldContext.js";
+const g = d.div`
   border: 1px solid ${({ theme: r, hasError: o }) => o ? r.colors.danger600 : r.colors.neutral200};
   border-radius: ${({ theme: r }) => r.borderRadius};
 
@@ -19,8 +14,8 @@ const g = p.div`
   padding-bottom: ${({ theme: r }) => `${r.spaces[3]}`};
 
   background: ${({ theme: r, disabled: o }) => o ? r.colors.neutral150 : r.colors.neutral0};
-  ${b()}
-`, y = p.textarea`
+  ${m()}
+`, x = d.textarea`
   display: block;
   width: 100%;
   font-weight: 400;
@@ -38,33 +33,33 @@ const g = p.div`
   &:focus-within {
     outline: none;
   }
-`, i = m(({ disabled: r, ...o }, l) => {
-  const { id: e, error: n, hint: d, name: c, required: u } = $();
-  let t;
-  n ? t = `${e}-error` : d && (t = `${e}-hint`);
-  const a = Boolean(n);
-  return /* @__PURE__ */ s.createElement(g, { hasError: a, disabled: r }, /* @__PURE__ */ s.createElement(
-    y,
+`, t = f(({ disabled: r, ...o }, l) => {
+  const { id: e, error: s, hint: p, name: c, required: u } = b();
+  let a;
+  s ? a = `${e}-error` : p && (a = `${e}-hint`);
+  const i = !!s;
+  return /* @__PURE__ */ n(g, { hasError: i, disabled: r, children: /* @__PURE__ */ n(
+    x,
     {
       id: e,
       name: c,
       ref: l,
-      "aria-describedby": t,
-      "aria-invalid": a,
+      "aria-describedby": a,
+      "aria-invalid": i,
       disabled: r,
-      hasError: a,
+      hasError: i,
       "aria-required": u,
       ...o
     }
-  ));
+  ) });
 });
-i.displayName = "TextareaInput";
-i.defaultProps = {
+t.displayName = "TextareaInput";
+t.defaultProps = {
   disabled: !1
 };
-i.propTypes = {
-  disabled: f.bool
+t.propTypes = {
+  disabled: $.bool
 };
 export {
-  i as TextareaInput
+  t as TextareaInput
 };

package/dist/Textarea/index.cjs

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

package/dist/ThemeProvider/ThemeProvider.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),t=require("styled-components"),r=require("../LiveRegions/LiveRegions.cjs"),n=t.createGlobalStyle`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("styled-components"),r=require("../LiveRegions/LiveRegions.cjs"),n=t.createGlobalStyle`
  /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)

package/dist/ThemeProvider/ThemeProvider.js

@@ -138,9 +138,7 @@ const s = i`
   }
 
   *:focus-visible {
-    outline: 2px solid ${({
-  theme: e
-}) => e.colors.primary600};
+    outline: 2px solid ${({ theme: e }) => e.colors.primary600};
     outline-offset: 2px;
   }
 
@@ -175,13 +173,7 @@ const s = i`
     height: 100vh;
     overflow-y: hidden;
   }
-`, c = ({
-  children: e,
-  theme: t
-}) => r(n, {
-  theme: t,
-  children: [o(s, {}), e, o(l, {})]
-});
+`, c = ({ children: e, theme: t }) => r(n, { theme: t, children: [o(s, {}), e, o(l, {})] });
 export {
   c as ThemeProvider
 };

package/dist/ThemeProvider/hooks.cjs

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

package/dist/ThemeProvider/index.cjs

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

package/dist/TimePicker/TimePicker.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),b=require("@strapi/icons"),M=require("styled-components"),$=require("../Flex/Flex.cjs"),q=require("../hooks/useId.cjs"),d=require("../Select/SingleSelect.cjs"),y=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},I=y(M),v=({id:t,value:i,step:h=15,onChange:u,...p})=>{const g=q.useId(t),m=24,s=[];let n=0;for(let e=0;e<m;e++)for(n=0;n<60;)s.push(`${e<10?`0${e}`:e}:${n<10?`0${n}`:n}`),n+=h;const S=()=>{const[e,a]=i?.split(":")??[],j=s.reduce((l,r)=>{const[c]=r.split(":");return Math.abs(c-e)<Math.abs(l-e)?c:l},s[0].split(":")[0]),x=s.reduce((l,r)=>{const c=r.split(":")[1];return Math.abs(c-a)<Math.abs(l-a)?c:l},s[0].split(":")[1]);return`${j}:${x}`},f=e=>{u&&u(e.toString())};return o.jsx(d.SingleSelect,{id:g,placeholder:"--:--",value:i?S():void 0,startIcon:o.jsx(_,{as:"span",children:o.jsx(b.Clock,{})}),onChange:f,...p,children:s.map(e=>o.jsx(d.SingleSelectOption,{value:e,children:e},e))})},_=I.default($.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),$=require("@strapi/icons"),b=require("styled-components"),j=require("../hooks/useId.cjs"),d=require("../Select/SingleSelect.cjs"),q=require("../Flex/Flex.cjs"),I=t=>t&&t.__esModule?t:{default:t},_=I(b),v=({id:t,value:c,step:h=15,onChange:u,...p})=>{const g=j.useId(t),m=24,s=[];let n=0;for(let e=0;e<m;e++)for(n=0;n<60;)s.push(`${e<10?`0${e}`:e}:${n<10?`0${n}`:n}`),n+=h;const f=()=>{const[e,a]=c?.split(":")??[],x=s.reduce((r,o)=>{const[l]=o.split(":");return Math.abs(l-e)<Math.abs(r-e)?l:r},s[0].split(":")[0]),M=s.reduce((r,o)=>{const l=o.split(":")[1];return Math.abs(l-a)<Math.abs(r-a)?l:r},s[0].split(":")[1]);return`${x}:${M}`},S=e=>{u&&u(e.toString())};return i.jsx(d.SingleSelect,{id:g,placeholder:"--:--",value:c?f():void 0,startIcon:i.jsx(y,{as:"span",children:i.jsx($.Clock,{})}),onChange:S,...p,children:s.map(e=>i.jsx(d.SingleSelectOption,{value:e,children:e},e))})},y=_.default(q.Flex)`
   & > svg {
     height: 1rem;
     width: 1rem;

package/dist/TimePicker/TimePicker.js

@@ -1,17 +1,11 @@
 import { jsx as n } from "react/jsx-runtime";
 import { Clock as S } from "@strapi/icons";
 import b from "styled-components";
-import { Flex as C } from "../Flex/Flex.js";
-import { useId as I } from "../hooks/useId.js";
-import { SingleSelect as v, SingleSelectOption as x } from "../Select/SingleSelect.js";
-const O = ({
-  id: i,
-  value: c,
-  step: h = 15,
-  onChange: a,
-  ...m
-}) => {
-  const p = I(i), d = 24, e = [];
+import { useId as C } from "../hooks/useId.js";
+import { SingleSelect as I, SingleSelectOption as v } from "../Select/SingleSelect.js";
+import { Flex as x } from "../Flex/Flex.js";
+const O = ({ id: i, value: c, step: h = 15, onChange: a, ...m }) => {
+  const p = C(i), d = 24, e = [];
   let s = 0;
   for (let t = 0; t < d; t++)
     for (s = 0; s < 60; )
@@ -28,31 +22,15 @@ const O = ({
   }, g = (t) => {
     a && a(t.toString());
   };
-  return n(v, {
-    id: p,
-    placeholder: "--:--",
-    value: c ? f() : void 0,
-    startIcon: n(k, {
-      as: "span",
-      children: n(S, {})
-    }),
-    onChange: g,
-    ...m,
-    children: e.map((t) => n(x, {
-      value: t,
-      children: t
-    }, t))
-  });
-}, k = b(C)`
+  return n(I, { id: p, placeholder: "--:--", value: c ? f() : void 0, startIcon: n(k, { as: "span", children: n(S, {}) }), onChange: g, ...m, children: e.map((t) => n(v, { value: t, children: t }, t)) });
+}, k = b(x)`
   & > svg {
     height: 1rem;
     width: 1rem;
   }
 
   & > svg path {
-    fill: ${({
-  theme: i
-}) => i.colors.neutral500};
+    fill: ${({ theme: i }) => i.colors.neutral500};
   }
 `;
 export {

package/dist/TimePicker/index.cjs

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