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

package/dist/Tabs/TabGroup.js

@@ -1,36 +1,55 @@
-import s, { forwardRef as T, Children as v, useState as I, useImperativeHandle as h } from "react";
-import e from "prop-types";
-import { TabsContext as x } from "./TabsContext.js";
-import { useId as y } from "../helpers/useId.js";
-const t = T(({ id: l, initialSelectedTabIndex: d, label: p, onTabChange: b, variant: c, ...i }, m) => {
-  const f = y("tabgroup", l), n = v.toArray(i.children).find((a) => a.type.displayName === "Tabs");
-  let r = d || 0;
-  n && d === void 0 && (r = n.props.children.findIndex((a) => !a.props.disabled));
-  const [u, o] = I(r === -1 ? 0 : r);
-  return h(m, () => ({
-    _handlers: { setSelectedTabIndex: o }
-  })), /* @__PURE__ */ s.createElement(x.Provider, {
-    value: { id: f, selectedTabIndex: u, selectTabIndex: o, label: p, variant: c, onTabChange: b }
-  }, /* @__PURE__ */ s.createElement("div", {
-    ...i
-  }));
+var C = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var m = (e, r, a) => r in e ? C(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, T = (e, r) => {
+  for (var a in r || (r = {}))
+    f.call(r, a) && m(e, a, r[a]);
+  if (i)
+    for (var a of i(r))
+      u.call(r, a) && m(e, a, r[a]);
+  return e;
+};
+var v = (e, r) => {
+  var a = {};
+  for (var t in e)
+    f.call(e, t) && r.indexOf(t) < 0 && (a[t] = e[t]);
+  if (e != null && i)
+    for (var t of i(e))
+      r.indexOf(t) < 0 && u.call(e, t) && (a[t] = e[t]);
+  return a;
+};
+import I, { forwardRef as R, Children as S, useState as P, useImperativeHandle as _ } from "react";
+import d from "prop-types";
+import { TabsContext as q } from "./TabsContext.js";
+import { useId as E } from "../helpers/useId.js";
+const s = R((G, x) => {
+  var p = G, { id: e, initialSelectedTabIndex: r, label: a, onTabChange: t, variant: h } = p, l = v(p, ["id", "initialSelectedTabIndex", "label", "onTabChange", "variant"]);
+  const y = E("tabgroup", e), b = S.toArray(l.children).find((o) => o.type.displayName === "Tabs");
+  let n = r || 0;
+  b && r === void 0 && (n = b.props.children.findIndex((o) => !o.props.disabled));
+  const [g, c] = P(n === -1 ? 0 : n);
+  return _(x, () => ({
+    _handlers: { setSelectedTabIndex: c }
+  })), /* @__PURE__ */ I.createElement(q.Provider, {
+    value: { id: y, selectedTabIndex: g, selectTabIndex: c, label: a, variant: h, onTabChange: t }
+  }, /* @__PURE__ */ I.createElement("div", T({}, l)));
 });
-t.displayName = "TabGroup";
-t.defaultProps = {
+s.displayName = "TabGroup";
+s.defaultProps = {
   id: void 0,
   initialSelectedTabIndex: void 0,
-  onTabChange: () => {
+  onTabChange() {
   },
   variant: void 0
 };
-t.propTypes = {
-  children: e.node.isRequired,
-  id: e.string,
-  initialSelectedTabIndex: e.number,
-  label: e.string.isRequired,
-  onTabChange: e.func,
-  variant: e.oneOf(["simple"])
+s.propTypes = {
+  children: d.node.isRequired,
+  id: d.string,
+  initialSelectedTabIndex: d.number,
+  label: d.string.isRequired,
+  onTabChange: d.func,
+  variant: d.oneOf(["simple"])
 };
 export {
-  t as TabGroup
+  s as TabGroup
 };

package/dist/Tabs/TabPanels.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),b=require("prop-types"),f=require("./TabsContext.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=d(l),i=d(b),u=({children:e,...t})=>{const{id:a,selectedTabIndex:n}=f.useTabs(),p=l.Children.toArray(e).map((s,r)=>l.cloneElement(s,{id:`${a}-${r}`})).filter((s,r)=>r===n);return c.default.createElement("div",{...t},p)};u.propTypes={children:i.default.node.isRequired};const o=({id:e,...t})=>{const a=`${e}-tab`,n=`${e}-tabpanel`;return c.default.createElement("div",{id:n,role:"tabpanel",tabIndex:0,"aria-labelledby":a,...t})};o.defaultProps={id:void 0};o.propTypes={id:i.default.string};exports.TabPanel=o;exports.TabPanels=u;
+"use strict";var g=Object.defineProperty;var r=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var b=(e,t,a)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,d=(e,t)=>{for(var a in t||(t={}))f.call(t,a)&&b(e,a,t[a]);if(r)for(var a of r(t))T.call(t,a)&&b(e,a,t[a]);return e};var c=(e,t)=>{var a={};for(var n in e)f.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n]);if(e!=null&&r)for(var n of r(e))t.indexOf(n)<0&&T.call(e,n)&&(a[n]=e[n]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),q=require("prop-types"),x=require("./TabsContext.cjs"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},P=y(i),_=y(q),m=a=>{var n=a,{children:e}=n,t=c(n,["children"]);const{id:l,selectedTabIndex:o}=x.useTabs(),v=i.Children.toArray(e).map((p,s)=>i.cloneElement(p,{id:`${l}-${s}`})).filter((p,s)=>s===o);return P.default.createElement("div",d({},t),v)};m.propTypes={children:_.default.node.isRequired};const u=a=>{var n=a,{id:e}=n,t=c(n,["id"]);const l=`${e}-tab`,o=`${e}-tabpanel`;return P.default.createElement("div",d({id:o,role:"tabpanel",tabIndex:0,"aria-labelledby":l},t))};u.defaultProps={id:void 0};u.propTypes={id:_.default.string};exports.TabPanel=u;exports.TabPanels=m;

package/dist/Tabs/TabPanels.js

@@ -1,32 +1,51 @@
-import d, { Children as s, cloneElement as c } from "react";
-import l from "prop-types";
-import { useTabs as b } from "./TabsContext.js";
-const m = ({ children: e, ...t }) => {
-  const { id: r, selectedTabIndex: a } = b(), p = s.toArray(e).map((o, n) => c(o, { id: `${r}-${n}` })).filter((o, n) => n === a);
-  return /* @__PURE__ */ d.createElement("div", {
-    ...t
-  }, p);
-};
-m.propTypes = {
-  children: l.node.isRequired
-};
-const i = ({ id: e, ...t }) => {
-  const r = `${e}-tab`, a = `${e}-tabpanel`;
-  return /* @__PURE__ */ d.createElement("div", {
-    id: a,
+var P = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var b = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var c = (e, t, r) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, i = (e, t) => {
+  for (var r in t || (t = {}))
+    b.call(t, r) && c(e, r, t[r]);
+  if (n)
+    for (var r of n(t))
+      m.call(t, r) && c(e, r, t[r]);
+  return e;
+};
+var p = (e, t) => {
+  var r = {};
+  for (var a in e)
+    b.call(e, a) && t.indexOf(a) < 0 && (r[a] = e[a]);
+  if (e != null && n)
+    for (var a of n(e))
+      t.indexOf(a) < 0 && m.call(e, a) && (r[a] = e[a]);
+  return r;
+};
+import T, { Children as I, cloneElement as $ } from "react";
+import f from "prop-types";
+import { useTabs as h } from "./TabsContext.js";
+const v = (r) => {
+  var a = r, { children: e } = a, t = p(a, ["children"]);
+  const { id: o, selectedTabIndex: d } = h(), y = I.toArray(e).map((s, l) => $(s, { id: `${o}-${l}` })).filter((s, l) => l === d);
+  return /* @__PURE__ */ T.createElement("div", i({}, t), y);
+};
+v.propTypes = {
+  children: f.node.isRequired
+};
+const u = (r) => {
+  var a = r, { id: e } = a, t = p(a, ["id"]);
+  const o = `${e}-tab`, d = `${e}-tabpanel`;
+  return /* @__PURE__ */ T.createElement("div", i({
+    id: d,
     role: "tabpanel",
     tabIndex: 0,
-    "aria-labelledby": r,
-    ...t
-  });
+    "aria-labelledby": o
+  }, t));
 };
-i.defaultProps = {
+u.defaultProps = {
   id: void 0
 };
-i.propTypes = {
-  id: l.string
+u.propTypes = {
+  id: f.string
 };
 export {
-  i as TabPanel,
-  m as TabPanels
+  u as TabPanel,
+  v as TabPanels
 };

package/dist/Tabs/Tabs.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),K=require("prop-types"),q=require("styled-components"),_=require("./TabsContext.cjs"),D=require("../Typography/Typography.cjs"),x=require("../helpers/keyboardKeys.cjs"),w=require("./useTabsFocus.cjs"),m=require("./components.cjs"),C=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},d=C(v),l=C(K),R=C(q),j=R.default.button`
+"use strict";var O=Object.defineProperty;var v=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var _=(e,t,a)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,m=(e,t)=>{for(var a in t||(t={}))w.call(t,a)&&_(e,a,t[a]);if(v)for(var a of v(t))R.call(t,a)&&_(e,a,t[a]);return e};var D=(e,t)=>{var a={};for(var s in e)w.call(e,s)&&t.indexOf(s)<0&&(a[s]=e[s]);if(e!=null&&v)for(var s of v(e))t.indexOf(s)<0&&R.call(e,s)&&(a[s]=e[s]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),A=require("prop-types"),F=require("styled-components"),N=require("./TabsContext.cjs"),j=require("../Typography/Typography.cjs"),C=require("../helpers/keyboardKeys.cjs"),$=require("./useTabsFocus.cjs"),I=require("./components.cjs"),E=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=E(k),i=E(A),M=E(F),S=M.default.button`
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
-`,k=({children:n,...b})=>{const{id:h,selectedTabIndex:u,selectTabIndex:o,label:p,variant:f,onTabChange:g}=_.useTabs(),y=w.useTabsFocus(u,g),a=v.Children.toArray(n).map((t,i)=>v.cloneElement(t,{id:`${h}-${i}`,index:i,selectedTabIndex:u,onTabClick:()=>o(i),variant:f})),T=t=>{if(!a.every(r=>r.props.disabled))switch(t.key){case x.KeyboardKeys.RIGHT:{const r=u+1,e=s=>a[s].props.disabled?s===a.length-1?e(0):e(s+1):s,c=e(r>=a.length?0:r);o(c);break}case x.KeyboardKeys.LEFT:{const r=u-1,e=s=>a[s].props.disabled?e(s===0?a.length-1:s-1):s,c=e(r<0?a.length-1:r);o(c);break}case x.KeyboardKeys.HOME:{const r=a.findIndex(e=>!e.props.disabled);o(r);break}case x.KeyboardKeys.END:{const e=a.map((c,s)=>({isDisabled:c.props.disabled,index:s})).reverse().find(({isDisabled:c})=>!c);e&&o(e.index);break}}};return f==="simple"?d.default.createElement("div",{ref:y,role:"tablist","aria-label":p,onKeyDown:T,...b},a):d.default.createElement(m.DefaultTabsRow,{ref:y,role:"tablist",alignItems:"flex-end","aria-label":p,onKeyDown:T,...b},a)};k.propTypes={children:l.default.node.isRequired};const I=({disabled:n,id:b,children:h,variant:u,hasError:o,index:p,selectedTabIndex:f,onTabClick:g,...y})=>{const a=`${b}-tab`,T=`${b}-tabpanel`,t=p===f,i=()=>{n||g()};if(u==="simple"){let e;return o?e="danger600":t?e="primary600":e="neutral600",d.default.createElement(j,{id:a,role:"tab","aria-controls":t?T:void 0,tabIndex:t?0:-1,"aria-selected":t,type:"button",onClick:i,"aria-disabled":n,...y},d.default.createElement(m.SimpleTabBox,{padding:4,selected:t,hasError:o},d.default.createElement(D.Typography,{variant:"sigma",textColor:e},h)))}o&&console.warn('The "hasError" prop is only available for the "simple" variant.');const r=f-1===p;return d.default.createElement(m.DefaultTabButton,{id:a,role:"tab",type:"button","aria-controls":t?T:void 0,tabIndex:t?0:-1,"aria-selected":t,onClick:i,"aria-disabled":n,showRightBorder:r,...y},d.default.createElement(m.DefaultTabBox,{padding:t?4:3,background:t?"neutral0":"neutral100",selected:t},d.default.createElement(D.Typography,{fontWeight:"bold",textColor:t?"primary700":"neutral600"},h)))};I.defaultProps={disabled:!1,hasError:!1,id:void 0,index:void 0,onTabClick:void 0,selectedTabIndex:void 0,variant:void 0};I.propTypes={children:l.default.node.isRequired,disabled:l.default.bool,hasError:l.default.bool,id:l.default.string,index:l.default.number,onTabClick:l.default.func,selectedTabIndex:l.default.number,variant:l.default.oneOf(["simple"])};exports.Tab=I;exports.Tabs=k;
+`,P=a=>{var s=a,{children:e}=s,t=D(s,["children"]);const{id:y,selectedTabIndex:b,selectTabIndex:c,label:g,variant:T,onTabChange:q}=N.useTabs(),h=$.useTabsFocus(b,q),o=k.Children.toArray(e).map((r,p)=>k.cloneElement(r,{id:`${y}-${p}`,index:p,selectedTabIndex:b,onTabClick:()=>c(p),variant:T})),x=r=>{if(!o.every(l=>l.props.disabled))switch(r.key){case C.KeyboardKeys.RIGHT:{const l=b+1,n=d=>o[d].props.disabled?d===o.length-1?n(0):n(d+1):d,f=n(l>=o.length?0:l);c(f);break}case C.KeyboardKeys.LEFT:{const l=b-1,n=d=>o[d].props.disabled?n(d===0?o.length-1:d-1):d,f=n(l<0?o.length-1:l);c(f);break}case C.KeyboardKeys.HOME:{const l=o.findIndex(n=>!n.props.disabled);c(l);break}case C.KeyboardKeys.END:{const n=o.map((f,d)=>({isDisabled:f.props.disabled,index:d})).reverse().find(({isDisabled:f})=>!f);n&&c(n.index);break}}};return T==="simple"?u.default.createElement("div",m({ref:h,role:"tablist","aria-label":g,onKeyDown:x},t),o):u.default.createElement(I.DefaultTabsRow,m({ref:h,role:"tablist",alignItems:"flex-end","aria-label":g,onKeyDown:x},t),o)};P.propTypes={children:i.default.node.isRequired};const K=q=>{var h=q,{disabled:e,id:t,children:a,variant:s,hasError:y,index:b,selectedTabIndex:c,onTabClick:g}=h,T=D(h,["disabled","id","children","variant","hasError","index","selectedTabIndex","onTabClick"]);const o=`${t}-tab`,x=`${t}-tabpanel`,r=b===c,p=()=>{e||g()};if(s==="simple"){let n;return y?n="danger600":r?n="primary600":n="neutral600",u.default.createElement(S,m({id:o,role:"tab","aria-controls":r?x:void 0,tabIndex:r?0:-1,"aria-selected":r,type:"button",onClick:p,"aria-disabled":e},T),u.default.createElement(I.SimpleTabBox,{padding:4,selected:r,hasError:y},u.default.createElement(j.Typography,{variant:"sigma",textColor:n},a)))}y&&console.warn('The "hasError" prop is only available for the "simple" variant.');const l=c-1===b;return u.default.createElement(I.DefaultTabButton,m({id:o,role:"tab",type:"button","aria-controls":r?x:void 0,tabIndex:r?0:-1,"aria-selected":r,onClick:p,"aria-disabled":e,showRightBorder:l},T),u.default.createElement(I.DefaultTabBox,{padding:r?4:3,background:r?"neutral0":"neutral100",selected:r},u.default.createElement(j.Typography,{fontWeight:"bold",textColor:r?"primary700":"neutral600"},a)))};K.defaultProps={disabled:!1,hasError:!1,id:void 0,index:void 0,onTabClick:void 0,selectedTabIndex:void 0,variant:void 0};K.propTypes={children:i.default.node.isRequired,disabled:i.default.bool,hasError:i.default.bool,id:i.default.string,index:i.default.number,onTabClick:i.default.func,selectedTabIndex:i.default.number,variant:i.default.oneOf(["simple"])};exports.Tab=K;exports.Tabs=P;

package/dist/Tabs/Tabs.js

@@ -1,115 +1,133 @@
-import l, { Children as C, cloneElement as D } from "react";
-import i from "prop-types";
-import E from "styled-components";
-import { useTabs as k } from "./TabsContext.js";
-import { Typography as I } from "../Typography/Typography.js";
-import { KeyboardKeys as T } from "../helpers/keyboardKeys.js";
-import { useTabsFocus as w } from "./useTabsFocus.js";
-import { DefaultTabsRow as R, SimpleTabBox as B, DefaultTabButton as K, DefaultTabBox as P } from "./components.js";
-const A = E.button`
+var P = Object.defineProperty;
+var v = Object.getOwnPropertySymbols;
+var k = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var E = (e, t, a) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, y = (e, t) => {
+  for (var a in t || (t = {}))
+    k.call(t, a) && E(e, a, t[a]);
+  if (v)
+    for (var a of v(t))
+      w.call(t, a) && E(e, a, t[a]);
+  return e;
+};
+var C = (e, t) => {
+  var a = {};
+  for (var o in e)
+    k.call(e, o) && t.indexOf(o) < 0 && (a[o] = e[o]);
+  if (e != null && v)
+    for (var o of v(e))
+      t.indexOf(o) < 0 && w.call(e, o) && (a[o] = e[o]);
+  return a;
+};
+import c, { Children as A, cloneElement as N } from "react";
+import d from "prop-types";
+import O from "styled-components";
+import { useTabs as $ } from "./TabsContext.js";
+import { Typography as R } from "../Typography/Typography.js";
+import { KeyboardKeys as g } from "../helpers/keyboardKeys.js";
+import { useTabsFocus as W } from "./useTabsFocus.js";
+import { DefaultTabsRow as q, SimpleTabBox as F, DefaultTabButton as H, DefaultTabBox as _ } from "./components.js";
+const G = O.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 = w(c, y), a = C.toArray(b).map(
-    (t, s) => D(t, {
-      id: `${h}-${s}`,
-      index: s,
-      selectedTabIndex: c,
-      onTabClick: () => o(s),
-      variant: u
+`, L = (a) => {
+  var o = a, { children: e } = o, t = C(o, ["children"]);
+  const { id: f, selectedTabIndex: p, selectTabIndex: b, label: I, variant: x, onTabChange: D } = $(), h = W(p, D), i = A.toArray(e).map(
+    (r, m) => N(r, {
+      id: `${f}-${m}`,
+      index: m,
+      selectedTabIndex: p,
+      onTabClick: () => b(m),
+      variant: x
     })
-  ), x = (t) => {
-    if (!a.every((n) => n.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);
+  ), T = (r) => {
+    if (!i.every((l) => l.props.disabled))
+      switch (r.key) {
+        case g.RIGHT: {
+          const l = p + 1, n = (s) => i[s].props.disabled ? s === i.length - 1 ? n(0) : n(s + 1) : s, u = n(l >= i.length ? 0 : l);
+          b(u);
           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 g.LEFT: {
+          const l = p - 1, n = (s) => i[s].props.disabled ? n(s === 0 ? i.length - 1 : s - 1) : s, u = n(l < 0 ? i.length - 1 : l);
+          b(u);
           break;
         }
-        case T.HOME: {
-          const n = a.findIndex((e) => !e.props.disabled);
-          o(n);
+        case g.HOME: {
+          const l = i.findIndex((n) => !n.props.disabled);
+          b(l);
           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 g.END: {
+          const n = i.map((u, s) => ({ isDisabled: u.props.disabled, index: s })).reverse().find(({ isDisabled: u }) => !u);
+          n && b(n.index);
           break;
         }
       }
   };
-  return u === "simple" ? /* @__PURE__ */ l.createElement("div", {
-    ref: f,
+  return x === "simple" ? /* @__PURE__ */ c.createElement("div", y({
+    ref: h,
     role: "tablist",
-    "aria-label": m,
-    onKeyDown: x,
-    ...p
-  }, a) : /* @__PURE__ */ l.createElement(R, {
-    ref: f,
+    "aria-label": I,
+    onKeyDown: T
+  }, t), i) : /* @__PURE__ */ c.createElement(q, y({
+    ref: h,
     role: "tablist",
     alignItems: "flex-end",
-    "aria-label": m,
-    onKeyDown: x,
-    ...p
-  }, a);
+    "aria-label": I,
+    onKeyDown: T
+  }, t), i);
 };
-N.propTypes = {
-  children: i.node.isRequired
+L.propTypes = {
+  children: d.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();
+const B = (D) => {
+  var h = D, { disabled: e, id: t, children: a, variant: o, hasError: f, index: p, selectedTabIndex: b, onTabClick: I } = h, x = C(h, ["disabled", "id", "children", "variant", "hasError", "index", "selectedTabIndex", "onTabClick"]);
+  const i = `${t}-tab`, T = `${t}-tabpanel`, r = p === b, m = () => {
+    e || I();
   };
-  if (c === "simple") {
-    let e;
-    return o ? e = "danger600" : t ? e = "primary600" : e = "neutral600", /* @__PURE__ */ l.createElement(A, {
-      id: a,
+  if (o === "simple") {
+    let n;
+    return f ? n = "danger600" : r ? n = "primary600" : n = "neutral600", /* @__PURE__ */ c.createElement(G, y({
+      id: i,
       role: "tab",
-      "aria-controls": t ? x : void 0,
-      tabIndex: t ? 0 : -1,
-      "aria-selected": t,
+      "aria-controls": r ? T : void 0,
+      tabIndex: r ? 0 : -1,
+      "aria-selected": r,
       type: "button",
-      onClick: s,
-      "aria-disabled": b,
-      ...f
-    }, /* @__PURE__ */ l.createElement(B, {
+      onClick: m,
+      "aria-disabled": e
+    }, x), /* @__PURE__ */ c.createElement(F, {
       padding: 4,
-      selected: t,
-      hasError: o
-    }, /* @__PURE__ */ l.createElement(I, {
+      selected: r,
+      hasError: f
+    }, /* @__PURE__ */ c.createElement(R, {
       variant: "sigma",
-      textColor: e
-    }, h)));
+      textColor: n
+    }, a)));
   }
-  o && console.warn('The "hasError" prop is only available for the "simple" variant.');
-  const n = u - 1 === m;
-  return /* @__PURE__ */ l.createElement(K, {
-    id: a,
+  f && console.warn('The "hasError" prop is only available for the "simple" variant.');
+  const l = b - 1 === p;
+  return /* @__PURE__ */ c.createElement(H, y({
+    id: i,
     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(P, {
-    padding: t ? 4 : 3,
-    background: t ? "neutral0" : "neutral100",
-    selected: t
-  }, /* @__PURE__ */ l.createElement(I, {
+    "aria-controls": r ? T : void 0,
+    tabIndex: r ? 0 : -1,
+    "aria-selected": r,
+    onClick: m,
+    "aria-disabled": e,
+    showRightBorder: l
+  }, x), /* @__PURE__ */ c.createElement(_, {
+    padding: r ? 4 : 3,
+    background: r ? "neutral0" : "neutral100",
+    selected: r
+  }, /* @__PURE__ */ c.createElement(R, {
     fontWeight: "bold",
-    textColor: t ? "primary700" : "neutral600"
-  }, h)));
+    textColor: r ? "primary700" : "neutral600"
+  }, a)));
 };
-v.defaultProps = {
+B.defaultProps = {
   disabled: !1,
   hasError: !1,
   id: void 0,
@@ -118,17 +136,17 @@ v.defaultProps = {
   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"])
+B.propTypes = {
+  children: d.node.isRequired,
+  disabled: d.bool,
+  hasError: d.bool,
+  id: d.string,
+  index: d.number,
+  onTabClick: d.func,
+  selectedTabIndex: d.number,
+  variant: d.oneOf(["simple"])
 };
 export {
-  v as Tab,
-  N as Tabs
+  B as Tab,
+  L as Tabs
 };

package/dist/Tabs/useTabsFocus.cjs

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

package/dist/Tabs/useTabsFocus.js

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

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

package/dist/Tag/Tag.js

@@ -1,60 +1,83 @@
-import t from "react";
-import a from "prop-types";
-import n from "styled-components";
-import { Typography as g } from "../Typography/Typography.js";
-import { Box as p } from "../Box/Box.js";
-import { Flex as l } from "../Flex/Flex.js";
-const u = n(p)`
+var x = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var s = (r, o, e) => o in r ? x(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, g = (r, o) => {
+  for (var e in o || (o = {}))
+    c.call(o, e) && s(r, e, o[e]);
+  if (i)
+    for (var e of i(o))
+      m.call(o, e) && s(r, e, o[e]);
+  return r;
+};
+var n = (r, o) => {
+  var e = {};
+  for (var t in r)
+    c.call(r, t) && o.indexOf(t) < 0 && (e[t] = r[t]);
+  if (r != null && i)
+    for (var t of i(r))
+      o.indexOf(t) < 0 && m.call(r, t) && (e[t] = r[t]);
+  return e;
+};
+import a from "react";
+import l from "prop-types";
+import f from "styled-components";
+import { Typography as $ } from "../Typography/Typography.js";
+import { Box as h } from "../Box/Box.js";
+import { Flex as u } from "../Flex/Flex.js";
+const k = f(h)`
   svg {
     height: ${8 / 16}rem;
     width: ${8 / 16}rem;
   }
 
   svg path {
-    fill: ${({ theme: r, ...o }) => o["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600};
+    fill: ${(e) => {
+  var t = e, { theme: r } = t, o = n(t, ["theme"]);
+  return o["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600;
+}};
   }
-`, f = n(g)`
+`, C = f($)`
   border-right: 1px solid ${({ theme: r, disabled: o }) => o ? r.colors.neutral300 : r.colors.primary200};
   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);
+`, p = (E) => {
+  var d = E, { children: r, icon: o, disabled: e, onClick: t } = d, y = n(d, ["children", "icon", "disabled", "onClick"]);
+  const T = (b) => {
+    e || t(b);
   };
-  return /* @__PURE__ */ t.createElement(u, {
+  return /* @__PURE__ */ a.createElement(k, g({
     as: "button",
     background: e ? "neutral200" : "primary100",
     color: e ? "neutral700" : "primary600",
     paddingLeft: 3,
     paddingRight: 3,
-    onClick: c,
+    onClick: T,
     "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, {
+    height: `${32 / 16}rem`
+  }, y), /* @__PURE__ */ a.createElement(u, null, /* @__PURE__ */ a.createElement(C, {
     disabled: e,
     variant: "pi",
     fontWeight: "bold",
     as: "span"
-  }, r), /* @__PURE__ */ t.createElement(p, {
+  }, r), /* @__PURE__ */ a.createElement(h, {
     paddingLeft: 2
-  }, /* @__PURE__ */ t.createElement(l, null, o))));
+  }, /* @__PURE__ */ a.createElement(u, null, o))));
 };
-i.displayName = "Tag";
-i.defaultProps = {
+p.displayName = "Tag";
+p.defaultProps = {
   disabled: !1,
   onClick: void 0
 };
-i.propTypes = {
-  children: a.node.isRequired,
-  disabled: a.bool,
-  icon: a.element.isRequired,
-  onClick: a.func
+p.propTypes = {
+  children: l.node.isRequired,
+  disabled: l.bool,
+  icon: l.element.isRequired,
+  onClick: l.func
 };
 export {
-  i as Tag
+  p as Tag
 };