@strapi/design-system 1.3.1 → 1.4.0-beta.1

package/dist/v2/SubNav/SubNavHeader.js

@@ -1,4 +1,4 @@
-import e, { useState as w, useRef as p, useEffect as x } from "react";
+import e, { useState as w, useRef as d, useEffect as x } from "react";
 import r from "prop-types";
 import D from "styled-components";
 import I from "@strapi/icons/Search";
@@ -12,21 +12,21 @@ import { SearchForm as _ } from "../../Searchbar/SearchForm.js";
 import { useId as $ } from "../../helpers/useId.js";
 import { usePrevious as j } from "../../helpers/usePrevious.js";
 import { KeyboardKeys as q } from "../../helpers/keyboardKeys.js";
-const d = D(O)`
+const u = D(O)`
   width: ${24 / 16}rem;
   background-color: ${({ theme: l }) => l.colors.neutral200};
-`, u = ({ as: l, label: f, searchLabel: s, searchable: g, onChange: h, value: b, onClear: E, onSubmit: S, id: y }) => {
-  const [a, c] = w(!1), C = j(a), v = $("subnav-searchbar-clear", y), o = p(), i = p();
+`, f = ({ as: l, label: g, searchLabel: s, searchable: h, onChange: b, value: E, onClear: S, onSubmit: y, id: C }) => {
+  const [a, c] = w(!1), m = j(a), v = $("subnav-searchbar-clear", C), o = d(), i = d();
   x(() => {
-    a && o.current && o.current.focus(), C && !a && i.current && i.current.focus();
-  }, [a]);
+    a && o.current && o.current.focus(), m && !a && i.current && i.current.focus();
+  }, [a, m]);
   const B = () => {
     c((t) => !t);
   }, T = (t) => {
-    E(t), o.current.focus();
+    S(t), o.current.focus();
   }, R = (t) => {
-    var m;
-    ((m = t.relatedTarget) == null ? void 0 : m.id) !== v && c(!1);
+    var p;
+    ((p = t.relatedTarget) == null ? void 0 : p.id) !== v && c(!1);
   }, L = (t) => {
     t.key === q.ESCAPE && c(!1);
   };
@@ -37,20 +37,20 @@ const d = D(O)`
     paddingRight: 4
   }, /* @__PURE__ */ e.createElement(_, null, /* @__PURE__ */ e.createElement(F, {
     name: "searchbar",
-    value: b,
-    onChange: h,
+    value: E,
+    onChange: b,
     placeholder: "e.g: strapi-plugin-abcd",
     onKeyDown: L,
     ref: o,
     onBlur: R,
     onClear: T,
-    onSubmit: S,
+    onSubmit: y,
     clearLabel: "Clear",
     size: "S"
   }, s)), /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 2,
     paddingTop: 4
-  }, /* @__PURE__ */ e.createElement(d, null))) : /* @__PURE__ */ e.createElement(n, {
+  }, /* @__PURE__ */ e.createElement(u, null))) : /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 6,
     paddingTop: 6,
     paddingBottom: 2,
@@ -61,29 +61,29 @@ const d = D(O)`
   }, /* @__PURE__ */ e.createElement(P, {
     variant: "beta",
     as: l
-  }, f), g && /* @__PURE__ */ e.createElement(k, {
+  }, g), h && /* @__PURE__ */ e.createElement(k, {
     ref: i,
     onClick: B,
     label: s,
     icon: /* @__PURE__ */ e.createElement(I, null)
   })), /* @__PURE__ */ e.createElement(n, {
     paddingTop: 4
-  }, /* @__PURE__ */ e.createElement(d, null)));
+  }, /* @__PURE__ */ e.createElement(u, null)));
 };
-u.defaultProps = {
+f.defaultProps = {
   as: "h2",
   searchable: !1,
-  onChange: () => {
+  onChange() {
   },
-  onClear: () => {
+  onClear() {
   },
-  onSubmit: () => {
+  onSubmit() {
   },
   value: "",
   searchLabel: "",
   id: void 0
 };
-u.propTypes = {
+f.propTypes = {
   as: r.string,
   id: r.string,
   label: r.string.isRequired,
@@ -95,5 +95,5 @@ u.propTypes = {
   value: r.string
 };
 export {
-  u as SubNavHeader
+  f as SubNavHeader
 };

package/dist/v2/SubNav/SubNavLink.cjs

@@ -1,4 +1,4 @@
-"use strict";var k=Object.defineProperty;var n=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var p=(e,t,l)=>t in e?k(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,g=(e,t)=>{for(var l in t||(t={}))f.call(t,l)&&p(e,l,t[l]);if(n)for(var l of n(t))y.call(t,l)&&p(e,l,t[l]);return e};var m=(e,t)=>{var l={};for(var o in e)f.call(e,o)&&t.indexOf(o)<0&&(l[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&y.call(e,o)&&(l[o]=e[o]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react"),T=require("prop-types"),_=require("styled-components"),S=require("@strapi/icons/Dot"),u=require("../../Box/Box.cjs"),x=require("../../Typography/Typography.cjs"),b=require("../../Flex/Flex.cjs"),q=require("../../BaseLink/BaseLink.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=s(L),r=s(T),c=s(_),E=s(S),j=c.default(u.Box)`
+"use strict";var L=Object.defineProperty;var n=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var p=(e,t,l)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,g=(e,t)=>{for(var l in t||(t={}))f.call(t,l)&&p(e,l,t[l]);if(n)for(var l of n(t))y.call(t,l)&&p(e,l,t[l]);return e};var m=(e,t)=>{var l={};for(var o in e)f.call(e,o)&&t.indexOf(o)<0&&(l[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&y.call(e,o)&&(l[o]=e[o]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react"),_=require("prop-types"),k=require("styled-components"),S=require("@strapi/icons/Dot"),u=require("../../Box/Box.cjs"),x=require("../../Typography/Typography.cjs"),b=require("../../Flex/Flex.cjs"),q=require("../../BaseLink/BaseLink.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=s(T),a=s(_),c=s(k),E=s(S),j=c.default(u.Box)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -36,4 +36,4 @@
     height: ${12/16}rem;
     width: ${12/16}rem;
   }
-`,i=a.default.forwardRef((F,v)=>{var d=F,{children:e,icon:t,withBullet:l,as:o,isSubSectionChild:B}=d,$=m(d,["children","icon","withBullet","as","isSubSectionChild"]);return a.default.createElement(j,g({as:o,icon:t,background:"neutral100",paddingLeft:B?9:7,paddingBottom:2,paddingTop:2,ref:v},$),a.default.createElement(b.Flex,null,t?a.default.createElement(w,null,t):a.default.createElement(h,null),a.default.createElement(u.Box,{paddingLeft:2},a.default.createElement(x.Typography,{as:"span"},e))),l&&a.default.createElement(u.Box,{as:b.Flex,paddingRight:4},a.default.createElement(h,{$active:!0})))});i.displayName="SubNavLink";i.defaultProps={as:q.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};i.propTypes={as:r.default.elementType,children:r.default.node,icon:r.default.element,isSubSectionChild:r.default.bool,link:r.default.element,withBullet:r.default.bool};exports.SubNavLink=i;
+`,i=r.default.forwardRef((F,v)=>{var d=F,{children:e,icon:t,withBullet:l,as:o,isSubSectionChild:B}=d,$=m(d,["children","icon","withBullet","as","isSubSectionChild"]);return r.default.createElement(j,g({as:o,icon:t,background:"neutral100",paddingLeft:B?9:7,paddingBottom:2,paddingTop:2,ref:v},$),r.default.createElement(b.Flex,null,t?r.default.createElement(w,null,t):r.default.createElement(h,null),r.default.createElement(u.Box,{paddingLeft:2},r.default.createElement(x.Typography,{as:"span"},e))),l&&r.default.createElement(u.Box,{as:b.Flex,paddingRight:4},r.default.createElement(h,{$active:!0})))});i.displayName="SubNavLink";i.defaultProps={as:q.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};i.propTypes={as:a.default.elementType,children:a.default.node.isRequired,icon:a.default.element,isSubSectionChild:a.default.bool,withBullet:a.default.bool};exports.SubNavLink=i;

package/dist/v2/SubNav/SubNavLink.js

@@ -1,7 +1,7 @@
-var k = Object.defineProperty;
+var w = Object.defineProperty;
 var n = Object.getOwnPropertySymbols;
 var d = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
-var m = (e, r, o) => r in e ? k(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, f = (e, r) => {
+var m = (e, r, o) => r in e ? w(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, f = (e, r) => {
   for (var o in r || (r = {}))
     d.call(r, o) && m(e, o, r[o]);
   if (n)
@@ -20,13 +20,13 @@ var g = (e, r) => {
 };
 import l from "react";
 import i from "prop-types";
-import p from "styled-components";
-import w from "@strapi/icons/Dot";
+import s from "styled-components";
+import x from "@strapi/icons/Dot";
 import { Box as a } from "../../Box/Box.js";
 import { Typography as b } from "../../Typography/Typography.js";
 import { Flex as y } from "../../Flex/Flex.js";
-import { BaseLink as x } from "../../BaseLink/BaseLink.js";
-const S = p(a)`
+import { BaseLink as S } from "../../BaseLink/BaseLink.js";
+const k = s(a)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -53,20 +53,20 @@ const S = p(a)`
   &:focus-visible {
     outline-offset: -2px;
   }
-`, $ = p(w)`
+`, $ = s(x)`
   width: ${12 / 16}rem;
   height: ${4 / 16}rem;
   * {
     fill: ${({ theme: e, $active: r }) => r ? e.colors.primary600 : e.colors.neutral600};
   }
-`, B = p.div`
+`, B = s.div`
   svg {
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
   }
-`, s = l.forwardRef((L, E) => {
+`, p = l.forwardRef((L, E) => {
   var c = L, { children: e, icon: r, withBullet: o, as: t, isSubSectionChild: h } = c, v = g(c, ["children", "icon", "withBullet", "as", "isSubSectionChild"]);
-  return /* @__PURE__ */ l.createElement(S, f({
+  return /* @__PURE__ */ l.createElement(k, f({
     as: t,
     icon: r,
     background: "neutral100",
@@ -85,21 +85,20 @@ const S = p(a)`
     $active: !0
   })));
 });
-s.displayName = "SubNavLink";
-s.defaultProps = {
-  as: x,
+p.displayName = "SubNavLink";
+p.defaultProps = {
+  as: S,
   icon: null,
   isSubSectionChild: !1,
   withBullet: !1
 };
-s.propTypes = {
+p.propTypes = {
   as: i.elementType,
-  children: i.node,
+  children: i.node.isRequired,
   icon: i.element,
   isSubSectionChild: i.bool,
-  link: i.element,
   withBullet: i.bool
 };
 export {
-  s as SubNavLink
+  p as SubNavLink
 };

package/dist/v2/SubNav/SubNavLinkSection.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons/CarretDown"),d=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),_=require("../../helpers/useId.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(l),o=n(m),s=n(h),v=n(x),E=s.default(d.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons/CarretDown"),d=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),_=require("../../helpers/useId.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(l),o=n(m),s=n(h),q=n(x),v=s.default(d.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral700};
     }
   }
-`,k=s.default.button`
+`,E=s.default.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`,q=s.default.div`
+`,k=s.default.div`
   display: flex;
   align-items: center;
   width: ${12/16}rem;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,i=({label:e,children:c,id:p})=>{const[a,f]=l.useState(!0),u=_.useId("subnav-list",p),g=()=>{f(r=>!r)};return t.default.createElement(d.Box,null,t.default.createElement(E,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(k,{onClick:g,"aria-expanded":a,"aria-controls":u},t.default.createElement(q,{rotated:a},t.default.createElement(v.default,{"aria-hidden":!0})),t.default.createElement(d.Box,{paddingLeft:2},t.default.createElement(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),a&&t.default.createElement("ul",{id:u},l.Children.map(c,(r,y)=>t.default.createElement("li",{key:y},r))))};i.defaultProps={id:void 0};i.propTypes={children:o.default.node,id:o.default.string,label:o.default.string.isRequired};exports.SubNavLinkSection=i;
+`,i=({label:e,children:c,id:p})=>{const[a,f]=l.useState(!0),u=_.useId("subnav-list",p),g=()=>{f(r=>!r)};return t.default.createElement(d.Box,null,t.default.createElement(v,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(E,{onClick:g,"aria-expanded":a,"aria-controls":u},t.default.createElement(k,{rotated:a},t.default.createElement(q.default,{"aria-hidden":!0})),t.default.createElement(d.Box,{paddingLeft:2},t.default.createElement(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),a&&t.default.createElement("ul",{id:u},l.Children.map(c,(r,y)=>t.default.createElement("li",{key:y},r))))};i.defaultProps={id:void 0};i.propTypes={children:o.default.node.isRequired,id:o.default.string,label:o.default.string.isRequired};exports.SubNavLinkSection=i;

package/dist/v2/SubNav/SubNavLinkSection.js

@@ -24,8 +24,8 @@ const k = a(i)`
   align-items: center;
   width: ${12 / 16}rem;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, d = ({ label: t, children: p, id: s }) => {
-  const [r, m] = f(!0), l = y("subnav-list", s), c = () => {
+`, l = ({ label: t, children: p, id: s }) => {
+  const [r, m] = f(!0), d = y("subnav-list", s), c = () => {
     m((n) => !n);
   };
   return /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(k, {
@@ -38,7 +38,7 @@ const k = a(i)`
   }, /* @__PURE__ */ e.createElement(v, {
     onClick: c,
     "aria-expanded": r,
-    "aria-controls": l
+    "aria-controls": d
   }, /* @__PURE__ */ e.createElement(x, {
     rotated: r
   }, /* @__PURE__ */ e.createElement(h, {
@@ -50,19 +50,19 @@ const k = a(i)`
     fontWeight: "semiBold",
     textColor: "neutral800"
   }, t))))), r && /* @__PURE__ */ e.createElement("ul", {
-    id: l
+    id: d
   }, g.map(p, (n, u) => /* @__PURE__ */ e.createElement("li", {
     key: u
   }, n))));
 };
-d.defaultProps = {
+l.defaultProps = {
   id: void 0
 };
-d.propTypes = {
-  children: o.node,
+l.propTypes = {
+  children: o.node.isRequired,
   id: o.string,
   label: o.string.isRequired
 };
 export {
-  d as SubNavLinkSection
+  l as SubNavLinkSection
 };

package/dist/v2/SubNav/SubNavSection.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),m=require("prop-types"),v=require("styled-components"),u=require("../../Box/Box.cjs"),y=require("../../Badge/Badge.cjs"),h=require("../../Stack/Stack.cjs"),B=require("./SubNavSectionLabel.cjs"),k=require("../../helpers/useId.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(n),a=r(m),q=r(v),_=q.default(u.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),m=require("prop-types"),v=require("styled-components"),u=require("../../Box/Box.cjs"),y=require("../../Badge/Badge.cjs"),h=require("../../Stack/Stack.cjs"),q=require("./SubNavSectionLabel.cjs"),B=require("../../helpers/useId.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(n),a=r(m),k=r(v),_=k.default(u.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-`,s=({collapsable:e,label:c,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=k.useId("subnav-list",f),S=()=>{g(o=>!o)};return t.default.createElement(h.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(B.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),l&&t.default.createElement(y.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,b)=>t.default.createElement("li",{key:b},o))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;
+`,s=({collapsable:e,label:c,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=B.useId("subnav-list",f),S=()=>{g(o=>!o)};return t.default.createElement(h.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(q.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),l&&t.default.createElement(y.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,b)=>t.default.createElement("li",{key:b},o))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;

package/dist/v2/SubNav/SubNavSection.js

@@ -53,7 +53,7 @@ p.defaultProps = {
 };
 p.propTypes = {
   badgeLabel: t.string,
-  children: t.node,
+  children: t.node.isRequired,
   collapsable: t.bool,
   id: t.string,
   label: t.string.isRequired

package/dist/v2/SubNav/SubNavSectionLabel.cjs

@@ -6,4 +6,4 @@
   display: flex;
   align-items: center;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,o=({collapsable:e,label:l,onClick:i,ariaExpanded:n,ariaControls:p})=>e?t.default.createElement(s,{as:"button",onClick:i,"aria-expanded":n,"aria-controls":p,textAlign:"left"},t.default.createElement(d.Box,{paddingRight:1},t.default.createElement(u.Typography,{variant:"sigma",textColor:"neutral600"},l)),e&&t.default.createElement(_,{rotated:n},t.default.createElement(m.default,{"aria-hidden":!0}))):t.default.createElement(s,null,t.default.createElement(d.Box,{paddingRight:1},t.default.createElement(u.Typography,{variant:"sigma",textColor:"neutral600"},l)));o.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick:()=>{}};o.propTypes={ariaControls:a.default.string,ariaExpanded:a.default.bool,collapsable:a.default.bool,label:a.default.string.isRequired,onClick:a.default.func};exports.SubNavSectionLabel=o;
+`,o=({collapsable:e,label:l,onClick:i,ariaExpanded:n,ariaControls:p})=>e?t.default.createElement(s,{as:"button",onClick:i,"aria-expanded":n,"aria-controls":p,textAlign:"left"},t.default.createElement(d.Box,{paddingRight:1},t.default.createElement(u.Typography,{variant:"sigma",textColor:"neutral600"},l)),e&&t.default.createElement(_,{rotated:n},t.default.createElement(m.default,{"aria-hidden":!0}))):t.default.createElement(s,null,t.default.createElement(d.Box,{paddingRight:1},t.default.createElement(u.Typography,{variant:"sigma",textColor:"neutral600"},l)));o.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};o.propTypes={ariaControls:a.default.string,ariaExpanded:a.default.bool,collapsable:a.default.bool,label:a.default.string.isRequired,onClick:a.default.func};exports.SubNavSectionLabel=o;

package/dist/v2/SubNav/SubNavSectionLabel.js

@@ -38,7 +38,7 @@ m.defaultProps = {
   ariaControls: null,
   ariaExpanded: null,
   collapsable: !1,
-  onClick: () => {
+  onClick() {
   }
 };
 m.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.3.1",
+  "version": "1.4.0-beta.1",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -19,6 +19,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
     "@internationalized/number": "^3.1.1",
+    "@radix-ui/react-use-callback-ref": "^1.0.0",
     "compute-scroll-into-view": "^1.0.17",
     "prop-types": "^15.7.2"
   },
@@ -30,23 +31,17 @@
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/react": "^6.5.13",
-    "@strapi/icons": "^1.3.1",
+    "@strapi/icons": "^1.4.0-beta.1",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "12.1.4",
     "axe-playwright": "^1.1.11",
     "cross-env": "^7.0.3",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-mdx": "^1.17.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
     "intl": "^1.2.5",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
     "jest-styled-components": "^7.1.1",
-    "prettier": "^2.7.1",
     "qs": "^6.10.3",
     "react": "^17.0.1",
     "react-copy-to-clipboard": "^5.0.4",
@@ -68,8 +63,6 @@
     "build": "yarn build:prod",
     "build:prod": "vite build",
     "build-storybook": "build-storybook",
-    "lint": "eslint . --ext .js,.jsx,.mdx --fix",
-    "lint-staged": "eslint --fix",
     "storybook": "start-storybook -p 6006",
     "test": "jest -c jest.config.js",
     "test:watch": "jest -c jest.config.js --watchAll",
@@ -78,5 +71,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "5aeb3e48842b0d8e5780075be5a172fe9ea7bb4a"
+  "gitHead": "d8a8a6c3907b387b901418f7d256b33f707855fc"
 }