@strapi/design-system 1.6.4 → 1.6.6

package/dist/Select/SelectButton.js

@@ -1,9 +1,9 @@
 import u, { forwardRef as b } from "react";
 import e from "prop-types";
 import c from "styled-components";
-import { UpState as f, DownState as y } from "./constants.js";
+import { UpState as f, DownState as m } from "./constants.js";
 import { KeyboardKeys as t } from "../helpers/keyboardKeys.js";
-const m = c.button`
+const y = c.button`
   position: absolute;
   left: 0;
   right: 0;
@@ -18,50 +18,52 @@ const m = c.button`
     outline: none;
   }
 
-  &[aria-disabled='true'] {
+  &[data-disabled] {
     cursor: not-allowed;
   }
-`, a = b(({ labelledBy: s, expanded: d, onTrigger: r, disabled: n, ...l }, i) => {
-  const p = (o) => {
-    if (!n)
-      switch (o.key) {
+`, r = b(({ labelledBy: s, expanded: d, onTrigger: n, disabled: o, ...l }, i) => {
+  const p = (a) => {
+    if (!o)
+      switch (a.key) {
         case t.DOWN:
         case t.SPACE:
         case t.ENTER: {
-          o.preventDefault(), r(y.Keyboard);
+          a.preventDefault(), n(m.Keyboard);
           break;
         }
         case t.UP: {
-          o.preventDefault(), r(f.Keyboard);
+          a.preventDefault(), n(f.Keyboard);
           break;
         }
       }
   };
   return /* @__PURE__ */ u.createElement(
-    m,
+    y,
     {
       ref: i,
+      role: "combobox",
       "aria-labelledby": s,
       "aria-haspopup": "listbox",
       "aria-expanded": d,
       onKeyDown: p,
-      "aria-disabled": n,
+      disabled: o,
+      "data-disabled": o ? "" : void 0,
       type: "button",
       ...l
     }
   );
 });
-a.displayName = "SelectButton";
-a.defaultProps = {
+r.displayName = "SelectButton";
+r.defaultProps = {
   expanded: !1,
   disabled: !1
 };
-a.propTypes = {
+r.propTypes = {
   disabled: e.bool,
   expanded: e.bool,
   labelledBy: e.string.isRequired,
   onTrigger: e.func.isRequired
 };
 export {
-  a as SelectButton
+  r as SelectButton
 };

package/dist/Select/SelectList.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const K=require("react"),q=require("prop-types"),i=require("./constants.cjs"),k=require("./hooks/useListRef.cjs"),n=require("./utils.cjs"),c=require("../helpers/keyboardKeys.cjs"),v=require("../Stack/Stack.cjs"),b=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},h=b(K),s=b(q),p=({labelledBy:r,onSelectItem:f,children:g,multi:y,onEscape:u,expanded:S})=>{const e=k.useListRef(S),D=o=>{switch(o.key){case c.KeyboardKeys.ESCAPE:{o.stopPropagation(),u();break}case c.KeyboardKeys.DOWN:{o.preventDefault();const t=n.getActiveDescendant(e.current);if(!t)return;const a=t.nextSibling;if(a)n.changeDescendant(e.current,a);else{const d=e.current.querySelectorAll('[role="option"]')[0];n.changeDescendant(e.current,d)}break}case c.KeyboardKeys.UP:{o.preventDefault();const t=n.getActiveDescendant(e.current);if(!t)return;const a=t.previousSibling;if(a)n.changeDescendant(e.current,a);else{const l=e.current.querySelectorAll('[role="option"]'),d=l[l.length-1];n.changeDescendant(e.current,d)}break}case c.KeyboardKeys.SPACE:case c.KeyboardKeys.ENTER:{o.preventDefault();const t=n.getActiveDescendant(e.current);t.getAttribute("data-opt-group")?f(t.getAttribute("data-opt-group-children").split(","),t.getAttribute("data-opt-group")):f(t.getAttribute("data-strapi-value")),y||u();break}}};return h.default.createElement(v.Stack,{as:"ul",spacing:1,role:"listbox","aria-labelledby":r,tabIndex:-1,ref:e,onKeyDown:D,onBlur:u,"aria-multiselectable":y},g)};p.defaultProps={labelledBy:void 0,multi:!1};p.propTypes={children:s.default.node.isRequired,expanded:s.default.oneOf([i.UpState.Keyboard,i.UpState.Mouse,i.DownState.Keyboard,i.DownState.Mouse]).isRequired,labelledBy:s.default.string,multi:s.default.bool,onEscape:s.default.func.isRequired,onSelectItem:s.default.func.isRequired};exports.SelectList=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react"),q=require("prop-types"),i=require("./constants.cjs"),h=require("./hooks/useListRef.cjs"),n=require("./utils.cjs"),v=require("../Flex/Flex.cjs"),c=require("../helpers/keyboardKeys.cjs"),b=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},A=b(S),s=b(q),p=({labelledBy:r,onSelectItem:f,children:g,multi:y,onEscape:u,expanded:D})=>{const e=h.useListRef(D),K=o=>{switch(o.key){case c.KeyboardKeys.ESCAPE:{o.stopPropagation(),u();break}case c.KeyboardKeys.DOWN:{o.preventDefault();const t=n.getActiveDescendant(e.current);if(!t)return;const a=t.nextSibling;if(a)n.changeDescendant(e.current,a);else{const d=e.current.querySelectorAll('[role="option"]')[0];n.changeDescendant(e.current,d)}break}case c.KeyboardKeys.UP:{o.preventDefault();const t=n.getActiveDescendant(e.current);if(!t)return;const a=t.previousSibling;if(a)n.changeDescendant(e.current,a);else{const l=e.current.querySelectorAll('[role="option"]'),d=l[l.length-1];n.changeDescendant(e.current,d)}break}case c.KeyboardKeys.SPACE:case c.KeyboardKeys.ENTER:{o.preventDefault();const t=n.getActiveDescendant(e.current);t.getAttribute("data-opt-group")?f(t.getAttribute("data-opt-group-children").split(","),t.getAttribute("data-opt-group")):f(t.getAttribute("data-strapi-value")),y||u();break}}};return A.default.createElement(v.Flex,{as:"ul",gap:1,direction:"column",alignItems:"stretch",role:"listbox","aria-labelledby":r,tabIndex:-1,ref:e,onKeyDown:K,onBlur:u,"aria-multiselectable":y},g)};p.defaultProps={labelledBy:void 0,multi:!1};p.propTypes={children:s.default.node.isRequired,expanded:s.default.oneOf([i.UpState.Keyboard,i.UpState.Mouse,i.DownState.Keyboard,i.DownState.Mouse]).isRequired,labelledBy:s.default.string,multi:s.default.bool,onEscape:s.default.func.isRequired,onSelectItem:s.default.func.isRequired};exports.SelectList=p;

package/dist/Select/SelectList.js

@@ -1,12 +1,12 @@
-import D from "react";
+import O from "react";
 import r from "prop-types";
 import { UpState as f, DownState as b } from "./constants.js";
-import { useListRef as O } from "./hooks/useListRef.js";
+import { useListRef as S } from "./hooks/useListRef.js";
 import { getActiveDescendant as u, changeDescendant as s } from "./utils.js";
+import { Flex as v } from "../Flex/Flex.js";
 import { KeyboardKeys as i } from "../helpers/keyboardKeys.js";
-import { Stack as v } from "../Stack/Stack.js";
-const m = ({ labelledBy: g, onSelectItem: p, children: y, multi: d, onEscape: a, expanded: S }) => {
-  const e = O(S), A = (o) => {
+const m = ({ labelledBy: g, onSelectItem: p, children: y, multi: d, onEscape: a, expanded: A }) => {
+  const e = S(A), D = (o) => {
     switch (o.key) {
       case i.ESCAPE: {
         o.stopPropagation(), a();
@@ -52,16 +52,18 @@ const m = ({ labelledBy: g, onSelectItem: p, children: y, multi: d, onEscape: a,
       }
     }
   };
-  return /* @__PURE__ */ D.createElement(
+  return /* @__PURE__ */ O.createElement(
     v,
     {
       as: "ul",
-      spacing: 1,
+      gap: 1,
+      direction: "column",
+      alignItems: "stretch",
       role: "listbox",
       "aria-labelledby": g,
       tabIndex: -1,
       ref: e,
-      onKeyDown: A,
+      onKeyDown: D,
       onBlur: a,
       "aria-multiselectable": d
     },

package/dist/SimpleMenu/SimpleMenu.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),M=require("@radix-ui/react-use-callback-ref"),z=require("@strapi/icons"),U=require("prop-types"),H=require("react-router-dom"),G=require("styled-components"),q=require("./utils.cjs"),b=require("../Box/Box.cjs"),j=require("../Button/Button.cjs"),J=require("../Flex/Flex.cjs"),s=require("../helpers/keyboardKeys.cjs"),Q=require("../helpers/useId.cjs"),X=require("../Link/Link.cjs"),w=require("../Popover/Popover.cjs"),T=require("../Typography/Typography.cjs"),B=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=B(a),t=B(U),E=B(G),Y=E.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),M=require("@radix-ui/react-use-callback-ref"),z=require("@strapi/icons"),U=require("prop-types"),H=require("react-router-dom"),G=require("styled-components"),q=require("./utils.cjs"),b=require("../Box/Box.cjs"),j=require("../Button/Button.cjs"),J=require("../Flex/Flex.cjs"),s=require("../helpers/keyboardKeys.cjs"),Q=require("../hooks/useId.cjs"),X=require("../Link/Link.cjs"),w=require("../Popover/Popover.cjs"),T=require("../Typography/Typography.cjs"),B=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=B(a),t=B(U),E=B(G),Y=E.default.button`
   border: none;
   padding: 0;
   background: transparent;

package/dist/SimpleMenu/SimpleMenu.js

@@ -9,7 +9,7 @@ import { Box as k } from "../Box/Box.js";
 import { Button as $ } from "../Button/Button.js";
 import { Flex as G } from "../Flex/Flex.js";
 import { KeyboardKeys as i } from "../helpers/keyboardKeys.js";
-import { useId as J } from "../helpers/useId.js";
+import { useId as J } from "../hooks/useId.js";
 import { Link as Q } from "../Link/Link.js";
 import { POPOVER_PLACEMENTS as X, Popover as Y } from "../Popover/Popover.js";
 import { Typography as O } from "../Typography/Typography.js";

package/dist/SubNav/SubNavHeader.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),C=require("@strapi/icons"),I=require("prop-types"),R=require("styled-components"),s=require("../Box/Box.cjs"),_=require("../Divider/Divider.cjs"),D=require("../Flex/Flex.cjs"),P=require("../helpers/keyboardKeys.cjs"),F=require("../helpers/useId.cjs"),K=require("../helpers/usePrevious.cjs"),L=require("../IconButton/IconButton.cjs"),k=require("../Searchbar/Searchbar.cjs"),w=require("../Searchbar/SearchForm.cjs"),O=require("../Typography/Typography.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=d(o),r=d(I),H=d(R),h=H.default(_.Divider)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),C=require("@strapi/icons"),I=require("prop-types"),R=require("styled-components"),s=require("../Box/Box.cjs"),_=require("../Divider/Divider.cjs"),D=require("../Flex/Flex.cjs"),P=require("../helpers/keyboardKeys.cjs"),k=require("../hooks/useId.cjs"),F=require("../hooks/usePrevious.cjs"),K=require("../IconButton/IconButton.cjs"),L=require("../Searchbar/Searchbar.cjs"),w=require("../Searchbar/SearchForm.cjs"),O=require("../Typography/Typography.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=d(o),r=d(I),H=d(R),h=H.default(_.Divider)`
   width: ${24/16}rem;
   background-color: ${({theme:t})=>t.colors.neutral200};
-`,i=({as:t,label:g,searchLabel:f,searchable:y,onChange:b,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=K.usePrevious(n),q=F.useId(B),c=o.useRef(),u=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&u.current&&u.current.focus()},[n,p]);const E=()=>{l(a=>!a)},j=a=>{S(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&l(!1)},x=a=>{a.key===P.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(w.SearchForm,null,e.default.createElement(k.Searchbar,{name:"searchbar",value:m,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:v,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(h,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(D.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(O.Typography,{variant:"beta",as:t},g),y&&e.default.createElement(L.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(C.Search,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(h,null)))};i.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;
+`,i=({as:t,label:g,searchLabel:f,searchable:y,onChange:b,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=F.usePrevious(n),q=k.useId(B),c=o.useRef(),u=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&u.current&&u.current.focus()},[n,p]);const E=()=>{l(a=>!a)},j=a=>{S(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&l(!1)},x=a=>{a.key===P.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(w.SearchForm,null,e.default.createElement(L.Searchbar,{name:"searchbar",value:m,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:v,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(h,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(D.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(O.Typography,{variant:"beta",as:t},g),y&&e.default.createElement(K.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(C.Search,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(h,null)))};i.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;

package/dist/SubNav/SubNavHeader.js

@@ -6,8 +6,8 @@ import { Box as n } from "../Box/Box.js";
 import { Divider as I } from "../Divider/Divider.js";
 import { Flex as K } from "../Flex/Flex.js";
 import { KeyboardKeys as P } from "../helpers/keyboardKeys.js";
-import { useId as k } from "../helpers/useId.js";
-import { usePrevious as O } from "../helpers/usePrevious.js";
+import { useId as k } from "../hooks/useId.js";
+import { usePrevious as O } from "../hooks/usePrevious.js";
 import { IconButton as F } from "../IconButton/IconButton.js";
 import { Searchbar as _ } from "../Searchbar/Searchbar.js";
 import { SearchForm as $ } from "../Searchbar/SearchForm.js";

package/dist/SubNav/SubNavLinkSection.cjs

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

package/dist/SubNav/SubNavLinkSection.js

@@ -4,7 +4,7 @@ import o from "prop-types";
 import a from "styled-components";
 import { Box as i } from "../Box/Box.js";
 import { Flex as E } from "../Flex/Flex.js";
-import { useId as y } from "../helpers/useId.js";
+import { useId as y } from "../hooks/useId.js";
 import { Typography as b } from "../Typography/Typography.js";
 const k = a(i)`
   svg {

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

package/dist/SubNav/SubNavSection.js

@@ -2,11 +2,11 @@ import e, { useState as f, Children as h } from "react";
 import t from "prop-types";
 import b from "styled-components";
 import { SubNavSectionLabel as E } from "./SubNavSectionLabel.js";
-import { Badge as S } from "../Badge/Badge.js";
+import { Badge as v } from "../Badge/Badge.js";
 import { Box as l } from "../Box/Box.js";
-import { useId as v } from "../helpers/useId.js";
-import { Stack as k } from "../Stack/Stack.js";
-const C = b(l)`
+import { Flex as S } from "../Flex/Flex.js";
+import { useId as C } from "../hooks/useId.js";
+const k = b(l)`
   svg {
     height: ${4 / 16}rem;
     path {
@@ -14,10 +14,10 @@ const C = b(l)`
     }
   }
 `, p = ({ collapsable: r, label: d, badgeLabel: o, children: s, id: m }) => {
-  const [n, c] = f(!0), a = v(m), u = () => {
+  const [n, c] = f(!0), a = C(m), u = () => {
     c((i) => !i);
   };
-  return /* @__PURE__ */ e.createElement(k, { spacing: 1 }, /* @__PURE__ */ e.createElement(C, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4 }, /* @__PURE__ */ e.createElement(l, { position: "relative", paddingRight: o ? 6 : 0 }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement(S, { direction: "column", alignItems: "stretch", gap: 1 }, /* @__PURE__ */ e.createElement(k, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4 }, /* @__PURE__ */ e.createElement(l, { position: "relative", paddingRight: o ? 6 : 0 }, /* @__PURE__ */ e.createElement(
     E,
     {
       onClick: u,
@@ -27,7 +27,7 @@ const C = b(l)`
       label: d
     }
   ), o && /* @__PURE__ */ e.createElement(
-    S,
+    v,
     {
       backgroundColor: "neutral150",
       textColor: "neutral600",

package/dist/SubNav/SubNavSections.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),s=require("prop-types"),l=require("../Box/Box.cjs"),i=require("../Stack/Stack.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(o),d=a(s),r=({children:e,...c})=>t.default.createElement(l.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(i.Stack,{as:"ol",spacing:2,...c},o.Children.map(e,(n,u)=>t.default.createElement("li",{key:u},n))));r.propTypes={children:d.default.node.isRequired};exports.SubNavSections=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),i=require("prop-types"),d=require("../Box/Box.cjs"),p=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(r),f=a(i),c=({children:e,spacing:l=2,horizontal:o=!1,...n})=>t.default.createElement(d.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(p.Flex,{as:"ol",gap:l,direction:o?"row":"column",alignItems:o?"center":"stretch",...n},r.Children.map(e,(s,u)=>t.default.createElement("li",{key:u},s))));c.propTypes={children:f.default.node.isRequired};exports.SubNavSections=c;

package/dist/SubNav/SubNavSections.js

@@ -1,11 +1,21 @@
 import e, { Children as i } from "react";
-import m from "prop-types";
-import { Box as n } from "../Box/Box.js";
-import { Stack as a } from "../Stack/Stack.js";
-const c = ({ children: r, ...t }) => /* @__PURE__ */ e.createElement(n, { paddingTop: 2, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(a, { as: "ol", spacing: 2, ...t }, i.map(r, (o, p) => /* @__PURE__ */ e.createElement("li", { key: p }, o))));
-c.propTypes = {
-  children: m.node.isRequired
+import a from "prop-types";
+import { Box as c } from "../Box/Box.js";
+import { Flex as l } from "../Flex/Flex.js";
+const d = ({ children: t, spacing: o = 2, horizontal: r = !1, ...m }) => /* @__PURE__ */ e.createElement(c, { paddingTop: 2, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(
+  l,
+  {
+    as: "ol",
+    gap: o,
+    direction: r ? "row" : "column",
+    alignItems: r ? "center" : "stretch",
+    ...m
+  },
+  i.map(t, (n, p) => /* @__PURE__ */ e.createElement("li", { key: p }, n))
+));
+d.propTypes = {
+  children: a.node.isRequired
 };
 export {
-  c as SubNavSections
+  d as SubNavSections
 };

package/dist/Tabs/TabGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),v=require("prop-types"),g=require("./TabsContext.cjs"),_=require("../helpers/useId.cjs"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function x(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const d=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,d.get?d:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const r=x(m),a=I(v),o=r.forwardRef(({id:e,initialSelectedTabIndex:n,label:t,onTabChange:d,variant:u,...l},T)=>{const c=_.useId(e),p=r.Children.toArray(l.children).find(i=>i.type.displayName==="Tabs");let s=n||0;p&&n===void 0&&(s=p.props.children.findIndex(i=>!i.props.disabled));const[f,b]=r.useState(s===-1?0:s);r.useImperativeHandle(T,()=>({_handlers:{setSelectedTabIndex:b}}));const y=r.useMemo(()=>({id:c,selectedTabIndex:f,selectTabIndex:b,label:t,variant:u,onTabChange:d}),[t,d,f,c,u]);return r.createElement(g.TabsContext.Provider,{value:y},r.createElement("div",{...l}))});o.displayName="TabGroup";o.defaultProps={id:void 0,initialSelectedTabIndex:void 0,onTabChange(){},variant:void 0};o.propTypes={children:a.default.node.isRequired,id:a.default.string,initialSelectedTabIndex:a.default.number,label:a.default.string.isRequired,onTabChange:a.default.func,variant:a.default.oneOf(["simple"])};exports.TabGroup=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),v=require("prop-types"),g=require("./TabsContext.cjs"),_=require("../hooks/useId.cjs"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function x(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const r=x(m),a=I(v),d=r.forwardRef(({id:e,initialSelectedTabIndex:n,label:t,onTabChange:o,variant:u,...c},T)=>{const l=_.useId(e),f=r.Children.toArray(c.children).find(i=>i.type.displayName==="Tabs");let s=n||0;f&&n===void 0&&(s=f.props.children.findIndex(i=>!i.props.disabled));const[p,b]=r.useState(s===-1?0:s);r.useImperativeHandle(T,()=>({_handlers:{setSelectedTabIndex:b}}));const y=r.useMemo(()=>({id:l,selectedTabIndex:p,selectTabIndex:b,label:t,variant:u,onTabChange:o}),[t,o,p,l,u]);return r.createElement(g.TabsContext.Provider,{value:y},r.createElement("div",{...c}))});d.displayName="TabGroup";d.defaultProps={id:void 0,initialSelectedTabIndex:void 0,onTabChange(){},variant:void 0};d.propTypes={children:a.default.node.isRequired,id:a.default.string,initialSelectedTabIndex:a.default.number,label:a.default.string.isRequired,onTabChange:a.default.func,variant:a.default.oneOf(["simple"])};exports.TabGroup=d;

package/dist/Tabs/TabGroup.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import t from "prop-types";
 import { TabsContext as v } from "./TabsContext.js";
-import { useId as x } from "../helpers/useId.js";
+import { useId as x } from "../hooks/useId.js";
 const i = e.forwardRef(
   ({ id: f, initialSelectedTabIndex: a, label: n, onTabChange: o, variant: s, ...l }, u) => {
     const p = x(f), c = e.Children.toArray(l.children).find((d) => d.type.displayName === "Tabs");

package/dist/Tag/Tag.cjs

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

package/dist/Tag/Tag.js

@@ -1,57 +1,60 @@
-import t from "react";
-import a from "prop-types";
-import n from "styled-components";
-import { Box as p } from "../Box/Box.js";
-import { Flex as l } from "../Flex/Flex.js";
-import { Typography as g } from "../Typography/Typography.js";
-const u = n(p)`
-  svg {
+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)`
+  & > svg {
     height: ${8 / 16}rem;
     width: ${8 / 16}rem;
   }
 
-  svg path {
-    fill: ${({ theme: r, ...o }) => o["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600};
+  & > svg path {
+    fill: ${({
+  theme: r,
+  ...a
+}) => a["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600};
   }
-`, f = n(g)`
-  border-right: 1px solid ${({ theme: r, disabled: o }) => o ? r.colors.neutral300 : r.colors.primary200};
+`, c = t(d)`
   color: inherit;
-  padding-right: ${({ theme: r }) => r.spaces[2]};
-`, i = ({ children: r, icon: o, disabled: e, onClick: d, ...s }) => {
-  const c = (m) => {
-    e || d(m);
-  };
-  return /* @__PURE__ */ t.createElement(
-    u,
-    {
-      as: "button",
-      background: e ? "neutral200" : "primary100",
-      color: e ? "neutral700" : "primary600",
-      paddingLeft: 3,
-      paddingRight: 3,
-      onClick: c,
-      "aria-disabled": e,
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: e ? "neutral300" : "primary200",
-      hasRadius: !0,
-      height: `${32 / 16}rem`,
-      ...s
-    },
-    /* @__PURE__ */ t.createElement(l, null, /* @__PURE__ */ t.createElement(f, { disabled: e, variant: "pi", fontWeight: "bold", as: "span" }, r), /* @__PURE__ */ t.createElement(p, { paddingLeft: 2 }, /* @__PURE__ */ t.createElement(l, null, o)))
-  );
-};
-i.displayName = "Tag";
-i.defaultProps = {
-  disabled: !1,
-  onClick: void 0
-};
-i.propTypes = {
-  children: a.node.isRequired,
-  disabled: a.bool,
-  icon: a.element.isRequired,
-  onClick: a.func
-};
+  border-right: 1px solid ${({
+  theme: r,
+  $disabled: a
+}) => a ? r.colors.neutral300 : r.colors.primary200};
+  padding-right: ${({
+  theme: r
+}) => r.spaces[2]};
+`;
 export {
-  i as Tag
+  x as Tag
 };

package/dist/TextButton/TextButton.cjs

@@ -1,15 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),x=require("react"),g=require("@strapi/icons"),c=require("styled-components"),l=require("../Box/Box.cjs"),m=require("../Flex/Flex.cjs"),j=require("../themes/utils.cjs"),h=require("../Typography/Typography.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function T(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 o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const _=T(x),u=b(c),v=c.keyframes`
+"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`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,B=u.default.div`
-  animation: ${v} 2s infinite linear;
+`,v=l.default.div`
+  animation: ${_} 2s infinite linear;
   will-change: transform;
-`,q=u.default(m.Flex)`
-  background: transparent;
+`,q=l.default(m.Flex)`
   border: none;
 
   &[aria-disabled='true'] {
@@ -19,14 +18,9 @@
     }
   }
 
-  svg {
-    display: flex;
-    font-size: ${10/16}rem;
-  }
-
   svg path {
     fill: ${({theme:e})=>e.colors.primary600};
   }
 
-  ${j.buttonFocusStyle}
-`,d=_.forwardRef(({children:e,startIcon:r,endIcon:t,onClick:o,disabled:s=!1,loading:a=!1,...p},f)=>{const y=o&&!s?o:void 0,i=s||a;return n.jsxs(q,{ref:f,"aria-disabled":i,onClick:y,as:"button",type:"button",...p,children:[(r||a)&&n.jsx(l.Box,{as:"span",paddingRight:2,"aria-hidden":!0,children:a?n.jsx(B,{children:n.jsx(g.Loader,{})}):r}),n.jsx(h.Typography,{variant:"pi",textColor:i?"neutral600":"primary600",children:e}),t&&n.jsx(l.Box,{as:"span",paddingLeft:2,"aria-hidden":!0,children:t})]})});d.displayName="TextButton";exports.TextButton=d;
+  ${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;

package/dist/TextButton/TextButton.js

@@ -1,23 +1,21 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import * as u from "react";
-import { Loader as h } from "@strapi/icons";
-import d, { keyframes as g } from "styled-components";
-import { Box as p } from "../Box/Box.js";
-import { Flex as x } from "../Flex/Flex.js";
-import { buttonFocusStyle as y } from "../themes/utils.js";
-import { Typography as b } from "../Typography/Typography.js";
-const v = g`
+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 { Typography as x } from "../Typography/Typography.js";
+const b = h`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`, $ = d.div`
-  animation: ${v} 2s infinite linear;
+`, v = i.div`
+  animation: ${b} 2s infinite linear;
   will-change: transform;
-`, B = d(x)`
-  background: transparent;
+`, T = i(y)`
   border: none;
 
   &[aria-disabled='true'] {
@@ -29,55 +27,43 @@ const v = g`
     }
   }
 
-  svg {
-    display: flex;
-    font-size: ${10 / 16}rem;
-  }
-
   svg path {
     fill: ${({
   theme: r
 }) => r.colors.primary600};
   }
 
-  ${y}
-`, T = u.forwardRef(({
+  ${g}
+`, $ = c.forwardRef(({
   children: r,
-  startIcon: o,
-  endIcon: a,
-  onClick: n,
-  disabled: i = !1,
-  loading: e = !1,
-  ...l
+  startIcon: s,
+  endIcon: l,
+  onClick: o,
+  disabled: e = !1,
+  loading: a = !1,
+  ...p
 }, m) => {
-  const f = n && !i ? n : void 0, s = i || e;
-  return c(B, {
+  const f = o && !e ? o : void 0, n = e || a;
+  return d(T, {
     ref: m,
-    "aria-disabled": s,
+    "aria-disabled": n,
     onClick: f,
     as: "button",
     type: "button",
-    ...l,
-    children: [(o || e) && t(p, {
-      as: "span",
-      paddingRight: 2,
+    background: "transparent",
+    gap: 2,
+    ...p,
+    children: [a ? t(v, {
       "aria-hidden": !0,
-      children: e ? t($, {
-        children: t(h, {})
-      }) : o
-    }), t(b, {
+      children: t(u, {})
+    }) : s, t(x, {
       variant: "pi",
-      textColor: s ? "neutral600" : "primary600",
+      textColor: n ? "neutral600" : "primary600",
       children: r
-    }), a && t(p, {
-      as: "span",
-      paddingLeft: 2,
-      "aria-hidden": !0,
-      children: a
-    })]
+    }), l]
   });
 });
-T.displayName = "TextButton";
+$.displayName = "TextButton";
 export {
-  T as TextButton
+  $ as TextButton
 };