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

package/dist/src/components/custom/users_selection/users_selection.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 { Button } from '../../actions/button/button.js';
 import { P } from '../../atoms/typography/paragraph.js';
 import { Search } from '../../input/search/search.js';
@@ -55,13 +55,13 @@ const UsersSelection = ({ closeOnBlur = true, disabled = false, offset = [0, 0],
                         React__default.createElement(Checkbox, { selected: userIsChecked[user.id], sx: "margin-left: auto;" }))),
                 React__default.createElement(Spacer, null))))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-t60o8f" }) `
+const Wrapper = styled.div `
   position: relative;
   display: block;
   outline: none;
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Container = styled.div.withConfig({ displayName: "Container", componentId: "sc-1hc904n" }) `
+const Container = styled.div `
   min-width: 280px;
   max-height: 600px;
   display: flex;
@@ -81,7 +81,7 @@ const Container = styled.div.withConfig({ displayName: "Container", componentId:
 
   ${({ $offset }) => $offset ? `transform: translate(${$offset[0]}px, ${$offset[1]}px);` : ''}
 `;
-const OptionWrapper = styled.div.withConfig({ displayName: "OptionWrapper", componentId: "sc-1kcf1qk" }) `
+const OptionWrapper = styled.div `
   position: relative;
   padding: 12px 16px;
   user-select: none;
@@ -108,13 +108,13 @@ const OptionWrapper = styled.div.withConfig({ displayName: "OptionWrapper", comp
     `;
 }}
 `;
-const StyledImage = styled(Image).withConfig({ displayName: "StyledImage", componentId: "sc-1wt841p" }) `
+const StyledImage = styled(Image) `
   border-radius: 50%;
   width: 40px;
   height: 40px;
   margin-right: 16px;
 `;
-const Spacer = styled.div.withConfig({ displayName: "Spacer", componentId: "sc-33af6j" }) `
+const Spacer = styled.div `
   width: 100%;
   height: 1px;
   background-color: var(--color-grey-8);

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { createPlugins, Plate, PlateContent } from '@udecode/plate';
 import { PLACEHOLDER } from './constants.js';
 import { EditorContext } from './context.js';
@@ -31,7 +31,7 @@ const Editor = ({ commentInputLoader, commentLoader, editable, handleVideoClick,
                         }
                     } })))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-1fatqfv" }) `
+const Wrapper = styled.div `
   * {
     font-family: var(--font-inter);
     outline: none;

package/dist/src/components/editor/navbar/button_modal.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Box } from '../../atoms/box/box.js';
 import { Button } from '../../actions/button/button.js';
 import { H } from '../../atoms/typography/heading.js';
@@ -40,7 +40,7 @@ const ButtonModal = ({ onButtonInsert }) => {
                     React__default.createElement(Modal.Dismiss, null,
                         React__default.createElement(Button, { size: "small", sx: "flex: 1;", onClick: handleButtonInsert }, "Confirm")))))));
 };
-const IconWrapper = styled.div.withConfig({ displayName: "IconWrapper", componentId: "sc-1bteqdc" }) `
+const IconWrapper = styled.div `
   height: 48px;
   width: 48px;
   box-sizing: border-box;

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { useEditorRef, useEditorState, useMarkToolbarButtonState, MARK_BOLD, useMarkToolbarButton, MARK_ITALIC, MARK_STRIKETHROUGH, MARK_UNDERLINE, MARK_CODE, useLinkToolbarButtonState, useLinkToolbarButton, useListToolbarButtonState, ELEMENT_OL, useListToolbarButton, ELEMENT_UL, insertTable, toggleNodeType, ELEMENT_BLOCKQUOTE, insertNodes, getPluginType } from '@udecode/plate';
 import { Tooltip } from '../../feedback/tooltip/tooltip.js';
 import { Bold } from '../../../icons/basic/bold.js';
@@ -156,14 +156,14 @@ const EditorBar = () => {
                         } },
                         React__default.createElement(Grid, { size: 24, color: "grey-5" })))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-1it9gqx" }) `
+const Wrapper = styled.div `
   position: sticky;
   z-index: 2;
   left: 0;
   right: 0;
   top: 0;
 `;
-const Menu = styled.nav.withConfig({ displayName: "Menu", componentId: "sc-1agcjuk" }) `
+const Menu = styled.nav `
   display: flex;
   gap: 12px;
   justify-content: center;
@@ -173,14 +173,14 @@ const Menu = styled.nav.withConfig({ displayName: "Menu", componentId: "sc-1agcj
   padding: 14px 24px;
   background-color: var(--color-white);
 `;
-const MenuSection = styled.div.withConfig({ displayName: "MenuSection", componentId: "sc-sso2l" }) `
+const MenuSection = styled.div `
   display: flex;
   gap: 16px;
   align-items: center;
   width: fit-content;
   flex-shrink: 0;
 `;
-const MenuButton = styled.button.withConfig({ displayName: "MenuButton", componentId: "sc-r8lpmb" }) `
+const MenuButton = styled.button `
   padding: 2px;
   border: none;
   outline: none;
@@ -209,7 +209,7 @@ const MenuButton = styled.button.withConfig({ displayName: "MenuButton", compone
 
   background-color: ${({ $active }) => $active ? 'var(--color-grey-9)' : 'transparent'};
 `;
-const Divider = styled.div.withConfig({ displayName: "Divider", componentId: "sc-14q3uc" }) `
+const Divider = styled.div `
   width: 1px;
   height: 28px;
   background-color: var(--color-grey-9);

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { someNode, getPluginType, getBlockAbove, isEditorReadOnly, PlateElement, createPluginFactory, ELEMENT_PARAGRAPH, setNodes } from '@udecode/plate';
 import { Button as Button$1 } from '../../../actions/button/button.js';
 import { ELEMENT_BUTTON, COLORS } from '../../constants.js';
@@ -45,7 +45,7 @@ const Button = React__default.forwardRef(({ children, editor, element, ...props
             }
           ` }, children))));
 });
-const ColorMenuComponent = styled.div.withConfig({ displayName: "ColorMenuComponent", componentId: "sc-6npdi8" }) `
+const ColorMenuComponent = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
@@ -59,7 +59,7 @@ const ColorMenuComponent = styled.div.withConfig({ displayName: "ColorMenuCompon
   box-shadow: var(--elevation-1);
   background-color: var(--color-white);
 `;
-const ColorItem = styled.div.withConfig({ displayName: "ColorItem", componentId: "sc-foqtln" }) `
+const ColorItem = styled.div `
   width: 24px;
   height: 24px;
   border-radius: 50%;

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

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import { PlateElement, createPluginFactory } from '@udecode/plate';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { ELEMENT_QA } from '../../constants.js';
 import { EditorContext } from '../../context.js';
 import { Button } from '../../../actions/button/button.js';
@@ -31,7 +31,7 @@ const QuestionAnswerElement = React__default.forwardRef(({ children, element, ..
                     React__default.createElement(Comments, { questionAnswerId: questionAnswerId })),
                 React__default.createElement(CommentInput, { questionAnswerId: questionAnswerId, onComment: () => setShowAnswers(true) })))));
 });
-const Question = styled.div.withConfig({ displayName: "Question", componentId: "sc-11s8tcx" }) `
+const Question = styled.div `
   margin-bottom: 8px;
   padding: 16px;
   border-left: 8px solid var(--color-hue-blue-1);

package/dist/src/components/editor/plugins/leafs/link.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { useLink, PlateElement, useFloatingLinkSelectors, useFloatingLinkInsertState, useFloatingLinkInsert, useFloatingLinkEditState, useFloatingLinkEdit, FloatingLinkUrlInput, LinkOpenButton } from '@udecode/plate';
 import { Box } from '../../../atoms/box/box.js';
 import { AASansSerif } from '../../../../icons/basic/aa_sansserif.js';
@@ -70,7 +70,7 @@ const LinkFloatingMenu = ({ readOnly }) => {
         React__default.createElement("div", { ref: insertRef, ...insertProps }, input),
         React__default.createElement("div", { ref: editRef, ...editProps }, editContent)));
 };
-const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-kq2z0o" }) `
+const Input = styled.input `
   border: none;
   outline: none;
   padding: 8px 12px;

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { useEditorRef, useMarkToolbarButtonState, MARK_BOLD, useMarkToolbarButton, MARK_ITALIC, MARK_UNDERLINE, useLinkToolbarButtonState, useLinkToolbarButton, useListToolbarButtonState, ELEMENT_OL, useListToolbarButton, ELEMENT_UL, insertImage, insertNode, ELEMENT_PARAGRAPH } from '@udecode/plate';
 import { Tooltip } from '../../feedback/tooltip/tooltip.js';
 import { AlignmentDropdown } from '../navbar/alignment_dropdown.js';
@@ -94,7 +94,7 @@ const EditorBar = ({ handleUploadImage }) => {
                 React__default.createElement(MenuButton, { "$active": currOrderedList, onClick: handleOrderedList },
                     React__default.createElement(ListOrdered, { size: 24, color: "grey-5" }))))));
 };
-const Menu = styled.nav.withConfig({ displayName: "Menu", componentId: "sc-18hwzho" }) `
+const Menu = styled.nav `
   display: flex;
   gap: 12px;
   justify-content: center;
@@ -106,14 +106,14 @@ const Menu = styled.nav.withConfig({ displayName: "Menu", componentId: "sc-18hwz
   border-radius: 8px 8px 0px 0px;
   box-shadow: var(--elevation-1);
 `;
-const MenuSection = styled.div.withConfig({ displayName: "MenuSection", componentId: "sc-360yvm" }) `
+const MenuSection = styled.div `
   display: flex;
   gap: 16px;
   align-items: center;
   width: fit-content;
   flex-shrink: 0;
 `;
-const Divider = styled.div.withConfig({ displayName: "Divider", componentId: "sc-lfonyv" }) `
+const Divider = styled.div `
   width: 1px;
   height: 28px;
   background-color: var(--color-grey-9);

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Plate, PlateContent } from '@udecode/plate';
 import { plugins } from './plugins.js';
 import { EditorBar } from './navbar.js';
@@ -21,7 +21,7 @@ const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholder = '',
             React__default.createElement(InnerWrapper, null,
                 React__default.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true })))));
 };
-const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", componentId: "sc-1ehza2k" }) `
+const InnerWrapper = styled.div `
   & > div {
     padding: 24px;
     min-height: 224px;
@@ -32,7 +32,7 @@ const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", compon
     }
   }
 `;
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-18lk8h1" }) `
+const Wrapper = styled.div `
   position: relative;
   max-width: 1200px;
   width: 100%;

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

@@ -1,7 +1,7 @@
 "use client";
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
-const MenuButton = styled.button.withConfig({ displayName: "MenuButton", componentId: "sc-1r4gmyn" }) `
+const MenuButton = styled.button `
   padding: 2px;
   border: none;
   outline: none;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Close } from '../../../icons/basic/close.js';
 
 const colorLookup = {
@@ -39,7 +39,7 @@ const Badge = ({ children, color, dot, onDismiss }) => {
         children,
         onDismiss && React__default.createElement(Close, { size: 16 })));
 };
-const Component = styled.div.withConfig({ displayName: "Component", componentId: "sc-bwkn28" }) `
+const Component = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -59,7 +59,7 @@ const Component = styled.div.withConfig({ displayName: "Component", componentId:
     cursor: pointer;
   }
 `;
-const Dot = styled.div.withConfig({ displayName: "Dot", componentId: "sc-1rozlb2" }) `
+const Dot = styled.div `
   width: 8px;
   height: 8px;
   border-radius: 50%;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+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';
@@ -27,7 +27,7 @@ const Banner = ({ content, href, onClose, title, type, setContentInNewLine = fal
             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.withConfig({ displayName: "Wrapper", componentId: "sc-plp57j" }) `
+const Wrapper = styled.output `
   width: 100%;
   box-sizing: border-box;
   padding: 12px 16px;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Close } from '../../../icons/basic/close.js';
 
 const colorLookup = {
@@ -59,7 +59,7 @@ const Chip = ({ children, color, dot, onDismiss, size }) => {
         children,
         onDismiss && React__default.createElement(Close, { size: 16, onClick: onDismiss })));
 };
-const Component = styled.div.withConfig({ displayName: "Component", componentId: "sc-1ljo1tb" }) `
+const Component = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -87,7 +87,7 @@ const Component = styled.div.withConfig({ displayName: "Component", componentId:
     line-height: 20px;
     font-weight: 600;`}
 `;
-const Dot = styled.div.withConfig({ displayName: "Dot", componentId: "sc-r5xrj2" }) `
+const Dot = styled.div `
   width: 8px;
   height: 8px;
   border-radius: 50%;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+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';
@@ -26,7 +26,7 @@ const Notification = ({ content, href, onClose, sx, title, type, }) => {
         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.withConfig({ displayName: "Wrapper", componentId: "sc-13g19ib" }) `
+const Wrapper = styled.output `
   text-decoration: none;
   width: 100%;
   box-sizing: border-box;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+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';
@@ -50,20 +50,20 @@ const Progress = ({ hasError, progress, subtitle, sx, title, type, }) => {
             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.withConfig({ displayName: "BarWrapper", componentId: "sc-wyjget" }) `
+const BarWrapper = styled.div `
   position: relative;
   width: 100%;
   height: 12px;
   border-radius: 32px;
   background-color: var(--color-grey-8);
 `;
-const Bar = styled.div.withConfig({ displayName: "Bar", componentId: "sc-1buiifo" }) `
+const Bar = styled.div `
   width: ${({ $percent }) => $percent}%;
   height: 12px;
   background-color: ${({ $color }) => $color};
   border-radius: 32px;
 `;
-const IconWrapper = styled.div.withConfig({ displayName: "IconWrapper", componentId: "sc-yh3986" }) `
+const IconWrapper = styled.div `
   position: relative;
   display: block;
   width: 45px;
@@ -82,7 +82,7 @@ const IconWrapper = styled.div.withConfig({ displayName: "IconWrapper", componen
   );
   border: 1px solid ${({ $gradientColors }) => $gradientColors.bg};
 `;
-const IconInnerWrapper = styled.div.withConfig({ displayName: "IconInnerWrapper", componentId: "sc-i9c7i9" }) `
+const IconInnerWrapper = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Styles } from '../../../common/styles.js';
 import { Button } from '../../actions/button/button.js';
 import { P } from '../../atoms/typography/paragraph.js';
@@ -25,7 +25,7 @@ const Toast = ({ content, href, onClose, type, isAnimated = false, animationDura
         isAnimated && (React__default.createElement(ToastProgress, { "$animationDuration": animationDuration || 4 },
             React__default.createElement("div", { className: `toast-progress-bar ${type}` })))));
 };
-const ToastProgress = styled.div.withConfig({ displayName: "ToastProgress", componentId: "sc-1oyx3v2" }) `
+const ToastProgress = styled.div `
   position: absolute;
   bottom: 0;
   left: 0;
@@ -63,7 +63,7 @@ const ToastProgress = styled.div.withConfig({ displayName: "ToastProgress", comp
     }
   }
 `;
-const Wrapper = styled.output.withConfig({ displayName: "Wrapper", componentId: "sc-1trmc38" }) `
+const Wrapper = styled.output `
   ${({ $isAnimated }) => !$isAnimated &&
     `
       position: fixed;

package/dist/src/components/iconography/avatar/avatar.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';
@@ -94,7 +94,7 @@ const Avatar = ({ as = 'button', href, image, fallbackImg = fallBackImgSrc, size
         tooltipContent && (React__default.createElement(TooltipContainer, { className: "tooltipContainer", "$sx": tooltipSx }, tooltipContent))));
 };
 Avatar.displayName = 'Avatar';
-const Container = styled.div.withConfig({ displayName: "Container", componentId: "sc-1mx6yc2" }) `
+const Container = styled.div `
   flex-shrink: 0;
   display: flex;
   flex-flow: row nowrap;
@@ -124,13 +124,13 @@ const Container = styled.div.withConfig({ displayName: "Container", componentId:
     top: ${({ $size }) => iconOffsetY[`${$size}`]}px;
   }
 `;
-const TextContainer = styled.div.withConfig({ displayName: "TextContainer", componentId: "sc-764whw" }) `
+const TextContainer = styled.div `
   display: flex;
   flex-flow: column nowrap;
   gap: 4px;
   order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
 `;
-const TooltipContainer = styled.div.withConfig({ displayName: "TooltipContainer", componentId: "sc-my4srk" }) `
+const TooltipContainer = styled.div `
   display: none;
   position: absolute;
   top: 100%;
@@ -159,14 +159,14 @@ const Group = ({ children, numDisplayed, total }) => {
 };
 Group.displayName = 'Avatar.Group';
 Avatar.Group = Group;
-const AvatarWrapper = styled.div.withConfig({ displayName: "AvatarWrapper", componentId: "sc-xgpjsr" }) `
+const AvatarWrapper = styled.div `
   position: relative;
   z-index: ${({ $index }) => `-${$index}`};
   border-radius: 50%;
   border: 2px solid var(--color-white);
   margin-right: -8px;
 `;
-const Total = styled.div.withConfig({ displayName: "Total", componentId: "sc-1b7vxnq" }) `
+const Total = styled.div `
   position: relative;
   z-index: ${({ $index }) => `-${$index}`};
   display: flex;

package/dist/src/components/iconography/icon/icon.js

@@ -1,12 +1,12 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { colorReference } from '../../../common/colors.js';
 
 const Icon = ({ as, children, color = 'grey-3', size = 16, sx, ...rest }) => {
     return (React__default.createElement(SVG, { as: as, width: size, height: size, viewBox: "0 0 16 16", fill: colorReference[color], xmlns: "http://www.w3.org/2000/svg", "$sx": sx, ...rest }, children));
 };
-const SVG = styled.svg.withConfig({ displayName: "SVG", componentId: "sc-byxrsa" }) `
+const SVG = styled.svg `
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
 

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { MONTHS, WEEKDAYS } from '../../../common/date.js';
 import { Button } from '../../actions/button/button.js';
 import { P } from '../../atoms/typography/paragraph.js';
@@ -106,12 +106,12 @@ const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, disablePastDate
                         React__default.createElement(Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
                         React__default.createElement(Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-1bmij7m" }) `
+const Wrapper = styled.div `
   position: relative;
   width: fit-content;
   font-family: var(--font-inter);
 `;
-const DateSelector = styled.div.withConfig({ displayName: "DateSelector", componentId: "sc-4xgafl" }) `
+const DateSelector = styled.div `
   transform: translateY(26px);
   position: absolute;
   z-index: 5;
@@ -119,7 +119,7 @@ const DateSelector = styled.div.withConfig({ displayName: "DateSelector", compon
   border-radius: 25px;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
 `;
-const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", componentId: "sc-16kqx5e" }) `
+const InnerWrapper = styled.div `
   display: flex;
   gap: 31px;
   padding: 30px;
@@ -138,14 +138,14 @@ const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", compon
     box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
   }
 `;
-const MonthBar = styled.div.withConfig({ displayName: "MonthBar", componentId: "sc-1e4yjc4" }) `
+const MonthBar = styled.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 32px;
   user-select: none;
 `;
-const Arrow = styled.button.withConfig({ displayName: "Arrow", componentId: "sc-16f2dwz" }) `
+const Arrow = styled.button `
   appearance: none;
   border: none;
   outline: none;
@@ -165,24 +165,24 @@ const Arrow = styled.button.withConfig({ displayName: "Arrow", componentId: "sc-
     }
   }
 `;
-const WeekdayWrapper = styled.div.withConfig({ displayName: "WeekdayWrapper", componentId: "sc-3mbvr" }) `
+const WeekdayWrapper = styled.div `
   display: flex;
   gap: 32px;
   user-select: none;
 `;
-const Calendar = styled.div.withConfig({ displayName: "Calendar", componentId: "sc-mttk00" }) `
+const Calendar = styled.div `
   display: flex;
   flex-direction: column;
   gap: 32px;
   margin: 32px 0px;
   user-select: none;
 `;
-const Week = styled.div.withConfig({ displayName: "Week", componentId: "sc-1co45a6" }) `
+const Week = styled.div `
   display: flex;
   gap: 32px;
   border-radius: 24px;
 `;
-const Day = styled.button.withConfig({ displayName: "Day", componentId: "sc-c7n4tw" }) `
+const Day = styled.button `
   outline: none;
   border: none;
   background: transparent;
@@ -217,12 +217,12 @@ const Day = styled.button.withConfig({ displayName: "Day", componentId: "sc-c7n4
     }
   }
 `;
-const BottomWrapper = styled.div.withConfig({ displayName: "BottomWrapper", componentId: "sc-1hmgkh4" }) `
+const BottomWrapper = styled.div `
   display: flex;
   justify-content: flex-end;
   gap: 18px;
 `;
-const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-1cbof6a" }) `
+const Input = styled.input `
   max-width: 140px;
   padding: 0px;
   flex: 1;
@@ -238,7 +238,7 @@ const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-1
     color: var(--color-grey-6);
   }
 `;
-const InputWrapper = styled.div.withConfig({ displayName: "InputWrapper", componentId: "sc-1sctm5q" }) `
+const InputWrapper = styled.div `
   width: fit-content;
   display: flex;
   gap: 8px;

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

@@ -1,13 +1,13 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Styles } from '../../../common/styles.js';
 import { Checkmark } from '../../../icons/basic/checkmark.js';
 
 const Checkbox = ({ disabled, selected, sx, ...rest }) => {
     return (React__default.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, "$sx": sx, ...rest }, selected && React__default.createElement(Checkmark, { color: "white" })));
 };
-const Box = styled.div.withConfig({ displayName: "Box", componentId: "sc-1sakrq7" }) `
+const Box = styled.div `
   display: flex;
   width: 20px;
   height: 20px;