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

package/dist/src/components/actions/dropdown/dropdown.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 { Checkbox } from '../../input/checkbox/checkbox.js';
 import { P } from '../../atoms/typography/paragraph.js';
@@ -116,13 +116,13 @@ const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true
                     } }, dropdownOptions),
                 !!additionalOptions?.length && (React__default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, additionalOptions.map((additionalOption) => (React__default.createElement(Option, { key: additionalOption.value, onClick: handleAdditionalChange, selected: additionalSelected === additionalOption.value, label: additionalOption.label, value: additionalOption.value }))))))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-kif526" }) `
+const Wrapper = styled.div `
   position: relative;
   display: block;
   outline: none;
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Container = styled.div.withConfig({ displayName: "Container", componentId: "sc-typ2kd" }) `
+const Container = styled.div `
   z-index: 1;
   background-color: var(--color-white);
   position: absolute;
@@ -169,7 +169,7 @@ const Option = ({ checkbox, disabled, icon, label, onClick, selected, sublabel,
 };
 Option.displayName = 'Dropdown.Option';
 Dropdown.Option = Option;
-const OptionWrapper = styled.div.withConfig({ displayName: "OptionWrapper", componentId: "sc-19ywa56" }) `
+const OptionWrapper = styled.div `
   position: relative;
   z-index: 1;
   padding: ${({ $hasSublabel }) => ($hasSublabel ? 10 : 12)}px 16px;
@@ -217,7 +217,7 @@ const Spacer = ({ sx }) => {
 };
 Spacer.displayName = 'Dropdown.Spacer';
 Dropdown.Spacer = Spacer;
-const SpacerWrapper = styled.div.withConfig({ displayName: "SpacerWrapper", componentId: "sc-yx4o59" }) `
+const SpacerWrapper = styled.div `
   width: 100%;
   height: 1px;
   background-color: var(--color-grey-8);

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const SM_WIDTH = 98;
 const LG_WIDTH = 147;
@@ -42,7 +42,7 @@ const Rate = ({ isRateable = true, onRate, percent, size, userRating, }) => {
                     React__default.createElement("stop", { offset: `${displayPercent}%`, stopColor: "#FF870A" }),
                     React__default.createElement("stop", { offset: `${displayPercent}%`, stopColor: "#FFFFFF" }))))));
 };
-const SVG = styled.svg.withConfig({ displayName: "SVG", componentId: "sc-14n4bj4" }) `
+const SVG = styled.svg `
   fill: url(#${({ $gradientId }) => $gradientId});
   cursor: ${({ $isRateable }) => ($isRateable ? 'pointer' : 'initial')};
 `;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const Switch = ({ children, disabled, onChange, value, }) => {
     return (React__default.createElement(Wrapper, null, React__default.Children.map(children, (child) => {
@@ -15,7 +15,7 @@ const Switch = ({ children, disabled, onChange, value, }) => {
         });
     })));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-vvzt8f" }) `
+const Wrapper = styled.div `
   display: flex;
   flex-flow: row nowrap;
   padding: 6px;
@@ -28,7 +28,7 @@ const SwitchItem = ({ active, children, disabled, icon, onClick, value, }) => {
         icon && React__default.cloneElement(icon, { size: 24, color: 'grey-6' }),
         children));
 };
-const Item = styled.button.withConfig({ displayName: "Item", componentId: "sc-11smqb1" }) `
+const Item = styled.button `
   width: 154px;
   height: 36px;
   display: flex;

package/dist/src/components/actions/toggle/toggle.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';
 
@@ -12,18 +12,18 @@ const Toggle = ({ checked, label, onChange }) => {
             React__default.createElement(Slider, { "$status": status })),
         label && React__default.createElement(P, { "$fontSize": 14 }, label)));
 };
-const Wrapper = styled.label.withConfig({ displayName: "Wrapper", componentId: "sc-1ufgey5" }) `
+const Wrapper = styled.label `
   width: 28px;
   height: 16px;
   position: relative;
   display: inline-block;
 `;
-const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-i12wu8" }) `
+const Input = styled.input `
   opacity: 0;
   width: 0;
   height: 0;
 `;
-const Slider = styled.span.withConfig({ displayName: "Slider", componentId: "sc-qfnwzm" }) `
+const Slider = styled.span `
   position: absolute;
   cursor: pointer;
   top: 0px;

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

@@ -1,6 +1,6 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { COLORS } from '../../../common/colors.js';
 import { Box } from '../../atoms/box/box.js';
 import { Button } from '../button/button.js';
@@ -138,7 +138,7 @@ const Upload = ({ background = 'hue-blue-3', borderColor = 'hue-blue-2', childre
             return child;
         })));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-18qn66n" }) `
+const Wrapper = styled.div `
   box-sizing: border-box;
   width: ${({ $size }) => $size === 'large'
     ? '100%'
@@ -157,7 +157,7 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
   border: 2px dashed var(--color-${({ $borderColor }) => $borderColor});
   border-radius: ${({ $size }) => ($size === 'large' ? '16px' : '8px')};
 `;
-const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-ej9htv" }) `
+const Input = styled.input `
   display: none;
 `;
 

package/dist/src/components/atoms/box/box.js

@@ -1,10 +1,10 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Styles } from '../../../common/styles.js';
 
 const Box = ({ $display = 'flex', sx, ...args }) => (React__default.createElement(Component, { "$display": $display, "$sx": sx, ...args }));
-const Component = styled.div.withConfig({ displayName: "Component", componentId: "sc-d9h4qv" }) `
+const Component = styled.div `
   ${({ $display }) => ($display === 'flex' ? 'display: flex;' : '')}
   ${Styles.flex}
   ${Styles.backgroundColor}

package/dist/src/components/atoms/typography/display.js

@@ -1,10 +1,10 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Typography } from './typography.js';
 
 const Display = ({ as = 'h1', $fontSize = 64, $lineHeight = 96, $textAlign = 'left', ...rest }) => (React__default.createElement(StyledDisplay, { as: as || 'h1', "$fontSize": $fontSize, "$lineHeight": $lineHeight, "$textAlign": $textAlign, ...rest }));
-const StyledDisplay = styled(Typography).withConfig({ displayName: "StyledDisplay", componentId: "sc-rbloai" }) `
+const StyledDisplay = styled(Typography) `
   font-size: ${({ $fontSize }) => $fontSize + 'px'};
   line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
   text-align: ${({ $textAlign }) => $textAlign || 'left'};

package/dist/src/components/atoms/typography/heading.js

@@ -1,9 +1,9 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Typography } from './typography.js';
 
-const StyledH = styled(Typography).withConfig({ displayName: "StyledH", componentId: "sc-uymjr7" }) `
+const StyledH = styled(Typography) `
   font-size: ${({ $fontSize }) => $fontSize + 'px'};
   line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
   text-align: ${({ $textAlign }) => $textAlign || 'left'};

package/dist/src/components/atoms/typography/paragraph.js

@@ -1,10 +1,10 @@
 "use client";
 import React__default from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Styles } from '../../../common/styles.js';
 
 const P = ({ as = 'p', children, $fontSize = 16, $lineHeight = 24, $textAlign = 'left', sx, ...rest }) => (React__default.createElement(StyledP, { as: as, "$fontSize": $fontSize, "$lineHeight": $lineHeight, "$textAlign": $textAlign, "$sx": sx, ...rest }, children));
-const StyledP = styled.p.withConfig({ displayName: "StyledP", componentId: "sc-wwid3o" }) `
+const StyledP = styled.p `
   margin: 0px;
   font-family: var(--font-inter);
   font-size: ${({ $fontSize }) => $fontSize + 'px'};

package/dist/src/components/atoms/typography/typography.js

@@ -1,8 +1,8 @@
 "use client";
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Styles } from '../../../common/styles.js';
 
-const Typography = styled.p.withConfig({ displayName: "Typography", componentId: "sc-114chp1" }) `
+const Typography = styled.p `
   margin: 0px;
   font-family: var(--font-inter);
   ${Styles.color}

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';
@@ -19,11 +19,11 @@ const ActionCard = ({ actions, content, href, image, logo, subtitle, sx, title,
                 React__default.createElement(P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", "$textClampLines": 3, sx: "margin-top: 12px;" }, content),
                 React__default.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: auto; width: 100%;" }, React__default.Children.toArray(actions))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-18lfzyv" }) `
+const Wrapper = styled.div `
   text-decoration: none;
   ${({ as }) => (as === 'a' ? 'cursor: pointer;' : '')}
 `;
-const Action = styled.figure.withConfig({ displayName: "Action", componentId: "sc-dbj7dc" }) `
+const Action = styled.figure `
   position: relative;
   border-radius: 16px;
   width: 318px;
@@ -41,7 +41,7 @@ const Action = styled.figure.withConfig({ displayName: "Action", componentId: "s
 
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
-const ImgWrapper = styled.div.withConfig({ displayName: "ImgWrapper", componentId: "sc-x3axa1" }) `
+const ImgWrapper = styled.div `
   width: 318px;
   height: 160px;
   position: relative;
@@ -54,7 +54,7 @@ const ImgWrapper = styled.div.withConfig({ displayName: "ImgWrapper", componentI
     border-radius: 16px 16px 0 0;
   }
 `;
-const Figcaption = styled.figcaption.withConfig({ displayName: "Figcaption", componentId: "sc-4oz5e3" }) `
+const Figcaption = styled.figcaption `
   position: relative;
   display: flex;
   align-items: center;
@@ -66,7 +66,7 @@ const Figcaption = styled.figcaption.withConfig({ displayName: "Figcaption", com
   border-radius: 0px 0px 15px 15px;
   text-align: center;
 `;
-const LogoWrapper = styled.div.withConfig({ displayName: "LogoWrapper", componentId: "sc-11jn7sn" }) `
+const LogoWrapper = styled.div `
   position: absolute;
   top: -28px;
   right: calc(50% - 28px);

package/dist/src/components/card/audio/audio.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';
@@ -35,7 +35,7 @@ const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href, image,
                         ")"),
                     React__default.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React__default.Children.toArray(actions)))))));
 };
-const Wrapper = styled.a.withConfig({ displayName: "Wrapper", componentId: "sc-ag2zk5" }) `
+const Wrapper = styled.a `
   cursor: pointer;
   display: block;
   position: relative;
@@ -107,7 +107,7 @@ const Wrapper = styled.a.withConfig({ displayName: "Wrapper", componentId: "sc-a
 
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
-const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "sc-3tgv5e" }) `
+const Figure = styled.figure `
   margin: 0px;
   border-radius: 16px;
 
@@ -121,13 +121,13 @@ const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "s
     aspect-ratio: 228 / 228;
   }
 `;
-const Figcaption = styled.figcaption.withConfig({ displayName: "Figcaption", componentId: "sc-16ph10g" }) `
+const Figcaption = styled.figcaption `
   display: flex;
   flex-flow: column nowrap;
   gap: 8px;
   padding: 8px;
 `;
-const DropdownWrapper = styled.div.withConfig({ displayName: "DropdownWrapper", componentId: "sc-s83dsz" }) `
+const DropdownWrapper = styled.div `
   position: absolute;
   top: 8px;
   right: 8px;

package/dist/src/components/card/feature/feature.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 { Button } from '../../actions/button/button.js';
 import { Modal } from '../../surfaces/modal/modal.js';
@@ -80,10 +80,10 @@ const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx
                     }
                   ` }))))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-1qnr8yp" }) `
+const Wrapper = styled.div `
   text-decoration: none;
 `;
-const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "sc-1yd41eh" }) `
+const Figure = styled.figure `
   max-width: min-content;
   box-sizing: border-box;
   display: flex;
@@ -148,7 +148,7 @@ const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "s
 
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
-const Title = styled.figcaption.withConfig({ displayName: "Title", componentId: "sc-h53kzr" }) `
+const Title = styled.figcaption `
   position: relative;
   padding-right: 32px;
   color: var(--color-grey-2);
@@ -159,7 +159,7 @@ const Title = styled.figcaption.withConfig({ displayName: "Title", componentId:
   letter-spacing: -0.252px;
   user-select: none;
 `;
-const Content = styled.figcaption.withConfig({ displayName: "Content", componentId: "sc-1p1h13m" }) `
+const Content = styled.figcaption `
   font-size: 14px;
   font-family: var(--font-inter);
   font-weight: 400;
@@ -172,7 +172,7 @@ const Content = styled.figcaption.withConfig({ displayName: "Content", component
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 `;
-const EditTitle = styled.input.withConfig({ displayName: "EditTitle", componentId: "sc-1t4mpky" }) `
+const EditTitle = styled.input `
   width: calc(100% - 24px);
   padding: 12px;
   background-color: var(--color-white);
@@ -185,7 +185,7 @@ const EditTitle = styled.input.withConfig({ displayName: "EditTitle", componentI
   border-radius: 8px;
   outline: none;
 `;
-const EditContent = styled(EditTitle).withConfig({ displayName: "EditContent", componentId: "sc-172zc8" }) `
+const EditContent = styled(EditTitle) `
   padding: 6px 12px;
   font-size: 14px;
   font-family: var(--font-inter);

package/dist/src/components/card/meeting/meeting.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';
@@ -80,7 +80,7 @@ const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDa
                     React__default.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 }, location))),
             React__default.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 32px; width: 100%;" }, React__default.Children.toArray(actions)))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-16jvojq" }) `
+const Wrapper = styled.div `
   min-width: 312px;
   position: relative;
   display: block;
@@ -112,18 +112,18 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
 
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
-const MeetingInformation = styled.div.withConfig({ displayName: "MeetingInformation", componentId: "sc-1eh77zz" }) `
+const MeetingInformation = styled.div `
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 16px;
   height: 128px;
 `;
-const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "sc-l76cg6" }) `
+const Figure = styled.figure `
   position: relative;
   margin: 0;
 `;
-const OverlayBottomContainer = styled.div.withConfig({ displayName: "OverlayBottomContainer", componentId: "sc-1101ni2" }) `
+const OverlayBottomContainer = styled.div `
   position: absolute;
   right: 0;
   bottom: 0;
@@ -132,7 +132,7 @@ const OverlayBottomContainer = styled.div.withConfig({ displayName: "OverlayBott
   display: flex;
   gap: 8px;
 `;
-const OverlayTopContainer = styled.div.withConfig({ displayName: "OverlayTopContainer", componentId: "sc-1g958ii" }) `
+const OverlayTopContainer = styled.div `
   position: absolute;
   right: 0;
   top: 0;

package/dist/src/components/card/person/person.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 { Button } from '../../actions/button/button.js';
 import { Dropdown } from '../../actions/dropdown/dropdown.js';
@@ -20,7 +20,7 @@ const PersonCard = ({ actions, dotsActions, href, image, subtitle, sx, title, })
                 React__default.createElement(P, { as: "span", "$color": "white", "$fontSize": 14, "$lineHeight": 20 }, subtitle),
                 actions && (React__default.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 16px;" }, React__default.Children.toArray(actions)))))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-1o0kizt" }) `
+const Wrapper = styled.div `
   width: 312px;
   height: 400px;
   display: block;
@@ -37,7 +37,7 @@ const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc
     object-fit: cover;
   }
 `;
-const Shadow = styled.div.withConfig({ displayName: "Shadow", componentId: "sc-1c1yyjy" }) `
+const Shadow = styled.div `
   border-radius: 16px;
   position: absolute;
   top: 0px;
@@ -48,7 +48,7 @@ const Shadow = styled.div.withConfig({ displayName: "Shadow", componentId: "sc-1
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
     transparent 50% / cover no-repeat;
 `;
-const Person = styled.figure.withConfig({ displayName: "Person", componentId: "sc-1nxpsyt" }) `
+const Person = styled.figure `
   position: relative;
   width: 100%;
   height: 100%;
@@ -64,7 +64,7 @@ const Person = styled.figure.withConfig({ displayName: "Person", componentId: "s
 
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
-const Figcaption = styled.figcaption.withConfig({ displayName: "Figcaption", componentId: "sc-1gmfewm" }) `
+const Figcaption = styled.figcaption `
   position: relative;
   width: 100%;
   box-sizing: border-box;

package/dist/src/components/card/price/price.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 { Button } from '../../actions/button/button.js';
 import { H } from '../../atoms/typography/heading.js';
@@ -44,7 +44,7 @@ const PriceCard = ({ actions, content, dotsActions, featureTitle, features, labe
                     React__default.createElement(Checkmark, { color: "green-5", sx: "padding: 2px; border-radius: 50%; background-color: var(--color-green-9);" }),
                     React__default.createElement(P, { "$fontSize": 14, "$lineHeight": 20 }, item))))))));
 };
-const Price = styled.figure.withConfig({ displayName: "Price", componentId: "sc-yhlye3" }) `
+const Price = styled.figure `
   position: relative;
   z-index: 1;
   margin: 0px;
@@ -64,7 +64,7 @@ const Price = styled.figure.withConfig({ displayName: "Price", componentId: "sc-
     }
   }
 `;
-const Label = styled.div.withConfig({ displayName: "Label", componentId: "sc-io0hev" }) `
+const Label = styled.div `
   max-width: calc(100% - 32px);
   box-sizing: border-box;
   padding: 8px 24px;
@@ -73,7 +73,7 @@ const Label = styled.div.withConfig({ displayName: "Label", componentId: "sc-io0
   box-shadow: var(--elevation-2);
   border-bottom: 1px solid var(--color-grey-9);
 `;
-const Divider = styled.div.withConfig({ displayName: "Divider", componentId: "sc-1xlozi5" }) `
+const Divider = styled.div `
   height: 1px;
   width: 100%;
   box-sizing: border-box;

package/dist/src/components/card/regular/regular.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';
 
 const RegularCard = ({ children, href, image, sx, }) => {
@@ -9,7 +9,7 @@ const RegularCard = ({ children, href, image, sx, }) => {
         React__default.createElement(Image, { alt: "", height: 352, quality: 100, src: image, width: 352 }),
         React__default.createElement(Box, { "$dir": "column", "$padding": 24 }, children)));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-u3yov8" }) `
+const Wrapper = styled.div `
   position: relative;
   display: block;
   text-decoration: none;

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

@@ -1,8 +1,8 @@
 "use client";
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Box } from '../atoms/box/box.js';
 
-const PurchaseTextWrapper = styled(Box).withConfig({ displayName: "PurchaseTextWrapper", componentId: "sc-1d2toy8" }) `
+const PurchaseTextWrapper = styled(Box) `
   position: absolute;
   top: 16px;
   left: 16px;

package/dist/src/components/card/video/video.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';
@@ -35,7 +35,7 @@ const VideoEpisodeCard = ({ actions, actionDropdown, content, cta, href, image,
                         ")"),
                     React__default.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React__default.Children.toArray(actions)))))));
 };
-const Wrapper = styled.a.withConfig({ displayName: "Wrapper", componentId: "sc-8dpaxu" }) `
+const Wrapper = styled.a `
   cursor: pointer;
   display: block;
   position: relative;
@@ -102,7 +102,7 @@ const Wrapper = styled.a.withConfig({ displayName: "Wrapper", componentId: "sc-8
 
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
-const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "sc-1706qmy" }) `
+const Figure = styled.figure `
   max-width: 410px;
   width: max-content;
   margin: 0px;
@@ -118,13 +118,13 @@ const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "s
     border-radius: 16px;
   }
 `;
-const Figcaption = styled.figcaption.withConfig({ displayName: "Figcaption", componentId: "sc-ymtla0" }) `
+const Figcaption = styled.figcaption `
   display: flex;
   flex-flow: column nowrap;
   gap: 8px;
   padding: 8px;
 `;
-const DropdownWrapper = styled.div.withConfig({ displayName: "DropdownWrapper", componentId: "sc-1qedp7p" }) `
+const DropdownWrapper = styled.div `
   position: absolute;
   top: 8px;
   right: 8px;

package/dist/src/components/card/written/written.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';
@@ -35,7 +35,7 @@ const WrittenEpisodeCard = ({ actions, actionDropdown, content, cta, href, image
                         ")"),
                     React__default.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React__default.Children.toArray(actions)))))));
 };
-const Wrapper = styled.a.withConfig({ displayName: "Wrapper", componentId: "sc-ax04sh" }) `
+const Wrapper = styled.a `
   cursor: pointer;
   display: block;
   position: relative;
@@ -107,7 +107,7 @@ const Wrapper = styled.a.withConfig({ displayName: "Wrapper", componentId: "sc-a
 
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
-const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "sc-qlw4pp" }) `
+const Figure = styled.figure `
   margin: 0px;
   border-radius: 16px;
 
@@ -121,13 +121,13 @@ const Figure = styled.figure.withConfig({ displayName: "Figure", componentId: "s
     aspect-ratio: 149 / 213;
   }
 `;
-const Figcaption = styled.figcaption.withConfig({ displayName: "Figcaption", componentId: "sc-1i8k67l" }) `
+const Figcaption = styled.figcaption `
   display: flex;
   flex-flow: column nowrap;
   gap: 8px;
   padding: 8px;
 `;
-const DropdownWrapper = styled.div.withConfig({ displayName: "DropdownWrapper", componentId: "sc-ha9l0u" }) `
+const DropdownWrapper = styled.div `
   position: absolute;
   top: 8px;
   right: 8px;

package/dist/src/components/custom/courses_selection/courses_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 { Box } from '../../atoms/box/box.js';
@@ -74,13 +74,13 @@ const CoursesSelection = ({ closeOnChange = true, closeOnBlur = true, disabled =
                     }) })));
         })))));
 };
-const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-hvz67g" }) `
+const Wrapper = styled.div `
   position: relative;
   display: block;
   outline: none;
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Container = styled.div.withConfig({ displayName: "Container", componentId: "sc-1l9348y" }) `
+const Container = styled.div `
   min-width: 280px;
   max-height: 600px;
   display: flex;
@@ -99,7 +99,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-1cp7mp1" }) `
+const OptionWrapper = styled.div `
   position: relative;
   padding: 12px 16px;
   user-select: none;
@@ -126,7 +126,7 @@ const OptionWrapper = styled.div.withConfig({ displayName: "OptionWrapper", comp
     `;
 }}
 `;
-const IconWrapper = styled.div.withConfig({ displayName: "IconWrapper", componentId: "sc-10y10h" }) `
+const IconWrapper = styled.div `
   padding: 12px;
   border-radius: 8px;
   background-color: ${({ $color }) => $color};