@soul-refiner/design-system 2.0.0-alpha.10 → 2.0.0-alpha.12

package/dist/src/components/actions/button/button.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled, { css } from 'styled-components';
+import { css, styled } from 'styled-components';
 import { Styles } from '../../../common/styles.js';
 import { P } from '../../atoms/typography/paragraph.js';
 import { Box } from '../../atoms/box/box.js';
@@ -95,7 +95,7 @@ const base = css `
     cursor: unset !important;
   }
 `;
-const Primary = styled(Box).withConfig({ displayName: "Primary", componentId: "sc-13xh85f" }) `
+const Primary = styled(Box) `
   background-color: var(--color-primary-blue-2);
   color: var(--color-white);
   border: 1px solid var(--color-primary-blue-2);
@@ -121,7 +121,7 @@ const Primary = styled(Box).withConfig({ displayName: "Primary", componentId: "s
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Secondary = styled(Box).withConfig({ displayName: "Secondary", componentId: "sc-1a0wp3b" }) `
+const Secondary = styled(Box) `
   background-color: var(--color-primary-blue-4);
   color: var(--color-primary-blue-2);
   border: 1px solid var(--color-primary-blue-4);
@@ -148,7 +148,7 @@ const Secondary = styled(Box).withConfig({ displayName: "Secondary", componentId
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Outlined = styled(Box).withConfig({ displayName: "Outlined", componentId: "sc-1dt4c8y" }) `
+const Outlined = styled(Box) `
   background-color: var(--color-white);
   color: var(--color-grey-3);
   border: 1px solid var(--color-grey-8);
@@ -186,7 +186,7 @@ const Outlined = styled(Box).withConfig({ displayName: "Outlined", componentId:
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Danger = styled(Box).withConfig({ displayName: "Danger", componentId: "sc-zvf094" }) `
+const Danger = styled(Box) `
   background-color: var(--color-red-4);
   color: var(--color-white);
   border: 1px solid var(--color-red-4);
@@ -212,7 +212,7 @@ const Danger = styled(Box).withConfig({ displayName: "Danger", componentId: "sc-
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Text = styled(Box).withConfig({ displayName: "Text", componentId: "sc-gew2r0" }) `
+const Text = styled(Box) `
   background-color: transparent;
   border: 1px solid transparent;
   color: var(--color-primary-blue-2);
@@ -241,7 +241,7 @@ const Text = styled(Box).withConfig({ displayName: "Text", componentId: "sc-gew2
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Raised = styled(Box).withConfig({ displayName: "Raised", componentId: "sc-oxs9uh" }) `
+const Raised = styled(Box) `
   background-color: var(--color-white);
   color: var(--color-grey-3);
   border: 1px solid var(--color-white);
@@ -267,7 +267,7 @@ const Raised = styled(Box).withConfig({ displayName: "Raised", componentId: "sc-
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Special = styled(Box).withConfig({ displayName: "Special", componentId: "sc-131oq4" }) `
+const Special = styled(Box) `
   background-color: transparent;
   border: 1px solid transparent;
   color: var(--color-primary-grey-3);
@@ -297,7 +297,7 @@ const Special = styled(Box).withConfig({ displayName: "Special", componentId: "s
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Dropdown = styled(Box).withConfig({ displayName: "Dropdown", componentId: "sc-co3q8r" }) `
+const Dropdown = styled(Box) `
   width: 100%;
   background-color: var(--color-blue-10);
   color: var(--color-grey-3);

package/dist/src/components/card/action/action.js

@@ -1,7 +1,7 @@
 "use client";
 import React__default from 'react';
 import Image from 'next/image';
-import { styled } from 'styled-components';
+import styled from 'styled-components';
 import { Box } from '../../atoms/box/box.js';
 import { H } from '../../atoms/typography/heading.js';
 import { P } from '../../atoms/typography/paragraph.js';

package/dist/src/components/editor/plugins/blocks/list.js

@@ -8,7 +8,7 @@ const ListElement = ({ children, variant = 'ul', ...props }) => {
         React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Element, null, React__default.Children.map(children, (child) => (React__default.createElement(Li, null, child)))))));
 };
-const Li = styled.li.withConfig({ displayName: "Li", componentId: "sc-lhbw7h" }) `
+const Li = styled.li `
   margin: 16px 0px;
   padding-left: 8px;
 

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

@@ -19,13 +19,13 @@ const AnimatedToast = ({ message, type, onClose, animationDuration = 4, }) => {
         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" }) `
+const Container = styled.div `
   position: fixed;
   z-index: 9999;
   bottom: 16px;
   right: 16px;
 `;
-const ToastAnimation = styled.div.withConfig({ displayName: "ToastAnimation", componentId: "sc-5rn8x0" }) `
+const ToastAnimation = styled.div `
   animation: slide-in 0.4s ease-in-out forwards;
 
   &.toast-closed {

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled, { keyframes } from 'styled-components';
+import { keyframes, styled } from 'styled-components';
 import { colorReference } from '../../../common/colors.js';
 
 const Loader = ({ color = 'grey-1', inline, size = 16, sx, }) => {
@@ -17,7 +17,7 @@ const spin = keyframes `
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 `;
-const Component = styled.div.withConfig({ displayName: "Component", componentId: "sc-19p6wyx" }) `
+const Component = styled.div `
   border: 2px solid transparent;
   border-radius: 50%;
   animation: ${spin} 0.8s linear infinite;

package/dist/src/components/input/filter/filter.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import { Box } from '../../atoms/box/box.js';
 import { Button } from '../../actions/button/button.js';
 import { P } from '../../atoms/typography/paragraph.js';
@@ -128,13 +128,13 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'lef
                             setOpen(false);
                         }, size: "small", type: "primary" }, "Apply"))))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-1xxctjb" }) `
+const Wrapper = styled.div `
   position: relative;
   display: block;
   outline: none;
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Container = styled.div.withConfig({ displayName: "Container", componentId: "sc-funo5n" }) `
+const Container = styled.div `
   position: absolute;
   width: max-content;
   z-index: 100;
@@ -222,7 +222,7 @@ const sharedStyles = css `
     }
   }
 `;
-const Outlined = styled.button.withConfig({ displayName: "Outlined", componentId: "sc-1nm13kn" }) `
+const Outlined = styled.button `
   ${sharedStyles}
   ${Styles.flex}
   border: 1px solid var(--color-grey-8);
@@ -234,7 +234,7 @@ const Outlined = styled.button.withConfig({ displayName: "Outlined", componentId
     background-color: var(--color-grey-9);
   }
 `;
-const Pill = styled.button.withConfig({ displayName: "Pill", componentId: "sc-fvogm6" }) `
+const Pill = styled.button `
   ${sharedStyles}
   ${Styles.flex}
   border: 1px solid var(--color-grey-8);
@@ -260,7 +260,7 @@ const Pill = styled.button.withConfig({ displayName: "Pill", componentId: "sc-fv
     `
     : ''}
 `;
-const Labeled = styled.button.withConfig({ displayName: "Labeled", componentId: "sc-ri4n3a" }) `
+const Labeled = styled.button `
   ${sharedStyles}
   ${Styles.flex}
   border-radius: 24px;
@@ -272,12 +272,12 @@ const Labeled = styled.button.withConfig({ displayName: "Labeled", componentId:
     background-color: var(--color-grey-9);
   }
 `;
-const LabelSeparator = styled.div.withConfig({ displayName: "LabelSeparator", componentId: "sc-1x263d4" }) `
+const LabelSeparator = styled.div `
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-8);
 `;
-const Avatar = styled.button.withConfig({ displayName: "Avatar", componentId: "sc-1gwrq6k" }) `
+const Avatar = styled.button `
   ${sharedStyles}
   ${Styles.flex}
   padding: 4px 16px;
@@ -298,7 +298,7 @@ const Avatar = styled.button.withConfig({ displayName: "Avatar", componentId: "s
     }
   }
 `;
-const Text = styled.button.withConfig({ displayName: "Text", componentId: "sc-16fmdlj" }) `
+const Text = styled.button `
   ${sharedStyles}
   ${Styles.flex}
   gap: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.12",
   "main": "dist/src/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -44,6 +44,7 @@
     "prop-types": "~15.8.1",
     "rollup": "^4.12.0",
     "rollup-plugin-node-externals": "^7.0.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-tailwindcss": "^1.0.0",