feat: add radio-check-wrapper, fix label wrapping for checkboxes and radios and improve full-width property

Author: luangjokaj

@types/cherry.d.ts

@@ -190,6 +190,7 @@ interface LabelProps extends React.InputHTMLAttributes<HTMLLabelElement> {
 	children?: React.ReactNode;
 	error?: boolean;
 	success?: boolean;
+	fullWidth?: boolean;
 	htmlFor?: string;
 	theme?: object;
 }

dist/cherry.js

@@ -1,6 +1,6 @@
 {
 	"name": "cherry-components",
-	"version": "0.0.1-16",
+	"version": "0.0.2",
 	"description": "Cherry React Components",
 	"main": "dist/cherry.js",
 	"module": "dist/cherry.module.js",

dist/cherry.module.js

@@ -12,7 +12,7 @@ function Input({
 	success,
 	error,
 	label,
-	fullWidth = true,
+	fullWidth,
 	theme = localTheme,
 	...props
 }) {

package-lock.json

@@ -12,13 +12,18 @@ function Select({
 	success,
 	label,
 	theme = localTheme,
-	fullWidth = true,
+	fullWidth,
 	...props
 }) {
 	return (
 		<>
 			{label && (
-				<Label htmlFor={props.id} error={error} success={success}>
+				<Label
+					htmlFor={props.id}
+					error={error}
+					success={success}
+					fullWidth={fullWidth}
+				>
 					{label}
 				</Label>
 			)}

package.json

@@ -10,7 +10,7 @@ function Textarea({
 	success,
 	label,
 	theme = localTheme,
-	fullWidth = true,
+	fullWidth,
 	...props
 }) {
 	return (

src/Layout/Input/Input.js

@@ -7,14 +7,15 @@ function Label({
 	children,
 	error,
 	success,
+	fullWidth,
 	htmlFor,
 	theme = localTheme,
 	...props
 }) {
 	return (
 		<label
 			className={className}
-			css={labelStyles(theme, error, success)}
+			css={labelStyles(theme, error, success, fullWidth)}
 			htmlFor={htmlFor}
 			{...props}
 		>

src/Layout/Input/Select/Select.js

@@ -1,14 +1,19 @@
 import { css } from "@emotion/react";
 import { Breakpoints, mq } from "../../mq";
 
-export const labelStyles = (theme, error, success) => css`
+export const labelStyles = (theme, error, success, fullWidth) => css`
 	color: ${theme.colors.gray};
 	display: inline-block;
 	vertical-align: middle;
-	padding: 0;
+	padding: 0 7px 0 0;
 	margin: 0;
 	line-height: ${theme.sizes.text.lineheight.mobile};
 
+	${fullWidth &&
+	css`
+		width: 100%;
+	`}
+
 	${mq(Breakpoints.lg)} {
 		line-height: ${theme.sizes.text.lineheight.desktop};
 	}