@livepeer/design-system 0.0.0-beta.0

package/dist/index.es.js

@@ -0,0 +1,2270 @@
+import { createTheme, styled, keyframes, TabsTrigger as TabsTrigger$1, TabsList as TabsList$1, TabsContent as TabsContent$1, Text as Text$1, Box, Select as Select$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuRadioItem as DropdownMenuRadioItem$1, DropdownMenuCheckboxItem as DropdownMenuCheckboxItem$1, Switch as Switch$1 } from '@modulz/design-system';
+export { Alert, AspectRatio, Avatar, AvatarGroup, AvatarNestedItem, Box, Checkbox, Code, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuTrigger, ControlGroup, DesignSystemProvider, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuTrigger, Flex, Grid, Heading, IconButton, Image, Kbd, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, Overlay, Panel, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, Portal, ProgressBar, Radio, RadioCardGroup, RadioGroup, Section, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, SimpleToggle, Skeleton, Slider, Status, Sub, Sup, TabLink, Tabs, TextArea, Tooltip, TreeItem, VerifiedBadge, css, getCssText, globalCss, keyframes, styled } from '@modulz/design-system';
+import { __assign, __rest, __spreadArray } from 'tslib';
+import React, { createContext, useState, useContext } from 'react';
+import { gray, mauve, slate, sage, olive, sand, tomato, red, crimson, pink, plum, purple, violet, indigo, blue, sky, mint, cyan, teal, green, grass, lime, yellow, amber, orange, brown, bronze, gold, whiteA, blackA, grayDark, mauveDark, slateDark, sageDark, oliveDark, sandDark, tomatoDark, redDark, crimsonDark, pinkDark, plumDark, purpleDark, violetDark, indigoDark, blueDark, skyDark, mintDark, cyanDark, tealDark, greenDark, grassDark, limeDark, yellowDark, amberDark, orangeDark, brownDark, bronzeDark, goldDark } from '@radix-ui/colors';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronRightIcon } from '@radix-ui/react-icons';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as BaseLabel from '@radix-ui/react-label';
+import { CSSTransition } from 'react-transition-group';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+export { Arrow as HoverCardArrow, Content as HoverCardContent, Root as HoverCardRoot, Trigger as HoverCardTrigger } from '@radix-ui/react-hover-card';
+export { AccessibleIcon } from '@radix-ui/react-accessible-icon';
+export { Corner as ScrollAreaCorner, Root as ScrollAreaRoot, Scrollbar as ScrollAreaScrollbar, Thumb as ScrollAreaThumb, Viewport as ScrollAreaViewport } from '@radix-ui/react-scroll-area';
+
+var fonts = {
+    body: "Inter, -apple-system, system-ui, sans-serif",
+    mono: "menlo, monospace",
+};
+var lightThemeColors = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, gray), mauve), slate), sage), olive), sand), tomato), red), crimson), pink), plum), purple), violet), indigo), blue), sky), mint), cyan), teal), green), grass), lime), yellow), amber), orange), brown), bronze), gold), whiteA), blackA);
+var darkThemeColors = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, grayDark), mauveDark), slateDark), sageDark), oliveDark), sandDark), tomatoDark), redDark), crimsonDark), pinkDark), plumDark), purpleDark), violetDark), indigoDark), blueDark), skyDark), mintDark), cyanDark), tealDark), greenDark), grassDark), limeDark), yellowDark), amberDark), orangeDark), brownDark), bronzeDark), goldDark), whiteA), blackA);
+var naturalPairings = {
+    tomato: "mauve",
+    red: "mauve",
+    crimson: "mauve",
+    pink: "mauve",
+    plum: "mauve",
+    purple: "mauve",
+    violet: "mauve",
+    indigo: "slate",
+    blue: "slate",
+    sky: "slate",
+    cyan: "slate",
+    teal: "sage",
+    mint: "sage",
+    green: "sage",
+    grass: "olive",
+    lime: "olive",
+    yellow: "sand",
+    amber: "sand",
+    orange: "sand",
+    brown: "sand",
+};
+function getThemes() {
+    var themes = {};
+    for (var _i = 0, _a = Object.entries(naturalPairings); _i < _a.length; _i++) {
+        var _b = _a[_i], primary = _b[0], neutral = _b[1];
+        themes["light-theme-".concat(primary)] = createTheme("light-theme-".concat(primary), {
+            colors: __assign(__assign({}, lightThemeColors), { 
+                // Semantic colors
+                primary1: "$".concat(primary, "1"), primary2: "$".concat(primary, "2"), primary3: "$".concat(primary, "3"), primary4: "$".concat(primary, "4"), primary5: "$".concat(primary, "5"), primary6: "$".concat(primary, "6"), primary7: "$".concat(primary, "7"), primary8: "$".concat(primary, "8"), primary9: "$".concat(primary, "9"), primary10: "$".concat(primary, "10"), primary11: "$".concat(primary, "11"), primary12: "$".concat(primary, "12"), neutral1: "$".concat(neutral, "1"), neutral2: "$".concat(neutral, "2"), neutral3: "$".concat(neutral, "3"), neutral4: "$".concat(neutral, "4"), neutral5: "$".concat(neutral, "5"), neutral6: "$".concat(neutral, "6"), neutral7: "$".concat(neutral, "7"), neutral8: "$".concat(neutral, "8"), neutral9: "$".concat(neutral, "9"), neutral10: "$".concat(neutral, "10"), neutral11: "$".concat(neutral, "11"), neutral12: "$".concat(neutral, "12"), hiContrast: "$".concat(neutral, "12"), loContrast: "$whiteA12", canvas: "hsl(0 0% 93%)", panel: "$".concat(neutral, "2"), transparentPanel: "hsl(0 0% 0% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
+            fonts: fonts,
+        });
+        themes["dark-theme-".concat(primary)] = createTheme("dark-theme-".concat(primary), {
+            colors: __assign(__assign({}, darkThemeColors), { 
+                // Semantic colors
+                primary1: "$".concat(primary, "1"), primary2: "$".concat(primary, "2"), primary3: "$".concat(primary, "3"), primary4: "$".concat(primary, "4"), primary5: "$".concat(primary, "5"), primary6: "$".concat(primary, "6"), primary7: "$".concat(primary, "7"), primary8: "$".concat(primary, "8"), primary9: "$".concat(primary, "9"), primary10: "$".concat(primary, "10"), primary11: "$".concat(primary, "11"), primary12: "$".concat(primary, "12"), neutral1: "$".concat(neutral, "1"), neutral2: "$".concat(neutral, "2"), neutral3: "$".concat(neutral, "3"), neutral4: "$".concat(neutral, "4"), neutral5: "$".concat(neutral, "5"), neutral6: "$".concat(neutral, "6"), neutral7: "$".concat(neutral, "7"), neutral8: "$".concat(neutral, "8"), neutral9: "$".concat(neutral, "9"), neutral10: "$".concat(neutral, "10"), neutral11: "$".concat(neutral, "11"), neutral12: "$".concat(neutral, "12"), hiContrast: "$".concat(neutral, "12"), loContrast: "$".concat(neutral, "1"), canvas: "hsl(0 0% 15%)", panel: "$".concat(neutral, "2"), transparentPanel: "hsl(0 100% 100% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
+            fonts: fonts,
+        });
+    }
+    return themes;
+}
+var themes = getThemes();
+
+var _a$3;
+var StyledAccordion = styled(AccordionPrimitive.Root, {
+    boxShadow: "0 0 0 1px $colors$neutral6",
+    borderRadius: "$1",
+});
+var StyledPanel = styled(AccordionPrimitive.Content, {
+    pt: "$0",
+    pb: "$5",
+    px: "$7",
+    backgroundColor: "$neutral2",
+});
+var StyledButton = styled(AccordionPrimitive.Trigger, {
+    all: "unset",
+    boxSizing: "border-box",
+    userSelect: "none",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    display: "flex",
+    alignItems: "center",
+    px: "$3",
+    py: "$4",
+    color: "$hiContrast",
+    width: "100%",
+    "@hover": {
+        "&:hover": {
+            backgroundColor: "$neutral2",
+        },
+    },
+    "&:focus": {
+        outline: "none",
+    },
+    svg: {
+        mr: "$3",
+        transition: "transform 175ms cubic-bezier(0.65, 0, 0.35, 1)",
+    },
+    '&[data-state="open"]': {
+        backgroundColor: "$neutral2",
+        svg: {
+            transform: "rotate(90deg)",
+        },
+    },
+});
+var StyledItem = styled(AccordionPrimitive.Item, (_a$3 = {
+        // borderBottom: "1px solid $colors$neutral6",
+        "&:last-of-type": {
+            borderBottom: 0,
+        }
+    },
+    _a$3["&:first-of-type ".concat(StyledPanel)] = {
+        borderTopRightRadius: "$1",
+        borderTopLeftRadius: "$1",
+    },
+    _a$3["&:last-of-type ".concat(StyledPanel)] = {
+        borderBottomRightRadius: "$1",
+        borderBottomLeftRadius: "$1",
+    },
+    _a$3["&:first-of-type ".concat(StyledButton)] = {
+        borderTopRightRadius: "$1",
+        borderTopLeftRadius: "$1",
+    },
+    _a$3["&:last-of-type ".concat(StyledButton)] = {
+        borderBottomRightRadius: "$1",
+        borderBottomLeftRadius: "$1",
+    },
+    _a$3));
+var StyledHeader = styled(AccordionPrimitive.Header, {
+    all: "unset",
+});
+var AccordionButton = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledHeader, null,
+        React.createElement(StyledButton, __assign({}, props, { ref: forwardedRef }),
+            React.createElement(ChevronRightIcon, null),
+            children)));
+});
+var Accordion = StyledAccordion;
+var AccordionItem = StyledItem;
+var AccordionPanel = StyledPanel;
+
+var fadeIn$1 = keyframes({
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+});
+var scaleIn$1 = keyframes({
+    from: { transform: "translate(-50%, -50%) scale(0.9)" },
+    to: { transform: "translate(-50%, -50%) scale(1)" },
+});
+var fadeout$1 = keyframes({
+    from: { opacity: 1 },
+    to: { opacity: 0 },
+});
+var StyledOverlay$1 = styled(DialogPrimitive.Overlay, {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: "rgba(0,0,0,.35)",
+    inset: 0,
+    variants: {
+        animation: {
+            true: {
+                '&[data-state="open"]': {
+                    animation: "".concat(fadeIn$1, " 300ms ease-out"),
+                },
+                '&[data-state="closed"]': {
+                    animation: "".concat(fadeout$1, " 200ms ease-out"),
+                },
+            },
+        },
+    },
+});
+function Dialog(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(DialogPrimitive.Root, __assign({}, props),
+        React.createElement(StyledOverlay$1, { animation: true }),
+        children));
+}
+var StyledDialogContent = styled(DialogPrimitive.Content, {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    maxHeight: "85vh",
+    padding: "$4",
+    marginTop: "-5vh",
+    backgroundColor: "$panel",
+    borderRadius: "$4",
+    boxShadow: "$colors$shadowLight 0px 10px 38px -10px, $colors$shadowDark 0px 10px 20px -15px",
+    color: "$black",
+    "&:focus": {
+        outline: "none",
+    },
+    variants: {
+        animation: {
+            fade: {
+                '&[data-state="open"]': {
+                    animation: "".concat(fadeIn$1, " 300ms ease-out"),
+                },
+                '&[data-state="closed"]': {
+                    animation: "".concat(fadeout$1, " 200ms ease-out"),
+                },
+            },
+            scale: {
+                animation: "".concat(fadeIn$1, " 300ms ease-out, ").concat(scaleIn$1, " 200ms ease-out"),
+            },
+        },
+    },
+    defaultVariants: {
+        animation: "scale",
+    },
+});
+var DialogContent = function (_a) {
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = __rest(_a, ["children", "animation"]);
+    return (React.createElement(StyledDialogContent, __assign({ animation: animation }, props), children));
+};
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogTitle = DialogPrimitive.Title;
+var DialogDescription = DialogPrimitive.Description;
+var DialogClose = DialogPrimitive.Close;
+
+var TabsTrigger = styled(TabsTrigger$1, {
+    color: "$neutral11",
+    bc: "transparent",
+    '&[data-state="active"]': {
+        borderColor: "$neutral6",
+    },
+    '&[data-orientation="vertical"]': {
+        '&[data-state="active"]': {
+            color: "$hiContrast",
+            borderColor: "$neutral6",
+            borderBottomColor: "transparent",
+        },
+    },
+    '&[data-orientation="horizontal"]': {
+        '&[data-state="active"]': {
+            color: "$hiContrast",
+            borderColor: "$neutral6",
+            borderBottomColor: "transparent",
+        },
+    },
+});
+var TabsList = styled(TabsList$1, {
+    "&:focus": {
+        boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
+    },
+    '&[data-orientation="vertical"]': {
+        boxShadow: "inset -1px 0 0 $neutral6",
+    },
+});
+var TabsContent = styled(TabsContent$1, {
+    "&:focus": {
+        boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
+    },
+});
+
+var fadeIn = keyframes({
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+});
+var scaleIn = keyframes({
+    from: { transform: "translate(-50%, -50%) scale(0.9)" },
+    to: { transform: "translate(-50%, -50%) scale(1)" },
+});
+var fadeout = keyframes({
+    from: { opacity: 1 },
+    to: { opacity: 0 },
+});
+var StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: "rgba(0,0,0,.35)",
+    inset: 0,
+    variants: {
+        animation: {
+            true: {
+                '&[data-state="open"]': {
+                    animation: "".concat(fadeIn, " 300ms ease-out"),
+                },
+                '&[data-state="closed"]': {
+                    animation: "".concat(fadeout, " 200ms ease-out"),
+                },
+            },
+        },
+    },
+});
+function AlertDialog(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(AlertDialogPrimitive.Root, __assign({}, props),
+        React.createElement(StyledOverlay, { animation: true }),
+        children));
+}
+var StyledAlertDialogContent = styled(AlertDialogPrimitive.Content, {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    maxHeight: "85vh",
+    padding: "$4",
+    marginTop: "-5vh",
+    backgroundColor: "$panel",
+    borderRadius: "$4",
+    boxShadow: "$colors$shadowLight 0px 10px 38px -10px, $colors$shadowDark 0px 10px 20px -15px",
+    color: "$black",
+    "&:focus": {
+        outline: "none",
+    },
+    variants: {
+        animation: {
+            fade: {
+                '&[data-state="open"]': {
+                    animation: "".concat(fadeIn, " 300ms ease-out"),
+                },
+                '&[data-state="closed"]': {
+                    animation: "".concat(fadeout, " 200ms ease-out"),
+                },
+            },
+            scale: {
+                animation: "".concat(fadeIn, " 300ms ease-out, ").concat(scaleIn, " 200ms ease-out"),
+            },
+        },
+    },
+    defaultVariants: {
+        animation: "scale",
+    },
+});
+var AlertDialogContent = function (_a) {
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = __rest(_a, ["children", "animation"]);
+    return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props), children));
+};
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogTitle = AlertDialogPrimitive.Title;
+var AlertDialogDescription = AlertDialogPrimitive.Description;
+var AlertDialogCancel = AlertDialogPrimitive.Cancel;
+var AlertDialogAction = AlertDialogPrimitive.Action;
+
+var DEFAULT_TAG$5 = "button";
+var colorVariants = {};
+var compoundVariants = [];
+for (var color$1 in naturalPairings) {
+    colorVariants[color$1] = {
+        bc: "$".concat(color$1, "4"),
+        color: "$".concat(color$1, "11"),
+        "&:hover": { bc: "$".concat(color$1, "5") },
+        "&:active": { bc: "$".concat(color$1, "6") },
+        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+            bc: "$".concat(color$1, "4"),
+            boxShadow: "inset 0 0 0 1px $colors$".concat(color$1, "8"),
+        },
+    };
+    compoundVariants.push({
+        variant: color$1,
+        ghost: "true",
+        css: {
+            bc: "transparent",
+            "&:hover": {
+                bc: "$".concat(color$1, "3"),
+                boxShadow: "none",
+            },
+            "&:active": {
+                bc: "$".concat(color$1, "4"),
+            },
+            '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                bc: "$".concat(color$1, "4"),
+                boxShadow: "none",
+            },
+        },
+    });
+}
+var Button = styled(DEFAULT_TAG$5, {
+    // Reset
+    all: "unset",
+    alignItems: "center",
+    boxSizing: "border-box",
+    userSelect: "none",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    // Custom reset?
+    display: "inline-flex",
+    flexShrink: 0,
+    justifyContent: "center",
+    lineHeight: "1",
+    WebkitTapHighlightColor: "rgba(0,0,0,0)",
+    // Custom
+    height: "$5",
+    fontFamily: "$body",
+    fontSize: "$2",
+    fontWeight: 600,
+    fontVariantNumeric: "tabular-nums",
+    ai: "center",
+    cursor: "pointer",
+    px: "$3",
+    bc: "$neutral4",
+    borderRadius: "$2",
+    "&:hover": { bc: "$neutral5" },
+    "&:active": { bc: "$neutral6" },
+    "&:disabled": {
+        bc: "$neutral2",
+        color: "$neutral8",
+        cursor: "not-allowed",
+    },
+    variants: {
+        size: {
+            "1": {
+                borderRadius: "$2",
+                height: "$5",
+                px: "$2",
+                fontSize: "$1",
+                lineHeight: "$sizes$5",
+            },
+            "2": {
+                borderRadius: "$3",
+                height: "$5",
+                px: "$3",
+                py: "$3",
+                fontSize: "$2",
+                lineHeight: "$sizes$6",
+            },
+            "3": {
+                borderRadius: "$3",
+                height: "$6",
+                px: "$3",
+                fontSize: "$3",
+                lineHeight: "$sizes$6",
+            },
+            "4": {
+                borderRadius: "$4",
+                height: "$7",
+                px: "$4",
+                fontSize: "$4",
+                lineHeight: "$sizes$7",
+            },
+        },
+        variant: __assign(__assign({ primary: {
+                bc: "$primary4",
+                color: "$primary11",
+                "&:hover": { bc: "$primary5" },
+                "&:active": { bc: "$primary6" },
+                "&:disabled": {
+                    bc: "$primary2",
+                    color: "$primary8",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    bc: "$primary4",
+                    boxShadow: "inset 0 0 0 1px $colors$primary8",
+                },
+            }, neutral: {
+                bc: "$neutral4",
+                color: "$neutral11",
+                "&:hover": { bc: "$neutral5" },
+                "&:active": { bc: "$neutral6" },
+                "&:disabled": {
+                    bc: "$neutral4",
+                    color: "$neutral8",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    bc: "$neutral4",
+                    boxShadow: "inset 0 0 0 1px $colors$primary8",
+                },
+            } }, colorVariants), { transparentWhite: {
+                bc: "hsla(0,100%,100%,.2)",
+                color: "white",
+                "&:hover": {
+                    bc: "hsla(0,100%,100%,.25)",
+                },
+                "&:active": {
+                    bc: "hsla(0,100%,100%,.3)",
+                },
+                "&:disabled": {
+                    bc: "hsla(0,100%,100%,.2)",
+                    color: "white",
+                    opacity: 0.4,
+                },
+            }, transparentBlack: {
+                bc: "hsla(0,0%,0%,.2)",
+                color: "black",
+                "&:hover": {
+                    bc: "hsla(0,0%,0%,.25)",
+                },
+                "&:active": {
+                    bc: "hsla(0,0%,0%,.3)",
+                },
+            } }),
+        ghost: {
+            true: {
+                bc: "transparent",
+                boxShadow: "none",
+            },
+        },
+    },
+    compoundVariants: __spreadArray([
+        {
+            variant: "primary",
+            ghost: "true",
+            css: {
+                bc: "transparent",
+                "&:hover": {
+                    bc: "$primary3",
+                    boxShadow: "none",
+                },
+                "&:active": {
+                    bc: "$primary4",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    bc: "$primary4",
+                    boxShadow: "none",
+                },
+            },
+        },
+        {
+            variant: "neutral",
+            ghost: "true",
+            css: {
+                bc: "transparent",
+                color: "$neutral11",
+                "&:hover": {
+                    bc: "$neutral3",
+                    boxShadow: "none",
+                },
+                "&:active": {
+                    bc: "$neutral4",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    bc: "$neutral4",
+                    boxShadow: "none",
+                },
+            },
+        }
+    ], compoundVariants, true),
+    defaultVariants: {
+        size: "1",
+        variant: "neutral",
+    },
+});
+
+var _a$2;
+var DEFAULT_TAG$4 = "a";
+var Link = styled(DEFAULT_TAG$4, (_a$2 = {
+        alignItems: "center",
+        gap: "$1",
+        flexShrink: 0,
+        outline: "none",
+        textDecorationLine: "none",
+        textUnderlineOffset: "3px",
+        textDecorationColor: "$neutral4",
+        WebkitTapHighlightColor: "rgba(0,0,0,0)",
+        lineHeight: "inherit",
+        "@hover": {
+            "&:hover": {
+                textDecorationLine: "underline",
+            },
+        },
+        "&:focus": {
+            outline: "none",
+            textDecorationLine: "none",
+        }
+    },
+    _a$2["& ".concat(Text$1)] = {
+        color: "inherit",
+    },
+    _a$2.variants = {
+        variant: {
+            blue: {
+                color: "$blue11",
+                textDecorationColor: "$blue4",
+                "&:focus": {
+                    outlineColor: "$blue8",
+                },
+            },
+            indigo: {
+                color: "$indigo11",
+                textDecorationColor: "$indigo4",
+                "&:focus": {
+                    outlineColor: "$indigo8",
+                },
+            },
+            primary: {
+                color: "$primary11",
+                textDecorationColor: "$primary4",
+                "&:focus": {
+                    outlineColor: "$primary8",
+                },
+            },
+            subtle: {
+                color: "$neutral11",
+                textDecorationColor: "$neutral4",
+                "&:focus": {
+                    outlineColor: "$neutral8",
+                },
+            },
+            contrast: {
+                color: "$hiContrast",
+                textDecoration: "underline",
+                textDecorationColor: "$neutral4",
+                "@hover": {
+                    "&:hover": {
+                        textDecorationColor: "$neutral7",
+                    },
+                },
+                "&:focus": {
+                    outlineColor: "$neutral8",
+                },
+            },
+        },
+    },
+    _a$2.defaultVariants = {
+        variant: "contrast",
+    },
+    _a$2));
+
+var DEFAULT_TAG$3 = Box;
+var Banner = styled(DEFAULT_TAG$3, {
+    // Reset
+    boxSizing: "border-box",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "$3",
+    variants: {
+        size: {
+            "1": {
+                py: "$1",
+                px: "$4",
+            },
+        },
+        variant: {
+            loContrast: {
+                backgroundColor: "$loContrast",
+            },
+            gray: {
+                backgroundColor: "$neutral3",
+            },
+            blue: {
+                backgroundColor: "$blue3",
+            },
+            green: {
+                backgroundColor: "$green3",
+            },
+            indigo: {
+                backgroundColor: "$indigo3",
+            },
+            violet: {
+                backgroundColor: "$violet3",
+            },
+            red: {
+                backgroundColor: "$red3",
+            },
+        },
+        rounded: {
+            true: {
+                borderRadius: "$pill",
+            },
+        },
+        border: {
+            true: {
+                borderRadius: "$pill",
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            border: "true",
+            variant: "gray",
+            css: {
+                borderColor: "$neutral6",
+            },
+        },
+        {
+            border: "true",
+            variant: "blue",
+            css: {
+                borderColor: "$blue9",
+            },
+        },
+        {
+            border: "true",
+            variant: "indigo",
+            css: {
+                borderColor: "$indigo9",
+            },
+        },
+        {
+            border: "true",
+            variant: "violet",
+            css: {
+                borderColor: "$violet9",
+            },
+        },
+        {
+            border: "true",
+            variant: "loContrast",
+            css: {
+                borderColor: "$neutral6",
+            },
+        },
+    ],
+    defaultVariants: {
+        size: "1",
+        variant: "gray",
+    },
+});
+
+var DEFAULT_TAG$2 = "div";
+var Promo = styled(DEFAULT_TAG$2, {
+    // Reset
+    boxSizing: "border-box",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    p: "$4",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: "$4",
+    variants: {
+        size: {
+            "1": {
+                py: "$2",
+                px: "$3",
+            },
+            "2": {
+                py: "$3",
+                px: "$4",
+            },
+            "3": {
+                py: "$4",
+                px: "$5",
+            },
+        },
+        variant: {
+            loContrast: {
+                backgroundColor: "$loContrast",
+            },
+            subtle: {
+                backgroundColor: "$neutral2",
+                boxShadow: "0 0 0 1px $colors$neutral6",
+            },
+            blue: {
+                backgroundColor: "$blue2",
+                boxShadow: "0 0 0 1px $colors$blue6",
+            },
+            green: {
+                backgroundColor: "$green2",
+                boxShadow: "0 0 0 1px $colors$green6",
+            },
+            indigo: {
+                backgroundColor: "$indigo2",
+                boxShadow: "0 0 0 1px $colors$indigo6",
+            },
+            violet: {
+                backgroundColor: "$violet2",
+                boxShadow: "0 0 0 1px $colors$violet6",
+            },
+            red: {
+                backgroundColor: "$red2",
+                boxShadow: "0 0 0 1px $colors$red6",
+            },
+        },
+        rounded: {
+            true: {
+                borderRadius: "$pill",
+            },
+        },
+        border: {
+            true: {
+                borderRadius: "$pill",
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            border: "true",
+            variant: "subtle",
+            css: {
+                borderColor: "$neutral6",
+            },
+        },
+        {
+            border: "true",
+            variant: "blue",
+            css: {
+                borderColor: "$blue11",
+            },
+        },
+        {
+            border: "true",
+            variant: "indigo",
+            css: {
+                borderColor: "$indigo11",
+            },
+        },
+        {
+            border: "true",
+            variant: "violet",
+            css: {
+                borderColor: "$violet11",
+            },
+        },
+        {
+            border: "true",
+            variant: "loContrast",
+            css: {
+                borderColor: "$neutral6",
+            },
+        },
+    ],
+    defaultVariants: {
+        size: "1",
+        variant: "subtle",
+    },
+});
+
+var Label = styled(BaseLabel.Root, {
+    fontSize: "$2",
+});
+
+var DEFAULT_TAG$1 = "span";
+var Text = styled(DEFAULT_TAG$1, {
+    // Reset
+    lineHeight: 1.5,
+    margin: "0",
+    fontWeight: 400,
+    fontVariantNumeric: "tabular-nums",
+    display: "block",
+    variants: {
+        size: {
+            "1": {
+                fontSize: "$1",
+            },
+            "2": {
+                fontSize: "$2",
+            },
+            "3": {
+                fontSize: "$3",
+            },
+            "4": {
+                fontSize: "$4",
+            },
+            "5": {
+                fontSize: "$5",
+                letterSpacing: "-.015em",
+            },
+            "6": {
+                fontSize: "$6",
+                letterSpacing: "-.016em",
+            },
+            "7": {
+                fontSize: "$7",
+                letterSpacing: "-.031em",
+                textIndent: "-.005em",
+            },
+            "8": {
+                fontSize: "$8",
+                letterSpacing: "-.034em",
+                textIndent: "-.018em",
+            },
+            "9": {
+                fontSize: "$9",
+                letterSpacing: "-.055em",
+                textIndent: "-.025em",
+            },
+        },
+        variant: {
+            red: {
+                color: "$red11",
+            },
+            crimson: {
+                color: "$crimson11",
+            },
+            pink: {
+                color: "$pink11",
+            },
+            purple: {
+                color: "$purple11",
+            },
+            violet: {
+                color: "$violet11",
+            },
+            indigo: {
+                color: "$indigo11",
+            },
+            blue: {
+                color: "$blue11",
+            },
+            cyan: {
+                color: "$cyan11",
+            },
+            teal: {
+                color: "$teal11",
+            },
+            green: {
+                color: "$green11",
+            },
+            lime: {
+                color: "$lime11",
+            },
+            yellow: {
+                color: "$yellow11",
+            },
+            orange: {
+                color: "$orange11",
+            },
+            gold: {
+                color: "$gold11",
+            },
+            bronze: {
+                color: "$bronze11",
+            },
+            gray: {
+                color: "$slate11",
+            },
+            primary: {
+                color: "$primary11",
+            },
+            neutral: {
+                color: "$neutral11",
+            },
+            contrast: {
+                color: "$hiContrast",
+            },
+        },
+        gradient: {
+            true: {
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "red",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $red11, $crimson11)",
+            },
+        },
+        {
+            variant: "crimson",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $crimson11, $pink11)",
+            },
+        },
+        {
+            variant: "pink",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $pink11, $purple11)",
+            },
+        },
+        {
+            variant: "purple",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $purple11, $violet11)",
+            },
+        },
+        {
+            variant: "violet",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $violet11, $indigo11)",
+            },
+        },
+        {
+            variant: "indigo",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $indigo11, $blue11)",
+            },
+        },
+        {
+            variant: "blue",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $blue11, $cyan11)",
+            },
+        },
+        {
+            variant: "cyan",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $cyan11, $teal11)",
+            },
+        },
+        {
+            variant: "teal",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $teal11, $green11)",
+            },
+        },
+        {
+            variant: "green",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $green11, $lime11)",
+            },
+        },
+        {
+            variant: "lime",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $lime11, $yellow11)",
+            },
+        },
+        {
+            variant: "yellow",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $yellow11, $orange11)",
+            },
+        },
+        {
+            variant: "orange",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $orange11, $red11)",
+            },
+        },
+        {
+            variant: "gold",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $gold11, $gold9)",
+            },
+        },
+        {
+            variant: "bronze",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $bronze11, $bronze9)",
+            },
+        },
+        {
+            variant: "gray",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $gray11, $gray12)",
+            },
+        },
+        {
+            variant: "contrast",
+            gradient: "true",
+            css: {
+                background: "linear-gradient(to right, $hiContrast, $gray12)",
+            },
+        },
+    ],
+    defaultVariants: {
+        size: "3",
+        variant: "contrast",
+    },
+});
+
+var DEFAULT_TAG = "input";
+var StyledTextField = styled(DEFAULT_TAG, {
+    // Reset
+    appearance: "none",
+    borderWidth: "0",
+    boxSizing: "border-box",
+    fontFamily: "inherit",
+    margin: "0",
+    outline: "none",
+    padding: "0",
+    width: "100%",
+    WebkitTapHighlightColor: "rgba(0,0,0,0)",
+    lineHeight: "1",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    // Custom
+    backgroundColor: "$loContrast",
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    color: "$hiContrast",
+    fontVariantNumeric: "tabular-nums",
+    "&:-webkit-autofill": {
+        boxShadow: "inset 0 0 0 1px $colors$primary6, inset 0 0 0 100px $colors$primary3",
+    },
+    "&:-webkit-autofill::first-line": {
+        fontFamily: "$body",
+        color: "$hiContrast",
+    },
+    "&:focus": {
+        boxShadow: "inset 0px 0px 0px 1px $colors$primary8, 0px 0px 0px 1px $colors$primary8",
+        "&:-webkit-autofill": {
+            boxShadow: "inset 0px 0px 0px 1px $colors$primary8, 0px 0px 0px 1px $colors$primary8, inset 0 0 0 100px $colors$primary3",
+        },
+    },
+    "&::placeholder": {
+        color: "$neutral9",
+    },
+    "&:disabled": {
+        pointerEvents: "none",
+        backgroundColor: "$neutral2",
+        color: "$neutral8",
+        cursor: "not-allowed",
+        "&::placeholder": {
+            color: "$neutral7",
+        },
+    },
+    "&:read-only": {
+        backgroundColor: "$neutral2",
+        "&:focus": {
+            boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
+        },
+    },
+    variants: {
+        size: {
+            "1": {
+                borderRadius: "$1",
+                height: "$5",
+                fontSize: "$1",
+                px: "$1",
+                "&:-webkit-autofill::first-line": {
+                    fontSize: "$1",
+                },
+            },
+            "2": {
+                borderRadius: "$2",
+                height: "$6",
+                fontSize: "$3",
+                px: "$2",
+                "&:-webkit-autofill::first-line": {
+                    fontSize: "$3",
+                },
+            },
+            "3": {
+                borderRadius: "$2",
+                height: "$7",
+                fontSize: "$3",
+                px: "$2",
+                "&:-webkit-autofill::first-line": {
+                    fontSize: "$3",
+                },
+            },
+        },
+        variant: {
+            ghost: {
+                boxShadow: "none",
+                backgroundColor: "transparent",
+                "@hover": {
+                    "&:hover": {
+                        boxShadow: "inset 0 0 0 1px $colors$neutralA7",
+                    },
+                },
+                "&:focus": {
+                    backgroundColor: "$loContrast",
+                    boxShadow: "inset 0px 0px 0px 1px $colors$primary8, 0px 0px 0px 1px $colors$primary8",
+                },
+                "&:disabled": {
+                    backgroundColor: "transparent",
+                },
+                "&:read-only": {
+                    backgroundColor: "transparent",
+                },
+            },
+            white: {
+                boxShadow: "inset 0 0 0 1px $colors$neutral7",
+                backgroundColor: "white",
+                "@hover": {
+                    "&:hover": {
+                        boxShadow: "inset 0 0 0 1px $colors$neutralA7",
+                    },
+                },
+                "&:focus": {
+                    backgroundColor: "white",
+                    boxShadow: "inset 0px 0px 0px 1px $colors$primary8, 0px 0px 0px 1px $colors$primary8",
+                },
+                "&::placeholder": {
+                    color: "$neutral9",
+                },
+                "&:disabled": {
+                    pointerEvents: "none",
+                    backgroundColor: "$neutral2",
+                    color: "$neutral8",
+                    cursor: "not-allowed",
+                    "&::placeholder": {
+                        color: "$neutral7",
+                    },
+                },
+                "&:read-only": {
+                    backgroundColor: "$neutral2",
+                    "&:focus": {
+                        boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
+                    },
+                },
+            },
+        },
+        state: {
+            invalid: {
+                boxShadow: "inset 0 0 0 1px $colors$red7",
+                "&:focus": {
+                    boxShadow: "inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
+                },
+            },
+            valid: {
+                boxShadow: "inset 0 0 0 1px $colors$green7",
+                "&:focus": {
+                    boxShadow: "inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
+                },
+            },
+        },
+        cursor: {
+            default: {
+                cursor: "default",
+                "&:focus": {
+                    cursor: "text",
+                },
+            },
+            text: {
+                cursor: "text",
+            },
+        },
+    },
+    defaultVariants: {
+        size: "1",
+    },
+});
+var TextField = StyledTextField;
+
+var Select = styled(Select$1, {
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+});
+
+var Card = styled("div", {
+    appearance: "none",
+    border: "none",
+    boxSizing: "border-box",
+    font: "inherit",
+    lineHeight: "1",
+    outline: "none",
+    padding: 0,
+    textAlign: "inherit",
+    verticalAlign: "middle",
+    WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+    backgroundColor: "$panel",
+    display: "block",
+    textDecoration: "none",
+    color: "inherit",
+    flexShrink: 0,
+    borderRadius: "$3",
+    position: "relative",
+    "&::before": {
+        boxSizing: "border-box",
+        content: '""',
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        boxShadow: "inset 0 0 0 1px rgba(0,0,0,.1)",
+        borderRadius: "$3",
+        pointerEvents: "none",
+    },
+    variants: {
+        variant: {
+            interactive: {
+                "@hover": {
+                    "&:hover": {
+                        "&::before": {
+                            boxShadow: "inset 0 0 0 1px rgba(0,0,0,.2)",
+                        },
+                    },
+                },
+                "&:focus": {
+                    "&::before": {
+                        boxShadow: "inset 0 0 0 1px $colors$primary8, 0 0 0 1px $colors$primary8",
+                    },
+                },
+            },
+            ghost: {
+                backgroundColor: "transparent",
+                transition: "transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 25ms linear",
+                willChange: "transform",
+                "&::before": {
+                    boxShadow: "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+                    opacity: "0",
+                    transition: "all 200ms cubic-bezier(0.22, 1, 0.36, 1)",
+                },
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$panel",
+                        transform: "translateY(-2px)",
+                        "&::before": {
+                            opacity: "1",
+                        },
+                    },
+                },
+                "&:active": {
+                    transform: "translateY(0)",
+                    transition: "none",
+                    "&::before": {
+                        boxShadow: "0px 5px 16px -5px rgba(22, 23, 24, 0.35), 0px 5px 10px -7px rgba(22, 23, 24, 0.2)",
+                        opacity: "1",
+                    },
+                },
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$primary8, 0 0 0 1px $colors$primary8",
+                },
+            },
+            active: {
+                transform: "translateY(0)",
+                transition: "none",
+                "&::before": {
+                    boxShadow: "0px 5px 16px -5px rgba(22, 23, 24, 0.35), 0px 5px 10px -7px rgba(22, 23, 24, 0.2)",
+                    opacity: "1",
+                },
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$primary8, 0 0 0 1px $colors$primary8",
+                },
+            },
+        },
+    },
+});
+
+var Badge = styled("span", {
+    // Reset
+    alignItems: "center",
+    appearance: "none",
+    borderWidth: "0",
+    boxSizing: "border-box",
+    display: "inline-flex",
+    flexShrink: 0,
+    fontFamily: "inherit",
+    justifyContent: "center",
+    lineHeight: "1",
+    verticalAlign: "middle",
+    outline: "none",
+    padding: "0",
+    textDecoration: "none",
+    userSelect: "none",
+    WebkitTapHighlightColor: "rgba(0,0,0,0)",
+    "&:disabled": {
+        backgroundColor: "$slate3",
+        pointerEvents: "none",
+        color: "$slate8",
+    },
+    "&::before": {
+        boxSizing: "border-box",
+        content: '""',
+    },
+    "&::after": {
+        boxSizing: "border-box",
+        content: '""',
+    },
+    // Custom
+    backgroundColor: "$slate3",
+    borderRadius: "$pill",
+    color: "$slate11",
+    whiteSpace: "nowrap",
+    fontVariantNumeric: "tabular-nums",
+    variants: {
+        size: {
+            "1": {
+                height: "$4",
+                px: "$1",
+                fontSize: "$1",
+            },
+            "2": {
+                height: "$5",
+                px: "$2",
+                fontSize: "$2",
+            },
+        },
+        variant: {
+            neutral: {
+                backgroundColor: "$neutral3",
+                color: "$neutral11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+                },
+            },
+            primary: {
+                backgroundColor: "$primary3",
+                color: "$primary11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$primary8, 0 0 0 1px $colors$primary8",
+                },
+            },
+            gray: {
+                backgroundColor: "$slate3",
+                color: "$slate11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
+                },
+            },
+            red: {
+                backgroundColor: "$red3",
+                color: "$red11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$red8, 0 0 0 1px $colors$red8",
+                },
+            },
+            crimson: {
+                backgroundColor: "$crimson3",
+                color: "$crimson11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$crimson8, 0 0 0 1px $colors$crimson8",
+                },
+            },
+            pink: {
+                backgroundColor: "$pink3",
+                color: "$pink11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$pink8, 0 0 0 1px $colors$pink8",
+                },
+            },
+            purple: {
+                backgroundColor: "$purple3",
+                color: "$purple11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$purple8, 0 0 0 1px $colors$purple8",
+                },
+            },
+            violet: {
+                backgroundColor: "$violet3",
+                color: "$violet11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$violet8, 0 0 0 1px $colors$violet8",
+                },
+            },
+            indigo: {
+                backgroundColor: "$indigo3",
+                color: "$indigo11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$indigo8, 0 0 0 1px $colors$indigo8",
+                },
+            },
+            blue: {
+                backgroundColor: "$blue3",
+                color: "$blue11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8",
+                },
+            },
+            cyan: {
+                backgroundColor: "$cyan3",
+                color: "$cyan11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$cyan8, 0 0 0 1px $colors$cyan8",
+                },
+            },
+            teal: {
+                backgroundColor: "$teal3",
+                color: "$teal11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$teal8, 0 0 0 1px $colors$teal8",
+                },
+            },
+            green: {
+                backgroundColor: "$green3",
+                color: "$green11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$green8, 0 0 0 1px $colors$green8",
+                },
+            },
+            lime: {
+                backgroundColor: "$lime3",
+                color: "$lime11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$lime8, 0 0 0 1px $colors$lime8",
+                },
+            },
+            yellow: {
+                backgroundColor: "$yellow3",
+                color: "$yellow11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$yellow8, 0 0 0 1px $colors$yellow8",
+                },
+            },
+            orange: {
+                backgroundColor: "$orange3",
+                color: "$orange11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$orange8, 0 0 0 1px $colors$orange8",
+                },
+            },
+            gold: {
+                backgroundColor: "$gold3",
+                color: "$gold11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$gold8, 0 0 0 1px $colors$gold8",
+                },
+            },
+            bronze: {
+                backgroundColor: "$bronze3",
+                color: "$bronze11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$bronze8, 0 0 0 1px $colors$bronze8",
+                },
+            },
+        },
+        interactive: {
+            true: {},
+        },
+    },
+    compoundVariants: [
+        {
+            interactive: true,
+            variant: "red",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$red4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$red5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$red5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "crimson",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$crimson4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$crimson5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$crimson5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "pink",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$pink4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$pink5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$pink5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "purple",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$purple4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$purple5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$purple5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "violet",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$violet4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$violet5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$violet5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "indigo",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$indigo4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$indigo5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$indigo5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "blue",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$blue4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$blue5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$blue5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "cyan",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$cyan4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$cyan5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$cyan5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "teal",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$teal4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$teal5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$teal5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "green",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$green4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$green5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$green5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "lime",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$lime4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$lime5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$lime5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "yellow",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$yellow4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$yellow5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$yellow5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "orange",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$orange4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$orange5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$orange5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "gold",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$gold4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$gold5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$gold5",
+                },
+            },
+        },
+        {
+            interactive: true,
+            variant: "bronze",
+            css: {
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$bronze4",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$bronze5",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$bronze5",
+                },
+            },
+        },
+    ],
+    defaultVariants: {
+        size: "1",
+        variant: "neutral",
+    },
+});
+
+var colorVairants = {};
+for (var color in naturalPairings) {
+    colorVairants[color] = {
+        "&:focus": {
+            outline: "none",
+            backgroundColor: "$".concat(color, "4"),
+            color: "$hiContrast",
+        },
+    };
+}
+var DropdownMenuItem = styled(DropdownMenuItem$1, {
+    variants: {
+        color: __assign({ primary: {
+                "&:focus": {
+                    outline: "none",
+                    backgroundColor: "$primary4",
+                    color: "$hiContrast",
+                },
+            } }, colorVairants),
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+var DropdownMenuRadioItem = styled(DropdownMenuRadioItem$1, {
+    variants: {
+        color: __assign({ primary: {
+                "&:focus": {
+                    outline: "none",
+                    backgroundColor: "$primary4",
+                    color: "$hiContrast",
+                },
+            } }, colorVairants),
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItem$1, {
+    variants: {
+        color: __assign({ primary: {
+                "&:focus": {
+                    outline: "none",
+                    backgroundColor: "$primary4",
+                    color: "$hiContrast",
+                },
+            } }, colorVairants),
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+
+var transitionStyles = {
+    ".snackbar-enter": {
+        opacity: 0,
+    },
+    ".snackbar-exit-active": {
+        opacity: 0,
+    },
+    ".snackbar-enter-active": {
+        opacity: 1,
+    },
+    ".snackbar-enter-top-center": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-enter-top-right": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-left": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-center": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-right": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-enter-bottom-left": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-bottom-center": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-bottom-right": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-left": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-center": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-right": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-active-top-left": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-top-center": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-top-right": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-left": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-center": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-right": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-wrapper-top-left": {
+        justifyContent: "flex-start",
+        top: "8px",
+    },
+    ".snackbar-wrapper-top-center": {
+        top: "8px",
+        justifyContent: "center",
+    },
+    ".snackbar-wrapper-top-right": {
+        top: "8px",
+        justifyContent: "flex-end",
+    },
+    ".snackbar-wrapper-bottom-left": {
+        bottom: "8px",
+        justifyContent: "flex-start",
+    },
+    ".snackbar-wrapper-bottom-center": {
+        bottom: "8px",
+        justifyContent: "center",
+    },
+    ".snackbar-wrapper-bottom-right": {
+        bottom: "8px",
+        justifyContent: "flex-end",
+    },
+};
+
+// Snackbar default values
+var defaultPosition = "bottom-center";
+var defaultDuration = 5000;
+var defaultInterval = 250;
+var positions = [
+    "top-left",
+    "top-center",
+    "top-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right",
+];
+// Context used by the hook useSnackbar() and HoC withSnackbar()
+var SnackbarContext = createContext({});
+var SnackbarProvider = function (_a) {
+    var children = _a.children;
+    // Current open state
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    // Current timeout ID
+    var _c = useState(null), timeoutId = _c[0], setTimeoutId = _c[1];
+    // Snackbar's text
+    var _d = useState(""), text = _d[0], setText = _d[1];
+    // Snackbar's duration
+    var _e = useState(defaultDuration), duration = _e[0], setDuration = _e[1];
+    // Snackbar's position
+    var _f = useState(defaultPosition), position = _f[0], setPosition = _f[1];
+    // Custom styles for the snackbar itself
+    var _g = useState({}), customStyles = _g[0], setCustomStyles = _g[1];
+    // Custom styles for the close button
+    var _h = useState({}), closeCustomStyles = _h[0], setCloseCustomStyles = _h[1];
+    var triggerSnackbar = function (text, duration, position, style, closeStyle) {
+        setText(text);
+        setDuration(duration);
+        setPosition(position);
+        setCustomStyles(style);
+        setCloseCustomStyles(closeStyle);
+        setOpen(true);
+    };
+    // Manages all the snackbar's opening process
+    var openSnackbar = function (text, duration, position, style, closeStyle) {
+        // Closes the snackbar if it is already open
+        if (open === true) {
+            setOpen(false);
+            setTimeout(function () {
+                triggerSnackbar(text, duration, position, style, closeStyle);
+            }, defaultInterval);
+        }
+        else {
+            triggerSnackbar(text, duration, position, style, closeStyle);
+        }
+    };
+    // Closes the snackbar just by setting the "open" state to false
+    var closeSnackbar = function () {
+        setOpen(false);
+    };
+    // Returns the Provider that must wrap the application
+    return (React.createElement(SnackbarContext.Provider, { value: { openSnackbar: openSnackbar, closeSnackbar: closeSnackbar } },
+        children,
+        React.createElement(Box, { css: transitionStyles },
+            React.createElement(CSSTransition, { in: open, timeout: 150, mountOnEnter: true, unmountOnExit: true, 
+                // Sets timeout to close the snackbar
+                onEnter: function () {
+                    // @ts-ignore
+                    clearTimeout(timeoutId);
+                    // @ts-ignore
+                    setTimeoutId(setTimeout(function () { return setOpen(false); }, duration));
+                }, 
+                // Sets custom classNames based on "position"
+                className: "snackbar-wrapper-".concat(position), classNames: {
+                    enter: "snackbar-enter snackbar-enter-".concat(position),
+                    enterActive: "snackbar-enter-active snackbar-enter-active-".concat(position),
+                    exitActive: "snackbar-exit-active snackbar-exit-active-".concat(position),
+                } },
+                React.createElement(Box, { css: {
+                        display: "flex",
+                        alignItems: "center",
+                        margin: "8px",
+                        position: "fixed",
+                        right: "0",
+                        left: "0",
+                        zIndex: "1",
+                        transition: "opacity 150ms, transform 150ms",
+                        pointerEvents: "none",
+                        justifyContent: "center",
+                        bottom: "8px",
+                    } },
+                    React.createElement(Box, { css: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-start",
+                            borderRadius: "4px",
+                            minWidth: "334px",
+                            maxWidth: "672px",
+                            zIndex: 1000000,
+                            backgroundColor: "$panel",
+                            boxShadow: "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12)",
+                            WebkitFontSmoothing: "antialiased",
+                            MozOsxFontSmoothing: "grayscale",
+                            fontFamily: "sans-serif",
+                            fontSize: "14px",
+                            fontWeight: "400",
+                            color: "$hiContrast",
+                            letterSpacing: "0.25px",
+                            lineHeight: "20px",
+                            textAlign: "left",
+                        }, style: customStyles },
+                        React.createElement(Box, { css: {
+                                flexGrow: 1,
+                                padding: "14px 16px",
+                                margin: "0",
+                                pointerEvents: "auto",
+                                color: "$hiContrast",
+                            } }, text),
+                        React.createElement(Box, { as: "button", css: {
+                                lexShrink: "0",
+                                boxSizing: "border-box",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: "36px",
+                                height: "36px",
+                                padding: "8px",
+                                margin: "0 8px 0 0",
+                                cursor: "pointer",
+                                position: "relative",
+                                pointerEvents: "auto",
+                                WebkitTapHighlightColor: "transparent",
+                                /* Reset button styles */
+                                outline: "none",
+                                backgroundColor: "transparent",
+                                border: "none",
+                                /* SVG icon properties */
+                                fontSize: "12px",
+                                color: "$hiContrast",
+                                "&:hover:before": {
+                                    opacity: "0.08",
+                                },
+                                "&:before": {
+                                    content: '""',
+                                    backgroundColor: "$hiContrast",
+                                    borderRadius: "50%",
+                                    opacity: "0",
+                                    position: "absolute",
+                                    transition: "opacity 120ms linear",
+                                    top: "0%",
+                                    left: "0%",
+                                    width: "100%",
+                                    height: "100%",
+                                },
+                            }, onClick: closeSnackbar, style: closeCustomStyles },
+                            React.createElement(CloseIcon, null))))))));
+};
+// CloseIcon SVG is styled with font properties
+var CloseIcon = function () { return (React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 12" },
+    React.createElement("path", { fill: "currentColor", d: "M11.73 1.58L7.31 6l4.42 4.42-1.06 1.06-4.42-4.42-4.42 4.42-1.06-1.06L5.19 6 .77 1.58 1.83.52l4.42 4.42L10.67.52z", fillRule: "evenodd" }))); };
+
+// Custom hook to trigger the snackbar on function components
+var useSnackbar = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.position, position = _c === void 0 ? defaultPosition : _c, _d = _b.style, style = _d === void 0 ? {} : _d, _e = _b.closeStyle, closeStyle = _e === void 0 ? {} : _e;
+    var _f = useContext(SnackbarContext), openSnackbar = _f.openSnackbar, closeSnackbar = _f.closeSnackbar;
+    // If no correct position is passed, 'bottom-center' is set
+    if (!positions.includes(position)) {
+        position = defaultPosition;
+    }
+    function open(text, duration) {
+        if (text === void 0) { text = ""; }
+        if (duration === void 0) { duration = defaultDuration; }
+        openSnackbar(text, duration, position, style, closeStyle);
+    }
+    // Returns methods in hooks array way
+    return [open, closeSnackbar];
+};
+
+var Switch = styled(Switch$1, {
+    bc: "$neutral5",
+    "&:focus": {
+        boxShadow: "0 0 0 2px $colors$neutral8",
+    },
+    '&[data-state="checked"]': {
+        bc: "$primary9",
+        "&:focus": {
+            boxShadow: "0 0 0 2px $colors$primary8",
+        },
+    },
+});
+
+var _a$1;
+styled(RadioGroupPrimitive.Root, {
+    display: "block",
+});
+var StyledRadioButton = styled("div", {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "$round",
+    width: 25,
+    height: 25,
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    flexShrink: 0,
+    mr: "$3",
+});
+var StyledRadioIndicator = styled("div", {
+    borderRadius: "$round",
+    width: 15,
+    height: 15,
+    backgroundColor: "$primary9",
+    transform: "scale(0)",
+});
+var StyledRadio = styled(RadioGroupPrimitive.Item, {
+    all: "unset",
+    boxSizing: "border-box",
+    userSelect: "none",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    display: "flex",
+    alignItems: "center",
+    borderRadius: "$2",
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    p: "$3",
+    "@hover": {
+        "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$neutral8",
+        },
+    },
+    '&[data-state="checked"]': (_a$1 = {
+            boxShadow: "inset 0 0 0 1px $colors$primary8, 0 0 0 1px $colors$primary8 !important"
+        },
+        _a$1["& ".concat(StyledRadioIndicator)] = {
+            transform: "scale(1)",
+        },
+        _a$1),
+});
+var RadioCard = React.forwardRef(function (props, forwardedRef) { return (React.createElement(StyledRadio, __assign({}, props, { ref: forwardedRef }),
+    React.createElement(StyledRadioButton, null,
+        React.createElement(StyledRadioIndicator, null)),
+    props.children)); });
+
+var _a, _b, _c;
+var Caption = styled("caption", {
+    textAlign: "start",
+    marginBottom: "$5",
+});
+var Tbody = styled("tbody", {
+    width: "100%",
+});
+var Tfoot = styled("tfoot", {});
+var Tr = styled("tr", {});
+var Th = styled("th", {
+    fontWeight: "unset",
+    textAlign: "start",
+    fontSize: "$2",
+    py: "$2",
+    borderBottom: "1px solid $neutral4",
+    variants: {
+        align: {
+            start: {
+                textAlign: "start",
+            },
+            center: {
+                textAlign: "center",
+            },
+            end: {
+                textAlign: "end",
+            },
+        },
+        border: {
+            solid: {
+                borderBottom: "1px solid $neutral4",
+            },
+            dashed: {
+                borderBottom: "1px dashed $neutral8",
+            },
+        },
+    },
+    defaultVariants: {
+        align: "start",
+        border: "solid",
+    },
+});
+var Td = styled("td", {
+    py: "$2",
+    borderBottom: "1px solid $neutral4",
+    fontSize: "$2",
+    variants: {
+        align: {
+            start: {
+                textAlign: "start",
+            },
+            center: {
+                textAlign: "center",
+            },
+            end: {
+                textAlign: "end",
+            },
+        },
+        border: {
+            solid: {
+                borderBottom: "1px solid $neutral4",
+            },
+            dashed: {
+                borderBottom: "1px dashed $neutral8",
+            },
+        },
+    },
+    defaultVariants: {
+        align: "start",
+        border: "solid",
+    },
+});
+var Thead = styled("thead", (_a = {},
+    _a["& ".concat(Th)] = {
+        fontSize: "$1",
+        color: "$gray11",
+    },
+    _a["& ".concat(Td)] = {
+        fontSize: "$1",
+        color: "$neutral11",
+    },
+    _a));
+var Table = styled("table", {
+    width: "100%",
+    tableLayout: "fixed",
+    borderSpacing: 0,
+    variants: {
+        striped: {
+            true: (_b = {},
+                _b["& ".concat(Tbody)] = (_c = {},
+                    _c["& ".concat(Tr)] = {
+                        "&:nth-child(odd)": {
+                            bc: "$neutral2",
+                        },
+                    },
+                    _c),
+                _b),
+        },
+    },
+});
+
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Banner, Button, Caption, Card, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuRadioItem, Label, Link, Promo, RadioCard, Select, SnackbarProvider, Switch, Table, TabsContent, TabsList, TabsTrigger, Tbody, Td, Text, TextField, Tfoot, Th, Thead, Tr, themes, useSnackbar };