cherry-styled-components 0.2.3 → 0.2.5

package/dist/avatar-dropzone.js

@@ -115,7 +115,7 @@ function LocalAvatarDropzone({ $size, $icon = "User", $maxBytes, "aria-label": a
 var AvatarDropzone = /*#__PURE__*/ forwardRef(LocalAvatarDropzone);
 var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzoneWrapper",
-	componentId: "sc-e18fe5e0-0"
+	componentId: "sc-1d7e93ff-0"
 })([
 	`position:relative;display:inline-flex;width:`,
 	`px;height:`,
@@ -123,7 +123,7 @@ var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 ], ({ $size }) => avatarSizes[$size ?? "default"].box, ({ $size }) => avatarSizes[$size ?? "default"].box);
 var StyledAvatarDropzone = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzone",
-	componentId: "sc-e18fe5e0-1"
+	componentId: "sc-1d7e93ff-1"
 })([
 	``,
 	`;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px `,
@@ -134,9 +134,9 @@ var StyledAvatarDropzone = styled.button.withConfig({
 	`px;height:`,
 	`px;color:`,
 	`;}& img{width:100%;height:100%;object-fit:cover;display:block;}`,
-	` @media (hover:hover){&:hover:not(:disabled){border-color:`,
+	` &:hover:not(:disabled){border-color:`,
 	`;background:`,
-	`;}}&:focus{border-color:`,
+	`;}&:focus{border-color:`,
 	`;box-shadow:0 0 0 4px `,
 	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
 ], resetButton, ({ $hasImage }) => $hasImage ? "solid" : "dashed", ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ theme }) => theme.colors.primary, ({ theme, $dragOver }) => $dragOver && css([
@@ -146,12 +146,12 @@ var StyledAvatarDropzone = styled.button.withConfig({
 ], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
 var StyledAvatarRemove = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarRemove",
-	componentId: "sc-e18fe5e0-2"
+	componentId: "sc-1d7e93ff-2"
 })([
 	``,
 	`;position:absolute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,
-	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}@media (hover:hover){&:hover:not(:disabled){background:`,
-	`;}}&:disabled{cursor:not-allowed;opacity:0.6;}`
+	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}&:hover:not(:disabled){background:`,
+	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
 ], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
 //#endregion
 export { AvatarDropzone };

package/dist/dropzone.js

@@ -155,11 +155,11 @@ function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $ic
 var Dropzone = /*#__PURE__*/ forwardRef(LocalDropzone);
 var StyledDropzoneWrapper = styled.div.withConfig({
 	displayName: "dropzone__StyledDropzoneWrapper",
-	componentId: "sc-cf1c3c01-0"
+	componentId: "sc-b829ff10-0"
 })([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
 var StyledDropzone = styled.button.withConfig({
 	displayName: "dropzone__StyledDropzone",
-	componentId: "sc-cf1c3c01-1"
+	componentId: "sc-b829ff10-1"
 })([
 	``,
 	`;display:flex;flex-direction:`,
@@ -171,9 +171,9 @@ var StyledDropzone = styled.button.withConfig({
 	`;color:`,
 	`;text-align:`,
 	`;transition:all 0.3s ease;`,
-	` @media (hover:hover){&:hover:not(:disabled){border-color:`,
+	` &:hover:not(:disabled){border-color:`,
 	`;background:`,
-	`;}}&:focus{border-color:`,
+	`;}&:focus{border-color:`,
 	`;box-shadow:0 0 0 4px `,
 	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
 ], resetButton, ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "10px" : "8px", ({ $inline }) => $inline ? "10px 14px" : "24px 20px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme, $inline }) => $inline ? "transparent" : theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $inline }) => $inline ? "left" : "center", ({ theme, $dragOver }) => $dragOver && css([
@@ -183,7 +183,7 @@ var StyledDropzone = styled.button.withConfig({
 ], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
 var StyledDropIcon = styled.span.withConfig({
 	displayName: "dropzone__StyledDropIcon",
-	componentId: "sc-cf1c3c01-2"
+	componentId: "sc-b829ff10-2"
 })([
 	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
 	`;height:`,
@@ -197,7 +197,7 @@ var StyledDropIcon = styled.span.withConfig({
 ], ({ $inline }) => $inline ? "32px" : "44px", ({ $inline }) => $inline ? "32px" : "44px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "18px" : "22px", ({ $inline }) => $inline ? "18px" : "22px");
 var StyledDropPrompt = styled.span.withConfig({
 	displayName: "dropzone__StyledDropPrompt",
-	componentId: "sc-cf1c3c01-3"
+	componentId: "sc-b829ff10-3"
 })([
 	`display:flex;flex-direction:`,
 	`;flex-wrap:wrap;align-items:baseline;gap:`,
@@ -210,7 +210,7 @@ var StyledDropPrompt = styled.span.withConfig({
 ], ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "0 6px" : "2px", ({ theme }) => theme.fonts.text, ({ theme }) => theme.fontSizes.text.xs, ({ theme }) => theme.lineHeights.text.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayDark);
 var StyledDropHint = styled.span.withConfig({
 	displayName: "dropzone__StyledDropHint",
-	componentId: "sc-cf1c3c01-4"
+	componentId: "sc-b829ff10-4"
 })([
 	`font-family:`,
 	`;font-size:`,
@@ -221,11 +221,11 @@ var StyledDropHint = styled.span.withConfig({
 ], ({ theme }) => theme.fonts.text, ({ theme }) => theme.fontSizes.small.xs, ({ theme }) => theme.lineHeights.small.xs, ({ theme }) => theme.colors.gray, ({ $inline }) => $inline && css([`margin-left:auto;`]));
 var StyledThumbs = styled.div.withConfig({
 	displayName: "dropzone__StyledThumbs",
-	componentId: "sc-cf1c3c01-5"
+	componentId: "sc-b829ff10-5"
 })([`display:grid;grid-template-columns:repeat(auto-fill,72px);gap:10px;`, `{grid-template-columns:repeat(auto-fill,84px);}`], mq("sm"));
 var StyledThumb = styled.div.withConfig({
 	displayName: "dropzone__StyledThumb",
-	componentId: "sc-cf1c3c01-6"
+	componentId: "sc-b829ff10-6"
 })([
 	`position:relative;width:72px;height:72px;border-radius:`,
 	`;overflow:hidden;border:solid 1px `,
@@ -235,7 +235,7 @@ var StyledThumb = styled.div.withConfig({
 ], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, mq("sm"));
 var StyledThumbFile = styled.span.withConfig({
 	displayName: "dropzone__StyledThumbFile",
-	componentId: "sc-cf1c3c01-7"
+	componentId: "sc-b829ff10-7"
 })([
 	`display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:6px;color:`,
 	`;& svg{width:20px;height:20px;color:`,
@@ -244,12 +244,12 @@ var StyledThumbFile = styled.span.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary, ({ theme }) => theme.fonts.text);
 var StyledThumbRemove = styled.button.withConfig({
 	displayName: "dropzone__StyledThumbRemove",
-	componentId: "sc-cf1c3c01-8"
+	componentId: "sc-b829ff10-8"
 })([
 	``,
 	`;position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,
-	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}@media (hover:hover){&:hover:not(:disabled){background:`,
-	`;}}&:disabled{cursor:not-allowed;opacity:0.6;}`
+	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}&:hover:not(:disabled){background:`,
+	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
 ], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
 //#endregion
 export { Dropzone, matchesAccept };

package/dist/icon-button.d.ts

@@ -5,7 +5,8 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     "aria-label": string;
     $size?: "default" | "big" | "small";
     $error?: boolean;
+    $active?: boolean;
 }
-export declare const iconButtonStyles: (theme: Theme, $size?: "default" | "big" | "small", $error?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
+export declare const iconButtonStyles: (theme: Theme, $size?: "default" | "big" | "small", $error?: boolean, disabled?: boolean, $active?: boolean) => import('styled-components').RuleSet<object>;
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { IconButton };

package/dist/icon-button.js

@@ -4,7 +4,7 @@ import { resetButton } from "./utils/mixins.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
-import { darken, lighten } from "polished";
+import { darken, lighten, rgba } from "polished";
 //#region src/lib/icon-button.tsx
 var iconButtonSizes = {
 	small: {
@@ -20,11 +20,11 @@ var iconButtonSizes = {
 		icon: 16
 	}
 };
-var iconButtonStyles = (theme, $size, $error, disabled) => {
+var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 	const { box, icon } = iconButtonSizes[$size ?? "default"];
 	return css([
 		``,
-		`;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
+		`;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;width:`,
 		`px;height:`,
 		`px;border-radius:50%;background:`,
 		`;border:solid 2px `,
@@ -34,6 +34,7 @@ var iconButtonStyles = (theme, $size, $error, disabled) => {
 		`px;height:`,
 		`px;}`,
 		` `,
+		` `,
 		``
 	], resetButton, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? lighten(.1, theme.colors.error) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
 		`border-color:`,
@@ -49,7 +50,12 @@ var iconButtonStyles = (theme, $size, $error, disabled) => {
 		`;border-color:`,
 		`;}&:active{box-shadow:0 0 0 2px `,
 		`;}`
-	], theme.colors.primary, theme.colors.primary, theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight)), disabled && css([
+	], theme.colors.primary, theme.colors.primary, theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight)), !disabled && $active && css([
+		`border-color:`,
+		`;background:`,
+		`;color:`,
+		`;`
+	], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .18 : .1), theme.colors.primary), disabled && css([
 		`cursor:not-allowed;background:`,
 		`;border-color:`,
 		`;color:`,
@@ -58,11 +64,12 @@ var iconButtonStyles = (theme, $size, $error, disabled) => {
 };
 var StyledIconButton = styled.button.withConfig({
 	displayName: "icon-button__StyledIconButton",
-	componentId: "sc-def35ae6-0"
-})([``, ``], ({ theme, $size, $error, disabled }) => iconButtonStyles(theme, $size, $error, disabled));
+	componentId: "sc-e26e58e2-0"
+})([``, ``], ({ theme, $size, $error, disabled, $active }) => iconButtonStyles(theme, $size, $error, disabled, $active));
 function LocalIconButton({ ...props }, ref) {
 	return /*#__PURE__*/ jsx(StyledIconButton, {
 		type: "button",
+		"aria-pressed": props.$active === void 0 ? void 0 : props.$active,
 		...props,
 		ref
 	});

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from './password';
 export * from './range';
 export * from './select';
 export * from './space';
+export * from './tabs';
 export * from './textarea';
 export * from './theme-toggle';
 export * from './toast';

package/dist/index.js

@@ -26,8 +26,9 @@ import { Password } from "./password.js";
 import { Range } from "./range.js";
 import { Select, StyledIconWrapper } from "./select.js";
 import { Space } from "./space.js";
+import { TabContent, Tabs } from "./tabs.js";
 import { Textarea } from "./textarea.js";
 import { ThemeToggle } from "./theme-toggle.js";
 import { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };
+export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };

package/dist/tabs.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface TabContentProps {
+    title: string;
+    children: React.ReactNode;
+}
+declare function TabContent({ children }: TabContentProps): React.JSX.Element;
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    children: React.ReactNode;
+    onTabChange?: (index: number) => void;
+    defaultActiveTab?: number;
+    activeTab?: number;
+}
+declare function Tabs({ children, onTabChange, defaultActiveTab, activeTab, ...rest }: TabsProps): React.JSX.Element;
+export { Tabs, TabContent };

package/dist/tabs.js

@@ -0,0 +1,120 @@
+"use client";
+"use client";
+import { resetButton } from "./utils/mixins.js";
+import { styledText } from "./utils/typography.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useId, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+//#region src/lib/tabs.tsx
+var StyledTabs = styled.div.withConfig({
+	displayName: "tabs__StyledTabs",
+	componentId: "sc-225e1742-0"
+})([`width:100%;`]);
+var StyledTabsList = styled.div.withConfig({
+	displayName: "tabs__StyledTabsList",
+	componentId: "sc-225e1742-1"
+})([
+	`display:flex;overflow-x:auto;border-radius:`,
+	` `,
+	` 0 0;background:`,
+	`;border:solid 1px `,
+	`;`
+], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight);
+var StyledTabButton = styled.button.withConfig({
+	displayName: "tabs__StyledTabButton",
+	componentId: "sc-225e1742-2"
+})([
+	``,
+	`;flex:1;min-width:fit-content;padding:12px 20px;`,
+	`;font-weight:600;color:`,
+	`;border-bottom:solid 3px transparent;transition:color 0.2s ease,background 0.2s ease,border-color 0.2s ease;@media (prefers-reduced-motion:reduce){transition:none;}&:not(:last-child){border-right:solid 1px `,
+	`;}&:focus-visible{border-radius:`,
+	`;outline:solid 2px `,
+	`;outline-offset:-4px;border-bottom-color:transparent;}`,
+	``
+], resetButton, ({ theme }) => styledText(theme), ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.primary, ({ theme, $isActive }) => $isActive ? css([
+	`color:`,
+	`;border-bottom-color:`,
+	`;`
+], theme.colors.primary, theme.colors.primary) : css([
+	`&:hover{color:`,
+	`;background:`,
+	`;}`
+], theme.colors.primary, rgba(theme.colors.primaryLight, .1)));
+var StyledTabPanel = styled.div.withConfig({
+	displayName: "tabs__StyledTabPanel",
+	componentId: "sc-225e1742-3"
+})([
+	``,
+	`;color:`,
+	`;background:`,
+	`;padding:20px;border:solid 1px `,
+	`;border-top:none;border-radius:0 0 `,
+	` `,
+	`;`
+], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.spacing.radius.lg);
+function TabContent({ children }) {
+	return /*#__PURE__*/ jsx(Fragment, { children });
+}
+function Tabs({ children, onTabChange, defaultActiveTab, activeTab, ...rest }) {
+	const [internalActive, setInternalActive] = useState(defaultActiveTab ?? 0);
+	const isControlled = activeTab !== void 0;
+	const baseId = useId();
+	const tabRefs = useRef([]);
+	const tabs = React.Children.toArray(children).filter((child) => /*#__PURE__*/ React.isValidElement(child) && typeof child.props.title === "string" && child.props.title.trim() !== "");
+	const active = Math.min(isControlled ? activeTab : internalActive, Math.max(tabs.length - 1, 0));
+	const selectTab = (index) => {
+		if (!isControlled) setInternalActive(index);
+		onTabChange?.(index);
+	};
+	const handleKeyDown = (event) => {
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+				next = (active + 1) % tabs.length;
+				break;
+			case "ArrowLeft":
+				next = (active - 1 + tabs.length) % tabs.length;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = tabs.length - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		selectTab(next);
+		tabRefs.current[next]?.focus();
+	};
+	return /*#__PURE__*/ jsxs(StyledTabs, {
+		...rest,
+		children: [/*#__PURE__*/ jsx(StyledTabsList, {
+			role: "tablist",
+			onKeyDown: handleKeyDown,
+			children: tabs.map((tab, index) => /*#__PURE__*/ jsx(StyledTabButton, {
+				type: "button",
+				role: "tab",
+				id: `${baseId}-tab-${index}`,
+				"aria-selected": index === active,
+				"aria-controls": `${baseId}-panel-${index}`,
+				tabIndex: index === active ? 0 : -1,
+				$isActive: index === active,
+				ref: (node) => {
+					tabRefs.current[index] = node;
+				},
+				onClick: () => selectTab(index),
+				children: tab.props.title
+			}, index))
+		}), /*#__PURE__*/ jsx(StyledTabPanel, {
+			role: "tabpanel",
+			id: `${baseId}-panel-${active}`,
+			"aria-labelledby": `${baseId}-tab-${active}`,
+			children: tabs[active]?.props.children
+		})]
+	});
+}
+//#endregion
+export { TabContent, Tabs };

package/dist/theme-toggle.js

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { resetButton } from "./utils/mixins.js";
+import { interactiveStyles, resetButton } from "./utils/mixins.js";
 import { ThemeContext } from "./styled-components/theme-provider.js";
 import { Icon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -10,19 +10,19 @@ import { rgba } from "polished";
 //#region src/lib/theme-toggle.tsx
 var StyledThemeToggle = styled.button.withConfig({
 	displayName: "theme-toggle__StyledThemeToggle",
-	componentId: "sc-cc0c1ca5-0"
+	componentId: "sc-aa19beba-0"
 })([
 	``,
-	` width:56px;height:30px;border-radius:30px;display:flex;position:relative;margin:auto 0;transform:scale(1);background:`,
-	`;border:1px solid `,
-	`;transition:all 0.3s ease;&::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:`,
+	` `,
+	` width:56px;height:30px;border-radius:30px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;position:relative;margin:auto 0;background:`,
+	`;border-color:`,
+	`;&::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:`,
 	`;transition:all 0.3s ease;z-index:1;`,
 	`}`,
-	` & svg{width:16px;height:16px;object-fit:contain;margin:auto;transition:all 0.3s ease;position:relative;z-index:2;}& .lucide-sun{transform:translateX(1px);}& svg[stroke]{stroke:`,
-	`;}&:hover{transform:scale(1.05);color:`,
-	`;& svg[stroke]{stroke:`,
-	`;}}&:active{transform:scale(0.97);}`
-], resetButton, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => rgba(theme.colors.primaryLight, .2), ({ theme }) => theme.isDark && css([`transform:translateX(26px);`]), ({ $hidden }) => $hidden && css([`display:none;`]), ({ theme }) => theme.colors.primary, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
+	` & svg{width:16px;height:16px;object-fit:contain;transition:all 0.3s ease;position:relative;z-index:2;}& svg[stroke]{stroke:`,
+	`;}&:hover svg[stroke]{stroke:`,
+	`;}`
+], resetButton, interactiveStyles, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => rgba(theme.colors.primaryLight, .2), ({ theme }) => theme.isDark && css([`transform:translateX(26px);`]), ({ $hidden }) => $hidden && css([`display:none;`]), ({ theme }) => theme.colors.primary, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
 function LocalThemeToggle({ onClick, ...props }, ref) {
 	const { toggleTheme } = useContext(ThemeContext);
 	return /*#__PURE__*/ jsxs(StyledThemeToggle, {

package/dist/utils/mixins.js

@@ -11,8 +11,8 @@ import { rgba } from "polished";
 * elements that aren't Buttons.
 */ var interactiveStyles = css([
 	`transition:all 0.3s ease;border:solid 1px transparent;box-shadow:0 0 0 0px `,
-	`;@media (hover:hover){&:hover{border-color:`,
-	`;}}&:focus{border-color:`,
+	`;&:hover{border-color:`,
+	`;}&:focus{border-color:`,
 	`;box-shadow:0 0 0 4px `,
 	`;}&:active{box-shadow:0 0 0 2px `,
 	`;}`
@@ -23,8 +23,8 @@ import { rgba } from "polished";
 * same red the $error Button uses). Use for delete/remove affordances.
 */ var errorInteractiveStyles = css([
 	`transition:all 0.3s ease;border:solid 1px transparent;box-shadow:0 0 0 0px `,
-	`;@media (hover:hover){&:hover{border-color:`,
-	`;}}&:focus{border-color:`,
+	`;&:hover{border-color:`,
+	`;}&:focus{border-color:`,
 	`;box-shadow:0 0 0 4px `,
 	`;}&:active{box-shadow:0 0 0 2px `,
 	`;}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",