@soul-refiner/design-system 0.1.27 → 0.1.29

package/dist/components/feedback/progress/progress.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import styled from 'styled-components';
+import { colorReference } from 'common';
+import { Box, P } from 'components';
+import { CheckmarkCircle, Checkmarks, Close, MinusCircle, Pause } from 'icons';
+export const Progress = ({ hasError, progress, subtitle, sx, title, type, }) => {
+    const isComplete = !hasError && progress > 99;
+    const isDetailed = type === 'detailed';
+    const percent = hasError || isComplete ? 100 : progress;
+    const displayPercent = hasError ? '-' : percent + '%';
+    const color = hasError ? 'red-4' : isComplete ? 'green-3' : 'primary-blue-2';
+    const gradientColors = hasError
+        ? {
+            start: 'var(--color-red-6)',
+            end: 'var(--color-red-4)',
+            empty: 'var(--color-red-8)',
+            bg: 'var(--color-red-9)',
+        }
+        : isComplete
+            ? {
+                start: 'var(--color-green-5)',
+                end: 'var(--color-green-3)',
+                empty: 'var(--color-green-8)',
+                bg: 'var(--color-green-9)',
+            }
+            : {
+                start: '#abcfed',
+                end: 'var(--color-primary-blue-2)',
+                empty: 'var(--color-primary-blue-3)',
+                bg: 'var(--color-primary-blue-4)',
+            };
+    const icon = hasError ? (React.createElement(Close, { size: 24, color: color })) : isComplete ? (React.createElement(Checkmarks, { size: 24, color: color })) : (React.createElement(Pause, { size: 24, color: color }));
+    return (React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16, sx: sx },
+        isDetailed && (React.createElement(IconWrapper, { "$completedDegree": Math.round(percent * 3.6), "$gradientColors": gradientColors },
+            React.createElement(IconInnerWrapper, { "$bg": gradientColors.bg }, icon))),
+        React.createElement(Box, { "$dir": "column", "$flex": 1, "$gap": 8 },
+            React.createElement(Box, null,
+                title && (React.createElement(P, { "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, title)),
+                isComplete && (React.createElement(CheckmarkCircle, { color: "green-3", size: 24, sx: "margin-left: auto;" })),
+                hasError && (React.createElement(MinusCircle, { color: "red-4", size: 24, sx: "margin-left: auto;" }))),
+            React.createElement(BarWrapper, null,
+                React.createElement(Bar, { "$color": colorReference[color], "$percent": percent })),
+            subtitle && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle))),
+        isDetailed && (React.createElement(P, { "$color": "grey-4", "$textAlign": "center", sx: "width: 72px;" }, displayPercent))));
+};
+const BarWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 12px;
+  border-radius: 32px;
+  background-color: var(--color-grey-8);
+`;
+const Bar = styled.div `
+  width: ${({ $percent }) => $percent}%;
+  height: 12px;
+  background-color: ${({ $color }) => $color};
+  border-radius: 32px;
+`;
+const IconWrapper = styled.div `
+  position: relative;
+  display: block;
+  width: 45px;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: conic-gradient(
+    ${({ $gradientColors }) => $gradientColors.start},
+    ${({ $gradientColors }) => $gradientColors.end}
+      ${({ $completedDegree }) => $completedDegree}deg,
+    ${({ $gradientColors }) => $gradientColors.empty}
+      ${({ $completedDegree }) => $completedDegree}deg 360deg
+  );
+  border: 1px solid ${({ $gradientColors }) => $gradientColors.bg};
+`;
+const IconInnerWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 39px;
+  width: 39px;
+  border-radius: 50%;
+  background-color: ${({ $bg }) => $bg};
+`;

package/dist/components/feedback/progress/progress.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Progress } from './progress';
+const meta = {
+    title: 'Feedback/Progress Bar',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = (args) => (React.createElement(Progress, { sx: "min-width: 452px;", ...args }));
+export const Default = Story.bind({});
+Default.argTypes = {
+    hasError: {
+        type: 'boolean',
+    },
+    progress: {
+        type: 'number',
+        control: 'range',
+        step: 1,
+    },
+    type: {
+        options: ['compact', 'detailed'],
+        control: 'select',
+    },
+};
+Default.args = {
+    hasError: false,
+    progress: 52,
+    subtitle: 'Support Text',
+    title: 'Title label',
+    type: 'compact',
+};
+export default meta;

package/dist/components/feedback/toast/index.js

@@ -0,0 +1 @@
+export { Toast } from './toast';

package/dist/components/feedback/toast/toast.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Button, P } from 'components';
+import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from 'icons';
+export const Toast = ({ content, href, onClose, type }) => {
+    const iconLookup = {
+        error: React.createElement(AlertOctogon, { size: 24 }),
+        info: React.createElement(Information, { size: 24 }),
+        success: React.createElement(AlertCircle, { size: 24 }),
+        warning: React.createElement(AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type },
+        iconLookup[type],
+        React.createElement(P, { as: "span" }, content),
+        href && (React.createElement(P, { sx: "padding-left: 8px;", as: "a", href: href, "$color": "primary-blue-2" }, "View")),
+        React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" })));
+};
+const Wrapper = styled.output `
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 99vw;
+  max-width: 476px;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  display: flex;
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+
+  &::before {
+    position: absolute;
+    content: '';
+    left: 0px;
+    width: 4px;
+    height: 100%;
+    background-color: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+    border-radius: 8px 0px 0px 8px;
+  }
+
+  & > svg {
+    fill: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+  }
+
+  a {
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  button {
+    padding: 0px;
+    margin-left: auto;
+  }
+
+  ${Styles.flex}
+`;

package/dist/components/feedback/toast/toast.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Toast } from './toast';
+const meta = {
+    title: 'Feedback/Toast',
+};
+const Story = (args) => React.createElement(Toast, { ...args });
+export const Default = Story.bind({});
+Default.argTypes = {
+    content: {
+        type: 'string',
+    },
+    href: {
+        type: 'string',
+    },
+    type: {
+        type: 'string',
+        options: ['error', 'info', 'success', 'warning'],
+        control: 'select',
+    },
+};
+Default.args = {
+    content: 'Notification message title',
+    href: '',
+    type: 'success',
+};
+export default meta;

package/dist/components/feedback/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip } from './tooltip';

package/dist/components/feedback/tooltip/tooltip.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+export const Tooltip = ({ children, content, place = 'top' }) => {
+    const id = React.useId();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ReactTooltip, { id: id, place: place, style: {
+                fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 400,
+                lineHeight: '150%',
+                textAlign: 'center',
+                padding: '8px',
+                maxWidth: '280px',
+                backgroundColor: 'var(--color-grey-3)',
+                boxShadow: 'var(--elevation-2)',
+                borderRadius: '4px',
+            } }),
+        React.Children.map(children, (child) => {
+            return (React.isValidElement(child) &&
+                React.cloneElement(child, {
+                    'data-tooltip-id': id,
+                    'data-tooltip-content': content,
+                }));
+        })));
+};

package/dist/components/feedback/tooltip/tooltip.stories.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box, Button } from 'components';
+import { Tooltip } from './tooltip';
+const meta = {
+    title: 'Feedback/Tooltip',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = (args) => (React.createElement(Box, null,
+    React.createElement(Tooltip, { ...args },
+        React.createElement(Button, { type: "special" }, "Trigger 1")),
+    React.createElement(Tooltip, { ...args },
+        React.createElement(Button, { type: "special" }, "Trigger 2")),
+    React.createElement(Tooltip, { ...args },
+        React.createElement(Button, { type: "special" }, "Trigger 3")),
+    React.createElement(Tooltip, { ...args },
+        React.createElement(Button, { type: "special" }, "Trigger 4"))));
+export const Default = Story.bind({});
+Default.args = {
+    content: 'Assertively deploy resource maximizing supply chains rather than highly efficient information. Progressively leverage others installed base resources whereas tactical.',
+    place: 'bottom',
+};
+Default.argTypes = {
+    place: {
+        options: [
+            'top',
+            'top-start',
+            'top-end',
+            'right',
+            'right-start',
+            'right-end',
+            'bottom',
+            'bottom-start',
+            'bottom-end',
+            'left',
+            'left-start',
+            'left-end',
+        ],
+        control: 'select',
+    },
+};
+export default meta;

package/dist/components/iconography/avatar/avatar.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+import { Approved, Busy, Declined, Default, Focus, Locked, Offline, Online, Subscribed, } from './icons';
+/**
+ * Lookup tables for sizes
+ */
+const iconReference = {
+    approved: Approved,
+    busy: Busy,
+    declined: Declined,
+    focus: Focus,
+    locked: Locked,
+    none: () => React.createElement(React.Fragment, null),
+    online: Online,
+    offline: Offline,
+    subscribed: Subscribed,
+};
+const iconSize = {
+    '96': 18,
+    '72': 18,
+    '64': 18,
+    '56': 15,
+    '48': 15,
+    '40': 15,
+    '36': 14,
+    '32': 14,
+    '24': 12,
+    '16': 8,
+};
+const iconOffsetX = {
+    '96': -23,
+    '72': -21,
+    '64': -20,
+    '56': -16,
+    '48': -15,
+    '40': -13,
+    '36': -12,
+    '32': -12,
+    '24': -10,
+    '16': -8,
+};
+const iconOffsetY = {
+    '96': 5,
+    '72': 3,
+    '64': 2,
+    '56': 1,
+    '48': 0,
+    '40': -2,
+    '36': -2,
+    '32': -2,
+    '24': -2,
+    '16': -1,
+};
+/**
+ *
+ * Avatar
+ */
+const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, ...rest }) => {
+    const [displayDefault, setDisplayDefault] = React.useState(false);
+    const Icon = iconReference?.[status ?? 'none'];
+    return (React.createElement(Box, { "$align": "center", "$gap": 18, ...rest, sx: sx },
+        React.createElement(Container, { as: as, "$size": size, href: href },
+            !displayDefault && (React.createElement("img", { src: image ?? '', onError: () => setDisplayDefault(true) })),
+            displayDefault && React.createElement(Default, null),
+            React.createElement("div", null,
+                React.createElement(Icon, null))),
+        (title || subtitle) && (React.createElement(TextContainer, { "$textPosition": textPosition },
+            title && (React.createElement(H, { as: "h3", "$bold": true, "$color": "grey-2", "$textClampLines": 1, sx: "font-size: 26px;" }, title)),
+            subtitle && (React.createElement(P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle))))));
+};
+Avatar.displayName = 'Avatar';
+const Container = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  cursor: ${({ as }) => as && (as === 'a' || as === 'button') ? 'pointer' : 'initial'};
+  padding: 0px;
+  border: 0px;
+  position: relative;
+  background-color: transparent;
+
+  > img,
+  > svg {
+    flex-shrink: 0;
+    border-radius: 50%;
+    overflow: hidden;
+    object-fit: cover;
+
+    ${({ $size }) => `
+    width: ${$size}px;
+    height: ${$size}px;
+    `}
+  }
+
+  div > svg {
+    position: relative;
+    width: ${({ $size }) => iconSize[`${$size}`]}px;
+    margin-left: ${({ $size }) => iconOffsetX[`${$size}`]}px;
+    top: ${({ $size }) => iconOffsetY[`${$size}`]}px;
+  }
+`;
+const TextContainer = styled.div `
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 4px;
+  order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
+`;
+const Group = ({ children, numDisplayed, total }) => {
+    let size = 0;
+    // filter out ReactNodes and ReactElements that are not Avatars
+    const displayedElements = React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child) &&
+            child.type.displayName === 'Avatar') {
+            size = child.props.size;
+            return React.createElement(AvatarWrapper, { "$index": index }, child);
+        }
+        return null;
+    }).slice(0, numDisplayed);
+    displayedElements.push(React.createElement(Total, { "$index": displayedElements.length + 1, "$size": size },
+        React.createElement(P, { "$fontSize": 11, "$lineHeight": 20 },
+            "+",
+            total - numDisplayed)));
+    return React.createElement(Box, null, displayedElements);
+};
+Group.displayName = 'Avatar.Group';
+Avatar.Group = Group;
+const AvatarWrapper = styled.div `
+  position: relative;
+  z-index: ${({ $index }) => `-${$index}`};
+  border-radius: 50%;
+  border: 2px solid var(--color-white);
+  margin-right: -8px;
+`;
+const Total = styled.div `
+  position: relative;
+  z-index: ${({ $index }) => `-${$index}`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${({ $size }) => `
+    width: ${$size}px;
+    height: ${$size}px;
+  `}
+  border-radius: 50%;
+  background-color: var(--color-grey-9);
+`;
+export { Avatar };

package/dist/components/iconography/avatar/avatar.stories.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Avatar } from './avatar';
+const meta = {
+    title: 'Iconography/Avatar',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = (args) => React.createElement(Avatar, { ...args });
+const GroupStory = ({ ...args }) => (React.createElement(Avatar.Group, { ...args },
+    React.createElement(Avatar, { image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 }),
+    React.createElement(Avatar, { image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 }),
+    React.createElement(Avatar, { image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 }),
+    React.createElement(Avatar, { image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 }),
+    React.createElement(Avatar, { image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 })));
+export const Default = Story.bind({});
+Default.argTypes = {
+    size: {
+        options: [96, 72, 64, 56, 48, 40, 36, 32, 24],
+        control: 'select',
+    },
+    status: {
+        options: [
+            'offline',
+            'focus',
+            'busy',
+            'online',
+            'subscribed',
+            'locked',
+            'declined',
+            'approved',
+            null,
+        ],
+        control: 'select',
+    },
+    textPosition: {
+        type: 'string',
+        options: ['left', 'right'],
+        control: 'select',
+    },
+};
+Default.args = {
+    image: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+    size: 96,
+    status: 'online',
+    subtitle: '1 hour ago',
+    textPosition: 'right',
+    title: 'Cody Moore',
+};
+export const Group = GroupStory.bind({});
+Group.args = {
+    numDisplayed: 3,
+    total: 5,
+};
+export default meta;

package/dist/components/iconography/avatar/icons/approved.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const Approved = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#09B3A1", rx: "8" }),
+    React.createElement("path", { fill: "#fff", d: "M6.485 8.521a1.1 1.1 0 1 0-1.555 1.555l2.199 2.199a1.1 1.1 0 0 0 1.555 0l4.398-4.398a1.1 1.1 0 0 0-1.555-1.555l-3.62 3.62-1.422-1.421Z" }),
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));

package/dist/components/iconography/avatar/icons/busy.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const Busy = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#F34436", rx: "8" }),
+    React.createElement("path", { fill: "#fff", d: "m7.839 5.526 4.622 4.622c.33.33.33.825 0 1.155l-1.156 1.155a.798.798 0 0 1-1.155 0L5.528 7.838a.798.798 0 0 1 0-1.156l1.156-1.155a.798.798 0 0 1 1.155 0Z" }),
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));

package/dist/components/iconography/avatar/icons/declined.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const Declined = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#F34436", rx: "8" }),
+    React.createElement("path", { fill: "#fff", d: "M10.47 9.015 12 7.479c.402-.404.4-1.056-.005-1.457a1.034 1.034 0 0 0-1.46.005L9.013 7.555 7.464 6.003A1.034 1.034 0 0 0 6.004 6 1.028 1.028 0 0 0 6 7.457l1.556 1.559-1.522 1.528c-.402.403-.4 1.056.004 1.457.404.4 1.058.399 1.46-.005l1.515-1.52 1.486 1.489a1.034 1.034 0 0 0 1.46.003 1.028 1.028 0 0 0 .003-1.457L10.47 9.015Z" }),
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));

package/dist/components/iconography/avatar/icons/default.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const Default = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 40 40" },
+    React.createElement("path", { fill: "#9DA7B2", fillRule: "evenodd", d: "M18.86 4.074c-1.343.172-2.791.707-3.872 1.43-.68.454-1.672 1.376-2.148 1.995a9.549 9.549 0 0 0-1.714 3.824c-.158.832-.16 2.573-.006 3.384a9.399 9.399 0 0 0 1.436 3.447c.466.701 1.46 1.711 2.167 2.202l.556.387-.517.182c-.705.247-2.2.992-2.906 1.447-1.454.938-3.103 2.506-4.07 3.87a15.669 15.669 0 0 0-2.603 6.205c-.177.989-.242 2.697-.114 3.005.146.353.466.548.898.548.683 0 1.054-.389 1.055-1.105.001-.562.13-1.684.282-2.448.26-1.312.87-2.892 1.563-4.043.814-1.356 2.114-2.808 3.308-3.694 1.842-1.368 3.803-2.192 6.015-2.529.28-.043 1.124-.111 1.874-.153.75-.04 1.601-.13 1.891-.198.691-.161 1.536-.467 2.167-.785.792-.399 1.841-1.187 2.437-1.831 1.223-1.322 1.991-2.866 2.334-4.687.138-.735.12-2.41-.033-3.186-.372-1.869-1.231-3.456-2.576-4.756-.395-.382-.928-.837-1.186-1.011a9.262 9.262 0 0 0-3.797-1.466 8.33 8.33 0 0 0-2.442-.034Zm2.677 2.178c.755.18 1.733.618 2.408 1.077.589.4 1.345 1.152 1.732 1.723.587.865 1 1.867 1.174 2.854.045.255.082.77.082 1.143 0 1.708-.668 3.39-1.866 4.697-.822.895-1.965 1.591-3.266 1.986-.6.182-.82.208-1.778.209-.886.001-1.213-.031-1.718-.17-1.257-.343-2.528-1.093-3.378-1.99-.742-.785-1.377-1.945-1.674-3.057-.08-.302-.166-.935-.19-1.408-.036-.683-.014-1.01.109-1.601.085-.409.265-1.01.401-1.335.628-1.51 1.874-2.844 3.326-3.563 1.078-.534 1.831-.709 3.084-.716.647-.005 1.082.038 1.554.15Zm7.33 17.533c-.284.154-.45.494-.45.921 0 .288.052.414.303.726.167.208.503.571.747.808.52.504 1.295 1.529 1.745 2.31.708 1.226 1.296 2.848 1.535 4.234.064.373.147 1.132.184 1.686l.067 1.008.285.26c.252.232.335.262.723.262.398 0 .464-.026.715-.276l.276-.277-.044-1.266c-.053-1.488-.27-2.65-.762-4.079-.398-1.157-1.243-2.815-1.908-3.745-.606-.847-1.5-1.864-2.062-2.343-.363-.31-.455-.35-.776-.348-.2.002-.46.055-.578.119Z", clipRule: "evenodd" })));

package/dist/components/iconography/avatar/icons/focus.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const Focus = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#fff", rx: "8" }),
+    React.createElement("path", { fill: "#A246C1", d: "M9 16A7 7 0 1 1 9 2a7 7 0 0 1 0 14Zm0-2.333a4.667 4.667 0 1 0 0-9.334 4.667 4.667 0 0 0 0 9.334Zm0-2.334a2.333 2.333 0 1 1 0-4.666 2.333 2.333 0 0 1 0 4.666Z" }),
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));

package/dist/components/iconography/avatar/icons/index.js

@@ -0,0 +1,9 @@
+export { Approved } from './approved';
+export { Busy } from './busy';
+export { Declined } from './declined';
+export { Default } from './default';
+export { Focus } from './focus';
+export { Locked } from './locked';
+export { Offline } from './offline';
+export { Online } from './online';
+export { Subscribed } from './subscribed';

package/dist/components/iconography/avatar/icons/locked.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const Locked = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#B3B7BC", rx: "8" }),
+    React.createElement("path", { fill: "#4A4F55", d: "M9.023 4.594H8.98c-1.221 0-2.21.973-2.21 2.175V7.89h1.116V6.78c0-.6.494-1.087 1.105-1.087h.022c.61 0 1.105.486 1.105 1.087v1.11h1.116V6.77c0-1.203-.989-2.176-2.21-2.176ZM6.77 7.89h1.116V8.99H6.769V7.89Zm3.348 0h1.116V8.99h-1.116V7.89Zm0 1.099H6.77c-.616 0-1.116.492-1.116 1.099v1.648c0 .91.742 1.648 1.655 1.648h3.386c.914 0 1.655-.732 1.655-1.648v-1.648c0-.607-.5-1.1-1.116-1.1h-1.116Z" }),
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));

package/dist/components/iconography/avatar/icons/offline.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const Offline = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#4A4F55", rx: "8" }),
+    React.createElement("path", { fill: "#B3B7BC", d: "M9 12.3a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6Z" }),
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));

package/dist/components/iconography/avatar/icons/online.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const Online = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#3CC260", rx: "8" }),
+    React.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));

package/dist/components/iconography/avatar/icons/subscribed.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const Subscribed = () => (React.createElement("svg", { fill: "none", viewBox: "0 0 20 20" },
+    React.createElement("path", { fill: "#fff", fillRule: "evenodd", d: "M19.088 9.994a9.088 9.088 0 1 1-18.176 0 9.088 9.088 0 0 1 18.176 0Z", clipRule: "evenodd" }),
+    React.createElement("path", { fill: "url(#a)", d: "M17.088 9.994a7.088 7.088 0 1 1-14.176 0 7.088 7.088 0 0 1 14.176 0Z" }),
+    React.createElement("path", { fill: "#fff", d: "M9.25 5h1.5v.936c.338.048.648.134.927.26.458.202.813.485 1.067.847.255.362.386.781.394 1.258h-1.665a.976.976 0 0 0-.413-.734c-.244-.175-.575-.262-.992-.262-.283 0-.523.039-.718.117a1.01 1.01 0 0 0-.45.316.748.748 0 0 0-.152.461.645.645 0 0 0 .092.375c.07.107.165.2.285.278.12.075.26.141.418.199.157.054.326.101.505.14l.738.172c.359.078.688.183.988.313.299.13.559.29.778.48a2.003 2.003 0 0 1 .698 1.559c-.003.49-.131.914-.385 1.273-.252.357-.615.634-1.091.832-.302.125-.643.21-1.024.255V15h-1.5v-.942a4.002 4.002 0 0 1-.923-.242c-.49-.198-.872-.49-1.148-.879-.273-.39-.416-.873-.429-1.449h1.681c.019.269.098.492.237.672.142.177.33.311.566.402.238.089.507.133.806.133.294 0 .55-.041.767-.125.219-.083.389-.199.509-.347a.79.79 0 0 0 .18-.512c0-.18-.054-.33-.164-.453a1.248 1.248 0 0 0-.473-.313 4.908 4.908 0 0 0-.759-.234l-.894-.219c-.693-.164-1.24-.42-1.641-.77-.402-.348-.601-.818-.598-1.41-.003-.484.13-.907.397-1.269.27-.362.64-.645 1.111-.848.242-.104.5-.181.775-.232V5Z" }),
+    React.createElement("defs", null,
+        React.createElement("radialGradient", { id: "a", cx: "0", cy: "0", r: "1", gradientTransform: "rotate(-49.924 18.2 -.497) scale(14.7338 19.4196)", gradientUnits: "userSpaceOnUse" },
+            React.createElement("stop", { stopColor: "#09B3A1" }),
+            React.createElement("stop", { offset: "1", stopColor: "#3AC15E" })))));

package/dist/components/iconography/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar } from './avatar';

package/dist/components/iconography/icon/icon.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { colorReference } from 'common';
+export const Icon = ({ as, children, color = 'grey-3', size = 16, sx, ...rest }) => {
+    return (React.createElement(SVG, { as: as, width: size, height: size, viewBox: "0 0 16 16", fill: colorReference[color], xmlns: "http://www.w3.org/2000/svg", "$sx": sx, ...rest }, children));
+};
+const SVG = styled.svg `
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;