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

package/dist/components/editor/simple_editor/simple_editor.js

@@ -0,0 +1,94 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var plate = require('@udecode/plate');
+var plugins = require('./plugins.js');
+var navbar = require('./navbar.js');
+
+const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholder = '', previousContent = [
+    {
+        type: 'p',
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+], }) => {
+    return (React.createElement(plate.Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins.plugins },
+        React.createElement(Wrapper, null,
+            editable && React.createElement(navbar.EditorBar, { handleUploadImage: handleUploadImage }),
+            React.createElement(InnerWrapper, null,
+                React.createElement(plate.PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true })))));
+};
+const InnerWrapper = styled.styled.div `
+  & > div {
+    padding: 24px;
+    min-height: 224px;
+    box-sizing: border-box;
+
+    & > div {
+      margin: 24px 0px;
+    }
+  }
+`;
+const Wrapper = styled.styled.div `
+  position: relative;
+  max-width: 1200px;
+  width: 100%;
+  min-height: 224px;
+  border: 1px solid var(--color-grey-8);
+  border-radius: 8px;
+  background-color: var(--color-white);
+
+  * {
+    font-family: var(--font-inter);
+    outline: none;
+  }
+
+  .slate-bold {
+    font-weight: 700;
+  }
+
+  .slate-italic {
+    font-style: italic;
+  }
+
+  .slate-strikethrough {
+    text-decoration: line-through;
+  }
+
+  .slate-underline {
+    text-decoration: underline;
+  }
+
+  li {
+    margin: 8px 0px;
+    color: var(--color-grey-3);
+  }
+
+  .slate-code {
+    & > * {
+      font-family: 'Roboto Mono';
+      & > * {
+        font-family: 'Roboto Mono';
+        & > * {
+          font-family: 'Roboto Mono';
+        }
+      }
+    }
+
+    background-color: var(--color-grey-9);
+    padding: 0.4em 0.4em;
+    font-size: 0.8em;
+    line-height: 0.8em;
+  }
+
+  & > [data-slate-editor='true'] > * {
+    margin: 24px 0px;
+  }
+`;
+
+exports.SimpleEditor = SimpleEditor;

package/dist/components/editor/styles/menu_button.js

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var styled = require('styled-components');
+
+const MenuButton = styled.styled.button `
+  padding: 2px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  height: 28px;
+  width: 28px;
+  border-radius: 2px;
+
+  &:hover:not(:disabled) {
+    padding: 1px;
+    border: 1px solid var(--color-grey-8);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    background-color: var(--color-white) !important;
+    cursor: initial;
+    svg {
+      fill: var(--color-grey-7) !important;
+    }
+  }
+
+  background-color: ${({ $active }) => $active ? 'var(--color-grey-9)' : 'transparent'};
+`;
+
+exports.MenuButton = MenuButton;

package/dist/components/feedback/animated_toast/animated_toast.js

@@ -0,0 +1,60 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var toast = require('../toast/toast.js');
+
+const AnimatedToast = ({ message, type, onClose, animationDuration = 4, }) => {
+    const [toastIsClosed, setToastIsClosed] = React.useState(false);
+    const timer = React.useRef(null);
+    React.useEffect(() => {
+        timer.current = setTimeout(() => {
+            setToastIsClosed(true);
+            !!onClose && onClose();
+        }, animationDuration * 1000);
+        return () => {
+            clearTimeout(timer.current);
+        };
+    }, [animationDuration, onClose]);
+    return (React.createElement(Container, null,
+        React.createElement(ToastAnimation, { className: `${toastIsClosed ? 'toast-closed' : ''}` },
+            React.createElement(toast.Toast, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
+};
+const Container = styled.styled.div `
+  position: fixed;
+  z-index: 9999;
+  bottom: 16px;
+  right: 16px;
+`;
+const ToastAnimation = styled.styled.div `
+  animation: slide-in 0.4s ease-in-out forwards;
+
+  &.toast-closed {
+    animation: slide-out 0.4s ease-in-out forwards;
+  }
+
+  @keyframes slide-out {
+    0% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slide-in {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+`;
+
+exports.AnimatedToast = AnimatedToast;

package/dist/components/feedback/badge/badge.js

@@ -0,0 +1,71 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var close = require('../../../icons/basic/close.js');
+
+const colorLookup = {
+    blue: {
+        primary: 'var(--color-hue-blue-1)',
+        secondary: 'var(--color-hue-blue-2)',
+        bg: 'var(--color-hue-blue-3)',
+    },
+    green: {
+        primary: 'var(--color-green-3)',
+        secondary: 'var(--color-green-8)',
+        bg: 'var(--color-green-10)',
+    },
+    orange: {
+        primary: 'var(--color-hue-orange-1)',
+        secondary: 'var(--color-hue-orange-2)',
+        bg: 'var(--color-hue-orange-3)',
+    },
+    purple: {
+        primary: 'var(--color-hue-purple-1)',
+        secondary: 'var(--color-hue-purple-2)',
+        bg: 'var(--color-hue-purple-3)',
+    },
+    red: {
+        primary: 'var(--color-red-4)',
+        secondary: 'var(--color-red-9)',
+        bg: 'var(--color-red-10)',
+    },
+};
+const Badge = ({ children, color, dot, onDismiss }) => {
+    const bgColor = colorLookup[color].bg;
+    const textColor = colorLookup[color].primary;
+    const borderColor = colorLookup[color].secondary;
+    return (React.createElement(Component, { "$bgColor": bgColor, "$borderColor": borderColor, "$textColor": textColor },
+        dot && React.createElement(Dot, { "$secondaryColor": textColor }),
+        children,
+        onDismiss && React.createElement(close.Close, { size: 16 })));
+};
+const Component = styled.styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 1px 7px;
+  border-radius: 32px;
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
+  border: 1px solid ${({ $borderColor }) => $borderColor};
+  font-family: var(--font-inter);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  user-select: none;
+
+  svg {
+    fill: currentColor;
+    cursor: pointer;
+  }
+`;
+const Dot = styled.styled.div `
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;
+
+exports.Badge = Badge;

package/dist/components/feedback/banner/banner.js

@@ -0,0 +1,91 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var styles = require('../../../common/styles.js');
+var box = require('../../atoms/box/box.js');
+var button = require('../../actions/button/button.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var alert_circle = require('../../../icons/notifications/alert_circle.js');
+var alert_octogon = require('../../../icons/notifications/alert_octogon.js');
+var alert_triangle = require('../../../icons/notifications/alert_triangle.js');
+var close = require('../../../icons/basic/close.js');
+var information = require('../../../icons/notifications/information.js');
+
+const Banner = ({ content, href, onClose, title, type, setContentInNewLine = false, additionalContent, sx, }) => {
+    const iconLookup = {
+        error: React.createElement(alert_octogon.AlertOctogon, { size: 24 }),
+        info: React.createElement(information.Information, { size: 24 }),
+        success: React.createElement(alert_circle.AlertCircle, { size: 24 }),
+        warning: React.createElement(alert_triangle.AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type, "$sx": sx },
+        iconLookup[type],
+        React.createElement(box.Box, { "$dir": setContentInNewLine ? 'column' : 'row', "$gap": 4 },
+            React.createElement(paragraph.P, { as: "span", "$semiBold": true }, title),
+            React.createElement(paragraph.P, { as: "span", sx: setContentInNewLine ? 'margin-top: 12px;' : '' }, content),
+            additionalContent && React.createElement(paragraph.P, { as: "span" }, additionalContent),
+            href && (React.createElement(paragraph.P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more"))),
+        onClose && (React.createElement(button.Button, { icon: React.createElement(close.Close, { size: 24 }), onClick: onClose, type: "special" }))));
+};
+const Wrapper = styled.styled.output `
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 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-bottom: 1px solid
+    ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+
+  & > 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 {
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 1px;
+      right: 0px;
+      left: 0px;
+      bottom: 0px;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  button {
+    padding: 0px;
+    margin-left: auto;
+  }
+
+  ${styles.Styles.flex}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+exports.Banner = Banner;

package/dist/components/feedback/chip/chip.js

@@ -0,0 +1,99 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var close = require('../../../icons/basic/close.js');
+
+const colorLookup = {
+    'primary-blue': {
+        primary: 'var(--color-primary-blue-2)',
+        secondary: 'var(--color-white)',
+        text: 'var(--color-white)',
+    },
+    blue: {
+        primary: 'var(--color-blue-9)',
+        secondary: 'var(--color-blue-5)',
+        text: 'var(--color-grey-4)',
+    },
+    green: {
+        primary: 'var(--color-green-9)',
+        secondary: 'var(--color-green-5)',
+        text: 'var(--color-grey-4)',
+    },
+    grey: {
+        primary: 'var(--color-grey-9)',
+        secondary: 'var(--color-grey-4)',
+        text: 'var(--color-grey-4)',
+    },
+    orange: {
+        primary: 'var(--color-orange-9)',
+        secondary: 'var(--color-orange-5)',
+        text: 'var(--color-grey-4)',
+    },
+    purple: {
+        primary: 'var(--color-purple-9)',
+        secondary: 'var(--color-purple-5)',
+        text: 'var(--color-grey-4)',
+    },
+    red: {
+        primary: 'var(--color-red-9)',
+        secondary: 'var(--color-red-5)',
+        text: 'var(--color-grey-4)',
+    },
+    turquoise: {
+        primary: 'var(--color-turquoise-9)',
+        secondary: 'var(--color-turquoise-5)',
+        text: 'var(--color-grey-4)',
+    },
+    yellow: {
+        primary: 'var(--color-yellow-9)',
+        secondary: 'var(--color-yellow-9)',
+        text: 'var(--color-grey-4)',
+    },
+};
+const Chip = ({ children, color, dot, onDismiss, size }) => {
+    const bgColor = colorLookup[color].primary;
+    const textColor = colorLookup[color].text;
+    const dotColor = colorLookup[color].secondary;
+    return (React.createElement(Component, { "$bgColor": bgColor, "$size": size, "$textColor": textColor },
+        dot && React.createElement(Dot, { "$secondaryColor": dotColor }),
+        children,
+        onDismiss && React.createElement(close.Close, { size: 16, onClick: onDismiss })));
+};
+const Component = styled.styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 32px;
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
+  font-family: var(--font-inter);
+  user-select: none;
+
+  svg {
+    fill: currentColor;
+    cursor: pointer;
+  }
+  ${({ $size }) => $size === 'small'
+    ? // small
+        `
+    padding: 4px 16px;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;`
+    : // large
+        `
+    padding: 8px 16px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;`}
+`;
+const Dot = styled.styled.div `
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;
+
+exports.Chip = Chip;

package/dist/components/feedback/loader/loader.js

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var colors = require('../../../common/colors.js');
+
+const Loader = ({ color = 'grey-1', inline, size = 16, sx, }) => {
+    let borderWidth = 3;
+    if (size > 96)
+        borderWidth = 10;
+    else if (size > 47)
+        borderWidth = 5;
+    else if (size > 23)
+        borderWidth = 4;
+    return (React.createElement(Component, { "$borderWidth": borderWidth, "$color": color, "$inline": !!inline, "$size": size, "$sx": sx }));
+};
+const spin = styled.keyframes `
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+const Component = styled.div `
+  border: 2px solid transparent;
+  border-radius: 50%;
+  animation: ${spin} 0.8s linear infinite;
+
+  border-width: ${({ $borderWidth }) => `${$borderWidth}px`};
+  border-color: ${({ $color }) => colors.colorReference[$color]};
+  border-top-color: transparent;
+
+  ${({ $size }) => `
+    height: ${$size}px;
+    width: ${$size}px;
+  `}
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+exports.Loader = Loader;

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

@@ -0,0 +1,83 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var styles = require('../../../common/styles.js');
+var box = require('../../atoms/box/box.js');
+var button = require('../../actions/button/button.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var alert_circle = require('../../../icons/notifications/alert_circle.js');
+var alert_octogon = require('../../../icons/notifications/alert_octogon.js');
+var alert_triangle = require('../../../icons/notifications/alert_triangle.js');
+var close = require('../../../icons/basic/close.js');
+var information = require('../../../icons/notifications/information.js');
+
+const Notification = ({ content, href, onClose, sx, title, type, }) => {
+    const iconLookup = {
+        error: React.createElement(alert_octogon.AlertOctogon, { size: 24 }),
+        info: React.createElement(information.Information, { size: 24 }),
+        success: React.createElement(alert_circle.AlertCircle, { size: 24 }),
+        warning: React.createElement(alert_triangle.AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: href ? 'a' : 'output', href: href, "$dir": "column", "$gap": 8, "$sx": sx, "$type": type },
+        React.createElement(box.Box, { "$dir": "row", "$gap": 8, "$flex": 1 },
+            iconLookup[type],
+            React.createElement(paragraph.P, { as: "span", "$semiBold": true }, title),
+            onClose && (React.createElement(button.Button, { icon: React.createElement(close.Close, { size: 24 }), onClick: onClose, sx: "margin-left: auto;", type: "special" }))),
+        React.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 4 },
+            React.createElement(paragraph.P, { as: "span", sx: "padding-left: 32px;" }, content))));
+};
+const Wrapper = styled.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.Styles.flex}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+exports.Notification = Notification;

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

@@ -0,0 +1,97 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var colors = require('../../../common/colors.js');
+var box = require('../../atoms/box/box.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
+var checkmarks = require('../../../icons/basic/checkmarks.js');
+var close = require('../../../icons/basic/close.js');
+var minus_circle = require('../../../icons/basic/minus_circle.js');
+var pause = require('../../../icons/audio_video/pause.js');
+
+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.Close, { size: 24, color: color })) : isComplete ? (React.createElement(checkmarks.Checkmarks, { size: 24, color: color })) : (React.createElement(pause.Pause, { size: 24, color: color }));
+    return (React.createElement(box.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.Box, { "$dir": "column", "$flex": 1, "$gap": 8 },
+            React.createElement(box.Box, null,
+                title && (React.createElement(paragraph.P, { "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, title)),
+                isComplete && (React.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3", size: 24, sx: "margin-left: auto;" })),
+                hasError && (React.createElement(minus_circle.MinusCircle, { color: "red-4", size: 24, sx: "margin-left: auto;" }))),
+            React.createElement(BarWrapper, null,
+                React.createElement(Bar, { "$color": colors.colorReference[color], "$percent": percent })),
+            subtitle && (React.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle))),
+        isDetailed && (React.createElement(paragraph.P, { "$color": "grey-4", "$textAlign": "center", sx: "width: 72px;" }, displayPercent))));
+};
+const BarWrapper = styled.styled.div `
+  position: relative;
+  width: 100%;
+  height: 12px;
+  border-radius: 32px;
+  background-color: var(--color-grey-8);
+`;
+const Bar = styled.styled.div `
+  width: ${({ $percent }) => $percent}%;
+  height: 12px;
+  background-color: ${({ $color }) => $color};
+  border-radius: 32px;
+`;
+const IconWrapper = styled.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.styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 39px;
+  width: 39px;
+  border-radius: 50%;
+  background-color: ${({ $bg }) => $bg};
+`;
+
+exports.Progress = Progress;