@traefik-labs/faency 12.0.7

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

@@ -0,0 +1,9 @@
+/* empty css                                     */
+/* empty css                                    */
+/* empty css                                */
+import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+var gridRecipe = createRuntimeFn({ defaultClassName: "_1qwrd2o1 _1qwrd2o0", variantClassNames: { align: { start: "_1qwrd2o2", center: "_1qwrd2o3", end: "_1qwrd2o4", stretch: "_1qwrd2o5", baseline: "_1qwrd2o6" }, justify: { start: "_1qwrd2o7", center: "_1qwrd2o8", end: "_1qwrd2o9", between: "_1qwrd2oa" }, flow: { row: "_1qwrd2ob", column: "_1qwrd2oc", dense: "_1qwrd2od", rowDense: "_1qwrd2oe", columnDense: "_1qwrd2of" }, gap: { "1": "_1qwrd2og", "2": "_1qwrd2oh", "3": "_1qwrd2oi", "4": "_1qwrd2oj", "5": "_1qwrd2ok", "6": "_1qwrd2ol", "7": "_1qwrd2om", "8": "_1qwrd2on", "9": "_1qwrd2oo" }, gapX: { "1": "_1qwrd2op", "2": "_1qwrd2oq", "3": "_1qwrd2or", "4": "_1qwrd2os", "5": "_1qwrd2ot", "6": "_1qwrd2ou", "7": "_1qwrd2ov", "8": "_1qwrd2ow", "9": "_1qwrd2ox" }, gapY: { "1": "_1qwrd2oy", "2": "_1qwrd2oz", "3": "_1qwrd2o10", "4": "_1qwrd2o11", "5": "_1qwrd2o12", "6": "_1qwrd2o13", "7": "_1qwrd2o14", "8": "_1qwrd2o15", "9": "_1qwrd2o16" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  gridRecipe
+};
+//# sourceMappingURL=Grid.vanilla.css.js.map

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

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

package/dist/components/Grid/Grid.vanilla.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React from "react";
+import { processCSSProp } from "../../styles/cssProps.js";
+import { useVanillaExtractTheme } from "../../styles/themeContext.js";
+import { gridRecipe } from "./Grid.vanilla.css.js";
+const GridVanillaComponent = React.forwardRef(
+  ({
+    as,
+    className,
+    css,
+    style,
+    align,
+    justify,
+    flow,
+    columns,
+    gap,
+    gapX,
+    gapY,
+    ...props
+  }, ref) => {
+    const Component = as || "div";
+    const { colors } = useVanillaExtractTheme();
+    const { style: cssStyles, vars } = processCSSProp(css, colors);
+    const dynamicStyles = {};
+    if (columns !== void 0) {
+      dynamicStyles.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+    }
+    const mergedStyles = {
+      ...cssStyles,
+      ...dynamicStyles,
+      ...style,
+      ...assignInlineVars(vars)
+    };
+    const recipeClass = gridRecipe({ align, justify, flow, gap, gapX, gapY });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+GridVanillaComponent.displayName = "GridVanilla";
+const GridVanilla = GridVanillaComponent;
+export {
+  GridVanilla,
+  GridVanillaComponent
+};
+//# sourceMappingURL=Grid.vanilla.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.vanilla.js","sources":["../../../components/Grid/Grid.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type { Gap, GridAlign, GridFlow, GridJustify } from '../../styles/types';\nimport { gridRecipe } from './Grid.vanilla.css';\n\ninterface GridOwnProps extends CSSProps {\n  align?: GridAlign;\n  justify?: GridJustify;\n  flow?: GridFlow;\n  columns?: number;\n  gap?: Gap;\n  gapX?: Gap;\n  gapY?: Gap;\n}\n\nexport type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps>;\ntype GridComponent = PolymorphicComponent<'div', GridProps<ElementType>>;\n\nexport const GridVanillaComponent = React.forwardRef(\n  <C extends ElementType = 'div'>(\n    {\n      as,\n      className,\n      css,\n      style,\n      align,\n      justify,\n      flow,\n      columns,\n      gap,\n      gapX,\n      gapY,\n      ...props\n    }: GridProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const dynamicStyles: React.CSSProperties = {};\n\n    // To support any value on the columns props\n    if (columns !== undefined) {\n      dynamicStyles.gridTemplateColumns = `repeat(${columns}, 1fr)`;\n    }\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...dynamicStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = gridRecipe({ align, justify, flow, gap, gapX, gapY });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nGridVanillaComponent.displayName = 'GridVanilla';\n\nexport const GridVanilla = GridVanillaComponent as GridComponent;\n"],"names":[],"mappings":";;;;;;AA0BO,MAAM,uBAAuB,MAAM;AAAA,EACxC,CACE;AAAA,IACE;AAAA,IACA;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;AAExB,UAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,UAAM,gBAAqC,CAAA;AAG3C,QAAI,YAAY,QAAW;AACzB,oBAAc,sBAAsB,UAAU,OAAO;AAAA,IACvD;AAEA,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAc,WAAW,EAAE,OAAO,SAAS,MAAM,KAAK,MAAM,MAAM;AAExE,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,qBAAqB,cAAc;AAE5B,MAAM,cAAc;"}

package/dist/components/Heading/Heading.cjs

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const stitches_config = require("../../stitches.config.cjs");
+const HEADING_BASE_STYLES = {
+  fontFamily: "$rubik",
+  fontVariantNumeric: "proportional-nums",
+  display: "block",
+  lineHeight: "1.25",
+  fontWeight: "$medium",
+  margin: 0,
+  color: "$headingDefault",
+  variants: {
+    transform: {
+      uppercase: {
+        textTransform: "uppercase"
+      },
+      capitalize: {
+        // WARNING: this will only work with block elements (display block/inline-block)
+        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
+        display: "block",
+        "&::first-letter": {
+          textTransform: "uppercase"
+        }
+      },
+      capitalizeWords: {
+        textTransform: "capitalize"
+      }
+    }
+  }
+};
+const H1 = stitches_config.styled("h1", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$12"
+});
+const H2 = stitches_config.styled("h2", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$10"
+});
+const H3 = stitches_config.styled("h3", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$8"
+});
+const H4 = stitches_config.styled("h4", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$7"
+});
+const H5 = stitches_config.styled("h5", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$6"
+});
+const H6 = stitches_config.styled("h6", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$4"
+});
+exports.H1 = H1;
+exports.H2 = H2;
+exports.H3 = H3;
+exports.H4 = H4;
+exports.H5 = H5;
+exports.H6 = H6;
+//# sourceMappingURL=Heading.cjs.map

package/dist/components/Heading/Heading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.cjs","sources":["../../../components/Heading/Heading.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nconst HEADING_BASE_STYLES = {\n  fontFamily: '$rubik',\n  fontVariantNumeric: 'proportional-nums',\n  display: 'block',\n  lineHeight: '1.25',\n  fontWeight: '$medium',\n  margin: 0,\n  color: '$headingDefault',\n  variants: {\n    transform: {\n      uppercase: {\n        textTransform: 'uppercase',\n      },\n      capitalize: {\n        // WARNING: this will only work with block elements (display block/inline-block)\n        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter\n        display: 'block',\n        '&::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n      capitalizeWords: {\n        textTransform: 'capitalize',\n      },\n    },\n  },\n};\n\nexport const H1 = styled('h1', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$12',\n});\n\nexport const H2 = styled('h2', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$10',\n});\n\nexport const H3 = styled('h3', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$8',\n});\n\nexport const H4 = styled('h4', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$7',\n});\n\nexport const H5 = styled('h5', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$6',\n});\n\nexport const H6 = styled('h6', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$4',\n});\n"],"names":["styled"],"mappings":";;;AAEA,MAAM,sBAAsB;AAAA,EAC1B,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,IACR,WAAW;AAAA,MACT,WAAW;AAAA,QACT,eAAe;AAAA,MAAA;AAAA,MAEjB,YAAY;AAAA;AAAA;AAAA,QAGV,SAAS;AAAA,QACT,mBAAmB;AAAA,UACjB,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MAEF,iBAAiB;AAAA,QACf,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF;AAEJ;AAEO,MAAM,KAAKA,gBAAAA,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAKA,gBAAAA,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAKA,gBAAAA,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAKA,gBAAAA,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAKA,gBAAAA,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAKA,gBAAAA,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;;;;;;;"}

package/dist/components/Heading/Heading.js

@@ -0,0 +1,61 @@
+import { styled } from "../../stitches.config.js";
+const HEADING_BASE_STYLES = {
+  fontFamily: "$rubik",
+  fontVariantNumeric: "proportional-nums",
+  display: "block",
+  lineHeight: "1.25",
+  fontWeight: "$medium",
+  margin: 0,
+  color: "$headingDefault",
+  variants: {
+    transform: {
+      uppercase: {
+        textTransform: "uppercase"
+      },
+      capitalize: {
+        // WARNING: this will only work with block elements (display block/inline-block)
+        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
+        display: "block",
+        "&::first-letter": {
+          textTransform: "uppercase"
+        }
+      },
+      capitalizeWords: {
+        textTransform: "capitalize"
+      }
+    }
+  }
+};
+const H1 = styled("h1", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$12"
+});
+const H2 = styled("h2", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$10"
+});
+const H3 = styled("h3", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$8"
+});
+const H4 = styled("h4", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$7"
+});
+const H5 = styled("h5", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$6"
+});
+const H6 = styled("h6", {
+  ...HEADING_BASE_STYLES,
+  fontSize: "$4"
+});
+export {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6
+};
+//# sourceMappingURL=Heading.js.map

package/dist/components/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../components/Heading/Heading.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nconst HEADING_BASE_STYLES = {\n  fontFamily: '$rubik',\n  fontVariantNumeric: 'proportional-nums',\n  display: 'block',\n  lineHeight: '1.25',\n  fontWeight: '$medium',\n  margin: 0,\n  color: '$headingDefault',\n  variants: {\n    transform: {\n      uppercase: {\n        textTransform: 'uppercase',\n      },\n      capitalize: {\n        // WARNING: this will only work with block elements (display block/inline-block)\n        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter\n        display: 'block',\n        '&::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n      capitalizeWords: {\n        textTransform: 'capitalize',\n      },\n    },\n  },\n};\n\nexport const H1 = styled('h1', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$12',\n});\n\nexport const H2 = styled('h2', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$10',\n});\n\nexport const H3 = styled('h3', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$8',\n});\n\nexport const H4 = styled('h4', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$7',\n});\n\nexport const H5 = styled('h5', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$6',\n});\n\nexport const H6 = styled('h6', {\n  ...HEADING_BASE_STYLES,\n  fontSize: '$4',\n});\n"],"names":[],"mappings":";AAEA,MAAM,sBAAsB;AAAA,EAC1B,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,IACR,WAAW;AAAA,MACT,WAAW;AAAA,QACT,eAAe;AAAA,MAAA;AAAA,MAEjB,YAAY;AAAA;AAAA;AAAA,QAGV,SAAS;AAAA,QACT,mBAAmB;AAAA,UACjB,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MAEF,iBAAiB;AAAA,QACf,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF;AAEJ;AAEO,MAAM,KAAK,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAK,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAK,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAK,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAK,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;AAEM,MAAM,KAAK,OAAO,MAAM;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AACZ,CAAC;"}

package/dist/components/Heading/Heading.themes.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("tinycolor2");
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    headingDefault: tinycolor("black").setAlpha(0.74).toHslString()
+  });
+  Theme2.getDark = () => ({
+    headingDefault: tinycolor("white").setAlpha(0.74).toHslString()
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Heading.themes.cjs.map

package/dist/components/Heading/Heading.themes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.themes.cjs","sources":["../../../components/Heading/Heading.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    headingDefault: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    headingDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n  });\n\n  export const getDark: Factory = () => ({\n    headingDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n  });\n}\n"],"names":["Theme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAOQA,SAAA,WAAoB,OAAO;AAAA,IACtC,gBAAgB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGnDA,SAAA,UAAmB,OAAO;AAAA,IACrC,gBAAgB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAChE,GAbeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/Heading/Heading.themes.js

@@ -0,0 +1,14 @@
+import tinycolor from "tinycolor2";
+var Theme;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    headingDefault: tinycolor("black").setAlpha(0.74).toHslString()
+  });
+  Theme2.getDark = () => ({
+    headingDefault: tinycolor("white").setAlpha(0.74).toHslString()
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Heading.themes.js.map

package/dist/components/Heading/Heading.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.themes.js","sources":["../../../components/Heading/Heading.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    headingDefault: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    headingDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n  });\n\n  export const getDark: Factory = () => ({\n    headingDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n  });\n}\n"],"names":["Theme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAOQA,SAAA,WAAoB,OAAO;AAAA,IACtC,gBAAgB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGnDA,SAAA,UAAmB,OAAO;AAAA,IACrC,gBAAgB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAChE,GAbe,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/IconButton/IconButton.cjs

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const stitches_config = require("../../stitches.config.cjs");
+const Button = require("../Button/Button.cjs");
+const IconButton = stitches_config.styled("button", {
+  ...Button.BUTTON_BASE_STYLES,
+  // Reset
+  alignItems: "center",
+  display: "inline-flex",
+  flexShrink: 0,
+  fontFamily: "inherit",
+  fontSize: "14px",
+  justifyContent: "center",
+  lineHeight: "1",
+  // Custom
+  position: "relative",
+  padding: "0",
+  textDecoration: "none",
+  backgroundColor: "transparent",
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit"
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit"
+  },
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      "&::before": {
+        backgroundColor: "rgba(255, 255, 255, 0.15)"
+      },
+      "&::after": {
+        opacity: 0.05
+      }
+    }
+  },
+  "&:focus-visible": {
+    outline: "2px solid currentColor",
+    "&::before": {
+      backgroundColor: "rgba(255, 255, 255, 0.15)"
+    },
+    "&::after": {
+      opacity: 0.15
+    }
+  },
+  "&:active": {
+    "&::before": {
+      backgroundColor: "rgba(0, 0, 0, 0.15)"
+    }
+  },
+  variants: {
+    size: {
+      "1": {
+        borderRadius: "$1",
+        height: "$5",
+        width: "$5"
+      },
+      "2": {
+        borderRadius: "$2",
+        height: "$6",
+        width: "$6"
+      },
+      "3": {
+        borderRadius: "$2",
+        height: "$7",
+        width: "$7"
+      },
+      "4": {
+        borderRadius: "$3",
+        height: "$8",
+        width: "$8"
+      }
+    },
+    variant: {
+      default: {
+        color: "$slate10"
+      },
+      contrast: {
+        color: "$hiContrast"
+      },
+      primary: {
+        color: "$primary"
+      },
+      red: {
+        color: "$red9"
+      },
+      green: {
+        color: "$green9"
+      },
+      orange: {
+        color: "$orange9"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "2"
+  }
+});
+exports.IconButton = IconButton;
+//# sourceMappingURL=IconButton.cjs.map

package/dist/components/IconButton/IconButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.cjs","sources":["../../../components/IconButton/IconButton.tsx"],"sourcesContent":["import { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\n\nexport const IconButton = styled('button', {\n  ...BUTTON_BASE_STYLES,\n  // Reset\n  alignItems: 'center',\n  display: 'inline-flex',\n  flexShrink: 0,\n  fontFamily: 'inherit',\n  fontSize: '14px',\n  justifyContent: 'center',\n  lineHeight: '1',\n  // Custom\n  position: 'relative',\n  padding: '0',\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:focus-visible': {\n    outline: '2px solid currentColor',\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      '1': {\n        borderRadius: '$1',\n        height: '$5',\n        width: '$5',\n      },\n      '2': {\n        borderRadius: '$2',\n        height: '$6',\n        width: '$6',\n      },\n      '3': {\n        borderRadius: '$2',\n        height: '$7',\n        width: '$7',\n      },\n      '4': {\n        borderRadius: '$3',\n        height: '$8',\n        width: '$8',\n      },\n    },\n    variant: {\n      default: {\n        color: '$slate10',\n      },\n      contrast: {\n        color: '$hiContrast',\n      },\n      primary: {\n        color: '$primary',\n      },\n      red: {\n        color: '$red9',\n      },\n      green: {\n        color: '$green9',\n      },\n      orange: {\n        color: '$orange9',\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: '2',\n  },\n});\n\nexport type IconButtonVariants = VariantProps<typeof IconButton>;\n"],"names":["styled","BUTTON_BASE_STYLES"],"mappings":";;;;AAGO,MAAM,aAAaA,gBAAAA,OAAO,UAAU;AAAA,EACzC,GAAGC,OAAAA;AAAAA;AAAAA,EAEH,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EAEjB,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,EAAA;AAAA,EAEhB,YAAY;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,EAAA;AAAA,EAEhB,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,iBAAiB;AAAA,MAAA;AAAA,MAEnB,YAAY;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAGF,mBAAmB;AAAA,IACjB,SAAS;AAAA,IACT,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,IAEnB,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,YAAY;AAAA,IACV,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAAA,EAGF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,KAAK;AAAA,QACH,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,KAAK;AAAA,QACH,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,KAAK;AAAA,QACH,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,KAAK;AAAA,QACH,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,SAAS;AAAA,MACP,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,KAAK;AAAA,QACH,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,QAAQ;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV,CAAC;;"}

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,109 @@
+import { styled } from "../../stitches.config.js";
+import { BUTTON_BASE_STYLES } from "../Button/Button.js";
+const IconButton = styled("button", {
+  ...BUTTON_BASE_STYLES,
+  // Reset
+  alignItems: "center",
+  display: "inline-flex",
+  flexShrink: 0,
+  fontFamily: "inherit",
+  fontSize: "14px",
+  justifyContent: "center",
+  lineHeight: "1",
+  // Custom
+  position: "relative",
+  padding: "0",
+  textDecoration: "none",
+  backgroundColor: "transparent",
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit"
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit"
+  },
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      "&::before": {
+        backgroundColor: "rgba(255, 255, 255, 0.15)"
+      },
+      "&::after": {
+        opacity: 0.05
+      }
+    }
+  },
+  "&:focus-visible": {
+    outline: "2px solid currentColor",
+    "&::before": {
+      backgroundColor: "rgba(255, 255, 255, 0.15)"
+    },
+    "&::after": {
+      opacity: 0.15
+    }
+  },
+  "&:active": {
+    "&::before": {
+      backgroundColor: "rgba(0, 0, 0, 0.15)"
+    }
+  },
+  variants: {
+    size: {
+      "1": {
+        borderRadius: "$1",
+        height: "$5",
+        width: "$5"
+      },
+      "2": {
+        borderRadius: "$2",
+        height: "$6",
+        width: "$6"
+      },
+      "3": {
+        borderRadius: "$2",
+        height: "$7",
+        width: "$7"
+      },
+      "4": {
+        borderRadius: "$3",
+        height: "$8",
+        width: "$8"
+      }
+    },
+    variant: {
+      default: {
+        color: "$slate10"
+      },
+      contrast: {
+        color: "$hiContrast"
+      },
+      primary: {
+        color: "$primary"
+      },
+      red: {
+        color: "$red9"
+      },
+      green: {
+        color: "$green9"
+      },
+      orange: {
+        color: "$orange9"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "2"
+  }
+});
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../components/IconButton/IconButton.tsx"],"sourcesContent":["import { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\n\nexport const IconButton = styled('button', {\n  ...BUTTON_BASE_STYLES,\n  // Reset\n  alignItems: 'center',\n  display: 'inline-flex',\n  flexShrink: 0,\n  fontFamily: 'inherit',\n  fontSize: '14px',\n  justifyContent: 'center',\n  lineHeight: '1',\n  // Custom\n  position: 'relative',\n  padding: '0',\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:focus-visible': {\n    outline: '2px solid currentColor',\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      '1': {\n        borderRadius: '$1',\n        height: '$5',\n        width: '$5',\n      },\n      '2': {\n        borderRadius: '$2',\n        height: '$6',\n        width: '$6',\n      },\n      '3': {\n        borderRadius: '$2',\n        height: '$7',\n        width: '$7',\n      },\n      '4': {\n        borderRadius: '$3',\n        height: '$8',\n        width: '$8',\n      },\n    },\n    variant: {\n      default: {\n        color: '$slate10',\n      },\n      contrast: {\n        color: '$hiContrast',\n      },\n      primary: {\n        color: '$primary',\n      },\n      red: {\n        color: '$red9',\n      },\n      green: {\n        color: '$green9',\n      },\n      orange: {\n        color: '$orange9',\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: '2',\n  },\n});\n\nexport type IconButtonVariants = VariantProps<typeof IconButton>;\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa,OAAO,UAAU;AAAA,EACzC,GAAG;AAAA;AAAA,EAEH,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EAEjB,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,EAAA;AAAA,EAEhB,YAAY;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,EAAA;AAAA,EAEhB,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,iBAAiB;AAAA,MAAA;AAAA,MAEnB,YAAY;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAGF,mBAAmB;AAAA,IACjB,SAAS;AAAA,IACT,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,IAEnB,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,YAAY;AAAA,IACV,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAAA,EAGF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,KAAK;AAAA,QACH,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,KAAK;AAAA,QACH,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,KAAK;AAAA,QACH,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,KAAK;AAAA,QACH,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,SAAS;AAAA,MACP,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,KAAK;AAAA,QACH,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,QAAQ;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV,CAAC;"}

package/dist/components/IconButton/IconButton.themes.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    iconButtonBackground: "white",
+    iconButtonHoverBorder: "$slate9",
+    iconButtonHoverBackground: "$slateA3",
+    iconButtonFocusBorder: "$slate10"
+  });
+  Theme2.getDark = () => ({
+    iconButtonBackground: "$deepBlue2",
+    iconButtonHoverBorder: "$deepBlue6",
+    iconButtonHoverBackground: "$slateA4",
+    iconButtonFocusBorder: "$deepBlue7"
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=IconButton.themes.cjs.map

package/dist/components/IconButton/IconButton.themes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.themes.cjs","sources":["../../../components/IconButton/IconButton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    iconButtonBackground: Property.Color;\n    iconButtonHoverBorder: Property.Color;\n    iconButtonHoverBackground: Property.Color;\n    iconButtonFocusBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    iconButtonBackground: 'white',\n    iconButtonHoverBorder: '$slate9',\n    iconButtonHoverBackground: '$slateA3',\n    iconButtonFocusBorder: '$slate10',\n  });\n\n  export const getDark: Factory = () => ({\n    iconButtonBackground: '$deepBlue2',\n    iconButtonHoverBorder: '$deepBlue6',\n    iconButtonHoverBackground: '$slateA4',\n    iconButtonFocusBorder: '$deepBlue7',\n  });\n}\n"],"names":["Theme"],"mappings":";;AAIiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAUQA,SAAA,WAAoB,OAAO;AAAA,IACtC,sBAAsB;AAAA,IACtB,uBAAuB;AAAA,IACvB,2BAA2B;AAAA,IAC3B,uBAAuB;AAAA,EAAA;AAGZA,SAAA,UAAmB,OAAO;AAAA,IACrC,sBAAsB;AAAA,IACtB,uBAAuB;AAAA,IACvB,2BAA2B;AAAA,IAC3B,uBAAuB;AAAA,EAAA;AACzB,GAtBeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/IconButton/IconButton.themes.js

@@ -0,0 +1,19 @@
+var Theme;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    iconButtonBackground: "white",
+    iconButtonHoverBorder: "$slate9",
+    iconButtonHoverBackground: "$slateA3",
+    iconButtonFocusBorder: "$slate10"
+  });
+  Theme2.getDark = () => ({
+    iconButtonBackground: "$deepBlue2",
+    iconButtonHoverBorder: "$deepBlue6",
+    iconButtonHoverBackground: "$slateA4",
+    iconButtonFocusBorder: "$deepBlue7"
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=IconButton.themes.js.map

package/dist/components/IconButton/IconButton.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.themes.js","sources":["../../../components/IconButton/IconButton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    iconButtonBackground: Property.Color;\n    iconButtonHoverBorder: Property.Color;\n    iconButtonHoverBackground: Property.Color;\n    iconButtonFocusBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    iconButtonBackground: 'white',\n    iconButtonHoverBorder: '$slate9',\n    iconButtonHoverBackground: '$slateA3',\n    iconButtonFocusBorder: '$slate10',\n  });\n\n  export const getDark: Factory = () => ({\n    iconButtonBackground: '$deepBlue2',\n    iconButtonHoverBorder: '$deepBlue6',\n    iconButtonHoverBackground: '$slateA4',\n    iconButtonFocusBorder: '$deepBlue7',\n  });\n}\n"],"names":["Theme"],"mappings":"AAIO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAUQA,SAAA,WAAoB,OAAO;AAAA,IACtC,sBAAsB;AAAA,IACtB,uBAAuB;AAAA,IACvB,2BAA2B;AAAA,IAC3B,uBAAuB;AAAA,EAAA;AAGZA,SAAA,UAAmB,OAAO;AAAA,IACrC,sBAAsB;AAAA,IACtB,uBAAuB;AAAA,IACvB,2BAA2B;AAAA,IAC3B,uBAAuB;AAAA,EAAA;AACzB,GAtBe,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/IconButton/IconButton.vanilla.cjs

@@ -0,0 +1,34 @@
+"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 IconButton_vanilla_css = require("./IconButton.vanilla.css.cjs");
+const IconButtonVanillaComponentImpl = React.forwardRef(
+  ({ as, className, css, style, size, variant, ...props }, ref) => {
+    const Component = as || "button";
+    const { colors } = themeContext.useVanillaExtractTheme();
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...dynamic.assignInlineVars(vars)
+    };
+    const recipeClass = IconButton_vanilla_css.iconButtonRecipe({ size, variant });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+IconButtonVanillaComponentImpl.displayName = "IconButtonVanilla";
+const IconButtonVanilla = IconButtonVanillaComponentImpl;
+exports.IconButtonVanilla = IconButtonVanilla;
+//# sourceMappingURL=IconButton.vanilla.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.vanilla.cjs","sources":["../../../components/IconButton/IconButton.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 { iconButtonRecipe } from './IconButton.vanilla.css';\n\ntype IconButtonRecipeVariants = RecipeVariants<typeof iconButtonRecipe>;\n\ninterface IconButtonOwnProps extends Omit<IconButtonRecipeVariants, never>, CSSProps {}\n\nexport type IconButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n  C,\n  IconButtonOwnProps\n>;\n\ntype IconButtonVanillaComponent = PolymorphicComponent<\n  'button',\n  IconButtonVanillaProps<ElementType>\n>;\n\nconst IconButtonVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, className, css, style, size, variant, ...props }: IconButtonVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'button';\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 = iconButtonRecipe({ size, variant });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nIconButtonVanillaComponentImpl.displayName = 'IconButtonVanilla';\n\nexport const IconButtonVanilla = IconButtonVanillaComponentImpl as IconButtonVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","iconButtonRecipe","jsx"],"mappings":";;;;;;;;AA2BA,MAAM,iCAAiCA,MAAAA;AAAAA,EACrC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,MAAA,GAC/C,QACG;AACH,UAAM,YAAY,MAAM;AAExB,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,uBAAAA,iBAAiB,EAAE,MAAM,SAAS;AAEtD,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,+BAA+B,cAAc;AAEtC,MAAM,oBAAoB;;"}

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                        */
+const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
+var iconButtonRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "vdyzvy1 vdyzvy0", variantClassNames: { size: { "1": "vdyzvy2", "2": "vdyzvy3", "3": "vdyzvy4", "4": "vdyzvy5" }, variant: { "default": "vdyzvy6", contrast: "vdyzvy7", primary: "vdyzvy8", red: "vdyzvy9", green: "vdyzvya", orange: "vdyzvyb" } }, defaultVariants: { variant: "default", size: "2" }, compoundVariants: [] });
+exports.iconButtonRecipe = iconButtonRecipe;
+//# sourceMappingURL=IconButton.vanilla.css.cjs.map

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

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

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

@@ -0,0 +1,7 @@
+/* empty css                                      */
+import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+var iconButtonRecipe = createRuntimeFn({ defaultClassName: "vdyzvy1 vdyzvy0", variantClassNames: { size: { "1": "vdyzvy2", "2": "vdyzvy3", "3": "vdyzvy4", "4": "vdyzvy5" }, variant: { "default": "vdyzvy6", contrast: "vdyzvy7", primary: "vdyzvy8", red: "vdyzvy9", green: "vdyzvya", orange: "vdyzvyb" } }, defaultVariants: { variant: "default", size: "2" }, compoundVariants: [] });
+export {
+  iconButtonRecipe
+};
+//# sourceMappingURL=IconButton.vanilla.css.js.map

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

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

package/dist/components/IconButton/IconButton.vanilla.js

@@ -0,0 +1,34 @@
+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 { iconButtonRecipe } from "./IconButton.vanilla.css.js";
+const IconButtonVanillaComponentImpl = forwardRef(
+  ({ as, className, css, style, size, variant, ...props }, ref) => {
+    const Component = as || "button";
+    const { colors } = useVanillaExtractTheme();
+    const { style: cssStyles, vars } = processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...assignInlineVars(vars)
+    };
+    const recipeClass = iconButtonRecipe({ size, variant });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+IconButtonVanillaComponentImpl.displayName = "IconButtonVanilla";
+const IconButtonVanilla = IconButtonVanillaComponentImpl;
+export {
+  IconButtonVanilla
+};
+//# sourceMappingURL=IconButton.vanilla.js.map