cherry-styled-components 0.2.4 → 0.2.6

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/tabs.js

@@ -9,11 +9,11 @@ import { rgba } from "polished";
 //#region src/lib/tabs.tsx
 var StyledTabs = styled.div.withConfig({
 	displayName: "tabs__StyledTabs",
-	componentId: "sc-7af80746-0"
+	componentId: "sc-225e1742-0"
 })([`width:100%;`]);
 var StyledTabsList = styled.div.withConfig({
 	displayName: "tabs__StyledTabsList",
-	componentId: "sc-7af80746-1"
+	componentId: "sc-225e1742-1"
 })([
 	`display:flex;overflow-x:auto;border-radius:`,
 	` `,
@@ -23,7 +23,7 @@ var StyledTabsList = styled.div.withConfig({
 ], ({ 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-7af80746-2"
+	componentId: "sc-225e1742-2"
 })([
 	``,
 	`;flex:1;min-width:fit-content;padding:12px 20px;`,
@@ -38,13 +38,13 @@ var StyledTabButton = styled.button.withConfig({
 	`;border-bottom-color:`,
 	`;`
 ], theme.colors.primary, theme.colors.primary) : css([
-	`@media (hover:hover){&:hover{color:`,
+	`&:hover{color:`,
 	`;background:`,
-	`;}}`
+	`;}`
 ], theme.colors.primary, rgba(theme.colors.primaryLight, .1)));
 var StyledTabPanel = styled.div.withConfig({
 	displayName: "tabs__StyledTabPanel",
-	componentId: "sc-7af80746-3"
+	componentId: "sc-225e1742-3"
 })([
 	``,
 	`;color:`,

package/dist/theme-toggle.js

@@ -10,7 +10,7 @@ import { rgba } from "polished";
 //#region src/lib/theme-toggle.tsx
 var StyledThemeToggle = styled.button.withConfig({
 	displayName: "theme-toggle__StyledThemeToggle",
-	componentId: "sc-fe6f1d3-0"
+	componentId: "sc-aa19beba-0"
 })([
 	``,
 	` `,
@@ -20,8 +20,8 @@ var StyledThemeToggle = styled.button.withConfig({
 	`;transition:all 0.3s ease;z-index:1;`,
 	`}`,
 	` & svg{width:16px;height:16px;object-fit:contain;transition:all 0.3s ease;position:relative;z-index:2;}& svg[stroke]{stroke:`,
-	`;}@media (hover:hover){&:hover 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);

package/dist/toast.js

@@ -52,17 +52,11 @@ function ToastNotificationsProvider({ children }) {
 }
 var StyledNotifications = styled.ul.withConfig({
 	displayName: "toast__StyledNotifications",
-	componentId: "sc-1f36b7f7-0"
-})([
-	`position:fixed;z-index:99999;margin:0;padding:0;list-style:none;`,
-	` `,
-	` `,
-	` `,
-	``
-], ({ $align }) => $align === "center" && css([`left:50%;transform:translateX(-50%);`]), ({ $align }) => $align === "right" && css([`right:20px;`]), ({ $align }) => $align === "left" && css([`left:20px;`]), ({ $bottom }) => $bottom ? css([`bottom:20px;`]) : css([`top:20px;`]));
+	componentId: "sc-623506e7-0"
+})([`position:fixed;z-index:99999;margin:0;padding:0;list-style:none;left:20px;right:20px;pointer-events:none;`, ``], ({ $bottom }) => $bottom ? css([`bottom:20px;`]) : css([`top:20px;`]));
 var StyledNotificationItem = styled.li.withConfig({
 	displayName: "toast__StyledNotificationItem",
-	componentId: "sc-1f36b7f7-1"
+	componentId: "sc-623506e7-1"
 })([
 	`display:grid;grid-template-rows:0fr;justify-items:center;margin:0;padding:0;opacity:0;pointer-events:none;transform:translateY(`,
 	`);transition:opacity 0.2s ease,transform 0.2s ease,grid-template-rows 0.25s ease 0.15s,margin 0.25s ease 0.15s;`,
@@ -78,7 +72,7 @@ var StyledNotificationItem = styled.li.withConfig({
 	`;}}& .message{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere;}& .close-button{flex-shrink:0;}}`,
 	` `,
 	``
-], ({ $bottom }) => $bottom ? "20px" : "-20px", ({ $align }) => $align === "right" && css([`justify-items:end;`]), ({ $align }) => $align === "left" && css([`justify-items:start;`]), ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.shadows.sm : theme.shadows.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme, $color }) => theme.colors[$color], ({ $visible, $bottom }) => $visible && css([`opacity:1;pointer-events:auto;transform:translateY(0);grid-template-rows:1fr;transition:grid-template-rows 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;`, ``], $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`])), ({ $static }) => $static && css([`position:relative;z-index:10;`]));
+], ({ $bottom }) => $bottom ? "20px" : "-20px", ({ $align }) => $align === "right" && css([`justify-items:end;`]), ({ $align }) => $align === "left" && css([`justify-items:start;`]), ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.shadows.sm : theme.shadows.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme, $color }) => theme.colors[$color], ({ $visible, $bottom }) => $visible && css([`opacity:1;transform:translateY(0);grid-template-rows:1fr;transition:grid-template-rows 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;& .item{pointer-events:auto;}`, ``], $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`])), ({ $static }) => $static && css([`position:relative;z-index:10;`]));
 function ToastNotifications({ $align = "center", $bottom }) {
 	const { notifications } = useToastNotifications();
 	return /*#__PURE__*/ jsx(StyledNotifications, {

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.4",
+  "version": "0.2.6",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -38,6 +38,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
+    "build:demo": "vite build --mode demo",
     "format": "prettier --write .",
     "screenshots": "node scripts/screenshot-previews.cjs"
   },