@livepeer/design-system 1.1.0-0 → 1.1.1

package/dist/index.es.js

@@ -1,4912 +0,0 @@
-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: "$slate12", 
-            // loContrast: '$slate1',
-            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",
-        },
-        // space: {
-        //   1: '4px',
-        //   2: '8px',
-        //   3: '16px',
-        //   4: '20px',
-        //   5: '24px',
-        //   6: '32px',
-        //   7: '48px',
-        //   8: '64px',
-        //   9: '80px',
-        // },
-        // sizes: {
-        //   1: '4px',
-        //   2: '8px',
-        //   3: '16px',
-        //   4: '20px',
-        //   5: '24px',
-        //   6: '32px',
-        //   7: '48px',
-        //   8: '64px',
-        //   9: '80px',
-        // },
-        fontSizes: {
-            1: "12px",
-            2: "13px",
-            3: "15px",
-            4: "17px",
-            5: "19px",
-            6: "21px",
-            7: "27px",
-            8: "35px",
-            9: "59px",
-        },
-        // fontSizes: {
-        //   1: '11px',
-        //   2: '12px',
-        //   3: '15px',
-        //   4: '17px',
-        //   5: '20px',
-        //   6: '22px',
-        //   7: '28px',
-        //   8: '36px',
-        //   9: '60px',
-        // },
-        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: "$slate12", loContrast: "$slate1", canvas: "hsl(0 0% 15%)", panel: "$slate3", 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), { 
-                // 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), { 
-                // 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: "$1",
-});
-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$slate6",
-    "&:last-of-type": {
-        borderBottom: "1px solid $colors$slate6",
-    },
-});
-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%",
-    cursor: "pointer",
-    "@hover": {
-        "&:hover": {
-            backgroundColor: "$slate2",
-        },
-    },
-    "&:focus": {
-        outline: "none",
-        boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-    },
-    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: "$slate6",
-            },
-            gray: {
-                backgroundColor: "$slate2",
-                borderColor: "$slate6",
-            },
-            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: "$slate7",
-            },
-            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: "$slate5",
-            },
-            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: "$slate3",
-        pointerEvents: "none",
-        color: "$slate8",
-    },
-    "&::before": {
-        boxSizing: "border-box",
-        content: '""',
-    },
-    "&::after": {
-        boxSizing: "border-box",
-        content: '""',
-    },
-    // Custom
-    backgroundColor: "$slate3",
-    borderRadius: "$pill",
-    color: "$slate11",
-    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: "$slate3",
-                color: "$slate11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-                },
-            },
-            red: {
-                backgroundColor: "$red3",
-                color: "$red11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$red8, 0 0 0 1px $colors$red8",
-                },
-            },
-            crimson: {
-                backgroundColor: "$crimson3",
-                color: "$crimson11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$crimson8, 0 0 0 1px $colors$crimson8",
-                },
-            },
-            pink: {
-                backgroundColor: "$pink3",
-                color: "$pink11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$pink8, 0 0 0 1px $colors$pink8",
-                },
-            },
-            purple: {
-                backgroundColor: "$purple3",
-                color: "$purple11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$purple8, 0 0 0 1px $colors$purple8",
-                },
-            },
-            violet: {
-                backgroundColor: "$violet3",
-                color: "$violet11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$violet8, 0 0 0 1px $colors$violet8",
-                },
-            },
-            indigo: {
-                backgroundColor: "$indigo3",
-                color: "$indigo11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$indigo8, 0 0 0 1px $colors$indigo8",
-                },
-            },
-            blue: {
-                backgroundColor: "$blue3",
-                color: "$blue11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8",
-                },
-            },
-            cyan: {
-                backgroundColor: "$cyan3",
-                color: "$cyan11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$cyan8, 0 0 0 1px $colors$cyan8",
-                },
-            },
-            teal: {
-                backgroundColor: "$teal3",
-                color: "$teal11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$teal8, 0 0 0 1px $colors$teal8",
-                },
-            },
-            green: {
-                backgroundColor: "$green3",
-                color: "$green11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$green8, 0 0 0 1px $colors$green8",
-                },
-            },
-            lime: {
-                backgroundColor: "$lime3",
-                color: "$lime11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$lime8, 0 0 0 1px $colors$lime8",
-                },
-            },
-            yellow: {
-                backgroundColor: "$yellow3",
-                color: "$yellow11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$yellow8, 0 0 0 1px $colors$yellow8",
-                },
-            },
-            orange: {
-                backgroundColor: "$orange3",
-                color: "$orange11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$orange8, 0 0 0 1px $colors$orange8",
-                },
-            },
-            gold: {
-                backgroundColor: "$gold3",
-                color: "$gold11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$gold8, 0 0 0 1px $colors$gold8",
-                },
-            },
-            bronze: {
-                backgroundColor: "$bronze3",
-                color: "$bronze11",
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$bronze8, 0 0 0 1px $colors$bronze8",
-                },
-            },
-        },
-        interactive: {
-            true: {},
-        },
-    },
-    compoundVariants: [
-        {
-            interactive: true,
-            variant: "red",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$red4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$red5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$red5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "crimson",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$crimson4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$crimson5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$crimson5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "pink",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$pink4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$pink5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$pink5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "purple",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$purple4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$purple5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$purple5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "violet",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$violet4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$violet5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$violet5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "indigo",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$indigo4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$indigo5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$indigo5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "blue",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$blue4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$blue5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$blue5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "cyan",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$cyan4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$cyan5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$cyan5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "teal",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$teal4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$teal5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$teal5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "green",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$green4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$green5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$green5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "lime",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$lime4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$lime5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$lime5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "yellow",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$yellow4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$yellow5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$yellow5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "orange",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$orange4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$orange5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$orange5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "gold",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$gold4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$gold5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$gold5",
-                },
-            },
-        },
-        {
-            interactive: true,
-            variant: "bronze",
-            css: {
-                "@hover": {
-                    "&:hover": {
-                        backgroundColor: "$bronze4",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$bronze5",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$bronze5",
-                },
-            },
-        },
-    ],
-    defaultVariants: {
-        size: "1",
-        variant: "neutral",
-    },
-});
-
-var 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$slate7",
-    overflow: "hidden",
-    "@hover": {
-        "&:hover": {
-            boxShadow: "inset 0 0 0 1px $colors$slate8",
-        },
-    },
-    "&: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: "$slate3",
-                color: "$slate11",
-            },
-            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: "$slate9",
-    },
-});
-var labelCss = css(baseItemCss, {
-    color: "$slate11",
-});
-var menuCss = css({
-    boxSizing: "border-box",
-    minWidth: 120,
-    py: "$1",
-});
-var separatorCss = css({
-    height: 1,
-    my: "$1",
-    backgroundColor: "$slate6",
-});
-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$slate7",
-    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$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-        "&:hover": {
-            boxShadow: "-1px 0 $colors$slate8, inset 0 1px $colors$slate8, inset -1px 0 $colors$slate8, inset 0 -1px $colors$slate8",
-        },
-        "&:focus": {
-            zIndex: 1,
-            boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-        },
-        "&:first-child": {
-            borderTopLeftRadius: "$1",
-            borderBottomLeftRadius: "$1",
-            boxShadow: "inset 0 0 0 1px $colors$slate7",
-            "&:hover": {
-                boxShadow: "inset 0 0 0 1px $colors$slate8",
-            },
-            "&:focus": {
-                boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-            },
-        },
-        "&:last-child": {
-            borderTopRightRadius: "$1",
-            borderBottomRightRadius: "$1",
-            boxShadow: "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-            "&:focus": {
-                boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-            },
-        },
-    },
-    _a$6["& ".concat(TextField)] = {
-        borderRadius: 0,
-        boxShadow: "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-        "&: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$slate7",
-            "&: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$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-            "&: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$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-        "&: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$slate7",
-            "&: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$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-            "&: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 $slate7",
-    "@hover": {
-        "&:hover": {
-            borderColor: "$slate8",
-        },
-    },
-    "&:active": {
-        backgroundColor: "$slate2",
-    },
-    "&:focus": {
-        borderColor: "$slate8",
-        boxShadow: "0 0 0 1px $colors$slate8",
-    },
-    "&:disabled": {
-        pointerEvents: "none",
-        backgroundColor: "transparent",
-        color: "$slate6",
-    },
-    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: "$slateA3",
-                    },
-                },
-                "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$slateA8, 0 0 0 1px $colors$slateA8",
-                },
-                "&:active": {
-                    backgroundColor: "$slateA4",
-                },
-                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$slateA4",
-                },
-            },
-            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: "$slate8",
-                    boxShadow: "0 0 0 1px $colors$slate8, 0 16px 32px hsl(206deg 12% 5% / 25%), 0 3px 5px hsl(0deg 0% 0% / 10%)",
-                },
-                "&:active": {
-                    backgroundColor: "$slate4",
-                },
-            },
-        },
-        state: {
-            active: {
-                backgroundColor: "$slate4",
-                boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
-                "@hover": {
-                    "&:hover": {
-                        boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$slate4",
-                },
-            },
-            waiting: {
-                backgroundColor: "$slate4",
-                boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
-                "@hover": {
-                    "&:hover": {
-                        boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
-                    },
-                },
-                "&:active": {
-                    backgroundColor: "$slate4",
-                },
-            },
-        },
-    },
-    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",
-    cursor: "pointer"
-});
-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: "$".concat(color, "4"),
-            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, {
-    variants: {
-        color: __assign({ primary: {
-                "&:focus": {
-                    outline: "none",
-                    backgroundColor: "$primary4",
-                    color: "$hiContrast",
-                },
-            } }, colorVariants),
-    },
-    defaultVariants: {
-        color: "primary",
-    },
-});
-var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
-    variants: {
-        color: __assign({ primary: {
-                "&:focus": {
-                    outline: "none",
-                    backgroundColor: "$primary4",
-                    color: "$hiContrast",
-                },
-            } }, colorVariants),
-    },
-    defaultVariants: {
-        color: "primary",
-    },
-});
-var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
-    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: "$slate11",
-            },
-            primary: {
-                color: "$primary11",
-            },
-            neutral: {
-                color: "$neutral11",
-            },
-            contrast: {
-                color: "$hiContrast",
-            },
-        },
-        gradient: {
-            true: {
-                WebkitBackgroundClip: "text",
-                WebkitTextFillColor: "transparent",
-            },
-        },
-    },
-    compoundVariants: [
-        {
-            variant: "red",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $red11, $crimson11)",
-            },
-        },
-        {
-            variant: "crimson",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $crimson11, $pink11)",
-            },
-        },
-        {
-            variant: "pink",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $pink11, $purple11)",
-            },
-        },
-        {
-            variant: "purple",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $purple11, $violet11)",
-            },
-        },
-        {
-            variant: "violet",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $violet11, $indigo11)",
-            },
-        },
-        {
-            variant: "indigo",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $indigo11, $blue11)",
-            },
-        },
-        {
-            variant: "blue",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $blue11, $cyan11)",
-            },
-        },
-        {
-            variant: "cyan",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $cyan11, $teal11)",
-            },
-        },
-        {
-            variant: "teal",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $teal11, $green11)",
-            },
-        },
-        {
-            variant: "green",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $green11, $lime11)",
-            },
-        },
-        {
-            variant: "lime",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $lime11, $yellow11)",
-            },
-        },
-        {
-            variant: "yellow",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $yellow11, $orange11)",
-            },
-        },
-        {
-            variant: "orange",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $orange11, $red11)",
-            },
-        },
-        {
-            variant: "gold",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $gold11, $gold9)",
-            },
-        },
-        {
-            variant: "bronze",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $bronze11, $bronze9)",
-            },
-        },
-        {
-            variant: "gray",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $gray11, $gray12)",
-            },
-        },
-        {
-            variant: "contrast",
-            gradient: "true",
-            css: {
-                background: "linear-gradient(to right, $hiContrast, $gray12)",
-            },
-        },
-    ],
-    defaultVariants: {
-        size: "3",
-        variant: "contrast",
-    },
-});
-
-var DEFAULT_TAG$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$slate2,\n    0px 0px 0px 0.5px $colors$slate8,\n    0px 2px 1px -1px $colors$slate8,\n    0 1px $colors$slate8",
-    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: "$slate11",
-            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: "$slate4",
-        "&::after": {
-            animationName: indeterminateProgress,
-            animationDuration: "1500ms",
-            animationIterationCount: "infinite",
-            animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
-            backgroundColor: "$slate7",
-            boxSizing: "border-box",
-            borderRadius: "$pill",
-            content: '""',
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            left: 0,
-            width: "5%",
-        },
-    },
-    variants: {
-        variant: {
-            gray: {
-                background: "$slate8",
-            },
-            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: "$slate4",
-    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$slate7",
-    overflow: "hidden",
-    "@hover": {
-        "&:hover": {
-            boxShadow: "inset 0 0 0 1px $colors$slate8",
-        },
-    },
-    "&: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: "$slate6",
-    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: "$slateA3",
-        },
-    },
-    "&:active": {
-        backgroundColor: "$slateA4",
-    },
-    "&:focus": {
-        boxShadow: "inset 0 0 0 1px $slateA8, 0 0 0 1px $slateA8",
-        zIndex: 1,
-    },
-    '&[data-state="on"]': {
-        backgroundColor: "$slateA5",
-        "@hover": {
-            "&:hover": {
-                backgroundColor: "$slateA5",
-            },
-        },
-        "&:active": {
-            backgroundColor: "$slateA7",
-        },
-    },
-    variants: {
-        shape: {
-            circle: {
-                borderRadius: "$round",
-            },
-            square: {
-                borderRadius: "$1",
-            },
-        },
-    },
-});
-
-var pulse = keyframes({
-    "0%": { opacity: 0 },
-    "100%": { opacity: "100%" },
-});
-var Skeleton = styled("div", {
-    backgroundColor: "$slate4",
-    position: "relative",
-    overflow: "hidden",
-    "&::after": {
-        animationName: "".concat(pulse),
-        animationDuration: "500ms",
-        animationDirection: "alternate",
-        animationIterationCount: "infinite",
-        animationTimingFunction: "ease-in-out",
-        backgroundColor: "$slate6",
-        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: "$slate7",
-    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: "$slate8",
-            },
-            _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: "$panel",
-                            boxShadow: "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12)",
-                            WebkitFontSmoothing: "antialiased",
-                            MozOsxFontSmoothing: "grayscale",
-                            fontFamily: "sans-serif",
-                            fontSize: "14px",
-                            fontWeight: "400",
-                            color: "$hiContrast",
-                            letterSpacing: "0.25px",
-                            lineHeight: "20px",
-                            textAlign: "left",
-                        }, style: customStyles },
-                        React.createElement(Box, { css: {
-                                flexGrow: 1,
-                                padding: "14px 16px",
-                                margin: "0",
-                                pointerEvents: "auto",
-                                color: "$hiContrast",
-                            } }, text),
-                        React.createElement(Box, { as: "button", css: {
-                                lexShrink: "0",
-                                boxSizing: "border-box",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                width: "36px",
-                                height: "36px",
-                                padding: "8px",
-                                margin: "0 8px 0 0",
-                                cursor: "pointer",
-                                position: "relative",
-                                pointerEvents: "auto",
-                                WebkitTapHighlightColor: "transparent",
-                                /* Reset button styles */
-                                outline: "none",
-                                backgroundColor: "transparent",
-                                border: "none",
-                                /* SVG icon properties */
-                                fontSize: "12px",
-                                color: "$hiContrast",
-                                "&:hover:before": {
-                                    opacity: "0.08",
-                                },
-                                "&:before": {
-                                    content: '""',
-                                    backgroundColor: "$hiContrast",
-                                    borderRadius: "50%",
-                                    opacity: "0",
-                                    position: "absolute",
-                                    transition: "opacity 120ms linear",
-                                    top: "0%",
-                                    left: "0%",
-                                    width: "100%",
-                                    height: "100%",
-                                },
-                            }, onClick: closeSnackbar, style: closeCustomStyles },
-                            React.createElement(CloseIcon, null))))))));
-};
-// CloseIcon SVG is styled with font properties
-var CloseIcon = function () { return (React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 12" },
-    React.createElement("path", { fill: "currentColor", d: "M11.73 1.58L7.31 6l4.42 4.42-1.06 1.06-4.42-4.42-4.42 4.42-1.06-1.06L5.19 6 .77 1.58 1.83.52l4.42 4.42L10.67.52z", fillRule: "evenodd" }))); };
-
-// Custom hook to trigger the snackbar on function components
-var useSnackbar = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.position, position = _c === void 0 ? defaultPosition : _c, _d = _b.style, style = _d === void 0 ? {} : _d, _e = _b.closeStyle, closeStyle = _e === void 0 ? {} : _e;
-    var _f = useContext(SnackbarContext), openSnackbar = _f.openSnackbar, closeSnackbar = _f.closeSnackbar;
-    // If no correct position is passed, 'bottom-center' is set
-    if (!positions.includes(position)) {
-        position = defaultPosition;
-    }
-    function open(text, duration) {
-        if (text === void 0) { text = ""; }
-        if (duration === void 0) { duration = defaultDuration; }
-        openSnackbar(text, duration, position, style, closeStyle);
-    }
-    // Returns methods in hooks array way
-    return [open, closeSnackbar];
-};
-
-var 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: "$slate5",
-    borderRadius: "$pill",
-    position: "relative",
-    "&:focus": {
-        boxShadow: "0 0 0 2px $colors$slate8",
-    },
-    '&[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: "$slate11",
-    textDecoration: "none",
-    "@hover": {
-        "&:hover": {
-            color: "$hiContrast",
-        },
-    },
-    "&:focus": {
-        boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-    },
-    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: "$slate11",
-    border: "1px solid transparent",
-    borderTopLeftRadius: "$2",
-    borderTopRightRadius: "$2",
-    zIndex: "10",
-    "@hover": {
-        "&:hover": {
-            color: "$hiContrast",
-        },
-    },
-    '&[data-state="active"]': {
-        color: "$hiContrast",
-        borderColor: "$slate6",
-        borderBottomColor: "transparent",
-    },
-    '&[data-orientation="vertical"]': {
-        justifyContent: "flex-start",
-        borderTopRightRadius: 0,
-        borderBottomLeftRadius: "$2",
-        borderBottomColor: "transparent",
-        '&[data-state="active"]': {
-            borderBottomColor: "$slate6",
-            borderRightColor: "transparent",
-        },
-    },
-});
-var StyledTabsListBase = styled(TabsPrimitive.List, {
-    flexShrink: 0,
-    display: "flex",
-    "&:focus": {
-        outline: "none",
-        boxShadow: "inset 0 0 0 1px $slate8, 0 0 0 1px $slate8",
-    },
-    '&[data-orientation="vertical"]': {
-        flexDirection: "column",
-        boxShadow: "inset -1px 0 0 $slate6",
-    },
-});
-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 $slate8, 0 0 0 1px $slate8",
-    },
-});
-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$slate7",
-    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: "$slate9",
-    },
-    "&:disabled": {
-        pointerEvents: "none",
-        backgroundColor: "$slate2",
-        color: "$slate8",
-        cursor: "not-allowed",
-        resize: "none",
-        "&::placeholder": {
-            color: "$slate7",
-        },
-    },
-    "&:read-only": {
-        backgroundColor: "$slate2",
-        "&:focus": {
-            boxShadow: "inset 0px 0px 0px 1px $colors$slate7",
-        },
-    },
-    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: "$slate3",
-                "&:hover": {
-                    backgroundColor: "$slate4",
-                },
-                "&:active": {
-                    backgroundColor: "$slate5",
-                },
-            },
-            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 };