@strapi/design-system 0.0.0-jsoninput.0

package/dist/Tabs/TabGroup.js

@@ -0,0 +1,55 @@
+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)));
+});
+s.displayName = "TabGroup";
+s.defaultProps = {
+  id: void 0,
+  initialSelectedTabIndex: void 0,
+  onTabChange() {
+  },
+  variant: void 0
+};
+s.propTypes = {
+  children: d.node.isRequired,
+  id: d.string,
+  initialSelectedTabIndex: d.number,
+  label: d.string.isRequired,
+  onTabChange: d.func,
+  variant: d.oneOf(["simple"])
+};
+export {
+  s as TabGroup
+};

package/dist/Tabs/TabPanels.cjs

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,51 @@
+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": o
+  }, t));
+};
+u.defaultProps = {
+  id: void 0
+};
+u.propTypes = {
+  id: f.string
+};
+export {
+  u as TabPanel,
+  v as TabPanels
+};

package/dist/Tabs/Tabs.cjs

@@ -0,0 +1,5 @@
+"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;
+  }
+`,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

@@ -0,0 +1,152 @@
+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;
+  }
+`, 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
+    })
+  ), 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 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 g.HOME: {
+          const l = i.findIndex((n) => !n.props.disabled);
+          b(l);
+          break;
+        }
+        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 x === "simple" ? /* @__PURE__ */ c.createElement("div", y({
+    ref: h,
+    role: "tablist",
+    "aria-label": I,
+    onKeyDown: T
+  }, t), i) : /* @__PURE__ */ c.createElement(q, y({
+    ref: h,
+    role: "tablist",
+    alignItems: "flex-end",
+    "aria-label": I,
+    onKeyDown: T
+  }, t), i);
+};
+L.propTypes = {
+  children: d.node.isRequired
+};
+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 (o === "simple") {
+    let n;
+    return f ? n = "danger600" : r ? n = "primary600" : n = "neutral600", /* @__PURE__ */ c.createElement(G, y({
+      id: i,
+      role: "tab",
+      "aria-controls": r ? T : void 0,
+      tabIndex: r ? 0 : -1,
+      "aria-selected": r,
+      type: "button",
+      onClick: m,
+      "aria-disabled": e
+    }, x), /* @__PURE__ */ c.createElement(F, {
+      padding: 4,
+      selected: r,
+      hasError: f
+    }, /* @__PURE__ */ c.createElement(R, {
+      variant: "sigma",
+      textColor: n
+    }, 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": 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: r ? "primary700" : "neutral600"
+  }, a)));
+};
+B.defaultProps = {
+  disabled: !1,
+  hasError: !1,
+  id: void 0,
+  index: void 0,
+  onTabClick: void 0,
+  selectedTabIndex: void 0,
+  variant: void 0
+};
+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 {
+  B as Tab,
+  L as Tabs
+};

package/dist/Tabs/TabsContext.cjs

@@ -0,0 +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;

package/dist/Tabs/TabsContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+const o = t(), n = () => e(o);
+export {
+  o as TabsContext,
+  n as useTabs
+};

package/dist/Tabs/components.cjs

@@ -0,0 +1,43 @@
+"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)`
+  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`
+  border: none;
+  background: transparent;
+  padding: 0;
+
+  & + & > ${o} {
+    border-left: 1px solid ${({theme:e})=>e.colors.neutral150};
+  }
+
+  ${o} {
+    border-right: ${({theme:e,showRightBorder:r})=>r?`1px solid ${e.colors.neutral150}`:"none"};
+  }
+
+  // Hack preventing the outline from being overflow by the following tab
+  outline-offset: -2px;
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`,b=l.default(s.Flex)`
+  & > * {
+    flex: 1;
+  }
+
+  & ${t}:first-of-type ${o} {
+    border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 0`};
+  }
+
+  & ${t}:last-of-type ${o} {
+    border-radius: ${({theme:e})=>`0 ${e.borderRadius} 0 0`};
+  }
+
+  & ${t}[aria-selected="true"] ${o} {
+    border-radius: ${({theme:e})=>`${e.borderRadius} ${e.borderRadius} 0 0`};
+    border-left: none;
+    border-right: none;
+  }
+`;exports.DefaultTabBox=o;exports.DefaultTabButton=t;exports.DefaultTabsRow=b;exports.SimpleTabBox=i;

package/dist/Tabs/components.js

@@ -0,0 +1,52 @@
+import t from "styled-components";
+import { Box as n } from "../Box/Box.js";
+import { Flex as l } from "../Flex/Flex.js";
+const u = t(n)`
+  border-bottom: 2px solid
+    ${({ theme: r, selected: o, hasError: d }) => o ? d ? r.colors.danger600 : r.colors.primary600 : "transparent"};
+`, e = t(n)`
+  border-bottom: 1px solid ${({ theme: r, selected: o }) => o ? r.colors.neutral0 : r.colors.neutral150};
+`, a = t.button`
+  border: none;
+  background: transparent;
+  padding: 0;
+
+  & + & > ${e} {
+    border-left: 1px solid ${({ theme: r }) => r.colors.neutral150};
+  }
+
+  ${e} {
+    border-right: ${({ theme: r, showRightBorder: o }) => o ? `1px solid ${r.colors.neutral150}` : "none"};
+  }
+
+  // Hack preventing the outline from being overflow by the following tab
+  outline-offset: -2px;
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`, $ = t(l)`
+  & > * {
+    flex: 1;
+  }
+
+  & ${a}:first-of-type ${e} {
+    border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 0`};
+  }
+
+  & ${a}:last-of-type ${e} {
+    border-radius: ${({ theme: r }) => `0 ${r.borderRadius} 0 0`};
+  }
+
+  & ${a}[aria-selected="true"] ${e} {
+    border-radius: ${({ theme: r }) => `${r.borderRadius} ${r.borderRadius} 0 0`};
+    border-left: none;
+    border-right: none;
+  }
+`;
+export {
+  e as DefaultTabBox,
+  a as DefaultTabButton,
+  $ as DefaultTabsRow,
+  u as SimpleTabBox
+};

package/dist/Tabs/index.cjs

@@ -0,0 +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;

package/dist/Tabs/index.js

@@ -0,0 +1,10 @@
+import { Tab as r, Tabs as b } from "./Tabs.js";
+import { TabPanel as T, TabPanels as p } from "./TabPanels.js";
+import { TabGroup as m } from "./TabGroup.js";
+export {
+  r as Tab,
+  m as TabGroup,
+  T as TabPanel,
+  p as TabPanels,
+  b as Tabs
+};

package/dist/Tabs/useTabsFocus.cjs

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,17 @@
+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));
+      }
+      r.current || (r.current = !0);
+    }
+  }, [t, u]), e;
+};
+export {
+  i as useTabsFocus
+};

package/dist/Tag/Tag.cjs

@@ -0,0 +1,14 @@
+"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: ${t=>{var a=t,{theme:e}=a,r=s(a,["theme"]);return r["aria-disabled"]?e.colors.neutral600:e.colors.primary600}};
+  }
+`,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]};
+`,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

@@ -0,0 +1,83 @@
+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: ${(e) => {
+  var t = e, { theme: r } = t, o = n(t, ["theme"]);
+  return o["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600;
+}};
+  }
+`, 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]};
+`, 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__ */ a.createElement(k, g({
+    as: "button",
+    background: e ? "neutral200" : "primary100",
+    color: e ? "neutral700" : "primary600",
+    paddingLeft: 3,
+    paddingRight: 3,
+    onClick: T,
+    "aria-disabled": e,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: e ? "neutral300" : "primary200",
+    hasRadius: !0,
+    height: `${32 / 16}rem`
+  }, y), /* @__PURE__ */ a.createElement(u, null, /* @__PURE__ */ a.createElement(C, {
+    disabled: e,
+    variant: "pi",
+    fontWeight: "bold",
+    as: "span"
+  }, r), /* @__PURE__ */ a.createElement(h, {
+    paddingLeft: 2
+  }, /* @__PURE__ */ a.createElement(u, null, o))));
+};
+p.displayName = "Tag";
+p.defaultProps = {
+  disabled: !1,
+  onClick: void 0
+};
+p.propTypes = {
+  children: l.node.isRequired,
+  disabled: l.bool,
+  icon: l.element.isRequired,
+  onClick: l.func
+};
+export {
+  p as Tag
+};

package/dist/Tag/index.cjs

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

package/dist/Tag/index.js

@@ -0,0 +1,4 @@
+import { Tag as a } from "./Tag.js";
+export {
+  a as Tag
+};

package/dist/TextButton/TextButton.cjs

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

package/dist/TextButton/TextButton.js

@@ -0,0 +1,102 @@
+var T = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var f = (e, r, t) => r in e ? T(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, g = (e, r) => {
+  for (var t in r || (r = {}))
+    c.call(r, t) && f(e, t, r[t]);
+  if (i)
+    for (var t of i(r))
+      u.call(r, t) && f(e, t, r[t]);
+  return e;
+};
+var y = (e, r) => {
+  var t = {};
+  for (var o in e)
+    c.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && i)
+    for (var o of i(e))
+      r.indexOf(o) < 0 && u.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import a from "react";
+import n from "prop-types";
+import v, { keyframes as k } from "styled-components";
+import $ from "@strapi/icons/Loader";
+import { Box as b } from "../Box/Box.js";
+import { Typography as B } from "../Typography/Typography.js";
+import { Flex as C } from "../Flex/Flex.js";
+import { buttonFocusStyle as R } from "../themes/utils.js";
+const L = k`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`, w = v.div`
+  animation: ${L} 2s infinite linear;
+  will-change: transform;
+`, F = v(C)`
+  background: transparent;
+  border: none;
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    svg path {
+      fill: ${({ theme: e }) => e.colors.neutral600};
+    }
+  }
+
+  svg {
+    display: flex;
+    font-size: ${10 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme: e }) => e.colors.primary600};
+  }
+
+  ${R}
+`, s = a.forwardRef(
+  (I, x) => {
+    var p = I, { children: e, startIcon: r, endIcon: t, onClick: o, disabled: d, loading: l } = p, h = y(p, ["children", "startIcon", "endIcon", "onClick", "disabled", "loading"]);
+    const E = o && !d ? o : void 0, m = d || l;
+    return /* @__PURE__ */ a.createElement(F, g({
+      ref: x,
+      "aria-disabled": m,
+      onClick: E,
+      as: "button",
+      type: "button"
+    }, h), (r || l) && /* @__PURE__ */ a.createElement(b, {
+      as: "span",
+      paddingRight: 2,
+      "aria-hidden": !0
+    }, l ? /* @__PURE__ */ a.createElement(w, null, /* @__PURE__ */ a.createElement($, null)) : r), /* @__PURE__ */ a.createElement(B, {
+      variant: "pi",
+      textColor: m ? "neutral600" : "primary600"
+    }, e), t && /* @__PURE__ */ a.createElement(b, {
+      as: "span",
+      paddingLeft: 2,
+      "aria-hidden": !0
+    }, t));
+  }
+);
+s.displayName = "TextButton";
+s.defaultProps = {
+  disabled: !1,
+  startIcon: void 0,
+  endIcon: void 0,
+  loading: !1,
+  onClick: void 0
+};
+s.propTypes = {
+  children: n.node.isRequired,
+  disabled: n.bool,
+  endIcon: n.element,
+  loading: n.bool,
+  onClick: n.func,
+  startIcon: n.element
+};
+export {
+  s as TextButton
+};

package/dist/TextButton/index.cjs

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