@blockle/blocks 0.8.8 → 0.8.10

package/dist/momotaro.chunk.d.ts

@@ -1,7 +1,7 @@
 import { StyleRule } from '@vanilla-extract/css';
-import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 import * as react from 'react';
 import react__default, { useEffect } from 'react';
+import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 
 declare const atoms: ((props: {
     readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
@@ -374,6 +374,12 @@ type SwitchTheme = {
     base: string;
     slider: string;
 };
+type DropdownTheme = {
+    base: string;
+    variants: {
+        variant: 'solid' | 'outline';
+    };
+};
 type ComponentThemes = {
     button: ButtonTheme;
     checkbox: CheckboxTheme;
@@ -386,6 +392,7 @@ type ComponentThemes = {
     radio: RadioTheme;
     spinner: SpinnerTheme;
     switch: SwitchTheme;
+    dropdown: DropdownTheme;
 };
 /**
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -567,16 +574,127 @@ declare const vars: {
     };
 };
 
-type BlocksProviderProps = {
-    children: React.ReactNode;
-    theme: Theme;
+type DividerProps = {
     className?: string;
+    color?: Atoms['backgroundColor'];
     style?: React.CSSProperties;
 };
-declare const BlocksProvider: React.FC<BlocksProviderProps>;
+declare const Divider: React.FC<DividerProps>;
+
+type ProgressProps = {
+    /**
+     * The value of the progress bar, between 0 and 100.
+     * If undefined, the progress bar will be indeterminate.
+     */
+    value?: number;
+    max?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-labelledby'?: string;
+};
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLProgressElement>>;
+
+type SpinnerProps = {
+    className?: string;
+    color?: SpinnerTheme['variants']['color'];
+    size?: SpinnerTheme['variants']['size'];
+    style?: React.CSSProperties;
+} & MarginAtoms;
+declare const Spinner: React.FC<SpinnerProps>;
 
 type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
 
+type ButtonProps = {
+    children: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: ButtonTheme['variants']['variant'];
+    intent?: ButtonTheme['variants']['intent'];
+    size?: ButtonTheme['variants']['size'];
+    width?: Atoms['width'];
+    alignSelf?: Atoms['alignSelf'];
+    loading?: boolean;
+    startSlot?: React.ReactNode;
+    endSlot?: React.ReactNode;
+    disabled?: boolean;
+    asChild?: boolean;
+} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
+declare const Button: react.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    type?: "button" | "reset" | "submit" | undefined;
+    variant?: "outline" | "solid" | "ghost" | undefined;
+    intent?: "danger" | "neutral" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    width?: Atoms['width'];
+    alignSelf?: Atoms['alignSelf'];
+    loading?: boolean | undefined;
+    startSlot?: React.ReactNode;
+    endSlot?: React.ReactNode;
+    disabled?: boolean | undefined;
+    asChild?: boolean | undefined;
+} & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
+
+type CheckboxProps = {
+    name: string;
+    label?: react__default.ReactNode;
+    required?: boolean;
+} & HTMLElementProps<HTMLInputElement>;
+declare const Checkbox: react__default.ForwardRefExoticComponent<{
+    name: string;
+    label?: react__default.ReactNode;
+    required?: boolean | undefined;
+} & HTMLElementProps<HTMLInputElement> & react__default.RefAttributes<HTMLInputElement>>;
+
+type InputProps = {
+    className?: string;
+    name: string;
+    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
+    startSlot?: React.ReactNode;
+    endSlot?: React.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?: React.ReactNode;
+    endSlot?: React.ReactNode;
+    label: string;
+} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
+
+type LabelProps = {
+    /**
+     * If true, the label will be rendered as a span element
+     * but will still have the same styles as a label.
+     * Useful for when you want to use a label element but
+     * can't because of the parent element's structure.
+     */
+    asSpan?: boolean;
+    htmlFor?: string;
+    children?: React.ReactNode;
+    required?: boolean;
+    size?: LabelTheme['variants']['size'];
+    cursor?: Atoms['cursor'];
+} & HTMLElementProps<HTMLLabelElement>;
+declare const Label: React.FC<LabelProps>;
+
+type RadioProps = {
+    name: string;
+    value: string;
+    children?: React.ReactNode;
+} & HTMLElementProps<HTMLInputElement>;
+declare const Radio: react.ForwardRefExoticComponent<{
+    name: string;
+    value: string;
+    children?: React.ReactNode;
+} & HTMLElementProps<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+
+type SwitchProps = {
+    onChange?: (value: boolean) => void;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
+declare const Switch: react.ForwardRefExoticComponent<{
+    onChange?: ((value: boolean) => void) | undefined;
+} & Omit<HTMLElementProps<HTMLInputElement>, "onChange"> & react.RefAttributes<HTMLInputElement>>;
+
 type BoxProps = {
     children?: React.ReactNode;
     className?: string;
@@ -818,70 +936,6 @@ declare const Box: react.ForwardRefExoticComponent<{
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 } & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
 
-type ButtonProps = {
-    children: React.ReactNode;
-    type?: 'button' | 'submit' | 'reset';
-    variant?: ButtonTheme['variants']['variant'];
-    intent?: ButtonTheme['variants']['intent'];
-    size?: ButtonTheme['variants']['size'];
-    width?: Atoms['width'];
-    alignSelf?: Atoms['alignSelf'];
-    loading?: boolean;
-    startSlot?: React.ReactNode;
-    endSlot?: React.ReactNode;
-    disabled?: boolean;
-    asChild?: boolean;
-} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
-declare const Button: react.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    type?: "button" | "reset" | "submit" | undefined;
-    variant?: "outline" | "solid" | "ghost" | undefined;
-    intent?: "danger" | "neutral" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    width?: Atoms['width'];
-    alignSelf?: Atoms['alignSelf'];
-    loading?: boolean | undefined;
-    startSlot?: React.ReactNode;
-    endSlot?: React.ReactNode;
-    disabled?: boolean | undefined;
-    asChild?: boolean | undefined;
-} & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
-
-type CheckboxProps = {
-    name: string;
-    label?: react__default.ReactNode;
-    required?: boolean;
-} & HTMLElementProps<HTMLInputElement>;
-declare const Checkbox: react__default.ForwardRefExoticComponent<{
-    name: string;
-    label?: react__default.ReactNode;
-    required?: boolean | undefined;
-} & HTMLElementProps<HTMLInputElement> & react__default.RefAttributes<HTMLInputElement>>;
-
-type DialogProps = {
-    children?: React.ReactNode;
-    open: boolean;
-    onRequestClose: () => void;
-    className?: string;
-    size?: DialogTheme['variants']['size'];
-    'aria-label'?: string;
-};
-declare const Dialog: React.FC<DialogProps>;
-
-type DividerProps = {
-    className?: string;
-    color?: Atoms['backgroundColor'];
-    style?: React.CSSProperties;
-};
-declare const Divider: React.FC<DividerProps>;
-
-type HeadingProps = {
-    children: React.ReactNode;
-    className?: string;
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
-declare const Heading: React.FC<HeadingProps>;
-
 declare const justifyContentMap: {
     readonly left: "flex-start";
     readonly right: "flex-end";
@@ -905,37 +959,26 @@ type InlineProps = {
     children: React.ReactNode;
     className?: string;
     display?: ResponsiveDisplayFlex;
-    gap: Atoms['gap'];
+    spacing: Atoms['gap'];
     style?: React.CSSProperties;
 } & MarginAtoms & PaddingAtoms;
 declare const Inline: React.FC<InlineProps>;
 
-type InputProps = {
+type StackProps = {
+    alignX?: keyof AlignItemsMap;
+    tag?: 'div' | 'section' | 'ul' | 'ol';
+    children: React.ReactNode;
     className?: string;
-    name: string;
-    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
-    startSlot?: React.ReactNode;
-    endSlot?: React.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?: React.ReactNode;
-    endSlot?: React.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>;
+    display?: ResponsiveDisplayFlex;
+    spacing: Atoms['gap'];
+    style?: React.CSSProperties;
+    role?: React.AriaRole;
+    /**
+     * Start prop is only valid when tag="ol"
+     */
+    start?: number;
+} & MarginAtoms & PaddingAtoms;
+declare const Stack: React.FC<StackProps>;
 
 type LinkProps = {
     asChild?: boolean;
@@ -950,66 +993,36 @@ declare const Link: react.ForwardRefExoticComponent<{
     variant?: "primary" | "secondary" | "inherit" | undefined;
 } & MarginAtoms & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
 
+type BlocksProviderProps = {
+    children: React.ReactNode;
+    theme: Theme;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const BlocksProvider: React.FC<BlocksProviderProps>;
+
 type PortalProps = {
     children: React.ReactNode;
     container?: HTMLElement;
 };
 declare const Portal: React.FC<PortalProps>;
 
-type ProgressProps = {
-    /**
-     * The value of the progress bar, between 0 and 100.
-     * If undefined, the progress bar will be indeterminate.
-     */
-    value?: number;
-    max?: number;
+type DialogProps = {
+    children?: React.ReactNode;
+    open: boolean;
+    onRequestClose: () => void;
     className?: string;
-    style?: React.CSSProperties;
-    'aria-labelledby'?: string;
+    size?: DialogTheme['variants']['size'];
+    'aria-label'?: string;
 };
-declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLProgressElement>>;
-
-type RadioProps = {
-    name: string;
-    value: string;
-    label?: React.ReactNode;
-} & HTMLElementProps<HTMLInputElement>;
-declare const Radio: react.ForwardRefExoticComponent<{
-    name: string;
-    value: string;
-    label?: React.ReactNode;
-} & HTMLElementProps<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
-
-type SpinnerProps = {
-    className?: string;
-    color?: SpinnerTheme['variants']['color'];
-    size?: SpinnerTheme['variants']['size'];
-    style?: React.CSSProperties;
-} & MarginAtoms;
-declare const Spinner: React.FC<SpinnerProps>;
+declare const Dialog: React.FC<DialogProps>;
 
-type StackProps = {
-    alignX?: keyof AlignItemsMap;
-    tag?: 'div' | 'section' | 'ul' | 'ol';
+type HeadingProps = {
     children: React.ReactNode;
     className?: string;
-    display?: ResponsiveDisplayFlex;
-    gap: Atoms['gap'];
-    style?: React.CSSProperties;
-    role?: React.AriaRole;
-    /**
-     * Start prop is only valid when tag="ol"
-     */
-    start?: number;
-} & MarginAtoms & PaddingAtoms;
-declare const Stack: React.FC<StackProps>;
-
-type SwitchProps = {
-    onChange?: (value: boolean) => void;
-} & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
-declare const Switch: react.ForwardRefExoticComponent<{
-    onChange?: ((value: boolean) => void) | undefined;
-} & Omit<HTMLElementProps<HTMLInputElement>, "onChange"> & react.RefAttributes<HTMLInputElement>>;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
+declare const Heading: React.FC<HeadingProps>;
 
 type TextProps = {
     children: React.ReactNode;
@@ -1050,7 +1063,7 @@ type UseKeyboardOptions = {
     enabled?: boolean;
     type?: 'keydown' | 'keyup';
 };
-declare const useKeyboard: (key: string, callback: () => void, { enabled, type }?: UseKeyboardOptions) => void;
+declare const useKeyboard: (key: KeyboardEvent['key'], callback: () => void, { enabled, type }?: UseKeyboardOptions) => void;
 
 declare const usePreventBodyScroll: (enabled?: boolean) => void;
 
@@ -1059,4 +1072,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };
+export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };

package/dist/reset.css.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/reset.css.d.ts

@@ -1,2 +1,2 @@
 
-export { }
+export {  }

package/dist/styles/components/display/Divider/Divider.cjs

@@ -0,0 +1,226 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles_components_display_Divider_divider_css_cjs = require("./divider.css.cjs");
+const react = require("react");
+const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const BlocksProviderContext = react.createContext(null);
+const useTheme = () => {
+  const theme = react.useContext(BlocksProviderContext);
+  if (!theme) {
+    throw new Error("useTheme must be used within a BlocksProvider");
+  }
+  return theme;
+};
+function useComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(component[key]);
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
+        variantsWithDefaults[key] = defaultVariants[key];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
+      const keys2 = Object.keys(compoundVariant.variants);
+      const matches = keys2.every((key) => {
+        const value = variantsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+const useComponentStyleDefaultProps = (name) => {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+};
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = {};
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (childPropValue === void 0) {
+      continue;
+    }
+    if (slotPropValue === void 0) {
+      overrideProps[propName] = childPropValue;
+      continue;
+    }
+    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+      overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    } else {
+      overrideProps[propName] = childPropValue;
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function createSlottable(defaultElement) {
+  function Slottable2(props, ref) {
+    const { asChild, children, ...slotProps } = props;
+    const Component = defaultElement;
+    if (!asChild) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...slotProps, children });
+    }
+    const childrenArray = react.Children.toArray(children);
+    const slot = childrenArray.find((child) => {
+      if (!react.isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    if (!slot) {
+      const Slot2 = childrenArray[0];
+      if (!react.isValidElement(childrenArray[0])) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn("Slottable: First child is not a valid React element");
+        }
+        return null;
+      }
+      if (!react.isValidElement(Slot2)) {
+        return null;
+      }
+      return react.cloneElement(
+        Slot2,
+        {
+          ...mergeProps(slotProps, Slot2.props),
+          ref: composeRefs(ref, Slot2.ref)
+        },
+        Slot2.props.children
+      );
+    }
+    if (!react.isValidElement(slot) || !react.isValidElement(slot.props.children)) {
+      return null;
+    }
+    const newChildren = childrenArray.map((child) => {
+      if (!react.isValidElement(child)) {
+        return child;
+      }
+      if (child.type === Slot) {
+        return slot.props.children.props.children;
+      }
+      return child;
+    });
+    return react.cloneElement(
+      slot.props.children,
+      {
+        ...mergeProps(slotProps, slot.props),
+        ref: composeRefs(ref, slot.props.children.ref)
+      },
+      newChildren
+    );
+  }
+  return react.forwardRef(Slottable2);
+}
+const Slot = ({ children }) => children;
+const Slottable = createSlottable("div");
+const Box = react.forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
+  const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Slottable,
+    {
+      ref,
+      asChild,
+      className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
+      ...otherProps,
+      children
+    }
+  );
+});
+const Divider = ({ className, color, ...restProps }) => {
+  const dividerClass = useComponentStyles("divider", { base: true });
+  const dividerDefaults = useComponentStyleDefaultProps("divider");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      role: "separator",
+      width: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: classnames(className, dividerClass, styles_components_display_Divider_divider_css_cjs.divider),
+      ...restProps
+    }
+  );
+};
+exports.BlocksProviderContext = BlocksProviderContext;
+exports.Box = Box;
+exports.Divider = Divider;
+exports.Slot = Slot;
+exports.classnames = classnames;
+exports.createSlottable = createSlottable;
+exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
+exports.useComponentStyles = useComponentStyles;
+exports.useTheme = useTheme;