@strapi/design-system 1.7.0-alpha.5 → 1.7.1

package/dist/SubNav/SubNavSection.js

@@ -1,43 +1,50 @@
-import e, { useState as f, Children as h } from "react";
-import t from "prop-types";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { useState as u, Children as f } from "react";
+import r from "prop-types";
 import b from "styled-components";
-import { SubNavSectionLabel as E } from "./SubNavSectionLabel.js";
-import { Badge as v } from "../Badge/Badge.js";
-import { Box as l } from "../Box/Box.js";
-import { Flex as S } from "../Flex/Flex.js";
-import { useId as C } from "../hooks/useId.js";
-const k = b(l)`
+import { SubNavSectionLabel as v } from "./SubNavSectionLabel.js";
+import { useId as x } from "../hooks/useId.js";
+import { Box as d } from "../Box/Box.js";
+import { Flex as C } from "../Flex/Flex.js";
+import { Badge as S } from "../Badge/Badge.js";
+const k = b(d)`
   svg {
     height: ${4 / 16}rem;
     path {
-      fill: ${({ theme: r }) => r.colors.neutral500};
+      fill: ${({ theme: i }) => i.colors.neutral500};
     }
   }
-`, p = ({ collapsable: r, label: d, badgeLabel: o, children: s, id: m }) => {
-  const [n, c] = f(!0), a = C(m), u = () => {
-    c((i) => !i);
-  };
-  return /* @__PURE__ */ e.createElement(S, { direction: "column", alignItems: "stretch", gap: 1 }, /* @__PURE__ */ e.createElement(k, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4 }, /* @__PURE__ */ e.createElement(l, { position: "relative", paddingRight: o ? 6 : 0 }, /* @__PURE__ */ e.createElement(
-    E,
-    {
-      onClick: u,
-      ariaExpanded: n,
-      ariaControls: a,
-      collapsable: r,
-      label: d
-    }
-  ), o && /* @__PURE__ */ e.createElement(
-    v,
-    {
-      backgroundColor: "neutral150",
-      textColor: "neutral600",
-      position: "absolute",
-      right: 0,
-      top: "50%",
-      transform: "translateY(-50%)"
-    },
-    o
-  ))), (!r || n) && /* @__PURE__ */ e.createElement("ol", { id: a }, h.map(s, (i, g) => /* @__PURE__ */ e.createElement("li", { key: g }, i))));
+`, p = ({ collapsable: i, label: s, badgeLabel: t, children: c, id: m }) => {
+  const [n, h] = u(!0), l = x(m);
+  return /* @__PURE__ */ a(C, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    /* @__PURE__ */ o(k, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ a(d, { position: "relative", paddingRight: t ? 6 : 0, children: [
+      /* @__PURE__ */ o(
+        v,
+        {
+          onClick: () => {
+            h((e) => !e);
+          },
+          ariaExpanded: n,
+          ariaControls: l,
+          collapsable: i,
+          label: s
+        }
+      ),
+      t && /* @__PURE__ */ o(
+        S,
+        {
+          backgroundColor: "neutral150",
+          textColor: "neutral600",
+          position: "absolute",
+          right: 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          children: t
+        }
+      )
+    ] }) }),
+    (!i || n) && /* @__PURE__ */ o("ol", { id: l, children: f.map(c, (e, g) => /* @__PURE__ */ o("li", { children: e }, g)) })
+  ] });
 };
 p.defaultProps = {
   badgeLabel: null,
@@ -46,11 +53,11 @@ p.defaultProps = {
   id: void 0
 };
 p.propTypes = {
-  badgeLabel: t.string,
-  children: t.node,
-  collapsable: t.bool,
-  id: t.string,
-  label: t.string.isRequired
+  badgeLabel: r.string,
+  children: r.node,
+  collapsable: r.bool,
+  id: r.string,
+  label: r.string.isRequired
 };
 export {
   p as SubNavSection

package/dist/SubNav/SubNavSectionLabel.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),g=require("@strapi/icons"),y=require("prop-types"),b=require("styled-components"),u=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs"),s=require("../Typography/Typography.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(f),a=r(y),i=r(b),d=i.default(x.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const p=require("@strapi/icons"),r=require("prop-types"),c=require("styled-components"),x=require("../Flex/Flex.cjs"),i=require("../Box/Box.cjs"),s=require("../Typography/Typography.cjs"),l=c(x.Flex)`
   border: none;
   padding: 0;
   background: transparent;
-`,m=i.default.div`
+`,g=c.div`
   display: flex;
   align-items: center;
-  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,o=({collapsable:e,label:l,onClick:c,ariaExpanded:n,ariaControls:p})=>e?t.default.createElement(d,{as:"button",onClick:c,"aria-expanded":n,"aria-controls":p,textAlign:"left"},t.default.createElement(u.Box,{paddingRight:1},t.default.createElement(s.Typography,{variant:"sigma",textColor:"neutral600"},l)),e&&t.default.createElement(m,{rotated:n},t.default.createElement(g.CarretDown,{"aria-hidden":!0}))):t.default.createElement(d,null,t.default.createElement(u.Box,{paddingRight:1},t.default.createElement(s.Typography,{variant:"sigma",textColor:"neutral600"},l)));o.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};o.propTypes={ariaControls:a.default.string,ariaExpanded:a.default.bool,collapsable:a.default.bool,label:a.default.string.isRequired,onClick:a.default.func};exports.SubNavSectionLabel=o;
+  transform: rotateX(${({rotated:n})=>n?"0deg":"180deg"});
+`,o=({collapsable:n,label:t,onClick:d,ariaExpanded:a,ariaControls:u})=>n?e.jsxs(l,{as:"button",onClick:d,"aria-expanded":a,"aria-controls":u,textAlign:"left",children:[e.jsx(i.Box,{paddingRight:1,children:e.jsx(s.Typography,{variant:"sigma",textColor:"neutral600",children:t})}),n&&e.jsx(g,{rotated:a,children:e.jsx(p.CarretDown,{"aria-hidden":!0})})]}):e.jsx(l,{children:e.jsx(i.Box,{paddingRight:1,children:e.jsx(s.Typography,{variant:"sigma",textColor:"neutral600",children:t})})});o.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};o.propTypes={ariaControls:r.string,ariaExpanded:r.bool,collapsable:r.bool,label:r.string.isRequired,onClick:r.func};exports.SubNavSectionLabel=o;

package/dist/SubNav/SubNavSectionLabel.js

@@ -1,44 +1,47 @@
-import e from "react";
-import { CarretDown as s } from "@strapi/icons";
-import r from "prop-types";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import "react";
+import { CarretDown as g } from "@strapi/icons";
+import o from "prop-types";
 import p from "styled-components";
-import { Box as n } from "../Box/Box.js";
-import { Flex as u } from "../Flex/Flex.js";
-import { Typography as l } from "../Typography/Typography.js";
-const i = p(u)`
+import { Flex as f } from "../Flex/Flex.js";
+import { Box as a } from "../Box/Box.js";
+import { Typography as i } from "../Typography/Typography.js";
+const l = p(f)`
   border: none;
   padding: 0;
   background: transparent;
-`, f = p.div`
+`, u = p.div`
   display: flex;
   align-items: center;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, m = ({ collapsable: t, label: a, onClick: d, ariaExpanded: o, ariaControls: c }) => t ? /* @__PURE__ */ e.createElement(
-  i,
+`, d = ({ collapsable: t, label: e, onClick: s, ariaExpanded: n, ariaControls: c }) => t ? /* @__PURE__ */ m(
+  l,
   {
     as: "button",
-    onClick: d,
-    "aria-expanded": o,
+    onClick: s,
+    "aria-expanded": n,
     "aria-controls": c,
-    textAlign: "left"
-  },
-  /* @__PURE__ */ e.createElement(n, { paddingRight: 1 }, /* @__PURE__ */ e.createElement(l, { variant: "sigma", textColor: "neutral600" }, a)),
-  t && /* @__PURE__ */ e.createElement(f, { rotated: o }, /* @__PURE__ */ e.createElement(s, { "aria-hidden": !0 }))
-) : /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(n, { paddingRight: 1 }, /* @__PURE__ */ e.createElement(l, { variant: "sigma", textColor: "neutral600" }, a)));
-m.defaultProps = {
+    textAlign: "left",
+    children: [
+      /* @__PURE__ */ r(a, { paddingRight: 1, children: /* @__PURE__ */ r(i, { variant: "sigma", textColor: "neutral600", children: e }) }),
+      t && /* @__PURE__ */ r(u, { rotated: n, children: /* @__PURE__ */ r(g, { "aria-hidden": !0 }) })
+    ]
+  }
+) : /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(a, { paddingRight: 1, children: /* @__PURE__ */ r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
+d.defaultProps = {
   ariaControls: null,
   ariaExpanded: null,
   collapsable: !1,
   onClick() {
   }
 };
-m.propTypes = {
-  ariaControls: r.string,
-  ariaExpanded: r.bool,
-  collapsable: r.bool,
-  label: r.string.isRequired,
-  onClick: r.func
+d.propTypes = {
+  ariaControls: o.string,
+  ariaExpanded: o.bool,
+  collapsable: o.bool,
+  label: o.string.isRequired,
+  onClick: o.func
 };
 export {
-  m as SubNavSectionLabel
+  d as SubNavSectionLabel
 };

package/dist/SubNav/SubNavSections.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),i=require("prop-types"),d=require("../Box/Box.cjs"),p=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(r),f=a(i),c=({children:e,spacing:l=2,horizontal:o=!1,...n})=>t.default.createElement(d.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(p.Flex,{as:"ol",gap:l,direction:o?"row":"column",alignItems:o?"center":"stretch",...n},r.Children.map(e,(s,u)=>t.default.createElement("li",{key:u},s))));c.propTypes={children:f.default.node.isRequired};exports.SubNavSections=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),d=require("prop-types"),l=require("../Box/Box.cjs"),a=require("../Flex/Flex.cjs"),n=({children:t,spacing:i=2,horizontal:r=!1,...o})=>e.jsx(l.Box,{paddingTop:2,paddingBottom:4,children:e.jsx(a.Flex,{as:"ol",gap:i,direction:r?"row":"column",alignItems:r?"center":"stretch",...o,children:u.Children.map(t,(s,c)=>e.jsx("li",{children:s},c))})});n.propTypes={children:d.node.isRequired};exports.SubNavSections=n;

package/dist/SubNav/SubNavSections.js

@@ -1,21 +1,22 @@
-import e, { Children as i } from "react";
-import a from "prop-types";
+import { jsx as r } from "react/jsx-runtime";
+import { Children as m } from "react";
+import d from "prop-types";
 import { Box as c } from "../Box/Box.js";
 import { Flex as l } from "../Flex/Flex.js";
-const d = ({ children: t, spacing: o = 2, horizontal: r = !1, ...m }) => /* @__PURE__ */ e.createElement(c, { paddingTop: 2, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(
+const s = ({ children: e, spacing: i = 2, horizontal: o = !1, ...p }) => /* @__PURE__ */ r(c, { paddingTop: 2, paddingBottom: 4, children: /* @__PURE__ */ r(
   l,
   {
     as: "ol",
-    gap: o,
-    direction: r ? "row" : "column",
-    alignItems: r ? "center" : "stretch",
-    ...m
-  },
-  i.map(t, (n, p) => /* @__PURE__ */ e.createElement("li", { key: p }, n))
-));
-d.propTypes = {
-  children: a.node.isRequired
+    gap: i,
+    direction: o ? "row" : "column",
+    alignItems: o ? "center" : "stretch",
+    ...p,
+    children: m.map(e, (t, n) => /* @__PURE__ */ r("li", { children: t }, n))
+  }
+) });
+s.propTypes = {
+  children: d.node.isRequired
 };
 export {
-  d as SubNavSections
+  s as SubNavSections
 };

package/dist/SubNav/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./SubNav.cjs"),u=require("./SubNavHeader.cjs"),S=require("./SubNavLink.cjs"),a=require("./SubNavLinkSection.cjs"),i=require("./SubNavSection.cjs"),b=require("./SubNavSections.cjs");exports.SubNav=e.SubNav;exports.subNavWidth=e.subNavWidth;exports.SubNavHeader=u.SubNavHeader;exports.SubNavLink=S.SubNavLink;exports.SubNavLinkSection=a.SubNavLinkSection;exports.SubNavSection=i.SubNavSection;exports.SubNavSections=b.SubNavSections;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SubNav.cjs"),u=require("./SubNavHeader.cjs"),S=require("./SubNavLink.cjs"),i=require("./SubNavLinkSection.cjs"),a=require("./SubNavSection.cjs"),n=require("./SubNavSections.cjs");exports.SubNav=e.SubNav;exports.subNavWidth=e.subNavWidth;exports.SubNavHeader=u.SubNavHeader;exports.SubNavLink=S.SubNavLink;exports.SubNavLinkSection=i.SubNavLinkSection;exports.SubNavSection=a.SubNavSection;exports.SubNavSections=n.SubNavSections;

package/dist/Switch/Switch.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),m=require("prop-types"),g=require("styled-components"),h=require("../Box/Box.cjs"),y=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(b),r=l(m),c=l(g),n=c.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),n=require("prop-types"),d=require("styled-components"),p=require("../Flex/Flex.cjs"),f=require("../Box/Box.cjs"),t=d.div`
   background: ${({theme:e})=>e.colors.danger500};
   border: none;
   border-radius: 16px;
@@ -27,16 +27,16 @@
       transition: none;
     }
   }
-`,$=c.default.button`
+`,g=d.button`
   background: transparent;
   padding: 0;
   border: none;
 
-  &[aria-checked='true'] ${n} {
+  &[aria-checked='true'] ${t} {
     background: ${({theme:e})=>e.colors.success500};
   }
 
-  &[aria-checked='true'] ${n}:before {
+  &[aria-checked='true'] ${t}:before {
     transform: translateX(1rem);
   }
-`,a=t.default.forwardRef(({label:e,onChange:i,onLabel:s,offLabel:u,selected:o,visibleLabels:d,...f},p)=>t.default.createElement($,{ref:p,role:"switch","aria-checked":o,"aria-label":e,onClick:i,visibleLabels:d,type:"button",...f},t.default.createElement(y.Flex,null,t.default.createElement(n,null,t.default.createElement("span",null,s),t.default.createElement("span",null,u)),d&&t.default.createElement(h.Box,{as:"span","aria-hidden":!0,paddingLeft:2,color:o?"success600":"danger600"},o?s:u))));a.defaultProps={onLabel:"On",offLabel:"Off",visibleLabels:!1};a.propTypes={label:r.default.string.isRequired,offLabel:r.default.string,onChange:r.default.func.isRequired,onLabel:r.default.string,selected:r.default.bool.isRequired,visibleLabels:r.default.bool};a.displayName="Switch";exports.Switch=a;
+`,o=h.forwardRef(({label:e,onChange:l,onLabel:i,offLabel:a,selected:s,visibleLabels:c,...u},b)=>r.jsx(g,{ref:b,role:"switch","aria-checked":s,"aria-label":e,onClick:l,visibleLabels:c,type:"button",...u,children:r.jsxs(p.Flex,{children:[r.jsxs(t,{children:[r.jsx("span",{children:i}),r.jsx("span",{children:a})]}),c&&r.jsx(f.Box,{as:"span","aria-hidden":!0,paddingLeft:2,color:s?"success600":"danger600",children:s?i:a})]})}));o.defaultProps={onLabel:"On",offLabel:"Off",visibleLabels:!1};o.propTypes={label:n.string.isRequired,offLabel:n.string,onChange:n.func.isRequired,onLabel:n.string,selected:n.bool.isRequired,visibleLabels:n.bool};o.displayName="Switch";exports.Switch=o;

package/dist/Switch/Switch.js

@@ -1,9 +1,10 @@
-import r from "react";
-import t from "prop-types";
-import c from "styled-components";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import b from "react";
+import r from "prop-types";
+import l from "styled-components";
+import { Flex as h } from "../Flex/Flex.js";
 import { Box as m } from "../Box/Box.js";
-import { Flex as f } from "../Flex/Flex.js";
-const n = c.div`
+const n = l.div`
   background: ${({ theme: e }) => e.colors.danger500};
   border: none;
   border-radius: 16px;
@@ -32,7 +33,7 @@ const n = c.div`
       transition: none;
     }
   }
-`, b = c.button`
+`, g = l.button`
   background: transparent;
   padding: 0;
   border: none;
@@ -44,36 +45,42 @@ const n = c.div`
   &[aria-checked='true'] ${n}:before {
     transform: translateX(1rem);
   }
-`, a = r.forwardRef(
-  ({ label: e, onChange: d, onLabel: i, offLabel: s, selected: o, visibleLabels: l, ...u }, p) => /* @__PURE__ */ r.createElement(
-    b,
+`, i = b.forwardRef(
+  ({ label: e, onChange: p, onLabel: a, offLabel: s, selected: t, visibleLabels: d, ...u }, f) => /* @__PURE__ */ o(
+    g,
     {
-      ref: p,
+      ref: f,
       role: "switch",
-      "aria-checked": o,
+      "aria-checked": t,
       "aria-label": e,
-      onClick: d,
-      visibleLabels: l,
+      onClick: p,
+      visibleLabels: d,
       type: "button",
-      ...u
-    },
-    /* @__PURE__ */ r.createElement(f, null, /* @__PURE__ */ r.createElement(n, null, /* @__PURE__ */ r.createElement("span", null, i), /* @__PURE__ */ r.createElement("span", null, s)), l && /* @__PURE__ */ r.createElement(m, { as: "span", "aria-hidden": !0, paddingLeft: 2, color: o ? "success600" : "danger600" }, o ? i : s))
+      ...u,
+      children: /* @__PURE__ */ c(h, { children: [
+        /* @__PURE__ */ c(n, { children: [
+          /* @__PURE__ */ o("span", { children: a }),
+          /* @__PURE__ */ o("span", { children: s })
+        ] }),
+        d && /* @__PURE__ */ o(m, { as: "span", "aria-hidden": !0, paddingLeft: 2, color: t ? "success600" : "danger600", children: t ? a : s })
+      ] })
+    }
   )
 );
-a.defaultProps = {
+i.defaultProps = {
   onLabel: "On",
   offLabel: "Off",
   visibleLabels: !1
 };
-a.propTypes = {
-  label: t.string.isRequired,
-  offLabel: t.string,
-  onChange: t.func.isRequired,
-  onLabel: t.string,
-  selected: t.bool.isRequired,
-  visibleLabels: t.bool
+i.propTypes = {
+  label: r.string.isRequired,
+  offLabel: r.string,
+  onChange: r.func.isRequired,
+  onLabel: r.string,
+  selected: r.bool.isRequired,
+  visibleLabels: r.bool
 };
-a.displayName = "Switch";
+i.displayName = "Switch";
 export {
-  a as Switch
+  i as Switch
 };

package/dist/Switch/index.cjs

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

package/dist/Table/Cell.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),i=require("prop-types"),p=require("styled-components"),f=require("../Flex/Flex.cjs"),r=require("../RawTable/RawCell.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(d),o=l(i),n=l(p),c=n.default(r.RawTd)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const o=require("prop-types"),n=require("styled-components"),i=require("../RawTable/RawCell.cjs"),a=require("../Flex/Flex.cjs"),s=n(i.RawTd)`
   vertical-align: middle;
   text-align: left;
   color: ${({theme:e})=>e.colors.neutral600};
@@ -10,8 +10,8 @@
   input {
     vertical-align: sub;
   }
-`,T=n.default.span`
+`,u=n.span`
   svg {
     height: ${4/16}rem;
   }
-`,a=({children:e,action:s,...u})=>t.default.createElement(c,{as:r.RawTh,...u},t.default.createElement(f.Flex,null,e,t.default.createElement(T,null,s)));a.defaultProps={action:void 0};a.propTypes={action:o.default.node,children:o.default.node.isRequired};const y=e=>t.default.createElement(c,{...e});exports.Td=y;exports.Th=a;
+`,t=({children:e,action:l,...c})=>r.jsx(s,{as:i.RawTh,...c,children:r.jsxs(a.Flex,{children:[e,r.jsx(u,{children:l})]})});t.defaultProps={action:void 0};t.propTypes={action:o.node,children:o.node.isRequired};const d=e=>r.jsx(s,{...e});exports.Td=d;exports.Th=t;

package/dist/Table/Cell.js

@@ -1,12 +1,13 @@
-import t from "react";
-import r from "prop-types";
-import o from "styled-components";
-import { Flex as c } from "../Flex/Flex.js";
-import { RawTd as p, RawTh as m } from "../RawTable/RawCell.js";
-const l = o(p)`
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import "react";
+import e from "prop-types";
+import t from "styled-components";
+import { RawTd as a, RawTh as c } from "../RawTable/RawCell.js";
+import { Flex as d } from "../Flex/Flex.js";
+const i = t(a)`
   vertical-align: middle;
   text-align: left;
-  color: ${({ theme: e }) => e.colors.neutral600};
+  color: ${({ theme: o }) => o.colors.neutral600};
   outline-offset: -4px;
 
   /**
@@ -15,20 +16,23 @@ const l = o(p)`
   input {
     vertical-align: sub;
   }
-`, s = o.span`
+`, m = t.span`
   svg {
     height: ${4 / 16}rem;
   }
-`, n = ({ children: e, action: a, ...i }) => /* @__PURE__ */ t.createElement(l, { as: m, ...i }, /* @__PURE__ */ t.createElement(c, null, e, /* @__PURE__ */ t.createElement(s, null, a)));
+`, n = ({ children: o, action: l, ...p }) => /* @__PURE__ */ r(i, { as: c, ...p, children: /* @__PURE__ */ s(d, { children: [
+  o,
+  /* @__PURE__ */ r(m, { children: l })
+] }) });
 n.defaultProps = {
   action: void 0
 };
 n.propTypes = {
-  action: r.node,
-  children: r.node.isRequired
+  action: e.node,
+  children: e.node.isRequired
 };
-const T = (e) => /* @__PURE__ */ t.createElement(l, { ...e });
+const k = (o) => /* @__PURE__ */ r(i, { ...o });
 export {
-  T as Td,
+  k as Td,
   n as Th
 };

package/dist/Table/TFooter.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),s=require("prop-types"),c=require("styled-components"),r=require("../Box/Box.cjs"),p=require("../Divider/Divider.cjs"),y=require("../Flex/Flex.cjs"),f=require("../Typography/Typography.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(u),a=o(s),i=o(c),g=i.default(r.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const o=require("prop-types"),t=require("styled-components"),i=require("../Box/Box.cjs"),c=require("../Divider/Divider.cjs"),a=require("../Flex/Flex.cjs"),u=require("../Typography/Typography.cjs"),l=t(i.Box)`
   height: ${24/16}rem;
   width: ${24/16}rem;
   border-radius: 50%;
@@ -12,11 +12,11 @@
   }
 
   svg path {
-    fill: ${({theme:e})=>e.colors.primary600};
+    fill: ${({theme:r})=>r.colors.primary600};
   }
-`,m=i.default(r.Box)`
-  border-radius: 0 0 ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius};
+`,p=t(i.Box)`
+  border-radius: 0 0 ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius};
   display: block;
   width: 100%;
   border: none;
-`,d=({children:e,icon:l,...n})=>t.default.createElement("div",null,t.default.createElement(p.Divider,null),t.default.createElement(m,{as:"button",background:"primary100",padding:5,...n},t.default.createElement(y.Flex,null,t.default.createElement(g,{"aria-hidden":!0,background:"primary200"},l),t.default.createElement(r.Box,{paddingLeft:3},t.default.createElement(f.Typography,{variant:"pi",fontWeight:"bold",textColor:"primary600"},e)))));d.propTypes={children:a.default.string.isRequired,icon:a.default.node.isRequired};exports.TFooter=d;
+`,n=({children:r,icon:s,...d})=>e.jsxs("div",{children:[e.jsx(c.Divider,{}),e.jsx(p,{as:"button",background:"primary100",padding:5,...d,children:e.jsxs(a.Flex,{children:[e.jsx(l,{"aria-hidden":!0,background:"primary200",children:s}),e.jsx(i.Box,{paddingLeft:3,children:e.jsx(u.Typography,{variant:"pi",fontWeight:"bold",textColor:"primary600",children:r})})]})})]});n.propTypes={children:o.string.isRequired,icon:o.node.isRequired};exports.TFooter=n;

package/dist/Table/TFooter.js

@@ -1,11 +1,12 @@
-import r from "react";
-import o from "prop-types";
-import i from "styled-components";
-import { Box as t } from "../Box/Box.js";
-import { Divider as d } from "../Divider/Divider.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { Typography as l } from "../Typography/Typography.js";
-const p = i(t)`
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import "react";
+import t from "prop-types";
+import d from "styled-components";
+import { Box as o } from "../Box/Box.js";
+import { Divider as m } from "../Divider/Divider.js";
+import { Flex as s } from "../Flex/Flex.js";
+import { Typography as a } from "../Typography/Typography.js";
+const c = d(o)`
   height: ${24 / 16}rem;
   width: ${24 / 16}rem;
   border-radius: 50%;
@@ -19,18 +20,24 @@ const p = i(t)`
   }
 
   svg path {
-    fill: ${({ theme: e }) => e.colors.primary600};
+    fill: ${({ theme: r }) => r.colors.primary600};
   }
-`, c = i(t)`
-  border-radius: 0 0 ${({ theme: e }) => e.borderRadius} ${({ theme: e }) => e.borderRadius};
+`, l = d(o)`
+  border-radius: 0 0 ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius};
   display: block;
   width: 100%;
   border: none;
-`, s = ({ children: e, icon: n, ...a }) => /* @__PURE__ */ r.createElement("div", null, /* @__PURE__ */ r.createElement(d, null), /* @__PURE__ */ r.createElement(c, { as: "button", background: "primary100", padding: 5, ...a }, /* @__PURE__ */ r.createElement(m, null, /* @__PURE__ */ r.createElement(p, { "aria-hidden": !0, background: "primary200" }, n), /* @__PURE__ */ r.createElement(t, { paddingLeft: 3 }, /* @__PURE__ */ r.createElement(l, { variant: "pi", fontWeight: "bold", textColor: "primary600" }, e)))));
-s.propTypes = {
-  children: o.string.isRequired,
-  icon: o.node.isRequired
+`, h = ({ children: r, icon: n, ...p }) => /* @__PURE__ */ e("div", { children: [
+  /* @__PURE__ */ i(m, {}),
+  /* @__PURE__ */ i(l, { as: "button", background: "primary100", padding: 5, ...p, children: /* @__PURE__ */ e(s, { children: [
+    /* @__PURE__ */ i(c, { "aria-hidden": !0, background: "primary200", children: n }),
+    /* @__PURE__ */ i(o, { paddingLeft: 3, children: /* @__PURE__ */ i(a, { variant: "pi", fontWeight: "bold", textColor: "primary600", children: r }) })
+  ] }) })
+] });
+h.propTypes = {
+  children: t.string.isRequired,
+  icon: t.node.isRequired
 };
 export {
-  s as TFooter
+  h as TFooter
 };

package/dist/Table/Table.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),w=require("prop-types"),T=require("styled-components"),d=require("../Box/Box.cjs"),x=require("../RawTable/RawTable.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=c(r),n=c(w),l=c(T),y=l.default(d.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),n=require("prop-types"),a=require("styled-components"),p=require("../RawTable/RawTable.cjs"),l=require("../Box/Box.cjs"),w=a(l.Box)`
   overflow: hidden;
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,R=l.default(x.RawTable)`
+`,x=a(p.RawTable)`
   width: 100%;
   white-space: nowrap;
-`,m=l.default(d.Box)`
+`,T=a(l.Box)`
   &:before {
     // TODO: make sure to add a token for this weird stuff
     background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
@@ -29,6 +29,6 @@
     right: 0;
     top: 0;
   }
-`,S=l.default(d.Box)`
+`,R=a(l.Box)`
   overflow-x: auto;
-`,i=({colCount:e,rowCount:u,footer:f,...h})=>{const s=r.useRef(null),[b,o]=r.useState(),p=t=>{const g=t.target.scrollWidth-t.target.clientWidth;if(t.target.scrollLeft===0){o("right");return}if(t.target.scrollLeft===g){o("left");return}t.target.scrollLeft>0&&o("both")};return r.useEffect(()=>{s.current.scrollWidth>s.current.clientWidth&&o("right")},[]),a.default.createElement(y,{shadow:"tableShadow",hasRadius:!0,background:"neutral0"},a.default.createElement(m,{overflowing:b,position:"relative"},a.default.createElement(S,{ref:s,onScroll:p,paddingLeft:6,paddingRight:6},a.default.createElement(R,{colCount:e,rowCount:u,...h}))),f)};i.defaultProps={footer:void 0};i.propTypes={colCount:n.default.number.isRequired,footer:n.default.node,rowCount:n.default.number.isRequired};exports.Table=i;
+`,c=({colCount:e,rowCount:d,footer:u,...h})=>{const i=s.useRef(null),[f,o]=s.useState(),b=t=>{const g=t.target.scrollWidth-t.target.clientWidth;if(t.target.scrollLeft===0){o("right");return}if(t.target.scrollLeft===g){o("left");return}t.target.scrollLeft>0&&o("both")};return s.useEffect(()=>{i.current.scrollWidth>i.current.clientWidth&&o("right")},[]),r.jsxs(w,{shadow:"tableShadow",hasRadius:!0,background:"neutral0",children:[r.jsx(T,{overflowing:f,position:"relative",children:r.jsx(R,{ref:i,onScroll:b,paddingLeft:6,paddingRight:6,children:r.jsx(x,{colCount:e,rowCount:d,...h})})}),u]})};c.defaultProps={footer:void 0};c.propTypes={colCount:n.number.isRequired,footer:n.node,rowCount:n.number.isRequired};exports.Table=c;