cherry-styled-components 0.2.6 → 0.2.8

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-1d7e93ff-0"
+	componentId: "sc-38b0b6de-0"
 })([
 	`position:relative;display:inline-flex;width:`,
 	`px;height:`,
@@ -123,10 +123,10 @@ 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-1d7e93ff-1"
+	componentId: "sc-38b0b6de-1"
 })([
 	``,
-	`;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px `,
+	`;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px `,
 	` `,
 	`;background:`,
 	`;color:`,
@@ -146,7 +146,7 @@ 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-1d7e93ff-2"
+	componentId: "sc-38b0b6de-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:`,

package/dist/dropzone.js

@@ -155,14 +155,14 @@ 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-b829ff10-0"
+	componentId: "sc-4b43e6a9-0"
 })([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
 var StyledDropzone = styled.button.withConfig({
 	displayName: "dropzone__StyledDropzone",
-	componentId: "sc-b829ff10-1"
+	componentId: "sc-4b43e6a9-1"
 })([
 	``,
-	`;display:flex;flex-direction:`,
+	`;font-family:inherit;display:flex;flex-direction:`,
 	`;align-items:center;justify-content:center;gap:`,
 	`;width:100%;padding:`,
 	`;border-radius:`,
@@ -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-b829ff10-2"
+	componentId: "sc-4b43e6a9-2"
 })([
 	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
 	`;height:`,
@@ -197,35 +197,33 @@ 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-b829ff10-3"
+	componentId: "sc-4b43e6a9-3"
 })([
 	`display:flex;flex-direction:`,
 	`;flex-wrap:wrap;align-items:baseline;gap:`,
-	`;font-family:`,
-	`;font-size:`,
+	`;font-family:inherit;font-size:`,
 	`;line-height:`,
 	`;font-weight:600;color:`,
 	`;& span{font-weight:500;color:`,
 	`;}`
-], ({ $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);
+], ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "0 6px" : "2px", ({ 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-b829ff10-4"
+	componentId: "sc-4b43e6a9-4"
 })([
-	`font-family:`,
-	`;font-size:`,
+	`font-family:inherit;font-size:`,
 	`;line-height:`,
 	`;color:`,
 	`;`,
 	``
-], ({ theme }) => theme.fonts.text, ({ theme }) => theme.fontSizes.small.xs, ({ theme }) => theme.lineHeights.small.xs, ({ theme }) => theme.colors.gray, ({ $inline }) => $inline && css([`margin-left:auto;`]));
+], ({ 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-b829ff10-5"
+	componentId: "sc-4b43e6a9-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-b829ff10-6"
+	componentId: "sc-4b43e6a9-6"
 })([
 	`position:relative;width:72px;height:72px;border-radius:`,
 	`;overflow:hidden;border:solid 1px `,
@@ -235,16 +233,15 @@ 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-b829ff10-7"
+	componentId: "sc-4b43e6a9-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:`,
-	`;}& span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:`,
-	`;font-size:10px;line-height:1.2;}`
-], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary, ({ theme }) => theme.fonts.text);
+	`;}& span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:10px;line-height:1.2;}`
+], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary);
 var StyledThumbRemove = styled.button.withConfig({
 	displayName: "dropzone__StyledThumbRemove",
-	componentId: "sc-b829ff10-8"
+	componentId: "sc-4b43e6a9-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:`,

package/dist/input.d.ts

@@ -18,7 +18,7 @@ interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     $success?: boolean;
     $fullWidth?: boolean;
 }
-export declare const StyledInputWrapper: IStyledComponent<"web", React.HTMLAttributes<HTMLSpanElement> & Pick<InputProps, "$label" | "$fullWidth" | "type">>;
+export declare const StyledInputWrapper: IStyledComponent<"web", React.HTMLAttributes<HTMLSpanElement> & Pick<InputProps, "$label" | "$fullWidth" | "type" | "$size">>;
 export declare const StyledLabel: IStyledComponent<"web", LabelProps>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/dist/input.js

@@ -8,16 +8,19 @@ import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-f9d22714-0"
+	componentId: "sc-5e52a0cd-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
-	` & .icon-calendar{position:absolute;top:50%;right:17px;left:initial;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;@supports (-moz-appearance:none){display:none;}}`,
+	` & .icon-calendar{position:absolute;top:50%;right:`,
+	`;left:initial;transform:translateY(-50%);pointer-events:none;width:`,
+	`;height:`,
+	`;@supports (-moz-appearance:none){display:none;}}`,
 	``
-], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;align-content:flex-start;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
+], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;align-content:flex-start;`]), ({ $size }) => $size === "small" ? "14px" : "17px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledLabel = styled.label.withConfig({
 	displayName: "input__StyledLabel",
-	componentId: "sc-f9d22714-1"
+	componentId: "sc-5e52a0cd-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -26,7 +29,7 @@ var StyledLabel = styled.label.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
 var StyledInput = styled.input.withConfig({
 	displayName: "input__StyledInput",
-	componentId: "sc-f9d22714-2"
+	componentId: "sc-5e52a0cd-2"
 })([
 	``,
 	`;`,
@@ -66,6 +69,12 @@ var StyledInput = styled.input.withConfig({
 	` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg};
 			line-height: ${theme.lineHeights.inputSmall.lg};
       padding: 12px 12px;
+
+      &::-webkit-calendar-picker-indicator {
+        right: 12px;
+        width: 18px;
+        height: 18px;
+      }
 	` : `font-size: ${theme.fontSizes.input.lg};
 			line-height: ${theme.lineHeights.input.lg};`, ({ $error, $success, theme }) => {
 	return statusBorderStyles($error, $success, theme);
@@ -76,11 +85,11 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-f9d22714-3"
+	componentId: "sc-5e52a0cd-3"
 })([`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`, `;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.7);opacity:0;pointer-events:none;transition:all 0.3s ease;}`], ({ theme }) => theme.colors.primary);
 var StyledRadioCheckboxInput = styled.input.withConfig({
 	displayName: "input__StyledRadioCheckboxInput",
-	componentId: "sc-f9d22714-4"
+	componentId: "sc-5e52a0cd-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -165,7 +174,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-f9d22714-5"
+	componentId: "sc-5e52a0cd-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,
@@ -191,6 +200,7 @@ function LocalInput({ ...props }, ref) {
 		$fullWidth: props.$fullWidth,
 		type: props.type,
 		$label: props.$label,
+		$size: props.$size,
 		className: props.$wrapperClassName,
 		children: [props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,

package/package.json

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