@traefik-labs/faency 12.2.0 → 12.2.2

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonSwitch.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"ButtonSwitch.vanilla.css.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { tokens } from '../../styles/tokens.css';\n\nexport const buttonSwitchContainer = style({\n  display: 'inline-flex',\n  backgroundColor: tokens.colors.buttonSwitchContainerBg,\n  borderRadius: tokens.radii['3'],\n  padding: '3px',\n  gap: tokens.space['1'],\n});\n\nexport const buttonSwitchItem = style({\n  display: 'inline-flex',\n  backgroundColor: tokens.colors.buttonSwitchOffBg,\n  color: tokens.colors.buttonSwitchOffColor,\n  padding: tokens.space['1'],\n  width: tokens.sizes['10'],\n  justifyContent: 'center',\n  fontWeight: 600,\n  border: 'none',\n  position: 'relative',\n\n  selectors: {\n    '&::before': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      borderRadius: tokens.radii['3'],\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      borderRadius: tokens.radii['3'],\n    },\n    '&:focus-visible': {\n      borderRadius: tokens.radii['3'],\n    },\n    '&:focus-visible::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&:focus-visible::after': {\n      opacity: 0.15,\n    },\n    '&[data-state=on]': {\n      backgroundColor: tokens.colors.buttonSwitchActiveBg,\n      color: tokens.colors.buttonSwitchActiveColor,\n      borderRadius: tokens.radii['3'],\n    },\n  },\n\n  '@media': {\n    '(hover: hover)': {\n      selectors: {\n        '&:hover': {\n          cursor: 'pointer',\n        },\n        '&:hover::before': {\n          backgroundColor: 'rgba(255, 255, 255, 0.15)',\n        },\n        '&:hover::after': {\n          opacity: 0.05,\n        },\n      },\n    },\n  },\n});\n"],"mappings":""}

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

@@ -1,8 +1,8 @@
 /* empty css                                        */
+//#region components/ButtonSwitch/ButtonSwitch.vanilla.css.ts
 var buttonSwitchContainer = "_1mwvsf70";
 var buttonSwitchItem = "_1mwvsf71";
-export {
-  buttonSwitchContainer,
-  buttonSwitchItem
-};
-//# sourceMappingURL=ButtonSwitch.vanilla.css.js.map
+//#endregion
+export { buttonSwitchContainer, buttonSwitchItem };
+
+//# sourceMappingURL=ButtonSwitch.vanilla.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonSwitch.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"ButtonSwitch.vanilla.css.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { tokens } from '../../styles/tokens.css';\n\nexport const buttonSwitchContainer = style({\n  display: 'inline-flex',\n  backgroundColor: tokens.colors.buttonSwitchContainerBg,\n  borderRadius: tokens.radii['3'],\n  padding: '3px',\n  gap: tokens.space['1'],\n});\n\nexport const buttonSwitchItem = style({\n  display: 'inline-flex',\n  backgroundColor: tokens.colors.buttonSwitchOffBg,\n  color: tokens.colors.buttonSwitchOffColor,\n  padding: tokens.space['1'],\n  width: tokens.sizes['10'],\n  justifyContent: 'center',\n  fontWeight: 600,\n  border: 'none',\n  position: 'relative',\n\n  selectors: {\n    '&::before': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      borderRadius: tokens.radii['3'],\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      borderRadius: tokens.radii['3'],\n    },\n    '&:focus-visible': {\n      borderRadius: tokens.radii['3'],\n    },\n    '&:focus-visible::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&:focus-visible::after': {\n      opacity: 0.15,\n    },\n    '&[data-state=on]': {\n      backgroundColor: tokens.colors.buttonSwitchActiveBg,\n      color: tokens.colors.buttonSwitchActiveColor,\n      borderRadius: tokens.radii['3'],\n    },\n  },\n\n  '@media': {\n    '(hover: hover)': {\n      selectors: {\n        '&:hover': {\n          cursor: 'pointer',\n        },\n        '&:hover::before': {\n          backgroundColor: 'rgba(255, 255, 255, 0.15)',\n        },\n        '&:hover::after': {\n          opacity: 0.05,\n        },\n      },\n    },\n  },\n});\n"],"mappings":""}

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

@@ -1,86 +1,66 @@
-import { jsx } from "react/jsx-runtime";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef } from "react";
 import { processCSSProp } from "../../styles/cssProps.js";
 import { useVanillaExtractTheme } from "../../styles/themeContext.js";
 import { buttonSwitchContainer, buttonSwitchItem } from "./ButtonSwitch.vanilla.css.js";
-const ButtonSwitchContainerVanillaImpl = forwardRef(
-  ({ as, className, css, style, children, ...props }, ref) => {
-    const Component = as || "div";
-    const { colors } = useVanillaExtractTheme();
-    const { style: cssStyles, vars } = processCSSProp(css, colors);
-    const mergedStyles = {
-      ...cssStyles,
-      ...style,
-      ...assignInlineVars(vars)
-    };
-    if (as) {
-      return /* @__PURE__ */ jsx(
-        Component,
-        {
-          ref,
-          className: `${buttonSwitchContainer} ${className || ""}`.trim(),
-          style: mergedStyles,
-          role: "group",
-          ...props,
-          children
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      ToggleGroupPrimitive.Root,
-      {
-        ref,
-        className: `${buttonSwitchContainer} ${className || ""}`.trim(),
-        style: mergedStyles,
-        ...props,
-        children
-      }
-    );
-  }
-);
+import { forwardRef } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx } from "react/jsx-runtime";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+//#region components/ButtonSwitch/ButtonSwitch.vanilla.tsx
+var ButtonSwitchContainerVanillaImpl = forwardRef(({ as, className, css, style, children, ...props }, ref) => {
+	const Component = as || "div";
+	const { colors } = useVanillaExtractTheme();
+	const { style: cssStyles, vars } = processCSSProp(css, colors);
+	const mergedStyles = {
+		...cssStyles,
+		...style,
+		...assignInlineVars(vars)
+	};
+	if (as) return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: `${buttonSwitchContainer} ${className || ""}`.trim(),
+		style: mergedStyles,
+		role: "group",
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, {
+		ref,
+		className: `${buttonSwitchContainer} ${className || ""}`.trim(),
+		style: mergedStyles,
+		...props,
+		children
+	});
+});
 ButtonSwitchContainerVanillaImpl.displayName = "ButtonSwitchContainerVanilla";
-const ButtonSwitchContainerVanilla = ButtonSwitchContainerVanillaImpl;
-const ButtonSwitchItemVanillaImpl = forwardRef(
-  ({ as, className, css, style, children, ...props }, ref) => {
-    const Component = as || "button";
-    const { colors } = useVanillaExtractTheme();
-    const { style: cssStyles, vars } = processCSSProp(css, colors);
-    const mergedStyles = {
-      ...cssStyles,
-      ...style,
-      ...assignInlineVars(vars)
-    };
-    if (as) {
-      return /* @__PURE__ */ jsx(
-        Component,
-        {
-          ref,
-          className: `${buttonSwitchItem} ${className || ""}`.trim(),
-          style: mergedStyles,
-          role: "radio",
-          ...props,
-          children
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      ToggleGroupPrimitive.Item,
-      {
-        ref,
-        className: `${buttonSwitchItem} ${className || ""}`.trim(),
-        style: mergedStyles,
-        ...props,
-        children
-      }
-    );
-  }
-);
+var ButtonSwitchContainerVanilla = ButtonSwitchContainerVanillaImpl;
+var ButtonSwitchItemVanillaImpl = forwardRef(({ as, className, css, style, children, ...props }, ref) => {
+	const Component = as || "button";
+	const { colors } = useVanillaExtractTheme();
+	const { style: cssStyles, vars } = processCSSProp(css, colors);
+	const mergedStyles = {
+		...cssStyles,
+		...style,
+		...assignInlineVars(vars)
+	};
+	if (as) return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: `${buttonSwitchItem} ${className || ""}`.trim(),
+		style: mergedStyles,
+		role: "radio",
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
+		ref,
+		className: `${buttonSwitchItem} ${className || ""}`.trim(),
+		style: mergedStyles,
+		...props,
+		children
+	});
+});
 ButtonSwitchItemVanillaImpl.displayName = "ButtonSwitchItemVanilla";
-const ButtonSwitchItemVanilla = ButtonSwitchItemVanillaImpl;
-export {
-  ButtonSwitchContainerVanilla,
-  ButtonSwitchItemVanilla
-};
-//# sourceMappingURL=ButtonSwitch.vanilla.js.map
+var ButtonSwitchItemVanilla = ButtonSwitchItemVanillaImpl;
+//#endregion
+export { ButtonSwitchContainerVanilla, ButtonSwitchItemVanilla };
+
+//# sourceMappingURL=ButtonSwitch.vanilla.js.map

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 { 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;"}
+{"version":3,"file":"ButtonSwitch.vanilla.js","names":[],"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"],"mappings":";;;;;;;;AAkCA,IAAM,mCAAmC,YAErC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;AAED,KAAI,GACF,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;AAIhB,QACE,oBAAC,qBAAqB,MAAtB;EACO;EACL,WAAW,GAAG,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,iCAAiC,cAAc;AAE/C,IAAa,+BACX;AAgBF,IAAM,8BAA8B,YAEhC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;AAED,KAAI,GACF,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;AAIhB,QACE,oBAAC,qBAAqB,MAAtB;EACO;EACL,WAAW,GAAG,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,4BAA4B,cAAc;AAE1C,IAAa,0BACX"}

package/dist/components/Card/Card.cjs

@@ -1,101 +1,80 @@
-"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 require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_stitches_config = require("../../stitches.config.cjs");
+const require_Elevation = require("../Elevation/Elevation.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region components/Card/Card.tsx
+var StyledCard = require_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: require_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"
-    }
-  }
+var StyledInteractiveCard = require_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
-      }
-    );
-  }
-);
+var Card = react.default.forwardRef(({ interactive, ...props }, forwardedRef) => {
+	if (interactive) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledInteractiveCard, {
+		tabIndex: 0,
+		ref: forwardedRef,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCard, {
+		ref: forwardedRef,
+		...props
+	});
+});
+//#endregion
 exports.Card = Card;
-//# sourceMappingURL=Card.cjs.map
+
+//# sourceMappingURL=Card.cjs.map

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

@@ -1 +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;;"}
+{"version":3,"file":"Card.cjs","names":[],"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"],"mappings":";;;;;;;AAKA,IAAM,aAAa,wBAAA,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,WAAW,kBAAA;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,qBAClB;GACD,OAAO;IACL,iBAAiB;IACjB,WAAW;IACZ;GACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB,EACF,EACF;EACF;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,wBAAwB,wBAAA,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB;EACF,EACF;CACD,WAAW,EACT,SAAS,sBACV;CACD,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;EAClB,EACF;CACF,CAAC;AAYF,IAAa,OAAO,MAAA,QAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;AAC3C,KAAI,YACF,QACE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;EACE,UAAU;EACV,KAAK;EACL,GAAK;EACL,CAAA;AAGN,QACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,KAAK;EACL,GAAK;EACL,CAAA;EAGP"}

package/dist/components/Card/Card.js

@@ -1,101 +1,78 @@
-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
-  }
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region components/Card/Card.tsx
+var 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 }
+});
+var 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 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"
-    }
-  }
+var Card = React.forwardRef(({ interactive, ...props }, forwardedRef) => {
+	if (interactive) return /* @__PURE__ */ jsx(StyledInteractiveCard, {
+		tabIndex: 0,
+		ref: forwardedRef,
+		...props
+	});
+	return /* @__PURE__ */ jsx(StyledCard, {
+		ref: forwardedRef,
+		...props
+	});
 });
-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
+//#endregion
+export { Card };
+
+//# sourceMappingURL=Card.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"Card.js","names":[],"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"],"mappings":";;;;;AAKA,IAAM,aAAa,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,WAAW;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,qBAClB;GACD,OAAO;IACL,iBAAiB;IACjB,WAAW;IACZ;GACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB,EACF,EACF;EACF;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,wBAAwB,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB;EACF,EACF;CACD,WAAW,EACT,SAAS,sBACV;CACD,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;EAClB,EACF;CACF,CAAC;AAYF,IAAa,OAAO,MAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;AAC3C,KAAI,YACF,QACE,oBAAC,uBAAD;EACE,UAAU;EACV,KAAK;EACL,GAAK;EACL,CAAA;AAGN,QACE,oBAAC,YAAD;EACE,KAAK;EACL,GAAK;EACL,CAAA;EAGP"}