@soul-refiner/design-system 2.0.0-alpha.9 → 2.0.1

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

@@ -1,92 +0,0 @@
-"use client";
-import React__default from 'react';
-import { styled } from 'styled-components';
-import { Plate, PlateContent } from '@udecode/plate';
-import { plugins } from './plugins.js';
-import { EditorBar } from './navbar.js';
-
-const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholder = '', previousContent = [
-    {
-        type: 'p',
-        children: [
-            {
-                text: '',
-            },
-        ],
-    },
-], }) => {
-    return (React__default.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
-        React__default.createElement(Wrapper, null,
-            editable && React__default.createElement(EditorBar, { handleUploadImage: handleUploadImage }),
-            React__default.createElement(InnerWrapper, null,
-                React__default.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true })))));
-};
-const InnerWrapper = styled.div `
-  & > div {
-    padding: 24px;
-    min-height: 224px;
-    box-sizing: border-box;
-
-    & > div {
-      margin: 24px 0px;
-    }
-  }
-`;
-const Wrapper = 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;
-  }
-`;
-
-export { SimpleEditor };

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

@@ -1,34 +0,0 @@
-"use client";
-import { styled } from 'styled-components';
-
-const MenuButton = 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'};
-`;
-
-export { MenuButton };

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

@@ -1,58 +0,0 @@
-"use client";
-import React__default from 'react';
-import { styled } from 'styled-components';
-import { Toast } from '../toast/toast.js';
-
-const AnimatedToast = ({ message, type, onClose, animationDuration = 4, }) => {
-    const [toastIsClosed, setToastIsClosed] = React__default.useState(false);
-    const timer = React__default.useRef(null);
-    React__default.useEffect(() => {
-        timer.current = setTimeout(() => {
-            setToastIsClosed(true);
-            !!onClose && onClose();
-        }, animationDuration * 1000);
-        return () => {
-            clearTimeout(timer.current);
-        };
-    }, [animationDuration, onClose]);
-    return (React__default.createElement(Container, null,
-        React__default.createElement(ToastAnimation, { className: `${toastIsClosed ? 'toast-closed' : ''}` },
-            React__default.createElement(Toast, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
-};
-const Container = styled.div.withConfig({ displayName: "Container", componentId: "sc-1tc79dg" }) `
-  position: fixed;
-  z-index: 9999;
-  bottom: 16px;
-  right: 16px;
-`;
-const ToastAnimation = styled.div.withConfig({ displayName: "ToastAnimation", componentId: "sc-5rn8x0" }) `
-  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%);
-    }
-  }
-`;
-
-export { AnimatedToast };

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

@@ -1,69 +0,0 @@
-"use client";
-import React__default from 'react';
-import { styled } from 'styled-components';
-import { Close } from '../../../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__default.createElement(Component, { "$bgColor": bgColor, "$borderColor": borderColor, "$textColor": textColor },
-        dot && React__default.createElement(Dot, { "$secondaryColor": textColor }),
-        children,
-        onDismiss && React__default.createElement(Close, { size: 16 })));
-};
-const Component = 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.div `
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: ${({ $secondaryColor }) => $secondaryColor};
-`;
-
-export { Badge };

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

@@ -1,89 +0,0 @@
-"use client";
-import React__default from 'react';
-import { styled } from 'styled-components';
-import { Styles } from '../../../common/styles.js';
-import { Box } from '../../atoms/box/box.js';
-import { Button } from '../../actions/button/button.js';
-import { P } from '../../atoms/typography/paragraph.js';
-import { AlertCircle } from '../../../icons/notifications/alert_circle.js';
-import { AlertOctogon } from '../../../icons/notifications/alert_octogon.js';
-import { AlertTriangle } from '../../../icons/notifications/alert_triangle.js';
-import { Close } from '../../../icons/basic/close.js';
-import { Information } from '../../../icons/notifications/information.js';
-
-const Banner = ({ content, href, onClose, title, type, setContentInNewLine = false, additionalContent, sx, }) => {
-    const iconLookup = {
-        error: React__default.createElement(AlertOctogon, { size: 24 }),
-        info: React__default.createElement(Information, { size: 24 }),
-        success: React__default.createElement(AlertCircle, { size: 24 }),
-        warning: React__default.createElement(AlertTriangle, { size: 24 }),
-    };
-    return (React__default.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type, "$sx": sx },
-        iconLookup[type],
-        React__default.createElement(Box, { "$dir": setContentInNewLine ? 'column' : 'row', "$gap": 4 },
-            React__default.createElement(P, { as: "span", "$semiBold": true }, title),
-            React__default.createElement(P, { as: "span", sx: setContentInNewLine ? 'margin-top: 12px;' : '' }, content),
-            additionalContent && React__default.createElement(P, { as: "span" }, additionalContent),
-            href && (React__default.createElement(P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more"))),
-        onClose && (React__default.createElement(Button, { icon: React__default.createElement(Close, { size: 24 }), onClick: onClose, type: "special" }))));
-};
-const Wrapper = 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.flex}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-export { Banner };

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

@@ -1,97 +0,0 @@
-"use client";
-import React__default from 'react';
-import { styled } from 'styled-components';
-import { Close } from '../../../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__default.createElement(Component, { "$bgColor": bgColor, "$size": size, "$textColor": textColor },
-        dot && React__default.createElement(Dot, { "$secondaryColor": dotColor }),
-        children,
-        onDismiss && React__default.createElement(Close, { size: 16, onClick: onDismiss })));
-};
-const Component = 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.div `
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: ${({ $secondaryColor }) => $secondaryColor};
-`;
-
-export { Chip };

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

@@ -1,37 +0,0 @@
-"use client";
-import React__default from 'react';
-import styled, { keyframes } from 'styled-components';
-import { colorReference } from '../../../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__default.createElement(Component, { "$borderWidth": borderWidth, "$color": color, "$inline": !!inline, "$size": size, "$sx": sx }));
-};
-const spin = keyframes `
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-`;
-const Component = styled.div.withConfig({ displayName: "Component", componentId: "sc-19p6wyx" }) `
-  border: 2px solid transparent;
-  border-radius: 50%;
-  animation: ${spin} 0.8s linear infinite;
-
-  border-width: ${({ $borderWidth }) => `${$borderWidth}px`};
-  border-color: ${({ $color }) => colorReference[$color]};
-  border-top-color: transparent;
-
-  ${({ $size }) => `
-    height: ${$size}px;
-    width: ${$size}px;
-  `}
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-
-export { Loader };

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

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

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

@@ -1,95 +0,0 @@
-"use client";
-import React__default from 'react';
-import { styled } from 'styled-components';
-import { colorReference } from '../../../common/colors.js';
-import { Box } from '../../atoms/box/box.js';
-import { P } from '../../atoms/typography/paragraph.js';
-import { CheckmarkCircle } from '../../../icons/basic/checkmark_circle.js';
-import { Checkmarks } from '../../../icons/basic/checkmarks.js';
-import { Close } from '../../../icons/basic/close.js';
-import { MinusCircle } from '../../../icons/basic/minus_circle.js';
-import { Pause } from '../../../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__default.createElement(Close, { size: 24, color: color })) : isComplete ? (React__default.createElement(Checkmarks, { size: 24, color: color })) : (React__default.createElement(Pause, { size: 24, color: color }));
-    return (React__default.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16, sx: sx },
-        isDetailed && (React__default.createElement(IconWrapper, { "$completedDegree": Math.round(percent * 3.6), "$gradientColors": gradientColors },
-            React__default.createElement(IconInnerWrapper, { "$bg": gradientColors.bg }, icon))),
-        React__default.createElement(Box, { "$dir": "column", "$flex": 1, "$gap": 8 },
-            React__default.createElement(Box, null,
-                title && (React__default.createElement(P, { "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, title)),
-                isComplete && (React__default.createElement(CheckmarkCircle, { color: "green-3", size: 24, sx: "margin-left: auto;" })),
-                hasError && (React__default.createElement(MinusCircle, { color: "red-4", size: 24, sx: "margin-left: auto;" }))),
-            React__default.createElement(BarWrapper, null,
-                React__default.createElement(Bar, { "$color": colorReference[color], "$percent": percent })),
-            subtitle && (React__default.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle))),
-        isDetailed && (React__default.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};
-`;
-
-export { Progress };