@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/SubNav/SubNavSection.js

@@ -1,24 +1,39 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import a from "react";
-import u from "styled-components";
-import { SubNavSectionLabel as f } from "./SubNavSectionLabel.js";
-import { useId as g } from "../hooks/useId.js";
-import { Box as d } from "../Box/Box.js";
-import { Flex as x } from "../Flex/Flex.js";
-import { Badge as C } from "../Badge/Badge.js";
-const S = u(d)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const SubNavSectionLabel = require('./SubNavSectionLabel.js');
+const useId = require('../hooks/useId.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+const Badge = require('../Badge/Badge.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const SubNavSectionWrapper = styled__default.default(Box.Box) `
   svg {
     height: ${4 / 16}rem;
     path {
-      fill: ${({ theme: o }) => o.colors.neutral500};
+      fill: ${({ theme }) => theme.colors.neutral500};
     }
   }
-`, _ = ({ collapsable: o = !1, label: p, badgeLabel: r, children: s, id: c }) => {
-  const [e, m] = a.useState(!0), n = g(c);
-  return l(x, { direction: "column", alignItems: "stretch", gap: 1, children: [t(S, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: l(d, { position: "relative", paddingRight: r ? 6 : 0, children: [t(f, { onClick: () => {
-    m((i) => !i);
-  }, ariaExpanded: e, ariaControls: n, collapsable: o, label: p }), r && t(C, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: r })] }) }), (!o || e) && t("ol", { id: n, children: a.Children.map(s, (i, h) => t("li", { children: i }, h)) })] });
-};
-export {
-  _ as SubNavSection
+`;
+const SubNavSection = ({ collapsable = false, label, badgeLabel, children, id }) => {
+    const [isOpen, setOpenLinks] = React__default.default.useState(true);
+    const listId = useId.useId(id);
+    const handleClick = () => {
+        setOpenLinks((prev) => !prev);
+    };
+    return (jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsx(SubNavSectionWrapper, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: jsxRuntime.jsxs(Box.Box, { position: "relative", paddingRight: badgeLabel ? 6 : 0, children: [jsxRuntime.jsx(SubNavSectionLabel.SubNavSectionLabel, { onClick: handleClick, ariaExpanded: isOpen, ariaControls: listId, collapsable: collapsable, label: label }), badgeLabel && (jsxRuntime.jsx(Badge.Badge, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: badgeLabel }))] }) }), (!collapsable || isOpen) && (jsxRuntime.jsx("ol", { id: listId, children: React__default.default.Children.map(children, (child, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return jsxRuntime.jsx("li", { children: child }, index);
+                }) }))] }));
 };
+
+exports.SubNavSection = SubNavSection;

package/dist/SubNav/SubNavSection.mjs

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { SubNavSectionLabel } from './SubNavSectionLabel.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Badge } from '../Badge/Badge.mjs';
+
+const SubNavSectionWrapper = styled(Box) `
+  svg {
+    height: ${4 / 16}rem;
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+`;
+const SubNavSection = ({ collapsable = false, label, badgeLabel, children, id }) => {
+    const [isOpen, setOpenLinks] = React__default.useState(true);
+    const listId = useId(id);
+    const handleClick = () => {
+        setOpenLinks((prev) => !prev);
+    };
+    return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsx(SubNavSectionWrapper, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: jsxs(Box, { position: "relative", paddingRight: badgeLabel ? 6 : 0, children: [jsx(SubNavSectionLabel, { onClick: handleClick, ariaExpanded: isOpen, ariaControls: listId, collapsable: collapsable, label: label }), badgeLabel && (jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: badgeLabel }))] }) }), (!collapsable || isOpen) && (jsx("ol", { id: listId, children: React__default.Children.map(children, (child, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return jsx("li", { children: child }, index);
+                }) }))] }));
+};
+
+export { SubNavSection };

package/dist/SubNav/SubNavSectionLabel.js

@@ -1,19 +1,35 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { CarretDown as m } from "@strapi/icons";
-import d from "styled-components";
-import { Flex as s } from "../Flex/Flex.js";
-import { Box as o } from "../Box/Box.js";
-import { Typography as i } from "../Typography/Typography.js";
-const a = d(s)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const Flex = require('../Flex/Flex.js');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+// TODO: these could be props
+const SubNavSectionLabelWrapper = styled__default.default(Flex.Flex) `
   border: none;
   padding: 0;
   background: transparent;
-`, g = d.div`
+`;
+// TODO: these could be props
+const DropDownIconWrapper = styled__default.default.div `
   display: flex;
   align-items: center;
-  transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, y = ({ collapsable: t = !1, label: e, onClick: l = () => {
-}, ariaExpanded: n, ariaControls: p }) => t ? c(a, { as: "button", onClick: l, "aria-expanded": n, "aria-controls": p, textAlign: "left", children: [r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }), t && r(g, { rotated: n, children: r(m, { "aria-hidden": !0 }) })] }) : r(a, { children: r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
-export {
-  y as SubNavSectionLabel
+  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
+`;
+const SubNavSectionLabel = ({ collapsable = false, label, onClick = () => { }, ariaExpanded, ariaControls, }) => {
+    if (collapsable) {
+        return (jsxRuntime.jsxs(SubNavSectionLabelWrapper, { as: "button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, textAlign: "left", children: [jsxRuntime.jsx(Box.Box, { paddingRight: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), collapsable && (jsxRuntime.jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true }) }))] }));
+    }
+    return (jsxRuntime.jsx(SubNavSectionLabelWrapper, { children: jsxRuntime.jsx(Box.Box, { paddingRight: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }));
 };
+
+exports.SubNavSectionLabel = SubNavSectionLabel;

package/dist/SubNav/SubNavSectionLabel.mjs

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CarretDown } from '@strapi/icons';
+import styled from 'styled-components';
+import { Flex } from '../Flex/Flex.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+// TODO: these could be props
+const SubNavSectionLabelWrapper = styled(Flex) `
+  border: none;
+  padding: 0;
+  background: transparent;
+`;
+// TODO: these could be props
+const DropDownIconWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
+`;
+const SubNavSectionLabel = ({ collapsable = false, label, onClick = () => { }, ariaExpanded, ariaControls, }) => {
+    if (collapsable) {
+        return (jsxs(SubNavSectionLabelWrapper, { as: "button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, textAlign: "left", children: [jsx(Box, { paddingRight: 1, children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), collapsable && (jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: jsx(CarretDown, { "aria-hidden": true }) }))] }));
+    }
+    return (jsx(SubNavSectionLabelWrapper, { children: jsx(Box, { paddingRight: 1, children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }));
+};
+
+export { SubNavSectionLabel };

package/dist/SubNav/SubNavSections.js

@@ -1,8 +1,21 @@
-import { jsx as r } from "react/jsx-runtime";
-import c from "react";
-import { Box as d } from "../Box/Box.js";
-import { Flex as l } from "../Flex/Flex.js";
-const u = ({ children: o, spacing: t = 2, horizontal: e = !1, ...i }) => r(d, { paddingTop: 2, paddingBottom: 4, children: r(l, { as: "ol", gap: t, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...i, children: c.Children.map(o, (n, m) => r("li", { children: n }, m)) }) });
-export {
-  u as SubNavSections
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+
+const SubNavSections = ({ children, spacing = 2, horizontal = false, ...props }) => {
+    return (jsxRuntime.jsx(Box.Box, { paddingTop: 2, paddingBottom: 4, children: jsxRuntime.jsx(Flex.Flex, { as: "ol", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.default.Children.map(children, (child, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                return jsxRuntime.jsx("li", { children: child }, index);
+            }) }) }));
 };
+
+exports.SubNavSections = SubNavSections;

package/dist/SubNav/SubNavSections.mjs

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const SubNavSections = ({ children, spacing = 2, horizontal = false, ...props }) => {
+    return (jsx(Box, { paddingTop: 2, paddingBottom: 4, children: jsx(Flex, { as: "ol", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.Children.map(children, (child, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                return jsx("li", { children: child }, index);
+            }) }) }));
+};
+
+export { SubNavSections };

package/dist/SubNav/index.js

@@ -1,15 +1,20 @@
-import { SubNav as e, subNavWidth as t } from "./SubNav.js";
-import { SubNavHeader as a } from "./SubNavHeader.js";
-import { SubNavLink as u } from "./SubNavLink.js";
-import { SubNavLinkSection as N } from "./SubNavLinkSection.js";
-import { SubNavSection as i } from "./SubNavSection.js";
-import { SubNavSections as p } from "./SubNavSections.js";
-export {
-  e as SubNav,
-  a as SubNavHeader,
-  u as SubNavLink,
-  N as SubNavLinkSection,
-  i as SubNavSection,
-  p as SubNavSections,
-  t as subNavWidth
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const SubNav = require('./SubNav.js');
+const SubNavHeader = require('./SubNavHeader.js');
+const SubNavLink = require('./SubNavLink.js');
+const SubNavLinkSection = require('./SubNavLinkSection.js');
+const SubNavSection = require('./SubNavSection.js');
+const SubNavSections = require('./SubNavSections.js');
+
+
+
+exports.SubNav = SubNav.SubNav;
+exports.subNavWidth = SubNav.subNavWidth;
+exports.SubNavHeader = SubNavHeader.SubNavHeader;
+exports.SubNavLink = SubNavLink.SubNavLink;
+exports.SubNavLinkSection = SubNavLinkSection.SubNavLinkSection;
+exports.SubNavSection = SubNavSection.SubNavSection;
+exports.SubNavSections = SubNavSections.SubNavSections;

package/dist/SubNav/index.mjs

@@ -0,0 +1,6 @@
+export { SubNav, subNavWidth } from './SubNav.mjs';
+export { SubNavHeader } from './SubNavHeader.mjs';
+export { SubNavLink } from './SubNavLink.mjs';
+export { SubNavLinkSection } from './SubNavLinkSection.mjs';
+export { SubNavSection } from './SubNavSection.mjs';
+export { SubNavSections } from './SubNavSections.mjs';

package/dist/Switch/Switch.js

@@ -1,10 +1,20 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import h from "react";
-import c from "styled-components";
-import { Flex as u } from "../Flex/Flex.js";
-import { Box as m } from "../Box/Box.js";
-const t = c.div`
-  background: ${({ theme: r }) => r.colors.danger500};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const Flex = require('../Flex/Flex.js');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const SwitchContent = styled__default.default.div `
+  background: ${({ theme }) => theme.colors.danger500};
   border: none;
   border-radius: 16px;
   position: relative;
@@ -12,19 +22,19 @@ const t = c.div`
   width: ${40 / 16}rem;
 
   & span {
-    font-size: ${({ visibleLabels: r }) => r ? "1rem" : 0};
+    font-size: ${({ visibleLabels }) => (visibleLabels ? '1rem' : 0)};
   }
 
   &:before {
     content: '';
-    background: ${({ theme: r }) => r.colors.neutral0};
+    background: ${({ theme }) => theme.colors.neutral0};
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
     position: absolute;
     transition: all 0.5s;
-    left: ${({ theme: r }) => r.spaces[1]};
-    top: ${({ theme: r }) => r.spaces[1]};
+    left: ${({ theme }) => theme.spaces[1]};
+    top: ${({ theme }) => theme.spaces[1]};
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -32,19 +42,22 @@ const t = c.div`
       transition: none;
     }
   }
-`, f = c.button`
+`;
+const SwitchButton = styled__default.default.button `
   background: transparent;
   padding: 0;
   border: none;
 
-  &[aria-checked='true'] ${t} {
-    background: ${({ theme: r }) => r.colors.success500};
+  &[aria-checked='true'] ${SwitchContent} {
+    background: ${({ theme }) => theme.colors.success500};
   }
 
-  &[aria-checked='true'] ${t}:before {
+  &[aria-checked='true'] ${SwitchContent}:before {
     transform: translateX(1rem);
   }
-`, x = h.forwardRef(({ label: r, onChange: d, onLabel: n = "On", offLabel: i = "Off", selected: o, visibleLabels: a = !1, ...l }, p) => e(f, { ref: p, role: "switch", "aria-checked": o, "aria-label": r, onClick: d, visibleLabels: a, type: "button", ...l, children: s(u, { children: [s(t, { children: [e("span", { children: n }), e("span", { children: i })] }), a && e(m, { as: "span", "aria-hidden": !0, paddingLeft: 2, color: o ? "success600" : "danger600", children: o ? n : i })] }) }));
-export {
-  x as Switch
-};
+`;
+const Switch = React__default.default.forwardRef(({ label, onChange, onLabel = 'On', offLabel = 'Off', selected, visibleLabels = false, ...props }, ref) => {
+    return (jsxRuntime.jsx(SwitchButton, { ref: ref, role: "switch", "aria-checked": selected, "aria-label": label, onClick: onChange, visibleLabels: visibleLabels, type: "button", ...props, children: jsxRuntime.jsxs(Flex.Flex, { children: [jsxRuntime.jsxs(SwitchContent, { children: [jsxRuntime.jsx("span", { children: onLabel }), jsxRuntime.jsx("span", { children: offLabel })] }), visibleLabels && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, paddingLeft: 2, color: selected ? 'success600' : 'danger600', children: selected ? onLabel : offLabel }))] }) }));
+});
+
+exports.Switch = Switch;

package/dist/Switch/Switch.mjs

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { Flex } from '../Flex/Flex.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const SwitchContent = styled.div `
+  background: ${({ theme }) => theme.colors.danger500};
+  border: none;
+  border-radius: 16px;
+  position: relative;
+  height: ${24 / 16}rem;
+  width: ${40 / 16}rem;
+
+  & span {
+    font-size: ${({ visibleLabels }) => (visibleLabels ? '1rem' : 0)};
+  }
+
+  &:before {
+    content: '';
+    background: ${({ theme }) => theme.colors.neutral0};
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    position: absolute;
+    transition: all 0.5s;
+    left: ${({ theme }) => theme.spaces[1]};
+    top: ${({ theme }) => theme.spaces[1]};
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &:before {
+      transition: none;
+    }
+  }
+`;
+const SwitchButton = styled.button `
+  background: transparent;
+  padding: 0;
+  border: none;
+
+  &[aria-checked='true'] ${SwitchContent} {
+    background: ${({ theme }) => theme.colors.success500};
+  }
+
+  &[aria-checked='true'] ${SwitchContent}:before {
+    transform: translateX(1rem);
+  }
+`;
+const Switch = React__default.forwardRef(({ label, onChange, onLabel = 'On', offLabel = 'Off', selected, visibleLabels = false, ...props }, ref) => {
+    return (jsx(SwitchButton, { ref: ref, role: "switch", "aria-checked": selected, "aria-label": label, onClick: onChange, visibleLabels: visibleLabels, type: "button", ...props, children: jsxs(Flex, { children: [jsxs(SwitchContent, { children: [jsx("span", { children: onLabel }), jsx("span", { children: offLabel })] }), visibleLabels && (jsx(Box, { as: "span", "aria-hidden": true, paddingLeft: 2, color: selected ? 'success600' : 'danger600', children: selected ? onLabel : offLabel }))] }) }));
+});
+
+export { Switch };

package/dist/Switch/index.js

@@ -1,4 +1,9 @@
-import { Switch as t } from "./Switch.js";
-export {
-  t as Switch
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Switch = require('./Switch.js');
+
+
+
+exports.Switch = Switch.Switch;

package/dist/Switch/index.mjs

@@ -0,0 +1 @@
+export { Switch } from './Switch.mjs';

package/dist/Table/Cell.js

@@ -1,11 +1,20 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import o from "styled-components";
-import { RawTd as c, RawTh as s } from "../RawTable/RawCell.js";
-import { Flex as a } from "../Flex/Flex.js";
-const l = o(c)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const RawCell = require('../RawTable/RawCell.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const CellWrapper = styled__default.default(RawCell.RawTd) `
   vertical-align: middle;
   text-align: left;
-  color: ${({ theme: r }) => r.colors.neutral600};
+  color: ${({ theme }) => theme.colors.neutral600};
   outline-offset: -4px;
 
   /**
@@ -14,12 +23,18 @@ const l = o(c)`
   input {
     vertical-align: sub;
   }
-`, p = o.span`
+`;
+const ActionWrapper = styled__default.default.span `
   svg {
     height: ${4 / 16}rem;
   }
-`, u = ({ children: r, action: e, ...i }) => t(l, { as: s, ...i, children: n(a, { children: [r, t(p, { children: e })] }) }), x = ({ children: r, ...e }) => t(l, { ...e, children: r });
-export {
-  x as Td,
-  u as Th
+`;
+const Th = ({ children, action, ...props }) => {
+    return (jsxRuntime.jsx(CellWrapper, { as: RawCell.RawTh, ...props, children: jsxRuntime.jsxs(Flex.Flex, { children: [children, jsxRuntime.jsx(ActionWrapper, { children: action })] }) }));
+};
+const Td = ({ children, ...props }) => {
+    return jsxRuntime.jsx(CellWrapper, { ...props, children: children });
 };
+
+exports.Td = Td;
+exports.Th = Th;

package/dist/Table/Cell.mjs

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { RawTd, RawTh } from '../RawTable/RawCell.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const CellWrapper = styled(RawTd) `
+  vertical-align: middle;
+  text-align: left;
+  color: ${({ theme }) => theme.colors.neutral600};
+  outline-offset: -4px;
+
+  /**
+  * Hack to make sure the checkbox looks aligned
+  */
+  input {
+    vertical-align: sub;
+  }
+`;
+const ActionWrapper = styled.span `
+  svg {
+    height: ${4 / 16}rem;
+  }
+`;
+const Th = ({ children, action, ...props }) => {
+    return (jsx(CellWrapper, { as: RawTh, ...props, children: jsxs(Flex, { children: [children, jsx(ActionWrapper, { children: action })] }) }));
+};
+const Td = ({ children, ...props }) => {
+    return jsx(CellWrapper, { ...props, children: children });
+};
+
+export { Td, Th };

package/dist/Table/TFooter.js

@@ -1,10 +1,19 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import t from "styled-components";
-import { Box as o } from "../Box/Box.js";
-import { Divider as a } from "../Divider/Divider.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { Typography as p } from "../Typography/Typography.js";
-const s = t(o)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Box = require('../Box/Box.js');
+const Divider = require('../Divider/Divider.js');
+const Flex = require('../Flex/Flex.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const IconBox = styled__default.default(Box.Box) `
   height: ${24 / 16}rem;
   width: ${24 / 16}rem;
   border-radius: 50%;
@@ -18,14 +27,18 @@ const s = t(o)`
   }
 
   svg path {
-    fill: ${({ theme: r }) => r.colors.primary600};
+    fill: ${({ theme }) => theme.colors.primary600};
   }
-`, l = t(o)`
-  border-radius: 0 0 ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius};
+`;
+// TODO: remove when the reset css button is merged
+const ButtonBox = styled__default.default(Box.Box) `
+  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
   display: block;
   width: 100%;
   border: none;
-`, y = ({ children: r, icon: d, ...n }) => e("div", { children: [i(a, {}), i(l, { as: "button", background: "primary100", padding: 5, ...n, children: e(m, { children: [i(s, { "aria-hidden": !0, background: "primary200", children: d }), i(o, { paddingLeft: 3, children: i(p, { variant: "pi", fontWeight: "bold", textColor: "primary600", children: r }) })] }) })] });
-export {
-  y as TFooter
+`;
+const TFooter = ({ children, icon, ...props }) => {
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Divider.Divider, {}), jsxRuntime.jsx(ButtonBox, { as: "button", background: "primary100", padding: 5, ...props, children: jsxRuntime.jsxs(Flex.Flex, { children: [jsxRuntime.jsx(IconBox, { "aria-hidden": true, background: "primary200", children: icon }), jsxRuntime.jsx(Box.Box, { paddingLeft: 3, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", fontWeight: "bold", textColor: "primary600", children: children }) })] }) })] }));
 };
+
+exports.TFooter = TFooter;

package/dist/Table/TFooter.mjs

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+import { Divider } from '../Divider/Divider.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const IconBox = styled(Box) `
+  height: ${24 / 16}rem;
+  width: ${24 / 16}rem;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    height: ${10 / 16}rem;
+    width: ${10 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.primary600};
+  }
+`;
+// TODO: remove when the reset css button is merged
+const ButtonBox = styled(Box) `
+  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
+  display: block;
+  width: 100%;
+  border: none;
+`;
+const TFooter = ({ children, icon, ...props }) => {
+    return (jsxs("div", { children: [jsx(Divider, {}), jsx(ButtonBox, { as: "button", background: "primary100", padding: 5, ...props, children: jsxs(Flex, { children: [jsx(IconBox, { "aria-hidden": true, background: "primary200", children: icon }), jsx(Box, { paddingLeft: 3, children: jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "primary600", children: children }) })] }) })] }));
+};
+
+export { TFooter };