@paubox/ui 1.13.0 → 1.15.0

package/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
+import { css, ThemeProvider } from '@emotion/react';
 import * as React from 'react';
-import React__default, { useState, useRef, forwardRef, useLayoutEffect, useEffect, createElement, cloneElement, Component, createRef, useCallback, useId as useId$1, useMemo, Fragment as Fragment$1 } from 'react';
+import React__default, { useContext, useMemo, createContext, useState, useRef, forwardRef, useLayoutEffect, useEffect, createElement, cloneElement, Component, createRef, useCallback, useId as useId$1, Fragment as Fragment$1 } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 
@@ -1447,7 +1447,7 @@ var paragraph300LetterSpacing = 0;
 var button100FontSize = 16;
 var button100LineHeight = 16;
 var button100LetterSpacing = button100FontSize * 0.02;
-var button200FontSize = 12;
+var button200FontSize = 14;
 var button200LineHeight = 12;
 var button200LetterSpacing = button200FontSize * 0.02;
 // BUTTON
@@ -1500,41 +1500,41 @@ var baseTypography = /*#__PURE__*/Object.freeze({
   paragraph300LineHeight: paragraph300LineHeight
 });
 
-var textPrimary = '#1D2433';
-var textSecondary = '#1D2433CC';
-var textPrimaryWhite = '#FFFFFF';
-var textPrimaryDisabled = '#545D78';
-var textPrimaryIconDisabled = '#0000004D';
-var textDanger = '#E02D3C';
-var textDangerHover = '##E34553';
-var textDangerPressed = '#E02D3C';
-var neutral100 = '#F2F2F2';
-var neutral200 = '#E3E3E3';
-var neutral300 = '#C9C9C9';
-var neutral400 = '#B3B3B3';
-var neutral500 = '#757575';
-var neutral600 = '#4D4D4D';
-var neutral700 = '#333333';
-var neutral800 = '#1A1A1A';
-var neutral900 = '#000000';
-var primary100 = '#E8EFFF';
-var primary200 = '#D4E2FF';
-var primary300 = '#94B6FF';
-var primary400 = '#6193FF';
-var primary500 = '#2E70FF';
-var primary600 = '#0247DC';
-var primary700 = '#003AB8';
-var primary800 = '#003099';
-var primary900 = '#002066';
-var secondary100 = '#FFF8E4';
-var secondary200 = '#FFF1C7';
-var secondary300 = '#FFE394';
-var secondary400 = '#FFD761';
-var secondary500 = '#FFCA2F';
-var secondary600 = '#FBBB00';
-var secondary700 = '#CC9800';
-var secondary800 = '#997200';
-var secondary900 = '#664C00';
+var textPrimary$1 = '#000000';
+var textSecondary$1 = '#000000';
+var textPrimaryWhite$1 = '#FFFFFF';
+var textPrimaryDisabled$1 = '#545D78';
+var textPrimaryIconDisabled$1 = '#0000004D';
+var textDanger$1 = '#E02D3C';
+var textDangerHover$1 = '##E34553';
+var textDangerPressed$1 = '#E02D3C';
+var neutral100$1 = '#F2F2F2';
+var neutral200$1 = '#E3E3E3';
+var neutral300$1 = '#C9C9C9';
+var neutral400$1 = '#B3B3B3';
+var neutral500$1 = '#757575';
+var neutral600$1 = '#4D4D4D';
+var neutral700$1 = '#333333';
+var neutral800$1 = '#1A1A1A';
+var neutral900$1 = '#000000';
+var primary100$1 = '#E8EFFF';
+var primary200$1 = '#D4E2FF';
+var primary300$1 = '#94B6FF';
+var primary400$1 = '#6193FF';
+var primary500$1 = '#2E70FF';
+var primary600$1 = '#0247DC';
+var primary700$1 = '#003AB8';
+var primary800$1 = '#003099';
+var primary900$1 = '#002066';
+var secondary100$1 = '#FFF8E4';
+var secondary200$1 = '#FFF1C7';
+var secondary300$1 = '#FFE394';
+var secondary400$1 = '#FFD761';
+var secondary500$1 = '#FFCA2F';
+var secondary600$1 = '#FBBB00';
+var secondary700$1 = '#CC9800';
+var secondary800$1 = '#997200';
+var secondary900$1 = '#664C00';
 var secondaryCharts1100 = '#F6FFE5';
 var secondaryCharts1200 = '#ECFFC7';
 var secondaryCharts1300 = '#D8FA99';
@@ -1562,35 +1562,205 @@ var secondaryCharts3600 = '#8603BC';
 var secondaryCharts3700 = '#660F8A';
 var secondaryCharts3800 = '#480264';
 var secondaryCharts3900 = '#36014B';
-var success100 = '#ECFDF8';
-var success200 = '#D1FAEC';
-var success300 = '#A5F3D9';
-var success400 = '#6EE7BF';
-var success500 = '#36D39F';
-var success600 = '#0EA472';
-var success700 = '#08875D';
-var success800 = '#04724D';
-var success900 = '#066042';
-var warning100 = '#FFF8E4';
-var warning200 = '#FFF0C7';
-var warning300 = '#FFE394';
-var warning400 = '#FFD761';
-var warning500 = '#FFCA2F';
-var warning600 = '#FBBB00';
-var warning700 = '#CC9800';
-var warning800 = '#CC9800';
-var warning900 = '#CCCCCC';
-var danger100 = '#FEF1F2';
-var danger200 = '#FEE1E3';
-var danger300 = '#FEC8CC';
-var danger400 = '#FCA6AD';
-var danger500 = '#F8727D';
-var danger600 = '#EF4352';
-var danger700 = '#E02D3C';
-var danger800 = '#BA2532';
-var danger900 = '#981B25';
+var success100$1 = '#ECFDF8';
+var success200$1 = '#D1FAEC';
+var success300$1 = '#A5F3D9';
+var success400$1 = '#6EE7BF';
+var success500$1 = '#36D39F';
+var success600$1 = '#0EA472';
+var success700$1 = '#08875D';
+var success800$1 = '#04724D';
+var success900$1 = '#066042';
+var warning100$1 = '#FFF8E4';
+var warning200$1 = '#FFF0C7';
+var warning300$1 = '#FFE394';
+var warning400$1 = '#FFD761';
+var warning500$1 = '#FFCA2F';
+var warning600$1 = '#FBBB00';
+var warning700$1 = '#CC9800';
+var warning800$1 = '#CC9800';
+var warning900$1 = '#CCCCCC';
+var danger100$1 = '#FEF1F2';
+var danger200$1 = '#FEE1E3';
+var danger300$1 = '#FEC8CC';
+var danger400$1 = '#FCA6AD';
+var danger500$1 = '#F8727D';
+var danger600$1 = '#EF4352';
+var danger700$1 = '#E02D3C';
+var danger800$1 = '#BA2532';
+var danger900$1 = '#981B25';
 
 var colors = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  danger100: danger100$1,
+  danger200: danger200$1,
+  danger300: danger300$1,
+  danger400: danger400$1,
+  danger500: danger500$1,
+  danger600: danger600$1,
+  danger700: danger700$1,
+  danger800: danger800$1,
+  danger900: danger900$1,
+  neutral100: neutral100$1,
+  neutral200: neutral200$1,
+  neutral300: neutral300$1,
+  neutral400: neutral400$1,
+  neutral500: neutral500$1,
+  neutral600: neutral600$1,
+  neutral700: neutral700$1,
+  neutral800: neutral800$1,
+  neutral900: neutral900$1,
+  primary100: primary100$1,
+  primary200: primary200$1,
+  primary300: primary300$1,
+  primary400: primary400$1,
+  primary500: primary500$1,
+  primary600: primary600$1,
+  primary700: primary700$1,
+  primary800: primary800$1,
+  primary900: primary900$1,
+  secondary100: secondary100$1,
+  secondary200: secondary200$1,
+  secondary300: secondary300$1,
+  secondary400: secondary400$1,
+  secondary500: secondary500$1,
+  secondary600: secondary600$1,
+  secondary700: secondary700$1,
+  secondary800: secondary800$1,
+  secondary900: secondary900$1,
+  secondaryCharts1100: secondaryCharts1100,
+  secondaryCharts1200: secondaryCharts1200,
+  secondaryCharts1300: secondaryCharts1300,
+  secondaryCharts1400: secondaryCharts1400,
+  secondaryCharts1500: secondaryCharts1500,
+  secondaryCharts1600: secondaryCharts1600,
+  secondaryCharts1700: secondaryCharts1700,
+  secondaryCharts1800: secondaryCharts1800,
+  secondaryCharts1900: secondaryCharts1900,
+  secondaryCharts2100: secondaryCharts2100,
+  secondaryCharts2200: secondaryCharts2200,
+  secondaryCharts2300: secondaryCharts2300,
+  secondaryCharts2400: secondaryCharts2400,
+  secondaryCharts2500: secondaryCharts2500,
+  secondaryCharts2600: secondaryCharts2600,
+  secondaryCharts2700: secondaryCharts2700,
+  secondaryCharts2800: secondaryCharts2800,
+  secondaryCharts2900: secondaryCharts2900,
+  secondaryCharts3100: secondaryCharts3100,
+  secondaryCharts3200: secondaryCharts3200,
+  secondaryCharts3300: secondaryCharts3300,
+  secondaryCharts3400: secondaryCharts3400,
+  secondaryCharts3500: secondaryCharts3500,
+  secondaryCharts3600: secondaryCharts3600,
+  secondaryCharts3700: secondaryCharts3700,
+  secondaryCharts3800: secondaryCharts3800,
+  secondaryCharts3900: secondaryCharts3900,
+  success100: success100$1,
+  success200: success200$1,
+  success300: success300$1,
+  success400: success400$1,
+  success500: success500$1,
+  success600: success600$1,
+  success700: success700$1,
+  success800: success800$1,
+  success900: success900$1,
+  textDanger: textDanger$1,
+  textDangerHover: textDangerHover$1,
+  textDangerPressed: textDangerPressed$1,
+  textPrimary: textPrimary$1,
+  textPrimaryDisabled: textPrimaryDisabled$1,
+  textPrimaryIconDisabled: textPrimaryIconDisabled$1,
+  textPrimaryWhite: textPrimaryWhite$1,
+  textSecondary: textSecondary$1,
+  warning100: warning100$1,
+  warning200: warning200$1,
+  warning300: warning300$1,
+  warning400: warning400$1,
+  warning500: warning500$1,
+  warning600: warning600$1,
+  warning700: warning700$1,
+  warning800: warning800$1,
+  warning900: warning900$1
+});
+
+// Dark mode color palette
+var textPrimary = '#E5E7EB'; // Light gray for dark backgrounds
+var textSecondary = '#9CA3AF'; // Medium gray
+var textPrimaryWhite = '#FFFFFF';
+var textPrimaryDisabled = '#6B7280';
+var textPrimaryIconDisabled = '#FFFFFF4D';
+var textDanger = '#F87171';
+var textDangerHover = '#EF4444';
+var textDangerPressed = '#DC2626';
+// Neutral colors (inverted for dark mode)
+var neutral100 = '#1F2937'; // Dark gray
+var neutral200 = '#374151';
+var neutral300 = '#4B5563';
+var neutral400 = '#6B7280';
+var neutral500 = '#9CA3AF';
+var neutral600 = '#D1D5DB';
+var neutral700 = '#E5E7EB';
+var neutral800 = '#F3F4F6';
+var neutral900 = '#FFFFFF';
+// Primary colors (keep vibrant for dark mode)
+var primary100 = '#1E3A8A';
+var primary200 = '#1E40AF';
+var primary300 = '#2563EB';
+var primary400 = '#3B82F6';
+var primary500 = '#60A5FA';
+var primary600 = '#93C5FD';
+var primary700 = '#BFDBFE';
+var primary800 = '#DBEAFE';
+var primary900 = '#EFF6FF';
+// Secondary colors
+var secondary100 = '#78350F';
+var secondary200 = '#92400E';
+var secondary300 = '#B45309';
+var secondary400 = '#D97706';
+var secondary500 = '#F59E0B';
+var secondary600 = '#FBBF24';
+var secondary700 = '#FCD34D';
+var secondary800 = '#FDE68A';
+var secondary900 = '#FEF3C7';
+// Success colors
+var success100 = '#064E3B';
+var success200 = '#065F46';
+var success300 = '#047857';
+var success400 = '#059669';
+var success500 = '#10B981';
+var success600 = '#34D399';
+var success700 = '#6EE7B7';
+var success800 = '#A7F3D0';
+var success900 = '#D1FAE5';
+// Warning colors
+var warning100 = '#78350F';
+var warning200 = '#92400E';
+var warning300 = '#B45309';
+var warning400 = '#D97706';
+var warning500 = '#F59E0B';
+var warning600 = '#FBBF24';
+var warning700 = '#FCD34D';
+var warning800 = '#FDE68A';
+var warning900 = '#FEF3C7';
+// Danger colors
+var danger100 = '#7F1D1D';
+var danger200 = '#991B1B';
+var danger300 = '#B91C1C';
+var danger400 = '#DC2626';
+var danger500 = '#EF4444';
+var danger600 = '#F87171';
+var danger700 = '#FCA5A5';
+var danger800 = '#FECACA';
+var danger900 = '#FEE2E2';
+// Surface colors
+var surfacePrimary = '#262626';
+var surfaceSecondary = '#333333';
+var surfaceRaised = '#404040';
+var surfaceRaisedHover = '#525252';
+var surfaceMuted = '#737373';
+var surfaceDeep = '#1a1a1a';
+
+var darkColors = /*#__PURE__*/Object.freeze({
   __proto__: null,
   danger100: danger100,
   danger200: danger200,
@@ -1664,6 +1834,12 @@ var colors = /*#__PURE__*/Object.freeze({
   success700: success700,
   success800: success800,
   success900: success900,
+  surfaceDeep: surfaceDeep,
+  surfaceMuted: surfaceMuted,
+  surfacePrimary: surfacePrimary,
+  surfaceRaised: surfaceRaised,
+  surfaceRaisedHover: surfaceRaisedHover,
+  surfaceSecondary: surfaceSecondary,
   textDanger: textDanger,
   textDangerHover: textDangerHover,
   textDangerPressed: textDangerPressed,
@@ -1857,7 +2033,7 @@ function _templateObject7$2() {
     };
     return data;
 }
-function _templateObject8() {
+function _templateObject8$1() {
     var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
@@ -1865,7 +2041,7 @@ function _templateObject8() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject8 = function _templateObject() {
+    _templateObject8$1 = function _templateObject() {
         return data;
     };
     return data;
@@ -1954,7 +2130,7 @@ function _templateObject15() {
         "\n  font-size: ",
         "rem;\n  line-height: ",
         "rem;\n  letter-spacing: ",
-        "px;\n  font-weight: 500;\n"
+        "px;\n  font-weight: 400;\n"
     ]);
     _templateObject15 = function _templateObject() {
         return data;
@@ -1967,7 +2143,7 @@ function _templateObject16() {
         "\n  font-size: ",
         "rem;\n  line-height: ",
         "rem;\n  letter-spacing: ",
-        "px;\n  font-weight: 500;\n"
+        "px;\n  font-weight: 400;\n"
     ]);
     _templateObject16 = function _templateObject() {
         return data;
@@ -2101,7 +2277,7 @@ var $headline300Regular = css(_templateObject5$5(), commonStyles, headline300Fon
 var $headline300Semibold = css(_templateObject6$3(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 // PARAGRAPH
 var $paragraph100Regular = css(_templateObject7$2(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
-var $paragraph100Semibold = css(_templateObject8(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
+var $paragraph100Semibold = css(_templateObject8$1(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
 var $paragraph200Regular = css(_templateObject9(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
 var $paragraph200Semibold = css(_templateObject10(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
 var $paragraph300Regular = css(_templateObject11(), commonStyles, paragraph300FontSize / BASE_FONT_SIZE, paragraph300LineHeight / BASE_FONT_SIZE, paragraph300LetterSpacing);
@@ -2151,6 +2327,33 @@ var typography = /*#__PURE__*/Object.freeze({
   $paragraph300Semibold: $paragraph300Semibold
 });
 
+var ThemeContext = /*#__PURE__*/ createContext(undefined);
+var useTheme = function() {
+    var context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a PauboxUIThemeProvider');
+    }
+    return context;
+};
+var PauboxUIThemeProvider = function(param) {
+    var children = param.children, mode = param.mode;
+    var theme = useMemo(function() {
+        return {
+            colors: mode === 'dark' ? darkColors : colors,
+            mode: mode
+        };
+    }, [
+        mode
+    ]);
+    return /*#__PURE__*/ jsx(ThemeContext.Provider, {
+        value: theme,
+        children: /*#__PURE__*/ jsx(ThemeProvider, {
+            theme: theme,
+            children: children
+        })
+    });
+};
+
 function _array_like_to_array$q(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -2272,9 +2475,9 @@ function _templateObject5$4() {
 var AlertContainer = styled.div(_templateObject$s(), function(param) {
     var size = param.size;
     return size === 'large' ? '1rem' : '0.5rem 0.625rem';
-}, neutral900, function(param) {
+}, neutral900$1, function(param) {
     var type = param.type;
-    return type === 'info' ? primary100 : type === 'warning' ? warning100 : type === 'error' ? danger100 : success100;
+    return type === 'info' ? primary100$1 : type === 'warning' ? warning100$1 : type === 'error' ? danger100$1 : success100$1;
 });
 var Title = styled.h1(_templateObject1$h(), function(param) {
     var size = param.size;
@@ -2283,10 +2486,10 @@ var Title = styled.h1(_templateObject1$h(), function(param) {
 var Text = styled.p(_templateObject2$h(), $paragraph200Regular);
 var StyledIcon = styled.div(_templateObject3$d(), function(param) {
     var type = param.type;
-    return type === 'info' ? primary700 : type === 'error' ? danger700 : type === 'success' ? success700 : warning700;
+    return type === 'info' ? primary700$1 : type === 'error' ? danger700$1 : type === 'success' ? success700$1 : warning700$1;
 });
 var TextWrapper = styled.div(_templateObject4$a());
-var TruncaterButton = styled.button(_templateObject5$4(), primary700, function(param) {
+var TruncaterButton = styled.button(_templateObject5$4(), primary700$1, function(param) {
     var isExpanded = param.isExpanded;
     return !isExpanded ? '0' : '0.25rem';
 });
@@ -2362,7 +2565,13 @@ function _templateObject$r() {
         ";\n    cursor: pointer;\n    color: ",
         ";\n  }\n  &:disabled {\n    background-color: ",
         ";\n    cursor: not-allowed;\n\n    color: ",
-        ";\n  }\n"
+        ";\n  }\n\n  html.dark & {\n    ",
+        "\n\n    ",
+        "\n\n    ",
+        "\n\n    &:disabled {\n      background-color: ",
+        ";\n      color: ",
+        ";\n      & svg {\n        color: ",
+        ";\n      }\n    }\n  }\n"
     ]);
     _templateObject$r = function _templateObject() {
         return data;
@@ -2399,26 +2608,26 @@ var getTextColor = function(color) {
     var variant = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'contained';
     switch("".concat(color, "|").concat(variant)){
         case 'primary|contained':
-            return textPrimaryWhite;
+            return textPrimaryWhite$1;
         case 'primary|outlined':
-            return primary600;
+            return primary600$1;
         case 'secondary|contained':
-            return textPrimary;
+            return textPrimary$1;
         case 'secondary|outlined':
-            return textPrimary;
+            return textPrimary$1;
         case 'danger|contained':
-            return danger700;
+            return danger700$1;
         case 'danger|outlined':
-            return danger700;
+            return danger700$1;
         default:
-            return textPrimary;
+            return textPrimary$1;
     }
 };
 var BaseButton = styled.button(_templateObject$r(), function(props) {
     return props.size === 'large' ? '12px 16px' : '10px 12px';
 }, function(param) {
     var color = param.color, variant = param.variant;
-    return variant === 'outlined' ? "1px solid ".concat(color === 'secondary' ? neutral400 : getColor(color, 600)) : '1px solid transparent';
+    return variant === 'outlined' ? "1px solid ".concat(color === 'secondary' ? neutral400$1 : getColor(color, 600)) : '1px solid transparent';
 }, function(param) {
     var round = param.round;
     return round ? '50%' : "".concat(spacing(1), "px");
@@ -2433,20 +2642,29 @@ var BaseButton = styled.button(_templateObject$r(), function(props) {
     return disabled ? undefined : getTextColor(color, variant);
 }, function(param) {
     var color = param.color, variant = param.variant, disabled = param.disabled;
-    return disabled ? undefined : variant === 'outlined' ? neutral100 : color ? getColor(color, 700) : neutral100;
+    return disabled ? undefined : variant === 'outlined' ? neutral100$1 : color ? getColor(color, 700) : neutral100$1;
 }, function(param) {
     var color = param.color, disabled = param.disabled;
-    return color === 'danger' && !disabled ? danger800 : undefined;
+    return color === 'danger' && !disabled ? danger800$1 : undefined;
 }, function(param) {
     var color = param.color, variant = param.variant, disabled = param.disabled;
-    return disabled ? undefined : variant === 'outlined' ? 'white' : color ? getColor(color, 800) : neutral200;
+    return disabled ? undefined : variant === 'outlined' ? 'white' : color ? getColor(color, 800) : neutral200$1;
 }, function(param) {
     var color = param.color, disabled = param.disabled;
-    return color === 'danger' && !disabled ? danger900 : undefined;
+    return color === 'danger' && !disabled ? danger900$1 : undefined;
 }, getColor('neutral', 100), function(param) {
     var color = param.color;
-    return color === 'primary' ? textPrimaryIconDisabled : textPrimaryIconDisabled;
-});
+    return color === 'primary' ? textPrimaryIconDisabled$1 : textPrimaryIconDisabled$1;
+}, function(param) {
+    var color = param.color, variant = param.variant;
+    return color === 'secondary' && variant !== 'outlined' ? "\n      background-color: ".concat(surfaceRaised, ";\n      color: ").concat(textPrimaryWhite, ";\n      &:hover {\n        background-color: ").concat(surfaceRaisedHover, ";\n      }\n      &:active {\n        background-color: ").concat(surfaceMuted, ";\n      }\n      & svg {\n        color: ").concat(textPrimaryWhite, ";\n      }\n    ") : '';
+}, function(param) {
+    var variant = param.variant;
+    return variant === 'outlined' ? "\n      background-color: transparent;\n      border-color: ".concat(surfaceRaised, ";\n      color: ").concat(textPrimaryWhite, ";\n      &:hover {\n        background-color: ").concat(surfacePrimary, ";\n      }\n      &:active {\n        background-color: ").concat(surfaceDeep, ";\n      }\n      & svg {\n        color: ").concat(textPrimaryWhite, ";\n      }\n    ") : '';
+}, function(param) {
+    var color = param.color;
+    return !color || color !== 'secondary' && color !== 'primary' && color !== 'danger' ? "\n      background-color: transparent;\n      & svg {\n        color: ".concat(neutral300$1, ";\n      }\n      &:hover {\n        background-color: ").concat(surfaceRaised, ";\n      }\n      &:active {\n        background-color: ").concat(surfaceRaisedHover, ";\n      }\n    ") : '';
+}, surfaceRaised, surfaceMuted, surfaceMuted);
 
 function _define_property$16(obj, key, value) {
     if (key in obj) {
@@ -21629,7 +21847,14 @@ function _templateObject$p() {
         ";\n  }\n  .react-datepicker__day:hover div,\n  .react-datepicker__day--keyboard-selected div {\n    background: ",
         ";\n  }\n  .react-datepicker__day--selected div,\n  .react-datepicker__day--selected:hover div {\n    color: ",
         ";\n    background: ",
-        ";\n  }\n"
+        ";\n  }\n\n  html.dark & {\n    .react-datepicker__day-name {\n      color: ",
+        ";\n    }\n    .react-datepicker__week {\n      &:last-child {\n        .react-datepicker__day {\n          border-top: 5px solid ",
+        ";\n        }\n      }\n    }\n    .react-datepicker__day {\n      border-top: 5px solid ",
+        ";\n      border-bottom: 5px solid ",
+        ";\n      color: ",
+        ";\n    }\n    .react-datepicker__day--outside-month div {\n      color: ",
+        ";\n    }\n    .react-datepicker__day:hover div,\n    .react-datepicker__day--keyboard-selected div {\n      background: ",
+        ";\n    }\n  }\n"
     ]);
     _templateObject$p = function _templateObject() {
         return data;
@@ -21650,7 +21875,12 @@ function _templateObject1$g() {
         " 50%\n    );\n  }\n  .react-datepicker__day--selecting-range-start,\n  .react-datepicker__day--range-start {\n    & div,\n    &:hover div {\n      color: ",
         ";\n      background: ",
         ";\n    }\n  }\n  .react-datepicker__day--selecting-range-start:not(\n      .react-datepicker__day--selecting-range-end\n    ),\n  .react-datepicker__day--range-start:not(.react-datepicker__day--range-end) {\n    background: linear-gradient(\n      to right,\n      transparent 50%,\n      ",
-        " 50%\n    );\n  }\n"
+        " 50%\n    );\n  }\n\n  html.dark & {\n    .react-datepicker__day--in-selecting-range:not(\n        .react-datepicker__day--selecting-range-start\n      ):not(.react-datepicker__day--selecting-range-end),\n    .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(\n        .react-datepicker__day--range-end\n      ) {\n      color: ",
+        ";\n      background: ",
+        ";\n\n      &:hover {\n        background: ",
+        ";\n      }\n    }\n    .react-datepicker__day--selecting-range-end:not(\n        .react-datepicker__day--selecting-range-start\n      ),\n    .react-datepicker__day--range-end:not(.react-datepicker__day--range-start) {\n      background: linear-gradient(\n        to left,\n        transparent 50%,\n        ",
+        " 50%\n      );\n    }\n    .react-datepicker__day--selecting-range-start:not(\n        .react-datepicker__day--selecting-range-end\n      ),\n    .react-datepicker__day--range-start:not(.react-datepicker__day--range-end) {\n      background: linear-gradient(\n        to right,\n        transparent 50%,\n        ",
+        " 50%\n      );\n    }\n  }\n"
     ]);
     _templateObject1$g = function _templateObject() {
         return data;
@@ -21667,16 +21897,20 @@ function _templateObject2$g() {
         "\n      line-height: ",
         "px;\n    }\n\n    ",
         "\n    ",
-        "\n  }\n"
+        "\n\n    html.dark & {\n      color: ",
+        ";\n      background: ",
+        ";\n\n      .react-datepicker__navigation {\n        background: ",
+        ";\n\n        &:hover {\n          background: ",
+        ";\n        }\n      }\n    }\n  }\n"
     ]);
     _templateObject2$g = function _templateObject() {
         return data;
     };
     return data;
 }
-var dayStyles = css(_templateObject$p(), $paragraph300Medium, neutral400, $paragraph300Bold, primary600, $paragraph300Medium, neutral400, primary100, textPrimaryWhite, primary600);
-var rangeStyles = css(_templateObject1$g(), primary600, primary100, primary100, textPrimaryWhite, primary600, primary200, textPrimaryWhite, primary600, primary100, textPrimaryWhite, primary600, primary100);
-var Container$3 = styled.div(_templateObject2$g(), datepickerStyles, textPrimary, neutral100, neutral300, $paragraph100Semibold, spacing(4), dayStyles, rangeStyles);
+var dayStyles = css(_templateObject$p(), $paragraph300Medium, neutral400$1, $paragraph300Bold, primary600$1, $paragraph300Medium, neutral400$1, primary100$1, textPrimaryWhite$1, primary600$1, surfaceMuted, surfacePrimary, surfacePrimary, surfacePrimary, textPrimaryWhite, surfaceMuted, primary200);
+var rangeStyles = css(_templateObject1$g(), primary600$1, primary100$1, primary100$1, textPrimaryWhite$1, primary600$1, primary200$1, textPrimaryWhite$1, primary600$1, primary100$1, textPrimaryWhite$1, primary600$1, primary100$1, primary400, primary200, primary200, primary200, primary200);
+var Container$3 = styled.div(_templateObject2$g(), datepickerStyles, textPrimary$1, neutral100$1, neutral300$1, $paragraph100Semibold, spacing(4), dayStyles, rangeStyles, textPrimaryWhite, surfacePrimary, surfaceRaised, surfaceRaisedHover);
 var CalendarContainer = function(param) {
     var children = param.children;
     return /*#__PURE__*/ jsx("div", {
@@ -21893,7 +22127,8 @@ function _templateObject$o() {
         "\n  color: ",
         ";\n  font-family: 'Roboto', sans-serif;\n  position: ",
         ";\n  left: ",
-        ";\n"
+        ";\n\n  html.dark & {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject$o = function _templateObject() {
         return data;
@@ -21912,6 +22147,13 @@ var StyledTypography = styled.div(_templateObject$o(), function(param) {
 }, function(param) {
     var $srOnly = param.$srOnly;
     return $srOnly ? '-9999px' : undefined;
+}, function(param) {
+    var $color = param.$color;
+    // Only override if it's using the theme colors, otherwise preserve custom colors
+    if ($color === textPrimary$1 || $color === textSecondary$1) {
+        return textPrimaryWhite;
+    }
+    return $color;
 });
 var Typography = function(_param) {
     var _param_variant = _param.variant, variant = _param_variant === void 0 ? 'paragraph100Regular' : _param_variant, children = _param.children, _param_color = _param.color, color = _param_color === void 0 ? 'primary' : _param_color, _param_srOnly = _param.srOnly, srOnly = _param_srOnly === void 0 ? false : _param_srOnly, rest = _object_without_properties$k(_param, [
@@ -21921,7 +22163,7 @@ var Typography = function(_param) {
         "srOnly"
     ]);
     var Tag = getTagForVariant(variant);
-    var colorString = color === 'primary' ? textPrimary : color === 'secondary' ? textSecondary : color;
+    var colorString = color === 'primary' ? textPrimary$1 : color === 'secondary' ? textSecondary$1 : color;
     return /*#__PURE__*/ jsx(StyledTypography, _object_spread_props$p(_object_spread$v({
         as: Tag,
         $variant: variant,
@@ -22052,7 +22294,7 @@ function _tagged_template_literal$n(strings, raw) {
 }
 function _templateObject$n() {
     var data = _tagged_template_literal$n([
-        "\n  height: 15px;\n  width: 15px;\n  cursor: pointer;\n"
+        "\n  height: 15px;\n  width: 15px;\n  cursor: pointer;\n\n  html.dark & {\n    filter: invert(1) hue-rotate(180deg);\n  }\n"
     ]);
     _templateObject$n = function _templateObject() {
         return data;
@@ -22247,14 +22489,15 @@ function _templateObject$m() {
         "\n  position: absolute;\n  z-index: 1;\n  padding: ",
         "px;\n  border-radius: ",
         "px;\n  background: white;\n  ",
-        "\n"
+        "\n\n  html.dark & {\n    background: ",
+        ";\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);\n  }\n"
     ]);
     _templateObject$m = function _templateObject() {
         return data;
     };
     return data;
 }
-var PopperContainer = styled.div(_templateObject$m(), spacing(2), spacing(1), elevation400);
+var PopperContainer = styled.div(_templateObject$m(), spacing(2), spacing(1), elevation400, surfacePrimary);
 var calculatePosition = function(anchorRect, popperRect, side, align, offset, detectEdges) {
     var top = 0;
     var left = 0;
@@ -22534,14 +22777,19 @@ function _templateObject$l() {
         "\n  display: flex;\n  justify-content: space-between;\n  padding: ",
         "px;\n  border: 1px solid ",
         ";\n  border-radius: ",
-        "px;\n  font-weight: 700;\n  opacity: 0.8;\n"
+        "px;\n  font-weight: 500;\n  opacity: 0.8;\n  background-color: white;\n\n  html.dark & {\n    background-color: ",
+        " !important;\n    border-color: ",
+        ";\n    color: ",
+        ";\n\n    &:hover {\n      background-color: ",
+        " !important;\n    }\n\n    &:active {\n      background-color: ",
+        " !important;\n    }\n  }\n"
     ]);
     _templateObject$l = function _templateObject() {
         return data;
     };
     return data;
 }
-var DatePickerButton = styled(Button)(_templateObject$l(), spacing(1), neutral300, spacing(1));
+var DatePickerButton = styled(Button)(_templateObject$l(), spacing(1), neutral300$1, spacing(1), surfaceSecondary, surfaceRaisedHover, neutral200$1, surfaceRaised, surfaceRaised);
 var DatePicker = function(_param) {
     var _param_rangeSelect = _param.rangeSelect, rangeSelect = _param_rangeSelect === void 0 ? false : _param_rangeSelect, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? new Date() : _param_selectedDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) : _param_startDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? new Date() : _param_endDate, minDate = _param.minDate, maxDate = _param.maxDate, onChange = _param.onChange, rest = _object_without_properties$i(_param, [
         "rangeSelect",
@@ -22736,7 +22984,8 @@ function _unsupported_iterable_to_array$i(o, minLen) {
 function _templateObject$k() {
     var data = _tagged_template_literal$k([
         "\n  margin-left: ",
-        "px;\n  transition: all 150ms ease-in-out;\n  transform: ",
+        "px;\n  font-size: ",
+        "rem;\n  transition: all 150ms ease-in-out;\n  transform: ",
         ";\n"
     ]);
     _templateObject$k = function _templateObject() {
@@ -22745,6 +22994,9 @@ function _templateObject$k() {
     return data;
 }
 var ArrowIcon = styled(ChevronDown)(_templateObject$k(), spacing(1), function(param) {
+    var sz = param.sz;
+    return sz === 'large' ? 1 : 0.75;
+}, function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
@@ -22763,7 +23015,7 @@ var DropdownMenu = function(param) {
                 size: size,
                 style: {
                     whiteSpace: 'nowrap',
-                    borderColor: openProp || open ? primary600 : undefined
+                    borderColor: openProp || open ? primary600$1 : undefined
                 },
                 disabled: disabled
             }, buttonProps), {
@@ -22780,7 +23032,8 @@ var DropdownMenu = function(param) {
                 children: [
                     label,
                     /*#__PURE__*/ jsx(ArrowIcon, {
-                        open: isControlled ? openProp : open
+                        open: isControlled ? openProp : open,
+                        sz: size
                     })
                 ]
             })),
@@ -23184,14 +23437,14 @@ function _templateObject6$2() {
 var Container$2 = styled.div(_templateObject$i());
 var FilterGroup = styled.div(_templateObject1$e(), function(param) {
     var isHovered = param.isHovered;
-    return isHovered ? danger200 : 'white';
+    return isHovered ? danger200$1 : 'white';
 }, function(param) {
     var isHovered = param.isHovered;
-    return isHovered ? danger200 : '#e5e7eb';
+    return isHovered ? danger200$1 : '#e5e7eb';
 });
 var CloseButton$1 = styled.button(_templateObject2$e());
 var FilterRowsContainer = styled.div(_templateObject3$b());
-var OrButton = styled.button(_templateObject4$9(), neutral100);
+var OrButton = styled.button(_templateObject4$9(), neutral100$1);
 var ButtonGroup = styled.div(_templateObject5$3());
 var AndButtonContainer = styled.div(_templateObject6$2());
 var FilterForm = function(param) {
@@ -23534,7 +23787,12 @@ function _templateObject1$d() {
         ";\n  outline: none;\n  &::placeholder {\n    color: ",
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  ",
-        "\n"
+        "\n\n  html.dark & {\n    background-color: ",
+        ";\n    color: ",
+        ";\n    border-color: ",
+        ";\n\n    &::placeholder {\n      color: ",
+        ";\n    }\n\n    &:focus-within {\n      border-color: ",
+        ";\n    }\n  }\n"
     ]);
     _templateObject1$d = function _templateObject() {
         return data;
@@ -23545,7 +23803,9 @@ function _templateObject2$d() {
     var data = _tagged_template_literal$h([
         "\n  position: absolute;\n  left: ",
         ";\n  right: ",
-        ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & svg {\n    font-size: 1rem;\n  }\n"
+        ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & svg {\n    font-size: 1rem;\n    color: ",
+        ";\n  }\n\n  html.dark & svg {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject2$d = function _templateObject() {
         return data;
@@ -23554,34 +23814,40 @@ function _templateObject2$d() {
 }
 // Wrapper for the Input and Icons
 var InputWrapper$3 = styled.div(_templateObject$h());
-// Style for the Input itself
+// Style for the Input itself with dark mode support via html.dark selector
 var BaseInput$1 = styled.input(_templateObject1$d(), function(param) {
     var error = param.error, disabled = param.disabled;
-    return error && !disabled ? danger600 : neutral200;
+    return error && !disabled ? danger600$1 : neutral200$1;
 }, function(param) {
     var disabled = param.disabled;
-    return disabled ? neutral100 : 'white';
-}, textPrimary, function(param) {
+    return disabled ? neutral100$1 : 'white';
+}, textPrimary$1, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem' : '0.375rem';
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem' : '0.375rem';
-}, neutral500, function(param) {
+}, neutral500$1, function(param) {
     var error = param.error;
-    return error ? danger600 : primary600;
+    return error ? danger600$1 : primary600$1;
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? $paragraph100Regular : $paragraph200Regular;
+}, surfacePrimary, textPrimaryWhite, function(param) {
+    var error = param.error, disabled = param.disabled;
+    return error && !disabled ? danger500 : surfaceRaised;
+}, surfaceMuted, function(param) {
+    var error = param.error;
+    return error ? danger500 : primary400;
 });
-// Style for the Icons
+// Style for the Icons with dark mode support
 var IconWrapper$3 = styled.span(_templateObject2$d(), function(param) {
     var position = param.position;
     return position === 'left' ? '0.5rem' : 'auto';
 }, function(param) {
     var position = param.position;
     return position === 'right' ? '0.5rem' : 'auto';
-});
+}, neutral600$1, surfaceMuted);
 var Input = function(_param) {
     var LeftIcon = _param.leftIcon, RightIcon = _param.rightIcon, _param_clearable = _param.clearable, clearable = _param_clearable === void 0 ? false : _param_clearable, _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, style = _param.style, props = _object_without_properties$g(_param, [
         "leftIcon",
@@ -23601,8 +23867,8 @@ var Input = function(_param) {
                 sz: sz,
                 error: error,
                 style: _object_spread$o({
-                    paddingLeft: LeftIcon ? '2.063rem' : '0.563rem',
-                    paddingRight: RightIcon ? '2.063rem' : '0.563rem'
+                    paddingLeft: LeftIcon ? '2.25rem' : '0.75rem',
+                    paddingRight: RightIcon || clearable || props.type === 'search' ? '2.25rem' : '0.75rem'
                 }, style)
             })),
             clearable && props.value && !props.disabled && /*#__PURE__*/ jsx(IconButton, {
@@ -23627,6 +23893,23 @@ var Input = function(_param) {
             RightIcon && /*#__PURE__*/ jsx(IconWrapper$3, {
                 position: "right",
                 children: /*#__PURE__*/ jsx(RightIcon, {})
+            }),
+            clearable && props.value && /*#__PURE__*/ jsx(IconWrapper$3, {
+                position: "right",
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    icon: Close,
+                    size: "large",
+                    circular: true,
+                    onClick: function() {
+                        if (props.onChange) {
+                            props.onChange({
+                                target: {
+                                    value: ''
+                                }
+                            });
+                        }
+                    }
+                })
             })
         ]
     });
@@ -23872,24 +24155,24 @@ var MultiSelectWrapper = styled.div(_templateObject1$c(), function(param) {
     return disabled ? 'not-allowed' : 'pointer';
 }, function(param) {
     var disabled = param.disabled, type = param.type;
-    return disabled || type === 'secondary' ? neutral100 : 'white';
+    return disabled || type === 'secondary' ? neutral100$1 : 'white';
 }, function(param) {
     var error = param.error;
-    return error ? danger600 : primary600;
+    return error ? danger600$1 : primary600$1;
 }, function(param) {
     var type = param.type;
-    return type === 'primary' ? neutral100 : neutral200;
+    return type === 'primary' ? neutral100$1 : neutral200$1;
 }, function(param) {
     var error = param.error, disabled = param.disabled, type = param.type, open = param.open;
-    return type === 'primary' ? open ? primary600 : error && !disabled ? danger600 : neutral200 : error && !disabled ? danger600 : 'transparent';
+    return type === 'primary' ? open ? primary600$1 : error && !disabled ? danger600$1 : neutral200$1 : error && !disabled ? danger600$1 : 'transparent';
 }, function(param) {
     var disabled = param.disabled, type = param.type;
-    return disabled || type === 'secondary' ? neutral100 : 'white';
+    return disabled || type === 'secondary' ? neutral100$1 : 'white';
 });
 // Style for the Select itself
 var BaseSelect$1 = styled.select(_templateObject2$c(), function(param) {
     var hasValue = param.hasValue;
-    return hasValue ? textPrimary : neutral500;
+    return hasValue ? textPrimary$1 : neutral500$1;
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
@@ -23899,12 +24182,12 @@ var BaseSelect$1 = styled.select(_templateObject2$c(), function(param) {
 });
 var Chip$1 = styled.button(_templateObject3$a(), function(param) {
     var secondary = param.secondary;
-    return secondary ? neutral300 : neutral100;
+    return secondary ? neutral300$1 : neutral100$1;
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? $label100Medium : $label200Medium;
 });
-var ChipWrapper$1 = styled.div(_templateObject4$8(), neutral100, neutral300, function(param) {
+var ChipWrapper$1 = styled.div(_templateObject4$8(), neutral100$1, neutral300$1, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
 });
@@ -23928,8 +24211,8 @@ var IconWrapper$2 = styled.div(_templateObject5$2(), function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
-var PlaceholderOption = styled.option(_templateObject6$1(), $paragraph100Semibold, textSecondary);
-var SelectedOption = styled.option(_templateObject7$1(), $paragraph200Regular, textPrimary);
+var PlaceholderOption = styled.option(_templateObject6$1(), $paragraph100Semibold, textSecondary$1);
+var SelectedOption = styled.option(_templateObject7$1(), $paragraph200Regular, textPrimary$1);
 var MultiSelect = function(_param) {
     var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, className = _param.className, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$f(_param, [
         "sz",
@@ -24168,7 +24451,7 @@ function _templateObject$f() {
     };
     return data;
 }
-var loadingWheelStyle = css(_templateObject$f(), primary500);
+var loadingWheelStyle = css(_templateObject$f(), primary500$1);
 var Loader = function() {
     return /*#__PURE__*/ jsx("div", {
         css: loadingWheelStyle,
@@ -24410,19 +24693,19 @@ function _templateObject4$7() {
 }
 var InputWrapper$1 = styled.div(_templateObject$e(), function(param) {
     var isFocused = param.isFocused, error = param.error;
-    return isFocused ? primary600 : error ? danger600 : neutral200;
-}, textPrimary, function(param) {
+    return isFocused ? primary600$1 : error ? danger600$1 : neutral200$1;
+}, textPrimary$1, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
 });
-var BaseInput = styled.input(_templateObject1$b(), neutral500, function(param) {
+var BaseInput = styled.input(_templateObject1$b(), neutral500$1, function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
 // Reusing Chip from MultiSelect
 var Chip = styled.button(_templateObject2$b(), function(param) {
     var secondary = param.secondary;
-    return secondary ? neutral300 : neutral100;
+    return secondary ? neutral300$1 : neutral100$1;
 }, $label200Medium);
 var ChipWrapper = styled.div(_templateObject3$9());
 var ChipCounter = styled.p(_templateObject4$7(), function(param) {
@@ -24699,7 +24982,10 @@ function _templateObject1$a() {
         ";\n  }\n\n  border: 1px solid\n    ",
         ";\n  border-radius: ",
         "px;\n\n  background-color: ",
-        ";\n"
+        ";\n\n  html.dark & {\n    background-color: ",
+        ";\n    border-color: ",
+        ";\n    &:hover {\n      background-color: ",
+        ";\n    }\n  }\n"
     ]);
     _templateObject1$a = function _templateObject() {
         return data;
@@ -24711,7 +24997,8 @@ function _templateObject2$a() {
         "\n  flex: 1;\n  pointer-events: none;\n  border: none;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background-color: transparent;\n  z-index: 1;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  color: ",
         ";\n  padding: ",
         ";\n  padding-right: 2rem;\n  outline: none;\n\n  ",
-        "\n"
+        "\n\n  html.dark & {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject2$a = function _templateObject() {
         return data;
@@ -24722,7 +25009,8 @@ function _templateObject3$8() {
     var data = _tagged_template_literal$d([
         "\n  position: absolute;\n  right: 0rem;\n  width: 2rem;\n  font-size: ",
         "rem;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 0;\n  border: none;\n  cursor: pointer;\n  transition: all 150ms ease-in-out;\n  transform: ",
-        ";\n"
+        ";\n\n  html.dark & {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject3$8 = function _templateObject() {
         return data;
@@ -24733,7 +25021,8 @@ function _templateObject4$6() {
     var data = _tagged_template_literal$d([
         "\n  ",
         "\n  color: ",
-        ";\n"
+        ";\n\n  html.dark & {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject4$6 = function _templateObject() {
         return data;
@@ -24750,36 +25039,45 @@ var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
     return disabled ? 'not-allowed' : 'pointer';
 }, function(param) {
     var disabled = param.disabled, type = param.type;
-    return disabled || type === 'secondary' ? neutral100 : 'white';
+    return disabled || type === 'secondary' ? neutral100$1 : 'white';
 }, function(param) {
     var error = param.error;
-    return error ? danger600 : primary600;
+    return error ? danger600$1 : primary600$1;
 }, function(param) {
     var type = param.type;
-    return type === 'primary' ? neutral100 : neutral200;
+    return type === 'primary' ? neutral100$1 : neutral200$1;
 }, function(param) {
     var error = param.error, disabled = param.disabled, type = param.type, open = param.open;
-    return type === 'primary' ? open ? primary600 : error && !disabled ? danger600 : neutral400 : error && !disabled ? danger600 : 'transparent';
+    return type === 'primary' ? open ? primary600$1 : error && !disabled ? danger600$1 : neutral400$1 : error && !disabled ? danger600$1 : 'transparent';
 }, spacing(1), function(param) {
     var disabled = param.disabled, type = param.type;
-    return disabled || type === 'secondary' ? neutral100 : 'white';
+    return disabled || type === 'secondary' ? neutral100$1 : 'white';
+}, function(param) {
+    var disabled = param.disabled, type = param.type;
+    return disabled || type === 'secondary' ? surfaceRaised : surfaceDeep;
+}, function(param) {
+    var error = param.error, disabled = param.disabled, type = param.type, open = param.open;
+    return type === 'primary' ? open ? primary400$1 : error && !disabled ? danger600$1 : surfaceRaisedHover : error && !disabled ? danger600$1 : 'transparent';
+}, function(param) {
+    var disabled = param.disabled, type = param.type;
+    return disabled || type === 'secondary' ? surfaceRaised : surfacePrimary;
 });
 // Style for the Select itself
-var BaseSelect = styled.select(_templateObject2$a(), textPrimary, function(param) {
+var BaseSelect = styled.select(_templateObject2$a(), textPrimary$1, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
 }, function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
-});
+}, neutral200$1);
 var IconWrapper$1 = styled.div(_templateObject3$8(), function(param) {
     var sz = param.sz;
     return sz === 'lg' ? 1 : 0.75;
 }, function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
-});
-var SelectOption = styled.option(_templateObject4$6(), $paragraph100Semibold, textPrimary);
+}, neutral200$1);
+var SelectOption = styled.option(_templateObject4$6(), $paragraph100Semibold, textPrimary$1, neutral200$1);
 var Select = function(_param) {
     var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? 'Please select...' : _param_placeholder, value = _param.value, setValue = _param.setValue; _param.initialValue; var _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, style = _param.style, _param_maxHeight = _param.maxHeight, maxHeight = _param_maxHeight === void 0 ? '14rem' : _param_maxHeight, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_addClearOption = _param.addClearOption, addClearOption = _param_addClearOption === void 0 ? false : _param_addClearOption, _param_clearOptionLabel = _param.clearOptionLabel, clearOptionLabel = _param_clearOptionLabel === void 0 ? 'Clear' : _param_clearOptionLabel, fullWidth = _param.fullWidth, props = _object_without_properties$c(_param, [
         "sz",
@@ -25012,13 +25310,13 @@ var BaseTextArea = styled.textarea(_templateObject1$9(), function(param) {
     return sz === 'lg' ? '0.5rem' : '0.375rem';
 }, function(param) {
     var error = param.error, disabled = param.disabled;
-    return error && !disabled ? danger600 : neutral200;
-}, textPrimary, function(param) {
+    return error && !disabled ? danger600$1 : neutral200$1;
+}, textPrimary$1, function(param) {
     var disabled = param.disabled;
-    return disabled ? neutral100 : 'white';
-}, neutral500, function(param) {
+    return disabled ? neutral100$1 : 'white';
+}, neutral500$1, function(param) {
     var error = param.error;
-    return error ? danger600 : primary600;
+    return error ? danger600$1 : primary600$1;
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? $paragraph100Regular : $paragraph200Regular;
@@ -25162,7 +25460,8 @@ function _tagged_template_literal$b(strings, raw) {
 function _templateObject$b() {
     var data = _tagged_template_literal$b([
         "\n  box-sizing: border-box;\n  width: 100%;\n  cursor: pointer;\n  white-space: nowrap;\n  &:hover {\n    background-color: ",
-        ";\n  }\n"
+        ";\n  }\n\n  html.dark & {\n    &:hover {\n      background-color: ",
+        ";\n    }\n  }\n"
     ]);
     _templateObject$b = function _templateObject() {
         return data;
@@ -25182,8 +25481,10 @@ function _templateObject2$8() {
     var data = _tagged_template_literal$b([
         "\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n  background-color: transparent;\n  text-align: left;\n  border: none;\n  white-space: nowrap;\n  width: 100%;\n  padding: ",
         "px ",
-        "px;\n  text-decoration: none;\n  ",
-        "\n"
+        "px;\n  text-decoration: none;\n  color: ",
+        ";\n  ",
+        "\n\n  html.dark & {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject2$8 = function _templateObject() {
         return data;
@@ -25193,7 +25494,9 @@ function _templateObject2$8() {
 function _templateObject3$7() {
     var data = _tagged_template_literal$b([
         "\n  ",
-        "\n"
+        "\n  background: ",
+        ";\n\n  html.dark & {\n    background: ",
+        ";\n  }\n"
     ]);
     _templateObject3$7 = function _templateObject() {
         return data;
@@ -25203,18 +25506,32 @@ function _templateObject3$7() {
 function _templateObject4$5() {
     var data = _tagged_template_literal$b([
         "\n  ",
-        "\n"
+        "\n  background: ",
+        ";\n\n  html.dark & {\n    background: ",
+        ";\n  }\n"
     ]);
     _templateObject4$5 = function _templateObject() {
         return data;
     };
     return data;
 }
-var MenuItemContainer = styled.div(_templateObject$b(), primary100);
+var MenuItemContainer = styled.div(_templateObject$b(), primary100$1, surfacePrimary);
 var IconContainer = styled.div(_templateObject1$8());
-var buttonStyles = css(_templateObject2$8(), spacing(1), spacing(2), $paragraph200Regular);
-var StyledItem = styled.button(_templateObject3$7(), buttonStyles);
-var StyledLink = styled.a(_templateObject4$5(), buttonStyles);
+var buttonStyles = css(_templateObject2$8(), spacing(1), spacing(2), neutral900$1, $paragraph200Regular, neutral200$1);
+var StyledItem = styled.button(_templateObject3$7(), buttonStyles, function(param) {
+    var selected = param.selected;
+    return selected ? primary200$1 : 'transparent';
+}, function(param) {
+    var selected = param.selected;
+    return selected ? primary200 : 'transparent';
+});
+var StyledLink = styled.a(_templateObject4$5(), buttonStyles, function(param) {
+    var selected = param.selected;
+    return selected ? primary200$1 : 'transparent';
+}, function(param) {
+    var selected = param.selected;
+    return selected ? primary200 : 'transparent';
+});
 var MenuItem = function(_param) {
     var label = _param.label, href = _param.href, selected = _param.selected, checkbox = _param.checkbox, onClick = _param.onClick, icon = _param.icon, disabled = _param.disabled, _param_size = _param.size, size = _param_size === void 0 ? 'small' : _param_size, props = _object_without_properties$a(_param, [
         "label",
@@ -25232,10 +25549,10 @@ var MenuItem = function(_param) {
             disabled: disabled,
             href: href,
             onClick: onClick,
+            selected: selected,
             style: {
                 cursor: disabled ? 'not-allowed' : 'pointer',
-                color: disabled ? "".concat(neutral500) : "".concat(neutral900),
-                background: selected ? primary200 : undefined
+                color: disabled ? "".concat(neutral500$1) : undefined
             }
         }, props), {
             children: [
@@ -25246,7 +25563,7 @@ var MenuItem = function(_param) {
                 /*#__PURE__*/ jsxs(Typography, {
                     style: {
                         cursor: disabled ? 'not-allowed' : 'pointer',
-                        color: disabled ? "".concat(neutral500) : "".concat(neutral900)
+                        color: disabled ? "".concat(neutral500$1) : undefined
                     },
                     variant: "".concat(size === 'small' ? 'label200Regular' : 'label100Regular'),
                     children: [
@@ -28993,7 +29310,7 @@ var Overlay = styled.div(_templateObject$9());
 var LoadingOverlay = function() {
     return /*#__PURE__*/ jsx(Overlay, {
         children: /*#__PURE__*/ jsx(LoadingWheel, {
-            color: primary500
+            color: primary500$1
         })
     });
 };
@@ -29097,7 +29414,8 @@ function _templateObject1$7() {
         "px;\n  background-color: white;\n  border-radius: ",
         "px;\n  outline: none;\n  padding: ",
         "px;\n\n  ",
-        "\n"
+        "\n\n  html.dark & {\n    background-color: ",
+        ";\n  }\n"
     ]);
     _templateObject1$7 = function _templateObject() {
         return data;
@@ -29133,7 +29451,7 @@ function _templateObject4$4() {
     return data;
 }
 var StyledModal = styled(Modal$1)(_templateObject$8());
-var ModalContent = styled.div(_templateObject1$7(), spacing(2), spacing(1), spacing(3), elevation400);
+var ModalContent = styled.div(_templateObject1$7(), spacing(2), spacing(1), spacing(3), elevation400, surfacePrimary);
 var ModalHeader = styled.div(_templateObject2$7());
 var ModalBody = styled.div(_templateObject3$6());
 var ModalFooter = styled.div(_templateObject4$4(), spacing(1));
@@ -29569,7 +29887,7 @@ var RadioButton = function(_param) {
                 as: "label",
                 htmlFor: id,
                 style: {
-                    color: disabled ? neutral400 : undefined,
+                    color: disabled ? neutral400$1 : undefined,
                     marginLeft: spacing(1),
                     cursor: disabled ? undefined : 'pointer',
                     lineHeight: 1
@@ -29639,7 +29957,7 @@ var RadioGroup = function(param) {
                     label,
                     required && /*#__PURE__*/ jsx("span", {
                         style: {
-                            color: danger600
+                            color: danger600$1
                         },
                         children: "*"
                     }),
@@ -29665,7 +29983,7 @@ var RadioGroup = function(param) {
             }),
             error && /*#__PURE__*/ jsx(Typography, {
                 variant: "paragraph300Regular",
-                color: textDanger,
+                color: textDanger$1,
                 children: error
             })
         ]
@@ -29770,7 +30088,9 @@ function _templateObject1$5() {
     var data = _tagged_template_literal$5([
         "\n  display: flex;\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n\n  &:hover {\n    background: ",
         ";\n  }\n\n  & svg {\n    color: ",
-        ";\n    font-size: 1.5rem;\n  }\n"
+        ";\n    font-size: 1.5rem;\n  }\n\n  html.dark & {\n    &:hover {\n      background: ",
+        ";\n    }\n\n    & svg {\n      color: ",
+        ";\n    }\n  }\n"
     ]);
     _templateObject1$5 = function _templateObject() {
         return data;
@@ -29798,7 +30118,7 @@ function _templateObject3$4() {
     return data;
 }
 var Container$1 = styled.div(_templateObject$5(), spacing(1));
-var IconWrapper = styled(IconWrapper$3)(_templateObject1$5(), neutral200, neutral600);
+var IconWrapper = styled(IconWrapper$3)(_templateObject1$5(), neutral200$1, neutral600$1, surfaceRaised, neutral300$1);
 var StyledInput = styled(BaseInput$1)(_templateObject2$5());
 var GoButton = styled(Button)(_templateObject3$4(), spacing(1), spacing(1));
 var SearchBar = function(_param) {
@@ -33901,7 +34221,10 @@ function _templateObject1$4() {
         "\n  padding: ",
         "px;\n  text-align: left;\n  position: relative;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: ",
         ";\n  border-bottom: 1px solid ",
-        ";\n\n  &:hover .pbui-table-resize-handle {\n    height: 100%;\n  }\n"
+        ";\n\n  &:hover .pbui-table-resize-handle {\n    height: 100%;\n  }\n\n  html.dark & {\n    background: ",
+        ";\n    color: ",
+        ";\n    border-bottom: 1px solid ",
+        ";\n  }\n"
     ]);
     _templateObject1$4 = function _templateObject() {
         return data;
@@ -33947,10 +34270,10 @@ function _templateObject5$1() {
     return data;
 }
 var StyledHeader = styled.thead(_templateObject$4());
-var Th = styled(Typography)(_templateObject1$4(), spacing(1), neutral100, neutral300);
+var Th = styled(Typography)(_templateObject1$4(), spacing(1), neutral100$1, neutral300$1, surfacePrimary, textPrimaryWhite, surfaceRaised);
 var HeaderContent = styled.div(_templateObject2$4());
 var ResizeHandleContainer = styled.div(_templateObject3$3());
-var ResizeHandle = styled.div(_templateObject4$3(), neutral300);
+var ResizeHandle = styled.div(_templateObject4$3(), neutral300$1);
 var SortIcon = styled.span(_templateObject5$1(), spacing(1));
 var TableHeader = function(param) {
     var table = param.table, disableControls = param.disableControls, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
@@ -33965,13 +34288,14 @@ var TableHeader = function(param) {
                     ];
                     var columnDef = header === null || header === void 0 ? void 0 : (_header_column = header.column) === null || _header_column === void 0 ? void 0 : _header_column.columnDef;
                     var autoWidth = !!columnDef.autoWidth;
+                    var isFixed = actionHeaders.includes(header.id);
                     return /*#__PURE__*/ jsxs(Th, {
                         variant: "paragraph200Semibold",
                         as: "th",
                         style: {
                             width: autoWidth ? 'auto' : "".concat(header.getSize(), "px"),
-                            minWidth: autoWidth ? 'auto' : undefined,
-                            maxWidth: autoWidth ? 'auto' : undefined,
+                            minWidth: isFixed ? "".concat(header.getSize(), "px") : autoWidth ? 'auto' : undefined,
+                            maxWidth: isFixed ? "".concat(header.getSize(), "px") : autoWidth ? 'auto' : undefined,
                             padding: dense ? "".concat(spacing(1), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px")
                         },
                         children: [
@@ -33988,10 +34312,10 @@ var TableHeader = function(param) {
                                     header.column.getCanSort() && /*#__PURE__*/ jsxs(SortIcon, {
                                         children: [
                                             /*#__PURE__*/ jsx(ChevronUp, {
-                                                color: header.column.getIsSorted() === 'desc' ? neutral400 : undefined
+                                                color: header.column.getIsSorted() === 'desc' ? neutral400$1 : undefined
                                             }),
                                             /*#__PURE__*/ jsx(ChevronDown, {
-                                                color: header.column.getIsSorted() === 'asc' ? neutral400 : undefined
+                                                color: header.column.getIsSorted() === 'asc' ? neutral400$1 : undefined
                                             })
                                         ]
                                     })
@@ -34047,8 +34371,8 @@ function _templateObject1$3() {
 }
 function _templateObject2$3() {
     var data = _tagged_template_literal$3([
-        "\n  ",
-        "\n\n  &:last-child td {\n    border-bottom: none;\n  }\n"
+        "\n        &:hover {\n          background: ",
+        ";\n        }\n      "
     ]);
     _templateObject2$3 = function _templateObject() {
         return data;
@@ -34057,7 +34381,11 @@ function _templateObject2$3() {
 }
 function _templateObject3$2() {
     var data = _tagged_template_literal$3([
-        "\n        white-space: normal;\n        word-break: break-word;\n        overflow-wrap: break-word;\n      "
+        "\n  background: ",
+        ";\n\n  ",
+        "\n\n  &:last-child td {\n    border-bottom: none;\n  }\n\n  html.dark & {\n    background: ",
+        ";\n\n    ",
+        "\n  }\n"
     ]);
     _templateObject3$2 = function _templateObject() {
         return data;
@@ -34066,7 +34394,7 @@ function _templateObject3$2() {
 }
 function _templateObject4$2() {
     var data = _tagged_template_literal$3([
-        "\n        white-space: normal;\n      "
+        "\n        white-space: normal;\n        word-break: break-word;\n        overflow-wrap: break-word;\n      "
     ]);
     _templateObject4$2 = function _templateObject() {
         return data;
@@ -34075,7 +34403,7 @@ function _templateObject4$2() {
 }
 function _templateObject5() {
     var data = _tagged_template_literal$3([
-        "\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "
+        "\n        white-space: normal;\n      "
     ]);
     _templateObject5 = function _templateObject() {
         return data;
@@ -34084,9 +34412,7 @@ function _templateObject5() {
 }
 function _templateObject6() {
     var data = _tagged_template_literal$3([
-        "\n  border-bottom: 1px solid ",
-        ";\n\n  ",
-        "\n"
+        "\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "
     ]);
     _templateObject6 = function _templateObject() {
         return data;
@@ -34094,32 +34420,51 @@ function _templateObject6() {
     return data;
 }
 function _templateObject7() {
+    var data = _tagged_template_literal$3([
+        "\n  border-bottom: 1px solid ",
+        ";\n\n  ",
+        "\n\n  html.dark & {\n    color: ",
+        ";\n    border-bottom: 1px solid ",
+        ";\n  }\n"
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
     var data = _tagged_template_literal$3([
         "\n  display: -webkit-box;\n  -webkit-line-clamp: ",
         ";\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n"
     ]);
-    _templateObject7 = function _templateObject() {
+    _templateObject8 = function _templateObject() {
         return data;
     };
     return data;
 }
 var StyledTableBody = styled.tbody(_templateObject$3());
-var Tr = styled.tr(_templateObject2$3(), function(props) {
-    return props.enableHover && css(_templateObject1$3(), props.disabled ? neutral100 : primary100);
+var Tr = styled.tr(_templateObject3$2(), function(props) {
+    return props.isSelected ? primary100$1 : 'transparent';
+}, function(props) {
+    return props.enableHover && css(_templateObject1$3(), props.disabled ? neutral100$1 : primary100$1);
+}, function(props) {
+    return props.isSelected ? primary200 : 'transparent';
+}, function(props) {
+    return props.enableHover && css(_templateObject2$3(), props.disabled ? surfaceRaised : primary200);
 });
-var Td = styled(Typography)(_templateObject6(), neutral300, function(props) {
+var Td = styled(Typography)(_templateObject7(), neutral300$1, function(props) {
     var overflow = props.cellOverflow || 'truncate';
     if (overflow === 'wrap') {
-        return css(_templateObject3$2());
+        return css(_templateObject4$2());
     }
     if (overflow === 'clamp') {
         // For clamp, don't apply display styles to td - content wrapper will handle it
-        return css(_templateObject4$2());
+        return css(_templateObject5());
     }
     // Default: truncate
-    return css(_templateObject5());
-});
-var ClampWrapper = styled.div(_templateObject7(), function(props) {
+    return css(_templateObject6());
+}, textPrimaryWhite, surfaceRaised);
+var ClampWrapper = styled.div(_templateObject8(), function(props) {
     return props.maxLines;
 });
 var TableBody = function(param) {
@@ -34131,12 +34476,12 @@ var TableBody = function(param) {
             return /*#__PURE__*/ jsx(Tr, {
                 role: rowClickEnabled ? 'button' : undefined,
                 disabled: isDisabled,
+                isSelected: row.getIsSelected(),
                 onClick: onRowClick ? function() {
                     return !isDisabled && onRowClick(row.original);
                 } : row.getToggleSelectedHandler(),
                 style: {
-                    cursor: rowClickEnabled ? isDisabled ? 'not-allowed' : 'pointer' : undefined,
-                    background: row.getIsSelected() ? primary100 : undefined
+                    cursor: rowClickEnabled ? isDisabled ? 'not-allowed' : 'pointer' : undefined
                 },
                 enableHover: rowClickEnabled,
                 "data-testid": "".concat(testId, "-row-").concat(row.id),
@@ -34146,6 +34491,7 @@ var TableBody = function(param) {
                     var overflow = columnDef.overflow;
                     var maxLines = columnDef.maxLines;
                     var autoWidth = columnDef.autoWidth;
+                    var isFixed = cell.column.id === 'row-select' || cell.column.id === 'context';
                     var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
                     return /*#__PURE__*/ jsx(Td, {
                         variant: "paragraph200Regular",
@@ -34154,6 +34500,8 @@ var TableBody = function(param) {
                         cellOverflow: overflow,
                         style: {
                             width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
+                            minWidth: isFixed ? "".concat(cell.column.getSize(), "px") : undefined,
+                            maxWidth: isFixed ? "".concat(cell.column.getSize(), "px") : undefined,
                             padding: dense ? "".concat(spacing(1), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px")
                         },
                         children: overflow === 'clamp' && maxLines ? /*#__PURE__*/ jsx(ClampWrapper, {
@@ -34341,7 +34689,8 @@ function _templateObject$2() {
     var data = _tagged_template_literal$2([
         "\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 400px;\n  border: 1px solid ",
         ";\n  border-radius: ",
-        "px;\n  overflow: scroll;\n"
+        "px;\n  overflow: scroll;\n\n  html.dark & {\n    border-color: ",
+        ";\n  }\n"
     ]);
     _templateObject$2 = function _templateObject() {
         return data;
@@ -34350,7 +34699,7 @@ function _templateObject$2() {
 }
 function _templateObject1$2() {
     var data = _tagged_template_literal$2([
-        "\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n  min-height: 0;\n  width: 100%;\n  overflow-x: auto;\n"
+        "\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n  min-height: 0;\n  min-width: 100%;\n  overflow-x: auto;\n"
     ]);
     _templateObject1$2 = function _templateObject() {
         return data;
@@ -34359,7 +34708,7 @@ function _templateObject1$2() {
 }
 function _templateObject2$2() {
     var data = _tagged_template_literal$2([
-        "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 0 ",
+        "\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 0 ",
         "px 0;\n  gap: ",
         "px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n"
     ]);
@@ -34370,7 +34719,7 @@ function _templateObject2$2() {
 }
 function _templateObject3$1() {
     var data = _tagged_template_literal$2([
-        "\n  display: flex;\n  gap: ",
+        "\n  display: flex;\n  flex-wrap: wrap;\n  gap: ",
         "px;\n  align-items: center;\n"
     ]);
     _templateObject3$1 = function _templateObject() {
@@ -34392,7 +34741,7 @@ var TableContainer = styled(/*#__PURE__*/ forwardRef(function(props, ref) {
     return /*#__PURE__*/ jsx("div", _object_spread_props$2(_object_spread$2({}, props), {
         ref: ref
     }));
-}))(_templateObject$2(), neutral300, spacing(1));
+}))(_templateObject$2(), neutral300$1, spacing(1), surfaceRaised);
 var TableWrapper = styled.table(_templateObject1$2());
 var TopBar = styled.div(_templateObject2$2(), spacing(2), spacing(2));
 var TopBarElement = styled.div(_templateObject3$1(), spacing(1));
@@ -34596,35 +34945,40 @@ var Table = function(param) {
                             })
                         }) : toolbar
                     }),
-                    hasPaginationHandlers && pageInfo && (paginationMode === 'page' && pageInfo && 'currentPage' in pageInfo ? /*#__PURE__*/ jsx(Pagination, {
-                        mode: "page",
-                        pageInfo: pageInfo,
-                        subText: subText,
-                        isLoading: isLoading,
-                        onPageSizeChange: function(size) {
-                            resetContainerScroll();
-                            onPageSizeChange(size);
-                        },
-                        onPageChange: function(page) {
-                            resetContainerScroll();
-                            onPageChange(page);
-                        },
-                        testId: "".concat(testId, "-pagination")
-                    }) : /*#__PURE__*/ jsx(Pagination, {
-                        mode: "cursor",
-                        pageInfo: pageInfo,
-                        subText: subText,
-                        isLoading: isLoading,
-                        onPageSizeChange: function(size) {
-                            resetContainerScroll();
-                            onPageSizeChange(size);
-                        },
-                        onPageChange: function(page) {
-                            resetContainerScroll();
-                            onPageChange(page);
+                    hasPaginationHandlers && pageInfo && /*#__PURE__*/ jsx("div", {
+                        style: {
+                            marginLeft: 'auto'
                         },
-                        testId: "".concat(testId, "-pagination")
-                    }))
+                        children: paginationMode === 'page' && pageInfo && 'currentPage' in pageInfo ? /*#__PURE__*/ jsx(Pagination, {
+                            mode: "page",
+                            pageInfo: pageInfo,
+                            subText: subText,
+                            isLoading: isLoading,
+                            onPageSizeChange: function(size) {
+                                resetContainerScroll();
+                                onPageSizeChange(size);
+                            },
+                            onPageChange: function(page) {
+                                resetContainerScroll();
+                                onPageChange(page);
+                            },
+                            testId: "".concat(testId, "-pagination")
+                        }) : /*#__PURE__*/ jsx(Pagination, {
+                            mode: "cursor",
+                            pageInfo: pageInfo,
+                            subText: subText,
+                            isLoading: isLoading,
+                            onPageSizeChange: function(size) {
+                                resetContainerScroll();
+                                onPageSizeChange(size);
+                            },
+                            onPageChange: function(page) {
+                                resetContainerScroll();
+                                onPageChange(page);
+                            },
+                            testId: "".concat(testId, "-pagination")
+                        })
+                    })
                 ]
             }),
             /*#__PURE__*/ jsxs("div", {
@@ -34652,10 +35006,18 @@ var Table = function(param) {
                                 children: !error ? 'No results found.' : error
                             }),
                             /*#__PURE__*/ jsxs(TableWrapper, {
+                                style: {
+                                    width: table.getCenterTotalSize()
+                                },
                                 children: [
                                     /*#__PURE__*/ jsx("colgroup", {
                                         children: table.getAllColumns().map(function(column) {
-                                            return /*#__PURE__*/ jsx("col", {}, column.id);
+                                            var isFixed = column.id === 'row-select' || column.id === 'context';
+                                            return /*#__PURE__*/ jsx("col", {
+                                                style: isFixed ? {
+                                                    width: "".concat(column.getSize(), "px")
+                                                } : undefined
+                                            }, column.id);
                                         })
                                     }),
                                     /*#__PURE__*/ jsx(TableHeader, {
@@ -34789,7 +35151,10 @@ function _templateObject3() {
 }
 function _templateObject4() {
     var data = _tagged_template_literal$1([
-        "\n  cursor: pointer;\n\n  &.Switch-disabled {\n    cursor: not-allowed;\n  }\n"
+        "\n  cursor: pointer;\n  color: ",
+        ";\n\n  html.dark & {\n    color: ",
+        ";\n  }\n\n  &.Switch-disabled {\n    cursor: not-allowed;\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject4 = function _templateObject() {
         return data;
@@ -34797,10 +35162,10 @@ function _templateObject4() {
     return data;
 }
 var Container = styled.div(_templateObject$1(), spacing(1));
-var ToggleRoot = styled('span')(_templateObject1$1(), neutral500, primary300, primary500, neutral300);
+var ToggleRoot = styled('span')(_templateObject1$1(), neutral500$1, primary300$1, primary500$1, neutral300$1);
 var ToggleInput = styled('input')(_templateObject2$1());
 var ToggleThumb = styled('span')(_templateObject3());
-var StyledLabel = styled(Typography)(_templateObject4());
+var StyledLabel = styled(Typography)(_templateObject4(), neutral900$1, neutral200$1, neutral500$1);
 var Toggle = function(props) {
     var _useSwitch = useSwitch(props), getInputProps = _useSwitch.getInputProps, checked = _useSwitch.checked, disabled = _useSwitch.disabled, focusVisible = _useSwitch.focusVisible;
     var inputProps = props.inputProps, labelProps = props.labelProps, className = props.className, labelText = props.labelText, align = props.align, size = props.size;
@@ -34833,7 +35198,7 @@ var Toggle = function(props) {
             }, labelProps), {
                 style: _object_spread_props$1(_object_spread$1({}, labelProps === null || labelProps === void 0 ? void 0 : labelProps.style), {
                     userSelect: 'none',
-                    color: disabled ? neutral500 : neutral900
+                    color: disabled ? neutral500$1 : undefined
                 }),
                 children: labelText
             }))
@@ -35006,7 +35371,7 @@ function _templateObject2() {
     };
     return data;
 }
-var TooltipWrapper = styled.div(_templateObject(), neutral900, $paragraph300Regular, textPrimaryWhite, function(param) {
+var TooltipWrapper = styled.div(_templateObject(), neutral900$1, $paragraph300Regular, textPrimaryWhite$1, function(param) {
     var hover = param.hover;
     return hover ? 'block' : 'none';
 }, function(param) {
@@ -35071,4 +35436,4 @@ var Tooltip = function(_param) {
     });
 };
 
-export { Add, AlertBar, BaseInput$1 as BaseInput, BaseTextArea, Button, Calendar, CalendarIcon$1 as CalendarIcon, Cancel, Checkbox, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, DEFAULT_SPACING, DatePicker, Delete, DropdownMenu, Edit, Error$1 as Error, FilterForm, FilterList, IconButton, IconWrapper$3 as IconWrapper, Info, Input, InputWrapper$3 as InputWrapper, LoadingWheel, LockClosed, LockOpen, MenuItem, Modal, MoreVertical, MultiInput, MultiSelect, OpenInNew, Pagination, Popper, RadioButton, RadioGroup, Return, Search, SearchBar, SearchIcon, Select, Success, Table, TableContainer, TableWrapper, TextArea, Toggle, Tooltip, Typography, Warning, Wrapper, baseTypography, colors, elevation, loadingWheelStyle, spacing, typography };
+export { Add, AlertBar, BaseInput$1 as BaseInput, BaseTextArea, Button, Calendar, CalendarIcon$1 as CalendarIcon, Cancel, Checkbox, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, DEFAULT_SPACING, DatePicker, Delete, DropdownMenu, Edit, Error$1 as Error, FilterForm, FilterList, IconButton, IconWrapper$3 as IconWrapper, Info, Input, InputWrapper$3 as InputWrapper, LoadingWheel, LockClosed, LockOpen, MenuItem, Modal, MoreVertical, MultiInput, MultiSelect, OpenInNew, Pagination, PauboxUIThemeProvider, Popper, RadioButton, RadioGroup, Return, Search, SearchBar, SearchIcon, Select, Success, Table, TableContainer, TableWrapper, TextArea, Toggle, Tooltip, Typography, Warning, Wrapper, baseTypography, colors, darkColors, elevation, loadingWheelStyle, spacing, typography, useTheme };