@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/Tabs/Tabs.js

@@ -1,126 +1,76 @@
-import l, { Children as C, cloneElement as D } from "react";
-import i from "prop-types";
-import E from "styled-components";
-import { DefaultTabsRow as k, SimpleTabBox as w, DefaultTabButton as R, DefaultTabBox as B } from "./components.js";
-import { useTabs as K } from "./TabsContext.js";
-import { useTabsFocus as P } from "./useTabsFocus.js";
-import { KeyboardKeys as T } from "../helpers/keyboardKeys.js";
-import { Typography as I } from "../Typography/Typography.js";
-const A = E.button`
+import { jsx as c } from "react/jsx-runtime";
+import { Children as T, cloneElement as I, useRef as g, useEffect as k } from "react";
+import { useCallbackRef as w } from "@strapi/ui-primitives";
+import R from "styled-components";
+import { DefaultTabsRow as v, SimpleTabBox as B, DefaultTabButton as E, DefaultTabBox as K } from "./components.js";
+import { useTabs as A } from "./TabsContext.js";
+import { KeyboardKeys as y } from "../helpers/keyboardKeys.js";
+import { Typography as C } from "../Typography/Typography.js";
+const N = (s, b) => {
+  const i = g(null), l = g(!1), r = w(b);
+  return k(() => {
+    if (i.current) {
+      if (l.current) {
+        const d = i.current.querySelector('[tabindex="0"]');
+        d && (d.focus(), r(s));
+      }
+      l.current || (l.current = !0);
+    }
+  }, [s, r]), i;
+}, $ = R.button`
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
-`, N = ({ children: b, ...p }) => {
-  const { id: h, selectedTabIndex: c, selectTabIndex: o, label: m, variant: u, onTabChange: y } = K(), f = P(c, y), a = C.toArray(b).map(
-    (t, s) => D(t, {
-      id: `${h}-${s}`,
-      index: s,
-      selectedTabIndex: c,
-      onTabClick: () => o(s),
-      variant: u
-    })
-  ), x = (t) => {
-    if (!a.every((n) => n.props.disabled))
+`, G = ({ children: s, ...b }) => {
+  const { id: i, selectedTabIndex: l, selectTabIndex: r, label: d, variant: h, onTabChange: x } = A(), p = N(l, x), n = T.toArray(s).map((t, u) => I(t, {
+    id: `${i}-${u}`,
+    index: u,
+    selectedTabIndex: l,
+    onTabClick: () => r(u),
+    variant: h
+  })), m = (t) => {
+    if (!n.every((a) => a.props.disabled))
       switch (t.key) {
-        case T.RIGHT: {
-          const n = c + 1, e = (r) => a[r].props.disabled ? r === a.length - 1 ? e(0) : e(r + 1) : r, d = e(n >= a.length ? 0 : n);
-          o(d);
+        case y.RIGHT: {
+          const a = l + 1, e = (o) => n[o].props.disabled ? o === n.length - 1 ? e(0) : e(o + 1) : o, f = e(a >= n.length ? 0 : a);
+          r(f);
           break;
         }
-        case T.LEFT: {
-          const n = c - 1, e = (r) => a[r].props.disabled ? e(r === 0 ? a.length - 1 : r - 1) : r, d = e(n < 0 ? a.length - 1 : n);
-          o(d);
+        case y.LEFT: {
+          const a = l - 1, e = (o) => n[o].props.disabled ? e(o === 0 ? n.length - 1 : o - 1) : o, f = e(a < 0 ? n.length - 1 : a);
+          r(f);
           break;
         }
-        case T.HOME: {
-          const n = a.findIndex((e) => !e.props.disabled);
-          o(n);
+        case y.HOME: {
+          const a = n.findIndex((e) => !e.props.disabled);
+          r(a);
           break;
         }
-        case T.END: {
-          const e = a.map((d, r) => ({ isDisabled: d.props.disabled, index: r })).reverse().find(({ isDisabled: d }) => !d);
-          e && o(e.index);
+        case y.END: {
+          const e = n.map((f, o) => ({ isDisabled: f.props.disabled, index: o })).reverse().find(({ isDisabled: f }) => !f);
+          e && r(e.index);
           break;
         }
       }
   };
-  return u === "simple" ? /* @__PURE__ */ l.createElement("div", { ref: f, role: "tablist", "aria-label": m, onKeyDown: x, ...p }, a) : /* @__PURE__ */ l.createElement(
-    k,
-    {
-      ref: f,
-      role: "tablist",
-      alignItems: "flex-end",
-      "aria-label": m,
-      onKeyDown: x,
-      ...p
-    },
-    a
-  );
-};
-N.propTypes = {
-  children: i.node.isRequired
-};
-const v = ({ disabled: b, id: p, children: h, variant: c, hasError: o, index: m, selectedTabIndex: u, onTabClick: y, ...f }) => {
-  const a = `${p}-tab`, x = `${p}-tabpanel`, t = m === u, s = () => {
-    b || y();
+  return h === "simple" ? (
+    // TODO: This needs to be reviewed how to handle correctly since it's supposed to have focus.
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    c("div", { ref: p, role: "tablist", "aria-label": d, onKeyDown: m, ...b, children: n })
+  ) : c(v, { ref: p, role: "tablist", alignItems: "flex-end", "aria-label": d, onKeyDown: m, ...b, children: n });
+}, L = ({ disabled: s = !1, id: b, children: i, variant: l, hasError: r = !1, index: d, selectedTabIndex: h, onTabClick: x, ...p }) => {
+  const n = `${b}-tab`, m = `${b}-tabpanel`, t = d === h, u = () => {
+    s || x && x();
   };
-  if (c === "simple") {
+  if (l === "simple") {
     let e;
-    return o ? e = "danger600" : t ? e = "primary600" : e = "neutral600", /* @__PURE__ */ l.createElement(
-      A,
-      {
-        id: a,
-        role: "tab",
-        "aria-controls": t ? x : void 0,
-        tabIndex: t ? 0 : -1,
-        "aria-selected": t,
-        type: "button",
-        onClick: s,
-        "aria-disabled": b,
-        ...f
-      },
-      /* @__PURE__ */ l.createElement(w, { padding: 4, selected: t, hasError: o }, /* @__PURE__ */ l.createElement(I, { variant: "sigma", textColor: e }, h))
-    );
+    return r ? e = "danger600" : t ? e = "primary600" : e = "neutral600", c($, { id: n, role: "tab", "aria-controls": t ? m : void 0, tabIndex: t ? 0 : -1, "aria-selected": t, type: "button", onClick: u, "aria-disabled": s, ...p, children: c(B, { padding: 4, selected: t, hasError: r, children: c(C, { variant: "sigma", textColor: e, children: i }) }) });
   }
-  o && console.warn('The "hasError" prop is only available for the "simple" variant.');
-  const n = u - 1 === m;
-  return /* @__PURE__ */ l.createElement(
-    R,
-    {
-      id: a,
-      role: "tab",
-      type: "button",
-      "aria-controls": t ? x : void 0,
-      tabIndex: t ? 0 : -1,
-      "aria-selected": t,
-      onClick: s,
-      "aria-disabled": b,
-      showRightBorder: n,
-      ...f
-    },
-    /* @__PURE__ */ l.createElement(B, { padding: t ? 4 : 3, background: t ? "neutral0" : "neutral100", selected: t }, /* @__PURE__ */ l.createElement(I, { fontWeight: "bold", textColor: t ? "primary700" : "neutral600" }, h))
-  );
-};
-v.defaultProps = {
-  disabled: !1,
-  hasError: !1,
-  id: void 0,
-  index: void 0,
-  onTabClick: void 0,
-  selectedTabIndex: void 0,
-  variant: void 0
-};
-v.propTypes = {
-  children: i.node.isRequired,
-  disabled: i.bool,
-  hasError: i.bool,
-  id: i.string,
-  index: i.number,
-  onTabClick: i.func,
-  selectedTabIndex: i.number,
-  variant: i.oneOf(["simple"])
+  r && console.warn('The "hasError" prop is only available for the "simple" variant.');
+  const a = h && h - 1 === d;
+  return c(E, { id: n, role: "tab", type: "button", "aria-controls": t ? m : void 0, tabIndex: t ? 0 : -1, "aria-selected": t, onClick: u, "aria-disabled": s, showRightBorder: !!a, ...p, children: c(K, { padding: t ? 4 : 3, background: t ? "neutral0" : "neutral100", selected: t, children: c(C, { fontWeight: "bold", textColor: t ? "primary700" : "neutral600", children: i }) }) });
 };
 export {
-  v as Tab,
-  N as Tabs
+  L as Tab,
+  G as Tabs
 };

package/dist/Tabs/TabsContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext(),s=()=>e.useContext(t);exports.TabsContext=t;exports.useTabs=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({id:"",label:"",selectedTabIndex:0,selectTabIndex(){throw new Error("TabsContext.selectTabIndex is not implemented.")}}),s=()=>e.useContext(t);exports.TabsContext=t;exports.useTabs=s;

package/dist/Tabs/TabsContext.js

@@ -1,6 +1,13 @@
-import { createContext as t, useContext as e } from "react";
-const o = t(), n = () => e(o);
+import { createContext as e, useContext as t } from "react";
+const n = e({
+  id: "",
+  label: "",
+  selectedTabIndex: 0,
+  selectTabIndex() {
+    throw new Error("TabsContext.selectTabIndex is not implemented.");
+  }
+}), s = () => t(n);
 export {
-  o as TabsContext,
-  n as useTabs
+  n as TabsContext,
+  s as useTabs
 };

package/dist/Tabs/components.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("styled-components"),a=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=u(d),i=l.default(a.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),l=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),s=o=>o&&o.__esModule?o:{default:o},a=s(n),i=a.default(l.Box)`
   border-bottom: 2px solid
-    ${({theme:e,selected:r,hasError:n})=>r?n?e.colors.danger600:e.colors.primary600:"transparent"};
-`,o=l.default(a.Box)`
-  border-bottom: 1px solid ${({theme:e,selected:r})=>r?e.colors.neutral0:e.colors.neutral150};
-`,t=l.default.button`
+    ${({theme:o,selected:e,hasError:d})=>e?d?o.colors.danger600:o.colors.primary600:"transparent"};
+`,r=a.default(l.Box)`
+  border-bottom: 1px solid ${({theme:o,selected:e})=>e?o.colors.neutral0:o.colors.neutral150};
+`,t=a.default.button`
   border: none;
   background: transparent;
   padding: 0;
 
-  & + & > ${o} {
-    border-left: 1px solid ${({theme:e})=>e.colors.neutral150};
+  & + & > ${r} {
+    border-left: 1px solid ${({theme:o})=>o.colors.neutral150};
   }
 
-  ${o} {
-    border-right: ${({theme:e,showRightBorder:r})=>r?`1px solid ${e.colors.neutral150}`:"none"};
+  ${r} {
+    border-right: ${({theme:o,showRightBorder:e})=>e?`1px solid ${o.colors.neutral150}`:"none"};
   }
 
   // Hack preventing the outline from being overflow by the following tab
@@ -22,22 +22,22 @@
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
-`,b=l.default(s.Flex)`
+`,b=a.default(u.Flex)`
   & > * {
     flex: 1;
   }
 
-  & ${t}:first-of-type ${o} {
-    border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 0`};
+  & ${t}:first-of-type ${r} {
+    border-radius: ${({theme:o})=>`${o.borderRadius} 0 0 0`};
   }
 
-  & ${t}:last-of-type ${o} {
-    border-radius: ${({theme:e})=>`0 ${e.borderRadius} 0 0`};
+  & ${t}:last-of-type ${r} {
+    border-radius: ${({theme:o})=>`0 ${o.borderRadius} 0 0`};
   }
 
-  & ${t}[aria-selected="true"] ${o} {
-    border-radius: ${({theme:e})=>`${e.borderRadius} ${e.borderRadius} 0 0`};
+  & ${t}[aria-selected="true"] ${r} {
+    border-radius: ${({theme:o})=>`${o.borderRadius} ${o.borderRadius} 0 0`};
     border-left: none;
     border-right: none;
   }
-`;exports.DefaultTabBox=o;exports.DefaultTabButton=t;exports.DefaultTabsRow=b;exports.SimpleTabBox=i;
+`;exports.DefaultTabBox=r;exports.DefaultTabButton=t;exports.DefaultTabsRow=b;exports.SimpleTabBox=i;

package/dist/Tabs/index.cjs

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

package/dist/Tag/Tag.cjs

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

package/dist/Tag/Tag.js

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

package/dist/Tag/index.cjs

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

package/dist/TextButton/TextButton.cjs

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

package/dist/TextButton/TextButton.js

@@ -1,83 +1,40 @@
-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 { 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 { buttonFocusStyle as y } from "../themes/utils.js";
-import { Typography as b } from "../Typography/Typography.js";
-const v = g`
+import { Flex as g } from "../Flex/Flex.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(g)`
   border: none;
 
   &[aria-disabled='true'] {
     pointer-events: none;
     svg path {
-      fill: ${({
-  theme: r
-}) => r.colors.neutral600};
+      fill: ${({ theme: r }) => r.colors.neutral600};
     }
   }
 
-  svg {
-    display: flex;
-    font-size: ${10 / 16}rem;
-  }
-
   svg path {
-    fill: ${({
-  theme: r
-}) => r.colors.primary600};
+    fill: ${({ theme: r }) => r.colors.primary600};
   }
 
   ${y}
-`, T = u.forwardRef(({
-  children: r,
-  startIcon: o,
-  endIcon: a,
-  onClick: n,
-  disabled: i = !1,
-  loading: e = !1,
-  ...l
-}, m) => {
-  const f = n && !i ? n : void 0, s = i || e;
-  return c(B, {
-    ref: m,
-    "aria-disabled": s,
-    onClick: f,
-    as: "button",
-    type: "button",
-    ...l,
-    children: [(o || e) && t(p, {
-      as: "span",
-      paddingRight: 2,
-      "aria-hidden": !0,
-      children: e ? t($, {
-        children: t(h, {})
-      }) : o
-    }), t(b, {
-      variant: "pi",
-      textColor: s ? "neutral600" : "primary600",
-      children: r
-    }), a && t(p, {
-      as: "span",
-      paddingLeft: 2,
-      "aria-hidden": !0,
-      children: a
-    })]
-  });
+`, $ = c.forwardRef(({ children: r, startIcon: s, endIcon: l, onClick: o, disabled: e = !1, loading: a = !1, ...p }, m) => {
+  const f = o && !e ? o : void 0, n = e || a;
+  return d(T, { ref: m, "aria-disabled": n, onClick: f, as: "button", type: "button", background: "transparent", gap: 2, ...p, children: [a ? t(v, { "aria-hidden": !0, children: t(u, {}) }) : s, t(x, { variant: "pi", textColor: n ? "neutral600" : "primary600", children: r }), l] });
 });
-T.displayName = "TextButton";
+$.displayName = "TextButton";
 export {
-  T as TextButton
+  $ as TextButton
 };

package/dist/TextButton/index.cjs

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

package/dist/TextInput/TextInput.cjs

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

package/dist/TextInput/TextInput.js

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

package/dist/TextInput/index.cjs

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

package/dist/Textarea/Textarea.cjs

@@ -1,15 +1,17 @@
-"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;
-    line-height: ${20/16}rem;
-  }
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react"),g=require("styled-components"),j=require("../hooks/useId.cjs"),b=require("../themes/utils.cjs"),d=require("../Box/Box.cjs"),m=require("../Field/FieldContext.cjs"),y=require("../Field/Field.cjs"),R=require("../Flex/Flex.cjs"),_=require("../Field/FieldLabel.cjs"),$=require("../Field/FieldHint.cjs"),E=require("../Field/FieldError.cjs"),c=e=>e&&e.__esModule?e:{default:e},f=c(p),x=c(g),I=x.default(d.Box)`
+  ${b.inputFocusStyle()}
+`,S=x.default(d.Box)`
+  border: none;
+  resize: none;
 
-  & textarea::placeholder {
-    font-weight: 400;
-    font-size: ${14/16}rem;
-    line-height: 1.43;
-    color: ${({theme:t})=>t.colors.neutral500};
+  ::placeholder {
+    color: ${({theme:e})=>e.colors.neutral500};
+    font-size: ${({theme:e})=>e.fontSizes[2]};
+    color: ${({theme:e})=>e.colors.neutral500};
     opacity: 1;
   }
-`,r=l.default.forwardRef(({name:t,hint:n,error:o,label:i,children:u,labelAction:s,id:c,required:f,...F},p)=>{const m=v.useId(c);return l.default.createElement(I,null,l.default.createElement(y.Field,{name:t,hint:n,error:o,id:m,required:f},l.default.createElement(d.Flex,{direction:"column",alignItems:"stretch",gap:1},i&&l.default.createElement(d.Flex,null,l.default.createElement(T.FieldLabel,{action:s},i)),l.default.createElement(x.TextareaInput,{ref:p,as:"textarea",value:u,...F}),l.default.createElement(b.FieldHint,null),l.default.createElement(j.FieldError,null))))});r.displayName="Textarea";r.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,children:"",required:!1};r.propTypes={"aria-label":e.default.string,children:e.default.string,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool};exports.Textarea=r;
+
+  &:focus-within {
+    outline: none;
+  }
+`,T=f.default.forwardRef(({disabled:e,...a},s)=>{const{id:t,error:i,hint:l,required:u}=m.useField(),n=!!i;let o=l?`${t}-hint`:void 0;return i&&(o=`${t}-error`),r.jsx(I,{borderColor:n?"danger600":"neutral200",hasError:n,hasRadius:!0,children:r.jsx(S,{"aria-describedby":o,"aria-invalid":n,"aria-required":u,as:"textarea",background:e?"neutral150":"neutral0",color:e?"neutral600":"neutral800",disabled:e,fontSize:2,hasRadius:!0,height:`${105/16}rem`,id:t,ref:s,lineHeight:4,padding:4,width:"100%",...a})})}),w=f.default.forwardRef(({name:e,hint:a,error:s,label:t,labelAction:i,id:l,required:u=!1,children:n,value:o,...h},q)=>{const F=j.useId(l);return r.jsx(y.Field,{name:e,hint:a,error:s,id:F,required:u,children:r.jsxs(R.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t&&r.jsx(_.FieldLabel,{action:i,children:t}),r.jsx(T,{ref:q,value:n??o,...h}),r.jsx($.FieldHint,{}),r.jsx(E.FieldError,{})]})})});exports.Textarea=w;