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

package/dist/src/components/surfaces/carousel/card/card.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { ChevronLeft } from '../../../../icons/arrow/chevron_left.js';
 import { ChevronRight } from '../../../../icons/arrow/chevron_right.js';
 
@@ -35,7 +35,7 @@ const CardCarousel = ({ children, onScrollEnd, scrollTriggerDistance = DEFAULT_S
         React__default.createElement(Button, { className: "carousel-navigation", onClick: onNavigateRight, "$side": "right" },
             React__default.createElement(ChevronRight, { color: "white", size: 48 }))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-jg31w5" }) `
+const Wrapper = styled.div `
   position: relative;
   height: 288px;
 
@@ -45,7 +45,7 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Inner = styled.div.withConfig({ displayName: "Inner", componentId: "sc-1j1yzej" }) `
+const Inner = styled.div `
   position: absolute;
   width: 100%;
   z-index: 0;
@@ -71,7 +71,7 @@ const Inner = styled.div.withConfig({ displayName: "Inner", componentId: "sc-1j1
     height: 0px;
   }
 `;
-const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-1hky4zg" }) `
+const Button = styled.button `
   position: absolute;
   z-index: 1;
   top: 0px;

package/dist/src/components/surfaces/comment/comment.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import Picker from '@emoji-mart/react';
 import { Avatar } from '../../iconography/avatar/avatar.js';
 import { Box } from '../../atoms/box/box.js';
@@ -109,7 +109,7 @@ const Comment = ({ avatarTooltipContent, avatarTooltipSx, content, createdDate,
             toggleShowCommentInput && (React__default.createElement(CommentWrapper, { onSubmit: handleCommentSubmit },
                 React__default.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a reply", onChange: handleCommentChange, value: comment }))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-b13pgl" }) `
+const Wrapper = styled.div `
   max-width: 700px;
   display: flex;
   flex-direction: row;
@@ -118,7 +118,7 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
   justify-content: space-between;
   position: relative;
 `;
-const ContentWrapper = styled.div.withConfig({ displayName: "ContentWrapper", componentId: "sc-1kvewbt" }) `
+const ContentWrapper = styled.div `
   display: flex;
   flex-direction: column;
   ${({ $hasReplies }) => $hasReplies
@@ -135,7 +135,7 @@ const ContentWrapper = styled.div.withConfig({ displayName: "ContentWrapper", co
     }`
     : ''}
 `;
-const CommentBox = styled.div.withConfig({ displayName: "CommentBox", componentId: "sc-m83pbh" }) `
+const CommentBox = styled.div `
   padding: 16px;
   display: flex;
   flex-direction: column;
@@ -143,7 +143,7 @@ const CommentBox = styled.div.withConfig({ displayName: "CommentBox", componentI
   background-color: var(--color-grey-10);
   border-radius: 16px;
 `;
-const PickerWrapper = styled.div.withConfig({ displayName: "PickerWrapper", componentId: "sc-jjew2m" }) `
+const PickerWrapper = styled.div `
   position: absolute;
   z-index: 1000;
 
@@ -151,7 +151,7 @@ const PickerWrapper = styled.div.withConfig({ displayName: "PickerWrapper", comp
   top: ${({ $top }) => $top}px;
   left: ${({ $left }) => $left}px;
 `;
-const Reaction = styled.div.withConfig({ displayName: "Reaction", componentId: "sc-1ib388l" }) `
+const Reaction = styled.div `
   ${Styles.flex}
   display: flex;
   padding: 2px 6px;
@@ -164,10 +164,10 @@ const Reaction = styled.div.withConfig({ displayName: "Reaction", componentId: "
     `
     : ''}
 `;
-const RepliesWrapper = styled.div.withConfig({ displayName: "RepliesWrapper", componentId: "sc-1a8p6sb" }) `
+const RepliesWrapper = styled.div `
   padding-top: 12px;
 `;
-const ReplyWrapper = styled.div.withConfig({ displayName: "ReplyWrapper", componentId: "sc-5ef81s" }) `
+const ReplyWrapper = styled.div `
   position: relative;
   ${({ $hasLine }) => $hasLine
     ? `
@@ -180,7 +180,7 @@ const ReplyWrapper = styled.div.withConfig({ displayName: "ReplyWrapper", compon
     }`
     : ''}
 `;
-const ReplyIndicator = styled.div.withConfig({ displayName: "ReplyIndicator", componentId: "sc-1jhjobp" }) `
+const ReplyIndicator = styled.div `
   position: absolute;
   top: -12px;
   left: -28px;
@@ -191,7 +191,7 @@ const ReplyIndicator = styled.div.withConfig({ displayName: "ReplyIndicator", co
   border-top: none;
   border-right: none;
 `;
-const CommentWrapper = styled.form.withConfig({ displayName: "CommentWrapper", componentId: "sc-16s5lma" }) `
+const CommentWrapper = styled.form `
   label {
     margin-bottom: 16px;
   }

package/dist/src/components/surfaces/drawer/drawer.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { callAll } from '../../../utils/function.js';
 
 const DrawerContext = React__default.createContext([false, (() => undefined)]);
@@ -37,7 +37,7 @@ const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
             React__default.createElement(ContentWrapper, null, content),
             footer && React__default.createElement(FooterWrapper, null, footer))));
 };
-const Background = styled.div.withConfig({ displayName: "Background", componentId: "sc-rq2nel" }) `
+const Background = styled.div `
   position: fixed;
   height: 100vh;
   width: 100vw;
@@ -50,7 +50,7 @@ const Background = styled.div.withConfig({ displayName: "Background", componentI
   opacity: 0.5;
   cursor: pointer;
 `;
-const Component = styled.div.withConfig({ displayName: "Component", componentId: "sc-xmzlj8" }) `
+const Component = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -68,7 +68,7 @@ const Component = styled.div.withConfig({ displayName: "Component", componentId:
 
   ${({ $open }) => ($open ? 'margin-right: 0px;' : '')}
 `;
-const HeaderWrapper = styled.div.withConfig({ displayName: "HeaderWrapper", componentId: "sc-tu73p7" }) `
+const HeaderWrapper = styled.div `
   background-color: var(--color-white);
   box-shadow: var(--elevation-2);
   filter: drop-shadow(var(--elevation-2));
@@ -77,7 +77,7 @@ const HeaderWrapper = styled.div.withConfig({ displayName: "HeaderWrapper", comp
   top: 0;
   border-radius: 16px 0px 0px 0px;
 `;
-const ContentWrapper = styled.div.withConfig({ displayName: "ContentWrapper", componentId: "sc-57njwy" }) `
+const ContentWrapper = styled.div `
   height: calc(100vh - 224px);
   position: relative;
   display: flex;
@@ -104,7 +104,7 @@ const ContentWrapper = styled.div.withConfig({ displayName: "ContentWrapper", co
     opacity: 30%;
   }
 `;
-const FooterWrapper = styled.div.withConfig({ displayName: "FooterWrapper", componentId: "sc-9176ur" }) `
+const FooterWrapper = styled.div `
   background-color: var(--color-white);
   box-shadow: var(--elevation-1);
   position: -webkit-sticky;

package/dist/src/components/surfaces/message/message.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Avatar } from '../../iconography/avatar/avatar.js';
 import { Box } from '../../atoms/box/box.js';
 import { P } from '../../atoms/typography/paragraph.js';
@@ -24,7 +24,7 @@ const Message = ({ messages, userId }) => {
             React__default.createElement(Wrapper, { "$isSelf": isSelf }, content)));
     })));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-5k2yxu" }) `
+const Wrapper = styled.div `
   max-width: 552px;
   padding: 16px;
   border-radius: 16px;

package/dist/src/components/surfaces/modal/modal.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Button } from '../../actions/button/button.js';
 import { Close } from '../../../icons/basic/close.js';
 import { callAll } from '../../../utils/function.js';
@@ -77,7 +77,7 @@ const ModalContent = ({ backgroundDark = true, children, footer, header, setClos
 };
 ModalContent.displayName = 'Modal.Content';
 Modal.Content = ModalContent;
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-1ud5o45" }) `
+const Wrapper = styled.div `
   ${({ $open }) => $open
     ? `display: flex;
     flex-direction: column;
@@ -98,7 +98,7 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
   margin: 0px;
   overflow: hidden;
 `;
-const Content = styled.div.withConfig({ displayName: "Content", componentId: "sc-4xo99d" }) `
+const Content = styled.div `
   position: absolute;
   z-index: 101;
   background-color: var(--color-white);

package/dist/src/components/surfaces/post/post.js

@@ -2,7 +2,7 @@
 import React__default from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { H } from '../../atoms/typography/heading.js';
 import { P } from '../../atoms/typography/paragraph.js';
 import '../../atoms/box/box.js';
@@ -122,7 +122,7 @@ const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTo
         !!_actions.length && (React__default.createElement(ActionsWrapper, null, !isPaywalled && _actions)),
         hasComments && !!_comments.length && (React__default.createElement(CommentWrapper, null, _comments))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-bkwygd" }) `
+const Wrapper = styled.div `
   position: relative;
   max-width: 700px;
   width: 100%;
@@ -135,14 +135,14 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
     border-radius: 16px;
   }
 `;
-const Header = styled.div.withConfig({ displayName: "Header", componentId: "sc-bzp4wx" }) `
+const Header = styled.div `
   padding: 16px 24px;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   border-bottom: 1px solid var(--color-grey-9);
 `;
-const ImagesWrapper = styled.div.withConfig({ displayName: "ImagesWrapper", componentId: "sc-8d1s92" }) `
+const ImagesWrapper = styled.div `
   position: relative;
   display: flex;
   gap: 8px;
@@ -188,13 +188,13 @@ const ImagesWrapper = styled.div.withConfig({ displayName: "ImagesWrapper", comp
     clip-path: inset(0px 0px 0px 0px);`
     : ''}
 `;
-const ImageWrapper = styled.div.withConfig({ displayName: "ImageWrapper", componentId: "sc-1k9zhmh" }) `
+const ImageWrapper = styled.div `
   position: relative;
   aspect-ratio: 700 / 427;
   flex: 1;
   min-width: min(227px, 80vw);
 `;
-const PaywallWrapper = styled.div.withConfig({ displayName: "PaywallWrapper", componentId: "sc-1wknyp1" }) `
+const PaywallWrapper = styled.div `
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -203,19 +203,19 @@ const PaywallWrapper = styled.div.withConfig({ displayName: "PaywallWrapper", co
   top: 310px;
   left: 242px;
 `;
-const ActionsWrapper = styled.div.withConfig({ displayName: "ActionsWrapper", componentId: "sc-1lws64f" }) `
+const ActionsWrapper = styled.div `
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 24px;
 `;
-const CommentWrapper = styled.div.withConfig({ displayName: "CommentWrapper", componentId: "sc-1r3whlh" }) `
+const CommentWrapper = styled.div `
   padding: 24px;
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
 `;
-const NavArrow = styled.button.withConfig({ displayName: "NavArrow", componentId: "sc-qo8rn9" }) `
+const NavArrow = styled.button `
   width: 48px;
   height: 150px;
   display: flex;

package/dist/src/components/table/table/table.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Box } from '../../atoms/box/box.js';
 
 const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
@@ -10,7 +10,7 @@ const Table = ({ border = true, children, compact, footer, header, separated, st
             React__default.createElement(TableElement, { "$compact": compact, "$separated": separated, "$striped": striped, "$sx": sx }, children)),
         !!footer && footer));
 };
-const TableElement = styled.table.withConfig({ displayName: "TableElement", componentId: "sc-sdhpj9" }) `
+const TableElement = styled.table `
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
@@ -38,7 +38,7 @@ const TableElement = styled.table.withConfig({ displayName: "TableElement", comp
 const Head = ({ children, ...rest }) => {
     return React__default.createElement(HeadElement, { ...rest }, children);
 };
-const HeadElement = styled.thead.withConfig({ displayName: "HeadElement", componentId: "sc-1qt81dx" }) `
+const HeadElement = styled.thead `
   tr {
     background-color: var(--color-grey-10);
     border-top-left-radius: 8px;
@@ -61,7 +61,7 @@ Table.Head = Head;
 const Body = ({ children, ...rest }) => {
     return React__default.createElement(BodyElement, { ...rest }, children);
 };
-const BodyElement = styled.tbody.withConfig({ displayName: "BodyElement", componentId: "sc-u26764" }) `
+const BodyElement = styled.tbody `
   & > tr:last-of-type {
     & > *:first-child {
       border-bottom-left-radius: 8px;
@@ -100,7 +100,7 @@ const Row = ({ children, disabled, href, hoverable = false, onClick, selected, s
             : undefined;
     return (React__default.createElement(RowElement, { onClick: handleClick, "$disabled": disabled, "$hoverable": hoverable, "$isAnchor": !!href, "$selected": selected, "$sx": sx, ...rest }, children));
 };
-const RowElement = styled.tr.withConfig({ displayName: "RowElement", componentId: "sc-1tdohw9" }) `
+const RowElement = styled.tr `
   display: table-row;
 
   ${({ $disabled }) => $disabled
@@ -145,7 +145,7 @@ const Cell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left',
     return (React__default.createElement(CellElement, { "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' },
         React__default.createElement("div", null, children)));
 };
-const CellElement = styled.td.withConfig({ displayName: "CellElement", componentId: "sc-xb86lg" }) `
+const CellElement = styled.td `
   width: ${({ $width }) => $width};
   height: 20px;
   font-family: var(--font-inter);
@@ -175,7 +175,7 @@ const HeaderCell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'l
     const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
     return (React__default.createElement(HeadCellElement, { as: "th", "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' }, children));
 };
-const HeadCellElement = styled(CellElement).withConfig({ displayName: "HeadCellElement", componentId: "sc-5go38j" }) `
+const HeadCellElement = styled(CellElement) `
   font-size: 16px;
   font-weight: 700;
   line-height: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0-alpha.9",
   "main": "dist/src/index.js",
   "types": "dist/index.d.ts",
   "type": "module",