@soul-refiner/design-system 0.1.27 → 0.1.29

package/dist/components/surfaces/drawer/drawer.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import styled from 'styled-components';
+import { callAll } from 'utils';
+const DrawerContext = React.createContext([false, (() => undefined)]);
+export const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
+    const [open, setOpen] = React.useState(controlledOpen || false);
+    React.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    const _children = React.Children.toArray(children);
+    const triggers = [];
+    const content = [];
+    let footer = null;
+    let header = null;
+    for (const child of _children) {
+        if (React.isValidElement(child)) {
+            const type = child.type?.displayName;
+            if (type === 'Drawer.Trigger')
+                triggers.push(child);
+            else if (type === 'Drawer.Header')
+                header = child;
+            else if (type === 'Drawer.Footer')
+                footer = child;
+            else
+                content.push(child);
+        }
+    }
+    return (React.createElement(DrawerContext.Provider, { value: [open, setOpen] },
+        triggers,
+        open && (React.createElement(Background, { onClick: callAll(() => setOpen(false), () => onOpenChange && onOpenChange()) })),
+        React.createElement(Component, { "$open": open },
+            header && React.createElement(HeaderWrapper, null, header),
+            React.createElement(ContentWrapper, null, content),
+            footer && React.createElement(FooterWrapper, null, footer))));
+};
+const Background = styled.div `
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 149;
+  overflow: hidden;
+  background: #000000;
+  opacity: 0.5;
+  cursor: pointer;
+`;
+const Component = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  max-width: 880px;
+  width: 100%;
+  z-index: 150;
+  border-radius: 16px 0px 0px 16px;
+  background-color: var(--background-color);
+  margin-right: -100vw;
+  transition: margin-right 0.5s;
+  background-color: var(--color-grey-10);
+
+  ${({ $open }) => ($open ? 'margin-right: 0px;' : '')}
+`;
+const HeaderWrapper = styled.div `
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-2);
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+`;
+const ContentWrapper = styled.div `
+  height: calc(100vh - 224px);
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 24px 16px 24px 24px;
+  margin-right: 8px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-white);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+`;
+const FooterWrapper = styled.div `
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-1);
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  bottom: 0;
+`;
+const DrawerTrigger = ({ children: child, }) => {
+    const [, setOpen] = React.useContext(DrawerContext);
+    return (child &&
+        React.cloneElement(child, {
+            onClick: callAll(() => setOpen((prev) => !prev), child.props.onClick),
+        }));
+};
+DrawerTrigger.displayName = 'Drawer.Trigger';
+Drawer.Trigger = DrawerTrigger;
+const DrawerHeader = ({ children }) => (React.createElement("div", null, children));
+DrawerHeader.displayName = 'Drawer.Header';
+Drawer.Header = DrawerHeader;
+const DrawerContent = ({ children }) => (React.createElement("div", null, children));
+DrawerContent.displayName = 'Drawer.Content';
+Drawer.Content = DrawerContent;
+const DrawerFooter = ({ children }) => (React.createElement("div", null, children));
+DrawerFooter.displayName = 'Drawer.Footer';
+Drawer.Footer = DrawerFooter;

package/dist/components/surfaces/drawer/drawer.stories.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, H, P } from 'components';
+import { Drawer } from './drawer';
+const meta = {
+    title: 'Surfaces/Drawer',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Header = styled.div `
+  height: 60px;
+  padding: 16px 24px;
+`;
+const Footer = styled.div `
+  height: 60px;
+  padding: 16px 24px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;
+const Content = styled.div `
+  margin: 32px 0px;
+  padding: 16px;
+  border-radius: 8px;
+  background-color: var(--color-white);
+`;
+const Story = (args) => (React.createElement(Drawer, { ...args },
+    React.createElement(Drawer.Trigger, null,
+        React.createElement(Button, null, "Open Drawer")),
+    React.createElement(Drawer.Header, null,
+        React.createElement(Header, null,
+            React.createElement(H.Six, { "$bold": true }, "Let\u2019s setup your community!"),
+            React.createElement(P, null, "This just takes a few minutes."))),
+    React.createElement(Drawer.Content, null,
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes."))),
+    React.createElement(Drawer.Footer, null,
+        React.createElement(Footer, null,
+            React.createElement(Drawer.Trigger, null,
+                React.createElement(Button, { size: "small", type: "outlined" }, "Cancel")),
+            React.createElement(Button, { size: "small" }, "Create")))));
+export const Default = Story.bind({});
+Default.args = {};
+export default meta;

package/dist/components/surfaces/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer } from './drawer';

package/dist/components/surfaces/index.js

@@ -0,0 +1,5 @@
+export { Accordion } from './accordion';
+export { Comment } from './comment';
+export { Drawer } from './drawer';
+export { Message } from './message';
+export { Modal } from './modal';

package/dist/components/surfaces/message/index.js

@@ -0,0 +1 @@
+export { Message } from './message';

package/dist/components/surfaces/message/message.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Avatar, Box, P, H } from 'components';
+export const Message = ({ messages, userId }) => {
+    const id = React.useId();
+    return (React.createElement(Box, { "$display": "flex", "$dir": "column", "$gap": 16 }, messages.map(({ content, createdDate, senderAvatarURI, senderHref, senderId, senderName, }, index) => {
+        const isSelf = senderId === userId;
+        const isFirstMessageBySender = messages?.[index - 1]?.senderId !== senderId;
+        if (isSelf) {
+            return (React.createElement(React.Fragment, { key: id + index },
+                isFirstMessageBySender && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-top: 40px; margin-left: auto;" },
+                    createdDate.toLocaleDateString(),
+                    ' ',
+                    createdDate.toLocaleTimeString())),
+                React.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+        }
+        return (React.createElement(React.Fragment, { key: id + index },
+            isFirstMessageBySender && (React.createElement(Avatar, { image: senderAvatarURI, href: senderHref, subtitle: React.createElement(P, { as: "span", "$color": "blue-2", "$fontSize": 12, "$lineHeight": 16, sx: "vertical-align: top;" }, createdDate.toLocaleTimeString()), size: 56, sx: "margin-top: 40px;", textPosition: "right", title: React.createElement(H, { as: "span", "$color": "blue-2", "$fontSize": 18, "$lineHeight": 26, "$mediumBold": true }, senderName) })),
+            React.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+    })));
+};
+const Wrapper = styled.div `
+  max-width: 552px;
+  padding: 16px;
+  border-radius: 16px;
+  font-family: Inter;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.006em;
+
+  ${({ $isSelf }) => $isSelf
+    ? `
+    margin-left: auto;
+    color: var(--color-white);
+    background-color: var(--color-primary-blue-2);
+    border-top-right-radius: 0px;`
+    : `
+    margin-left: 68px;
+    margin-right: auto;
+    color: var(--color-grey-3);
+    background-color: var(--color-grey-9);
+    border-top-left-radius: 0px;`}
+`;

package/dist/components/surfaces/message/message.stories.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Message } from './message';
+const meta = {
+    title: 'Surfaces/Message',
+};
+const Wrapper = styled.div `
+  max-width: 1200px;
+  margin: 0px auto;
+`;
+const Story = () => (React.createElement(Wrapper, null,
+    React.createElement(Message, { messages: [
+            {
+                content: 'There should be a max quote bubble of 330 px, then it should wrap to the next line like this. And then if you type more it should just keep wrapping.',
+                createdDate: new Date('16 June 2023'),
+                senderAvatarURI: '',
+                senderHref: '#',
+                senderId: 'user1',
+                senderName: 'You',
+            },
+            {
+                content: 'There should be a max quote bubble of 330 px, then it should wrap to the next line like this. And then if you type more it should just keep wrapping.',
+                createdDate: new Date('16 June 2023'),
+                senderAvatarURI: '',
+                senderHref: '#',
+                senderId: 'user1',
+                senderName: 'You',
+            },
+            {
+                content: 'A shorter response.',
+                createdDate: new Date('16 June 2023'),
+                senderAvatarURI: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+                senderHref: '#',
+                senderId: 'user2',
+                senderName: 'Ben Merritt',
+            },
+            {
+                content: 'There should be a max quote bubble of 330 px, then it should wrap to the next line like this. And then if you type more it should just keep wrapping.',
+                createdDate: new Date('16 June 2023'),
+                senderAvatarURI: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+                senderHref: '#',
+                senderId: 'user2',
+                senderName: 'Ben Merritt',
+            },
+            {
+                content: 'ok',
+                createdDate: new Date('16 June 2023'),
+                senderAvatarURI: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+                senderHref: '#',
+                senderId: 'user2',
+                senderName: 'Ben Merritt',
+            },
+            {
+                content: 'There should be a max quote bubble of 330 px, then it should wrap to the next line like this. And then if you type more it should just keep wrapping.',
+                createdDate: new Date('16 June 2023'),
+                senderAvatarURI: '',
+                senderHref: '#',
+                senderId: 'user1',
+                senderName: 'You',
+            },
+            {
+                content: 'There should be a max quote bubble of 330 px, then it should wrap to the next line like this. And then if you type more it should just keep wrapping.',
+                createdDate: new Date('16 June 2023'),
+                senderAvatarURI: '',
+                senderHref: '#',
+                senderId: 'user1',
+                senderName: 'You',
+            },
+        ], userId: "user1" })));
+export const Default = Story.bind({});
+export default meta;

package/dist/components/surfaces/modal/index.js

@@ -0,0 +1 @@
+export { Modal } from './modal';

package/dist/components/surfaces/modal/modal.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from 'components';
+import { Close } from 'icons';
+import { callAll } from 'utils';
+const ModalContext = React.createContext([false, (() => undefined)]);
+const Modal = ({ controlledOpen, ...props }) => {
+    const [open, setOpen] = React.useState(controlledOpen || false);
+    React.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    return React.createElement(ModalContext.Provider, { value: [open, setOpen], ...props });
+};
+const ModalTrigger = ({ children: child, }) => {
+    const [, setOpen] = React.useContext(ModalContext);
+    return (child &&
+        React.cloneElement(child, {
+            onClick: callAll(() => setOpen(true), child.props.onClick),
+        }));
+};
+ModalTrigger.displayName = 'Modal.Trigger';
+Modal.Trigger = ModalTrigger;
+const ModalDismiss = ({ children: child, setClosed, }) => {
+    const [, setOpen] = React.useContext(ModalContext);
+    return (child &&
+        React.cloneElement(child, {
+            onClick: callAll(() => setOpen(false), child.props.onClick, () => setClosed && setClosed()),
+        }));
+};
+ModalDismiss.displayName = 'Modal.Dismiss';
+Modal.Dismiss = ModalDismiss;
+const ModalContent = ({ backgroundDark = true, children, footer, header, setClosed, sx, ...props }) => {
+    const [open, setOpen] = React.useContext(ModalContext);
+    const handleOutsideClick = (event) => {
+        if (event.currentTarget != event.target)
+            return;
+        setClosed ? setClosed() : setOpen(false);
+    };
+    return (React.createElement(Wrapper, { "$backgroundDark": backgroundDark, "$open": open, onClick: handleOutsideClick },
+        React.createElement(Content, { ...props, "$sx": sx },
+            header && (React.createElement("div", { className: "header" },
+                React.createElement("div", null, header),
+                React.createElement(Modal.Dismiss, { setClosed: setClosed },
+                    React.createElement(Button, { icon: React.createElement(Close, null), type: "special" })))),
+            children,
+            footer && React.createElement("div", { className: "footer" }, footer))));
+};
+ModalContent.displayName = 'Modal.Content';
+Modal.Content = ModalContent;
+export { Modal };
+const Wrapper = styled.div `
+  ${({ $open }) => $open
+    ? `display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;`
+    : 'display: none;'}
+  ${({ $backgroundDark }) => $backgroundDark
+    ? `background: rgba(0, 0, 0, 0.5);
+    cursor: pointer;`
+    : ''}
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+`;
+const Content = styled.div `
+  position: absolute;
+  z-index: 101;
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+  cursor: initial;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  [class~='header'] {
+    display: flex;
+    align-items: center;
+
+    div:first-child {
+      flex: 1;
+    }
+  }
+
+  [class~='footer'] {
+    position: relative;
+    padding-top: 16px;
+  }
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;

package/dist/components/surfaces/modal/modal.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box, Button, H, P } from 'components';
+import { Modal } from './modal';
+const meta = {
+    title: 'Surfaces/Modal',
+};
+const Story = (args) => (React.createElement(Modal, { ...args },
+    React.createElement(Modal.Trigger, null,
+        React.createElement(Button, null, "Open Modal")),
+    React.createElement(Modal.Content, { footer: React.createElement(Box, { "$display": "flex", "$justify": "center", "$gap": 16, sx: "position: relative; width: 100%;" },
+            React.createElement(Button, { fluid: true, size: "small", type: "outlined" }, "Action 1"),
+            React.createElement(Button, { fluid: true, size: "small" }, "Action 2")), header: React.createElement(H, { "$bold": true, "$color": "grey-2", "$fontSize": 20 }, "This is a header") },
+        React.createElement(Box, { "$align": "flex-start", "$display": "flex", "$dir": "column", "$gap": 32, sx: "width: 500px" },
+            React.createElement(P, { "$textClampLines": 10 }, "Assertively synthesize diverse value after enterprise data. Authoritatively embrace enterprise \"outside the box\" thinking without excellent imperatives. Rapidiously scale multidisciplinary innovation before proactive total linkage"),
+            React.createElement(Modal.Dismiss, null,
+                React.createElement(Button, null, "Dismiss"))))));
+export const Default = Story.bind({});
+export default meta;

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { Table } from './table';

package/dist/components/table/table/index.js

@@ -0,0 +1 @@
+export { Table } from './table';

package/dist/components/table/table/table.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, }) => {
+    return (React.createElement(Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": 32, sx: compact ? 'width: fit-content;' : '' },
+        !!header && header,
+        React.createElement(Box, { "$borderRadius": "small", sx: border ? 'border: 1px solid var(--color-grey-8);' : '' },
+            React.createElement(TableElement, { "$compact": compact, "$separated": separated, "$striped": striped, "$sx": sx }, children)),
+        !!footer && footer));
+};
+const TableElement = styled.table `
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  ${({ $compact }) => ($compact ? 'width: fit-content;' : '')}
+  ${({ $separated }) => $separated
+    ? `
+    & > tbody > * {
+      border-bottom: 1px solid var(--color-grey-9);
+      &:last-child {
+        border-bottom: none;
+      }
+    }`
+    : ''}
+  ${({ $striped }) => $striped
+    ? `
+    & > tbody > *:nth-of-type(even) {
+      background-color: var(--color-grey-10);
+    }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+/********************************************************
+ *  Table Head
+ */
+const Head = ({ children, ...rest }) => {
+    return React.createElement(HeadElement, { ...rest }, children);
+};
+const HeadElement = styled.thead `
+  tr {
+    background-color: var(--color-grey-10);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+
+    & > *:first-of-type {
+      border-top-left-radius: 8px;
+    }
+
+    & > *:last-of-type {
+      border-top-right-radius: 8px;
+    }
+  }
+`;
+Head.displayName = 'Table.Head';
+Table.Head = Head;
+/********************************************************
+ *  Table Body
+ */
+const Body = ({ children, ...rest }) => {
+    return React.createElement(BodyElement, { ...rest }, children);
+};
+const BodyElement = styled.tbody `
+  & > tr:last-of-type {
+    & > *:first-child {
+      border-bottom-left-radius: 8px;
+    }
+
+    & > *:last-child {
+      border-bottom-right-radius: 8px;
+    }
+  }
+`;
+Body.displayName = 'Table.Body';
+Table.Body = Body;
+/********************************************************
+ *  Table Foot
+ */
+const Foot = ({ children, ...rest }) => {
+    return React.createElement("tfoot", { ...rest }, children);
+};
+Foot.displayName = 'Table.Foot';
+Table.Footer = Foot;
+const Row = ({ children, disabled, href, hoverable = false, onClick, selected, sx, ...rest }) => {
+    const handleClick = href
+        ? (event) => {
+            if (event.metaKey || event.ctrlKey) {
+                const win = window.open(href, '_blank');
+                win?.focus();
+            }
+            else {
+                window.location.href = href;
+            }
+        }
+        : onClick
+            ? (event) => {
+                onClick(event);
+            }
+            : undefined;
+    return (React.createElement(RowElement, { onClick: handleClick, "$disabled": disabled, "$hoverable": hoverable, "$isAnchor": !!href, "$selected": selected, "$sx": sx, ...rest }, children));
+};
+const RowElement = styled.tr `
+  display: table-row;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    background-color: var(--color-grey-9) !important;
+    color: var(--color-grey-7);
+    & > * {
+      color: var(--color-grey-7) !important;
+    }`
+    : ''}
+
+  ${({ $disabled, $hoverable }) => !$disabled && $hoverable ? 'background-color: var(--color-grey-9);' : ''}
+
+  ${({ $disabled, $selected }) => !$disabled && $selected ? 'background-color: var(--color-grey-8;' : ''}
+
+  ${({ $disabled, $isAnchor }) => !$disabled && $isAnchor
+    ? `
+    cursor: pointer;
+    padding-right: 24px;
+
+    &:hover {
+      background-color: var(--color-grey-10);
+
+      & > td:last-child {
+        position: relative;
+      }
+      & > td:last-child::after {
+        content: "❯";
+        color: var(--color-blue-3);
+        position: absolute;
+        right: 12px;
+        top: calc(50% - 11px);
+      }
+    }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+Row.displayName = 'Table.Row';
+Table.Row = Row;
+const Cell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
+    const percentageWidth = width ? width * (1 / 16) + '%' : undefined;
+    return (React.createElement(CellElement, { "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' },
+        React.createElement("div", null, children)));
+};
+const CellElement = styled.td `
+  width: ${({ $width }) => $width};
+  height: 20px;
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--color-grey-3);
+  vertical-align: ${({ $verticalAlign }) => $verticalAlign ? $verticalAlign : ''};
+  text-align: ${({ $textAlign }) => ($textAlign ? $textAlign : '')};
+  padding: ${({ $padding }) => $padding};
+  ${({ $clamp }) => $clamp
+    ? `
+  & > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: ${$clamp};
+    -webkit-line-clamp: ${$clamp};
+    -webkit-box-orient: vertical;
+  }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+Cell.displayName = 'Table.Cell';
+Table.Cell = Cell;
+export { Table };
+const HeaderCell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
+    const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
+    return (React.createElement(HeadCellElement, { as: "th", "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' }, children));
+};
+const HeadCellElement = styled(CellElement) `
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+`;
+HeaderCell.displayName = 'Table.HeaderCell';
+Table.HeaderCell = HeaderCell;