@strapi/design-system 1.7.5 → 1.7.7

package/dist/ToggleCheckbox/ToggleCheckbox.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),$=require("react"),_=require("prop-types"),L=require("styled-components"),m=require("../themes/sizes.cjs"),z=require("../themes/utils.cjs"),S=require("../Box/Box.cjs"),F=require("../Flex/Flex.cjs"),W=require("../Field/FieldContext.cjs"),B=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},M=c($),n=c(_),i=c(L),P=i.default.label`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),R=require("react"),k=require("styled-components"),m=require("../themes/utils.cjs"),_=require("../Box/Box.cjs"),S=require("../Flex/Flex.cjs"),B=require("../Field/FieldContext.cjs"),F=require("../VisuallyHidden/VisuallyHidden.cjs"),f=require("../Typography/Typography.cjs"),x=e=>e&&e.__esModule?e:{default:e},L=x(R),a=x(k),W=a.default.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`,I=i.default(S.Box)`
+`,z=a.default(_.Box)`
   cursor: ${({disabled:e})=>e?"not-allowed":void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${z.inputFocusStyle()}
-`,g=i.default(F.Flex).attrs({hasRadius:!0})`
-  background-color: ${({theme:e,checked:l,disabled:a})=>l?a?e.colors.neutral200:e.colors.neutral0:"transparent"};
+  ${m.inputFocusStyle()}
+`,h=a.default(S.Flex).attrs({hasRadius:!0})`
+  background-color: ${({theme:e,checked:o,disabled:l})=>o?l?e.colors.neutral200:e.colors.neutral0:"transparent"};
   border: 1px solid
-    ${({theme:e,checked:l,disabled:a})=>l&&l!==null?a?e.colors.neutral300:e.colors.neutral200:a?e.colors.neutral150:e.colors.neutral100};
+    ${({theme:e,checked:o,disabled:l})=>o&&o!==null?l?e.colors.neutral300:e.colors.neutral200:l?e.colors.neutral150:e.colors.neutral100};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -25,7 +25,7 @@
   */
   padding-top: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
   padding-bottom: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
-`,O=i.default.input`
+`,M=a.default.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -33,4 +33,4 @@
   top: 0;
   z-index: 1;
   width: 100%;
-`,s=M.default.forwardRef(({size:e,onLabel:l,offLabel:a,children:x,checked:t,disabled:r,onChange:b,...y},C)=>{const{error:q,hint:w,id:p,name:j,required:T}=W.useField(),f="neutral600";let v=!t&&t!==null?"danger700":f,R=t?"primary600":f;const k=d=>{r||b(d)};let u;return q?u=`${p}-error`:w&&(u=`${p}-hint`),o.jsxs(P,{children:[o.jsx(B.VisuallyHidden,{children:x}),o.jsxs(I,{hasRadius:!0,disabled:r,padding:1,display:"flex",background:r?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",children:[o.jsx(g,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:!t,disabled:r,children:o.jsx(h.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:r?"neutral700":v,children:a})}),o.jsx(g,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:t,disabled:r,children:o.jsx(h.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:r?"neutral700":R,children:l})}),o.jsx(O,{type:"checkbox","aria-disabled":r,"aria-describedby":u,onChange:d=>k(d),name:j,ref:C,"aria-required":T,...y,checked:!(t===null||!t)})]})]})});s.displayName="ToggleCheckbox";s.defaultProps={disabled:!1,checked:!1,onChange:void 0,size:"M"};s.propTypes={checked:n.default.bool,children:n.default.string.isRequired,disabled:n.default.bool,offLabel:n.default.string.isRequired,onChange:n.default.func,onLabel:n.default.string.isRequired,size:n.default.oneOf(Object.keys(m.sizes.input))};exports.ToggleCheckbox=s;
+`,g=L.default.forwardRef(({size:e="M",onLabel:o,offLabel:l,children:b,checked:r=!1,disabled:t=!1,onChange:u,...y},C)=>{const{error:d,hint:w,id:c,name:j,required:q}=B.useField(),p="neutral600";let T=!r&&r!==null?"danger700":p,$=r?"primary600":p;const v=s=>{t||u&&u(s)};let i;return d?i=`${c}-error`:w&&(i=`${c}-hint`),n.jsxs(W,{children:[n.jsx(F.VisuallyHidden,{children:b}),n.jsxs(z,{hasRadius:!0,disabled:t,padding:1,display:"flex",background:t?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",hasError:!!d,children:[n.jsx(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:!r,disabled:t,children:n.jsx(f.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":T,children:l})}),n.jsx(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:r,disabled:t,children:n.jsx(f.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":$,children:o})}),n.jsx(M,{type:"checkbox","aria-disabled":t,"aria-describedby":i,onChange:s=>v(s),name:j,ref:C,"aria-required":q,...y,checked:!(r===null||!r)})]})]})});g.displayName="ToggleCheckbox";exports.ToggleCheckbox=g;

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,32 +1,30 @@
-import { jsxs as c, jsx as l } from "react/jsx-runtime";
-import L from "react";
-import t from "prop-types";
-import a from "styled-components";
-import { sizes as j } from "../themes/sizes.js";
-import { inputFocusStyle as q } from "../themes/utils.js";
-import { Box as z } from "../Box/Box.js";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import R from "react";
+import i from "styled-components";
+import { inputFocusStyle as T } from "../themes/utils.js";
+import { Box as L } from "../Box/Box.js";
 import { Flex as W } from "../Flex/Flex.js";
-import { useField as S } from "../Field/FieldContext.js";
-import { VisuallyHidden as B } from "../VisuallyHidden/VisuallyHidden.js";
+import { useField as j } from "../Field/FieldContext.js";
+import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
 import { Typography as h } from "../Typography/Typography.js";
-const F = a.label`
+const B = i.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`, I = a(z)`
+`, S = i(L)`
   cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${q()}
-`, g = a(W).attrs({
+  ${T()}
+`, g = i(W).attrs({
   hasRadius: !0
 })`
-  background-color: ${({ theme: e, checked: n, disabled: i }) => n ? i ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
+  background-color: ${({ theme: e, checked: o, disabled: n }) => o ? n ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
   border: 1px solid
-    ${({ theme: e, checked: n, disabled: i }) => n && n !== null ? i ? e.colors.neutral300 : e.colors.neutral200 : i ? e.colors.neutral150 : e.colors.neutral100};
+    ${({ theme: e, checked: o, disabled: n }) => o && o !== null ? n ? e.colors.neutral300 : e.colors.neutral200 : n ? e.colors.neutral150 : e.colors.neutral100};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -38,7 +36,7 @@ const F = a.label`
   */
   padding-top: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
   padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
-`, M = a.input`
+`, F = i.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -46,110 +44,16 @@ const F = a.label`
   top: 0;
   z-index: 1;
   width: 100%;
-`, u = L.forwardRef(
-  ({ size: e, onLabel: n, offLabel: i, children: b, checked: r, disabled: o, onChange: x, ...m }, y) => {
-    const { error: C, hint: w, id: d, name: v, required: $ } = S(), f = "neutral600";
-    let k = !r && r !== null ? "danger700" : f, R = r ? "primary600" : f;
-    const T = (p) => {
-      o || x(p);
-    };
-    let s;
-    return C ? s = `${d}-error` : w && (s = `${d}-hint`), /* @__PURE__ */ c(F, { children: [
-      /* @__PURE__ */ l(B, { children: b }),
-      /* @__PURE__ */ c(
-        I,
-        {
-          hasRadius: !0,
-          disabled: o,
-          padding: 1,
-          display: "flex",
-          background: o ? "neutral150" : "neutral100",
-          borderStyle: "solid",
-          borderWidth: "1px",
-          borderColor: "neutral200",
-          children: [
-            /* @__PURE__ */ l(
-              g,
-              {
-                size: e,
-                paddingLeft: 3,
-                paddingRight: 3,
-                justifyContent: "center",
-                alignItems: "center",
-                "aria-hidden": !0,
-                checked: r === null ? !1 : !r,
-                disabled: o,
-                children: /* @__PURE__ */ l(
-                  h,
-                  {
-                    variant: "pi",
-                    fontWeight: "bold",
-                    textTransform: "uppercase",
-                    textColor: o ? "neutral700" : k,
-                    children: i
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ l(
-              g,
-              {
-                size: e,
-                paddingLeft: 3,
-                paddingRight: 3,
-                justifyContent: "center",
-                alignItems: "center",
-                "aria-hidden": !0,
-                checked: r === null ? !1 : r,
-                disabled: o,
-                children: /* @__PURE__ */ l(
-                  h,
-                  {
-                    variant: "pi",
-                    fontWeight: "bold",
-                    textTransform: "uppercase",
-                    textColor: o ? "neutral700" : R,
-                    children: n
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ l(
-              M,
-              {
-                type: "checkbox",
-                "aria-disabled": o,
-                "aria-describedby": s,
-                onChange: (p) => T(p),
-                name: v,
-                ref: y,
-                "aria-required": $,
-                ...m,
-                checked: !(r === null || !r)
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-);
-u.displayName = "ToggleCheckbox";
-u.defaultProps = {
-  disabled: !1,
-  checked: !1,
-  onChange: void 0,
-  size: "M"
-};
-u.propTypes = {
-  checked: t.bool,
-  children: t.string.isRequired,
-  disabled: t.bool,
-  offLabel: t.string.isRequired,
-  onChange: t.func,
-  onLabel: t.string.isRequired,
-  size: t.oneOf(Object.keys(j.input))
-};
+`, I = R.forwardRef(({ size: e = "M", onLabel: o, offLabel: n, children: x, checked: r = !1, disabled: t = !1, onChange: s, ...b }, m) => {
+  const { error: d, hint: y, id: p, name: w, required: C } = j(), f = "neutral600";
+  let $ = !r && r !== null ? "danger700" : f, v = r ? "primary600" : f;
+  const k = (u) => {
+    t || s && s(u);
+  };
+  let l;
+  return d ? l = `${p}-error` : y && (l = `${p}-hint`), c(B, { children: [a(z, { children: x }), c(S, { hasRadius: !0, disabled: t, padding: 1, display: "flex", background: t ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", hasError: !!d, children: [a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : !r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : $, children: n }) }), a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : v, children: o }) }), a(F, { type: "checkbox", "aria-disabled": t, "aria-describedby": l, onChange: (u) => k(u), name: w, ref: m, "aria-required": C, ...b, checked: !(r === null || !r) })] })] });
+});
+I.displayName = "ToggleCheckbox";
 export {
-  u as ToggleCheckbox
+  I as ToggleCheckbox
 };

package/dist/ToggleInput/ToggleInput.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const T=require("prop-types"),j=require("styled-components"),y=require("../hooks/useId.cjs"),m=require("../themes/sizes.cjs"),v=require("../ToggleCheckbox/ToggleCheckbox.cjs"),I=require("../Field/Field.cjs"),_=require("../TextButton/TextButton.cjs"),u=require("../Flex/Flex.cjs"),k=require("../Field/FieldLabel.cjs"),C=require("../Field/FieldHint.cjs"),O=require("../Field/FieldError.cjs"),a=l=>l&&l.__esModule?l:{default:l},e=a(T),c=a(j),z=c.default(I.Field)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("styled-components"),p=require("../hooks/useId.cjs"),m=require("../ToggleCheckbox/ToggleCheckbox.cjs"),T=require("../Field/Field.cjs"),I=require("../TextButton/TextButton.cjs"),o=require("../Flex/Flex.cjs"),y=require("../Field/FieldLabel.cjs"),_=require("../Field/FieldHint.cjs"),b=require("../Field/FieldError.cjs"),k=t=>t&&t.__esModule?t:{default:t},d=k(j),B=d.default(T.Field)`
   max-width: 320px;
-`,P=c.default(_.TextButton)`
+`,C=d.default(I.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,r=({disabled:l,size:f,error:g,hint:p,label:i,name:x,labelAction:b,required:q,id:h,onClear:d,clearLabel:n,checked:o,...F})=>{const s=y.useId(h);return t.jsx(z,{name:x,hint:p,error:g,id:s,required:q,children:t.jsxs(u.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsxs(u.Flex,{children:[t.jsx(k.FieldLabel,{action:b,children:i}),n&&d&&o!==null&&!l&&t.jsx(P,{onClick:d,children:n})]}),t.jsx(v.ToggleCheckbox,{id:s,size:f,checked:o,disabled:l,...F,children:i}),t.jsx(C.FieldHint,{}),t.jsx(O.FieldError,{})]})})};r.displayName="ToggleInput";r.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};r.propTypes={checked:e.default.bool,clearLabel:e.default.string,disabled:e.default.bool,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.node,name:e.default.string,onClear:e.default.func,required:e.default.bool,size:e.default.oneOf(Object.keys(m.sizes.input))};exports.ToggleInput=r;
+`,u=({disabled:t=!1,size:c="M",error:a,hint:x,label:r,name:g,labelAction:f,required:F=!1,id:h,onClear:i,clearLabel:n,checked:l=!1,...q})=>{const s=p.useId(h);return e.jsx(B,{name:g,hint:x,error:a,id:s,required:F,children:e.jsxs(o.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsxs(o.Flex,{children:[e.jsx(y.FieldLabel,{action:f,children:r}),n&&i&&l!==null&&!t&&e.jsx(C,{onClick:i,children:n})]}),e.jsx(m.ToggleCheckbox,{id:s,size:c,checked:l,disabled:t,...q,children:r}),e.jsx(_.FieldHint,{}),e.jsx(b.FieldError,{})]})})};u.displayName="ToggleInput";exports.ToggleInput=u;

package/dist/ToggleInput/ToggleInput.js

@@ -1,76 +1,23 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import "react";
-import e from "prop-types";
-import a from "styled-components";
-import { useId as T } from "../hooks/useId.js";
-import { sizes as v } from "../themes/sizes.js";
-import { ToggleCheckbox as F } from "../ToggleCheckbox/ToggleCheckbox.js";
-import { Field as I } from "../Field/Field.js";
-import { TextButton as k } from "../TextButton/TextButton.js";
-import { Flex as p } from "../Flex/Flex.js";
-import { FieldLabel as C } from "../Field/FieldLabel.js";
-import { FieldHint as O } from "../Field/FieldHint.js";
-import { FieldError as j } from "../Field/FieldError.js";
-const z = a(I)`
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import p from "styled-components";
+import { useId as F } from "../hooks/useId.js";
+import { ToggleCheckbox as I } from "../ToggleCheckbox/ToggleCheckbox.js";
+import { Field as T } from "../Field/Field.js";
+import { TextButton as j } from "../TextButton/TextButton.js";
+import { Flex as d } from "../Flex/Flex.js";
+import { FieldLabel as k } from "../Field/FieldLabel.js";
+import { FieldHint as y } from "../Field/FieldHint.js";
+import { FieldError as B } from "../Field/FieldError.js";
+const C = p(T)`
   max-width: 320px;
-`, q = a(k)`
+`, q = p(j)`
   align-self: flex-end;
   margin-left: auto;
-`, r = ({
-  disabled: i,
-  size: c,
-  error: f,
-  hint: g,
-  label: t,
-  name: u,
-  labelAction: h,
-  required: b,
-  id: x,
-  onClear: n,
-  clearLabel: l,
-  checked: d,
-  ...y
-}) => {
-  const m = T(x);
-  return /* @__PURE__ */ o(z, { name: u, hint: g, error: f, id: m, required: b, children: /* @__PURE__ */ s(p, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ o(C, { action: h, children: t }),
-      l && n && d !== null && !i && /* @__PURE__ */ o(q, { onClick: n, children: l })
-    ] }),
-    /* @__PURE__ */ o(F, { id: m, size: c, checked: d, disabled: i, ...y, children: t }),
-    /* @__PURE__ */ o(O, {}),
-    /* @__PURE__ */ o(j, {})
-  ] }) });
-};
-r.displayName = "ToggleInput";
-r.defaultProps = {
-  checked: !1,
-  clearLabel: void 0,
-  disabled: !1,
-  error: void 0,
-  hint: void 0,
-  id: void 0,
-  label: "",
-  labelAction: void 0,
-  name: "",
-  onClear: void 0,
-  required: !1,
-  size: "M"
-};
-r.propTypes = {
-  checked: e.bool,
-  clearLabel: e.string,
-  disabled: e.bool,
-  error: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  id: e.string,
-  label: e.string,
-  labelAction: e.node,
-  name: e.string,
-  onClear: e.func,
-  required: e.bool,
-  size: e.oneOf(Object.keys(v.input))
+`, w = ({ disabled: e = !1, size: s = "M", error: f, hint: c, label: o, name: a, labelAction: g, required: h = !1, id: u, onClear: i, clearLabel: t, checked: n = !1, ...x }) => {
+  const l = F(u);
+  return r(C, { name: a, hint: c, error: f, id: l, required: h, children: m(d, { direction: "column", alignItems: "stretch", gap: 1, children: [m(d, { children: [r(k, { action: g, children: o }), t && i && n !== null && !e && r(q, { onClick: i, children: t })] }), r(I, { id: l, size: s, checked: n, disabled: e, ...x, children: o }), r(y, {}), r(B, {})] }) });
 };
+w.displayName = "ToggleInput";
 export {
-  r as ToggleInput
+  w as ToggleInput
 };

package/dist/Typography/Typography.cjs

@@ -6,7 +6,7 @@
   // overwrite a variant attribute
   font-weight: ${({theme:e,fontWeight:t})=>r.extractStyleFromTheme(e.fontWeights,t,void 0)};
   font-size: ${({theme:e,fontSize:t})=>r.extractStyleFromTheme(e.fontSizes,t,void 0)};
-  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,void 0)};
+  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,t)};
   color: ${o.handleColor};
   text-align: ${({textAlign:e})=>e};
   text-decoration: ${({textDecoration:e})=>e};

package/dist/Typography/Typography.js

@@ -1,25 +1,25 @@
-import i from "styled-components";
-import { variantStyle as r, ellipsisStyle as n, handleColor as a } from "./utils.js";
+import r from "styled-components";
+import { variantStyle as i, ellipsisStyle as n, handleColor as a } from "./utils.js";
 import { extractStyleFromTheme as o } from "../helpers/theme.js";
 const s = {
   fontSize: !0,
   fontWeight: !0
-}, d = i.span.withConfig({
+}, m = r.span.withConfig({
   shouldForwardProp: (t, e) => !s[t] && e(t)
 })`
-  ${r}
+  ${i}
   ${n}
 
   // These properties need to come after {variantStyle}, because they might
   // overwrite a variant attribute
   font-weight: ${({ theme: t, fontWeight: e }) => o(t.fontWeights, e, void 0)};
   font-size: ${({ theme: t, fontSize: e }) => o(t.fontSizes, e, void 0)};
-  line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, void 0)};
+  line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, e)};
   color: ${a};
   text-align: ${({ textAlign: t }) => t};
   text-decoration: ${({ textDecoration: t }) => t};
   text-transform: ${({ textTransform: t }) => t};
 `;
 export {
-  d as Typography
+  m as Typography
 };

package/dist/hooks/useControllableState.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@strapi/ui-primitives");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,l=typeof e=="function"?e(t):e,d=r?l:t,a=f.useCallbackRef(n),b=u.useCallback(s=>{if(r){const i=typeof s=="function"?s(l):s;i!==l&&(a(i),c(s))}else c(s)},[r,l,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=f.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@strapi/ui-primitives");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,l=e instanceof Function?e(t):e,d=r?l:t,a=f.useCallbackRef(n),b=u.useCallback(s=>{if(r){const i=typeof s=="function"?s(l):s;i!==l&&(a(i),c(s))}else c(s)},[r,l,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=f.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;

package/dist/hooks/useControllableState.js

@@ -1,14 +1,14 @@
 import * as r from "react";
 import { useCallbackRef as i } from "@strapi/ui-primitives";
-function R({ prop: n, defaultProp: u, onChange: c = () => {
+function S({ prop: n, defaultProp: u, onChange: c = () => {
 } }) {
-  const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = typeof n == "function" ? n(t) : n, d = o ? l : t, f = i(c), C = r.useCallback((s) => {
+  const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = n instanceof Function ? n(t) : n, d = o ? l : t, a = i(c), C = r.useCallback((s) => {
     if (o) {
-      const a = typeof s == "function" ? s(l) : s;
-      a !== l && (f(a), e(s));
+      const f = typeof s == "function" ? s(l) : s;
+      f !== l && (a(f), e(s));
     } else
       e(s);
-  }, [o, l, e, f]);
+  }, [o, l, e, a]);
   return [d, C];
 }
 function m({ defaultProp: n, onChange: u }) {
@@ -18,5 +18,5 @@ function m({ defaultProp: n, onChange: u }) {
   }, [t, e, o]), c;
 }
 export {
-  R as useControllableState
+  S as useControllableState
 };

package/dist/themes/utils.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=t=>({theme:o,size:r})=>o.sizes[t][r],s=(t="&")=>({theme:o,hasError:r})=>e.css`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),s=t=>({theme:o,size:r})=>o.sizes[t][r],i=(t="&")=>({theme:o,hasError:r=!1})=>e.css`
       outline: none;
       box-shadow: 0;
       transition-property: border-color, box-shadow, fill;
@@ -38,4 +38,4 @@
       border: 2px solid ${t.colors.primary600};
     }
   }
-`;exports.buttonFocusStyle=n;exports.getThemeSize=i;exports.inputFocusStyle=s;
+`;exports.buttonFocusStyle=n;exports.getThemeSize=s;exports.inputFocusStyle=i;

package/dist/themes/utils.js

@@ -1,5 +1,5 @@
 import { css as i } from "styled-components";
-const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r }) => i`
+const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r = !1 }) => i`
       outline: none;
       box-shadow: 0;
       transition-property: border-color, box-shadow, fill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -23,14 +23,17 @@
     "@internationalized/number": "^3.2.0",
     "@radix-ui/react-dismissable-layer": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
-    "@strapi/ui-primitives": "^1.7.5",
+    "@radix-ui/react-focus-scope": "1.0.2",
+    "@strapi/ui-primitives": "^1.7.7",
     "@uiw/react-codemirror": "^4.19.16",
+    "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
-    "prop-types": "^15.8.1"
+    "prop-types": "^15.8.1",
+    "react-remove-scroll": "^2.5.5"
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.7.5",
+    "@strapi/icons": "^1.7.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -61,5 +64,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "d4ccec39bd885549af18112e972cb7d6d64ec01d"
+  "gitHead": "95a02179f945511d2c5fb50efb880ed13f3169c9"
 }

package/dist/Tabs/useTabsFocus.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("@strapi/ui-primitives"),i=(r,c)=>{const e=u.useRef(null),t=u.useRef(null),n=o.useCallbackRef(c);return u.useEffect(()=>{if(e.current){if(t.current){const s=e.current.querySelector('[tabindex="0"]');s&&(s.focus(),n(r))}t.current||(t.current=!0)}},[r,n]),e};exports.useTabsFocus=i;

package/dist/Tabs/useTabsFocus.js

@@ -1,17 +0,0 @@
-import { useRef as c, useEffect as f } from "react";
-import { useCallbackRef as s } from "@strapi/ui-primitives";
-const i = (t, o) => {
-  const e = c(null), r = c(null), u = s(o);
-  return f(() => {
-    if (e.current) {
-      if (r.current) {
-        const n = e.current.querySelector('[tabindex="0"]');
-        n && (n.focus(), u(t));
-      }
-      r.current || (r.current = !0);
-    }
-  }, [t, u]), e;
-};
-export {
-  i as useTabsFocus
-};

package/dist/Textarea/TextareaInput.cjs

@@ -1,30 +0,0 @@
-"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};
-
-  padding-left: ${({theme:e,hasLeftAction:r})=>r?0:e.spaces[4]};
-  padding-right: ${({theme:e,hasRightAction:r})=>r?0:e.spaces[4]};
-  padding-top: ${({theme:e})=>`${e.spaces[3]}`};
-  padding-bottom: ${({theme:e})=>`${e.spaces[3]}`};
-
-  background: ${({theme:e,disabled:r})=>r?e.colors.neutral150:e.colors.neutral0};
-  ${g.inputFocusStyle()}
-`,h=d.default.textarea`
-  display: block;
-  width: 100%;
-  font-weight: 400;
-  font-size: ${14/16}rem;
-  border: none;
-  color: ${({theme:e,disabled:r})=>r?e.colors.neutral600:e.colors.neutral800};
-  resize: none;
-  background: inherit;
-
-  ::placeholder {
-    color: ${({theme:e})=>e.colors.neutral500};
-    opacity: 1;
-  }
-
-  &:focus-within {
-    outline: none;
-  }
-`,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,65 +0,0 @@
-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};
-
-  padding-left: ${({ theme: r, hasLeftAction: o }) => o ? 0 : r.spaces[4]};
-  padding-right: ${({ theme: r, hasRightAction: o }) => o ? 0 : r.spaces[4]};
-  padding-top: ${({ theme: r }) => `${r.spaces[3]}`};
-  padding-bottom: ${({ theme: r }) => `${r.spaces[3]}`};
-
-  background: ${({ theme: r, disabled: o }) => o ? r.colors.neutral150 : r.colors.neutral0};
-  ${m()}
-`, x = d.textarea`
-  display: block;
-  width: 100%;
-  font-weight: 400;
-  font-size: ${14 / 16}rem;
-  border: none;
-  color: ${({ theme: r, disabled: o }) => o ? r.colors.neutral600 : r.colors.neutral800};
-  resize: none;
-  background: inherit;
-
-  ::placeholder {
-    color: ${({ theme: r }) => r.colors.neutral500};
-    opacity: 1;
-  }
-
-  &:focus-within {
-    outline: none;
-  }
-`, 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": a,
-      "aria-invalid": i,
-      disabled: r,
-      hasError: i,
-      "aria-required": u,
-      ...o
-    }
-  ) });
-});
-t.displayName = "TextareaInput";
-t.defaultProps = {
-  disabled: !1
-};
-t.propTypes = {
-  disabled: $.bool
-};
-export {
-  t as TextareaInput
-};