@strapi/design-system 1.6.4 → 1.6.5

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/TextInput/TextInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),v=require("prop-types"),y=require("../Field/Field.cjs"),I=require("../Field/FieldLabel.cjs"),g=require("../Field/FieldInput.cjs"),E=require("../Field/FieldHint.cjs"),T=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../helpers/useId.cjs"),_=require("../Stack/Stack.cjs"),h=require("../themes/sizes.cjs"),o=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},t=o(d),e=o(v),i=t.default.forwardRef(({size:l,startAction:s,endAction:c,name:f,hint:p,error:F,label:r,labelAction:b,id:m,required:q,...a},n)=>{const j=A.useId(m),u=d.useRef(null);if(!r&&!a["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return d.useImperativeHandle(n,()=>({inputWrapperRef:u})),t.default.createElement("div",{ref:u},t.default.createElement(y.Field,{name:f,hint:p,error:F,id:j,required:q},t.default.createElement(_.Stack,{spacing:1},r&&t.default.createElement(I.FieldLabel,{action:b},r),t.default.createElement(g.FieldInput,{size:l,ref:n,startAction:s,endAction:c,...a}),t.default.createElement(E.FieldHint,null),t.default.createElement(T.FieldError,null))))});i.displayName="TextInput";i.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,startAction:void 0,size:"M",endAction:void 0,required:!1};i.propTypes={"aria-label":e.default.string,endAction:e.default.element,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.bool,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool,size:e.default.oneOf(Object.keys(h.sizes.input)),startAction:e.default.element};exports.TextInput=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),I=require("prop-types"),g=require("../Field/Field.cjs"),v=require("../Field/FieldLabel.cjs"),y=require("../Field/FieldInput.cjs"),E=require("../Field/FieldHint.cjs"),T=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const x=require("../Flex/Flex.cjs"),h=require("../hooks/useId.cjs"),A=require("../themes/sizes.cjs"),u=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},t=u(d),e=u(I),i=t.default.forwardRef(({size:l,startAction:s,endAction:c,name:f,hint:p,error:F,label:r,labelAction:m,id:b,required:q,...a},n)=>{const j=h.useId(b),o=d.useRef(null);if(!r&&!a["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return d.useImperativeHandle(n,()=>({inputWrapperRef:o})),t.default.createElement("div",{ref:o},t.default.createElement(g.Field,{name:f,hint:p,error:F,id:j,required:q},t.default.createElement(x.Flex,{direction:"column",alignItems:"stretch",gap:1},r&&t.default.createElement(v.FieldLabel,{action:m},r),t.default.createElement(y.FieldInput,{size:l,ref:n,startAction:s,endAction:c,...a}),t.default.createElement(E.FieldHint,null),t.default.createElement(T.FieldError,null))))});i.displayName="TextInput";i.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,startAction:void 0,size:"M",endAction:void 0,required:!1};i.propTypes={"aria-label":e.default.string,endAction:e.default.element,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.bool,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool,size:e.default.oneOf(Object.keys(A.sizes.input)),startAction:e.default.element};exports.TextInput=i;

package/dist/TextInput/TextInput.js

@@ -1,23 +1,23 @@
-import r, { useRef as E, useImperativeHandle as g } from "react";
+import r, { useRef as g, useImperativeHandle as E } from "react";
 import e from "prop-types";
-import { Field as T } from "../Field/Field.js";
-import { FieldLabel as y } from "../Field/FieldLabel.js";
-import { FieldInput as I } from "../Field/FieldInput.js";
+import { Field as I } from "../Field/Field.js";
+import { FieldLabel as T } from "../Field/FieldLabel.js";
+import { FieldInput as y } from "../Field/FieldInput.js";
 import { FieldHint as A } from "../Field/FieldHint.js";
 import { FieldError as F } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { useId as O } from "../helpers/useId.js";
-import { Stack as R } from "../Stack/Stack.js";
-import { sizes as h } from "../themes/sizes.js";
+import { Flex as h } from "../Flex/Flex.js";
+import { useId as x } from "../hooks/useId.js";
+import { sizes as O } from "../themes/sizes.js";
 const o = r.forwardRef(
-  ({ size: l, startAction: m, endAction: d, name: p, hint: s, error: c, label: t, labelAction: f, id: u, required: b, ...i }, n) => {
-    const v = O(u), a = E(null);
+  ({ size: a, startAction: m, endAction: d, name: p, hint: s, error: c, label: t, labelAction: f, id: u, required: b, ...i }, n) => {
+    const v = x(u), l = g(null);
     if (!t && !i["aria-label"])
       throw new Error('The TextInput component needs a "label" or an "aria-label" props');
-    return g(n, () => ({
-      inputWrapperRef: a
-    })), /* @__PURE__ */ r.createElement("div", { ref: a }, /* @__PURE__ */ r.createElement(T, { name: p, hint: s, error: c, id: v, required: b }, /* @__PURE__ */ r.createElement(R, { spacing: 1 }, t && /* @__PURE__ */ r.createElement(y, { action: f }, t), /* @__PURE__ */ r.createElement(I, { size: l, ref: n, startAction: m, endAction: d, ...i }), /* @__PURE__ */ r.createElement(A, null), /* @__PURE__ */ r.createElement(F, null))));
+    return E(n, () => ({
+      inputWrapperRef: l
+    })), /* @__PURE__ */ r.createElement("div", { ref: l }, /* @__PURE__ */ r.createElement(I, { name: p, hint: s, error: c, id: v, required: b }, /* @__PURE__ */ r.createElement(h, { direction: "column", alignItems: "stretch", gap: 1 }, t && /* @__PURE__ */ r.createElement(T, { action: f }, t), /* @__PURE__ */ r.createElement(y, { size: a, ref: n, startAction: m, endAction: d, ...i }), /* @__PURE__ */ r.createElement(A, null), /* @__PURE__ */ r.createElement(F, null))));
   }
 );
 o.displayName = "TextInput";
@@ -43,7 +43,7 @@ o.propTypes = {
   labelAction: e.element,
   name: e.string.isRequired,
   required: e.bool,
-  size: e.oneOf(Object.keys(h.input)),
+  size: e.oneOf(Object.keys(O.input)),
   startAction: e.element
 };
 export {

package/dist/Textarea/Textarea.cjs

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

package/dist/Textarea/Textarea.js

@@ -1,18 +1,17 @@
 import r from "react";
 import e from "prop-types";
-import h from "styled-components";
-import { TextareaInput as u } from "./TextareaInput.js";
-import { Field as g } from "../Field/Field.js";
-import { FieldLabel as v } from "../Field/FieldLabel.js";
+import u from "styled-components";
+import { TextareaInput as g } from "./TextareaInput.js";
+import { Field as v } from "../Field/Field.js";
+import { FieldLabel as x } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as x } from "../Field/FieldHint.js";
-import { FieldError as E } from "../Field/FieldError.js";
+import { FieldHint as E } from "../Field/FieldHint.js";
+import { FieldError as T } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Flex as T } from "../Flex/Flex.js";
-import { useId as b } from "../helpers/useId.js";
-import { Stack as y } from "../Stack/Stack.js";
-const F = h.div`
+import { Flex as a } from "../Flex/Flex.js";
+import { useId as b } from "../hooks/useId.js";
+const y = u.div`
   & textarea {
     // TODO: remove when we'll have fonts in the theme
     height: ${80 / 16}rem;
@@ -27,9 +26,9 @@ const F = h.div`
     opacity: 1;
   }
 `, i = r.forwardRef(
-  ({ name: t, hint: a, error: l, label: o, children: n, labelAction: m, id: d, required: p, ...c }, s) => {
-    const f = b(d);
-    return /* @__PURE__ */ r.createElement(F, null, /* @__PURE__ */ r.createElement(g, { name: t, hint: a, error: l, id: f, required: p }, /* @__PURE__ */ r.createElement(y, { spacing: 1 }, o && /* @__PURE__ */ r.createElement(T, null, /* @__PURE__ */ r.createElement(v, { action: m }, o)), /* @__PURE__ */ r.createElement(u, { ref: s, as: "textarea", value: n, ...c }), /* @__PURE__ */ r.createElement(x, null), /* @__PURE__ */ r.createElement(E, null))));
+  ({ name: t, hint: l, error: n, label: o, children: m, labelAction: d, id: p, required: c, ...s }, f) => {
+    const h = b(p);
+    return /* @__PURE__ */ r.createElement(y, null, /* @__PURE__ */ r.createElement(v, { name: t, hint: l, error: n, id: h, required: c }, /* @__PURE__ */ r.createElement(a, { direction: "column", alignItems: "stretch", gap: 1 }, o && /* @__PURE__ */ r.createElement(a, null, /* @__PURE__ */ r.createElement(x, { action: d }, o)), /* @__PURE__ */ r.createElement(g, { ref: f, as: "textarea", value: m, ...s }), /* @__PURE__ */ r.createElement(E, null), /* @__PURE__ */ r.createElement(T, null))));
   }
 );
 i.displayName = "Textarea";

package/dist/Textarea/TextareaInput.cjs

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

package/dist/Textarea/TextareaInput.js

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