@traefik-labs/faency 12.0.7

package/dist/components/Card/Card.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Elevation = require("../Elevation/Elevation.cjs");
+const StyledCard = stitches_config.styled("div", {
+  appearance: "none",
+  border: "none",
+  boxSizing: "border-box",
+  font: "inherit",
+  lineHeight: "1",
+  outline: "none",
+  padding: "$3",
+  textAlign: "inherit",
+  verticalAlign: "middle",
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  backgroundColor: "$cardBackground",
+  display: "block",
+  textDecoration: "none",
+  color: "inherit",
+  borderRadius: "$3",
+  position: "relative",
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: "$3",
+    pointerEvents: "none"
+  },
+  variants: {
+    elevation: Elevation.elevationVariants,
+    variant: {
+      inner: {
+        backgroundColor: "$innerCardBgColor"
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        boxShadow: "none"
+      }
+    },
+    active: {
+      true: {
+        "&::before": {
+          outline: "1px solid $colors$cardActiveBorder",
+          backgroundColor: "$cardActiveBackground"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    elevation: 1
+  }
+});
+const StyledInteractiveCard = stitches_config.styled("button", StyledCard, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      "&::before": {
+        outline: "1px solid $colors$cardHoverBorder",
+        backgroundColor: "$cardHoverBackground"
+      }
+    }
+  },
+  "&:focus": {
+    outline: "2px solid $primary"
+  },
+  "&:active": {
+    "&::before": {
+      outline: "1px solid $colors$cardActiveBorder",
+      backgroundColor: "$cardActiveBackground"
+    }
+  }
+});
+const Card = React.forwardRef(
+  ({ interactive, ...props }, forwardedRef) => {
+    if (interactive) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        StyledInteractiveCard,
+        {
+          tabIndex: 0,
+          ref: forwardedRef,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledCard,
+      {
+        ref: forwardedRef,
+        ...props
+      }
+    );
+  }
+);
+exports.Card = Card;
+//# sourceMappingURL=Card.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.cjs","sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n  appearance: 'none',\n  border: 'none',\n  boxSizing: 'border-box',\n  font: 'inherit',\n  lineHeight: '1',\n  outline: 'none',\n  padding: '$3',\n  textAlign: 'inherit',\n  verticalAlign: 'middle',\n  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n  backgroundColor: '$cardBackground',\n  display: 'block',\n  textDecoration: 'none',\n  color: 'inherit',\n  borderRadius: '$3',\n  position: 'relative',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: '$3',\n    pointerEvents: 'none',\n  },\n\n  variants: {\n    elevation: elevationVariants,\n    variant: {\n      inner: {\n        backgroundColor: '$innerCardBgColor',\n      },\n      ghost: {\n        backgroundColor: 'transparent',\n        boxShadow: 'none',\n      },\n    },\n    active: {\n      true: {\n        '&::before': {\n          outline: '1px solid $colors$cardActiveBorder',\n          backgroundColor: '$cardActiveBackground',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    elevation: 1,\n  },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        outline: '1px solid $colors$cardHoverBorder',\n        backgroundColor: '$cardHoverBackground',\n      },\n    },\n  },\n  '&:focus': {\n    outline: '2px solid $primary',\n  },\n  '&:active': {\n    '&::before': {\n      outline: '1px solid $colors$cardActiveBorder',\n      backgroundColor: '$cardActiveBackground',\n    },\n  },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n  VariantProps<typeof StyledCard> & {\n    interactive?: false;\n  };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n  ComponentProps<typeof StyledInteractiveCard> & {\n    interactive: true;\n  };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    if (interactive) {\n      return (\n        <StyledInteractiveCard\n          tabIndex={0}\n          ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n          {...(props as InteractiveCardProps)}\n        />\n      );\n    }\n    return (\n      <StyledCard\n        ref={forwardedRef as React.RefObject<HTMLDivElement>}\n        {...(props as CardVariantProps)}\n      />\n    );\n  },\n);\n"],"names":["styled","elevationVariants","jsx"],"mappings":";;;;;;AAKA,MAAM,aAAaA,gBAAAA,OAAO,OAAO;AAAA,EAC/B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,yBAAyB;AAAA,EAEzB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,cAAc;AAAA,IACd,eAAe;AAAA,EAAA;AAAA,EAGjB,UAAU;AAAA,IACR,WAAWC,UAAAA;AAAAA,IACX,SAAS;AAAA,MACP,OAAO;AAAA,QACL,iBAAiB;AAAA,MAAA;AAAA,MAEnB,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,aAAa;AAAA,UACX,SAAS;AAAA,UACT,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC;AAED,MAAM,wBAAwBD,gBAAAA,OAAO,UAAU,YAAY;AAAA,EACzD,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,SAAS;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EACF;AAAA,EAEF,WAAW;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,YAAY;AAAA,IACV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;AAYM,MAAM,OAAO,MAAM;AAAA,EACxB,CAAC,EAAE,aAAa,GAAG,MAAA,GAAS,iBAAiB;AAC3C,QAAI,aAAa;AACf,aACEE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAU;AAAA,UACV,KAAK;AAAA,UACJ,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGX;AACA,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACJ,GAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF;;"}

package/dist/components/Card/Card.js

@@ -0,0 +1,101 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { styled } from "../../stitches.config.js";
+import { elevationVariants } from "../Elevation/Elevation.js";
+const StyledCard = styled("div", {
+  appearance: "none",
+  border: "none",
+  boxSizing: "border-box",
+  font: "inherit",
+  lineHeight: "1",
+  outline: "none",
+  padding: "$3",
+  textAlign: "inherit",
+  verticalAlign: "middle",
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  backgroundColor: "$cardBackground",
+  display: "block",
+  textDecoration: "none",
+  color: "inherit",
+  borderRadius: "$3",
+  position: "relative",
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: "$3",
+    pointerEvents: "none"
+  },
+  variants: {
+    elevation: elevationVariants,
+    variant: {
+      inner: {
+        backgroundColor: "$innerCardBgColor"
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        boxShadow: "none"
+      }
+    },
+    active: {
+      true: {
+        "&::before": {
+          outline: "1px solid $colors$cardActiveBorder",
+          backgroundColor: "$cardActiveBackground"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    elevation: 1
+  }
+});
+const StyledInteractiveCard = styled("button", StyledCard, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      "&::before": {
+        outline: "1px solid $colors$cardHoverBorder",
+        backgroundColor: "$cardHoverBackground"
+      }
+    }
+  },
+  "&:focus": {
+    outline: "2px solid $primary"
+  },
+  "&:active": {
+    "&::before": {
+      outline: "1px solid $colors$cardActiveBorder",
+      backgroundColor: "$cardActiveBackground"
+    }
+  }
+});
+const Card = React.forwardRef(
+  ({ interactive, ...props }, forwardedRef) => {
+    if (interactive) {
+      return /* @__PURE__ */ jsx(
+        StyledInteractiveCard,
+        {
+          tabIndex: 0,
+          ref: forwardedRef,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledCard,
+      {
+        ref: forwardedRef,
+        ...props
+      }
+    );
+  }
+);
+export {
+  Card
+};
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n  appearance: 'none',\n  border: 'none',\n  boxSizing: 'border-box',\n  font: 'inherit',\n  lineHeight: '1',\n  outline: 'none',\n  padding: '$3',\n  textAlign: 'inherit',\n  verticalAlign: 'middle',\n  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n  backgroundColor: '$cardBackground',\n  display: 'block',\n  textDecoration: 'none',\n  color: 'inherit',\n  borderRadius: '$3',\n  position: 'relative',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: '$3',\n    pointerEvents: 'none',\n  },\n\n  variants: {\n    elevation: elevationVariants,\n    variant: {\n      inner: {\n        backgroundColor: '$innerCardBgColor',\n      },\n      ghost: {\n        backgroundColor: 'transparent',\n        boxShadow: 'none',\n      },\n    },\n    active: {\n      true: {\n        '&::before': {\n          outline: '1px solid $colors$cardActiveBorder',\n          backgroundColor: '$cardActiveBackground',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    elevation: 1,\n  },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        outline: '1px solid $colors$cardHoverBorder',\n        backgroundColor: '$cardHoverBackground',\n      },\n    },\n  },\n  '&:focus': {\n    outline: '2px solid $primary',\n  },\n  '&:active': {\n    '&::before': {\n      outline: '1px solid $colors$cardActiveBorder',\n      backgroundColor: '$cardActiveBackground',\n    },\n  },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n  VariantProps<typeof StyledCard> & {\n    interactive?: false;\n  };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n  ComponentProps<typeof StyledInteractiveCard> & {\n    interactive: true;\n  };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    if (interactive) {\n      return (\n        <StyledInteractiveCard\n          tabIndex={0}\n          ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n          {...(props as InteractiveCardProps)}\n        />\n      );\n    }\n    return (\n      <StyledCard\n        ref={forwardedRef as React.RefObject<HTMLDivElement>}\n        {...(props as CardVariantProps)}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;AAKA,MAAM,aAAa,OAAO,OAAO;AAAA,EAC/B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,yBAAyB;AAAA,EAEzB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,cAAc;AAAA,IACd,eAAe;AAAA,EAAA;AAAA,EAGjB,UAAU;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,MACP,OAAO;AAAA,QACL,iBAAiB;AAAA,MAAA;AAAA,MAEnB,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,aAAa;AAAA,UACX,SAAS;AAAA,UACT,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC;AAED,MAAM,wBAAwB,OAAO,UAAU,YAAY;AAAA,EACzD,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,SAAS;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EACF;AAAA,EAEF,WAAW;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,YAAY;AAAA,IACV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;AAYM,MAAM,OAAO,MAAM;AAAA,EACxB,CAAC,EAAE,aAAa,GAAG,MAAA,GAAS,iBAAiB;AAC3C,QAAI,aAAa;AACf,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAU;AAAA,UACV,KAAK;AAAA,UACJ,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGX;AACA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACJ,GAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF;"}

package/dist/components/Card/Card.theme.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const cardLightTheme = {
+  cardBackground: "white",
+  cardHoverBackground: "rgba(0,0,0,.05)",
+  cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
+  // Will be overridden with primary color
+  cardActiveBackground: "rgba(0,0,0,.03)",
+  cardActiveBorder: "hsl(211, 100%, 50%)",
+  // Will be overridden with primary color
+  innerCardBgColor: "hsla(0, 0%, 0%, 0.04)"
+};
+const cardDarkTheme = {
+  cardBackground: "hsl(209, 29%, 14%)",
+  // deepBlue2
+  cardHoverBackground: "rgba(255,255,255,.12)",
+  cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
+  // Will be overridden with primary color
+  cardActiveBackground: "rgba(255,255,255,.07)",
+  cardActiveBorder: "hsla(211, 100%, 50%, 0.4)",
+  // Will be overridden with primary color
+  innerCardBgColor: "hsla(0, 0%, 100%, 0.07)"
+};
+exports.cardDarkTheme = cardDarkTheme;
+exports.cardLightTheme = cardLightTheme;
+//# sourceMappingURL=Card.theme.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.theme.cjs","sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n  cardBackground: 'white',\n  cardHoverBackground: 'rgba(0,0,0,.05)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(0,0,0,.03)',\n  cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n  cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n  cardHoverBackground: 'rgba(255,255,255,.12)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(255,255,255,.07)',\n  cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"names":[],"mappings":";;AAEO,MAAM,iBAAiB;AAAA,EAC5B,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AACpB;AAEO,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AACpB;;;"}

package/dist/components/Card/Card.theme.js

@@ -0,0 +1,26 @@
+const cardLightTheme = {
+  cardBackground: "white",
+  cardHoverBackground: "rgba(0,0,0,.05)",
+  cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
+  // Will be overridden with primary color
+  cardActiveBackground: "rgba(0,0,0,.03)",
+  cardActiveBorder: "hsl(211, 100%, 50%)",
+  // Will be overridden with primary color
+  innerCardBgColor: "hsla(0, 0%, 0%, 0.04)"
+};
+const cardDarkTheme = {
+  cardBackground: "hsl(209, 29%, 14%)",
+  // deepBlue2
+  cardHoverBackground: "rgba(255,255,255,.12)",
+  cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
+  // Will be overridden with primary color
+  cardActiveBackground: "rgba(255,255,255,.07)",
+  cardActiveBorder: "hsla(211, 100%, 50%, 0.4)",
+  // Will be overridden with primary color
+  innerCardBgColor: "hsla(0, 0%, 100%, 0.07)"
+};
+export {
+  cardDarkTheme,
+  cardLightTheme
+};
+//# sourceMappingURL=Card.theme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.theme.js","sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n  cardBackground: 'white',\n  cardHoverBackground: 'rgba(0,0,0,.05)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(0,0,0,.03)',\n  cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n  cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n  cardHoverBackground: 'rgba(255,255,255,.12)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(255,255,255,.07)',\n  cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"names":[],"mappings":"AAEO,MAAM,iBAAiB;AAAA,EAC5B,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AACpB;AAEO,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AACpB;"}

package/dist/components/Card/Card.themes.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("tinycolor2");
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    cardBackground: "white",
+    cardBorder: "$deepBlue3",
+    cardShadow: "rgba(0,0,0,.1)",
+    cardHoverBackground: "rgba(0,0,0,.05)",
+    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),
+    cardActiveBackground: "rgba(0,0,0,.03)",
+    cardActiveBorder: "$primary",
+    cardGhostBackground: "$deepBlue2",
+    innerCardBgColor: tinycolor("black").setAlpha(0.04).toHslString()
+  });
+  Theme2.getDark = (primaryColor) => ({
+    cardBackground: "$deepBlue2",
+    cardBorder: "$deepBlue3",
+    cardShadow: "transparent",
+    cardHoverBackground: "rgba(255,255,255,.12)",
+    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),
+    cardActiveBackground: "rgba(255,255,255,.07)",
+    cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),
+    cardGhostBackground: "$deepBlue1",
+    innerCardBgColor: tinycolor("white").setAlpha(0.07).toHslString()
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Card.themes.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.themes.cjs","sources":["../../../components/Card/Card.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    cardBackground: Property.Color;\n    cardBorder: Property.Color;\n    cardShadow: Property.Color;\n    cardHoverBackground: Property.Color;\n    cardHoverBorder: Property.Color;\n    cardActiveBackground: Property.Color;\n    cardActiveBorder: Property.Color;\n    cardGhostBackground: Property.Color;\n    innerCardBgColor: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    cardBackground: 'white',\n    cardBorder: '$deepBlue3',\n    cardShadow: 'rgba(0,0,0,.1)',\n    cardHoverBackground: 'rgba(0,0,0,.05)',\n    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n    cardActiveBackground: 'rgba(0,0,0,.03)',\n    cardActiveBorder: '$primary',\n    cardGhostBackground: '$deepBlue2',\n    innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    cardBackground: '$deepBlue2',\n    cardBorder: '$deepBlue3',\n    cardShadow: 'transparent',\n    cardHoverBackground: 'rgba(255,255,255,.12)',\n    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n    cardActiveBackground: 'rgba(255,255,255,.07)',\n    cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n    cardGhostBackground: '$deepBlue1',\n    innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n  });\n}\n"],"names":["Theme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAeQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,iBAAiB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC7D,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGrDA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,iBAAiB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC7D,sBAAsB;AAAA,IACtB,kBAAkB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC9D,qBAAqB;AAAA,IACrB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAClE,GArCeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/Card/Card.themes.js

@@ -0,0 +1,30 @@
+import tinycolor from "tinycolor2";
+var Theme;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    cardBackground: "white",
+    cardBorder: "$deepBlue3",
+    cardShadow: "rgba(0,0,0,.1)",
+    cardHoverBackground: "rgba(0,0,0,.05)",
+    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),
+    cardActiveBackground: "rgba(0,0,0,.03)",
+    cardActiveBorder: "$primary",
+    cardGhostBackground: "$deepBlue2",
+    innerCardBgColor: tinycolor("black").setAlpha(0.04).toHslString()
+  });
+  Theme2.getDark = (primaryColor) => ({
+    cardBackground: "$deepBlue2",
+    cardBorder: "$deepBlue3",
+    cardShadow: "transparent",
+    cardHoverBackground: "rgba(255,255,255,.12)",
+    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),
+    cardActiveBackground: "rgba(255,255,255,.07)",
+    cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),
+    cardGhostBackground: "$deepBlue1",
+    innerCardBgColor: tinycolor("white").setAlpha(0.07).toHslString()
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Card.themes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.themes.js","sources":["../../../components/Card/Card.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    cardBackground: Property.Color;\n    cardBorder: Property.Color;\n    cardShadow: Property.Color;\n    cardHoverBackground: Property.Color;\n    cardHoverBorder: Property.Color;\n    cardActiveBackground: Property.Color;\n    cardActiveBorder: Property.Color;\n    cardGhostBackground: Property.Color;\n    innerCardBgColor: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    cardBackground: 'white',\n    cardBorder: '$deepBlue3',\n    cardShadow: 'rgba(0,0,0,.1)',\n    cardHoverBackground: 'rgba(0,0,0,.05)',\n    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n    cardActiveBackground: 'rgba(0,0,0,.03)',\n    cardActiveBorder: '$primary',\n    cardGhostBackground: '$deepBlue2',\n    innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    cardBackground: '$deepBlue2',\n    cardBorder: '$deepBlue3',\n    cardShadow: 'transparent',\n    cardHoverBackground: 'rgba(255,255,255,.12)',\n    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n    cardActiveBackground: 'rgba(255,255,255,.07)',\n    cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n    cardGhostBackground: '$deepBlue1',\n    innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n  });\n}\n"],"names":["Theme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAeQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,iBAAiB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC7D,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGrDA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,iBAAiB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC7D,sBAAsB;AAAA,IACtB,kBAAkB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC9D,qBAAqB;AAAA,IACrB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAClE,GArCe,UAAA,QAAA,CAAA,EAAA;"}

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

@@ -0,0 +1,41 @@
+"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 Card_vanilla_css = require("./Card.vanilla.css.cjs");
+const CardVanilla = React.forwardRef(
+  ({ className, css, style, elevation, variant, active, interactive, ...props }, ref) => {
+    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 });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+CardVanilla.displayName = "CardVanilla";
+exports.CardVanilla = CardVanilla;
+//# sourceMappingURL=Card.vanilla.cjs.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                            */
+;/* empty css                                  */
+const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
+var cardRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
+var interactiveCardRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "kc9sarc kc9sarb kc9sar0", variantClassNames: { elevation: { "0": "kc9sard", "1": "kc9sare", "2": "kc9sarf", "3": "kc9sarg", "4": "kc9sarh", "5": "kc9sari" }, variant: { inner: "kc9sarj", ghost: "kc9sark" }, active: { true: "kc9sarl" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
+exports.cardRecipe = cardRecipe;
+exports.interactiveCardRecipe = interactiveCardRecipe;
+//# sourceMappingURL=Card.vanilla.css.cjs.map

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

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

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

@@ -0,0 +1,10 @@
+/* empty css                                          */
+/* empty css                                */
+import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+var cardRecipe = createRuntimeFn({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
+var interactiveCardRecipe = createRuntimeFn({ defaultClassName: "kc9sarc kc9sarb kc9sar0", variantClassNames: { elevation: { "0": "kc9sard", "1": "kc9sare", "2": "kc9sarf", "3": "kc9sarg", "4": "kc9sarh", "5": "kc9sari" }, variant: { inner: "kc9sarj", ghost: "kc9sark" }, active: { true: "kc9sarl" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
+export {
+  cardRecipe,
+  interactiveCardRecipe
+};
+//# sourceMappingURL=Card.vanilla.css.js.map

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

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

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

@@ -0,0 +1,41 @@
+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 { interactiveCardRecipe, cardRecipe } from "./Card.vanilla.css.js";
+const CardVanilla = forwardRef(
+  ({ className, css, style, elevation, variant, active, interactive, ...props }, ref) => {
+    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 });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+CardVanilla.displayName = "CardVanilla";
+export {
+  CardVanilla
+};
+//# sourceMappingURL=Card.vanilla.js.map

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

@@ -0,0 +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;"}

package/dist/components/Checkbox/Checkbox.cjs

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const CheckboxPrimitive = require("@radix-ui/react-checkbox");
+const reactIcons = require("@radix-ui/react-icons");
+const React = require("react");
+const stitches_config = require("../../stitches.config.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 CheckboxPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CheckboxPrimitive);
+const StyledIndicator = stitches_config.styled(CheckboxPrimitive__namespace.Indicator, {
+  alignItems: "center",
+  display: "flex",
+  height: "100%",
+  justifyContent: "center",
+  width: "100%"
+});
+const StyledCheckbox = stitches_config.styled(CheckboxPrimitive__namespace.Root, {
+  all: "unset",
+  border: "none",
+  boxSizing: "border-box",
+  userSelect: "none",
+  "&::before": {
+    boxSizing: "border-box"
+  },
+  "&::after": {
+    boxSizing: "border-box"
+  },
+  alignItems: "center",
+  appearance: "none",
+  display: "inline-flex",
+  justifyContent: "center",
+  lineHeight: "1",
+  margin: "0",
+  outline: "none",
+  padding: "0",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  overflow: "hidden",
+  "&[data-state=checked]": {
+    backgroundColor: "$checkboxCheckedBg",
+    boxShadow: "inset 0 0 0 1px transparent",
+    color: "$checkboxCheckedIcon",
+    "@hover": {
+      "&:hover": {
+        backgroundColor: "$checkboxCheckedHoverBg"
+      }
+    }
+  },
+  "&[data-state=unchecked]": {
+    backgroundColor: "$checkboxBg",
+    boxShadow: "inset 0 0 0 1px $colors$checkboxBorder",
+    color: "$checkboxIcon",
+    "@hover": {
+      "&:hover": {
+        backgroundColor: "$checkboxHoverBg",
+        boxShadow: "inset 0 0 0 1px $colors$checkboxHoverBorder"
+      }
+    }
+  },
+  "&:focus": {
+    outline: "none",
+    boxShadow: "inset 0 0 0 1px $colors$checkboxFocusBorder"
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    backgroundColor: "$checkboxDisabledBg",
+    boxShadow: "inset 0 0 0 1px $colors$checkboxDisabledBorder",
+    "&::placeholder": {
+      color: "$checkboxDisabledText"
+    },
+    [`& ${StyledIndicator}`]: {
+      "&::after": {
+        backgroundColor: "$checkboxIndicatorDisabledBg"
+      }
+    }
+  },
+  variants: {
+    size: {
+      medium: {
+        width: 18,
+        height: 18,
+        borderRadius: "$2"
+      },
+      large: {
+        width: "$5",
+        height: "$5",
+        borderRadius: "$3"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+const Checkbox = React.forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledCheckbox, { ...props, ref: forwardedRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, { height: 40, width: 40 }) }) });
+  }
+);
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n  alignItems: 'center',\n  display: 'flex',\n  height: '100%',\n  justifyContent: 'center',\n  width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n  all: 'unset',\n  border: 'none',\n  boxSizing: 'border-box',\n  userSelect: 'none',\n  '&::before': {\n    boxSizing: 'border-box',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n  },\n\n  alignItems: 'center',\n  appearance: 'none',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  overflow: 'hidden',\n\n  '&[data-state=checked]': {\n    backgroundColor: '$checkboxCheckedBg',\n    boxShadow: 'inset 0 0 0 1px transparent',\n    color: '$checkboxCheckedIcon',\n\n    '@hover': {\n      '&:hover': {\n        backgroundColor: '$checkboxCheckedHoverBg',\n      },\n    },\n  },\n\n  '&[data-state=unchecked]': {\n    backgroundColor: '$checkboxBg',\n    boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n    color: '$checkboxIcon',\n\n    '@hover': {\n      '&:hover': {\n        backgroundColor: '$checkboxHoverBg',\n        boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n      },\n    },\n  },\n\n  '&:focus': {\n    outline: 'none',\n    boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    backgroundColor: '$checkboxDisabledBg',\n    boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n    '&::placeholder': {\n      color: '$checkboxDisabledText',\n    },\n\n    [`& ${StyledIndicator}`]: {\n      '&::after': {\n        backgroundColor: '$checkboxIndicatorDisabledBg',\n      },\n    },\n  },\n\n  variants: {\n    size: {\n      medium: {\n        width: 18,\n        height: 18,\n        borderRadius: '$2',\n      },\n      large: {\n        width: '$5',\n        height: '$5',\n        borderRadius: '$3',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n  (props, forwardedRef) => {\n    return (\n      <StyledCheckbox {...props} ref={forwardedRef}>\n        <StyledIndicator>\n          <CheckIcon height={40} width={40} />\n        </StyledIndicator>\n      </StyledCheckbox>\n    );\n  }\n);\n"],"names":["styled","CheckboxPrimitive","jsx","CheckIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkBA,gBAAAA,OAAOC,6BAAkB,WAAW;AAAA,EAC1D,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,OAAO;AACT,CAAC;AAED,MAAM,iBAAiBD,gBAAAA,OAAOC,6BAAkB,MAAM;AAAA,EACpD,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAEb,YAAY;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAGb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,yBAAyB;AAAA,EACzB,UAAU;AAAA,EAEV,yBAAyB;AAAA,IACvB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,OAAO;AAAA,IAEP,UAAU;AAAA,MACR,WAAW;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EACF;AAAA,EAGF,2BAA2B;AAAA,IACzB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,OAAO;AAAA,IAEP,UAAU;AAAA,MACR,WAAW;AAAA,QACT,iBAAiB;AAAA,QACjB,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF;AAAA,EAGF,WAAW;AAAA,IACT,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAAA,EAGb,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,kBAAkB;AAAA,MAChB,OAAO;AAAA,IAAA;AAAA,IAGT,CAAC,KAAK,eAAe,EAAE,GAAG;AAAA,MACxB,YAAY;AAAA,QACV,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EACF;AAAA,EAGF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,MAEhB,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAMM,MAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,WACEC,2BAAAA,IAAC,gBAAA,EAAgB,GAAG,OAAO,KAAK,cAC9B,UAAAA,2BAAAA,IAAC,iBAAA,EACC,UAAAA,2BAAAA,IAACC,wBAAU,QAAQ,IAAI,OAAO,GAAA,CAAI,GACpC,GACF;AAAA,EAEJ;AACF;;"}