@livepeer/design-system 1.0.17 → 1.1.0

package/dist/index.js

@@ -83,8 +83,8 @@ var styled = (_a$8 = react.createStitches({
     theme: {
         colors: 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(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), { 
             // Semantic colors
-            hiContrast: "$neutral12", 
-            // loContrast: '$neutral1',
+            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",
@@ -112,6 +112,28 @@ var styled = (_a$8 = react.createStitches({
             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",
@@ -123,6 +145,17 @@ var styled = (_a$8 = react.createStitches({
             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",
@@ -268,7 +301,7 @@ var styled = (_a$8 = react.createStitches({
 createTheme("dark-theme", {
     colors: 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), { 
         // Semantic colors
-        hiContrast: "$neutral12", loContrast: "$neutral1", canvas: "hsl(0 0% 15%)", panel: "$neutral3", transparentPanel: "hsl(0 100% 100% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
+        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 = 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);
@@ -340,7 +373,7 @@ var getThemes = function () {
 
 var StyledAccordion = styled(AccordionPrimitive__namespace.Root, {
     boxShadow: "0 0 0 1px $colors$neutral6",
-    borderRadius: "$2",
+    borderRadius: "$1",
 });
 var Accordion = React__default["default"].forwardRef(function (_a, forwardedRef) {
     var children = _a.children, props = tslib.__rest(_a, ["children"]);
@@ -348,27 +381,9 @@ var Accordion = React__default["default"].forwardRef(function (_a, forwardedRef)
 });
 Accordion.displayName = "Accordion";
 var StyledItem = styled(AccordionPrimitive__namespace.Item, {
-    borderTop: "1px solid $colors$neutral6",
-    "button:focus": { boxShadow: "none" },
-    "&:first-of-type": {
-        borderTop: "none",
-    },
+    borderTop: "1px solid $colors$slate6",
     "&:last-of-type": {
-        borderBottom: "none",
-    },
-    "&:hover": {
-        "&:first-of-type": {
-            button: {
-                borderTopLeftRadius: "$2",
-                borderTopRightRadius: "$2",
-            },
-        },
-        "&:last-of-type": {
-            button: {
-                borderBottomLeftRadius: "$2",
-                borderBottomRightRadius: "$2",
-            },
-        },
+        borderBottom: "1px solid $colors$slate6",
     },
 });
 var StyledHeader = styled(AccordionPrimitive__namespace.Header, {
@@ -390,12 +405,15 @@ var StyledTrigger = styled(AccordionPrimitive__namespace.Trigger, {
     p: "$2",
     color: "$hiContrast",
     width: "100%",
-    "&:hover": {
-        backgroundColor: "$neutral2",
+    cursor: "pointer",
+    "@hover": {
+        "&:hover": {
+            backgroundColor: "$slate2",
+        },
     },
     "&:focus": {
         outline: "none",
-        boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+        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)",
@@ -440,11 +458,11 @@ var Alert = styled("div", {
         variant: {
             loContrast: {
                 backgroundColor: "$loContrast",
-                borderColor: "$neutral6",
+                borderColor: "$slate6",
             },
             gray: {
-                backgroundColor: "$neutral2",
-                borderColor: "$neutral6",
+                backgroundColor: "$slate2",
+                borderColor: "$slate6",
             },
             blue: {
                 backgroundColor: "$blue2",
@@ -498,7 +516,6 @@ var StyledOverlay$2 = styled(AlertDialogPrimitive__namespace.Overlay, overlaySty
     left: 0,
     backgroundColor: "rgba(0,0,0,.35)",
     inset: 0,
-    zIndex: 1000,
     variants: {
         animation: {
             true: {
@@ -531,7 +548,6 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive__namespace.Content, p
     borderRadius: "$4",
     boxShadow: "$colors$shadowLight 0px 10px 38px -10px, $colors$shadowDark 0px 10px 20px -15px",
     color: "$black",
-    zIndex: 1001,
     "&:focus": {
         outline: "none",
     },
@@ -556,7 +572,7 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive__namespace.Content, p
 });
 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, { style: { overflow: "auto" } }), children));
+    return (React__default["default"].createElement(StyledAlertDialogContent, tslib.__assign({ animation: animation }, props), children));
 };
 var AlertDialogTitle = AlertDialogPrimitive__namespace.Title;
 var AlertDialogDescription = AlertDialogPrimitive__namespace.Description;
@@ -585,7 +601,7 @@ var Status = styled("div", {
         },
         variant: {
             gray: {
-                backgroundColor: "$neutral7",
+                backgroundColor: "$slate7",
             },
             blue: {
                 backgroundColor: "$blue9",
@@ -669,7 +685,7 @@ var StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
                 color: "$loContrast",
             },
             gray: {
-                backgroundColor: "$neutral5",
+                backgroundColor: "$slate5",
             },
             tomato: {
                 backgroundColor: "$tomato5",
@@ -873,9 +889,9 @@ var Badge = styled("span", {
     userSelect: "none",
     WebkitTapHighlightColor: "rgba(0,0,0,0)",
     "&:disabled": {
-        backgroundColor: "$neutral3",
+        backgroundColor: "$slate3",
         pointerEvents: "none",
-        color: "$neutral8",
+        color: "$slate8",
     },
     "&::before": {
         boxSizing: "border-box",
@@ -886,9 +902,9 @@ var Badge = styled("span", {
         content: '""',
     },
     // Custom
-    backgroundColor: "$neutral3",
+    backgroundColor: "$slate3",
     borderRadius: "$pill",
-    color: "$neutral11",
+    color: "$slate11",
     whiteSpace: "nowrap",
     variants: {
         size: {
@@ -919,10 +935,10 @@ var Badge = styled("span", {
                 },
             },
             gray: {
-                backgroundColor: "$neutral3",
-                color: "$neutral11",
+                backgroundColor: "$slate3",
+                color: "$slate11",
                 "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+                    boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
                 },
             },
             red: {
@@ -1400,12 +1416,12 @@ 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, "9"),
-        color: "white",
-        "&:hover": { bc: "$".concat(color$1, "10") },
-        "&:active": { bc: "$".concat(color$1, "11") },
+        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, "9"),
+            bc: "$".concat(color$1, "4"),
             boxShadow: "inset 0 0 0 1px $colors$".concat(color$1, "8"),
         },
     };
@@ -1413,8 +1429,6 @@ for (var _i$1 = 0, naturalPairingsKeys_1$1 = naturalPairingsKeys; _i$1 < natural
         variant: color$1,
         ghost: "true",
         css: {
-            color: "$".concat(color$1, "9"),
-            fontWeight: 600,
             bc: "transparent",
             "&:hover": {
                 bc: "$".concat(color$1, "3"),
@@ -1452,8 +1466,9 @@ var Button = styled("button", {
     height: "$5",
     fontFamily: "$body",
     fontSize: "$2",
-    fontWeight: 500,
+    fontWeight: 600,
     ai: "center",
+    cursor: "pointer",
     px: "$3",
     bc: "$neutral4",
     borderRadius: "$2",
@@ -1466,14 +1481,14 @@ var Button = styled("button", {
     variants: {
         size: {
             "1": {
-                borderRadius: "$1",
+                borderRadius: "$2",
                 height: "$5",
                 px: "$2",
                 fontSize: "$1",
                 lineHeight: "$sizes$5",
             },
             "2": {
-                borderRadius: "$1",
+                borderRadius: "$3",
                 height: "$5",
                 px: "$3",
                 py: "$3",
@@ -1481,36 +1496,35 @@ var Button = styled("button", {
                 lineHeight: "$sizes$6",
             },
             "3": {
-                borderRadius: "$1",
+                borderRadius: "$3",
                 height: "$6",
                 px: "$3",
-                fontSize: "$2",
+                fontSize: "$3",
                 lineHeight: "$sizes$6",
             },
             "4": {
-                borderRadius: "$2",
+                borderRadius: "$4",
                 height: "$7",
                 px: "$4",
-                fontSize: "$3",
+                fontSize: "$4",
                 lineHeight: "$sizes$7",
             },
         },
-        variant: tslib.__assign({ primary: {
-                bc: "$primary9",
-                color: "white",
-                "&:hover": { bc: "$primary10" },
-                "&:active": { bc: "$primary11" },
+        variant: tslib.__assign(tslib.__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: "$primary9",
+                    bc: "$primary4",
                     boxShadow: "inset 0 0 0 1px $colors$primary8",
                 },
             }, neutral: {
-                border: "1px solid $neutral7",
                 bc: "$neutral4",
-                color: "$neutral12",
+                color: "$neutral11",
                 "&:hover": { bc: "$neutral5" },
                 "&:active": { bc: "$neutral6" },
                 "&:disabled": {
@@ -1520,7 +1534,28 @@ var Button = styled("button", {
                     bc: "$neutral4",
                     boxShadow: "inset 0 0 0 1px $colors$primary8",
                 },
-            } }, colorVariants$1),
+            } }, 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",
@@ -1534,8 +1569,6 @@ var Button = styled("button", {
             ghost: "true",
             css: {
                 bc: "transparent",
-                color: "$primary9",
-                fontWeight: 600,
                 "&:hover": {
                     bc: "$primary3",
                     boxShadow: "none",
@@ -1553,10 +1586,8 @@ var Button = styled("button", {
             variant: "neutral",
             ghost: "true",
             css: {
-                border: "none",
                 bc: "transparent",
-                color: "$neutral12",
-                fontWeight: 600,
+                color: "$neutral11",
                 "&:hover": {
                     bc: "$neutral3",
                     boxShadow: "none",
@@ -1688,11 +1719,11 @@ var StyledCheckbox = styled(CheckboxPrimitive__namespace.Root, {
     padding: "0",
     WebkitTapHighlightColor: "rgba(0,0,0,0)",
     color: "$hiContrast",
-    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    boxShadow: "inset 0 0 0 1px $colors$slate7",
     overflow: "hidden",
     "@hover": {
         "&:hover": {
-            boxShadow: "inset 0 0 0 1px $colors$neutral8",
+            boxShadow: "inset 0 0 0 1px $colors$slate8",
         },
     },
     "&:focus": {
@@ -1738,8 +1769,8 @@ var Code = styled("code", {
     variants: {
         variant: {
             gray: {
-                backgroundColor: "$neutral3",
-                color: "$neutral11",
+                backgroundColor: "$slate3",
+                color: "$slate11",
             },
             violet: {
                 backgroundColor: "$violet3",
@@ -1911,11 +1942,11 @@ var itemCss = css(baseItemCss, {
         color: "white",
     },
     "&[data-disabled]": {
-        color: "$neutral9",
+        color: "$slate9",
     },
 });
 var labelCss = css(baseItemCss, {
-    color: "$neutral11",
+    color: "$slate11",
 });
 var menuCss = css({
     boxSizing: "border-box",
@@ -1925,7 +1956,7 @@ var menuCss = css({
 var separatorCss = css({
     height: 1,
     my: "$1",
-    backgroundColor: "$neutral6",
+    backgroundColor: "$slate6",
 });
 var Menu = styled(MenuPrimitive__namespace.Root, menuCss);
 styled(MenuPrimitive__namespace.Content, panelStyles);
@@ -2179,7 +2210,7 @@ var TextField = StyledTextField;
 var SelectWrapper = styled("div", {
     backgroundColor: "$loContrast",
     borderRadius: "$2",
-    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    boxShadow: "inset 0 0 0 1px $colors$slate7",
     color: "$hiContrast",
     fontFamily: "$untitled",
     fontSize: "$1",
@@ -2236,37 +2267,37 @@ var ControlGroup = styled("div", (_a$6 = {
     },
     _a$6["& ".concat(Button)] = {
         borderRadius: 0,
-        boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+        boxShadow: "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
         "&:hover": {
-            boxShadow: "-1px 0 $colors$neutral8, inset 0 1px $colors$neutral8, inset -1px 0 $colors$neutral8, inset 0 -1px $colors$neutral8",
+            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$neutral8, 0 0 0 1px $colors$neutral8",
+            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$neutral7",
+            boxShadow: "inset 0 0 0 1px $colors$slate7",
             "&:hover": {
-                boxShadow: "inset 0 0 0 1px $colors$neutral8",
+                boxShadow: "inset 0 0 0 1px $colors$slate8",
             },
             "&:focus": {
-                boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+                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$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+            boxShadow: "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
             "&:focus": {
-                boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+                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$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+        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",
@@ -2274,7 +2305,7 @@ var ControlGroup = styled("div", (_a$6 = {
         "&:first-child": {
             borderTopLeftRadius: "$1",
             borderBottomLeftRadius: "$1",
-            boxShadow: "inset 0 0 0 1px $colors$neutral7",
+            boxShadow: "inset 0 0 0 1px $colors$slate7",
             "&:focus": {
                 boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
             },
@@ -2282,7 +2313,7 @@ var ControlGroup = styled("div", (_a$6 = {
         "&:last-child": {
             borderTopRightRadius: "$1",
             borderBottomRightRadius: "$1",
-            boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+            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",
             },
@@ -2290,14 +2321,14 @@ var ControlGroup = styled("div", (_a$6 = {
     },
     _a$6["& ".concat(Select)] = {
         borderRadius: 0,
-        boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+        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$neutral7",
+            boxShadow: "inset 0 0 0 1px $colors$slate7",
             "&:focus-within": {
                 boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
             },
@@ -2305,7 +2336,7 @@ var ControlGroup = styled("div", (_a$6 = {
         "&:last-child": {
             borderTopRightRadius: "$1",
             borderBottomRightRadius: "$1",
-            boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
+            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",
             },
@@ -2342,23 +2373,23 @@ var IconButton = styled("button", {
         boxSizing: "border-box",
     },
     backgroundColor: "$loContrast",
-    border: "1px solid $neutral7",
+    border: "1px solid $slate7",
     "@hover": {
         "&:hover": {
-            borderColor: "$neutral8",
+            borderColor: "$slate8",
         },
     },
     "&:active": {
-        backgroundColor: "$neutral2",
+        backgroundColor: "$slate2",
     },
     "&:focus": {
-        borderColor: "$neutral8",
-        boxShadow: "0 0 0 1px $colors$neutral8",
+        borderColor: "$slate8",
+        boxShadow: "0 0 0 1px $colors$slate8",
     },
     "&:disabled": {
         pointerEvents: "none",
         backgroundColor: "transparent",
-        color: "$neutral6",
+        color: "$slate6",
     },
     variants: {
         size: {
@@ -2389,17 +2420,17 @@ var IconButton = styled("button", {
                 borderWidth: "0",
                 "@hover": {
                     "&:hover": {
-                        backgroundColor: "$neutralA3",
+                        backgroundColor: "$slateA3",
                     },
                 },
                 "&:focus": {
-                    boxShadow: "inset 0 0 0 1px $colors$neutralA8, 0 0 0 1px $colors$neutralA8",
+                    boxShadow: "inset 0 0 0 1px $colors$slateA8, 0 0 0 1px $colors$slateA8",
                 },
                 "&:active": {
-                    backgroundColor: "$neutralA4",
+                    backgroundColor: "$slateA4",
                 },
                 '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
-                    backgroundColor: "$neutralA4",
+                    backgroundColor: "$slateA4",
                 },
             },
             raised: {
@@ -2410,17 +2441,17 @@ var IconButton = styled("button", {
                     },
                 },
                 "&:focus": {
-                    borderColor: "$neutral8",
-                    boxShadow: "0 0 0 1px $colors$neutral8, 0 16px 32px hsl(206deg 12% 5% / 25%), 0 3px 5px hsl(0deg 0% 0% / 10%)",
+                    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: "$neutral4",
+                    backgroundColor: "$slate4",
                 },
             },
         },
         state: {
             active: {
-                backgroundColor: "$neutral4",
+                backgroundColor: "$slate4",
                 boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
                 "@hover": {
                     "&:hover": {
@@ -2428,11 +2459,11 @@ var IconButton = styled("button", {
                     },
                 },
                 "&:active": {
-                    backgroundColor: "$neutral4",
+                    backgroundColor: "$slate4",
                 },
             },
             waiting: {
-                backgroundColor: "$neutral4",
+                backgroundColor: "$slate4",
                 boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
                 "@hover": {
                     "&:hover": {
@@ -2440,7 +2471,7 @@ var IconButton = styled("button", {
                     },
                 },
                 "&:active": {
-                    backgroundColor: "$neutral4",
+                    backgroundColor: "$slate4",
                 },
             },
         },
@@ -2470,8 +2501,8 @@ var StyledOverlay$1 = styled(DialogPrimitive__namespace.Overlay, overlayStyles,
     bottom: 0,
     left: 0,
     backgroundColor: "rgba(0,0,0,.35)",
+    backdropFilter: "blur(5px)",
     inset: 0,
-    zIndex: 1000,
     variants: {
         animation: {
             true: {
@@ -2503,7 +2534,6 @@ var StyledDialogContent = styled(DialogPrimitive__namespace.Content, panelStyles
     borderRadius: "$4",
     boxShadow: "$colors$shadowLight 0px 10px 38px -10px, $colors$shadowDark 0px 10px 20px -15px",
     color: "$black",
-    zIndex: 1001,
     "&:focus": {
         outline: "none",
     },
@@ -2533,12 +2563,13 @@ var StyledCloseButton$1 = styled(DialogPrimitive__namespace.Close, {
     position: "absolute",
     top: "$2",
     right: "$2",
+    cursor: "pointer"
 });
 var DialogContent = React__default["default"].forwardRef(function (_a, forwardedRef) {
     var children = _a.children; _a.animation; var props = tslib.__rest(_a, ["children", "animation"]);
     return (React__default["default"].createElement(DialogPrimitive__namespace.Portal, null,
         React__default["default"].createElement(StyledOverlay$1, null),
-        React__default["default"].createElement(StyledDialogContent, tslib.__assign({}, props, { ref: forwardedRef, style: { overflow: "auto" } }),
+        React__default["default"].createElement(StyledDialogContent, tslib.__assign({}, props, { ref: forwardedRef }),
             children,
             React__default["default"].createElement(StyledCloseButton$1, { asChild: true },
                 React__default["default"].createElement(IconButton, { variant: "ghost" },
@@ -2556,7 +2587,7 @@ for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairin
     colorVariants[color] = {
         "&:focus": {
             outline: "none",
-            backgroundColor: "$neutral4",
+            backgroundColor: "$".concat(color, "4"),
             color: "$hiContrast",
         },
     };
@@ -2604,9 +2635,6 @@ var DropdownMenuRadioItemBase = React__default["default"].forwardRef(function (_
 });
 DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
 var DropdownMenuItem = styled(DropdownMenuItemBase, {
-    "&:focus": {
-        backgroundColor: "$neutral4",
-    },
     variants: {
         color: tslib.__assign({ primary: {
                 "&:focus": {
@@ -2616,6 +2644,9 @@ var DropdownMenuItem = styled(DropdownMenuItemBase, {
                 },
             } }, colorVariants),
     },
+    defaultVariants: {
+        color: "primary",
+    },
 });
 var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
     variants: {
@@ -2632,7 +2663,6 @@ var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
     },
 });
 var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
-    backgroundColor: "$neutral4",
     variants: {
         color: tslib.__assign({ primary: {
                 "&:focus": {
@@ -2894,7 +2924,7 @@ var Text = styled("span", {
                 color: "$bronze11",
             },
             gray: {
-                color: "$neutral11",
+                color: "$slate11",
             },
             primary: {
                 color: "$primary11",
@@ -3079,7 +3109,7 @@ var Kbd = styled("kbd", {
     userSelect: "none",
     cursor: "default",
     whiteSpace: "nowrap",
-    boxShadow: "\n    inset 0 0.5px rgba(255, 255, 255, 0.1),\n    inset 0 1px 5px $colors$neutral2,\n    0px 0px 0px 0.5px $colors$neutral8,\n    0px 2px 1px -1px $colors$neutral8,\n    0 1px $colors$neutral8",
+    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,
@@ -3240,7 +3270,7 @@ var Paragraph = React__default["default"].forwardRef(function (props, forwardedR
     var textCss = {
         1: { lineHeight: "25px", "@bp2": { lineHeight: "27px" } },
         2: {
-            color: "$neutral11",
+            color: "$slate11",
             lineHeight: "27px",
             "@bp2": { lineHeight: "30px" },
         },
@@ -3291,13 +3321,13 @@ var StyledProgressBar = styled(ProgressPrimitive__namespace.Root, {
     overflow: "hidden",
     borderRadius: "$pill",
     '&[data-state="indeterminate"]': {
-        backgroundColor: "$neutral4",
+        backgroundColor: "$slate4",
         "&::after": {
             animationName: indeterminateProgress,
             animationDuration: "1500ms",
             animationIterationCount: "infinite",
             animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
-            backgroundColor: "$neutral7",
+            backgroundColor: "$slate7",
             boxSizing: "border-box",
             borderRadius: "$pill",
             content: '""',
@@ -3311,7 +3341,7 @@ var StyledProgressBar = styled(ProgressPrimitive__namespace.Root, {
     variants: {
         variant: {
             gray: {
-                background: "$neutral8",
+                background: "$slate8",
             },
             blue: {
                 backgroundColor: "$blue9",
@@ -3333,7 +3363,7 @@ var ProgressBarIndicator = styled(ProgressPrimitive__namespace.Indicator, {
     bottom: 0,
     left: 0,
     width: "100%",
-    backgroundColor: "$neutral4",
+    backgroundColor: "$slate4",
     transition: "transform 150ms cubic-bezier(0.65, 0, 0.35, 1)",
 });
 var ProgressBar = React__default["default"].forwardRef(function (_a, forwardedRef) {
@@ -3497,11 +3527,11 @@ var StyledRadio$1 = styled(RadioGroupPrimitive__namespace.Item, {
     WebkitTapHighlightColor: "rgba(0,0,0,0)",
     borderRadius: "50%",
     color: "$hiContrast",
-    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    boxShadow: "inset 0 0 0 1px $colors$slate7",
     overflow: "hidden",
     "@hover": {
         "&:hover": {
-            boxShadow: "inset 0 0 0 1px $colors$neutral8",
+            boxShadow: "inset 0 0 0 1px $colors$slate8",
         },
     },
     "&:focus": {
@@ -3626,7 +3656,7 @@ var Separator = styled(SeparatorPrimitive__namespace.Root, {
     border: "none",
     margin: 0,
     flexShrink: 0,
-    backgroundColor: "$neutral6",
+    backgroundColor: "$slate6",
     cursor: "default",
     variants: {
         size: {
@@ -3785,25 +3815,25 @@ var SimpleToggle = styled(TogglePrimitive__namespace.Root, {
     backgroundColor: "transparent",
     "@hover": {
         "&:hover": {
-            backgroundColor: "$neutralA3",
+            backgroundColor: "$slateA3",
         },
     },
     "&:active": {
-        backgroundColor: "$neutralA4",
+        backgroundColor: "$slateA4",
     },
     "&:focus": {
-        boxShadow: "inset 0 0 0 1px $neutralA8, 0 0 0 1px $neutralA8",
+        boxShadow: "inset 0 0 0 1px $slateA8, 0 0 0 1px $slateA8",
         zIndex: 1,
     },
     '&[data-state="on"]': {
-        backgroundColor: "$neutralA5",
+        backgroundColor: "$slateA5",
         "@hover": {
             "&:hover": {
-                backgroundColor: "$neutralA5",
+                backgroundColor: "$slateA5",
             },
         },
         "&:active": {
-            backgroundColor: "$neutralA7",
+            backgroundColor: "$slateA7",
         },
     },
     variants: {
@@ -3823,7 +3853,7 @@ var pulse = keyframes({
     "100%": { opacity: "100%" },
 });
 var Skeleton = styled("div", {
-    backgroundColor: "$neutral4",
+    backgroundColor: "$slate4",
     position: "relative",
     overflow: "hidden",
     "&::after": {
@@ -3832,7 +3862,7 @@ var Skeleton = styled("div", {
         animationDirection: "alternate",
         animationIterationCount: "infinite",
         animationTimingFunction: "ease-in-out",
-        backgroundColor: "$neutral6",
+        backgroundColor: "$slate6",
         borderRadius: "inherit",
         bottom: 0,
         content: '""',
@@ -3898,7 +3928,7 @@ var _a$2;
 var SliderTrack = styled(SliderPrimitive__namespace.Track, {
     position: "relative",
     flexGrow: 1,
-    backgroundColor: "$neutral7",
+    backgroundColor: "$slate7",
     borderRadius: "$pill",
     '&[data-orientation="horizontal"]': {
         height: 2,
@@ -3964,7 +3994,7 @@ var StyledSlider = styled(SliderPrimitive__namespace.Root, {
     "@hover": {
         "&:hover": (_a$2 = {},
             _a$2["& ".concat(SliderTrack)] = {
-                backgroundColor: "$neutral8",
+                backgroundColor: "$slate8",
             },
             _a$2["& ".concat(SliderThumb)] = {
                 opacity: "1",
@@ -4167,7 +4197,7 @@ var SnackbarProvider = function (_a) {
                             minWidth: "334px",
                             maxWidth: "672px",
                             zIndex: 1000000,
-                            backgroundColor: "$neutral4",
+                            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",
@@ -4196,6 +4226,7 @@ var SnackbarProvider = function (_a) {
                                 height: "36px",
                                 padding: "8px",
                                 margin: "0 8px 0 0",
+                                cursor: "pointer",
                                 position: "relative",
                                 pointerEvents: "auto",
                                 WebkitTapHighlightColor: "transparent",
@@ -4293,11 +4324,11 @@ var StyledSwitch = styled(SwitchPrimitive__namespace.Root, {
     margin: "0",
     outline: "none",
     WebkitTapHighlightColor: "rgba(0,0,0,0)",
-    backgroundColor: "$neutral5",
+    backgroundColor: "$slate5",
     borderRadius: "$pill",
     position: "relative",
     "&:focus": {
-        boxShadow: "0 0 0 2px $colors$neutral8",
+        boxShadow: "0 0 0 2px $colors$slate8",
     },
     '&[data-state="checked"]': {
         backgroundColor: "$blue9",
@@ -4459,7 +4490,7 @@ var TabLink = styled("a", {
     outline: "none",
     alignItems: "center",
     justifyContent: "center",
-    color: "$neutral11",
+    color: "$slate11",
     textDecoration: "none",
     "@hover": {
         "&:hover": {
@@ -4467,7 +4498,7 @@ var TabLink = styled("a", {
         },
     },
     "&:focus": {
-        boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
+        boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
     },
     variants: {
         active: {
@@ -4505,7 +4536,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
     outline: "none",
     alignItems: "center",
     justifyContent: "center",
-    color: "$neutral11",
+    color: "$slate11",
     border: "1px solid transparent",
     borderTopLeftRadius: "$2",
     borderTopRightRadius: "$2",
@@ -4517,7 +4548,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
     },
     '&[data-state="active"]': {
         color: "$hiContrast",
-        borderColor: "$neutral6",
+        borderColor: "$slate6",
         borderBottomColor: "transparent",
     },
     '&[data-orientation="vertical"]': {
@@ -4526,7 +4557,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
         borderBottomLeftRadius: "$2",
         borderBottomColor: "transparent",
         '&[data-state="active"]': {
-            borderBottomColor: "$neutral6",
+            borderBottomColor: "$slate6",
             borderRightColor: "transparent",
         },
     },
@@ -4536,11 +4567,11 @@ var StyledTabsListBase = styled(TabsPrimitive__namespace.List, {
     display: "flex",
     "&:focus": {
         outline: "none",
-        boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
+        boxShadow: "inset 0 0 0 1px $slate8, 0 0 0 1px $slate8",
     },
     '&[data-orientation="vertical"]': {
         flexDirection: "column",
-        boxShadow: "inset -1px 0 0 $neutral6",
+        boxShadow: "inset -1px 0 0 $slate6",
     },
 });
 var TabsListBase = React__default["default"].forwardRef(function (props, forwardedRef) { return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -4551,7 +4582,7 @@ var TabsContentBase = styled(TabsPrimitive__namespace.Content, {
     flexGrow: 1,
     "&:focus": {
         outline: "none",
-        boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
+        boxShadow: "inset 0 0 0 1px $slate8, 0 0 0 1px $slate8",
     },
 });
 var TabsTrigger = styled(TabsTriggerBase, {
@@ -4600,7 +4631,7 @@ var TextArea = styled("textarea", {
     width: "100%",
     WebkitTapHighlightColor: "rgba(0,0,0,0)",
     backgroundColor: "$loContrast",
-    boxShadow: "inset 0 0 0 1px $colors$neutral7",
+    boxShadow: "inset 0 0 0 1px $colors$slate7",
     color: "$hiContrast",
     fontVariantNumeric: "tabular-nums",
     position: "relative",
@@ -4611,22 +4642,22 @@ var TextArea = styled("textarea", {
         zIndex: "1",
     },
     "&::placeholder": {
-        color: "$neutral9",
+        color: "$slate9",
     },
     "&:disabled": {
         pointerEvents: "none",
-        backgroundColor: "$neutral2",
-        color: "$neutral8",
+        backgroundColor: "$slate2",
+        color: "$slate8",
         cursor: "not-allowed",
         resize: "none",
         "&::placeholder": {
-            color: "$neutral7",
+            color: "$slate7",
         },
     },
     "&:read-only": {
-        backgroundColor: "$neutral2",
+        backgroundColor: "$slate2",
         "&:focus": {
-            boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
+            boxShadow: "inset 0px 0px 0px 1px $colors$slate7",
         },
     },
     variants: {
@@ -4740,12 +4771,12 @@ var TreeItem = styled("div", {
     variants: {
         variant: {
             gray: {
-                backgroundColor: "$neutral3",
+                backgroundColor: "$slate3",
                 "&:hover": {
-                    backgroundColor: "$neutral4",
+                    backgroundColor: "$slate4",
                 },
                 "&:active": {
-                    backgroundColor: "$neutral5",
+                    backgroundColor: "$slate5",
                 },
             },
             red: {