@soul-refiner/design-system 1.7.22 → 2.0.0-alpha.0

package/dist/components/feedback/notification/notification.js

@@ -1,72 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { Box, Button, P } from '../../';
-import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from '../../../icons';
-export const Notification = ({ content, href, onClose, sx, title, 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: href ? 'a' : 'output', href: href, "$dir": "column", "$gap": 8, "$sx": sx, "$type": type },
-        React.createElement(Box, { "$dir": "row", "$gap": 8, "$flex": 1 },
-            iconLookup[type],
-            React.createElement(P, { as: "span", "$semiBold": true }, title),
-            onClose && (React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, sx: "margin-left: auto;", type: "special" }))),
-        React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 4 },
-            React.createElement(P, { as: "span", sx: "padding-left: 32px;" }, content))));
-};
-const Wrapper = styled.output `
-  text-decoration: none;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 16px;
-  display: flex;
-  background-color: ${({ $type }) => $type === 'error'
-    ? 'var(--color-red-9)'
-    : $type === 'info'
-        ? 'var(--color-blue-9)'
-        : $type === 'success'
-            ? 'var(--color-green-9)'
-            : 'var(--color-orange-9)'};
-  border: 1px solid
-    ${({ $type }) => $type === 'error'
-    ? 'var(--color-red-8)'
-    : $type === 'info'
-        ? 'var(--color-blue-8)'
-        : $type === 'success'
-            ? 'var(--color-green-8)'
-            : 'var(--color-orange-8)'};
-  box-shadow: var(--elevation-2);
-  border-radius: var(--small);
-
-  & > div > 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)'};
-  }
-
-  button > svg {
-    fill: unset;
-  }
-
-  a {
-    position: relative;
-    cursor: pointer;
-  }
-
-  button {
-    padding: 0px;
-    margin-left: auto;
-  }
-
-  ${Styles.flex}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;

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

@@ -1 +0,0 @@
-export { Progress } from './progress';

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

@@ -1,87 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { colorReference } from '../../../common';
-import { Box, P } from '../../';
-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/toast/index.js

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

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

@@ -1,112 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { Button, P } from '../../';
-import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from '../../../icons';
-export const Toast = ({ content, href, onClose, type, isAnimated = false, animationDuration, }) => {
-    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, "$isAnimated": isAnimated },
-        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")),
-        !isAnimated && (React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" })),
-        isAnimated && (React.createElement(ToastProgress, { "$animationDuration": animationDuration || 4 },
-            React.createElement("div", { className: `toast-progress-bar ${type}` })))));
-};
-const ToastProgress = styled.div `
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  background-color: rgba(0, 0, 0, 0.1);
-
-  .toast-progress-bar {
-    height: 100%;
-    ${({ $animationDuration }) => `animation: progress-bar ${$animationDuration}s linear forwards`};
-  }
-
-  .toast-progress-bar.success {
-    background-color: var(--color-green-3);
-  }
-
-  .toast-progress-bar.info {
-    background-color: var(--color-blue-4);
-  }
-
-  .toast-progress-bar.warning {
-    background-color: var(--color-orange-5);
-  }
-
-  .toast-progress-bar.error {
-    background-color: var(--color-red-4);
-  }
-
-  @keyframes progress-bar {
-    0% {
-      width: 100%;
-    }
-    100% {
-      width: 0%;
-    }
-  }
-`;
-const Wrapper = styled.output `
-  ${({ $isAnimated }) => !$isAnimated &&
-    `
-      position: fixed;
-      bottom: 24px;
-      right: 24px;`}
-
-  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/tooltip/index.js

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

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

@@ -1,26 +0,0 @@
-'use client';
-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/iconography/avatar/avatar.js

@@ -1,171 +0,0 @@
-'use client';
-import React from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import { Box, H, P } from '../../';
-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,
-};
-const fallbackImgData = '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';
-const fallBackImgSrc = `data:image/png;base64,${fallbackImgData}`;
-/**
- *
- * Avatar
- */
-const Avatar = ({ as = 'button', href, image, fallbackImg = fallBackImgSrc, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, tooltipSx, ...rest }) => {
-    const [displayDefault, setDisplayDefault] = React.useState(false);
-    const Icon = iconReference?.[status ?? 'none'];
-    return (React.createElement(Box, { "$align": "center", "$gap": 18, sx: `
-        position: relative; 
-        &:hover {
-          .tooltipContainer {
-            display: flex;
-          }
-        }
-        ${sx}
-      `, ...rest },
-        React.createElement(Container, { as: as, "$size": size, href: href },
-            !displayDefault && (React.createElement(Image, { alt: "avatar image", height: size, onError: () => setDisplayDefault(true), quality: 100, sizes: "96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16", src: image ?? fallbackImg, width: size })),
-            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)))),
-        tooltipContent && (React.createElement(TooltipContainer, { className: "tooltipContainer", "$sx": tooltipSx }, tooltipContent))));
-};
-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 TooltipContainer = styled.div `
-  display: none;
-  position: absolute;
-  top: 100%;
-  z-index: 250;
-  background-color: var(--color-white);
-  border-radius: 24px;
-  box-shadow: var(--elevation-2);
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-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/icons/approved.js

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,4 +0,0 @@
-import React from 'react';
-export const Default = () => (React.createElement("svg", { viewBox: "0 0 228 228", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { width: "228", height: "228", fill: "#D0D2D6" }),
-    React.createElement("path", { d: "M114 114C104.513 114 96.3906 110.622 89.6344 103.866C82.8781 97.1094 79.5 88.9875 79.5 79.5C79.5 70.0125 82.8781 61.8906 89.6344 55.1344C96.3906 48.3781 104.513 45 114 45C123.488 45 131.609 48.3781 138.366 55.1344C145.122 61.8906 148.5 70.0125 148.5 79.5C148.5 88.9875 145.122 97.1094 138.366 103.866C131.609 110.622 123.488 114 114 114ZM45 183V158.85C45 153.963 46.2593 149.469 48.7778 145.369C51.2905 141.275 54.6312 138.15 58.8 135.994C67.7125 131.538 76.7688 128.194 85.9688 125.963C95.1688 123.738 104.513 122.625 114 122.625C123.488 122.625 132.831 123.738 142.031 125.963C151.231 128.194 160.288 131.538 169.2 135.994C173.369 138.15 176.71 141.275 179.222 145.369C181.741 149.469 183 153.963 183 158.85V183H45Z", fill: "white" })));

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

@@ -1,5 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-'use client';
-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 : '')}
-`;

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

@@ -1 +0,0 @@
-export { Icon } from './icon';

package/dist/components/iconography/index.js

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

package/dist/components/index.js

@@ -1,12 +0,0 @@
-export * from './actions';
-export * from './atoms';
-export * from './card';
-export * from './editor';
-export * from './feedback';
-export * from './iconography';
-export * from './input';
-export * from './media';
-export * from './navigation';
-export * from './surfaces';
-export * from './table';
-export * from './custom';