@soul-refiner/design-system 2.0.0-alpha.26 → 2.0.0-alpha.28

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

@@ -0,0 +1,135 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var button = require('../../actions/button/button.js');
+var close = require('../../../icons/basic/close.js');
+var _function = require('../../../utils/function.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ModalContext = React__default.default.createContext([false, (() => undefined)]);
+const Modal = ({ alwaysRender = true, controlledOpen, onChange, children, ...props }) => {
+    const [open, setOpen] = React__default.default.useState(controlledOpen || false);
+    React__default.default.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    React__default.default.useEffect(() => {
+        onChange && onChange(open);
+    }, [open]);
+    let trigger;
+    const rest = [];
+    React__default.default.Children.forEach(children, (child) => {
+        const type = React__default.default.isValidElement(child) && child.type?.displayName;
+        if (type && type.toLowerCase().includes('trigger')) {
+            trigger = child;
+        }
+        else {
+            rest.push(child);
+        }
+    });
+    return (React__default.default.createElement(ModalContext.Provider, { value: [open, setOpen], ...props },
+        trigger,
+        (open || alwaysRender) && rest));
+};
+const ModalTrigger = ({ children: child, }) => {
+    const [, setOpen] = React__default.default.useContext(ModalContext);
+    return (child &&
+        React__default.default.cloneElement(child, {
+            onClick: _function.callAll(() => setOpen(true), child.props.onClick, (event) => {
+                event?.stopPropagation();
+                event?.preventDefault();
+            }),
+        }));
+};
+ModalTrigger.displayName = 'Modal.Trigger';
+Modal.Trigger = ModalTrigger;
+const ModalDismiss = ({ children: child, setClosed, }) => {
+    const [, setOpen] = React__default.default.useContext(ModalContext);
+    return (child &&
+        React__default.default.cloneElement(child, {
+            onClick: _function.callAll(() => setOpen(false), child.props.onClick, (event) => {
+                setClosed && setClosed();
+                event?.stopPropagation();
+                event?.preventDefault();
+            }),
+        }));
+};
+ModalDismiss.displayName = 'Modal.Dismiss';
+Modal.Dismiss = ModalDismiss;
+const ModalContent = ({ backgroundDark = true, children, footer, header, setClosed, sx, ...props }) => {
+    const [open, setOpen] = React__default.default.useContext(ModalContext);
+    const handleOutsideClick = (event) => {
+        if (event.currentTarget != event.target)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.preventDefault();
+        setClosed ? setClosed() : setOpen(false);
+    };
+    return (React__default.default.createElement(Wrapper, { "$backgroundDark": backgroundDark, "$open": open, onClick: handleOutsideClick },
+        React__default.default.createElement(Content, { ...props, "$sx": sx },
+            header && (React__default.default.createElement("div", { className: "header" },
+                React__default.default.createElement("div", null, header),
+                React__default.default.createElement(Modal.Dismiss, { setClosed: setClosed },
+                    React__default.default.createElement(button.Button, { icon: React__default.default.createElement(close.Close, null), type: "special" })))),
+            children,
+            footer && React__default.default.createElement("div", { className: "footer" }, footer))));
+};
+ModalContent.displayName = 'Modal.Content';
+Modal.Content = ModalContent;
+const Wrapper = styled.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.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 : '')}
+`;
+
+exports.Modal = Modal;

package/dist/components/surfaces/portal/portal.js

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
+
+const Portal = ({ children, wrapperId = 'root-portal-wrapper', }) => {
+    const [wrapper, setWrapper] = React__default.default.useState(null);
+    React__default.default.useEffect(() => {
+        let element = document.getElementById(wrapperId);
+        let portalCreated = false;
+        if (!element) {
+            portalCreated = true;
+            element = document.createElement('div');
+            element.setAttribute('id', wrapperId);
+            document.body.appendChild(element);
+        }
+        setWrapper(element);
+        return () => {
+            if (portalCreated && element?.parentNode) {
+                element.parentNode.removeChild(element);
+            }
+        };
+    }, [wrapperId]);
+    if (!wrapper) {
+        return null;
+    }
+    return ReactDOM__default.default.createPortal(children, wrapper);
+};
+
+exports.Portal = Portal;

package/dist/components/surfaces/post/post.js

@@ -0,0 +1,246 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var Image = require('next/image');
+var Link = require('next/link');
+var styled = require('styled-components');
+var heading = require('../../atoms/typography/heading.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+require('../../atoms/box/box.js');
+require('../../atoms/typography/display.js');
+require('../../atoms/typography/typography.js');
+var time_ago = require('../../atoms/time_ago/time_ago.js');
+var button = require('../../actions/button/button.js');
+var avatar = require('../../iconography/avatar/avatar.js');
+var lock = require('../../../icons/security/lock.js');
+var modal = require('../modal/modal.js');
+var chevron_left = require('../../../icons/arrow/chevron_left.js');
+var chevron_right = require('../../../icons/arrow/chevron_right.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
+var Link__default = /*#__PURE__*/_interopDefaultCompat(Link);
+
+const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
+    const componentId = React__default.default.useId();
+    const [curr, setCurr] = React__default.default.useState(-1);
+    const [modalContentSize, setModalContentSize] = React__default.default.useState({
+        x: '30vw',
+        y: '30vh',
+    });
+    React__default.default.useEffect(() => {
+        const handleKeyEvent = (event) => {
+            if (event.key === 'ArrowLeft') {
+                handleDecrement();
+            }
+            else if (event.key === 'ArrowRight') {
+                handleIncrement();
+            }
+            else if (event.key === 'Escape' || event.key === 'Enter') {
+                setCurr(-1);
+            }
+        };
+        if (typeof document !== 'undefined' && !!images?.length) {
+            document.addEventListener('keydown', handleKeyEvent);
+        }
+        return () => {
+            images?.length &&
+                document.removeEventListener('keydown', handleKeyEvent);
+        };
+    }, []);
+    const _actions = React__default.default.Children.toArray(actions);
+    const _comments = React__default.default.Children.toArray(children);
+    const handleImageLoad = (event) => {
+        const { naturalHeight, naturalWidth } = event.target;
+        let x = `${naturalWidth}px`;
+        let y = `${naturalHeight}px`;
+        // if natural size is smaller than window height and width
+        if (window?.innerHeight < naturalHeight &&
+            window?.innerWidth < naturalWidth) {
+            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
+            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
+            // just smaller than height
+        }
+        else if (window?.innerHeight < naturalHeight) {
+            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
+            y = '95vh';
+            // just smaller than width
+        }
+        else if (window?.innerWidth < naturalWidth) {
+            x = '95vw';
+            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
+        }
+        setModalContentSize({ x, y });
+    };
+    const handleIncrement = () => {
+        setCurr((prev) => {
+            if (images?.length && prev !== images.length - 1) {
+                return prev + 1;
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    const handleDecrement = () => {
+        setCurr((prev) => {
+            if (images?.length && prev !== 0) {
+                return prev - 1;
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    return (React__default.default.createElement(Wrapper, { id: id },
+        curr > -1 && !!images?.[curr] && (React__default.default.createElement(modal.Modal, { alwaysRender: false, controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
+            React__default.default.createElement(modal.Modal.Content, { sx: `
+            position: relative; 
+            height: ${modalContentSize.y}; 
+            width: ${modalContentSize.x};
+            margin: 0 auto;
+            ` },
+                React__default.default.createElement(NavArrow, { "$side": "left", "$visible": curr !== 0, onClick: handleDecrement },
+                    React__default.default.createElement(chevron_left.ChevronLeft, { color: "white", size: 48 })),
+                React__default.default.createElement(Image__default.default, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'cover' } }),
+                React__default.default.createElement(NavArrow, { "$side": "right", "$visible": curr !== images.length - 1, onClick: handleIncrement },
+                    React__default.default.createElement(chevron_right.ChevronRight, { color: "white", size: 48 }))))),
+        React__default.default.createElement(Header, null,
+            React__default.default.createElement(avatar.Avatar, { as: !!authorHref ? Link__default.default : 'button', href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React__default.default.createElement(paragraph.P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 },
+                    React__default.default.createElement(time_ago.TimeAgo, { date: new Date(createdDate) })), title: React__default.default.createElement(heading.H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx, sx: !!authorHref ? 'img { cursor: pointer; }' : undefined }),
+            dropdown),
+        !!content?.length && (React__default.default.createElement("div", { style: { padding: '16px 24px' } },
+            React__default.default.createElement(paragraph.P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
+        !!images?.length && (React__default.default.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
+            images.slice(0, 4).map((url, i) => (React__default.default.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
+                React__default.default.createElement(Image__default.default, { alt: "", fill: true, onClick: () => setCurr(i), quality: 100, src: url, style: { cursor: 'pointer' } })))),
+            images.length > 4 && (React__default.default.createElement(heading.H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
+                "+",
+                images.length - 4)))),
+        !!images?.length && isPaywalled && (React__default.default.createElement(PaywallWrapper, null,
+            React__default.default.createElement(lock.Lock, { size: 40, color: "grey-7" }),
+            React__default.default.createElement(paragraph.P, { "$fontSize": 14, "$bold": true, "$lineHeight": 20, "$color": "white" },
+                "Become a member",
+                React__default.default.createElement("br", null),
+                "to unlock this post"),
+            React__default.default.createElement(button.Button, { onClick: onJoin, size: "small", sx: "width: 213px;", type: "outlined" }, "Join now"))),
+        !!_actions.length && (React__default.default.createElement(ActionsWrapper, null, !isPaywalled && _actions)),
+        hasComments && !!_comments.length && (React__default.default.createElement(CommentWrapper, null, _comments))));
+};
+const Wrapper = styled.styled.div `
+  position: relative;
+  max-width: 700px;
+  width: 100%;
+  background-color: var(--color-white);
+  border-radius: 24px;
+  box-shadow: var(--elevation-7);
+
+  label > div {
+    box-shadow: var(--elevation-6);
+    border-radius: 16px;
+  }
+`;
+const Header = styled.styled.div `
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--color-grey-9);
+`;
+const ImagesWrapper = styled.styled.div `
+  position: relative;
+  display: flex;
+  gap: 8px;
+  flex-flow: row wrap;
+  justify-content: space-between;
+
+  @media screen and (max-width: 532px) {
+    overflow-y: auto;
+  }
+
+  .more-than {
+    position: absolute;
+    bottom: 94px;
+    right: 154px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
+  }
+
+  ${({ $numImages }) => $numImages > 1
+    ? `
+    div {
+      min-width: calc(50% - 4px);
+      max-width: calc(50% - 4px);
+
+      flex:1;
+      img {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+    }`
+    : `
+    div > img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+    `}
+
+  ${({ $isPaywalled }) => $isPaywalled
+    ? /** TODO REMOVE USER CAN CHANGE -> SECURITY */
+        `
+    filter: blur(10px) brightness(0.6);
+    clip-path: inset(0px 0px 0px 0px);`
+    : ''}
+`;
+const ImageWrapper = styled.styled.div `
+  position: relative;
+  aspect-ratio: 700 / 427;
+  flex: 1;
+  min-width: min(227px, 80vw);
+`;
+const PaywallWrapper = styled.styled.div `
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  top: 310px;
+  left: 242px;
+`;
+const ActionsWrapper = styled.styled.div `
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 24px;
+`;
+const CommentWrapper = styled.styled.div `
+  padding: 24px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 24px;
+`;
+const NavArrow = styled.styled.button `
+  width: 48px;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  z-index: 100;
+  top: calc(50vh - 75px);
+  background-color: rgba(0, 0, 0, 0.5);
+  ${({ $side }) => $side}: 0;
+  border-radius: ${({ $side }) => $side === 'left' ? '0 12px 12px 0' : '12px 0 0 12px'};
+  ${({ $visible }) => $visible
+    ? 'visibility: visible; cursor: pointer;'
+    : 'visibility: hidden; pointer-events: none;'}
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;
+
+exports.Post = Post;

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

@@ -0,0 +1,192 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
+    return (React__default.default.createElement(box.Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": padding, sx: compact ? 'width: fit-content;' : '' },
+        !!header && header,
+        React__default.default.createElement(box.Box, { "$borderRadius": "small", sx: border ? 'border: 1px solid var(--color-grey-8);' : '' },
+            React__default.default.createElement(TableElement, { "$compact": compact, "$separated": separated, "$striped": striped, "$sx": sx }, children)),
+        !!footer && footer));
+};
+const TableElement = styled.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__default.default.createElement(HeadElement, { ...rest }, children);
+};
+const HeadElement = styled.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__default.default.createElement(BodyElement, { ...rest }, children);
+};
+const BodyElement = styled.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__default.default.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__default.default.createElement(RowElement, { onClick: handleClick, "$disabled": disabled, "$hoverable": hoverable, "$isAnchor": !!href, "$selected": selected, "$sx": sx, ...rest }, children));
+};
+const RowElement = styled.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__default.default.createElement(CellElement, { "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' },
+        React__default.default.createElement("div", null, children)));
+};
+const CellElement = styled.styled.td `
+  width: ${({ $width }) => $width};
+  height: 20px;
+  font-family: var(--font-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;
+const HeaderCell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
+    const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
+    return (React__default.default.createElement(HeadCellElement, { as: "th", "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' }, children));
+};
+const HeadCellElement = styled.styled(CellElement) `
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+`;
+HeaderCell.displayName = 'Table.HeaderCell';
+Table.HeaderCell = HeaderCell;
+
+exports.Table = Table;

package/dist/icons/arrow/arrow_all.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var icon = require('../../components/iconography/icon/icon.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ArrowAll = (props) => {
+    return (React__default.default.createElement(icon.Icon, { ...props },
+        React__default.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.0573 8.66671H8.66677V13.0572L10.1954 11.5286L11.1382 12.4714L8.0001 15.6095L4.86203 12.4714L5.80484 11.5286L7.33343 13.0572V8.66671H2.94291L4.47151 10.1953L3.5287 11.1381L0.390625 8.00004L3.5287 4.86197L4.47151 5.80478L2.94291 7.33337H7.33343V2.94285L5.80484 4.47144L4.86203 3.52864L8.0001 0.390564L11.1382 3.52864L10.1954 4.47144L8.66677 2.94285V7.33337H13.0573L11.5287 5.80478L12.4715 4.86197L15.6096 8.00004L12.4715 11.1381L11.5287 10.1953L13.0573 8.66671Z" })));
+};
+
+exports.ArrowAll = ArrowAll;

package/dist/icons/arrow/arrow_all_diagonal.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var icon = require('../../components/iconography/icon/icon.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ArrowAllDiagonal = (props) => {
+    return (React__default.default.createElement(icon.Icon, { ...props },
+        React__default.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.94281 8L12.6667 11.7239V9.33333H14V14H9.33333V12.6667H11.7239L8 8.94281L4.27614 12.6667H6.66667V14H2V9.33333H3.33333V11.7239L7.05719 8L3.33333 4.27614V6.66667H2V2H6.66667V3.33333H4.27614L8 7.05719L11.7239 3.33333H9.33333V2H14V6.66667H12.6667V4.27614L8.94281 8Z" })));
+};
+
+exports.ArrowAllDiagonal = ArrowAllDiagonal;

package/dist/icons/arrow/arrow_both_downwards.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var icon = require('../../components/iconography/icon/icon.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ArrowBothDownwards = (props) => {
+    return (React__default.default.createElement(icon.Icon, { ...props },
+        React__default.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.27614 3.33333L12.6667 11.7239V9.33333H14V14H9.33333V12.6667H11.7239L3.33333 4.27614V6.66667H2V2H6.66667V3.33333H4.27614Z" })));
+};
+
+exports.ArrowBothDownwards = ArrowBothDownwards;

package/dist/icons/arrow/arrow_both_upwards.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var icon = require('../../components/iconography/icon/icon.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ArrowBothUpwards = (props) => {
+    return (React__default.default.createElement(icon.Icon, { ...props },
+        React__default.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.33333 3.33333V2H14V6.66667H12.6667V4.27614L4.27614 12.6667H6.66667V14H2V9.33333H3.33333V11.7239L11.7239 3.33333H9.33333Z" })));
+};
+
+exports.ArrowBothUpwards = ArrowBothUpwards;