cherry-styled-components 0.2.8 → 0.2.9

package/dist/input.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { IStyledComponent } from 'styled-components';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    children?: React.ReactNode;
     $wrapperClassName?: string;
     $label?: string;
     $size?: "default" | "big" | "small";

package/dist/input.js

@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-5e52a0cd-0"
+	componentId: "sc-9415f689-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
@@ -20,7 +20,7 @@ var StyledInputWrapper = styled.span.withConfig({
 ], ({ 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-5e52a0cd-1"
+	componentId: "sc-9415f689-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -29,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-5e52a0cd-2"
+	componentId: "sc-9415f689-2"
 })([
 	``,
 	`;`,
@@ -85,11 +85,11 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-5e52a0cd-3"
+	componentId: "sc-9415f689-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-5e52a0cd-4"
+	componentId: "sc-9415f689-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -174,7 +174,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-5e52a0cd-5"
+	componentId: "sc-9415f689-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,

package/dist/utils/global.js

@@ -6,8 +6,10 @@ var GlobalStyles = (theme) => createGlobalStyle([
 	`html,body{margin:0;padding:0;min-height:100%;scroll-behavior:smooth;background-color:`,
 	`;}body{font-family:"Inter",sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}*{box-sizing:border-box;min-width:0;}pre,code,kbd,samp{font-family:monospace,monospace;}pre,code,kbd,samp,blockquote,p,a,h1,h2,h3,h4,h5,h6,ul li,ol li{margin:0;padding:0;color:`,
 	`;}a{color:`,
+	`;}a:focus-visible{outline:none;border-radius:`,
+	`;box-shadow:0 0 0 2px `,
 	`;}ol,ul{list-style:none;margin:0;padding:0;}figure{margin:0;}fieldset{appearance:none;border:none;}button,input,a,img,svg,svg *{transition:all 0.3s ease;}strong,b{font-weight:700;}hr{margin:20px 0;border:none;border-bottom:1px solid `,
 	`;}`
-], theme.colors.light, theme.colors.dark, theme.isDark ? theme.colors.dark : theme.colors.primary, theme.colors.grayLight);
+], theme.colors.light, theme.colors.dark, theme.isDark ? theme.colors.dark : theme.colors.primary, theme.spacing.radius.xs, theme.colors.primaryLight, theme.colors.grayLight);
 //#endregion
 export { GlobalStyles };

package/package.json

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