@livepeer/design-system 1.1.1 → 1.1.2

package/dist/index.es.js

@@ -0,0 +1,4893 @@
+export { AccessibleIcon } from '@radix-ui/react-accessible-icon';
+export { AspectRatio } from '@radix-ui/react-aspect-ratio';
+export { Arrow as HoverCardArrow, Content as HoverCardContent, Root as HoverCardRoot, Trigger as HoverCardTrigger } from '@radix-ui/react-hover-card';
+export { Portal } from '@radix-ui/react-portal';
+export { Corner as ScrollAreaCorner, Root as ScrollAreaRoot, Scrollbar as ScrollAreaScrollbar, Thumb as ScrollAreaThumb, Viewport as ScrollAreaViewport } from '@radix-ui/react-scroll-area';
+import { __assign, __spreadArray, __rest } from 'tslib';
+import React, { createContext, useState, useContext } from 'react';
+import { createStitches } from '@stitches/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 { ChevronDownIcon, CheckIcon, CaretSortIcon, Cross1Icon } from '@radix-ui/react-icons';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as MenuPrimitive from '@radix-ui/react-menu';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import merge from 'lodash.merge';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { CSSTransition } from 'react-transition-group';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+var _a$8;
+var fonts = {
+    body: "Inter, -apple-system, system-ui, sans-serif",
+    mono: "menlo, monospace",
+};
+var styled = (_a$8 = createStitches({
+    theme: {
+        colors: __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(__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), { 
+            // Semantic colors
+            hiContrast: "$neutral12", 
+            // loContrast: '$neutral1',
+            loContrast: "white", canvas: "hsl(0 0% 93%)", panel: "white", transparentPanel: "hsl(0 0% 0% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
+        fonts: {
+            untitled: "Untitled Sans, -apple-system, system-ui, sans-serif",
+            mono: "Söhne Mono, menlo, monospace",
+        },
+        space: {
+            1: "5px",
+            2: "10px",
+            3: "15px",
+            4: "20px",
+            5: "25px",
+            6: "35px",
+            7: "45px",
+            8: "65px",
+            9: "80px",
+        },
+        sizes: {
+            1: "5px",
+            2: "10px",
+            3: "15px",
+            4: "20px",
+            5: "25px",
+            6: "35px",
+            7: "45px",
+            8: "65px",
+            9: "80px",
+        },
+        fontSizes: {
+            1: "12px",
+            2: "13px",
+            3: "15px",
+            4: "17px",
+            5: "19px",
+            6: "21px",
+            7: "27px",
+            8: "35px",
+            9: "59px",
+        },
+        radii: {
+            1: "4px",
+            2: "6px",
+            3: "8px",
+            4: "12px",
+            round: "50%",
+            pill: "9999px",
+        },
+        zIndices: {
+            1: "100",
+            2: "200",
+            3: "300",
+            4: "400",
+            max: "999",
+        },
+    },
+    media: {
+        bp1: "(min-width: 520px)",
+        bp2: "(min-width: 900px)",
+        bp3: "(min-width: 1200px)",
+        bp4: "(min-width: 1800px)",
+        motion: "(prefers-reduced-motion)",
+        hover: "(any-hover: hover)",
+        dark: "(prefers-color-scheme: dark)",
+        light: "(prefers-color-scheme: light)",
+    },
+    utils: {
+        p: function (value) { return ({
+            padding: value,
+        }); },
+        pt: function (value) { return ({
+            paddingTop: value,
+        }); },
+        pr: function (value) { return ({
+            paddingRight: value,
+        }); },
+        pb: function (value) { return ({
+            paddingBottom: value,
+        }); },
+        pl: function (value) { return ({
+            paddingLeft: value,
+        }); },
+        px: function (value) { return ({
+            paddingLeft: value,
+            paddingRight: value,
+        }); },
+        py: function (value) { return ({
+            paddingTop: value,
+            paddingBottom: value,
+        }); },
+        m: function (value) { return ({
+            margin: value,
+        }); },
+        mt: function (value) { return ({
+            marginTop: value,
+        }); },
+        mr: function (value) { return ({
+            marginRight: value,
+        }); },
+        mb: function (value) { return ({
+            marginBottom: value,
+        }); },
+        ml: function (value) { return ({
+            marginLeft: value,
+        }); },
+        mx: function (value) { return ({
+            marginLeft: value,
+            marginRight: value,
+        }); },
+        my: function (value) { return ({
+            marginTop: value,
+            marginBottom: value,
+        }); },
+        ta: function (value) { return ({ textAlign: value }); },
+        fd: function (value) { return ({
+            flexDirection: value,
+        }); },
+        fw: function (value) { return ({ flexWrap: value }); },
+        ai: function (value) { return ({
+            alignItems: value,
+        }); },
+        ac: function (value) { return ({
+            alignContent: value,
+        }); },
+        jc: function (value) { return ({
+            justifyContent: value,
+        }); },
+        as: function (value) { return ({ alignSelf: value }); },
+        fg: function (value) { return ({ flexGrow: value }); },
+        fs: function (value) { return ({
+            flexShrink: value,
+        }); },
+        fb: function (value) { return ({ flexBasis: value }); },
+        bc: function (value) { return ({
+            backgroundColor: value,
+        }); },
+        br: function (value) { return ({
+            borderRadius: value,
+        }); },
+        btrr: function (value) { return ({
+            borderTopRightRadius: value,
+        }); },
+        bbrr: function (value) { return ({
+            borderBottomRightRadius: value,
+        }); },
+        bblr: function (value) { return ({
+            borderBottomLeftRadius: value,
+        }); },
+        btlr: function (value) { return ({
+            borderTopLeftRadius: value,
+        }); },
+        bs: function (value) { return ({ boxShadow: value }); },
+        lh: function (value) { return ({
+            lineHeight: value,
+        }); },
+        ox: function (value) { return ({ overflowX: value }); },
+        oy: function (value) { return ({ overflowY: value }); },
+        pe: function (value) { return ({
+            pointerEvents: value,
+        }); },
+        us: function (value) { return ({
+            WebkitUserSelect: value,
+            userSelect: value,
+        }); },
+        userSelect: function (value) { return ({
+            WebkitUserSelect: value,
+            userSelect: value,
+        }); },
+        size: function (value) { return ({
+            width: value,
+            height: value,
+        }); },
+        appearance: function (value) { return ({
+            WebkitAppearance: value,
+            appearance: value,
+        }); },
+        backgroundClip: function (value) { return ({
+            WebkitBackgroundClip: value,
+            backgroundClip: value,
+        }); },
+    },
+}), _a$8.styled), css = _a$8.css; _a$8.theme; var createTheme = _a$8.createTheme, getCssText = _a$8.getCssText, globalCss = _a$8.globalCss, keyframes = _a$8.keyframes, config = _a$8.config; _a$8.reset;
+createTheme("dark-theme", {
+    colors: __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), { 
+        // Semantic colors
+        hiContrast: "$neutral12", loContrast: "$neutral1", canvas: "hsl(0 0% 15%)", panel: "$neutral3", transparentPanel: "hsl(0 100% 100% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
+});
+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 naturalPairingsKeys = [
+    "gray",
+    "tomato",
+    "red",
+    "crimson",
+    "pink",
+    "plum",
+    "purple",
+    "violet",
+    "indigo",
+    "blue",
+    "sky",
+    "cyan",
+    "teal",
+    "mint",
+    "green",
+    "grass",
+    "lime",
+    "yellow",
+    "amber",
+    "orange",
+    "brown",
+];
+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",
+    gray: "sand",
+};
+__spreadArray(__spreadArray([], naturalPairingsKeys.map(function (e) { return "light-theme-".concat(e); }), true), naturalPairingsKeys.map(function (e) { return "dark-theme-".concat(e); }), true);
+// TODO fix this typing
+var getThemes = function () {
+    var themes = naturalPairingsKeys.reduce(function (prev, primary) {
+        var _a;
+        return (__assign(__assign({}, prev), (_a = {}, _a["light-theme-".concat(primary)] = createTheme("light-theme-".concat(primary), {
+            colors: __assign(__assign({}, lightThemeColors), { primary: "hsl(0, 0%, 0%)", background: "hsl(0, 0%, 100%)", 
+                // 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(naturalPairings[primary], "1"), neutral2: "$".concat(naturalPairings[primary], "2"), neutral3: "$".concat(naturalPairings[primary], "3"), neutral4: "$".concat(naturalPairings[primary], "4"), neutral5: "$".concat(naturalPairings[primary], "5"), neutral6: "$".concat(naturalPairings[primary], "6"), neutral7: "$".concat(naturalPairings[primary], "7"), neutral8: "$".concat(naturalPairings[primary], "8"), neutral9: "$".concat(naturalPairings[primary], "9"), neutral10: "$".concat(naturalPairings[primary], "10"), neutral11: "$".concat(naturalPairings[primary], "11"), neutral12: "$".concat(naturalPairings[primary], "12"), hiContrast: "$".concat(naturalPairings[primary], "12"), loContrast: "$whiteA12", canvas: "hsl(0 0% 93%)", panel: "$".concat(naturalPairings[primary], "2"), transparentPanel: "hsl(0 0% 0% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
+            fonts: fonts,
+        }), _a["dark-theme-".concat(primary)] = createTheme("dark-theme-".concat(primary), {
+            colors: __assign(__assign({}, darkThemeColors), { primary: "hsl(0, 0%, 100%)", background: "hsl(0, 0%, 0%)", 
+                // 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(naturalPairings[primary], "1"), neutral2: "$".concat(naturalPairings[primary], "2"), neutral3: "$".concat(naturalPairings[primary], "3"), neutral4: "$".concat(naturalPairings[primary], "4"), neutral5: "$".concat(naturalPairings[primary], "5"), neutral6: "$".concat(naturalPairings[primary], "6"), neutral7: "$".concat(naturalPairings[primary], "7"), neutral8: "$".concat(naturalPairings[primary], "8"), neutral9: "$".concat(naturalPairings[primary], "9"), neutral10: "$".concat(naturalPairings[primary], "10"), neutral11: "$".concat(naturalPairings[primary], "11"), neutral12: "$".concat(naturalPairings[primary], "12"), hiContrast: "$".concat(naturalPairings[primary], "12"), loContrast: "$".concat(naturalPairings[primary], "1"), canvas: "hsl(0 0% 15%)", panel: "$".concat(naturalPairings[primary], "2"), transparentPanel: "hsl(0 100% 100% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
+            fonts: fonts,
+        }), _a)));
+    }, {});
+    return themes;
+};
+
+var StyledAccordion = styled(AccordionPrimitive.Root, {
+    boxShadow: "0 0 0 1px $colors$neutral6",
+    borderRadius: "$2",
+});
+var Accordion = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledAccordion, __assign({ ref: forwardedRef }, props, (props.type === "single" ? { collapsible: true } : {})), children));
+});
+Accordion.displayName = "Accordion";
+var StyledItem = styled(AccordionPrimitive.Item, {
+    borderTop: "1px solid $colors$neutral6",
+    "button:focus": { boxShadow: "none" },
+    "&:first-of-type": {
+        borderTop: "none",
+    },
+    "&:last-of-type": {
+        borderBottom: "none",
+    },
+    "&:hover": {
+        "&:first-of-type": {
+            button: {
+                borderTopLeftRadius: "$2",
+                borderTopRightRadius: "$2",
+            },
+        },
+        "&:last-of-type": {
+            button: {
+                borderBottomLeftRadius: "$2",
+                borderBottomRightRadius: "$2",
+            },
+        },
+    },
+});
+var StyledHeader = styled(AccordionPrimitive.Header, {
+    all: "unset",
+});
+var StyledTrigger = styled(AccordionPrimitive.Trigger, {
+    all: "unset",
+    boxSizing: "border-box",
+    userSelect: "none",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    p: "$2",
+    color: "$hiContrast",
+    width: "100%",
+    "&:hover": {
+        backgroundColor: "$neutral2",
+    },
+    "&:focus": {
+        outline: "none",
+        boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+    },
+    svg: {
+        transition: "transform 175ms cubic-bezier(0.65, 0, 0.35, 1)",
+    },
+    '&[data-state="open"]': {
+        svg: {
+            transform: "rotate(180deg)",
+        },
+    },
+});
+var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledHeader, null,
+        React.createElement(StyledTrigger, __assign({}, props, { ref: forwardedRef }),
+            children,
+            React.createElement(ChevronDownIcon, null))));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+var StyledContent$5 = styled(AccordionPrimitive.Content, {
+    p: "$2",
+});
+var AccordionItem = StyledItem;
+var AccordionContent = StyledContent$5;
+
+var Alert = styled("div", {
+    // Reset
+    boxSizing: "border-box",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    border: "1px solid",
+    borderRadius: "$2",
+    variants: {
+        size: {
+            "1": {
+                p: "$3",
+            },
+        },
+        variant: {
+            loContrast: {
+                backgroundColor: "$loContrast",
+                borderColor: "$neutral6",
+            },
+            gray: {
+                backgroundColor: "$neutral2",
+                borderColor: "$neutral6",
+            },
+            blue: {
+                backgroundColor: "$blue2",
+                borderColor: "$blue6",
+            },
+            green: {
+                backgroundColor: "$green2",
+                borderColor: "$green6",
+            },
+            red: {
+                backgroundColor: "$red2",
+                borderColor: "$red6",
+            },
+        },
+    },
+    defaultVariants: {
+        size: "1",
+        variant: "gray",
+    },
+});
+
+var overlayStyles = css({
+    backgroundColor: "rgba(0, 0, 0, .15)",
+});
+var Overlay = styled("div", overlayStyles);
+
+var panelStyles = css({
+    backgroundColor: "$panel",
+    borderRadius: "$3",
+    boxShadow: "$colors$shadowLight 0px 10px 38px -10px, $colors$shadowDark 0px 10px 20px -15px",
+});
+var Panel = styled("div", panelStyles);
+
+var fadeIn$2 = 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$2 = styled(AlertDialogPrimitive.Overlay, overlayStyles, {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: "rgba(0,0,0,.35)",
+    inset: 0,
+    zIndex: 1000,
+    variants: {
+        animation: {
+            true: {
+                '&[data-state="open"]': {
+                    animation: "".concat(fadeIn$2, " 300ms ease-out"),
+                },
+                '&[data-state="closed"]': {
+                    animation: "".concat(fadeout$1, " 200ms ease-out"),
+                },
+            },
+        },
+    },
+});
+function AlertDialog(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(AlertDialogPrimitive.Root, __assign({}, props),
+        React.createElement(StyledOverlay$2, { animation: true }),
+        children));
+}
+var StyledAlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyles, {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    minWidth: 200,
+    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",
+    zIndex: 1001,
+    "&:focus": {
+        outline: "none",
+    },
+    variants: {
+        animation: {
+            fade: {
+                '&[data-state="open"]': {
+                    animation: "".concat(fadeIn$2, " 300ms ease-out"),
+                },
+                '&[data-state="closed"]': {
+                    animation: "".concat(fadeout$1, " 200ms ease-out"),
+                },
+            },
+            scale: {
+                animation: "".concat(fadeIn$2, " 300ms ease-out, ").concat(scaleIn$1, " 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, { style: { overflow: "auto" } }), children));
+};
+var AlertDialogTitle = AlertDialogPrimitive.Title;
+var AlertDialogDescription = AlertDialogPrimitive.Description;
+var AlertDialogAction = AlertDialogPrimitive.Action;
+var AlertDialogCancel = AlertDialogPrimitive.Cancel;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+var Box = styled("div", {
+    // Reset
+    boxSizing: "border-box",
+});
+
+var Status = styled("div", {
+    borderRadius: "50%",
+    flexShrink: 0,
+    variants: {
+        size: {
+            "1": {
+                width: 5,
+                height: 5,
+            },
+            "2": {
+                width: 9,
+                height: 9,
+            },
+        },
+        variant: {
+            gray: {
+                backgroundColor: "$neutral7",
+            },
+            blue: {
+                backgroundColor: "$blue9",
+            },
+            green: {
+                backgroundColor: "$green9",
+            },
+            yellow: {
+                backgroundColor: "$yellow9",
+            },
+            red: {
+                backgroundColor: "$red9",
+            },
+        },
+    },
+    defaultVariants: {
+        size: "2",
+        variant: "gray",
+    },
+});
+
+var _a$7;
+var StyledAvatar = styled(AvatarPrimitive.Root, {
+    alignItems: "center",
+    justifyContent: "center",
+    verticalAlign: "middle",
+    overflow: "hidden",
+    userSelect: "none",
+    boxSizing: "border-box",
+    display: "flex",
+    flexShrink: 0,
+    position: "relative",
+    border: "none",
+    fontFamily: "inherit",
+    lineHeight: "1",
+    margin: "0",
+    outline: "none",
+    padding: "0",
+    fontWeight: "500",
+    color: "$hiContrast",
+    "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderRadius: "inherit",
+        boxShadow: "inset 0px 0px 1px rgba(0, 0, 0, 0.12)",
+    },
+    variants: {
+        size: {
+            "1": {
+                width: "$3",
+                height: "$3",
+            },
+            "2": {
+                width: "$5",
+                height: "$5",
+            },
+            "3": {
+                width: "$6",
+                height: "$6",
+            },
+            "4": {
+                width: "$7",
+                height: "$7",
+            },
+            "5": {
+                width: "$8",
+                height: "$8",
+            },
+            "6": {
+                width: "$9",
+                height: "$9",
+            },
+        },
+        variant: {
+            hiContrast: {
+                backgroundColor: "$hiContrast",
+                color: "$loContrast",
+            },
+            gray: {
+                backgroundColor: "$neutral5",
+            },
+            tomato: {
+                backgroundColor: "$tomato5",
+            },
+            red: {
+                backgroundColor: "$red5",
+            },
+            crimson: {
+                backgroundColor: "$crimson5",
+            },
+            pink: {
+                backgroundColor: "$pink5",
+            },
+            plum: {
+                backgroundColor: "$plum5",
+            },
+            purple: {
+                backgroundColor: "$purple5",
+            },
+            violet: {
+                backgroundColor: "$violet5",
+            },
+            indigo: {
+                backgroundColor: "$indigo5",
+            },
+            blue: {
+                backgroundColor: "$blue5",
+            },
+            cyan: {
+                backgroundColor: "$cyan5",
+            },
+            teal: {
+                backgroundColor: "$teal5",
+            },
+            green: {
+                backgroundColor: "$green5",
+            },
+            grass: {
+                backgroundColor: "$grass5",
+            },
+            brown: {
+                backgroundColor: "$brown5",
+            },
+            bronze: {
+                backgroundColor: "$bronze5",
+            },
+            gold: {
+                backgroundColor: "$gold5",
+            },
+            sky: {
+                backgroundColor: "$sky5",
+            },
+            mint: {
+                backgroundColor: "$mint5",
+            },
+            lime: {
+                backgroundColor: "$lime5",
+            },
+            yellow: {
+                backgroundColor: "$yellow5",
+            },
+            amber: {
+                backgroundColor: "$amber5",
+            },
+            orange: {
+                backgroundColor: "$orange5",
+            },
+        },
+        shape: {
+            square: {
+                borderRadius: "$2",
+            },
+            circle: {
+                borderRadius: "50%",
+            },
+        },
+        inactive: {
+            true: {
+                opacity: ".3",
+            },
+        },
+        interactive: {
+            true: {
+                "&::after": {
+                    content: '""',
+                    position: "absolute",
+                    top: "0",
+                    right: "0",
+                    bottom: "0",
+                    left: "0",
+                    backgroundColor: "rgba(0,0,0,.08)",
+                    opacity: "0",
+                    pointerEvents: "none",
+                    transition: "opacity 25ms linear",
+                },
+                "@hover": {
+                    "&:hover": {
+                        "&::after": {
+                            opacity: "1",
+                        },
+                    },
+                },
+                '&[data-state="open"]': {
+                    "&::after": {
+                        backgroundColor: "rgba(0,0,0,.12)",
+                        opacity: "1",
+                    },
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: "2",
+        variant: "gray",
+        shape: "circle",
+    },
+});
+var StyledAvatarImage = styled(AvatarPrimitive.Image, {
+    display: "flex",
+    objectFit: "cover",
+    boxSizing: "border-box",
+    height: "100%",
+    verticalAlign: "middle",
+    width: "100%",
+});
+var StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {
+    textTransform: "uppercase",
+    variants: {
+        size: {
+            "1": {
+                fontSize: "10px",
+                lineHeight: "15px",
+            },
+            "2": {
+                fontSize: "$3",
+            },
+            "3": {
+                fontSize: "$6",
+            },
+            "4": {
+                fontSize: "$7",
+            },
+            "5": {
+                fontSize: "$8",
+            },
+            "6": {
+                fontSize: "$9",
+            },
+        },
+    },
+    defaultVariants: {
+        size: "2",
+    },
+});
+var AvatarNestedItem = styled("div", {
+    boxShadow: "0 0 0 2px $colors$loContrast",
+    borderRadius: "50%",
+});
+var AvatarGroup = styled("div", (_a$7 = {
+        display: "flex",
+        flexDirection: "row-reverse"
+    },
+    _a$7["& ".concat(AvatarNestedItem, ":nth-child(n+2)")] = {
+        marginRight: "-$1",
+    },
+    _a$7));
+var Avatar = React.forwardRef(function (_a, forwardedRef) {
+    var alt = _a.alt, src = _a.src, fallback = _a.fallback, size = _a.size, variant = _a.variant, shape = _a.shape, css = _a.css, status = _a.status, props = __rest(_a, ["alt", "src", "fallback", "size", "variant", "shape", "css", "status"]);
+    return (React.createElement(Box, { css: __assign(__assign({}, css), { position: "relative", height: "fit-content", width: "fit-content" }) },
+        React.createElement(StyledAvatar, __assign({}, props, { ref: forwardedRef, size: size, variant: variant, shape: shape }),
+            React.createElement(StyledAvatarImage, { alt: alt, src: src }),
+            React.createElement(StyledAvatarFallback, { size: size }, fallback)),
+        status && (React.createElement(Box, { css: {
+                position: "absolute",
+                bottom: "0",
+                right: "0",
+                boxShadow: "0 0 0 3px $colors$loContrast",
+                borderRadius: "$round",
+                mr: "-3px",
+                mb: "-3px",
+            } },
+            React.createElement(Status, { size: size && size > 2 ? "2" : "1", variant: status })))));
+});
+Avatar.displayName = "Avatar";
+
+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: "$neutral3",
+        pointerEvents: "none",
+        color: "$neutral8",
+    },
+    "&::before": {
+        boxSizing: "border-box",
+        content: '""',
+    },
+    "&::after": {
+        boxSizing: "border-box",
+        content: '""',
+    },
+    // Custom
+    backgroundColor: "$neutral3",
+    borderRadius: "$pill",
+    color: "$neutral11",
+    whiteSpace: "nowrap",
+    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: "$neutral3",
+                color: "$neutral11",
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+                },
+            },
+            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 Banner = styled("div", {
+    // 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 colorVariants$1 = {};
+var compoundVariants = [];
+for (var _i$1 = 0, naturalPairingsKeys_1$1 = naturalPairingsKeys; _i$1 < naturalPairingsKeys_1$1.length; _i$1++) {
+    var color$1 = naturalPairingsKeys_1$1[_i$1];
+    colorVariants$1[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("button", {
+    // 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,
+    ai: "center",
+    cursor: "pointer",
+    px: "$3",
+    bc: "$neutral4",
+    borderRadius: "$2",
+    "&:hover": { bc: "$neutral5" },
+    "&:active": { bc: "$neutral6" },
+    "&:disabled": {
+        opacity: 0.5,
+        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": {
+                    opacity: 0.5,
+                },
+                '&[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": {
+                    opacity: 0.5,
+                },
+                '&[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$1), { transparentWhite: {
+                bc: "hsla(0,100%,100%,.2)",
+                color: "white",
+                "&:hover": {
+                    bc: "hsla(0,100%,100%,.25)",
+                },
+                "&:active": {
+                    bc: "hsla(0,100%,100%,.3)",
+                },
+                "&:disabled": {
+                    opacity: 0.5,
+                },
+            }, 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 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 StyledCheckbox = styled(CheckboxPrimitive.Root, {
+    all: "unset",
+    boxSizing: "border-box",
+    userSelect: "none",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    alignItems: "center",
+    appearance: "none",
+    display: "inline-flex",
+    justifyContent: "center",
+    lineHeight: "1",
+    margin: "0",
+    outline: "none",
+    padding: "0",
+    WebkitTapHighlightColor: "rgba(0,0,0,0)",
+    color: "$hiContrast",
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    overflow: "hidden",
+    "@hover": {
+        "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$neutral8",
+        },
+    },
+    "&:focus": {
+        outline: "none",
+        borderColor: "$red7",
+        boxShadow: "inset 0 0 0 1px $colors$blue9, 0 0 0 1px $colors$blue9",
+    },
+    variants: {
+        size: {
+            "1": {
+                width: "$3",
+                height: "$3",
+                borderRadius: "$1",
+            },
+            "2": {
+                width: "$5",
+                height: "$5",
+                borderRadius: "$2",
+            },
+        },
+    },
+    defaultVariants: {
+        size: "1",
+    },
+});
+var StyledIndicator$1 = styled(CheckboxPrimitive.Indicator, {
+    alignItems: "center",
+    display: "flex",
+    height: "100%",
+    justifyContent: "center",
+    width: "100%",
+});
+var Checkbox = React.forwardRef(function (props, forwardedRef) { return (React.createElement(StyledCheckbox, __assign({}, props, { ref: forwardedRef }),
+    React.createElement(StyledIndicator$1, null,
+        React.createElement(CheckIcon, null)))); });
+Checkbox.displayName = "Checkbox";
+
+var Code = styled("code", {
+    fontFamily: "$mono",
+    fontSize: "max(12px, 85%)",
+    whiteSpace: "nowrap",
+    padding: "0 3px 2px 3px",
+    variants: {
+        variant: {
+            gray: {
+                backgroundColor: "$neutral3",
+                color: "$neutral11",
+            },
+            violet: {
+                backgroundColor: "$violet3",
+                color: "$violet11",
+            },
+        },
+    },
+    defaultVariants: {
+        variant: "violet",
+    },
+});
+
+var Container = styled("div", {
+    // Reset
+    boxSizing: "border-box",
+    flexShrink: 0,
+    // Custom
+    ml: "auto",
+    mr: "auto",
+    px: "$5",
+    variants: {
+        size: {
+            "1": {
+                maxWidth: "430px",
+            },
+            "2": {
+                maxWidth: "715px",
+            },
+            "3": {
+                maxWidth: "1145px",
+            },
+            "4": {
+                maxWidth: "1440px",
+            },
+            "5": {
+                maxWidth: "1600px",
+            },
+            "6": {
+                maxWidth: "1920px",
+            },
+            "7": {
+                maxWidth: "none",
+            },
+        },
+    },
+    defaultVariants: {
+        size: "4",
+    },
+});
+
+var Flex = styled("div", {
+    boxSizing: "border-box",
+    display: "flex",
+    variants: {
+        direction: {
+            row: {
+                flexDirection: "row",
+            },
+            column: {
+                flexDirection: "column",
+            },
+            rowReverse: {
+                flexDirection: "row-reverse",
+            },
+            columnReverse: {
+                flexDirection: "column-reverse",
+            },
+        },
+        align: {
+            start: {
+                alignItems: "flex-start",
+            },
+            center: {
+                alignItems: "center",
+            },
+            end: {
+                alignItems: "flex-end",
+            },
+            stretch: {
+                alignItems: "stretch",
+            },
+            baseline: {
+                alignItems: "baseline",
+            },
+        },
+        justify: {
+            start: {
+                justifyContent: "flex-start",
+            },
+            center: {
+                justifyContent: "center",
+            },
+            end: {
+                justifyContent: "flex-end",
+            },
+            between: {
+                justifyContent: "space-between",
+            },
+        },
+        wrap: {
+            noWrap: {
+                flexWrap: "nowrap",
+            },
+            wrap: {
+                flexWrap: "wrap",
+            },
+            wrapReverse: {
+                flexWrap: "wrap-reverse",
+            },
+        },
+        gap: {
+            1: {
+                gap: "$1",
+            },
+            2: {
+                gap: "$2",
+            },
+            3: {
+                gap: "$3",
+            },
+            4: {
+                gap: "$4",
+            },
+            5: {
+                gap: "$5",
+            },
+            6: {
+                gap: "$6",
+            },
+            7: {
+                gap: "$7",
+            },
+            8: {
+                gap: "$8",
+            },
+            9: {
+                gap: "$9",
+            },
+        },
+    },
+    defaultVariants: {
+        direction: "row",
+        align: "stretch",
+        justify: "start",
+        wrap: "noWrap",
+    },
+});
+
+var baseItemCss = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontFamily: "$untitled",
+    fontSize: "$1",
+    fontVariantNumeric: "tabular-nums",
+    lineHeight: "1",
+    cursor: "default",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    height: "$5",
+    px: "$5",
+});
+var itemCss = css(baseItemCss, {
+    position: "relative",
+    color: "$hiContrast",
+    "&[data-highlighted]": {
+        outline: "none",
+        backgroundColor: "$blue9",
+        color: "white",
+    },
+    "&[data-disabled]": {
+        color: "$neutral9",
+    },
+});
+var labelCss = css(baseItemCss, {
+    color: "$neutral11",
+});
+var menuCss = css({
+    boxSizing: "border-box",
+    minWidth: 120,
+    py: "$1",
+});
+var separatorCss = css({
+    height: 1,
+    my: "$1",
+    backgroundColor: "$neutral6",
+});
+var Menu = styled(MenuPrimitive.Root, menuCss);
+styled(MenuPrimitive.Content, panelStyles);
+var MenuSeparator = styled(MenuPrimitive.Separator, separatorCss);
+var MenuItem = styled(MenuPrimitive.Item, itemCss);
+var StyledMenuRadioItem = styled(MenuPrimitive.RadioItem, itemCss);
+var MenuRadioItem = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledMenuRadioItem, __assign({}, props, { ref: forwardedRef }),
+        React.createElement(Box, { as: "span", css: { position: "absolute", left: "$1" } },
+            React.createElement(MenuPrimitive.ItemIndicator, null,
+                React.createElement(Flex, { css: {
+                        width: "$3",
+                        height: "$3",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    } },
+                    React.createElement(Box, { css: {
+                            width: "$1",
+                            height: "$1",
+                            backgroundColor: "currentColor",
+                            borderRadius: "$round",
+                        } })))),
+        children));
+});
+MenuRadioItem.displayName = "MenuRadioItem";
+var StyledMenuCheckboxItem = styled(MenuPrimitive.CheckboxItem, itemCss);
+var MenuCheckboxItem = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledMenuCheckboxItem, __assign({}, props, { ref: forwardedRef }),
+        React.createElement(Box, { as: "span", css: { position: "absolute", left: "$1" } },
+            React.createElement(MenuPrimitive.ItemIndicator, null,
+                React.createElement(CheckIcon, null))),
+        children));
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+var MenuLabel = styled(MenuPrimitive.Label, labelCss);
+var MenuRadioGroup = styled(MenuPrimitive.RadioGroup, {});
+var MenuGroup = styled(MenuPrimitive.Group, {});
+
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var StyledContent$4 = styled(ContextMenuPrimitive.Content, menuCss, panelStyles);
+var ContextMenuContent = React.forwardRef(function (props, forwardedRef) { return (React.createElement(ContextMenuPrimitive.Portal, null,
+    React.createElement(StyledContent$4, __assign({}, props, { ref: forwardedRef })))); });
+ContextMenuContent.displayName = "ContextMenuContent";
+var ContextMenuItem = styled(ContextMenuPrimitive.Item, itemCss);
+var ContextMenuGroup = styled(ContextMenuPrimitive.Group, {});
+var ContextMenuLabel = styled(ContextMenuPrimitive.Label, labelCss);
+var ContextMenuSeparator = styled(ContextMenuPrimitive.Separator, separatorCss);
+var StyledContextMenuCheckboxItem = styled(ContextMenuPrimitive.CheckboxItem, itemCss);
+var ContextMenuCheckboxItem = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledContextMenuCheckboxItem, __assign({}, props, { ref: forwardedRef }),
+        React.createElement(Box, { as: "span", css: { position: "absolute", left: "$1" } },
+            React.createElement(ContextMenuPrimitive.ItemIndicator, null,
+                React.createElement(CheckIcon, null))),
+        children));
+});
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+var ContextMenuRadioGroup = styled(ContextMenuPrimitive.RadioGroup, {});
+var StyledContextMenuRadioItem = styled(ContextMenuPrimitive.RadioItem, itemCss);
+var ContextMenuRadioItem = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledContextMenuRadioItem, __assign({}, props, { ref: forwardedRef }),
+        React.createElement(Box, { as: "span", css: { position: "absolute", left: "$1" } },
+            React.createElement(ContextMenuPrimitive.ItemIndicator, null,
+                React.createElement(Flex, { css: {
+                        width: "$3",
+                        height: "$3",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    } },
+                    React.createElement(Box, { css: {
+                            width: "$1",
+                            height: "$1",
+                            backgroundColor: "currentColor",
+                            borderRadius: "$round",
+                        } })))),
+        children));
+});
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+
+var StyledTextField = styled("input", {
+    // 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",
+    "&:-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 SelectWrapper = styled("div", {
+    backgroundColor: "$loContrast",
+    borderRadius: "$2",
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    color: "$hiContrast",
+    fontFamily: "$untitled",
+    fontSize: "$1",
+    fontVariantNumeric: "tabular-nums",
+    fontWeight: 400,
+    height: "$5",
+    flexShrink: 0,
+    "&:focus-within": {
+        zIndex: 1,
+        boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
+    },
+});
+var StyledSelect = styled("select", {
+    appearance: "none",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "inherit",
+    color: "inherit",
+    font: "inherit",
+    outline: "none",
+    width: "100%",
+    height: "100%",
+    pl: "$1",
+    pr: "$3",
+    lineHeight: "25px",
+});
+var StyledCaretSortIcon = styled(CaretSortIcon, {
+    position: "absolute",
+    pointerEvents: "none",
+    display: "inline",
+    // Use margins instead of top/left to avoid setting "position: relative" on parent,
+    // which would make stacking context tricky with Select used in a control group.
+    marginTop: 5,
+    marginLeft: -16,
+});
+var SelectBase = React.forwardRef(function (_a, forwardedRef) {
+    var css = _a.css, props = __rest(_a, ["css"]);
+    return (React.createElement(SelectWrapper, { css: css },
+        React.createElement(StyledSelect, __assign({ ref: forwardedRef }, props)),
+        React.createElement(StyledCaretSortIcon, null)));
+});
+SelectBase.toString = function () { return ".".concat(SelectWrapper.className); };
+SelectBase.displayName = "Select";
+var Select = styled(SelectBase, {
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+});
+
+var _a$6;
+var ControlGroup = styled("div", (_a$6 = {
+        display: "flex",
+        // Make sure ControlGroup and its children don't affect normal stacking order
+        position: "relative",
+        zIndex: 0
+    },
+    _a$6["& ".concat(Button)] = {
+        borderRadius: 0,
+        boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+        "&:hover": {
+            boxShadow: "-1px 0 $colors$neutral8, inset 0 1px $colors$neutral8, inset -1px 0 $colors$neutral8, inset 0 -1px $colors$neutral8",
+        },
+        "&:focus": {
+            zIndex: 1,
+            boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+        },
+        "&:first-child": {
+            borderTopLeftRadius: "$1",
+            borderBottomLeftRadius: "$1",
+            boxShadow: "inset 0 0 0 1px $colors$neutral7",
+            "&:hover": {
+                boxShadow: "inset 0 0 0 1px $colors$neutral8",
+            },
+            "&:focus": {
+                boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+            },
+        },
+        "&:last-child": {
+            borderTopRightRadius: "$1",
+            borderBottomRightRadius: "$1",
+            boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+            "&:focus": {
+                boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+            },
+        },
+    },
+    _a$6["& ".concat(TextField)] = {
+        borderRadius: 0,
+        boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+        "&:focus": {
+            zIndex: 1,
+            boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
+        },
+        "&:first-child": {
+            borderTopLeftRadius: "$1",
+            borderBottomLeftRadius: "$1",
+            boxShadow: "inset 0 0 0 1px $colors$neutral7",
+            "&:focus": {
+                boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
+            },
+        },
+        "&:last-child": {
+            borderTopRightRadius: "$1",
+            borderBottomRightRadius: "$1",
+            boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+            "&:focus": {
+                boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
+            },
+        },
+    },
+    _a$6["& ".concat(Select)] = {
+        borderRadius: 0,
+        boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+        "&:focus-within": {
+            boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
+        },
+        "&:first-child": {
+            borderTopLeftRadius: "$1",
+            borderBottomLeftRadius: "$1",
+            boxShadow: "inset 0 0 0 1px $colors$neutral7",
+            "&:focus-within": {
+                boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
+            },
+        },
+        "&:last-child": {
+            borderTopRightRadius: "$1",
+            borderBottomRightRadius: "$1",
+            boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+            "&:focus-within": {
+                boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
+            },
+        },
+    },
+    _a$6));
+
+var DesignSystemProvider = function (props) {
+    return React.createElement(TooltipProvider, __assign({}, props));
+};
+
+var IconButton = styled("button", {
+    // Reset
+    alignItems: "center",
+    appearance: "none",
+    borderWidth: "0",
+    boxSizing: "border-box",
+    display: "inline-flex",
+    flexShrink: 0,
+    fontFamily: "inherit",
+    fontSize: "14px",
+    justifyContent: "center",
+    lineHeight: "1",
+    outline: "none",
+    padding: "0",
+    textDecoration: "none",
+    userSelect: "none",
+    WebkitTapHighlightColor: "transparent",
+    color: "$hiContrast",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    backgroundColor: "$loContrast",
+    border: "1px solid $neutral7",
+    "@hover": {
+        "&:hover": {
+            borderColor: "$neutral8",
+        },
+    },
+    "&:active": {
+        backgroundColor: "$neutral2",
+    },
+    "&:focus": {
+        borderColor: "$neutral8",
+        boxShadow: "0 0 0 1px $colors$neutral8",
+    },
+    "&:disabled": {
+        pointerEvents: "none",
+        backgroundColor: "transparent",
+        color: "$neutral6",
+    },
+    variants: {
+        size: {
+            "1": {
+                borderRadius: "$1",
+                height: "$5",
+                width: "$5",
+            },
+            "2": {
+                borderRadius: "$2",
+                height: "$6",
+                width: "$6",
+            },
+            "3": {
+                borderRadius: "$2",
+                height: "$7",
+                width: "$7",
+            },
+            "4": {
+                borderRadius: "$3",
+                height: "$8",
+                width: "$8",
+            },
+        },
+        variant: {
+            ghost: {
+                backgroundColor: "transparent",
+                borderWidth: "0",
+                "@hover": {
+                    "&:hover": {
+                        backgroundColor: "$neutralA3",
+                    },
+                },
+                "&:focus": {
+                    boxShadow: "inset 0 0 0 1px $colors$neutralA8, 0 0 0 1px $colors$neutralA8",
+                },
+                "&:active": {
+                    backgroundColor: "$neutralA4",
+                },
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: "$neutralA4",
+                },
+            },
+            raised: {
+                boxShadow: "0 0 transparent, 0 16px 32px hsl(206deg 12% 5% / 25%), 0 3px 5px hsl(0deg 0% 0% / 10%)",
+                "@hover": {
+                    "&:hover": {
+                        boxShadow: "0 0 transparent, 0 16px 32px hsl(206deg 12% 5% / 25%), 0 3px 5px hsl(0deg 0% 0% / 10%)",
+                    },
+                },
+                "&:focus": {
+                    borderColor: "$neutral8",
+                    boxShadow: "0 0 0 1px $colors$neutral8, 0 16px 32px hsl(206deg 12% 5% / 25%), 0 3px 5px hsl(0deg 0% 0% / 10%)",
+                },
+                "&:active": {
+                    backgroundColor: "$neutral4",
+                },
+            },
+        },
+        state: {
+            active: {
+                backgroundColor: "$neutral4",
+                boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
+                "@hover": {
+                    "&:hover": {
+                        boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$neutral4",
+                },
+            },
+            waiting: {
+                backgroundColor: "$neutral4",
+                boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
+                "@hover": {
+                    "&:hover": {
+                        boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
+                    },
+                },
+                "&:active": {
+                    backgroundColor: "$neutral4",
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: "1",
+        variant: "ghost",
+    },
+});
+
+var fadeIn$1 = 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$1 = styled(DialogPrimitive.Overlay, overlayStyles, {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: "rgba(0,0,0,.35)",
+    inset: 0,
+    zIndex: 1000,
+    variants: {
+        animation: {
+            true: {
+                '&[data-state="open"]': {
+                    animation: "".concat(fadeIn$1, " 300ms ease-out"),
+                },
+                '&[data-state="closed"]': {
+                    animation: "".concat(fadeout, " 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, panelStyles, {
+    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",
+    zIndex: 1001,
+    "&:focus": {
+        outline: "none",
+    },
+    // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
+    // Affects animated and non-animated dialogs alike.
+    willChange: "transform",
+    variants: {
+        animation: {
+            fade: {
+                '&[data-state="open"]': {
+                    animation: "".concat(fadeIn$1, " 300ms ease-out"),
+                },
+                '&[data-state="closed"]': {
+                    animation: "".concat(fadeout, " 200ms ease-out"),
+                },
+            },
+            scale: {
+                animation: "".concat(fadeIn$1, " 300ms ease-out, ").concat(scaleIn, " 200ms ease-out"),
+            },
+        },
+    },
+    defaultVariants: {
+        animation: "scale",
+    },
+});
+var StyledCloseButton$1 = styled(DialogPrimitive.Close, {
+    position: "absolute",
+    top: "$2",
+    right: "$2",
+});
+var DialogContent = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children; _a.animation; var props = __rest(_a, ["children", "animation"]);
+    return (React.createElement(DialogPrimitive.Portal, null,
+        React.createElement(StyledOverlay$1, null),
+        React.createElement(StyledDialogContent, __assign({}, props, { ref: forwardedRef, style: { overflow: "auto" } }),
+            children,
+            React.createElement(StyledCloseButton$1, { asChild: true },
+                React.createElement(IconButton, { variant: "ghost" },
+                    React.createElement(Cross1Icon, null))))));
+});
+DialogContent.displayName = "DialogContent";
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogTitle = DialogPrimitive.Title;
+var DialogDescription = DialogPrimitive.Description;
+var DialogClose = DialogPrimitive.Close;
+
+var colorVariants = {};
+for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairingsKeys_1.length; _i++) {
+    var color = naturalPairingsKeys_1[_i];
+    colorVariants[color] = {
+        "&:focus": {
+            outline: "none",
+            backgroundColor: "$neutral4",
+            color: "$hiContrast",
+        },
+    };
+}
+var DropdownMenuItemBase = styled(DropdownMenuPrimitive.Item, itemCss);
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var StyledContent$3 = styled(DropdownMenuPrimitive.Content, menuCss, panelStyles);
+var DropdownMenuContent = React.forwardRef(function (props, forwardedRef) { return (React.createElement(DropdownMenuPrimitive.Portal, null,
+    React.createElement(StyledContent$3, __assign({}, props, { ref: forwardedRef })))); });
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuGroup = styled(DropdownMenuPrimitive.Group, {});
+var DropdownMenuLabel = styled(DropdownMenuPrimitive.Label, labelCss);
+var DropdownMenuSeparator = styled(DropdownMenuPrimitive.Separator, separatorCss);
+var StyledDropdownMenuCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, itemCss);
+var DropdownMenuCheckboxItemBase = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledDropdownMenuCheckboxItem, __assign({}, props, { ref: forwardedRef }),
+        React.createElement(Box, { as: "span", css: { position: "absolute", left: "$1" } },
+            React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+                React.createElement(CheckIcon, null))),
+        children));
+});
+DropdownMenuCheckboxItemBase.displayName = "DropdownMenuCheckboxItemBase";
+var DropdownMenuRadioGroup = styled(DropdownMenuPrimitive.RadioGroup, {});
+var StyledDropdownMenuRadioItem = styled(DropdownMenuPrimitive.RadioItem, itemCss);
+var DropdownMenuRadioItemBase = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledDropdownMenuRadioItem, __assign({}, props, { ref: forwardedRef }),
+        React.createElement(Box, { as: "span", css: { position: "absolute", left: "$1" } },
+            React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+                React.createElement(Flex, { css: {
+                        width: "$3",
+                        height: "$3",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    } },
+                    React.createElement(Box, { css: {
+                            width: "$1",
+                            height: "$1",
+                            backgroundColor: "currentColor",
+                            borderRadius: "$round",
+                        } })))),
+        children));
+});
+DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
+var DropdownMenuItem = styled(DropdownMenuItemBase, {
+    "&:focus": {
+        backgroundColor: "$neutral4",
+    },
+    variants: {
+        color: __assign({ primary: {
+                "&:focus": {
+                    outline: "none",
+                    backgroundColor: "$primary4",
+                    color: "$hiContrast",
+                },
+            } }, colorVariants),
+    },
+});
+var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
+    variants: {
+        color: __assign({ primary: {
+                "&:focus": {
+                    outline: "none",
+                    backgroundColor: "$primary4",
+                    color: "$hiContrast",
+                },
+            } }, colorVariants),
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
+    backgroundColor: "$neutral4",
+    variants: {
+        color: __assign({ primary: {
+                "&:focus": {
+                    outline: "none",
+                    backgroundColor: "$primary4",
+                    color: "$hiContrast",
+                },
+            } }, colorVariants),
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+
+var Grid = styled("div", {
+    boxSizing: "border-box",
+    display: "grid",
+    variants: {
+        align: {
+            start: {
+                alignItems: "start",
+            },
+            center: {
+                alignItems: "center",
+            },
+            end: {
+                alignItems: "end",
+            },
+            stretch: {
+                alignItems: "stretch",
+            },
+            baseline: {
+                alignItems: "baseline",
+            },
+        },
+        justify: {
+            start: {
+                justifyContent: "start",
+            },
+            center: {
+                justifyContent: "center",
+            },
+            end: {
+                justifyContent: "end",
+            },
+            between: {
+                justifyContent: "space-between",
+            },
+        },
+        flow: {
+            row: {
+                gridAutoFlow: "row",
+            },
+            column: {
+                gridAutoFlow: "column",
+            },
+            dense: {
+                gridAutoFlow: "dense",
+            },
+            rowDense: {
+                gridAutoFlow: "row dense",
+            },
+            columnDense: {
+                gridAutoFlow: "column dense",
+            },
+        },
+        columns: {
+            1: {
+                gridTemplateColumns: "repeat(1, 1fr)",
+            },
+            2: {
+                gridTemplateColumns: "repeat(2, 1fr)",
+            },
+            3: {
+                gridTemplateColumns: "repeat(3, 1fr)",
+            },
+            4: {
+                gridTemplateColumns: "repeat(4, 1fr)",
+            },
+        },
+        gap: {
+            1: {
+                gap: "$1",
+            },
+            2: {
+                gap: "$2",
+            },
+            3: {
+                gap: "$3",
+            },
+            4: {
+                gap: "$4",
+            },
+            5: {
+                gap: "$5",
+            },
+            6: {
+                gap: "$6",
+            },
+            7: {
+                gap: "$7",
+            },
+            8: {
+                gap: "$8",
+            },
+            9: {
+                gap: "$9",
+            },
+        },
+        gapX: {
+            1: {
+                columnGap: "$1",
+            },
+            2: {
+                columnGap: "$2",
+            },
+            3: {
+                columnGap: "$3",
+            },
+            4: {
+                columnGap: "$4",
+            },
+            5: {
+                columnGap: "$5",
+            },
+            6: {
+                columnGap: "$6",
+            },
+            7: {
+                columnGap: "$7",
+            },
+            8: {
+                columnGap: "$8",
+            },
+            9: {
+                columnGap: "$9",
+            },
+        },
+        gapY: {
+            1: {
+                rowGap: "$1",
+            },
+            2: {
+                rowGap: "$2",
+            },
+            3: {
+                rowGap: "$3",
+            },
+            4: {
+                rowGap: "$4",
+            },
+            5: {
+                rowGap: "$5",
+            },
+            6: {
+                rowGap: "$6",
+            },
+            7: {
+                rowGap: "$7",
+            },
+            8: {
+                rowGap: "$8",
+            },
+            9: {
+                rowGap: "$9",
+            },
+        },
+    },
+});
+
+var Text = styled("span", {
+    // Reset
+    lineHeight: 1.5,
+    margin: "0",
+    fontWeight: 400,
+    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: "$neutral11",
+            },
+            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$1 = "h1";
+var Heading = React.forwardRef(function (props, forwardedRef) {
+    // '2' here is the default heading size variant
+    var _a = props.size, size = _a === void 0 ? "1" : _a, textProps = __rest(props, ["size"]);
+    // This is the mapping of Heading Variants to Text variants
+    var textSize = {
+        1: { "@initial": "4", "@bp2": "5" },
+        2: { "@initial": "6", "@bp2": "7" },
+        3: { "@initial": "7", "@bp2": "8" },
+        4: { "@initial": "8", "@bp2": "9" },
+    };
+    // This is the mapping of Heading Variants to Text css
+    var textCss = {
+        1: { fontWeight: 500, lineHeight: "20px", "@bp2": { lineHeight: "23px" } },
+        2: { fontWeight: 500, lineHeight: "25px", "@bp2": { lineHeight: "30px" } },
+        3: { fontWeight: 500, lineHeight: "33px", "@bp2": { lineHeight: "41px" } },
+        4: { fontWeight: 500, lineHeight: "35px", "@bp2": { lineHeight: "55px" } },
+    };
+    return (React.createElement(Text, __assign({ as: DEFAULT_TAG$1 }, textProps, { ref: forwardedRef, size: textSize[size], css: __assign({ fontVariantNumeric: "proportional-nums" }, merge(textCss[size], props.css)) })));
+});
+Heading.displayName = "Heading";
+
+var Image = styled("img", {
+    // Reset
+    verticalAlign: "middle",
+    maxWidth: "100%",
+});
+
+var Kbd = styled("kbd", {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "$loContrast",
+    flexShrink: 0,
+    color: "$hiContrast",
+    userSelect: "none",
+    cursor: "default",
+    whiteSpace: "nowrap",
+    boxShadow: "\n    inset 0 0.5px rgba(255, 255, 255, 0.1),\n    inset 0 1px 5px $colors$neutral2,\n    0px 0px 0px 0.5px $colors$neutral8,\n    0px 2px 1px -1px $colors$neutral8,\n    0 1px $colors$neutral8",
+    textShadow: "0 0 1px rgba(255, 255, 255, 0.5)",
+    fontFamily: "inherit",
+    fontWeight: 400,
+    lineHeight: "1.5",
+    mx: "2px",
+    variants: {
+        size: {
+            "1": {
+                borderRadius: "$1",
+                px: "0.3em",
+                height: "$3",
+                minWidth: "1.6em",
+                fontSize: "$1",
+                lineHeight: "$spaces$3",
+            },
+            "2": {
+                borderRadius: "$2",
+                px: "0.5em",
+                height: "$5",
+                minWidth: "2em",
+                fontSize: "$2",
+                lineHeight: "$spaces$5",
+            },
+        },
+        width: {
+            shift: {
+                width: "4em",
+                justifyContent: "flex-start",
+            },
+            command: {
+                width: "3em",
+                justifyContent: "flex-end",
+            },
+            space: {
+                width: "8em",
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            size: "1",
+            width: "shift",
+            css: {
+                width: "3em",
+            },
+        },
+        {
+            size: "1",
+            width: "command",
+            css: {
+                width: "2.5em",
+            },
+        },
+        {
+            size: "1",
+            width: "space",
+            css: {
+                width: "5em",
+            },
+        },
+    ],
+    defaultVariants: {
+        size: "2",
+    },
+});
+
+var Label = styled(LabelPrimitive.Root, Text, {
+    fontSize: "$2",
+    display: "inline-block",
+    verticalAlign: "middle",
+    cursor: "default",
+});
+
+var _a$5;
+var Link = styled("a", (_a$5 = {
+        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$5["& ".concat(Text)] = {
+        color: "inherit",
+    },
+    _a$5.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$5.defaultVariants = {
+        variant: "contrast",
+    },
+    _a$5));
+
+var DEFAULT_TAG = "p";
+var Paragraph = React.forwardRef(function (props, forwardedRef) {
+    // '2' here is the default Paragraph size variant
+    var _a = props.size, size = _a === void 0 ? "1" : _a, textProps = __rest(props, ["size"]);
+    // This is the mapping of Paragraph Variants to Text variants
+    var textSize = {
+        1: { "@initial": "3", "@bp2": "4" },
+        2: { "@initial": "5", "@bp2": "6" },
+    };
+    // This is the mapping of Paragraph Variants to Text css
+    var textCss = {
+        1: { lineHeight: "25px", "@bp2": { lineHeight: "27px" } },
+        2: {
+            color: "$neutral11",
+            lineHeight: "27px",
+            "@bp2": { lineHeight: "30px" },
+        },
+    };
+    return (React.createElement(Text, __assign({ as: DEFAULT_TAG }, textProps, { ref: forwardedRef, size: textSize[size], css: __assign({}, merge(textCss[size], props.css)) })));
+});
+Paragraph.displayName = "Paragraph";
+
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var StyledContent$2 = styled(PopoverPrimitive.Content, panelStyles, {
+    minWidth: 200,
+    minHeight: "$6",
+    maxWidth: 265,
+    "&:focus": {
+        outline: "none",
+    },
+});
+var PopoverContent = React.forwardRef(function (_a, fowardedRef) {
+    var children = _a.children, hideArrow = _a.hideArrow, props = __rest(_a, ["children", "hideArrow"]);
+    return (React.createElement(PopoverPrimitive.Portal, null,
+        React.createElement(StyledContent$2, __assign({ sideOffset: 0 }, props, { ref: fowardedRef }),
+            children,
+            !hideArrow && (React.createElement(Box, { css: { color: "$panel" } },
+                React.createElement(PopoverPrimitive.Arrow, { width: 11, height: 5, style: { fill: "currentColor" } }))))));
+});
+PopoverContent.displayName = "PopoverContent";
+var PopoverClose = PopoverPrimitive.Close;
+
+var indeterminateProgress = keyframes({
+    "0%": {
+        transform: "scaleX(1) translateX(-100%)",
+        transformOrigin: "left",
+    },
+    "50%": {
+        transform: "scaleX(1) translateX(1000%)",
+        transformOrigin: "left",
+    },
+    "100%": {
+        transform: "scaleX(1) translateX(2000%)",
+        transformOrigin: "left",
+    },
+});
+var StyledProgressBar = styled(ProgressPrimitive.Root, {
+    boxSizing: "border-box",
+    position: "relative",
+    height: "$1",
+    overflow: "hidden",
+    borderRadius: "$pill",
+    '&[data-state="indeterminate"]': {
+        backgroundColor: "$neutral4",
+        "&::after": {
+            animationName: indeterminateProgress,
+            animationDuration: "1500ms",
+            animationIterationCount: "infinite",
+            animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
+            backgroundColor: "$neutral7",
+            boxSizing: "border-box",
+            borderRadius: "$pill",
+            content: '""',
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            width: "5%",
+        },
+    },
+    variants: {
+        variant: {
+            gray: {
+                background: "$neutral8",
+            },
+            blue: {
+                backgroundColor: "$blue9",
+            },
+            gradient: {
+                backgroundImage: "linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)",
+            },
+        },
+    },
+    defaultVariants: {
+        variant: "gray",
+    },
+});
+var ProgressBarIndicator = styled(ProgressPrimitive.Indicator, {
+    boxSizing: "border-box",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    width: "100%",
+    backgroundColor: "$neutral4",
+    transition: "transform 150ms cubic-bezier(0.65, 0, 0.35, 1)",
+});
+var ProgressBar = React.forwardRef(function (_a, forwardedRef) {
+    var value = _a.value, _b = _a.max, max = _b === void 0 ? 100 : _b, props = __rest(_a, ["value", "max"]);
+    var percentage = value != null ? Math.round((value / max) * 100) : null;
+    return (React.createElement(StyledProgressBar, __assign({}, props, { ref: forwardedRef, value: value, max: max }),
+        React.createElement(ProgressBarIndicator, { style: { transform: "translateX(".concat(percentage, "%)") } })));
+});
+ProgressBar.displayName = "ProgressBar";
+
+var Promo = styled("div", {
+    // 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 _a$4;
+var RadioGroup = styled(RadioGroupPrimitive.Root, {
+    display: "flex",
+});
+var StyledIndicator = styled(RadioGroupPrimitive.Indicator, {
+    alignItems: "center",
+    display: "flex",
+    height: "100%",
+    justifyContent: "center",
+    width: "100%",
+    position: "relative",
+    "&::after": {
+        content: '""',
+        display: "block",
+        width: "7px",
+        height: "7px",
+        borderRadius: "50%",
+        backgroundColor: "$blue9",
+    },
+});
+var StyledRadio$1 = styled(RadioGroupPrimitive.Item, {
+    all: "unset",
+    boxSizing: "border-box",
+    userSelect: "none",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    alignItems: "center",
+    appearance: "none",
+    display: "inline-flex",
+    justifyContent: "center",
+    lineHeight: "1",
+    margin: "0",
+    outline: "none",
+    padding: "0",
+    textDecoration: "none",
+    WebkitTapHighlightColor: "rgba(0,0,0,0)",
+    borderRadius: "50%",
+    color: "$hiContrast",
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    overflow: "hidden",
+    "@hover": {
+        "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$neutral8",
+        },
+    },
+    "&:focus": {
+        outline: "none",
+        borderColor: "$red7",
+        boxShadow: "inset 0 0 0 1px $colors$blue9, 0 0 0 1px $colors$blue9",
+    },
+    variants: {
+        size: {
+            "1": {
+                width: "$3",
+                height: "$3",
+            },
+            "2": (_a$4 = {
+                    width: "$5",
+                    height: "$5"
+                },
+                _a$4["& ".concat(StyledIndicator)] = {
+                    "&::after": {
+                        width: "$3",
+                        height: "$3",
+                    },
+                },
+                _a$4),
+        },
+    },
+    defaultVariants: {
+        size: "1",
+    },
+});
+var Radio = React.forwardRef(function (props, forwardedRef) { return (React.createElement(StyledRadio$1, __assign({}, props, { ref: forwardedRef }),
+    React.createElement(StyledIndicator, null))); });
+Radio.displayName = "Radio";
+
+var _a$3;
+var RadioCardGroup = 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$3 = {
+            boxShadow: "inset 0 0 0 1px $colors$primary8, 0 0 0 1px $colors$primary8 !important"
+        },
+        _a$3["& ".concat(StyledRadioIndicator)] = {
+            transform: "scale(1)",
+        },
+        _a$3),
+});
+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)); });
+RadioCard.displayName = "RadioCard";
+
+var Section = styled("section", {
+    // Reset
+    boxSizing: "border-box",
+    flexShrink: 0,
+    "&::before": {
+        boxSizing: "border-box",
+        content: '""',
+    },
+    "&::after": {
+        boxSizing: "border-box",
+        content: '""',
+    },
+    variants: {
+        size: {
+            "1": {
+                py: "$3",
+            },
+            "2": {
+                py: "$5",
+            },
+            "3": {
+                py: "$9",
+            },
+        },
+    },
+    defaultVariants: {
+        size: "3",
+    },
+});
+
+var Separator = styled(SeparatorPrimitive.Root, {
+    border: "none",
+    margin: 0,
+    flexShrink: 0,
+    backgroundColor: "$neutral6",
+    cursor: "default",
+    variants: {
+        size: {
+            "1": {
+                '&[data-orientation="horizontal"]': {
+                    height: "1px",
+                    width: "$3",
+                },
+                '&[data-orientation="vertical"]': {
+                    width: "1px",
+                    height: "$3",
+                },
+            },
+            "2": {
+                '&[data-orientation="horizontal"]': {
+                    height: "1px",
+                    width: "$7",
+                },
+                '&[data-orientation="vertical"]': {
+                    width: "1px",
+                    height: "$7",
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: "1",
+    },
+});
+
+var Sheet = DialogPrimitive.Root;
+var SheetTrigger = DialogPrimitive.Trigger;
+var fadeIn = keyframes({
+    from: { opacity: "0" },
+    to: { opacity: "1" },
+});
+var fadeOut = keyframes({
+    from: { opacity: "1" },
+    to: { opacity: "0" },
+});
+var StyledOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    '&[data-state="open"]': {
+        animation: "".concat(fadeIn, " 150ms cubic-bezier(0.22, 1, 0.36, 1)"),
+    },
+    '&[data-state="closed"]': {
+        animation: "".concat(fadeOut, " 150ms cubic-bezier(0.22, 1, 0.36, 1)"),
+    },
+});
+var slideIn = keyframes({
+    from: { transform: "$$transformValue" },
+    to: { transform: "translate3d(0,0,0)" },
+});
+var slideOut = keyframes({
+    from: { transform: "translate3d(0,0,0)" },
+    to: { transform: "$$transformValue" },
+});
+var StyledContent$1 = styled(DialogPrimitive.Content, {
+    backgroundColor: "$panel",
+    boxShadow: "$colors$shadowLight 0 0 38px -10px, $colors$shadowDark 0 0 35px -15px",
+    position: "fixed",
+    top: 0,
+    bottom: 0,
+    width: 250,
+    // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
+    // Affects animated and non-animated dialogs alike.
+    willChange: "transform",
+    // '&:focus': {
+    //   outline: 'none',
+    // },
+    '&[data-state="open"]': {
+        animation: "".concat(slideIn, " 150ms cubic-bezier(0.22, 1, 0.36, 1)"),
+    },
+    '&[data-state="closed"]': {
+        animation: "".concat(slideOut, " 150ms cubic-bezier(0.22, 1, 0.36, 1)"),
+    },
+    variants: {
+        side: {
+            top: {
+                $$transformValue: "translate3d(0,-100%,0)",
+                width: "100%",
+                height: 300,
+                bottom: "auto",
+            },
+            right: {
+                $$transformValue: "translate3d(100%,0,0)",
+                right: 0,
+            },
+            bottom: {
+                $$transformValue: "translate3d(0,100%,0)",
+                width: "100%",
+                height: 300,
+                bottom: 0,
+                top: "auto",
+            },
+            left: {
+                $$transformValue: "translate3d(-100%,0,0)",
+                left: 0,
+            },
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+var StyledCloseButton = styled(DialogPrimitive.Close, {
+    position: "absolute",
+    top: "$2",
+    right: "$2",
+});
+var SheetContent = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(DialogPrimitive.Portal, null,
+        React.createElement(StyledOverlay, null),
+        React.createElement(StyledContent$1, __assign({}, props, { ref: forwardedRef }),
+            children,
+            React.createElement(StyledCloseButton, { asChild: true },
+                React.createElement(IconButton, { variant: "ghost" },
+                    React.createElement(Cross1Icon, null))))));
+});
+SheetContent.displayName = "SheetContent";
+var SheetClose = DialogPrimitive.Close;
+var SheetTitle = DialogPrimitive.Title;
+var SheetDescription = DialogPrimitive.Description;
+
+var SimpleToggle = styled(TogglePrimitive.Root, {
+    // Reset
+    alignItems: "center",
+    appearance: "none",
+    borderWidth: "0",
+    boxSizing: "border-box",
+    display: "inline-flex",
+    flexShrink: 0,
+    fontFamily: "inherit",
+    fontSize: "14px",
+    justifyContent: "center",
+    lineHeight: "1",
+    outline: "none",
+    padding: "0",
+    textDecoration: "none",
+    userSelect: "none",
+    WebkitTapHighlightColor: "transparent",
+    color: "$hiContrast",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    height: "$5",
+    width: "$5",
+    backgroundColor: "transparent",
+    "@hover": {
+        "&:hover": {
+            backgroundColor: "$neutralA3",
+        },
+    },
+    "&:active": {
+        backgroundColor: "$neutralA4",
+    },
+    "&:focus": {
+        boxShadow: "inset 0 0 0 1px $neutralA8, 0 0 0 1px $neutralA8",
+        zIndex: 1,
+    },
+    '&[data-state="on"]': {
+        backgroundColor: "$neutralA5",
+        "@hover": {
+            "&:hover": {
+                backgroundColor: "$neutralA5",
+            },
+        },
+        "&:active": {
+            backgroundColor: "$neutralA7",
+        },
+    },
+    variants: {
+        shape: {
+            circle: {
+                borderRadius: "$round",
+            },
+            square: {
+                borderRadius: "$1",
+            },
+        },
+    },
+});
+
+var pulse = keyframes({
+    "0%": { opacity: 0 },
+    "100%": { opacity: "100%" },
+});
+var Skeleton = styled("div", {
+    backgroundColor: "$neutral4",
+    position: "relative",
+    overflow: "hidden",
+    "&::after": {
+        animationName: "".concat(pulse),
+        animationDuration: "500ms",
+        animationDirection: "alternate",
+        animationIterationCount: "infinite",
+        animationTimingFunction: "ease-in-out",
+        backgroundColor: "$neutral6",
+        borderRadius: "inherit",
+        bottom: 0,
+        content: '""',
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+    },
+    variants: {
+        variant: {
+            avatar1: {
+                borderRadius: "$round",
+                height: "$3",
+                width: "$3",
+            },
+            avatar2: {
+                borderRadius: "$round",
+                height: "$5",
+                width: "$5",
+            },
+            avatar3: {
+                borderRadius: "$round",
+                height: "$6",
+                width: "$6",
+            },
+            avatar4: {
+                borderRadius: "$round",
+                height: "$7",
+                width: "$7",
+            },
+            avatar5: {
+                borderRadius: "$round",
+                height: "$8",
+                width: "$8",
+            },
+            avatar6: {
+                borderRadius: "$round",
+                height: "$9",
+                width: "$9",
+            },
+            text: {
+                height: "$1",
+            },
+            title: {
+                height: "$5",
+            },
+            heading: {
+                height: "$3",
+            },
+            button: {
+                borderRadius: "$1",
+                height: "$5",
+                width: "$8",
+            },
+        },
+    },
+    defaultVariants: {
+        variant: "text",
+    },
+});
+
+var _a$2;
+var SliderTrack = styled(SliderPrimitive.Track, {
+    position: "relative",
+    flexGrow: 1,
+    backgroundColor: "$neutral7",
+    borderRadius: "$pill",
+    '&[data-orientation="horizontal"]': {
+        height: 2,
+    },
+    '&[data-orientation="vertical"]': {
+        width: 2,
+        height: 100,
+    },
+});
+var SliderRange = styled(SliderPrimitive.Range, {
+    position: "absolute",
+    background: "$blue9",
+    borderRadius: "inherit",
+    '&[data-orientation="horizontal"]': {
+        height: "100%",
+    },
+    '&[data-orientation="vertical"]': {
+        width: "100%",
+    },
+});
+var SliderThumb = styled(SliderPrimitive.Thumb, {
+    position: "relative",
+    display: "block",
+    width: 15,
+    height: 15,
+    outline: "none",
+    opacity: "0",
+    backgroundColor: "white",
+    boxShadow: "0 0 1px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.15)",
+    borderRadius: "$round",
+    "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: -2,
+        backgroundColor: "hsla(0,0%,0%,.035)",
+        transform: "scale(1)",
+        borderRadius: "$round",
+        transition: "transform 200ms cubic-bezier(0.22, 1, 0.36, 1)",
+    },
+    "&:focus": {
+        "&::after": {
+            transform: "scale(2)",
+        },
+    },
+});
+var StyledSlider = styled(SliderPrimitive.Root, {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    userSelect: "none",
+    touchAction: "none",
+    height: 15,
+    flexGrow: 1,
+    '&[data-orientation="vertical"]': {
+        flexDirection: "column",
+        width: 15,
+    },
+    "@hover": {
+        "&:hover": (_a$2 = {},
+            _a$2["& ".concat(SliderTrack)] = {
+                backgroundColor: "$neutral8",
+            },
+            _a$2["& ".concat(SliderThumb)] = {
+                opacity: "1",
+            },
+            _a$2),
+    },
+});
+var Slider = React.forwardRef(function (props, forwardedRef) {
+    var hasRange = Array.isArray(props.defaultValue || props.value);
+    var thumbsArray = hasRange
+        ? props.defaultValue || props.value
+        : [props.defaultValue || props.value];
+    return (React.createElement(StyledSlider, __assign({}, props, { ref: forwardedRef }),
+        React.createElement(SliderTrack, null,
+            React.createElement(SliderRange, null)),
+        thumbsArray.map(function (_, i) { return (React.createElement(SliderThumb, { key: i })); })));
+});
+Slider.displayName = "Slider";
+
+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",
+    },
+};
+
+// type coercion for bad typing in lib
+var CSSTransitionTyped = CSSTransition;
+// 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(CSSTransitionTyped, { 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: "$neutral4",
+                            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",
+                                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 Sub = styled("sub", {
+    fontFeatureSettings: '"subs"',
+    fontSize: "100%",
+    lineHeight: "1",
+    verticalAlign: "baseline",
+});
+
+var Sup = styled("sup", {
+    fontFeatureSettings: '"sups"',
+    fontSize: "100%",
+    lineHeight: "1",
+    verticalAlign: "baseline",
+});
+
+var _a$1;
+var StyledThumb = styled(SwitchPrimitive.Thumb, {
+    position: "absolute",
+    left: 0,
+    width: 13,
+    height: 13,
+    backgroundColor: "white",
+    borderRadius: "$round",
+    boxShadow: "rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;",
+    transition: "transform 100ms cubic-bezier(0.22, 1, 0.36, 1)",
+    transform: "translateX(1px)",
+    willChange: "transform",
+    '&[data-state="checked"]': {
+        transform: "translateX(11px)",
+    },
+});
+var StyledSwitch = styled(SwitchPrimitive.Root, {
+    all: "unset",
+    boxSizing: "border-box",
+    userSelect: "none",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    // Reset
+    alignItems: "center",
+    display: "inline-flex",
+    justifyContent: "center",
+    lineHeight: "1",
+    margin: "0",
+    outline: "none",
+    WebkitTapHighlightColor: "rgba(0,0,0,0)",
+    backgroundColor: "$neutral5",
+    borderRadius: "$pill",
+    position: "relative",
+    "&:focus": {
+        boxShadow: "0 0 0 2px $colors$neutral8",
+    },
+    '&[data-state="checked"]': {
+        backgroundColor: "$blue9",
+        "&:focus": {
+            boxShadow: "0 0 0 2px $colors$blue8",
+        },
+    },
+    variants: {
+        size: {
+            "1": {
+                width: "$5",
+                height: "$3",
+            },
+            "2": (_a$1 = {
+                    width: "$7",
+                    height: "$5"
+                },
+                _a$1["& ".concat(StyledThumb)] = {
+                    width: 21,
+                    height: 21,
+                    transform: "translateX(2px)",
+                    '&[data-state="checked"]': {
+                        transform: "translateX(22px)",
+                    },
+                },
+                _a$1),
+        },
+    },
+    defaultVariants: {
+        size: "1",
+    },
+});
+var SwitchBase = React.forwardRef(function (props, forwardedRef) { return (React.createElement(StyledSwitch, __assign({}, props, { ref: forwardedRef }),
+    React.createElement(StyledThumb, null))); });
+SwitchBase.displayName = "Switch";
+var Switch = styled(SwitchBase, {
+    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, _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),
+        },
+    },
+});
+
+var TabLink = styled("a", {
+    position: "relative",
+    flexShrink: 0,
+    height: "$6",
+    display: "inline-flex",
+    lineHeight: 1,
+    fontSize: "$1",
+    px: "$3",
+    userSelect: "none",
+    outline: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "$neutral11",
+    textDecoration: "none",
+    "@hover": {
+        "&:hover": {
+            color: "$hiContrast",
+        },
+    },
+    "&:focus": {
+        boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+    },
+    variants: {
+        active: {
+            true: {
+                color: "$hiContrast",
+                cursor: "default",
+                "&::after": {
+                    position: "absolute",
+                    content: '""',
+                    left: 0,
+                    bottom: 0,
+                    width: "100%",
+                    height: 2,
+                    backgroundColor: "$blue9",
+                },
+            },
+        },
+    },
+});
+
+var Tabs = styled(TabsPrimitive.Root, {
+    display: "flex",
+    '&[data-orientation="horizontal"]': {
+        flexDirection: "column",
+    },
+});
+var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
+    flexShrink: 0,
+    height: "$5",
+    display: "inline-flex",
+    lineHeight: 1,
+    fontSize: "$1",
+    px: "$2",
+    userSelect: "none",
+    outline: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "$neutral11",
+    border: "1px solid transparent",
+    borderTopLeftRadius: "$2",
+    borderTopRightRadius: "$2",
+    zIndex: "10",
+    "@hover": {
+        "&:hover": {
+            color: "$hiContrast",
+        },
+    },
+    '&[data-state="active"]': {
+        color: "$hiContrast",
+        borderColor: "$neutral6",
+        borderBottomColor: "transparent",
+    },
+    '&[data-orientation="vertical"]': {
+        justifyContent: "flex-start",
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: "$2",
+        borderBottomColor: "transparent",
+        '&[data-state="active"]': {
+            borderBottomColor: "$neutral6",
+            borderRightColor: "transparent",
+        },
+    },
+});
+var StyledTabsListBase = styled(TabsPrimitive.List, {
+    flexShrink: 0,
+    display: "flex",
+    "&:focus": {
+        outline: "none",
+        boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
+    },
+    '&[data-orientation="vertical"]': {
+        flexDirection: "column",
+        boxShadow: "inset -1px 0 0 $neutral6",
+    },
+});
+var TabsListBase = React.forwardRef(function (props, forwardedRef) { return (React.createElement(React.Fragment, null,
+    React.createElement(StyledTabsListBase, __assign({}, props, { ref: forwardedRef })),
+    React.createElement(Separator, null))); });
+TabsListBase.displayName = "TabsListBase";
+var TabsContentBase = styled(TabsPrimitive.Content, {
+    flexGrow: 1,
+    "&:focus": {
+        outline: "none",
+        boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
+    },
+});
+var TabsTrigger = styled(TabsTriggerBase, {
+    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(TabsListBase, {
+    "&: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(TabsContentBase, {
+    "&:focus": {
+        boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
+    },
+});
+
+var TextArea = styled("textarea", {
+    // Reset
+    appearance: "none",
+    borderWidth: "0",
+    fontFamily: "inherit",
+    margin: "0",
+    outline: "none",
+    padding: "$1",
+    width: "100%",
+    WebkitTapHighlightColor: "rgba(0,0,0,0)",
+    backgroundColor: "$loContrast",
+    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    color: "$hiContrast",
+    fontVariantNumeric: "tabular-nums",
+    position: "relative",
+    minHeight: 80,
+    resize: "vertical",
+    "&:focus": {
+        boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
+        zIndex: "1",
+    },
+    "&::placeholder": {
+        color: "$neutral9",
+    },
+    "&:disabled": {
+        pointerEvents: "none",
+        backgroundColor: "$neutral2",
+        color: "$neutral8",
+        cursor: "not-allowed",
+        resize: "none",
+        "&::placeholder": {
+            color: "$neutral7",
+        },
+    },
+    "&:read-only": {
+        backgroundColor: "$neutral2",
+        "&:focus": {
+            boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
+        },
+    },
+    variants: {
+        size: {
+            "1": {
+                borderRadius: "$1",
+                fontSize: "$1",
+                lineHeight: "16px",
+                px: "$1",
+            },
+            "2": {
+                borderRadius: "$1",
+                fontSize: "$2",
+                lineHeight: "20px",
+                px: "$1",
+            },
+            "3": {
+                borderRadius: "$2",
+                fontSize: "$3",
+                lineHeight: "23px",
+                px: "$2",
+            },
+        },
+        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 StyledContent = styled(TooltipPrimitive.Content, {
+    backgroundColor: "$transparentPanel",
+    borderRadius: "$1",
+    padding: "$1 $2",
+    variants: {
+        multiline: {
+            true: {
+                maxWidth: 250,
+                pb: 7,
+            },
+        },
+    },
+});
+function Tooltip(_a) {
+    var children = _a.children, content = _a.content, open = _a.open, defaultOpen = _a.defaultOpen, onOpenChange = _a.onOpenChange, delayDuration = _a.delayDuration, disableHoverableContent = _a.disableHoverableContent, multiline = _a.multiline, props = __rest(_a, ["children", "content", "open", "defaultOpen", "onOpenChange", "delayDuration", "disableHoverableContent", "multiline"]);
+    var rootProps = {
+        open: open,
+        defaultOpen: defaultOpen,
+        onOpenChange: onOpenChange,
+        delayDuration: delayDuration,
+        disableHoverableContent: disableHoverableContent,
+    };
+    return (React.createElement(TooltipPrimitive.Root, __assign({}, rootProps),
+        React.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
+        React.createElement(TooltipPrimitive.Portal, null,
+            React.createElement(StyledContent, __assign({ side: "top", align: "center", sideOffset: 5 }, props, { multiline: multiline }),
+                React.createElement(Text, { size: "1", as: "p", css: {
+                        color: "$loContrast",
+                        lineHeight: multiline ? "20px" : undefined,
+                    } }, content),
+                React.createElement(Box, { css: { color: "$transparentExtreme" } },
+                    React.createElement(TooltipPrimitive.Arrow, { width: 11, height: 5, style: { fill: "currentColor" } }))))));
+}
+
+var TreeItem = styled("div", {
+    // Reset
+    alignItems: "center",
+    boxSizing: "border-box",
+    display: "flex",
+    lineHeight: "1",
+    userSelect: "none",
+    WebkitTapHighlightColor: "transparent",
+    "&:disabled": {
+        pointerEvents: "none",
+    },
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    // Custom
+    height: "29px",
+    px: "$2",
+    fontSize: "$1",
+    color: "$hiContrast",
+    variants: {
+        variant: {
+            gray: {
+                backgroundColor: "$neutral3",
+                "&:hover": {
+                    backgroundColor: "$neutral4",
+                },
+                "&:active": {
+                    backgroundColor: "$neutral5",
+                },
+            },
+            red: {
+                backgroundColor: "$red3",
+                "&:hover": {
+                    backgroundColor: "$red4",
+                },
+                "&:active": {
+                    backgroundColor: "$red5",
+                },
+            },
+            crimson: {
+                backgroundColor: "$crimson3",
+                "&:hover": {
+                    backgroundColor: "$crimson4",
+                },
+                "&:active": {
+                    backgroundColor: "$crimson5",
+                },
+            },
+            pink: {
+                backgroundColor: "$pink3",
+                "&:hover": {
+                    backgroundColor: "$pink4",
+                },
+                "&:active": {
+                    backgroundColor: "$pink5",
+                },
+            },
+            purple: {
+                backgroundColor: "$purple3",
+                "&:hover": {
+                    backgroundColor: "$purple4",
+                },
+                "&:active": {
+                    backgroundColor: "$purple5",
+                },
+            },
+            violet: {
+                backgroundColor: "$violet3",
+                "&:hover": {
+                    backgroundColor: "$violet4",
+                },
+                "&:active": {
+                    backgroundColor: "$violet5",
+                },
+            },
+            indigo: {
+                backgroundColor: "$indigo3",
+                "&:hover": {
+                    backgroundColor: "$indigo4",
+                },
+                "&:active": {
+                    backgroundColor: "$indigo5",
+                },
+            },
+            blue: {
+                backgroundColor: "$blue3",
+                "&:hover": {
+                    backgroundColor: "$blue4",
+                },
+                "&:active": {
+                    backgroundColor: "$blue5",
+                },
+            },
+            cyan: {
+                backgroundColor: "$cyan3",
+                "&:hover": {
+                    backgroundColor: "$cyan4",
+                },
+                "&:active": {
+                    backgroundColor: "$cyan5",
+                },
+            },
+            teal: {
+                backgroundColor: "$teal3",
+                "&:hover": {
+                    backgroundColor: "$teal4",
+                },
+                "&:active": {
+                    backgroundColor: "$teal5",
+                },
+            },
+            green: {
+                backgroundColor: "$green3",
+                "&:hover": {
+                    backgroundColor: "$green4",
+                },
+                "&:active": {
+                    backgroundColor: "$green5",
+                },
+            },
+            lime: {
+                backgroundColor: "$lime3",
+                "&:hover": {
+                    backgroundColor: "$lime4",
+                },
+                "&:active": {
+                    backgroundColor: "$lime5",
+                },
+            },
+            yellow: {
+                backgroundColor: "$yellow3",
+                "&:hover": {
+                    backgroundColor: "$yellow4",
+                },
+                "&:active": {
+                    backgroundColor: "$yellow5",
+                },
+            },
+            amber: {
+                backgroundColor: "$amber3",
+                "&:hover": {
+                    backgroundColor: "$amber4",
+                },
+                "&:active": {
+                    backgroundColor: "$amber5",
+                },
+            },
+            orange: {
+                backgroundColor: "$orange3",
+                "&:hover": {
+                    backgroundColor: "$orange4",
+                },
+                "&:active": {
+                    backgroundColor: "$orange5",
+                },
+            },
+            gold: {
+                backgroundColor: "$gold3",
+                "&:hover": {
+                    backgroundColor: "$gold4",
+                },
+                "&:active": {
+                    backgroundColor: "$gold5",
+                },
+            },
+            brown: {
+                backgroundColor: "$brown3",
+                "&:hover": {
+                    backgroundColor: "$brown4",
+                },
+                "&:active": {
+                    backgroundColor: "$brown5",
+                },
+            },
+            bronze: {
+                backgroundColor: "$bronze3",
+                "&:hover": {
+                    backgroundColor: "$bronze4",
+                },
+                "&:active": {
+                    backgroundColor: "$bronze5",
+                },
+            },
+        },
+    },
+});
+
+var StyledVerifiedBadge = styled("div", Flex, {
+    alignItems: "center",
+    backgroundColor: "$blue9",
+    borderRadius: "$round",
+    color: "white",
+    flexShrink: 0,
+    justifyContent: "center",
+    width: "$3",
+    height: "$3",
+});
+var VerifiedBadge = React.forwardRef(function (props, forwardedRef) { return (React.createElement(StyledVerifiedBadge, __assign({}, props, { ref: forwardedRef }),
+    React.createElement(CheckIcon, null))); });
+VerifiedBadge.displayName = "VerifiedBadge";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, AvatarNestedItem, Badge, Banner, Box, Button, Caption, Card, Checkbox, Code, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuTrigger, ControlGroup, DesignSystemProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Flex, Grid, Heading, IconButton, Image, Kbd, Label, Link, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, Overlay, Panel, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, ProgressBar, Promo, Radio, RadioCard, RadioCardGroup, RadioGroup, Section, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, SimpleToggle, Skeleton, Slider, SnackbarProvider, Status, Sub, Sup, Switch, TabLink, Table, Tabs, TabsContent, TabsList, TabsTrigger, Tbody, Td, Text, TextArea, TextField, Tfoot, Th, Thead, Tooltip, Tr, TreeItem, VerifiedBadge, config, css, getCssText, getThemes, globalCss, keyframes, styled, useSnackbar };