@traefik-labs/faency 12.2.1 → 12.2.3

package/dist/components/Button/Button.js

@@ -1,296 +1,237 @@
+import { keyframes, styled } from "../../stitches.config.js";
+import React, { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-import React, { useMemo } from "react";
-import { styled, keyframes } from "../../stitches.config.js";
-const BUTTON_BASE_STYLES = {
-  appearance: "none",
-  userSelect: "none",
-  boxSizing: "border-box",
-  border: "none",
-  WebkitTapHighlightColor: "rgba(0,0,0,0)",
-  "&:disabled": {
-    pointerEvents: "none",
-    opacity: 0.5
-  }
+//#region components/Button/Button.tsx
+var BUTTON_BASE_STYLES = {
+	appearance: "none",
+	userSelect: "none",
+	boxSizing: "border-box",
+	border: "none",
+	WebkitTapHighlightColor: "rgba(0,0,0,0)",
+	"&:disabled": {
+		pointerEvents: "none",
+		opacity: .5
+	}
 };
-const BG_SIZES = {
-  small: "$sizes$8",
-  medium: "$sizes$9",
-  large: "$sizes$10"
+var BG_SIZES = {
+	small: "$sizes$8",
+	medium: "$sizes$9",
+	large: "$sizes$10"
 };
-const backgroundSizeAnimation = (size) => ({
-  $$bgSize: BG_SIZES[size],
-  backgroundSize: "$$bgSize",
-  backgroundImage: `linear-gradient(
+var backgroundSizeAnimation = (size) => ({
+	$$bgSize: BG_SIZES[size],
+	backgroundSize: "$$bgSize",
+	backgroundImage: `linear-gradient(
             -45deg,
             transparent 33%,
             $colors$deepBlue4 33%,
             $colors$deepBlue4 66%,
             transparent 66%
           )`,
-  animation: `${keyframes({
-    "100%": { transform: "translateX($$bgSize)" }
-  })} 500ms linear infinite`
+	animation: `${keyframes({ "100%": { transform: "translateX($$bgSize)" } })} 500ms linear infinite`
 });
-const StyledButton = styled("button", BUTTON_BASE_STYLES, {
-  // Reset
-  all: "unset",
-  alignItems: "center",
-  overflow: "hidden",
-  "&::before": {
-    boxSizing: "border-box",
-    content: '""',
-    position: "absolute",
-    inset: 0
-  },
-  "&::after": {
-    boxSizing: "border-box",
-    content: '""',
-    position: "absolute",
-    inset: 0
-  },
-  // Custom reset?
-  display: "inline-flex",
-  flexShrink: 0,
-  justifyContent: "center",
-  lineHeight: "1",
-  // Custom
-  position: "relative",
-  height: "$5",
-  px: "$2",
-  fontFamily: "$rubik",
-  fontSize: "$3",
-  fontWeight: "$medium",
-  fontVariantNumeric: "tabular-nums",
-  "&:focus-visible": {
-    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,
-    "&::before": {
-      backgroundColor: "rgba(255, 255, 255, 0.15)"
-    },
-    "&::after": {
-      opacity: 0.15
-    }
-  },
-  "@hover": {
-    "&:hover": {
-      cursor: "pointer",
-      "&::before": {
-        backgroundColor: "rgba(255, 255, 255, 0.15)"
-      },
-      "&::after": {
-        opacity: 0.05
-      }
-    }
-  },
-  "&:active": {
-    "&::before": {
-      backgroundColor: "rgba(0, 0, 0, 0.15)"
-    }
-  },
-  variants: {
-    size: {
-      small: {
-        borderRadius: "$3",
-        height: "$5",
-        px: "$2",
-        fontSize: "$1",
-        lineHeight: "$sizes$5"
-      },
-      medium: {
-        borderRadius: "$3",
-        height: "$6",
-        px: "$3",
-        fontSize: "$3",
-        lineHeight: "$sizes$6"
-      },
-      large: {
-        borderRadius: "$3",
-        height: "$7",
-        px: "$3",
-        fontSize: "$3",
-        lineHeight: "$sizes$7"
-      }
-    },
-    variant: {
-      primary: {
-        bc: "$buttonPrimaryBg",
-        c: "$buttonPrimaryText",
-        "&:focus-visible": {
-          boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
-        },
-        "@hover": {
-          "&:hover": {
-            "&::after": {
-              backgroundColor: "$buttonPrimaryBg"
-            }
-          }
-        }
-      },
-      secondary: {
-        bc: "$buttonSecondaryBg",
-        c: "$buttonSecondaryText",
-        boxShadow: "inset 0 0 0 2px $colors$buttonSecondaryBorder",
-        "&:active": {
-          boxShadow: "inset 0 0 0 1px $colors$buttonSecondaryBorder"
-        },
-        "&:focus-visible": {
-          boxShadow: "inset 0 0 0 2px $colors$buttonSecondaryFocusBorder"
-        },
-        "@hover": {
-          "&:hover": {
-            "&::after": {
-              backgroundColor: "$buttonPrimaryBg"
-            }
-          }
-        }
-      },
-      red: {
-        backgroundColor: "$buttonRedBg",
-        color: "$buttonRedText",
-        "&:focus-visible": {
-          boxShadow: "inset 0 0 0 2px $colors$buttonRedFocusBg"
-        }
-      }
-    },
-    state: {
-      active: {
-        bc: "$deepBlue5",
-        c: "$deepBlue11",
-        "&:active": {
-          backgroundColor: "$deepBlue5"
-        }
-      },
-      waiting: {
-        bc: "$deepBlue3",
-        boxShadow: `inset 0 0 0 1px $deepBlue4`,
-        c: "transparent",
-        overflow: "hidden",
-        pointerEvents: "none",
-        "&::after": {
-          left: "-100%",
-          width: "200%",
-          ...backgroundSizeAnimation("medium")
-        }
-      }
-    },
-    ghost: {
-      true: {
-        boxShadow: "none",
-        "@hover": {
-          "&:hover": {
-            boxShadow: "none"
-          }
-        }
-      }
-    },
-    rounded: {
-      true: {
-        borderRadius: "$pill"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "primary",
-      ghost: "true",
-      css: {
-        color: "$buttonPrimaryBg",
-        backgroundColor: "transparent",
-        "@hover": {
-          "&:hover": {
-            color: "$buttonPrimaryGhostHoverText",
-            backgroundColor: "transparent"
-          }
-        }
-      }
-    },
-    {
-      variant: "primary",
-      state: "active",
-      css: {
-        backgroundColor: "$buttonPrimaryFocusBg",
-        color: "$buttonPrimaryText",
-        boxShadow: "inset 0 0 0 2px white"
-      }
-    },
-    {
-      variant: "secondary",
-      state: "waiting",
-      css: {
-        backgroundColor: "$deepBlue3",
-        color: "transparent"
-      }
-    },
-    {
-      variant: "secondary",
-      ghost: true,
-      css: {
-        backgroundColor: "transparent",
-        color: "$buttonSecondaryText",
-        boxShadow: "none"
-      }
-    },
-    {
-      variant: "red",
-      state: "waiting",
-      css: {
-        backgroundColor: "$deepBlue3",
-        color: "transparent"
-      }
-    },
-    {
-      variant: "red",
-      state: "active",
-      css: {
-        backgroundColor: "$buttonRedFocusBg",
-        color: "$buttonRedText",
-        boxShadow: "inset 0 0 0 2px white"
-      }
-    },
-    {
-      variant: "red",
-      ghost: "true",
-      css: {
-        color: "$buttonRedBg",
-        backgroundColor: "transparent",
-        "@hover": {
-          "&:hover": {
-            color: "$buttonRedHoverText",
-            backgroundColor: "transparent"
-          }
-        }
-      }
-    },
-    {
-      size: "small",
-      state: "waiting",
-      css: {
-        "&::after": backgroundSizeAnimation("small")
-      }
-    },
-    {
-      size: "large",
-      state: "waiting",
-      css: {
-        "&::after": backgroundSizeAnimation("large")
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "medium",
-    variant: "primary"
-  }
+var StyledButton = styled("button", BUTTON_BASE_STYLES, {
+	all: "unset",
+	alignItems: "center",
+	overflow: "hidden",
+	"&::before": {
+		boxSizing: "border-box",
+		content: "\"\"",
+		position: "absolute",
+		inset: 0
+	},
+	"&::after": {
+		boxSizing: "border-box",
+		content: "\"\"",
+		position: "absolute",
+		inset: 0
+	},
+	display: "inline-flex",
+	flexShrink: 0,
+	justifyContent: "center",
+	lineHeight: "1",
+	position: "relative",
+	height: "$5",
+	px: "$2",
+	fontFamily: "$rubik",
+	fontSize: "$3",
+	fontWeight: "$medium",
+	fontVariantNumeric: "tabular-nums",
+	"&:focus-visible": {
+		boxShadow: `inset 0 0 0 2px $colors$focusOutline`,
+		"&::before": { backgroundColor: "rgba(255, 255, 255, 0.15)" },
+		"&::after": { opacity: .15 }
+	},
+	"@hover": { "&:hover": {
+		cursor: "pointer",
+		"&::before": { backgroundColor: "rgba(255, 255, 255, 0.15)" },
+		"&::after": { opacity: .05 }
+	} },
+	"&:active": { "&::before": { backgroundColor: "rgba(0, 0, 0, 0.15)" } },
+	variants: {
+		size: {
+			small: {
+				borderRadius: "$3",
+				height: "$5",
+				px: "$2",
+				fontSize: "$1",
+				lineHeight: "$sizes$5"
+			},
+			medium: {
+				borderRadius: "$3",
+				height: "$6",
+				px: "$3",
+				fontSize: "$3",
+				lineHeight: "$sizes$6"
+			},
+			large: {
+				borderRadius: "$3",
+				height: "$7",
+				px: "$3",
+				fontSize: "$3",
+				lineHeight: "$sizes$7"
+			}
+		},
+		variant: {
+			primary: {
+				bc: "$buttonPrimaryBg",
+				c: "$buttonPrimaryText",
+				"&:focus-visible": { boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder" },
+				"@hover": { "&:hover": { "&::after": { backgroundColor: "$buttonPrimaryBg" } } }
+			},
+			secondary: {
+				bc: "$buttonSecondaryBg",
+				c: "$buttonSecondaryText",
+				boxShadow: "inset 0 0 0 2px $colors$buttonSecondaryBorder",
+				"&:active": { boxShadow: "inset 0 0 0 1px $colors$buttonSecondaryBorder" },
+				"&:focus-visible": { boxShadow: "inset 0 0 0 2px $colors$buttonSecondaryFocusBorder" },
+				"@hover": { "&:hover": { "&::after": { backgroundColor: "$buttonPrimaryBg" } } }
+			},
+			red: {
+				backgroundColor: "$buttonRedBg",
+				color: "$buttonRedText",
+				"&:focus-visible": { boxShadow: "inset 0 0 0 2px $colors$buttonRedFocusBg" }
+			}
+		},
+		state: {
+			active: {
+				bc: "$deepBlue5",
+				c: "$deepBlue11",
+				"&:active": { backgroundColor: "$deepBlue5" }
+			},
+			waiting: {
+				bc: "$deepBlue3",
+				boxShadow: `inset 0 0 0 1px $deepBlue4`,
+				c: "transparent",
+				overflow: "hidden",
+				pointerEvents: "none",
+				"&::after": {
+					left: "-100%",
+					width: "200%",
+					...backgroundSizeAnimation("medium")
+				}
+			}
+		},
+		ghost: { true: {
+			boxShadow: "none",
+			"@hover": { "&:hover": { boxShadow: "none" } }
+		} },
+		rounded: { true: { borderRadius: "$pill" } }
+	},
+	compoundVariants: [
+		{
+			variant: "primary",
+			ghost: "true",
+			css: {
+				color: "$buttonPrimaryBg",
+				backgroundColor: "transparent",
+				"@hover": { "&:hover": {
+					color: "$buttonPrimaryGhostHoverText",
+					backgroundColor: "transparent"
+				} }
+			}
+		},
+		{
+			variant: "primary",
+			state: "active",
+			css: {
+				backgroundColor: "$buttonPrimaryFocusBg",
+				color: "$buttonPrimaryText",
+				boxShadow: "inset 0 0 0 2px white"
+			}
+		},
+		{
+			variant: "secondary",
+			state: "waiting",
+			css: {
+				backgroundColor: "$deepBlue3",
+				color: "transparent"
+			}
+		},
+		{
+			variant: "secondary",
+			ghost: true,
+			css: {
+				backgroundColor: "transparent",
+				color: "$buttonSecondaryText",
+				boxShadow: "none"
+			}
+		},
+		{
+			variant: "red",
+			state: "waiting",
+			css: {
+				backgroundColor: "$deepBlue3",
+				color: "transparent"
+			}
+		},
+		{
+			variant: "red",
+			state: "active",
+			css: {
+				backgroundColor: "$buttonRedFocusBg",
+				color: "$buttonRedText",
+				boxShadow: "inset 0 0 0 2px white"
+			}
+		},
+		{
+			variant: "red",
+			ghost: "true",
+			css: {
+				color: "$buttonRedBg",
+				backgroundColor: "transparent",
+				"@hover": { "&:hover": {
+					color: "$buttonRedHoverText",
+					backgroundColor: "transparent"
+				} }
+			}
+		},
+		{
+			size: "small",
+			state: "waiting",
+			css: { "&::after": backgroundSizeAnimation("small") }
+		},
+		{
+			size: "large",
+			state: "waiting",
+			css: { "&::after": backgroundSizeAnimation("large") }
+		}
+	],
+	defaultVariants: {
+		size: "medium",
+		variant: "primary"
+	}
 });
-const StyledButtonSlot = styled(Slot, StyledButton);
-const Button = React.forwardRef(
-  ({ children, asChild, ...props }, forwardedRef) => {
-    const Component = useMemo(() => asChild ? StyledButtonSlot : StyledButton, [asChild]);
-    return /* @__PURE__ */ jsx(Component, { ref: forwardedRef, ...props, children });
-  }
-);
-export {
-  BUTTON_BASE_STYLES,
-  Button,
-  StyledButton
-};
-//# sourceMappingURL=Button.js.map
+var StyledButtonSlot = styled(Slot, StyledButton);
+var Button = React.forwardRef(({ children, asChild, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx(useMemo(() => asChild ? StyledButtonSlot : StyledButton, [asChild]), {
+		ref: forwardedRef,
+		...props,
+		children
+	});
+});
+//#endregion
+export { BUTTON_BASE_STYLES, Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\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  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$3',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$3',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$3',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n        boxShadow: 'none',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\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  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$3',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$3',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$3',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n        boxShadow: 'none',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n"],"mappings":"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"}