@livepeer/design-system 0.0.0-beta.0

package/dist/index.js

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