@strapi/design-system 0.0.0-typescript.0 → 0.0.0-typescript.2

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.d.ts

@@ -0,0 +1,51 @@
+export function Tabs({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): JSX.Element;
+export namespace Tabs {
+    namespace propTypes {
+        const children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    }
+}
+export function Tab({ disabled, id, children, variant, hasError, index, selectedTabIndex, onTabClick, ...props }: {
+    [x: string]: any;
+    disabled: any;
+    id: any;
+    children: any;
+    variant: any;
+    hasError: any;
+    index: any;
+    selectedTabIndex: any;
+    onTabClick: any;
+}): JSX.Element;
+export namespace Tab {
+    export namespace defaultProps {
+        const disabled: boolean;
+        const hasError: boolean;
+        const id: undefined;
+        const index: undefined;
+        const onTabClick: undefined;
+        const selectedTabIndex: undefined;
+        const variant: undefined;
+    }
+    export namespace propTypes_1 {
+        const children_1: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        export { children_1 as children };
+        const disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
+        const hasError_1: PropTypes.Requireable<boolean>;
+        export { hasError_1 as hasError };
+        const id_1: PropTypes.Requireable<string>;
+        export { id_1 as id };
+        const index_1: PropTypes.Requireable<number>;
+        export { index_1 as index };
+        const onTabClick_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onTabClick_1 as onTabClick };
+        const selectedTabIndex_1: PropTypes.Requireable<number>;
+        export { selectedTabIndex_1 as selectedTabIndex };
+        const variant_1: PropTypes.Requireable<string>;
+        export { variant_1 as variant };
+    }
+    export { propTypes_1 as propTypes };
+}
+import PropTypes from "prop-types";

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/TabsContext.d.ts

@@ -0,0 +1,2 @@
+export const TabsContext: import("react").Context<any>;
+export function useTabs(): any;

package/dist/Tabs/components.d.ts

@@ -0,0 +1,6 @@
+/** Simple variant */
+export const SimpleTabBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box").BoxProps<HTMLDivElement>, never>;
+/** Default variant */
+export const DefaultTabBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box").BoxProps<HTMLDivElement>, never>;
+export const DefaultTabButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export const DefaultTabsRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Flex").FlexProps<HTMLDivElement>, never>;

package/dist/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Tabs";
+export * from "./TabPanels";
+export * from "./TabGroup";

package/dist/Tabs/useTabsFocus.d.ts

@@ -0,0 +1 @@
+export function useTabsFocus(selectedTabIndex: any, onTabChange: any): import("react").MutableRefObject<null>;

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.d.ts

@@ -0,0 +1,23 @@
+export function Tag({ children, icon, disabled, onClick, ...props }: {
+    [x: string]: any;
+    children: any;
+    icon: any;
+    disabled: any;
+    onClick: any;
+}): JSX.Element;
+export namespace Tag {
+    const displayName: string;
+    namespace defaultProps {
+        const disabled: boolean;
+        const onClick: undefined;
+    }
+    namespace propTypes {
+        export const children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        const disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
+        export const icon: PropTypes.Validator<PropTypes.ReactElementLike>;
+        const onClick_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onClick_1 as onClick };
+    }
+}
+import PropTypes from "prop-types";

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
 };

package/dist/Tag/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tag";

package/dist/TextButton/TextButton.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),b=require("prop-types"),f=require("styled-components"),h=require("@strapi/icons/Loader"),c=require("../Box/Box.cjs"),v=require("../Typography/Typography.cjs"),T=require("../Flex/Flex.cjs"),_=require("../themes/utils.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(x),a=o(b),p=o(f),q=o(h),B=f.keyframes`
+"use strict";var v=Object.defineProperty,_=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var n=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var c=(e,t,r)=>t in e?v(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,f=(e,t)=>{for(var r in t||(t={}))d.call(t,r)&&c(e,r,t[r]);if(n)for(var r of n(t))p.call(t,r)&&c(e,r,t[r]);return e},x=(e,t)=>_(e,F(t));var y=(e,t)=>{var r={};for(var s in e)d.call(e,s)&&t.indexOf(s)<0&&(r[s]=e[s]);if(e!=null&&n)for(var s of n(e))t.indexOf(s)<0&&p.call(e,s)&&(r[s]=e[s]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),R=require("react"),g=require("styled-components"),$=require("@strapi/icons"),h=require("../Box/Box.cjs"),L=require("../Typography/Typography.cjs"),k=require("../Flex/Flex.cjs"),S=require("../themes/utils.cjs"),m=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},w=m(R),j=m(g),C=g.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,j=p.default.div`
-  animation: ${B} 2s infinite linear;
+`,D=j.default.div`
+  animation: ${C} 2s infinite linear;
   will-change: transform;
-`,E=p.default(T.Flex)`
+`,M=j.default(k.Flex)`
   background: transparent;
   border: none;
 
@@ -28,5 +28,5 @@
     fill: ${({theme:e})=>e.colors.primary600};
   }
 
-  ${_.buttonFocusStyle}
-`,r=t.default.forwardRef(({children:e,startIcon:l,endIcon:s,onClick:d,disabled:i,loading:n,...y},m)=>{const g=d&&!i?d:void 0,u=i||n;return t.default.createElement(E,{ref:m,"aria-disabled":u,onClick:g,as:"button",type:"button",...y},(l||n)&&t.default.createElement(c.Box,{as:"span",paddingRight:2,"aria-hidden":!0},n?t.default.createElement(j,null,t.default.createElement(q.default,null)):l),t.default.createElement(v.Typography,{variant:"pi",textColor:u?"neutral600":"primary600"},e),s&&t.default.createElement(c.Box,{as:"span",paddingLeft:2,"aria-hidden":!0},s))});r.displayName="TextButton";r.defaultProps={disabled:!1,startIcon:void 0,endIcon:void 0,loading:!1,onClick:void 0};r.propTypes={children:a.default.node.isRequired,disabled:a.default.bool,endIcon:a.default.element,loading:a.default.bool,onClick:a.default.func,startIcon:a.default.element};exports.TextButton=r;
+  ${S.buttonFocusStyle}
+`,b=w.default.forwardRef((W,T)=>{var l=W,{children:e,startIcon:t,endIcon:r,onClick:s,disabled:i=!1,loading:o=!1}=l,B=y(l,["children","startIcon","endIcon","onClick","disabled","loading"]);const q=s&&!i?s:void 0,u=i||o;return a.jsxs(M,x(f({ref:T,"aria-disabled":u,onClick:q,as:"button",type:"button"},B),{children:[(t||o)&&a.jsx(h.Box,{as:"span",paddingRight:2,"aria-hidden":!0,children:o?a.jsx(D,{children:a.jsx($.Loader,{})}):t}),a.jsx(L.Typography,{variant:"pi",textColor:u?"neutral600":"primary600",children:e}),r&&a.jsx(h.Box,{as:"span",paddingLeft:2,"aria-hidden":!0,children:r})]}))});b.displayName="TextButton";exports.TextButton=b;

package/dist/TextButton/TextButton.d.ts

@@ -0,0 +1,16 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { FlexProps } from '../Flex';
+export type TextButtonProps = FlexProps<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & {
+    disabled?: boolean;
+    endIcon?: React.ReactNode;
+    loading?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    startIcon?: React.ReactNode;
+};
+export declare const TextButton: React.ForwardRefExoticComponent<FlexProps<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    disabled?: boolean | undefined;
+    endIcon?: React.ReactNode;
+    loading?: boolean | undefined;
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    startIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;