@blockle/blocks 0.6.0 → 0.7.0

package/dist/momotaro.chunk.d.ts

@@ -248,9 +248,6 @@ declare const breakpointQuery: (key: Breakpoint) => string;
  */
 type OptionalLiteral<T extends string> = T | (string & {});
 type RecordLike = Record<string | number, unknown>;
-type IsStringUnion<T> = T extends string ? (string extends T ? false : true) : false;
-type IsNumberUnion<T> = T extends number ? (number extends T ? false : true) : false;
-type IsUnion<T> = IsStringUnion<T> extends true ? true : IsNumberUnion<T> extends true ? true : false;
 
 type Atoms = Parameters<typeof atoms>[0];
 type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
@@ -278,7 +275,7 @@ type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
 type ButtonTheme = {
     base: string;
     variants: {
-        variant: 'solid' | 'outline' | 'ghost' | 'link';
+        variant: 'solid' | 'outline' | 'ghost';
         intent: 'neutral' | 'danger';
         size: 'small' | 'medium' | 'large';
         loading: boolean;
@@ -300,7 +297,7 @@ type SpinnerTheme = {
     };
 };
 type DividerTheme = {
-    base: string;
+    base?: string;
     variants: {
         color: Exclude<Atoms['color'], undefined>;
     };
@@ -316,22 +313,52 @@ type InputTheme = {
     container: string;
     input: string;
     variants: {
+        variant: 'solid' | 'outline';
         disabled: boolean;
+        required: boolean;
+    };
+};
+type CheckboxTheme = {
+    base: string;
+    icon: string;
+    label: string;
+    variants: {
+        required: boolean;
     };
 };
-type ThemeComponents = {
+type RadioTheme = {
+    base: string;
+    icon: string;
+    label: string;
+};
+type LabelTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        required: boolean;
+    };
+};
+type ComponentThemes = {
     button: ButtonTheme;
     link: LinkTheme;
     spinner: SpinnerTheme;
     divider: DividerTheme;
     dialog: DialogTheme;
     input: InputTheme;
+    checkbox: CheckboxTheme;
+    radio: RadioTheme;
+    label: LabelTheme;
 };
-type ThemeComponentsProps = {
-    [K in keyof ThemeComponents]: ThemeComponentProps<ThemeComponents[K]>;
+/**
+ * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
+ */
+type ComponentThemeProps<T extends RecordLike> = Omit<{
+    [K in keyof T]?: Exclude<T[K], undefined> extends string ? boolean : never;
+}, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? Partial<T['variants']> : never;
 };
-type ThemeComponentProps<T extends RecordLike> = {
-    [K in keyof T]?: T[K] extends RecordLike ? ThemeComponentProps<T[K]> : IsUnion<T[K]> extends true ? T[K] : T[K] extends string ? boolean : T[K];
+type ComponentThemesProps = {
+    [K in keyof ComponentThemes]: ComponentThemeProps<ComponentThemes[K]>;
 };
 
 /**
@@ -354,8 +381,14 @@ type ThemeComponentProps<T extends RecordLike> = {
  *  };
  * };
  */
-type ComponentThemeToStyles<T extends RecordLike> = {
-    [K in keyof T]?: T[K] extends RecordLike ? ComponentThemeToStyles<T[K]> : IsUnion<Exclude<T[K], undefined>> extends true ? Exclude<T[K], undefined> extends string | number ? ComponentThemeToStyles<Record<Exclude<T[K], undefined>, string>> : never : string;
+type VariantsToStyle<T extends RecordLike> = {
+    [K in keyof T]?: T[K] extends string | number ? Partial<Record<T[K], string>> : T[K] extends boolean ? string : never;
+};
+/**
+ * ComponentThemeToStyles is a helper type to define the props passed to useComponentStyles.
+ */
+type ComponentThemeToStyles<T extends RecordLike> = Omit<T, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? VariantsToStyle<T['variants']> : never;
 };
 type ComponentThemeCompoundVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
     variants: {
@@ -371,7 +404,7 @@ type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
     defaultVariants?: ComponentThemeDefaultVariants<T>;
 };
 type ThemeComponentsStyles = {
-    [K in keyof ThemeComponents]?: ComponentTheme<ThemeComponents[K]>;
+    [K in keyof ComponentThemes]: ComponentTheme<ComponentThemes[K]>;
 };
 declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
 
@@ -411,12 +444,12 @@ type ThemeTokens = {
 type ThemeInput = {
     name: string;
     tokens: ThemeTokens;
-    components: Partial<ThemeComponentsStyles>;
+    components: ThemeComponentsStyles;
 };
 type Theme = {
     name: string;
     vars: string;
-    components: Partial<ThemeComponentsStyles>;
+    components: ThemeComponentsStyles;
 };
 declare function makeTheme(theme: ThemeInput): Theme;
 
@@ -530,7 +563,7 @@ type ButtonProps = {
 declare const Button: react.ForwardRefExoticComponent<{
     children: ReactNode;
     type?: "button" | "submit" | "reset" | undefined;
-    variant?: "link" | "outline" | "solid" | "ghost" | undefined;
+    variant?: "outline" | "solid" | "ghost" | undefined;
     intent?: "danger" | "neutral" | undefined;
     size?: "small" | "medium" | "large" | undefined;
     width?: Atoms['width'];
@@ -541,6 +574,23 @@ declare const Button: react.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
 } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
 
+type DialogProps = {
+    children?: ReactNode;
+    open: boolean;
+    onRequestClose: () => void;
+    className?: string;
+    size?: DialogTheme['variants']['size'];
+    'aria-label'?: string;
+};
+declare const Dialog: FC<DialogProps>;
+
+type DividerProps = {
+    className?: string;
+    color?: Atoms['backgroundColor'];
+    style?: React.CSSProperties;
+};
+declare const Divider: FC<DividerProps>;
+
 type HeadingProps = {
     align?: Atoms['textAlign'];
     children: React.ReactNode;
@@ -580,6 +630,49 @@ type InlineProps = {
 } & MarginAndPaddingAtoms;
 declare const Inline: React.FC<InlineProps>;
 
+type InputProps = {
+    className?: string;
+    name: string;
+    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    label: string;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
+declare const Input: react.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    name: string;
+    type?: OptionalLiteral<"number" | "text" | "tel" | "url" | "email" | "password"> | undefined;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    label: string;
+} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
+
+type LabelProps = {
+    visualOnly?: boolean;
+    htmlFor?: string;
+    children?: React.ReactNode;
+    required?: boolean;
+    size?: LabelTheme['variants']['size'];
+    cursor?: Atoms['cursor'];
+} & HTMLElementProps<HTMLLabelElement>;
+declare const Label: React.FC<LabelProps>;
+
+type LinkProps = {
+    children?: ReactNode;
+    underline?: LinkTheme['variants']['underline'];
+    variant?: LinkTheme['variants']['variant'];
+} & Atoms & HTMLElementProps<HTMLAnchorElement>;
+type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
+declare const Link: PolymorphicLink;
+
+type SpinnerProps = {
+    className?: string;
+    color?: SpinnerTheme['variants']['color'];
+    size?: SpinnerTheme['variants']['size'];
+    style?: React.CSSProperties;
+} & MarginAtoms;
+declare const Spinner: FC<SpinnerProps>;
+
 type StackProps = {
     alignX?: keyof AlignItemsMap;
     as?: 'div' | 'section' | 'ul' | 'ol';
@@ -588,6 +681,7 @@ type StackProps = {
     display?: ResponsiveDisplayFlex;
     gap: Atoms['gap'];
     style?: React.CSSProperties;
+    role?: React.AriaRole;
     /**
      * Start prop is only valid when as="ol"
      */
@@ -612,66 +706,17 @@ type TextProps = {
 } & MarginAndPaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 declare const Text: React.FC<TextProps>;
 
-type LinkProps = {
-    children?: ReactNode;
-    underline?: LinkTheme['variants']['underline'];
-    variant?: LinkTheme['variants']['variant'];
-} & Atoms & HTMLElementProps<HTMLAnchorElement>;
-type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
-declare const Link: PolymorphicLink;
-
-type SpinnerProps = {
-    className?: string;
-    color?: SpinnerTheme['variants']['color'];
-    size?: SpinnerTheme['variants']['size'];
-    style?: React.CSSProperties;
-} & MarginAtoms;
-declare const Spinner: FC<SpinnerProps>;
-
-type DividerProps = {
-    className?: string;
-    color?: Atoms['backgroundColor'];
-    style?: React.CSSProperties;
-};
-declare const Divider: FC<DividerProps>;
-
-type DialogProps = {
-    children?: ReactNode;
-    open: boolean;
-    onRequestClose: () => void;
-    className?: string;
-    size?: DialogTheme['variants']['size'];
-};
-declare const Dialog: FC<DialogProps>;
-
-type InputProps = {
-    className?: string;
-    name: string;
-    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
-    label: string;
-} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
-declare const Input: react.ForwardRefExoticComponent<{
-    className?: string | undefined;
-    name: string;
-    type?: OptionalLiteral<"number" | "text" | "tel" | "url" | "email" | "password"> | undefined;
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
-    label: string;
-} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
-
-declare function useComponentStyles<T extends keyof ThemeComponentsProps>(name: T, props: ThemeComponentsProps[T], useDefaultVariants?: boolean): string;
+declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
 
 type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
 type Components = {
     [K in keyof ThemeComponentsStylesRequired]: ThemeComponentsStylesRequired[K] extends RecordLike ? Required<ThemeComponentsStylesRequired[K]>['defaultVariants'] extends RecordLike ? ThemeComponentsStylesRequired[K]['defaultVariants'] extends undefined ? never : Exclude<ThemeComponentsStylesRequired[K]['defaultVariants'], undefined> : never : never;
 };
-declare const useComponentStyleDefaultProps: <T extends keyof ThemeComponents>(name: T) => Components[T];
+declare const useComponentStyleDefaultProps: <T extends keyof ComponentThemes>(name: T) => Components[T];
 
 type Args = null | undefined | boolean | string;
 declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };

package/dist/styles/themes/momotaro/components/button.css.cjs

@@ -2,8 +2,8 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = css.createVar("primaryColor");

package/dist/styles/themes/momotaro/components/button.css.mjs

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar, style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { clickable } from "./helpers.css.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
+import { clickable } from "./helpers.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = createVar("primaryColor");

package/dist/styles/themes/momotaro/components/checkbox.css.cjs

@@ -0,0 +1,53 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const styles_themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/checkbox.css.ts?used", "blocks");
+const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox", {
+  base: css.style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`,
+    transitionProperty: "background-color",
+    ":hover": {
+      backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+    },
+    selectors: {
+      "&:has(input:checked):not(:hover)": {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primary
+      }
+    }
+  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    backgroundColor: "primaryLight",
+    borderRadius: "small"
+  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_base"),
+  icon: css.style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`,
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }, "checkbox_icon"),
+  label: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.checkbox = checkbox;

package/dist/styles/themes/momotaro/components/checkbox.css.mjs

@@ -0,0 +1,54 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+import { focusable } from "./helpers.css.mjs";
+import { bounceOut } from "./transitions.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/checkbox.css.ts?used", "blocks");
+const checkbox = makeComponentTheme("checkbox", {
+  base: style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    transition: `transform ${vars.transition.fast}`,
+    transitionProperty: "background-color",
+    ":hover": {
+      backgroundColor: vars.color.primaryDark
+    },
+    selectors: {
+      "&:has(input:checked):not(:hover)": {
+        backgroundColor: vars.color.primary
+      }
+    }
+  }, atoms({
+    backgroundColor: "primaryLight",
+    borderRadius: "small"
+  }), focusable], "checkbox_base"),
+  icon: style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    transition: `transform ${vars.transition.normal} ${bounceOut}`,
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }, "checkbox_icon"),
+  label: atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+endFileScope();
+export {
+  checkbox
+};

package/dist/styles/themes/momotaro/components/helpers.css.cjs

@@ -14,6 +14,19 @@ const focusable = css.style({
   ":disabled": {
     opacity: 0.5,
     cursor: "auto"
+  },
+  selectors: {
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow,
+      transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
+      transitionProperty: "box-shadow"
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
   }
 }, "focusable");
 const clickable = css.style([focusable, {

package/dist/styles/themes/momotaro/components/helpers.css.mjs

@@ -13,6 +13,19 @@ const focusable = style({
   ":disabled": {
     opacity: 0.5,
     cursor: "auto"
+  },
+  selectors: {
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: vars.focus.boxShadow,
+      transitionDuration: vars.transition.fast,
+      transitionProperty: "box-shadow"
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
   }
 }, "focusable");
 const clickable = style([focusable, {

package/dist/styles/themes/momotaro/components/index.cjs

@@ -1,9 +1,12 @@
 "use strict";
 const styles_themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
+const styles_themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
 const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
 const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
 const styles_themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
+const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
+const styles_themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
@@ -11,6 +14,9 @@ const components = {
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
   divider: styles_themes_momotaro_components_divider_css_cjs.divider,
   dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
-  input: styles_themes_momotaro_components_input_css_cjs.input
+  input: styles_themes_momotaro_components_input_css_cjs.input,
+  checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
+  radio: styles_themes_momotaro_components_radio_css_cjs.radio,
+  label: styles_themes_momotaro_components_label_css_cjs.label
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -1,8 +1,11 @@
 import { button } from "./button.css.mjs";
+import { checkbox } from "./checkbox.css.mjs";
 import { dialog } from "./dialog.css.mjs";
 import { divider } from "./divider.css.mjs";
 import { input } from "./input.css.mjs";
+import { label } from "./label.css.mjs";
 import { link } from "./link.css.mjs";
+import { radio } from "./radio.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 const components = {
   button,
@@ -10,7 +13,10 @@ const components = {
   spinner,
   divider,
   dialog,
-  input
+  input,
+  checkbox,
+  radio,
+  label
 };
 export {
   components

package/dist/styles/themes/momotaro/components/input.css.cjs

@@ -1,7 +1,6 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
@@ -18,7 +17,8 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
     background: "transparent",
     "::placeholder": {
       color: styles_lib_theme_vars_css_cjs.vars.color.textLight
-    }
+    },
+    ":disabled": {}
   }], "input_input"),
   container: css.style([{
     minHeight: 56,
@@ -34,7 +34,7 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
     borderRadius: "medium",
     boxShadow: "medium",
     gap: "large"
-  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "input_container")
+  })], "input_container")
 });
 fileScope.endFileScope();
 exports.input = input;

package/dist/styles/themes/momotaro/components/input.css.mjs

@@ -1,6 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { focusable } from "./helpers.css.mjs";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
@@ -17,7 +16,8 @@ const input = makeComponentTheme("input", {
     background: "transparent",
     "::placeholder": {
       color: vars.color.textLight
-    }
+    },
+    ":disabled": {}
   }], "input_input"),
   container: style([{
     minHeight: 56,
@@ -33,7 +33,7 @@ const input = makeComponentTheme("input", {
     borderRadius: "medium",
     boxShadow: "medium",
     gap: "large"
-  }), focusable], "input_container")
+  })], "input_container")
 });
 endFileScope();
 export {

package/dist/styles/themes/momotaro/components/label.css.cjs

@@ -0,0 +1,33 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/label.css.ts?used", "blocks");
+const label = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("label", {
+  base: css.style({}, "label_base"),
+  variants: {
+    size: {
+      small: css.style({
+        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.xsmall
+      }, "label_variants_size_small"),
+      medium: css.style({
+        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.small
+      }, "label_variants_size_medium"),
+      large: css.style({
+        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.medium
+      }, "label_variants_size_large")
+    },
+    required: css.style({
+      ":after": {
+        content: '"*"',
+        marginLeft: styles_lib_theme_vars_css_cjs.vars.space.xsmall
+      }
+    }, "label_variants_required")
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+fileScope.endFileScope();
+exports.label = label;

package/dist/styles/themes/momotaro/components/label.css.mjs

@@ -0,0 +1,34 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+setFileScope("src/themes/momotaro/components/label.css.ts?used", "blocks");
+const label = makeComponentTheme("label", {
+  base: style({}, "label_base"),
+  variants: {
+    size: {
+      small: style({
+        fontSize: vars.fontSize.xsmall
+      }, "label_variants_size_small"),
+      medium: style({
+        fontSize: vars.fontSize.small
+      }, "label_variants_size_medium"),
+      large: style({
+        fontSize: vars.fontSize.medium
+      }, "label_variants_size_large")
+    },
+    required: style({
+      ":after": {
+        content: '"*"',
+        marginLeft: vars.space.xsmall
+      }
+    }, "label_variants_required")
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+endFileScope();
+export {
+  label
+};

package/dist/styles/themes/momotaro/components/link.css.cjs

@@ -11,6 +11,7 @@ const link = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("link",
     border: "none",
     textDecoration: "none",
     background: "transparent",
+    borderRadius: 1,
     ":hover": {
       textDecoration: "underline"
     },

package/dist/styles/themes/momotaro/components/link.css.mjs

@@ -10,6 +10,7 @@ const link = makeComponentTheme("link", {
     border: "none",
     textDecoration: "none",
     background: "transparent",
+    borderRadius: 1,
     ":hover": {
       textDecoration: "underline"
     },