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

package/dist/src/components/input/date/date.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';
@@ -208,12 +208,12 @@ const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) =>
                         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-n6adaj" }) `
+const Wrapper = styled.div `
   position: relative;
   width: fit-content;
   font-family: var(--font-inter);
 `;
-const Trigger = styled.button.withConfig({ displayName: "Trigger", componentId: "sc-ribcoz" }) `
+const Trigger = styled.button `
   padding: 12px 24px;
   background-color: #ffffff;
   border: 1px solid var(--color-grey-6);
@@ -245,7 +245,7 @@ const Trigger = styled.button.withConfig({ displayName: "Trigger", componentId:
     border-color: var(--color-blue-3);
   }
 `;
-const DateSelector = styled.div.withConfig({ displayName: "DateSelector", componentId: "sc-qcvv72" }) `
+const DateSelector = styled.div `
   transform: translateY(26px);
   position: absolute;
   z-index: 5;
@@ -253,7 +253,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-e9bn83" }) `
+const InnerWrapper = styled.div `
   display: flex;
   gap: 31px;
   padding: 30px;
@@ -272,7 +272,7 @@ const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", compon
     box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
   }
 `;
-const Left = styled.div.withConfig({ displayName: "Left", componentId: "sc-bj6v62" }) `
+const Left = styled.div `
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
@@ -300,14 +300,14 @@ const Left = styled.div.withConfig({ displayName: "Left", componentId: "sc-bj6v6
     }
   }
 `;
-const MonthBar = styled.div.withConfig({ displayName: "MonthBar", componentId: "sc-14aoklk" }) `
+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-19kxdyp" }) `
+const Arrow = styled.button `
   appearance: none;
   border: none;
   outline: none;
@@ -327,24 +327,24 @@ const Arrow = styled.button.withConfig({ displayName: "Arrow", componentId: "sc-
     }
   }
 `;
-const WeekdayWrapper = styled.div.withConfig({ displayName: "WeekdayWrapper", componentId: "sc-itl06o" }) `
+const WeekdayWrapper = styled.div `
   display: flex;
   gap: 32px;
   user-select: none;
 `;
-const Calendar = styled.div.withConfig({ displayName: "Calendar", componentId: "sc-1fk7mep" }) `
+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-1y1i8n5" }) `
+const Week = styled.div `
   display: flex;
   gap: 32px;
   border-radius: 24px;
 `;
-const Day = styled.button.withConfig({ displayName: "Day", componentId: "sc-my4fcv" }) `
+const Day = styled.button `
   outline: none;
   border: none;
   background: transparent;
@@ -514,7 +514,7 @@ const Day = styled.button.withConfig({ displayName: "Day", componentId: "sc-my4f
     }
   }
 `;
-const BottomWrapper = styled.div.withConfig({ displayName: "BottomWrapper", componentId: "sc-1h7pjca" }) `
+const BottomWrapper = styled.div `
   display: flex;
   justify-content: flex-end;
   gap: 18px;

package/dist/src/components/input/filter/filter_option.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';
 import { P } from '../../atoms/typography/paragraph.js';
 import { Checkbox } from '../checkbox/checkbox.js';
@@ -18,7 +18,7 @@ const Option = ({ label, onClick, selected, sx, value, checkbox, radio = false,
             } }))));
 };
 Option.displayName = 'Filter.Option';
-const OptionWrapper = styled.div.withConfig({ displayName: "OptionWrapper", componentId: "sc-125455c" }) `
+const OptionWrapper = styled.div `
   position: relative;
   z-index: 1;
   padding: 12px 16px;
@@ -61,7 +61,7 @@ const Spacer = ({ sx }) => {
     return React__default.createElement(SpacerWrapper, { "$sx": sx });
 };
 Spacer.displayName = 'Filter.Spacer';
-const SpacerWrapper = styled.div.withConfig({ displayName: "SpacerWrapper", componentId: "sc-kw3m1e" }) `
+const SpacerWrapper = styled.div `
   width: 100%;
   height: 1px;
   background-color: var(--color-grey-8);

package/dist/src/components/input/radio/radio.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';
 import { P } from '../../atoms/typography/paragraph.js';
 
@@ -18,7 +18,7 @@ const Radio = ({ checked = false, disabled, label, onClick, reversed, sx, value,
         React__default.createElement(Input, { checked: checked, onClickCapture: handleInputClick, disabled: disabled, type: "radio", value: value, ...rest }),
         React__default.createElement(P, { as: "span" }, label)));
 };
-const Label = styled.label.withConfig({ displayName: "Label", componentId: "sc-6q7dli" }) `
+const Label = styled.label `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -39,7 +39,7 @@ const Label = styled.label.withConfig({ displayName: "Label", componentId: "sc-6
   flex-direction: ${({ $reversed }) => ($reversed ? 'row-reverse' : 'row')};
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-wa4n01" }) `
+const Input = styled.input `
   appearance: none;
   position: relative;
   height: 20px;

package/dist/src/components/input/search/search.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 { Close } from '../../../icons/basic/close.js';
 import { Search as Search$1 } from '../../../icons/basic/search.js';
@@ -49,7 +49,7 @@ const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder,
             React__default.createElement(Separator, null),
             dropdownFilter))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-168u03l" }) `
+const Wrapper = styled.div `
   ${Styles.flex}
   ${Styles.padding}
   display: flex;
@@ -119,7 +119,7 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
 `;
 const Input = styled.input.attrs(({ ref }) => ({
     ref: ref,
-})).withConfig({ displayName: "Input", componentId: "sc-1my6qk7" }) `
+})) `
   flex: 1;
   border-radius: 8px;
   outline: none;
@@ -133,7 +133,7 @@ const Input = styled.input.attrs(({ ref }) => ({
     ? 'width: 0px; height: 0px; padding: 0px !important; border: none !important;'
     : ''}
 `;
-const Separator = styled.div.withConfig({ displayName: "Separator", componentId: "sc-54ypvj" }) `
+const Separator = styled.div `
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-9);

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { P } from '../../atoms/typography/paragraph.js';
 
 const Select = ({ label, onClick, selected, sx, value, }) => {
@@ -9,7 +9,7 @@ const Select = ({ label, onClick, selected, sx, value, }) => {
         React__default.createElement(SelectBox, { "$selected": selected }),
         React__default.createElement(P, { as: "div" }, label)));
 };
-const Label = styled.div.withConfig({ displayName: "Label", componentId: "sc-9oc3w8" }) `
+const Label = styled.div `
   display: flex;
   flex-flow: row nowrap;
   gap: 24px;
@@ -22,7 +22,7 @@ const Label = styled.div.withConfig({ displayName: "Label", componentId: "sc-9oc
   }
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const SelectBox = styled.div.withConfig({ displayName: "SelectBox", componentId: "sc-vrlzhg" }) `
+const SelectBox = styled.div `
   position: relative;
   width: 18px;
   height: 18px;

package/dist/src/components/input/text_area/text_area.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';
 import { CheckmarkCircle } from '../../../icons/basic/checkmark_circle.js';
 import { AlertCircle } from '../../../icons/notifications/alert_circle.js';
@@ -30,7 +30,7 @@ const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, lab
                 " / ",
                 maxCharacters)))));
 };
-const Label = styled.label.withConfig({ displayName: "Label", componentId: "sc-1wy207" }) `
+const Label = styled.label `
   width: 100%;
   display: flex;
   gap: 4px;
@@ -54,7 +54,7 @@ const Label = styled.label.withConfig({ displayName: "Label", componentId: "sc-1
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const InputWrapper = styled.div.withConfig({ displayName: "InputWrapper", componentId: "sc-1iti398" }) `
+const InputWrapper = styled.div `
   min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')}
   display: flex;
   gap: 8px;
@@ -76,7 +76,7 @@ const InputWrapper = styled.div.withConfig({ displayName: "InputWrapper", compon
   ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
   ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
 `;
-const TextAreaElement = styled.textarea.withConfig({ displayName: "TextAreaElement", componentId: "sc-4r22cp" }) `
+const TextAreaElement = styled.textarea `
   min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')}
   padding: 0px;
   flex: 1;
@@ -95,13 +95,13 @@ const TextAreaElement = styled.textarea.withConfig({ displayName: "TextAreaEleme
 
   ${({ $resize }) => ($resize ? '' : 'resize: none;')}
 `;
-const HelperText = styled.p.withConfig({ displayName: "HelperText", componentId: "sc-w8y5gy" }) `
+const HelperText = styled.p `
   color: var(--color-grey-4);
   font-family: var(--font-inter);
   font-size: 14px;
   line-height: 20px;
 `;
-const MaxCharactersText = styled.p.withConfig({ displayName: "MaxCharactersText", componentId: "sc-1weyfhs" }) `
+const MaxCharactersText = styled.p `
   text-align: right;
   color: var(--color-grey-6);
   font-family: var(--font-inter);

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Chip } from '../../feedback/chip/chip.js';
 import { CheckmarkCircle } from '../../../icons/basic/checkmark_circle.js';
 import { AlertCircle } from '../../../icons/notifications/alert_circle.js';
@@ -65,7 +65,7 @@ const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, la
             warning && React__default.createElement(AlertCircle, { color: "red-4" })),
         helperText && React__default.createElement(HelperText, { "$size": size }, helperText)));
 };
-const Label = styled.div.withConfig({ displayName: "Label", componentId: "sc-1yi36p9" }) `
+const Label = styled.div `
   width: 100%;
   display: flex;
   gap: 4px;
@@ -89,7 +89,7 @@ const Label = styled.div.withConfig({ displayName: "Label", componentId: "sc-1yi
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const InputWrapper = styled.div.withConfig({ displayName: "InputWrapper", componentId: "sc-1wz3yn4" }) `
+const InputWrapper = styled.div `
   display: flex;
   gap: 8px;
   align-items: center;
@@ -110,7 +110,7 @@ const InputWrapper = styled.div.withConfig({ displayName: "InputWrapper", compon
   ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
   ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
 `;
-const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-1wg68yz" }) `
+const Input = styled.input `
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);
@@ -128,13 +128,13 @@ const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-1
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const HelperText = styled.span.withConfig({ displayName: "HelperText", componentId: "sc-1yx08rl" }) `
+const HelperText = styled.span `
   color: var(--color-grey-4);
   font-family: var(--font-inter);
   font-size: ${({ $size }) => ($size === 'small' ? 12 : 14)}px;
   line-height: ${({ $size }) => ($size === 'small' ? 16 : 20)}px;
 `;
-const MaxCharactersText = styled.span.withConfig({ displayName: "MaxCharactersText", componentId: "sc-l6t4sq" }) `
+const MaxCharactersText = styled.span `
   color: var(--color-grey-6);
   font-family: var(--font-inter);
   font-size: 14px;
@@ -142,7 +142,7 @@ const MaxCharactersText = styled.span.withConfig({ displayName: "MaxCharactersTe
   font-weight: 400;
   line-height: 20px;
 `;
-const MultipleInputWrapper = styled.form.withConfig({ displayName: "MultipleInputWrapper", componentId: "sc-1194c76" }) `
+const MultipleInputWrapper = styled.form `
   display: flex;
   flex-flow: row wrap;
   gap: 8px 16px;

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

@@ -1,7 +1,7 @@
 "use client";
 import { Dropdown } from '../../actions/dropdown/dropdown.js';
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Clock } from '../../../icons/time/clock.js';
 
 const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
@@ -34,7 +34,7 @@ const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
             setTime(value);
         }, additionalOnChange: setPeriod, defaultValue: selectedTime, defaultAdditionalValue: selectedPeriod }));
 };
-const InputWrapper = styled.div.withConfig({ displayName: "InputWrapper", componentId: "sc-1xme5wf" }) `
+const InputWrapper = styled.div `
   width: fit-content;
   display: flex;
   gap: 8px;
@@ -53,7 +53,7 @@ const InputWrapper = styled.div.withConfig({ displayName: "InputWrapper", compon
     border-color: var(--color-primary-blue-2);
   }
 `;
-const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-agufkd" }) `
+const Input = styled.input `
   max-width: 120px;
   padding: 0px;
   flex: 1;

package/dist/src/components/media/video-player/playlist-item.js

@@ -1,6 +1,6 @@
 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 { SecToDuration } from '../../atoms/seconds_to_duration/seconds_to_duration.js';
 import { P } from '../../atoms/typography/paragraph.js';
@@ -18,7 +18,7 @@ const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescript
         duration && (React__default.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
             React__default.createElement(SecToDuration, { seconds: duration })))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-ffo025" }) `
+const Wrapper = styled.div `
   width: 100%;
   flex: 0 1 auto;
   display: flex;
@@ -31,7 +31,7 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
 const ProgressBar = ({ progressPercent }) => (React__default.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     React__default.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
     React__default.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
-const ProgressBarSvg = styled.svg.withConfig({ displayName: "ProgressBarSvg", componentId: "sc-lfeihe" }) `
+const ProgressBarSvg = styled.svg `
   width: 133px;
   position: absolute;
   bottom: 0px;

package/dist/src/components/media/video-player/video.js

@@ -2,7 +2,7 @@
 import React__default from 'react';
 import Image from 'next/image';
 import ReactPlayer from 'react-player';
-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';
@@ -91,7 +91,7 @@ const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProg
                     React__default.createElement(Button, { onClick: toggleShowingAll, size: "small", sx: "background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8);", type: "text" }, showingAll ? 'Collapse' : 'View all')),
                 React__default.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React__default.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => handleMediaItemChange(index), playable: playable, progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-u0wvew" }) `
+const Wrapper = styled.div `
   display: flex;
   justify-content: center;
   background-color: var(--color-grey-0);
@@ -102,7 +102,7 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
 
   ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
 `;
-const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", componentId: "sc-ootjk5" }) `
+const InnerWrapper = styled.div `
   max-width: 2284px;
   flex: 1;
   display: flex;
@@ -131,7 +131,7 @@ const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", compon
         flex: 3;
       }`}
 `;
-const Side = styled.div.withConfig({ displayName: "Side", componentId: "sc-1oic84j" }) `
+const Side = styled.div `
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -139,7 +139,7 @@ const Side = styled.div.withConfig({ displayName: "Side", componentId: "sc-1oic8
   padding: 24px;
   gap: 24px;
 `;
-const HorizontalPlaylistWrapper = styled.div.withConfig({ displayName: "HorizontalPlaylistWrapper", componentId: "sc-sjgsxj" }) `
+const HorizontalPlaylistWrapper = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -165,7 +165,7 @@ const HorizontalPlaylistWrapper = styled.div.withConfig({ displayName: "Horizont
     opacity: 30%;
   }
 `;
-const VerticalPlaylistWrapper = styled.div.withConfig({ displayName: "VerticalPlaylistWrapper", componentId: "sc-umezux" }) `
+const VerticalPlaylistWrapper = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;

package/dist/src/components/navigation/breadcrumb/breadcrumb.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import Link from 'next/link';
 import { Box } from '../../atoms/box/box.js';
 import { ChevronLeft } from '../../../icons/arrow/chevron_left.js';
@@ -38,7 +38,7 @@ const BreadcrumbItem = ({ avatar, children, href, icon, iconColor = 'blue', onCl
 };
 Breadcrumb.Item = BreadcrumbItem;
 BreadcrumbItem.displayName = 'Breadcrumb.Item';
-const Item = styled(Link).withConfig({ displayName: "Item", componentId: "sc-1osg5js" }) `
+const Item = styled(Link) `
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -98,7 +98,7 @@ const Item = styled(Link).withConfig({ displayName: "Item", componentId: "sc-1os
     line-height: 24px;
     `}
 `;
-const IconWrapper = styled.div.withConfig({ displayName: "IconWrapper", componentId: "sc-a21t3w" }) `
+const IconWrapper = styled.div `
   background-color: ${({ $color }) => `var(--color-hue-${$color}-2)`};
   height: 48px;
   width: 48px;

package/dist/src/components/navigation/inner/inner.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import Link from 'next/link';
 import { Button } from '../../actions/button/button.js';
 import { Drawer } from '../../surfaces/drawer/drawer.js';
@@ -49,7 +49,7 @@ const InnerNav = ({ children }) => {
         React__default.createElement("div", null, elementsByType['Dropdown']),
         React__default.createElement("div", null, elementsByType['Misc'])));
 };
-const NavWrapper = styled.nav.withConfig({ displayName: "NavWrapper", componentId: "sc-fmky7r" }) `
+const NavWrapper = styled.nav `
   height: 100%;
   width: 365px;
   padding: 24px 12px 24px 16px;
@@ -62,7 +62,7 @@ const InnerNavItem = ({ active, href, icon, label, sx, onClick, }) => {
         icon,
         label));
 };
-const Item = styled(Link).withConfig({ displayName: "Item", componentId: "sc-v0xyvf" }) `
+const Item = styled(Link) `
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -99,19 +99,19 @@ const InnerNavDropdown = ({ children, icon, label, open, sx, onClick, }) => {
                 !open && React__default.createElement(ChevronDown, { size: 16 }))),
         open && React__default.createElement(DropdownContent, null, children)));
 };
-const DropdownContent = styled.div.withConfig({ displayName: "DropdownContent", componentId: "sc-1dpe0hj" }) `
+const DropdownContent = styled.div `
   & > a,
   & > button {
     padding-left: 40px;
   }
 `;
-const DropdownTriggerWrapper = styled.div.withConfig({ displayName: "DropdownTriggerWrapper", componentId: "sc-1tncdyp" }) `
+const DropdownTriggerWrapper = styled.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex: 1;
 `;
-const DropdownItem = styled.a.withConfig({ displayName: "DropdownItem", componentId: "sc-1j2ih6t" }) `
+const DropdownItem = styled.a `
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -144,7 +144,7 @@ const InnerNavBackButton = ({ href, label, sx }) => {
             React__default.createElement(ChevronLeft, { size: 24 })),
         label));
 };
-const BackButton = styled(Link).withConfig({ displayName: "BackButton", componentId: "sc-1tnhf44" }) `
+const BackButton = styled(Link) `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -171,7 +171,7 @@ InnerNavBackButton.displayName = 'InnerNav.BackButton';
 const InnerNavHeader = ({ children }) => {
     return React__default.createElement(HeaderWrapper, null, children);
 };
-const HeaderWrapper = styled.div.withConfig({ displayName: "HeaderWrapper", componentId: "sc-uqenst" }) ``;
+const HeaderWrapper = styled.div ``;
 InnerNav.Header = InnerNavHeader;
 InnerNavHeader.displayName = 'InnerNav.Header';
 const InnerNavDrawer = ({ children, label, controlledOpen, onOpenChange, }) => {

package/dist/src/components/navigation/tabs/tabs.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import Link from 'next/link';
 import { P } from '../../atoms/typography/paragraph.js';
 
@@ -50,7 +50,7 @@ const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
     const id = React__default.useId();
     return (React__default.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React__default.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, href: item?.href, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => onChange && onChange(index), size: size })))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-75atr8" }) `
+const Wrapper = styled.div `
   display: flex;
   flex-flow: row nowrap;
   align-items: flex-end;
@@ -75,7 +75,7 @@ const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'lar
         icon && React__default.createElement(IconWrapper, { "$bg": bgColor }, icon),
         React__default.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
 };
-const Element = styled(Link).withConfig({ displayName: "Element", componentId: "sc-123oei0" }) `
+const Element = styled(Link) `
   position: relative;
   display: flex;
   align-items: center;
@@ -141,7 +141,7 @@ const Element = styled(Link).withConfig({ displayName: "Element", componentId: "
   `
     : ''}
 `;
-const IconWrapper = styled.div.withConfig({ displayName: "IconWrapper", componentId: "sc-2e52gq" }) `
+const IconWrapper = styled.div `
   padding: 8px;
   border-radius: 8px;
   background-color: ${({ $bg }) => $bg};

package/dist/src/components/surfaces/accordion/accordion.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';
 import { callAll } from '../../../utils/function.js';
 import { ChevronDown } from '../../../icons/arrow/chevron_down.js';
@@ -19,7 +19,7 @@ const Accordion = ({ children, sx }) => {
             return null;
         }))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-5n8nc0" }) `
+const Wrapper = styled.div `
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
 const AccordionItem = ({ buttonSx, children, index, sx, trigger, }) => {
@@ -32,7 +32,7 @@ const AccordionItem = ({ buttonSx, children, index, sx, trigger, }) => {
             openIndex === index ? React__default.createElement(ChevronUp, null) : React__default.createElement(ChevronDown, null)),
         React__default.createElement(Box, { sx: openIndex === index ? sx : 'visibility: hidden; height: 0px;' }, children)));
 };
-const TriggerWrapper = styled.button.withConfig({ displayName: "TriggerWrapper", componentId: "sc-hz7pp7" }) `
+const TriggerWrapper = styled.button `
   display: flex;
   align-items: center;
   justify-content: space-between;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { H } from '../../atoms/typography/heading.js';
 import { P } from '../../atoms/typography/paragraph.js';
 
@@ -16,33 +16,33 @@ const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime,
         dayOfWeek && startTime && endTime && (React__default.createElement(TimeContainer, null,
             React__default.createElement(P, { as: "span", "$color": "red-5" }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
 };
-const Container = styled.div.withConfig({ displayName: "Container", componentId: "sc-hde5ng" }) `
+const Container = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const CalendarContainer = styled.div.withConfig({ displayName: "CalendarContainer", componentId: "sc-tmcgcq" }) `
+const CalendarContainer = styled.div `
   display: flex;
   flex-direction: column;
 
   ${({ $size }) => ($size === 'large' ? 'width: 120px;' : 'width: 64px;')}
 `;
-const MonthContainer = styled.div.withConfig({ displayName: "MonthContainer", componentId: "sc-1i27lsu" }) `
+const MonthContainer = styled.div `
   background-color: var(--color-red-5);
   border-radius: 16px 16px 0 0;
 
   ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 8px;'}
 `;
-const DateContainer = styled.div.withConfig({ displayName: "DateContainer", componentId: "sc-1yp4ptc" }) `
+const DateContainer = styled.div `
   background-color: white;
   border-radius: 0 0 16px 16px;
   box-shadow: var(--elevation-3);
 
   ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 16px;'}
 `;
-const TimeContainer = styled.div.withConfig({ displayName: "TimeContainer", componentId: "sc-1abm9yg" }) `
+const TimeContainer = styled.div `
   margin-top: 16px;
 `;