@traefik-labs/faency 12.0.7 → 12.0.9

package/dist/components/Card/Card.vanilla.cjs

@@ -6,36 +6,38 @@ const React = require("react");
 const cssProps = require("../../styles/cssProps.cjs");
 const themeContext = require("../../styles/themeContext.cjs");
 const Card_vanilla_css = require("./Card.vanilla.css.cjs");
-const CardVanilla = React.forwardRef(
-  ({ className, css, style, elevation, variant, active, interactive, ...props }, ref) => {
+const CardVanillaComponentImpl = React.forwardRef(
+  ({
+    as,
+    className,
+    css,
+    style,
+    elevation,
+    variant,
+    active,
+    interactive,
+    ...props
+  }, ref) => {
+    const Component = as || (interactive ? "button" : "div");
     const { colors } = themeContext.useVanillaExtractTheme();
     const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
     const mergedStyles = { ...cssStyles, ...style, ...dynamic.assignInlineVars(vars) };
-    if (interactive) {
-      const recipeClass2 = Card_vanilla_css.interactiveCardRecipe({ elevation, variant, active });
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          ref,
-          className: `${recipeClass2} ${className || ""}`.trim(),
-          style: mergedStyles,
-          tabIndex: 0,
-          ...props
-        }
-      );
-    }
-    const recipeClass = Card_vanilla_css.cardRecipe({ elevation, variant, active });
+    const recipe = interactive ? Card_vanilla_css.interactiveCardRecipe : Card_vanilla_css.cardRecipe;
+    const recipeClass = recipe({ elevation, variant, active });
+    const additionalProps = interactive && !as ? { tabIndex: 0 } : {};
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Component,
       {
         ref,
         className: `${recipeClass} ${className || ""}`.trim(),
         style: mergedStyles,
+        ...additionalProps,
         ...props
       }
     );
   }
 );
-CardVanilla.displayName = "CardVanilla";
+CardVanillaComponentImpl.displayName = "CardVanilla";
+const CardVanilla = CardVanillaComponentImpl;
 exports.CardVanilla = CardVanilla;
 //# sourceMappingURL=Card.vanilla.cjs.map

package/dist/components/Card/Card.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.vanilla.cjs","sources":["../../../components/Card/Card.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface BaseCardProps extends CSSProps {\n  elevation?: CardRecipeVariants['elevation'];\n  variant?: CardRecipeVariants['variant'];\n  active?: CardRecipeVariants['active'];\n}\n\ninterface CardOwnProps extends BaseCardProps, React.ComponentProps<'div'> {\n  interactive?: false;\n}\n\nexport type CardVanillaProps = CardOwnProps;\n\ninterface InteractiveCardProps\n  extends BaseCardProps,\n    Omit<React.ComponentProps<'button'>, 'color'> {\n  interactive: true;\n}\n\nexport type CardVanillaAllProps = CardVanillaProps | InteractiveCardProps;\n\nexport const CardVanilla = forwardRef<HTMLDivElement | HTMLButtonElement, CardVanillaAllProps>(\n  ({ className, css, style, elevation, variant, active, interactive, ...props }, ref) => {\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    if (interactive) {\n      const recipeClass = interactiveCardRecipe({ elevation, variant, active });\n      return (\n        <button\n          ref={ref as React.RefObject<HTMLButtonElement>}\n          className={`${recipeClass} ${className || ''}`.trim()}\n          style={mergedStyles}\n          tabIndex={0}\n          {...(props as React.ComponentProps<'button'>)}\n        />\n      );\n    }\n\n    const recipeClass = cardRecipe({ elevation, variant, active });\n    return (\n      <div\n        ref={ref as React.RefObject<HTMLDivElement>}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...(props as React.ComponentProps<'div'>)}\n      />\n    );\n  },\n);\n\nCardVanilla.displayName = 'CardVanilla';\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","recipeClass","interactiveCardRecipe","jsx","cardRecipe"],"mappings":";;;;;;;;AA8BO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CAAC,EAAE,WAAW,KAAK,OAAO,WAAW,SAAS,QAAQ,aAAa,GAAG,MAAA,GAAS,QAAQ;AACrF,UAAM,EAAE,OAAA,IAAWC,oCAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAGC,QAAAA,iBAAiB,IAAI,EAAA;AAEvE,QAAI,aAAa;AACf,YAAMC,eAAcC,iBAAAA,sBAAsB,EAAE,WAAW,SAAS,QAAQ;AACxE,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAGF,YAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,UAC/C,OAAO;AAAA,UACP,UAAU;AAAA,UACT,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGX;AAEA,UAAM,cAAcG,iBAAAA,WAAW,EAAE,WAAW,SAAS,QAAQ;AAC7D,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"Card.vanilla.cjs","sources":["../../../components/Card/Card.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n  elevation?: CardRecipeVariants['elevation'];\n  variant?: CardRecipeVariants['variant'];\n  active?: CardRecipeVariants['active'];\n  interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    {\n      as,\n      className,\n      css,\n      style,\n      elevation,\n      variant,\n      active,\n      interactive,\n      ...props\n    }: CardVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || (interactive ? 'button' : 'div');\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n    const recipeClass = recipe({ elevation, variant, active });\n\n    const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...additionalProps}\n        {...props}\n      />\n    );\n  },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","interactiveCardRecipe","cardRecipe","jsx"],"mappings":";;;;;;;;AA6BA,MAAM,2BAA2BA,MAAAA;AAAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,OAAO,cAAc,WAAW;AAClD,UAAM,EAAE,OAAA,IAAWC,oCAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAGC,QAAAA,iBAAiB,IAAI,EAAA;AAEvE,UAAM,SAAS,cAAcC,iBAAAA,wBAAwBC,iBAAAA;AACrD,UAAM,cAAc,OAAO,EAAE,WAAW,SAAS,QAAQ;AAEzD,UAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAA,IAAM,CAAA;AAE/D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,yBAAyB,cAAc;AAEhC,MAAM,cAAc;;"}

package/dist/components/Card/Card.vanilla.css.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                            */
 ;/* empty css                                  */
 const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
 var cardRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });

package/dist/components/Card/Card.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"Card.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Card/Card.vanilla.css.js

@@ -1,4 +1,3 @@
-/* empty css                                          */
 /* empty css                                */
 import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
 var cardRecipe = createRuntimeFn({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });

package/dist/components/Card/Card.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"Card.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Card/Card.vanilla.js

@@ -4,37 +4,39 @@ import { forwardRef } from "react";
 import { processCSSProp } from "../../styles/cssProps.js";
 import { useVanillaExtractTheme } from "../../styles/themeContext.js";
 import { interactiveCardRecipe, cardRecipe } from "./Card.vanilla.css.js";
-const CardVanilla = forwardRef(
-  ({ className, css, style, elevation, variant, active, interactive, ...props }, ref) => {
+const CardVanillaComponentImpl = forwardRef(
+  ({
+    as,
+    className,
+    css,
+    style,
+    elevation,
+    variant,
+    active,
+    interactive,
+    ...props
+  }, ref) => {
+    const Component = as || (interactive ? "button" : "div");
     const { colors } = useVanillaExtractTheme();
     const { style: cssStyles, vars } = processCSSProp(css, colors);
     const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };
-    if (interactive) {
-      const recipeClass2 = interactiveCardRecipe({ elevation, variant, active });
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          ref,
-          className: `${recipeClass2} ${className || ""}`.trim(),
-          style: mergedStyles,
-          tabIndex: 0,
-          ...props
-        }
-      );
-    }
-    const recipeClass = cardRecipe({ elevation, variant, active });
+    const recipe = interactive ? interactiveCardRecipe : cardRecipe;
+    const recipeClass = recipe({ elevation, variant, active });
+    const additionalProps = interactive && !as ? { tabIndex: 0 } : {};
     return /* @__PURE__ */ jsx(
-      "div",
+      Component,
       {
         ref,
         className: `${recipeClass} ${className || ""}`.trim(),
         style: mergedStyles,
+        ...additionalProps,
         ...props
       }
     );
   }
 );
-CardVanilla.displayName = "CardVanilla";
+CardVanillaComponentImpl.displayName = "CardVanilla";
+const CardVanilla = CardVanillaComponentImpl;
 export {
   CardVanilla
 };

package/dist/components/Card/Card.vanilla.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.vanilla.js","sources":["../../../components/Card/Card.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface BaseCardProps extends CSSProps {\n  elevation?: CardRecipeVariants['elevation'];\n  variant?: CardRecipeVariants['variant'];\n  active?: CardRecipeVariants['active'];\n}\n\ninterface CardOwnProps extends BaseCardProps, React.ComponentProps<'div'> {\n  interactive?: false;\n}\n\nexport type CardVanillaProps = CardOwnProps;\n\ninterface InteractiveCardProps\n  extends BaseCardProps,\n    Omit<React.ComponentProps<'button'>, 'color'> {\n  interactive: true;\n}\n\nexport type CardVanillaAllProps = CardVanillaProps | InteractiveCardProps;\n\nexport const CardVanilla = forwardRef<HTMLDivElement | HTMLButtonElement, CardVanillaAllProps>(\n  ({ className, css, style, elevation, variant, active, interactive, ...props }, ref) => {\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    if (interactive) {\n      const recipeClass = interactiveCardRecipe({ elevation, variant, active });\n      return (\n        <button\n          ref={ref as React.RefObject<HTMLButtonElement>}\n          className={`${recipeClass} ${className || ''}`.trim()}\n          style={mergedStyles}\n          tabIndex={0}\n          {...(props as React.ComponentProps<'button'>)}\n        />\n      );\n    }\n\n    const recipeClass = cardRecipe({ elevation, variant, active });\n    return (\n      <div\n        ref={ref as React.RefObject<HTMLDivElement>}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...(props as React.ComponentProps<'div'>)}\n      />\n    );\n  },\n);\n\nCardVanilla.displayName = 'CardVanilla';\n"],"names":["recipeClass"],"mappings":";;;;;;AA8BO,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,KAAK,OAAO,WAAW,SAAS,QAAQ,aAAa,GAAG,MAAA,GAAS,QAAQ;AACrF,UAAM,EAAE,OAAA,IAAW,uBAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,IAAI,EAAA;AAEvE,QAAI,aAAa;AACf,YAAMA,eAAc,sBAAsB,EAAE,WAAW,SAAS,QAAQ;AACxE,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAGA,YAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,UAC/C,OAAO;AAAA,UACP,UAAU;AAAA,UACT,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGX;AAEA,UAAM,cAAc,WAAW,EAAE,WAAW,SAAS,QAAQ;AAC7D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"Card.vanilla.js","sources":["../../../components/Card/Card.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n  elevation?: CardRecipeVariants['elevation'];\n  variant?: CardRecipeVariants['variant'];\n  active?: CardRecipeVariants['active'];\n  interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    {\n      as,\n      className,\n      css,\n      style,\n      elevation,\n      variant,\n      active,\n      interactive,\n      ...props\n    }: CardVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || (interactive ? 'button' : 'div');\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n    const recipeClass = recipe({ elevation, variant, active });\n\n    const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...additionalProps}\n        {...props}\n      />\n    );\n  },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"names":[],"mappings":";;;;;;AA6BA,MAAM,2BAA2B;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,OAAO,cAAc,WAAW;AAClD,UAAM,EAAE,OAAA,IAAW,uBAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,IAAI,EAAA;AAEvE,UAAM,SAAS,cAAc,wBAAwB;AACrD,UAAM,cAAc,OAAO,EAAE,WAAW,SAAS,QAAQ;AAEzD,UAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAA,IAAM,CAAA;AAE/D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,yBAAyB,cAAc;AAEhC,MAAM,cAAc;"}

package/dist/components/Elevation/Elevation.vanilla.cjs

@@ -6,14 +6,15 @@ const React = require("react");
 const cssProps = require("../../styles/cssProps.cjs");
 const themeContext = require("../../styles/themeContext.cjs");
 const Elevation_vanilla_css = require("./Elevation.vanilla.css.cjs");
-const ElevationVanilla = React.forwardRef(
-  ({ className, css, style, variant, ...props }, ref) => {
+const ElevationVanillaComponentImpl = React.forwardRef(
+  ({ as, className, css, style, variant, ...props }, ref) => {
+    const Component = as || "div";
     const { colors } = themeContext.useVanillaExtractTheme();
     const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
     const mergedStyles = { ...cssStyles, ...style, ...dynamic.assignInlineVars(vars) };
     const recipeClass = Elevation_vanilla_css.elevationRecipe({ variant });
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Component,
       {
         ref,
         className: `${recipeClass} ${className || ""}`.trim(),
@@ -23,6 +24,7 @@ const ElevationVanilla = React.forwardRef(
     );
   }
 );
-ElevationVanilla.displayName = "ElevationVanilla";
+ElevationVanillaComponentImpl.displayName = "ElevationVanilla";
+const ElevationVanilla = ElevationVanillaComponentImpl;
 exports.ElevationVanilla = ElevationVanilla;
 //# sourceMappingURL=Elevation.vanilla.cjs.map

package/dist/components/Elevation/Elevation.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Elevation.vanilla.cjs","sources":["../../../components/Elevation/Elevation.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { elevationRecipe } from './Elevation.vanilla.css';\n\ntype ElevationRecipeVariants = NonNullable<RecipeVariants<typeof elevationRecipe>>;\n\ninterface ElevationOwnProps extends CSSProps {\n  variant?: ElevationRecipeVariants['variant'];\n}\n\nexport type ElevationVanillaProps = React.ComponentProps<'div'> & ElevationOwnProps;\n\nexport const ElevationVanilla = forwardRef<HTMLDivElement, ElevationVanillaProps>(\n  ({ className, css, style, variant, ...props }, ref) => {\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n    const recipeClass = elevationRecipe({ variant });\n\n    return (\n      <div\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nElevationVanilla.displayName = 'ElevationVanilla';\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","elevationRecipe","jsx"],"mappings":";;;;;;;;AAgBO,MAAM,mBAAmBA,MAAAA;AAAAA,EAC9B,CAAC,EAAE,WAAW,KAAK,OAAO,SAAS,GAAG,MAAA,GAAS,QAAQ;AACrD,UAAM,EAAE,OAAA,IAAWC,oCAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAGC,QAAAA,iBAAiB,IAAI,EAAA;AACvE,UAAM,cAAcC,sBAAAA,gBAAgB,EAAE,SAAS;AAE/C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,iBAAiB,cAAc;;"}
+{"version":3,"file":"Elevation.vanilla.cjs","sources":["../../../components/Elevation/Elevation.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { elevationRecipe } from './Elevation.vanilla.css';\n\ntype ElevationRecipeVariants = NonNullable<RecipeVariants<typeof elevationRecipe>>;\n\ninterface ElevationOwnProps extends CSSProps {\n  variant?: ElevationRecipeVariants['variant'];\n}\n\nexport type ElevationVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ElevationOwnProps\n>;\n\ntype ElevationVanillaComponent = PolymorphicComponent<'div', ElevationVanillaProps<ElementType>>;\n\nconst ElevationVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, variant, ...props }: ElevationVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n    const recipeClass = elevationRecipe({ variant });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nElevationVanillaComponentImpl.displayName = 'ElevationVanilla';\n\nexport const ElevationVanilla = ElevationVanillaComponentImpl as ElevationVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","elevationRecipe","jsx"],"mappings":";;;;;;;;AA0BA,MAAM,gCAAgCA,MAAAA;AAAAA,EACpC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,MAAA,GACzC,QACG;AACH,UAAM,YAAY,MAAM;AACxB,UAAM,EAAE,OAAA,IAAWC,oCAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAGC,QAAAA,iBAAiB,IAAI,EAAA;AACvE,UAAM,cAAcC,sBAAAA,gBAAgB,EAAE,SAAS;AAE/C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,8BAA8B,cAAc;AAErC,MAAM,mBAAmB;;"}

package/dist/components/Elevation/Elevation.vanilla.js

@@ -4,14 +4,15 @@ import { forwardRef } from "react";
 import { processCSSProp } from "../../styles/cssProps.js";
 import { useVanillaExtractTheme } from "../../styles/themeContext.js";
 import { elevationRecipe } from "./Elevation.vanilla.css.js";
-const ElevationVanilla = forwardRef(
-  ({ className, css, style, variant, ...props }, ref) => {
+const ElevationVanillaComponentImpl = forwardRef(
+  ({ as, className, css, style, variant, ...props }, ref) => {
+    const Component = as || "div";
     const { colors } = useVanillaExtractTheme();
     const { style: cssStyles, vars } = processCSSProp(css, colors);
     const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };
     const recipeClass = elevationRecipe({ variant });
     return /* @__PURE__ */ jsx(
-      "div",
+      Component,
       {
         ref,
         className: `${recipeClass} ${className || ""}`.trim(),
@@ -21,7 +22,8 @@ const ElevationVanilla = forwardRef(
     );
   }
 );
-ElevationVanilla.displayName = "ElevationVanilla";
+ElevationVanillaComponentImpl.displayName = "ElevationVanilla";
+const ElevationVanilla = ElevationVanillaComponentImpl;
 export {
   ElevationVanilla
 };

package/dist/components/Elevation/Elevation.vanilla.js.map

@@ -1 +1 @@
-{"version":3,"file":"Elevation.vanilla.js","sources":["../../../components/Elevation/Elevation.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { elevationRecipe } from './Elevation.vanilla.css';\n\ntype ElevationRecipeVariants = NonNullable<RecipeVariants<typeof elevationRecipe>>;\n\ninterface ElevationOwnProps extends CSSProps {\n  variant?: ElevationRecipeVariants['variant'];\n}\n\nexport type ElevationVanillaProps = React.ComponentProps<'div'> & ElevationOwnProps;\n\nexport const ElevationVanilla = forwardRef<HTMLDivElement, ElevationVanillaProps>(\n  ({ className, css, style, variant, ...props }, ref) => {\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n    const recipeClass = elevationRecipe({ variant });\n\n    return (\n      <div\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nElevationVanilla.displayName = 'ElevationVanilla';\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,mBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,KAAK,OAAO,SAAS,GAAG,MAAA,GAAS,QAAQ;AACrD,UAAM,EAAE,OAAA,IAAW,uBAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,IAAI,EAAA;AACvE,UAAM,cAAc,gBAAgB,EAAE,SAAS;AAE/C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,iBAAiB,cAAc;"}
+{"version":3,"file":"Elevation.vanilla.js","sources":["../../../components/Elevation/Elevation.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { elevationRecipe } from './Elevation.vanilla.css';\n\ntype ElevationRecipeVariants = NonNullable<RecipeVariants<typeof elevationRecipe>>;\n\ninterface ElevationOwnProps extends CSSProps {\n  variant?: ElevationRecipeVariants['variant'];\n}\n\nexport type ElevationVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ElevationOwnProps\n>;\n\ntype ElevationVanillaComponent = PolymorphicComponent<'div', ElevationVanillaProps<ElementType>>;\n\nconst ElevationVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, variant, ...props }: ElevationVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n    const recipeClass = elevationRecipe({ variant });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nElevationVanillaComponentImpl.displayName = 'ElevationVanilla';\n\nexport const ElevationVanilla = ElevationVanillaComponentImpl as ElevationVanillaComponent;\n"],"names":[],"mappings":";;;;;;AA0BA,MAAM,gCAAgC;AAAA,EACpC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,MAAA,GACzC,QACG;AACH,UAAM,YAAY,MAAM;AACxB,UAAM,EAAE,OAAA,IAAW,uBAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,IAAI,EAAA;AACvE,UAAM,cAAc,gBAAgB,EAAE,SAAS;AAE/C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,8BAA8B,cAAc;AAErC,MAAM,mBAAmB;"}

package/dist/components/Image/Image.vanilla.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const dynamic = require("@vanilla-extract/dynamic");
+const React = require("react");
+const cssProps = require("../../styles/cssProps.cjs");
+const themeContext = require("../../styles/themeContext.cjs");
+const Image_vanilla_css = require("./Image.vanilla.css.cjs");
+const ImageVanillaImpl = React.forwardRef(
+  ({ as, className, css, style, ...props }, ref) => {
+    const Component = as || "img";
+    const { colors } = themeContext.useVanillaExtractTheme();
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...dynamic.assignInlineVars(vars)
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: `${Image_vanilla_css.image} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+ImageVanillaImpl.displayName = "ImageVanilla";
+const ImageVanilla = ImageVanillaImpl;
+exports.ImageVanilla = ImageVanilla;
+//# sourceMappingURL=Image.vanilla.cjs.map

package/dist/components/Image/Image.vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.vanilla.cjs","sources":["../../../components/Image/Image.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { image } from './Image.vanilla.css';\n\nexport type ImageVanillaProps<C extends ElementType = 'img'> = PolymorphicComponentProps<\n  C,\n  CSSProps\n>;\n\ntype ImageVanillaComponent = PolymorphicComponent<'img', ImageVanillaProps<ElementType>>;\n\nconst ImageVanillaImpl = forwardRef(\n  <C extends ElementType = 'img'>(\n    { as, className, css, style, ...props }: ImageVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'img';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    return (\n      <Component\n        ref={ref}\n        className={`${image} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nImageVanillaImpl.displayName = 'ImageVanilla';\n\nexport const ImageVanilla = ImageVanillaImpl as ImageVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","jsx","image"],"mappings":";;;;;;;;AAmBA,MAAM,mBAAmBA,MAAAA;AAAAA,EACvB,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,MAAA,GAChC,QACG;AACH,UAAM,YAAY,MAAM;AACxB,UAAM,EAAE,OAAA,IAAWC,oCAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAGC,uBAAK,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QACzC,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,iBAAiB,cAAc;AAExB,MAAM,eAAe;;"}

package/dist/components/Image/Image.vanilla.css.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                   */
+var image = "_18cm5pz0";
+exports.image = image;
+//# sourceMappingURL=Image.vanilla.css.cjs.map

package/dist/components/Image/Image.vanilla.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/Image/Image.vanilla.css.js

@@ -0,0 +1,6 @@
+/* empty css                                 */
+var image = "_18cm5pz0";
+export {
+  image
+};
+//# sourceMappingURL=Image.vanilla.css.js.map

package/dist/components/Image/Image.vanilla.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/Image/Image.vanilla.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { forwardRef } from "react";
+import { processCSSProp } from "../../styles/cssProps.js";
+import { useVanillaExtractTheme } from "../../styles/themeContext.js";
+import { image } from "./Image.vanilla.css.js";
+const ImageVanillaImpl = forwardRef(
+  ({ as, className, css, style, ...props }, ref) => {
+    const Component = as || "img";
+    const { colors } = useVanillaExtractTheme();
+    const { style: cssStyles, vars } = processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...assignInlineVars(vars)
+    };
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: `${image} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+ImageVanillaImpl.displayName = "ImageVanilla";
+const ImageVanilla = ImageVanillaImpl;
+export {
+  ImageVanilla
+};
+//# sourceMappingURL=Image.vanilla.js.map

package/dist/components/Image/Image.vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.vanilla.js","sources":["../../../components/Image/Image.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { image } from './Image.vanilla.css';\n\nexport type ImageVanillaProps<C extends ElementType = 'img'> = PolymorphicComponentProps<\n  C,\n  CSSProps\n>;\n\ntype ImageVanillaComponent = PolymorphicComponent<'img', ImageVanillaProps<ElementType>>;\n\nconst ImageVanillaImpl = forwardRef(\n  <C extends ElementType = 'img'>(\n    { as, className, css, style, ...props }: ImageVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'img';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    return (\n      <Component\n        ref={ref}\n        className={`${image} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nImageVanillaImpl.displayName = 'ImageVanilla';\n\nexport const ImageVanilla = ImageVanillaImpl as ImageVanillaComponent;\n"],"names":[],"mappings":";;;;;;AAmBA,MAAM,mBAAmB;AAAA,EACvB,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,MAAA,GAChC,QACG;AACH,UAAM,YAAY,MAAM;AACxB,UAAM,EAAE,OAAA,IAAW,uBAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,iBAAiB,IAAI;AAAA,IAAA;AAG1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,KAAK,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QACzC,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,iBAAiB,cAAc;AAExB,MAAM,eAAe;"}

package/dist/components/Input/Input.vanilla.css.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                            */
 ;/* empty css                                   */
 const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
 var styledInputRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_1st6suv1 _1st6suv0", variantClassNames: { size: { small: "_1st6suv2", medium: "_1st6suv3", large: "_1st6suv4" }, variant: { ghost: "_1st6suv5" }, state: { invalid: "_1st6suv6" }, cursor: { "default": "_1st6suv7", text: "_1st6suv8" }, startAdornment: { true: "_1st6suv9" }, endAdornment: { true: "_1st6suva" } }, defaultVariants: { size: "medium", cursor: "default" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "_1st6suvb"], [{ startAdornment: true, size: "small" }, "_1st6suvc"], [{ startAdornment: true, size: "medium" }, "_1st6suvd"], [{ startAdornment: true, size: "large" }, "_1st6suve"], [{ endAdornment: true, size: "small" }, "_1st6suvf"], [{ endAdornment: true, size: "medium" }, "_1st6suvg"], [{ endAdornment: true, size: "large" }, "_1st6suvh"], [{ endAdornment: true, size: "small", state: "invalid" }, "_1st6suvi"], [{ endAdornment: true, size: "medium", state: "invalid" }, "_1st6suvj"], [{ endAdornment: true, size: "large", state: "invalid" }, "_1st6suvk"]] });

package/dist/components/Input/Input.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"Input.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/components/Input/Input.vanilla.css.js

@@ -1,3 +1,4 @@
+/* empty css                                          */
 /* empty css                                 */
 import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
 var styledInputRecipe = createRuntimeFn({ defaultClassName: "_1st6suv1 _1st6suv0", variantClassNames: { size: { small: "_1st6suv2", medium: "_1st6suv3", large: "_1st6suv4" }, variant: { ghost: "_1st6suv5" }, state: { invalid: "_1st6suv6" }, cursor: { "default": "_1st6suv7", text: "_1st6suv8" }, startAdornment: { true: "_1st6suv9" }, endAdornment: { true: "_1st6suva" } }, defaultVariants: { size: "medium", cursor: "default" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "_1st6suvb"], [{ startAdornment: true, size: "small" }, "_1st6suvc"], [{ startAdornment: true, size: "medium" }, "_1st6suvd"], [{ startAdornment: true, size: "large" }, "_1st6suve"], [{ endAdornment: true, size: "small" }, "_1st6suvf"], [{ endAdornment: true, size: "medium" }, "_1st6suvg"], [{ endAdornment: true, size: "large" }, "_1st6suvh"], [{ endAdornment: true, size: "small", state: "invalid" }, "_1st6suvi"], [{ endAdornment: true, size: "medium", state: "invalid" }, "_1st6suvj"], [{ endAdornment: true, size: "large", state: "invalid" }, "_1st6suvk"]] });

package/dist/components/Input/Input.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"Input.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/Label/Label.vanilla.cjs

@@ -1,31 +1,26 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const LabelPrimitive = require("@radix-ui/react-label");
 const dynamic = require("@vanilla-extract/dynamic");
 const React = require("react");
 const cssProps = require("../../styles/cssProps.cjs");
 const themeContext = require("../../styles/themeContext.cjs");
 const Label_vanilla_css = require("./Label.vanilla.css.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const LabelPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(LabelPrimitive);
-const LabelVanilla = React.forwardRef(
-  ({ className, css, style, size, weight, variant, gradient, transform, noWrap, ...props }, ref) => {
+const LabelVanillaComponentImpl = React.forwardRef(
+  ({
+    as,
+    className,
+    css,
+    style,
+    size,
+    weight,
+    variant,
+    gradient,
+    transform,
+    noWrap,
+    ...props
+  }, ref) => {
+    const Component = as || "label";
     const { colors } = themeContext.useVanillaExtractTheme();
     const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
     const mergedStyles = {
@@ -35,7 +30,7 @@ const LabelVanilla = React.forwardRef(
     };
     const recipeClass = Label_vanilla_css.labelRecipe({ size, weight, variant, gradient, transform, noWrap });
     return /* @__PURE__ */ jsxRuntime.jsx(
-      LabelPrimitive__namespace.Root,
+      Component,
       {
         ref,
         className: `${recipeClass} ${className || ""}`.trim(),
@@ -45,6 +40,7 @@ const LabelVanilla = React.forwardRef(
     );
   }
 );
-LabelVanilla.displayName = "LabelVanilla";
+LabelVanillaComponentImpl.displayName = "LabelVanilla";
+const LabelVanilla = LabelVanillaComponentImpl;
 exports.LabelVanilla = LabelVanilla;
 //# sourceMappingURL=Label.vanilla.cjs.map

package/dist/components/Label/Label.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.vanilla.cjs","sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import * as LabelPrimitive from '@radix-ui/react-label';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps = LabelPrimitive.LabelProps & LabelOwnProps;\n\nexport const LabelVanilla = forwardRef<HTMLLabelElement, LabelVanillaProps>(\n  (\n    { className, css, style, size, weight, variant, gradient, transform, noWrap, ...props },\n    ref,\n  ) => {\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n    return (\n      <LabelPrimitive.Root\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nLabelVanilla.displayName = 'LabelVanilla';\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","labelRecipe","jsx","LabelPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE,EAAE,WAAW,KAAK,OAAO,MAAM,QAAQ,SAAS,UAAU,WAAW,QAAQ,GAAG,MAAA,GAChF,QACG;AACH,UAAM,EAAE,OAAA,IAAWC,oCAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAcC,8BAAY,EAAE,MAAM,QAAQ,SAAS,UAAU,WAAW,QAAQ;AAEtF,WACEC,2BAAAA;AAAAA,MAACC,0BAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"Label.vanilla.cjs","sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n  C,\n  LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'label'>(\n    {\n      as,\n      className,\n      css,\n      style,\n      size,\n      weight,\n      variant,\n      gradient,\n      transform,\n      noWrap,\n      ...props\n    }: LabelVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'label';\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","labelRecipe","jsx"],"mappings":";;;;;;;;AAwBA,MAAM,4BAA4BA,MAAAA;AAAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,MAAM;AACxB,UAAM,EAAE,OAAA,IAAWC,oCAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAcC,8BAAY,EAAE,MAAM,QAAQ,SAAS,UAAU,WAAW,QAAQ;AAEtF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,0BAA0B,cAAc;AAEjC,MAAM,eAAe;;"}

package/dist/components/Label/Label.vanilla.css.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                             */
 ;/* empty css                                   */
 const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
 var labelRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });

package/dist/components/Label/Label.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"Label.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/Label/Label.vanilla.css.js

@@ -1,3 +1,4 @@
+/* empty css                                           */
 /* empty css                                 */
 import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
 var labelRecipe = createRuntimeFn({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });

package/dist/components/Label/Label.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"Label.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Label/Label.vanilla.js

@@ -1,12 +1,24 @@
 import { jsx } from "react/jsx-runtime";
-import * as LabelPrimitive from "@radix-ui/react-label";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { forwardRef } from "react";
 import { processCSSProp } from "../../styles/cssProps.js";
 import { useVanillaExtractTheme } from "../../styles/themeContext.js";
 import { labelRecipe } from "./Label.vanilla.css.js";
-const LabelVanilla = forwardRef(
-  ({ className, css, style, size, weight, variant, gradient, transform, noWrap, ...props }, ref) => {
+const LabelVanillaComponentImpl = forwardRef(
+  ({
+    as,
+    className,
+    css,
+    style,
+    size,
+    weight,
+    variant,
+    gradient,
+    transform,
+    noWrap,
+    ...props
+  }, ref) => {
+    const Component = as || "label";
     const { colors } = useVanillaExtractTheme();
     const { style: cssStyles, vars } = processCSSProp(css, colors);
     const mergedStyles = {
@@ -16,7 +28,7 @@ const LabelVanilla = forwardRef(
     };
     const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });
     return /* @__PURE__ */ jsx(
-      LabelPrimitive.Root,
+      Component,
       {
         ref,
         className: `${recipeClass} ${className || ""}`.trim(),
@@ -26,7 +38,8 @@ const LabelVanilla = forwardRef(
     );
   }
 );
-LabelVanilla.displayName = "LabelVanilla";
+LabelVanillaComponentImpl.displayName = "LabelVanilla";
+const LabelVanilla = LabelVanillaComponentImpl;
 export {
   LabelVanilla
 };

package/dist/components/Label/Label.vanilla.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.vanilla.js","sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import * as LabelPrimitive from '@radix-ui/react-label';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps = LabelPrimitive.LabelProps & LabelOwnProps;\n\nexport const LabelVanilla = forwardRef<HTMLLabelElement, LabelVanillaProps>(\n  (\n    { className, css, style, size, weight, variant, gradient, transform, noWrap, ...props },\n    ref,\n  ) => {\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n    return (\n      <LabelPrimitive.Root\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nLabelVanilla.displayName = 'LabelVanilla';\n"],"names":[],"mappings":";;;;;;;AAeO,MAAM,eAAe;AAAA,EAC1B,CACE,EAAE,WAAW,KAAK,OAAO,MAAM,QAAQ,SAAS,UAAU,WAAW,QAAQ,GAAG,MAAA,GAChF,QACG;AACH,UAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAc,YAAY,EAAE,MAAM,QAAQ,SAAS,UAAU,WAAW,QAAQ;AAEtF,WACE;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"Label.vanilla.js","sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n  C,\n  LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'label'>(\n    {\n      as,\n      className,\n      css,\n      style,\n      size,\n      weight,\n      variant,\n      gradient,\n      transform,\n      noWrap,\n      ...props\n    }: LabelVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'label';\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"names":[],"mappings":";;;;;;AAwBA,MAAM,4BAA4B;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,MAAM;AACxB,UAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAc,YAAY,EAAE,MAAM,QAAQ,SAAS,UAAU,WAAW,QAAQ;AAEtF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,0BAA0B,cAAc;AAEjC,MAAM,eAAe;"}

package/dist/components/Panel/Panel.vanilla.cjs

@@ -6,13 +6,14 @@ const React = require("react");
 const cssProps = require("../../styles/cssProps.cjs");
 const themeContext = require("../../styles/themeContext.cjs");
 const Panel_vanilla_css = require("./Panel.vanilla.css.cjs");
-const PanelVanilla = React.forwardRef(
-  ({ className, css, style, ...props }, ref) => {
+const PanelVanillaComponentImpl = React.forwardRef(
+  ({ as, className, css, style, ...props }, ref) => {
+    const Component = as || "div";
     const { colors } = themeContext.useVanillaExtractTheme();
     const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
     const mergedStyles = { ...cssStyles, ...style, ...dynamic.assignInlineVars(vars) };
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Component,
       {
         ref,
         className: `${Panel_vanilla_css.panelStyle} ${className || ""}`.trim(),
@@ -22,6 +23,7 @@ const PanelVanilla = React.forwardRef(
     );
   }
 );
-PanelVanilla.displayName = "PanelVanilla";
+PanelVanillaComponentImpl.displayName = "PanelVanilla";
+const PanelVanilla = PanelVanillaComponentImpl;
 exports.PanelVanilla = PanelVanilla;
 //# sourceMappingURL=Panel.vanilla.cjs.map