@soul-refiner/design-system 2.5.0-alpha.7 → 2.5.0-alpha.8

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

@@ -1,102 +1 @@
-import { createPlugins, createHeadingPlugin, createIndentListPlugin, createImagePlugin, createTextIndentPlugin, createListPlugin, createMediaEmbedPlugin, createResetNodePlugin, createBoldPlugin, createCodePlugin, createFontBackgroundColorPlugin, createFontSizePlugin, createFontFamilyPlugin, createItalicPlugin, createStrikethroughPlugin, createSubscriptPlugin, createSuperscriptPlugin, createUnderlinePlugin, createAlignPlugin, createIndentPlugin, createLineHeightPlugin, createLinkPlugin, createExitBreakPlugin, createHistoryPlugin, createSelectOnBackspacePlugin, createSoftBreakPlugin, createParagraphPlugin, } from '@udecode/plate';
-import { ELEMENT_PARAGRAPH } from '../constants';
-import { ELEMENT_H1 } from '../constants';
-import { ELEMENT_H2 } from '../constants';
-import { ELEMENT_H3 } from '../constants';
-import { ELEMENT_H4 } from '../constants';
-import { ELEMENT_H5 } from '../constants';
-import { ELEMENT_H6 } from '../constants';
-import { ELEMENT_OL } from '../constants';
-import { ELEMENT_UL } from '../constants';
-import { createHOnePlugin } from '../plugins/blocks/text';
-import { createHTwoPlugin } from '../plugins/blocks/text';
-import { createHThreePlugin } from '../plugins/blocks/text';
-import { createHFourPlugin } from '../plugins/blocks/text';
-import { createHFivePlugin } from '../plugins/blocks/text';
-import { createHSixPlugin } from '../plugins/blocks/text';
-import { LinkFloatingMenu } from '../plugins/leafs/link';
-import { plateUI } from '../plugins/plate';
-import { exitBreakPlugin } from '../plugins/utils/exitBreak';
-import { resetBlockTypePlugin } from '../plugins/utils/resetBlockType';
-import { selectOnBackspace } from '../plugins/utils/selectOnBackspace';
-import { softBreakPlugin } from '../plugins/utils/softBreak';
-export const plugins = createPlugins([
-    createHeadingPlugin(),
-    createImagePlugin({
-        options: {
-            disableUploadInsert: true,
-            disableEmbedInsert: true,
-        },
-    }),
-    createTextIndentPlugin(),
-    createIndentListPlugin({
-        inject: {
-            props: {
-                validTypes: [
-                    ELEMENT_PARAGRAPH,
-                    ELEMENT_H1,
-                    ELEMENT_H2,
-                    ELEMENT_H3,
-                    ELEMENT_H4,
-                    ELEMENT_H5,
-                    ELEMENT_H6,
-                    ELEMENT_OL,
-                    ELEMENT_UL,
-                ],
-            },
-        },
-    }),
-    createListPlugin(),
-    createMediaEmbedPlugin(),
-    createParagraphPlugin(),
-    createHOnePlugin(),
-    createHTwoPlugin(),
-    createHThreePlugin(),
-    createHFourPlugin(),
-    createHFivePlugin(),
-    createHSixPlugin(),
-    createResetNodePlugin(),
-    createBoldPlugin(),
-    createCodePlugin(),
-    createFontBackgroundColorPlugin(),
-    createFontSizePlugin(),
-    createFontFamilyPlugin(),
-    createItalicPlugin(),
-    createStrikethroughPlugin(),
-    createSubscriptPlugin(),
-    createSuperscriptPlugin(),
-    createUnderlinePlugin(),
-    createAlignPlugin({
-        inject: {
-            props: {
-                validTypes: [
-                    ELEMENT_PARAGRAPH,
-                    ELEMENT_H1,
-                    ELEMENT_H2,
-                    ELEMENT_H3,
-                    ELEMENT_H4,
-                    ELEMENT_H5,
-                    ELEMENT_H6,
-                ],
-            },
-        },
-    }),
-    createIndentPlugin({
-        inject: {
-            props: {
-                validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
-            },
-        },
-    }),
-    createLineHeightPlugin(),
-    createLinkPlugin({
-        renderAfterEditable: LinkFloatingMenu,
-    }),
-    createExitBreakPlugin(exitBreakPlugin),
-    createHistoryPlugin(),
-    createResetNodePlugin(resetBlockTypePlugin),
-    createSelectOnBackspacePlugin(selectOnBackspace),
-    createSoftBreakPlugin(softBreakPlugin),
-], {
-    components: plateUI,
-});
+"use strict";var plate=require("@udecode/plate"),text=require("../plugins/blocks/text.js"),link=require("../plugins/leafs/link.js"),plate$1=require("../plugins/plate.js"),exitBreak=require("../plugins/utils/exitBreak.js"),resetBlockType=require("../plugins/utils/resetBlockType.js"),selectOnBackspace=require("../plugins/utils/selectOnBackspace.js"),softBreak=require("../plugins/utils/softBreak.js");const plugins=plate.createPlugins([plate.createHeadingPlugin(),plate.createImagePlugin({options:{disableUploadInsert:!0,disableEmbedInsert:!0}}),plate.createTextIndentPlugin(),plate.createIndentListPlugin({inject:{props:{validTypes:[plate.ELEMENT_PARAGRAPH,plate.ELEMENT_H1,plate.ELEMENT_H2,plate.ELEMENT_H3,plate.ELEMENT_H4,plate.ELEMENT_H5,plate.ELEMENT_H6,plate.ELEMENT_OL,plate.ELEMENT_UL]}}}),plate.createListPlugin(),plate.createMediaEmbedPlugin(),plate.createParagraphPlugin(),text.createHOnePlugin(),text.createHTwoPlugin(),text.createHThreePlugin(),text.createHFourPlugin(),text.createHFivePlugin(),text.createHSixPlugin(),plate.createResetNodePlugin(),plate.createBoldPlugin(),plate.createCodePlugin(),plate.createFontBackgroundColorPlugin(),plate.createFontSizePlugin(),plate.createFontFamilyPlugin(),plate.createItalicPlugin(),plate.createStrikethroughPlugin(),plate.createSubscriptPlugin(),plate.createSuperscriptPlugin(),plate.createUnderlinePlugin(),plate.createAlignPlugin({inject:{props:{validTypes:[plate.ELEMENT_PARAGRAPH,plate.ELEMENT_H1,plate.ELEMENT_H2,plate.ELEMENT_H3,plate.ELEMENT_H4,plate.ELEMENT_H5,plate.ELEMENT_H6]}}}),plate.createIndentPlugin({inject:{props:{validTypes:[plate.ELEMENT_PARAGRAPH,plate.ELEMENT_H1]}}}),plate.createLineHeightPlugin(),plate.createLinkPlugin({renderAfterEditable:link.LinkFloatingMenu}),plate.createExitBreakPlugin(exitBreak.exitBreakPlugin),plate.createHistoryPlugin(),plate.createResetNodePlugin(resetBlockType.resetBlockTypePlugin),plate.createSelectOnBackspacePlugin(selectOnBackspace.selectOnBackspace),plate.createSoftBreakPlugin(softBreak.softBreakPlugin)],{components:plate$1.plateUI});exports.plugins=plugins;

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

@@ -1,58 +1,5 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import { Plate, PlateContent } from '@udecode/plate';
-import { plugins } from './plugins';
-import { EditorBar } from './navbar';
-import { Modal } from '../../../components/surfaces';
-import { Box, H, P } from '../../../components/atoms';
-import { Button } from '../../../components/actions';
-import { validateFile, } from '../../../components/actions/upload/validations';
-export const SimpleEditor = ({ editable, handleUploadImage, onChange, validation, sx, validationMessage, placeholder = '', previousContent = [
-    {
-        type: 'p',
-        children: [
-            {
-                text: '',
-            },
-        ],
-    },
-], }) => {
-    const [errors, setErrors] = React.useState([]);
-    const createImageValidator = async (files) => {
-        setErrors([]);
-        const allErrors = [];
-        if (validation) {
-            for (let i = 0; i < files.length; i++) {
-                const file = files[i];
-                const fileErrors = await validateFile(file, validation);
-                if (fileErrors.length > 0) {
-                    allErrors.push(...fileErrors);
-                    break;
-                }
-            }
-        }
-        if (allErrors?.length > 0) {
-            setErrors(allErrors);
-            return '';
-        }
-        else {
-            return await handleUploadImage(files);
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Modal, { controlledOpen: errors.length > 0 },
-            React.createElement(Modal.Content, { footer: React.createElement(Box, { "$display": "flex", "$justify": "center", "$gap": 16, sx: "position: relative; width: 100%;" },
-                    React.createElement(Button, { fluid: true, size: "small", type: "primary", onClick: () => setErrors([]) }, "Close")), header: React.createElement(H, { "$bold": true, "$color": "grey-2", "$fontSize": 20 }, "Can't read files") },
-                React.createElement(Box, { "$align": "flex-start", "$display": "flex", "$dir": "column", "$gap": 32, sx: "width: 500px;" },
-                    React.createElement(P, { "$textClampLines": 10 }, validationMessage)))),
-        React.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
-            React.createElement(Wrapper, null,
-                editable && React.createElement(EditorBar, { handleUploadImage: createImageValidator }),
-                React.createElement(InnerWrapper, { "$sx": sx },
-                    React.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true }))))));
-};
-const InnerWrapper = styled.div `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),plate=require("@udecode/plate"),plugins=require("./plugins.js"),navbar=require("./navbar.js"),modal=(require("../../surfaces/accordion/accordion.js"),require("../../surfaces/carousel/card/card.js"),require("../../surfaces/comment/comment.js"),require("../../surfaces/discuss_post/discuss_post.js"),require("../../surfaces/drawer/drawer.js"),require("../../surfaces/message/message.js"),require("../../surfaces/modal/modal.js")),box=(require("react-dom"),require("../../surfaces/post/post.js"),require("../../surfaces/calendar_date/calendar_date.js"),require("../../atoms/box/box.js")),heading=(require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js")),paragraph=require("../../atoms/typography/paragraph.js"),button=(require("../../atoms/typography/typography.js"),require("../../actions/button/button.js")),validations=(require("../../actions/dropdown/dropdown.js"),require("../../actions/rate/rate.js"),require("../../actions/switch/switch.js"),require("../../actions/toggle/toggle.js"),require("../../actions/upload/upload.js"),require("../../actions/upload/validations.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const SimpleEditor=({editable:e,handleUploadImage:l,onChange:t,validation:o,sx:a,validationMessage:r,placeholder:i="",previousContent:n=[{type:"p",children:[{text:""}]}]})=>{const[d,s]=React__default.default.useState([]);return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(modal.Modal,{controlledOpen:0<d.length},React__default.default.createElement(modal.Modal.Content,{footer:React__default.default.createElement(box.Box,{$display:"flex",$justify:"center",$gap:16,sx:"position: relative; width: 100%;"},React__default.default.createElement(button.Button,{fluid:!0,size:"small",type:"primary",onClick:()=>s([])},"Close")),header:React__default.default.createElement(heading.H,{$bold:!0,$color:"grey-2",$fontSize:20},"Can't read files")},React__default.default.createElement(box.Box,{$align:"flex-start",$display:"flex",$dir:"column",$gap:32,sx:"width: 500px"},React__default.default.createElement(paragraph.P,{$textClampLines:10},r)))),React__default.default.createElement(plate.Plate,{id:"main",initialValue:n,onChange:t,plugins:plugins.plugins},React__default.default.createElement(Wrapper,null,e&&React__default.default.createElement(navbar.EditorBar,{handleUploadImage:async t=>{s([]);var a=[];if(o)for(let e=0;e<t.length;e++){var r=t[e],r=await validations.validateFile(r,o);if(0<r.length){a.push(...r);break}}return 0<a?.length?(s(a),""):l(t)}}),React__default.default.createElement(InnerWrapper,{$sx:a},React__default.default.createElement(plate.PlateContent,{id:"main",autoFocus:!0,placeholder:i,readOnly:!e,spellCheck:!0})))))},InnerWrapper=styled.styled.div`
   & > div {
     padding: 24px;
     min-height: 224px;
@@ -62,9 +9,8 @@ const InnerWrapper = styled.div `
       margin: 24px 0px;
     }
   }
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-const Wrapper = styled.div `
+  ${({$sx:e})=>e||""};
+`,Wrapper=styled.styled.div`
   position: relative;
   max-width: 1200px;
   width: 100%;
@@ -119,4 +65,4 @@ const Wrapper = styled.div `
   & > [data-slate-editor='true'] > * {
     margin: 24px 0px;
   }
-`;
+`;exports.SimpleEditor=SimpleEditor;

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

@@ -1,6 +1,5 @@
-'use client';
-import { styled } from 'styled-components';
-export const MenuButton = styled.button `
+"use client";
+"use strict";var styled=require("styled-components");const MenuButton=styled.styled.button`
   padding: 2px;
   border: none;
   outline: none;
@@ -27,5 +26,5 @@ export const MenuButton = styled.button `
     }
   }
 
-  background-color: ${({ $active }) => $active ? 'var(--color-grey-9)' : 'transparent'};
-`;
+  background-color: ${({$active:o})=>o?"var(--color-grey-9)":"transparent"};
+`;exports.MenuButton=MenuButton;

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

@@ -1,30 +1,10 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import { Toast } from '../../../components/feedback/toast/toast';
-export 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, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
-};
-const Container = styled.div `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),toast=require("../toast/toast.js");function _interopDefaultCompat(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var React__default=_interopDefaultCompat(React);const AnimatedToast=({message:t,type:e,onClose:a,animationDuration:o=4})=>{const[s,n]=React__default.default.useState(!1),i=React__default.default.useRef(null);return React__default.default.useEffect(()=>(i.current=setTimeout(()=>{n(!0),a&&a()},1e3*o),()=>{clearTimeout(i.current)}),[o,a]),React__default.default.createElement(Container,null,React__default.default.createElement(ToastAnimation,{className:s?"toast-closed":""},React__default.default.createElement(toast.Toast,{content:t,type:e,isAnimated:!0,animationDuration:o})))},Container=styled.styled.div`
   position: fixed;
   z-index: 9999;
   bottom: 16px;
   right: 16px;
-`;
-const ToastAnimation = styled.div `
+`,ToastAnimation=styled.styled.div`
   animation: slide-in 0.4s ease-in-out forwards;
 
   &.toast-closed {
@@ -52,4 +32,4 @@ const ToastAnimation = styled.div `
       transform: translateX(0%);
     }
   }
-`;
+`;exports.AnimatedToast=AnimatedToast;

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

@@ -1,52 +1,13 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import { Close } from '../../../icons/basic/close';
-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)',
-    },
-};
-export 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, { size: 16 })));
-};
-const Component = styled.div `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var React__default=_interopDefaultCompat(React);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)"}},Badge=({children:r,color:e,dot:o,onDismiss:l})=>{var a=colorLookup[e].bg,t=colorLookup[e].primary,e=colorLookup[e].secondary;return React__default.default.createElement(Component,{$bgColor:a,$borderColor:e,$textColor:t},o&&React__default.default.createElement(Dot,{$secondaryColor:t}),r,l&&React__default.default.createElement(close.Close,{size:16}))},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};
+  background-color: ${({$bgColor:r})=>r};
+  color: ${({$textColor:r})=>r};
+  border: 1px solid ${({$borderColor:r})=>r};
   font-family: var(--font-inter);
   font-size: 12px;
   font-weight: 500;
@@ -57,10 +18,9 @@ const Component = styled.div `
     fill: currentColor;
     cursor: pointer;
   }
-`;
-const Dot = styled.div `
+`,Dot=styled.styled.div`
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: ${({ $secondaryColor }) => $secondaryColor};
-`;
+  background-color: ${({$secondaryColor:r})=>r};
+`;exports.Badge=Badge;

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

@@ -1,62 +1,17 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import { Styles } from '../../../common/styles';
-import { Box } from '../../../components/atoms/box/box';
-import { Button } from '../../../components/actions/button/button';
-import { P } from '../../../components/atoms/typography/paragraph';
-import { AlertCircle } from '../../../icons/notifications/alert_circle';
-import { AlertOctogon } from '../../../icons/notifications/alert_octogon';
-import { AlertTriangle } from '../../../icons/notifications/alert_triangle';
-import { Close } from '../../../icons/basic/close';
-import { Information } from '../../../icons/notifications/information';
-export const Banner = ({ content, href, onClose, title, type, setContentInNewLine = false, additionalContent, sx, }) => {
-    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", "$dir": "row", "$gap": 8, "$type": type, "$sx": sx },
-        iconLookup[type],
-        React.createElement(Box, { "$dir": setContentInNewLine ? 'column' : 'row', sx: "width: 100%; flex-wrap: wrap;", "$gap": 4 },
-            React.createElement(P, { as: "span", "$semiBold": true }, title),
-            React.createElement(P, { as: "span", sx: setContentInNewLine ? 'margin-top: 12px;' : '' }, content),
-            additionalContent && React.createElement(P, { as: "span" }, additionalContent),
-            href && (React.createElement(P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more"))),
-        onClose && (React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" }))));
-};
-const Wrapper = styled.output `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),alert_circle=require("../../../icons/notifications/alert_circle.js"),alert_octogon=require("../../../icons/notifications/alert_octogon.js"),alert_triangle=require("../../../icons/notifications/alert_triangle.js"),close=require("../../../icons/basic/close.js"),information=require("../../../icons/notifications/information.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Banner=({content:e,href:t,onClose:r,title:a,type:o,setContentInNewLine:l=!1,additionalContent:n,sx:i})=>{var c={error:React__default.default.createElement(alert_octogon.AlertOctogon,{size:24}),info:React__default.default.createElement(information.Information,{size:24}),success:React__default.default.createElement(alert_circle.AlertCircle,{size:24}),warning:React__default.default.createElement(alert_triangle.AlertTriangle,{size:24})};return React__default.default.createElement(Wrapper,{as:"output",$dir:"row",$gap:8,$type:o,$sx:i},c[o],React__default.default.createElement(box.Box,{$dir:l?"column":"row",sx:"width: 100%; flex-wrap: wrap;",$gap:4},React__default.default.createElement(paragraph.P,{as:"span",$semiBold:!0},a),React__default.default.createElement(paragraph.P,{as:"span",sx:l?"margin-top: 12px;":""},e),n&&React__default.default.createElement(paragraph.P,{as:"span"},n),t&&React__default.default.createElement(paragraph.P,{as:"a",href:t,$color:"primary-blue-2"},"Read more")),r&&React__default.default.createElement(button.Button,{icon:React__default.default.createElement(close.Close,{size:24}),onClick:r,type:"special"}))},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)'};
+  background-color: ${({$type:e})=>"error"===e?"var(--color-red-9)":"info"===e?"var(--color-blue-9)":"success"===e?"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)'};
+    ${({$type:e})=>"error"===e?"var(--color-red-4)":"info"===e?"var(--color-blue-4)":"success"===e?"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)'};
+    fill: ${({$type:e})=>"error"===e?"var(--color-red-4)":"info"===e?"var(--color-blue-4)":"success"===e?"var(--color-green-3)":"var(--color-orange-5)"};
   }
 
   a {
@@ -80,7 +35,7 @@ const Wrapper = styled.output `
     margin-left: auto;
   }
 
-  ${Styles.flex}
+  ${styles.Styles.flex}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
+  ${({$sx:e})=>e||""}
+`;exports.Banner=Banner;

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

@@ -1,70 +1,11 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import { Close } from '../../../icons/basic/close';
-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)',
-    },
-};
-export 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, { size: 16, onClick: onDismiss })));
-};
-const Component = styled.div `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var React__default=_interopDefaultCompat(React);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)"}},Chip=({children:r,color:o,dot:e,onDismiss:t,size:a})=>{var l=colorLookup[o].primary,c=colorLookup[o].text,o=colorLookup[o].secondary;return React__default.default.createElement(Component,{$bgColor:l,$size:a,$textColor:c},e&&React__default.default.createElement(Dot,{$secondaryColor:o}),r,t&&React__default.default.createElement(close.Close,{size:16,onClick:t}))},Component=styled.styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
   border-radius: 32px;
-  background-color: ${({ $bgColor }) => $bgColor};
-  color: ${({ $textColor }) => $textColor};
+  background-color: ${({$bgColor:r})=>r};
+  color: ${({$textColor:r})=>r};
   font-family: var(--font-inter);
   user-select: none;
 
@@ -72,23 +13,18 @@ const Component = styled.div `
     fill: currentColor;
     cursor: pointer;
   }
-  ${({ $size }) => $size === 'small'
-    ? // small
-        `
+  ${({$size:r})=>"small"===r?`
     padding: 4px 16px;
     font-size: 12px;
     line-height: 16px;
-    font-weight: 500;`
-    : // large
-        `
+    font-weight: 500;`:`
     padding: 8px 16px;
     font-size: 14px;
     line-height: 20px;
     font-weight: 600;`}
-`;
-const Dot = styled.div `
+`,Dot=styled.styled.div`
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: ${({ $secondaryColor }) => $secondaryColor};
-`;
+  background-color: ${({$secondaryColor:r})=>r};
+`;exports.Chip=Chip;

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

@@ -1,34 +1,20 @@
-'use client';
-import React from 'react';
-import styled, { keyframes } from 'styled-components';
-import { colorReference } from '../../../common/colors';
-export 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 = keyframes `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const Loader=({color:e="grey-1",inline:t,size:r=16,sx:o})=>{let a=3;return 96<r?a=10:47<r?a=5:23<r&&(a=4),React__default.default.createElement(Component,{$borderWidth:a,$color:e,$inline:!!t,$size:r,$sx:o})},spin=styled.keyframes`
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
-`;
-const Component = styled.div `
+`,Component=styled__default.default.div`
   border: 2px solid transparent;
   border-radius: 50%;
   animation: ${spin} 0.8s linear infinite;
 
-  border-width: ${({ $borderWidth }) => `${$borderWidth}px`};
-  border-color: ${({ $color }) => colorReference[$color]};
+  border-width: ${({$borderWidth:e})=>e+"px"};
+  border-color: ${({$color:e})=>colors.colorReference[e]};
   border-top-color: transparent;
 
-  ${({ $size }) => `
-    height: ${$size}px;
-    width: ${$size}px;
+  ${({$size:e})=>`
+    height: ${e}px;
+    width: ${e}px;
   `}
 
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
+  ${({$sx:e})=>e||""};
+`;exports.Loader=Loader;

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

@@ -1,62 +1,18 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import { Styles } from '../../../common/styles';
-import { Box } from '../../../components/atoms/box/box';
-import { Button } from '../../../components/actions/button/button';
-import { P } from '../../../components/atoms/typography/paragraph';
-import { AlertCircle } from '../../../icons/notifications/alert_circle';
-import { AlertOctogon } from '../../../icons/notifications/alert_octogon';
-import { AlertTriangle } from '../../../icons/notifications/alert_triangle';
-import { Close } from '../../../icons/basic/close';
-import { Information } from '../../../icons/notifications/information';
-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 `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),alert_circle=require("../../../icons/notifications/alert_circle.js"),alert_octogon=require("../../../icons/notifications/alert_octogon.js"),alert_triangle=require("../../../icons/notifications/alert_triangle.js"),close=require("../../../icons/basic/close.js"),information=require("../../../icons/notifications/information.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Notification=({content:e,href:t,onClose:r,sx:a,title:o,type:l})=>{var i={error:React__default.default.createElement(alert_octogon.AlertOctogon,{size:24}),info:React__default.default.createElement(information.Information,{size:24}),success:React__default.default.createElement(alert_circle.AlertCircle,{size:24}),warning:React__default.default.createElement(alert_triangle.AlertTriangle,{size:24})};return React__default.default.createElement(Wrapper,{as:t?"a":"output",href:t,$dir:"column",$gap:8,$sx:a,$type:l},React__default.default.createElement(box.Box,{$dir:"row",$gap:8,$flex:1},i[l],React__default.default.createElement(paragraph.P,{as:"span",$semiBold:!0},o),r&&React__default.default.createElement(button.Button,{icon:React__default.default.createElement(close.Close,{size:24}),onClick:r,sx:"margin-left: auto;",type:"special"})),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:4},React__default.default.createElement(paragraph.P,{as:"span",sx:"padding-left: 32px;"},e)))},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)'};
+  background-color: ${({$type:e})=>"error"===e?"var(--color-red-9)":"info"===e?"var(--color-blue-9)":"success"===e?"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)'};
+    ${({$type:e})=>"error"===e?"var(--color-red-8)":"info"===e?"var(--color-blue-8)":"success"===e?"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)'};
+    fill: ${({$type:e})=>"error"===e?"var(--color-red-4)":"info"===e?"var(--color-blue-4)":"success"===e?"var(--color-green-3)":"var(--color-orange-5)"};
   }
 
   button > svg {
@@ -73,6 +29,6 @@ const Wrapper = styled.output `
     margin-left: auto;
   }
 
-  ${Styles.flex}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
+  ${styles.Styles.flex}
+  ${({$sx:e})=>e||""}
+`;exports.Notification=Notification;