@traefik-labs/faency 12.0.7 → 12.0.8

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonSwitch.vanilla.js","sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ntype ButtonSwitchContainerVanillaProps = (\n  | ToggleGroupPrimitive.ToggleGroupSingleProps\n  | ToggleGroupPrimitive.ToggleGroupMultipleProps\n) &\n  CSSProps;\n\nexport const ButtonSwitchContainerVanilla = forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  ButtonSwitchContainerVanillaProps\n>(({ className, css, style, ...props }, ref) => {\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  return (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n      style={mergedStyles}\n      {...props}\n    />\n  );\n});\n\nButtonSwitchContainerVanilla.displayName = 'ButtonSwitchContainerVanilla';\n\n// Item Component\ntype ButtonSwitchItemVanillaProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'css'> &\n  CSSProps;\n\nexport const ButtonSwitchItemVanilla = forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  ButtonSwitchItemVanillaProps\n>(({ className, css, style, ...props }, ref) => {\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  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={`${buttonSwitchItem} ${className || ''}`.trim()}\n      style={mergedStyles}\n      {...props}\n    />\n  );\n});\n\nButtonSwitchItemVanilla.displayName = 'ButtonSwitchItemVanilla';\n"],"names":[],"mappings":";;;;;;;AAeO,MAAM,+BAA+B,WAG1C,CAAC,EAAE,WAAW,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC9C,QAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,QAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG,iBAAiB,IAAI;AAAA,EAAA;AAG1B,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,qBAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,MACzD,OAAO;AAAA,MACN,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,6BAA6B,cAAc;AAMpC,MAAM,0BAA0B,WAGrC,CAAC,EAAE,WAAW,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC9C,QAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,QAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG,iBAAiB,IAAI;AAAA,EAAA;AAG1B,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,gBAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,MACpD,OAAO;AAAA,MACN,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,wBAAwB,cAAc;"}
+{"version":3,"file":"ButtonSwitch.vanilla.js","sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { 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 { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n  type?: 'single' | 'multiple';\n  value?: string | string[];\n  defaultValue?: string | string[];\n  onValueChange?: (value: any) => void;\n  disabled?: boolean;\n  rovingFocus?: boolean;\n  loop?: boolean;\n  orientation?: 'horizontal' | 'vertical';\n  dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n  PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n  'div',\n  ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = (as || 'div') as any;\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    if (as) {\n      return (\n        <Component\n          ref={ref}\n          className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n          style={mergedStyles}\n          role=\"group\"\n          {...props}\n        >\n          {children}\n        </Component>\n      );\n    }\n\n    return (\n      <ToggleGroupPrimitive.Root\n        ref={ref as any}\n        className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...(props as any)}\n      >\n        {children}\n      </ToggleGroupPrimitive.Root>\n    );\n  },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n  ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n  value: string;\n  disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n  PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n  'button',\n  ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = (as || 'button') as any;\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    if (as) {\n      return (\n        <Component\n          ref={ref}\n          className={`${buttonSwitchItem} ${className || ''}`.trim()}\n          style={mergedStyles}\n          role=\"radio\"\n          {...props}\n        >\n          {children}\n        </Component>\n      );\n    }\n\n    return (\n      <ToggleGroupPrimitive.Item\n        ref={ref as any}\n        className={`${buttonSwitchItem} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...(props as any)}\n      >\n        {children}\n      </ToggleGroupPrimitive.Item>\n    );\n  },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n  ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"names":[],"mappings":";;;;;;;AAkCA,MAAM,mCAAmC;AAAA,EACvC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,MAAA,GAC1C,QACG;AACH,UAAM,YAAa,MAAM;AACzB,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,QAAI,IAAI;AACN,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,qBAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,UACzD,OAAO;AAAA,UACP,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QACzD,OAAO;AAAA,QACN,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iCAAiC,cAAc;AAExC,MAAM,+BACX;AAgBF,MAAM,8BAA8B;AAAA,EAClC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,MAAA,GAC1C,QACG;AACH,UAAM,YAAa,MAAM;AACzB,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,QAAI,IAAI;AACN,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,gBAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,UACpD,OAAO;AAAA,UACP,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,gBAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QACpD,OAAO;AAAA,QACN,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,4BAA4B,cAAc;AAEnC,MAAM,0BACX;"}

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.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/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.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

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.vanilla.cjs","sources":["../../../components/Panel/Panel.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { panelStyle } from './Panel.vanilla.css';\n\nexport type PanelVanillaProps = React.ComponentProps<'div'> & CSSProps;\n\nexport const PanelVanilla = forwardRef<HTMLDivElement, PanelVanillaProps>(\n  ({ className, css, style, ...props }, ref) => {\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    return (\n      <div\n        ref={ref}\n        className={`${panelStyle} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nPanelVanilla.displayName = 'PanelVanilla';\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","jsx","panelStyle"],"mappings":";;;;;;;;AASO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CAAC,EAAE,WAAW,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC5C,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,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAGC,4BAAU,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"Panel.vanilla.cjs","sources":["../../../components/Panel/Panel.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 { panelStyle } from './Panel.vanilla.css';\n\nexport type PanelVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CSSProps\n>;\n\ntype PanelVanillaComponent = PolymorphicComponent<'div', PanelVanillaProps<ElementType>>;\n\nconst PanelVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, ...props }: PanelVanillaProps<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\n    return (\n      <Component\n        ref={ref}\n        className={`${panelStyle} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nPanelVanillaComponentImpl.displayName = 'PanelVanilla';\n\nexport const PanelVanilla = PanelVanillaComponentImpl as PanelVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","jsx","panelStyle"],"mappings":";;;;;;;;AAmBA,MAAM,4BAA4BA,MAAAA;AAAAA,EAChC,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;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAGC,QAAAA,iBAAiB,IAAI,EAAA;AAEvE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAGC,4BAAU,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,0BAA0B,cAAc;AAEjC,MAAM,eAAe;;"}

package/dist/components/Panel/Panel.vanilla.js

@@ -4,13 +4,14 @@ import { forwardRef } from "react";
 import { processCSSProp } from "../../styles/cssProps.js";
 import { useVanillaExtractTheme } from "../../styles/themeContext.js";
 import { panelStyle } from "./Panel.vanilla.css.js";
-const PanelVanilla = forwardRef(
-  ({ className, css, style, ...props }, ref) => {
+const PanelVanillaComponentImpl = forwardRef(
+  ({ as, className, css, style, ...props }, ref) => {
+    const Component = as || "div";
     const { colors } = useVanillaExtractTheme();
     const { style: cssStyles, vars } = processCSSProp(css, colors);
     const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };
     return /* @__PURE__ */ jsx(
-      "div",
+      Component,
       {
         ref,
         className: `${panelStyle} ${className || ""}`.trim(),
@@ -20,7 +21,8 @@ const PanelVanilla = forwardRef(
     );
   }
 );
-PanelVanilla.displayName = "PanelVanilla";
+PanelVanillaComponentImpl.displayName = "PanelVanilla";
+const PanelVanilla = PanelVanillaComponentImpl;
 export {
   PanelVanilla
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.vanilla.js","sources":["../../../components/Panel/Panel.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { panelStyle } from './Panel.vanilla.css';\n\nexport type PanelVanillaProps = React.ComponentProps<'div'> & CSSProps;\n\nexport const PanelVanilla = forwardRef<HTMLDivElement, PanelVanillaProps>(\n  ({ className, css, style, ...props }, ref) => {\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    return (\n      <div\n        ref={ref}\n        className={`${panelStyle} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nPanelVanilla.displayName = 'PanelVanilla';\n"],"names":[],"mappings":";;;;;;AASO,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC5C,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,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,UAAU,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"Panel.vanilla.js","sources":["../../../components/Panel/Panel.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 { panelStyle } from './Panel.vanilla.css';\n\nexport type PanelVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CSSProps\n>;\n\ntype PanelVanillaComponent = PolymorphicComponent<'div', PanelVanillaProps<ElementType>>;\n\nconst PanelVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, ...props }: PanelVanillaProps<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\n    return (\n      <Component\n        ref={ref}\n        className={`${panelStyle} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nPanelVanillaComponentImpl.displayName = 'PanelVanilla';\n\nexport const PanelVanilla = PanelVanillaComponentImpl as PanelVanillaComponent;\n"],"names":[],"mappings":";;;;;;AAmBA,MAAM,4BAA4B;AAAA,EAChC,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;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,IAAI,EAAA;AAEvE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,UAAU,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,0BAA0B,cAAc;AAEjC,MAAM,eAAe;"}