@marigold/components 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @marigold/components
 
+## 0.5.0
+
+### Minor Changes
+
+- [#1784](https://github.com/marigold-ui/marigold/pull/1784) [`99af3b37`](https://github.com/marigold-ui/marigold/commit/99af3b37de24599138777ed90de0445571c3095e) Thanks [@ti10le](https://github.com/ti10le)! - refa(comp): use interface instead of type
+
+* [#1727](https://github.com/marigold-ui/marigold/pull/1727) [`026300b1`](https://github.com/marigold-ui/marigold/commit/026300b1b539b57785c0eb0282a3d3fd763194bc) Thanks [@sebald](https://github.com/sebald)! - feat(components): <Text> add possibility to change font size via style props
+
+### Patch Changes
+
+- [#1774](https://github.com/marigold-ui/marigold/pull/1774) [`93480b63`](https://github.com/marigold-ui/marigold/commit/93480b6333a4d6231db35dbf12de5726533ebfc8) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): remove label prop and add children + refa
+
+* [#1775](https://github.com/marigold-ui/marigold/pull/1775) [`6da8eba2`](https://github.com/marigold-ui/marigold/commit/6da8eba28c518c75758180697e5f0f5e5989c1f4) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): Checkbox remove label prop and add children + refa
+
+* Updated dependencies [[`5936de75`](https://github.com/marigold-ui/marigold/commit/5936de75e5a0134584438117c53c5edfe15c6c5d)]:
+  - @marigold/system@0.5.0
+  - @marigold/icons@0.4.1
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -44,9 +44,9 @@ interface AlertThemeExtension<Value> {
         [key in AlertVariants]?: Value;
     };
 }
-declare type AlertProps = {
+interface AlertProps extends ComponentProps<'div'> {
     variant?: AlertVariants;
-} & ComponentProps<'div'>;
+}
 declare const Alert: React.FC<AlertProps>;
 
 interface BadgeThemeExtension<Value> {
@@ -54,11 +54,11 @@ interface BadgeThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type BadgeProps = {
+interface BadgeProps extends ComponentProps<'div'> {
     variant?: string;
     bgColor?: string;
     borderColor?: string;
-} & ComponentProps<'div'>;
+}
 declare const Badge: React.FC<BadgeProps>;
 
 interface ButtonThemeExtension<Value> {
@@ -66,7 +66,8 @@ interface ButtonThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;
+interface ButtonProps extends PolymorphicPropsWithRef<BoxOwnProps, 'button'> {
+}
 declare const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'>;
 
 interface CardThemeExtension<Value> {
@@ -74,11 +75,11 @@ interface CardThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type CardProps = {
+interface CardProps extends ComponentProps<'div'> {
     title?: string;
     width?: ResponsiveStyleValue<string>;
     variant?: string;
-} & ComponentProps<'div'>;
+}
 declare const Card: React.FC<CardProps>;
 
 declare type CheckboxIconProps = {
@@ -86,7 +87,6 @@ declare type CheckboxIconProps = {
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
-    children?: never;
 };
 
 interface CheckboxThemeExtension<Value> {
@@ -95,14 +95,12 @@ interface CheckboxThemeExtension<Value> {
     };
 }
 declare type CheckboxInputProps = CheckboxIconProps & ToggleProps & ComponentProps<'input'>;
-declare type CheckboxProps = {
+interface CheckboxProps extends CheckboxInputProps {
     id: string;
-    label: string;
     required?: boolean;
     labelVariant?: string;
-    error?: boolean;
     errorMessage?: string;
-} & CheckboxInputProps;
+}
 declare const Checkbox: React.FC<CheckboxProps>;
 
 interface DividerThemeExtension<Value> {
@@ -110,9 +108,9 @@ interface DividerThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type DividerProps = {
+interface DividerProps extends SeparatorProps {
     variant?: string;
-} & SeparatorProps;
+}
 declare const Divider: React.FC<DividerProps>;
 
 interface ImageThemeExtension<Value> {
@@ -120,10 +118,10 @@ interface ImageThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type ImageProps = {
+interface ImageProps extends ComponentProps<'img'> {
     variant?: string;
     children?: never;
-} & ComponentProps<'img'>;
+}
 declare const Image: React.FC<ImageProps>;
 
 interface InputThemeExtension<Value> {
@@ -131,9 +129,9 @@ interface InputThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type InputProps = {
+interface InputProps extends ComponentProps<'input'> {
     variant?: string;
-} & ComponentProps<'input'>;
+}
 declare const Input: React.FC<InputProps>;
 
 interface LabelThemeExtension<Value> {
@@ -158,36 +156,39 @@ interface TextThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type TextOwnProps = {
+interface TextOwnProps extends BoxOwnProps {
     align?: ResponsiveStyleValue<string>;
     color?: ResponsiveStyleValue<string>;
     cursor?: ResponsiveStyleValue<string>;
+    size?: ResponsiveStyleValue<keyof Theme$1['fontSizes'] | string>;
     outline?: ResponsiveStyleValue<string>;
     userSelect?: ResponsiveStyleValue<string>;
-} & BoxOwnProps;
-declare type TextProps = PolymorphicPropsWithRef<TextOwnProps, 'span'>;
+}
+interface TextProps extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {
+}
 declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
 
 interface LinkThemeExtension<Value> {
     link?: Value;
 }
-declare type LinkOwnProps = {
+interface LinkOwnProps extends TextOwnProps {
     disabled?: boolean;
-} & TextOwnProps;
-declare type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;
+}
+interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
+}
 declare const Link: PolymorphicComponent<LinkOwnProps, "a">;
 
 interface MenuThemeExtension<Value> {
     menu?: Value;
 }
-declare type MenuProps = {
+interface MenuProps {
     variant?: string;
     label?: string;
     onClick: ComponentProps<typeof Button>['onClick'];
     show?: boolean;
     className?: string;
     title?: string;
-};
+}
 declare const Menu: React.FC<MenuProps>;
 
 interface MenuItemThemeExtension<Value> {
@@ -195,9 +196,9 @@ interface MenuItemThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type MenuItemProps = {
+interface MenuItemProps extends ComponentProps<typeof Link> {
     variant?: string;
-} & ComponentProps<typeof Link>;
+}
 declare const MenuItem: React.FC<MenuItemProps>;
 
 interface MessageThemeExtension<Value> {
@@ -205,10 +206,10 @@ interface MessageThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type MessageProps = {
+interface MessageProps extends ComponentProps<'div'> {
     messageTitle: string;
     variant?: string;
-} & ComponentProps<'div'>;
+}
 declare const Message: React.FC<MessageProps>;
 
 declare type RadioIconProps = {
@@ -216,7 +217,6 @@ declare type RadioIconProps = {
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
-    children?: never;
 };
 
 interface RadioThemeExtension<Value> {
@@ -224,15 +224,14 @@ interface RadioThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type RadioInputProps = RadioIconProps & ComponentProps<'input'>;
-declare type RadioProps = {
+interface RadioInputProps extends RadioIconProps, ComponentProps<'input'> {
+}
+interface RadioProps extends RadioInputProps {
     id: string;
-    label: string;
     required?: boolean;
     labelVariant?: string;
-    error?: boolean;
     errorMessage?: string;
-} & RadioInputProps;
+}
 declare const Radio: React.FC<RadioProps>;
 
 interface SelectThemeExtension<Value> {
@@ -263,9 +262,9 @@ interface SliderThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type SliderProps = {
+interface SliderProps extends ComponentProps<'input'> {
     variant?: string;
-} & ComponentProps<'input'>;
+}
 declare const Slider: React.FC<SliderProps>;
 
 interface TextareaThemeExtension<Value> {
@@ -286,33 +285,33 @@ interface ValidationMessageThemeExtension<Value> {
         [key: string]: Value;
     };
 }
-declare type ValidationMessageProps = {
+interface ValidationMessageProps extends ComponentProps<'span'> {
     variant?: string;
-} & ComponentProps<'span'>;
+}
 declare const ValidationMessage: React.FC<ValidationMessageProps>;
 
 interface Theme extends Theme$1, RootThemeExtension<CSSObject>, AlertThemeExtension<CSSObject>, BadgeThemeExtension<CSSObject>, ButtonThemeExtension<CSSObject>, CardThemeExtension<CSSObject>, CheckboxThemeExtension<CSSObject>, DividerThemeExtension<CSSObject>, ImageThemeExtension<CSSObject>, InputThemeExtension<CSSObject>, LabelThemeExtension<CSSObject>, LinkThemeExtension<CSSObject>, MenuThemeExtension<CSSObject>, MenuItemThemeExtension<CSSObject>, MessageThemeExtension<CSSObject>, RadioThemeExtension<CSSObject>, SelectThemeExtension<CSSObject>, SliderThemeExtension<CSSObject>, TextThemeExtension<CSSObject>, TextareaThemeExtension<CSSObject>, ValidationMessageThemeExtension<CSSObject> {
 }
 
-declare type ActionGroupProps = {
+interface ActionGroupProps extends ComponentProps<'div'> {
     space?: ResponsiveStyleValue<string>;
     verticalAlignment?: boolean;
-} & ComponentProps<'div'>;
+}
 declare const ActionGroup: React.FC<ActionGroupProps>;
 
 declare type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-declare type ColumnProps = {
+interface ColumnProps {
     className?: string;
     width?: WidthValues | WidthValues[];
-};
+}
 declare const Column: React.FC<ColumnProps>;
 
-declare type ColumnsProps = {
+interface ColumnsProps {
     className?: string;
     space?: ResponsiveStyleValue<string>;
     horizontalAlign?: 'left' | 'right' | 'center';
     verticalAlign?: 'top' | 'bottom' | 'center';
-};
+}
 declare const Columns: React.FC<ColumnsProps>;
 
 declare type ModalDialogProps = {
@@ -320,13 +319,14 @@ declare type ModalDialogProps = {
     backdropVariant?: string;
 } & OverlayProps & AriaDialogProps;
 
-declare type DialogProps = {
+interface DialogProps extends ModalDialogProps, ComponentProps<'div'> {
     backdropVariant?: string;
     close: ComponentProps<typeof Button>['onClick'];
     isOpen: boolean;
     title?: string;
     variant?: string;
-} & ModalDialogProps & ComponentProps<'div'>;
+    role?: 'dialog' | 'alertdialog';
+}
 declare const Dialog: React.FC<DialogProps>;
 declare const useDialogButtonProps: () => {
     state: _react_stately_overlays.OverlayTriggerState;
@@ -343,22 +343,20 @@ declare type FieldProps = {
 } & AriaTextFieldProps & ComponentProps<'input'>;
 declare const Field: React.FC<FieldProps>;
 
-declare type InlineProps = {
+interface InlineProps {
     space?: ResponsiveStyleValue<string>;
     align?: 'top' | 'center' | 'bottom';
-};
+}
 declare const Inline: React.FC<InlineProps>;
 
-declare type StackProps = {
+interface StackProps {
     space?: ResponsiveStyleValue<string>;
     align?: 'left' | 'right' | 'center';
-};
+}
 declare const Stack: React.FC<StackProps>;
 
-declare type ContainerProps = {
-    className?: string;
-    title?: string;
-};
+interface ContainerProps extends ComponentProps<'div'> {
+}
 declare const Container: React.FC<ContainerProps>;
 
-export { ActionGroup, ActionGroupProps, Alert, AlertProps, AlertThemeExtension, AlertVariants, Badge, BadgeProps, BadgeThemeExtension, Button, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Checkbox, CheckboxProps, CheckboxThemeExtension, Column, ColumnProps, Columns, Container, ContainerProps, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Field, FieldProps, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuItem, MenuItemProps, MenuItemThemeExtension, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };
+export { ActionGroup, ActionGroupProps, Alert, AlertProps, AlertThemeExtension, AlertVariants, Badge, BadgeProps, BadgeThemeExtension, Button, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Checkbox, CheckboxProps, CheckboxThemeExtension, Column, ColumnProps, Columns, ColumnsProps, Container, ContainerProps, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Field, FieldProps, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuItem, MenuItemProps, MenuItemThemeExtension, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };

package/dist/index.js

@@ -397,7 +397,7 @@ function useToggleState(props) {
 // src/Checkbox/Checkbox.tsx
 var import_icons3 = require("@marigold/icons");
 
-// src/Checkbox/CheckboxIcons.tsx
+// src/Checkbox/CheckboxIcon.tsx
 var import_react9 = __toESM(require("react"));
 var import_system2 = require("@marigold/system");
 var CheckboxIcon = ({
@@ -503,15 +503,12 @@ var CheckboxInput = (_a) => {
   const ref = import_react12.default.useRef(null);
   const { inputProps } = (0, import_checkbox.useCheckbox)(props, state, ref);
   const { focusProps } = (0, import_focus.useFocusRing)();
+  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
   return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ import_react12.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues({
-    as: "input",
-    type: "checkbox",
-    disabled: props.disabled
-  }, inputProps), focusProps), {
+  }, /* @__PURE__ */ import_react12.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react12.default.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
     ref
-  }), props))), /* @__PURE__ */ import_react12.default.createElement(CheckboxIcon, {
+  }), restProps))), /* @__PURE__ */ import_react12.default.createElement(CheckboxIcon, {
     checked: props.checked,
     variant: props.variant,
     disabled: props.disabled,
@@ -520,16 +517,12 @@ var CheckboxInput = (_a) => {
 };
 var Checkbox = (_a) => {
   var _b = _a, {
-    label,
     required,
     labelVariant = "inline",
-    error,
     errorMessage
   } = _b, props = __objRest(_b, [
-    "label",
     "required",
     "labelVariant",
-    "error",
     "errorMessage"
   ]);
   return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
@@ -543,8 +536,8 @@ var Checkbox = (_a) => {
     color: props.disabled ? "disabled" : "text"
   }, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, __spreadValues({
     as: CheckboxInput,
-    error
-  }, props)), label), error && errorMessage && /* @__PURE__ */ import_react12.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react12.default.createElement(import_icons3.Exclamation, {
+    error: props.error
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react12.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react12.default.createElement(import_icons3.Exclamation, {
     size: 16
   }), errorMessage));
 };
@@ -636,28 +629,34 @@ var Text = (0, import_react15.forwardRef)((_a, ref) => {
     as = "span",
     variant = "body",
     children,
-    className,
     align,
     color,
     cursor,
+    size,
     outline,
     userSelect
   } = _b, props = __objRest(_b, [
     "as",
     "variant",
     "children",
-    "className",
     "align",
     "color",
     "cursor",
+    "size",
     "outline",
     "userSelect"
   ]);
   return /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as,
     variant: `text.${variant}`,
-    css: { textAlign: align, color, cursor, outline, userSelect },
-    className,
+    css: {
+      textAlign: align,
+      fontSize: size,
+      color,
+      cursor,
+      outline,
+      userSelect
+    },
     ref
   }), children);
 });
@@ -921,16 +920,13 @@ var import_react23 = __toESM(require("react"));
 var MenuItem = (_a) => {
   var _b = _a, {
     variant = "default",
-    className,
     children
   } = _b, props = __objRest(_b, [
     "variant",
-    "className",
     "children"
   ]);
   return /* @__PURE__ */ import_react23.default.createElement(import_system.Box, {
-    variant: `menuItem.${variant}`,
-    className
+    variant: `menuItem.${variant}`
   }, /* @__PURE__ */ import_react23.default.createElement(Link, __spreadValues({
     variant: "menuItemLink"
   }, props), children));
@@ -1038,12 +1034,13 @@ var RadioIcon = ({
 var RadioInput = (_a) => {
   var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
   const { focusProps } = (0, import_focus3.useFocusRing)();
+  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
   return /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
     pr: "xsmall"
   }, /* @__PURE__ */ import_react27.default.createElement(import_visually_hidden3.VisuallyHidden, null, /* @__PURE__ */ import_react27.default.createElement("input", __spreadValues(__spreadValues({
     type: "radio",
     disabled: props.disabled
-  }, focusProps), props))), /* @__PURE__ */ import_react27.default.createElement(RadioIcon, {
+  }, focusProps), restProps))), /* @__PURE__ */ import_react27.default.createElement(RadioIcon, {
     variant: props.variant,
     disabled: props.disabled,
     checked: props.checked,
@@ -1052,16 +1049,12 @@ var RadioInput = (_a) => {
 };
 var Radio = (_a) => {
   var _b = _a, {
-    label,
     required,
     labelVariant = "inline",
-    error,
     errorMessage
   } = _b, props = __objRest(_b, [
-    "label",
     "required",
     "labelVariant",
-    "error",
     "errorMessage"
   ]);
   return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
@@ -1072,8 +1065,8 @@ var Radio = (_a) => {
     css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
   }, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, __spreadValues({
     as: RadioInput,
-    error
-  }, props)), label), error && errorMessage && /* @__PURE__ */ import_react27.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react27.default.createElement(import_icons7.Exclamation, {
+    error: props.error
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react27.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react27.default.createElement(import_icons7.Exclamation, {
     size: 16
   }), errorMessage));
 };
@@ -1081,19 +1074,12 @@ var Radio = (_a) => {
 // src/Slider/Slider.tsx
 var import_react28 = __toESM(require("react"));
 var Slider = (_a) => {
-  var _b = _a, {
-    variant = "",
-    className
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "className"
-  ]);
+  var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
   return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, __spreadValues({
     as: "input",
     type: "range",
     css: { verticalAlign: "middle" },
-    variant: `slider.${variant}`,
-    className
+    variant: `slider.${variant}`
   }, props));
 };
 

package/dist/index.mjs

@@ -330,7 +330,7 @@ function useToggleState(props) {
 // src/Checkbox/Checkbox.tsx
 import { Exclamation as Exclamation2 } from "@marigold/icons";
 
-// src/Checkbox/CheckboxIcons.tsx
+// src/Checkbox/CheckboxIcon.tsx
 import React8 from "react";
 import { conditional, SVG } from "@marigold/system";
 var CheckboxIcon = ({
@@ -436,15 +436,12 @@ var CheckboxInput = (_a) => {
   const ref = React11.useRef(null);
   const { inputProps } = useCheckbox(props, state, ref);
   const { focusProps } = useFocusRing();
+  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
   return /* @__PURE__ */ React11.createElement(Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ React11.createElement(VisuallyHidden, null, /* @__PURE__ */ React11.createElement(Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues({
-    as: "input",
-    type: "checkbox",
-    disabled: props.disabled
-  }, inputProps), focusProps), {
+  }, /* @__PURE__ */ React11.createElement(VisuallyHidden, null, /* @__PURE__ */ React11.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
     ref
-  }), props))), /* @__PURE__ */ React11.createElement(CheckboxIcon, {
+  }), restProps))), /* @__PURE__ */ React11.createElement(CheckboxIcon, {
     checked: props.checked,
     variant: props.variant,
     disabled: props.disabled,
@@ -453,16 +450,12 @@ var CheckboxInput = (_a) => {
 };
 var Checkbox = (_a) => {
   var _b = _a, {
-    label,
     required,
     labelVariant = "inline",
-    error,
     errorMessage
   } = _b, props = __objRest(_b, [
-    "label",
     "required",
     "labelVariant",
-    "error",
     "errorMessage"
   ]);
   return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Box, {
@@ -476,8 +469,8 @@ var Checkbox = (_a) => {
     color: props.disabled ? "disabled" : "text"
   }, /* @__PURE__ */ React11.createElement(Box, __spreadValues({
     as: CheckboxInput,
-    error
-  }, props)), label), error && errorMessage && /* @__PURE__ */ React11.createElement(ValidationMessage, null, /* @__PURE__ */ React11.createElement(Exclamation2, {
+    error: props.error
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ React11.createElement(ValidationMessage, null, /* @__PURE__ */ React11.createElement(Exclamation2, {
     size: 16
   }), errorMessage));
 };
@@ -569,28 +562,34 @@ var Text = forwardRef2((_a, ref) => {
     as = "span",
     variant = "body",
     children,
-    className,
     align,
     color,
     cursor,
+    size,
     outline,
     userSelect
   } = _b, props = __objRest(_b, [
     "as",
     "variant",
     "children",
-    "className",
     "align",
     "color",
     "cursor",
+    "size",
     "outline",
     "userSelect"
   ]);
   return /* @__PURE__ */ React14.createElement(Box, __spreadProps(__spreadValues({}, props), {
     as,
     variant: `text.${variant}`,
-    css: { textAlign: align, color, cursor, outline, userSelect },
-    className,
+    css: {
+      textAlign: align,
+      fontSize: size,
+      color,
+      cursor,
+      outline,
+      userSelect
+    },
     ref
   }), children);
 });
@@ -858,16 +857,13 @@ import React22 from "react";
 var MenuItem = (_a) => {
   var _b = _a, {
     variant = "default",
-    className,
     children
   } = _b, props = __objRest(_b, [
     "variant",
-    "className",
     "children"
   ]);
   return /* @__PURE__ */ React22.createElement(Box, {
-    variant: `menuItem.${variant}`,
-    className
+    variant: `menuItem.${variant}`
   }, /* @__PURE__ */ React22.createElement(Link, __spreadValues({
     variant: "menuItemLink"
   }, props), children));
@@ -980,12 +976,13 @@ var RadioIcon = ({
 var RadioInput = (_a) => {
   var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
   const { focusProps } = useFocusRing2();
+  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
   return /* @__PURE__ */ React26.createElement(Box, {
     pr: "xsmall"
   }, /* @__PURE__ */ React26.createElement(VisuallyHidden3, null, /* @__PURE__ */ React26.createElement("input", __spreadValues(__spreadValues({
     type: "radio",
     disabled: props.disabled
-  }, focusProps), props))), /* @__PURE__ */ React26.createElement(RadioIcon, {
+  }, focusProps), restProps))), /* @__PURE__ */ React26.createElement(RadioIcon, {
     variant: props.variant,
     disabled: props.disabled,
     checked: props.checked,
@@ -994,16 +991,12 @@ var RadioInput = (_a) => {
 };
 var Radio = (_a) => {
   var _b = _a, {
-    label,
     required,
     labelVariant = "inline",
-    error,
     errorMessage
   } = _b, props = __objRest(_b, [
-    "label",
     "required",
     "labelVariant",
-    "error",
     "errorMessage"
   ]);
   return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Box, {
@@ -1014,8 +1007,8 @@ var Radio = (_a) => {
     css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
   }, /* @__PURE__ */ React26.createElement(Box, __spreadValues({
     as: RadioInput,
-    error
-  }, props)), label), error && errorMessage && /* @__PURE__ */ React26.createElement(ValidationMessage, null, /* @__PURE__ */ React26.createElement(Exclamation5, {
+    error: props.error
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ React26.createElement(ValidationMessage, null, /* @__PURE__ */ React26.createElement(Exclamation5, {
     size: 16
   }), errorMessage));
 };
@@ -1023,19 +1016,12 @@ var Radio = (_a) => {
 // src/Slider/Slider.tsx
 import React27 from "react";
 var Slider = (_a) => {
-  var _b = _a, {
-    variant = "",
-    className
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "className"
-  ]);
+  var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
   return /* @__PURE__ */ React27.createElement(Box, __spreadValues({
     as: "input",
     type: "range",
     css: { verticalAlign: "middle" },
-    variant: `slider.${variant}`,
-    className
+    variant: `slider.${variant}`
   }, props));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -19,12 +19,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "github:marigold-ui/marigold",
+    "url": "https://github.com/marigold-ui/marigold",
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "0.4.0",
-    "@marigold/system": "0.4.0",
+    "@marigold/icons": "0.4.1",
+    "@marigold/system": "0.5.0",
     "@marigold/types": "0.4.0",
     "@react-aria/button": "^3.3.3",
     "@react-aria/checkbox": "^3.2.3",