@paubox/ui 1.12.0 → 1.14.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';
 
@@ -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 = '#1D2433';
+var textSecondary$1 = '#1D2433CC';
+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;
@@ -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: 700;\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",
@@ -22763,7 +23011,7 @@ var DropdownMenu = function(param) {
                 size: size,
                 style: {
                     whiteSpace: 'nowrap',
-                    borderColor: openProp || open ? primary600 : undefined
+                    borderColor: openProp || open ? primary600$1 : undefined
                 },
                 disabled: disabled
             }, buttonProps), {
@@ -22924,7 +23172,7 @@ var SelectContainer = styled.div(_templateObject2$f());
 var MultiInputContainer = styled.div(_templateObject3$c());
 var FilterRow = function(param) {
     var filterKey = param.filterKey, rowIndex = param.rowIndex, values = param.values, errors = param.errors, touched = param.touched, onChange = param.onChange, onRemove = param.onRemove, fieldOptions = param.fieldOptions, operatorOptions = param.operatorOptions, showRemove = param.showRemove;
-    var _touched_filters_filterKey_rowIndex, _touched_filters_filterKey, _touched_filters, _errors_filters_filterKey_rowIndex, _errors_filters_filterKey, _errors_filters, _touched_filters_filterKey_rowIndex1, _touched_filters_filterKey1, _touched_filters1, _errors_filters_filterKey_rowIndex1, _errors_filters_filterKey1, _errors_filters1, _touched_filters_filterKey_rowIndex2, _touched_filters_filterKey2, _touched_filters2, _errors_filters_filterKey_rowIndex2, _errors_filters_filterKey2, _errors_filters2;
+    var _touched_filters_filterKey_rowIndex, _touched_filters_filterKey, _touched_filters, _errors_filters_filterKey_rowIndex, _errors_filters_filterKey, _errors_filters, _touched_filters_filterKey_rowIndex1, _touched_filters_filterKey1, _touched_filters1, _errors_filters_filterKey_rowIndex1, _errors_filters_filterKey1, _errors_filters1, _currentFilter_terms, _touched_filters_filterKey_rowIndex2, _touched_filters_filterKey2, _touched_filters2, _errors_filters_filterKey_rowIndex2, _errors_filters_filterKey2, _errors_filters2;
     var currentFilter = values.filters[Number(filterKey)][Number(rowIndex)];
     var _useState = _sliced_to_array$e(useState(false), 2), isHovered = _useState[0], setIsHovered = _useState[1];
     var currentField = fieldOptions.find(function(field) {
@@ -22950,7 +23198,7 @@ var FilterRow = function(param) {
                                 onChange: function(value) {
                                     return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".field"), value);
                                 },
-                                error: (touched === null || touched === void 0 ? void 0 : (_touched_filters = touched.filters) === null || _touched_filters === void 0 ? void 0 : (_touched_filters_filterKey = _touched_filters[filterKey]) === null || _touched_filters_filterKey === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex = _touched_filters_filterKey[rowIndex]) === null || _touched_filters_filterKey_rowIndex === void 0 ? void 0 : _touched_filters_filterKey_rowIndex.field) && (errors === null || errors === void 0 ? void 0 : (_errors_filters = errors.filters) === null || _errors_filters === void 0 ? void 0 : (_errors_filters_filterKey = _errors_filters[filterKey]) === null || _errors_filters_filterKey === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex = _errors_filters_filterKey[rowIndex]) === null || _errors_filters_filterKey_rowIndex === void 0 ? void 0 : _errors_filters_filterKey_rowIndex.field),
+                                error: !!(touched === null || touched === void 0 ? void 0 : (_touched_filters = touched.filters) === null || _touched_filters === void 0 ? void 0 : (_touched_filters_filterKey = _touched_filters[filterKey]) === null || _touched_filters_filterKey === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex = _touched_filters_filterKey[rowIndex]) === null || _touched_filters_filterKey_rowIndex === void 0 ? void 0 : _touched_filters_filterKey_rowIndex.field) && !!(errors === null || errors === void 0 ? void 0 : (_errors_filters = errors.filters) === null || _errors_filters === void 0 ? void 0 : (_errors_filters_filterKey = _errors_filters[filterKey]) === null || _errors_filters_filterKey === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex = _errors_filters_filterKey[rowIndex]) === null || _errors_filters_filterKey_rowIndex === void 0 ? void 0 : _errors_filters_filterKey_rowIndex.field),
                                 options: fieldOptions,
                                 sz: "lg"
                             }),
@@ -22964,7 +23212,7 @@ var FilterRow = function(param) {
                                 onChange: function(value) {
                                     return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".op"), value);
                                 },
-                                error: (touched === null || touched === void 0 ? void 0 : (_touched_filters1 = touched.filters) === null || _touched_filters1 === void 0 ? void 0 : (_touched_filters_filterKey1 = _touched_filters1[filterKey]) === null || _touched_filters_filterKey1 === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex1 = _touched_filters_filterKey1[rowIndex]) === null || _touched_filters_filterKey_rowIndex1 === void 0 ? void 0 : _touched_filters_filterKey_rowIndex1.op) && (errors === null || errors === void 0 ? void 0 : (_errors_filters1 = errors.filters) === null || _errors_filters1 === void 0 ? void 0 : (_errors_filters_filterKey1 = _errors_filters1[filterKey]) === null || _errors_filters_filterKey1 === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex1 = _errors_filters_filterKey1[rowIndex]) === null || _errors_filters_filterKey_rowIndex1 === void 0 ? void 0 : _errors_filters_filterKey_rowIndex1.op),
+                                error: !!(touched === null || touched === void 0 ? void 0 : (_touched_filters1 = touched.filters) === null || _touched_filters1 === void 0 ? void 0 : (_touched_filters_filterKey1 = _touched_filters1[filterKey]) === null || _touched_filters_filterKey1 === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex1 = _touched_filters_filterKey1[rowIndex]) === null || _touched_filters_filterKey_rowIndex1 === void 0 ? void 0 : _touched_filters_filterKey_rowIndex1.op) && !!(errors === null || errors === void 0 ? void 0 : (_errors_filters1 = errors.filters) === null || _errors_filters1 === void 0 ? void 0 : (_errors_filters_filterKey1 = _errors_filters1[filterKey]) === null || _errors_filters_filterKey1 === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex1 = _errors_filters_filterKey1[rowIndex]) === null || _errors_filters_filterKey_rowIndex1 === void 0 ? void 0 : _errors_filters_filterKey_rowIndex1.op),
                                 options: operatorOptions,
                                 sz: "lg",
                                 setValue: function(value) {
@@ -22976,7 +23224,7 @@ var FilterRow = function(param) {
                     /*#__PURE__*/ jsx(MultiInputContainer, {
                         children: currentFilter.field === 'select' ? /*#__PURE__*/ jsx(Select, {
                             name: "filters.".concat(filterKey, ".").concat(rowIndex, ".terms"),
-                            value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.terms,
+                            value: currentFilter === null || currentFilter === void 0 ? void 0 : (_currentFilter_terms = currentFilter.terms) === null || _currentFilter_terms === void 0 ? void 0 : _currentFilter_terms[0],
                             style: {
                                 width: '100%'
                             },
@@ -22991,7 +23239,7 @@ var FilterRow = function(param) {
                             setValues: function(terms) {
                                 return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".terms"), terms);
                             },
-                            error: (touched === null || touched === void 0 ? void 0 : (_touched_filters2 = touched.filters) === null || _touched_filters2 === void 0 ? void 0 : (_touched_filters_filterKey2 = _touched_filters2[filterKey]) === null || _touched_filters_filterKey2 === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex2 = _touched_filters_filterKey2[rowIndex]) === null || _touched_filters_filterKey_rowIndex2 === void 0 ? void 0 : _touched_filters_filterKey_rowIndex2.terms) && (errors === null || errors === void 0 ? void 0 : (_errors_filters2 = errors.filters) === null || _errors_filters2 === void 0 ? void 0 : (_errors_filters_filterKey2 = _errors_filters2[filterKey]) === null || _errors_filters_filterKey2 === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex2 = _errors_filters_filterKey2[rowIndex]) === null || _errors_filters_filterKey_rowIndex2 === void 0 ? void 0 : _errors_filters_filterKey_rowIndex2.terms),
+                            error: !!(touched === null || touched === void 0 ? void 0 : (_touched_filters2 = touched.filters) === null || _touched_filters2 === void 0 ? void 0 : (_touched_filters_filterKey2 = _touched_filters2[filterKey]) === null || _touched_filters_filterKey2 === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex2 = _touched_filters_filterKey2[rowIndex]) === null || _touched_filters_filterKey_rowIndex2 === void 0 ? void 0 : _touched_filters_filterKey_rowIndex2.terms) && !!(errors === null || errors === void 0 ? void 0 : (_errors_filters2 = errors.filters) === null || _errors_filters2 === void 0 ? void 0 : (_errors_filters_filterKey2 = _errors_filters2[filterKey]) === null || _errors_filters_filterKey2 === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex2 = _errors_filters_filterKey2[rowIndex]) === null || _errors_filters_filterKey_rowIndex2 === void 0 ? void 0 : _errors_filters_filterKey_rowIndex2.terms),
                             sz: "lg"
                         })
                     })
@@ -23184,14 +23432,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) {
@@ -23240,7 +23488,6 @@ var FilterForm = function(param) {
         children: [
             Object.entries(values.filters).map(function(param, index) {
                 var _param = _sliced_to_array$d(param, 2), filterKey = _param[0], filterGroup = _param[1];
-                var _errors_filterKey;
                 return /*#__PURE__*/ jsxs(FilterGroup, {
                     isHovered: isHovered === index,
                     children: [
@@ -23284,7 +23531,7 @@ var FilterForm = function(param) {
                             children: /*#__PURE__*/ jsx(Button, {
                                 type: "button",
                                 color: "secondary",
-                                disabled: errors === null || errors === void 0 ? void 0 : (_errors_filterKey = errors[filterKey]) === null || _errors_filterKey === void 0 ? void 0 : _errors_filterKey.length,
+                                disabled: !!(errors === null || errors === void 0 ? void 0 : errors[filterKey]),
                                 title: "Add filter condition",
                                 size: "large",
                                 style: {
@@ -23301,7 +23548,7 @@ var FilterForm = function(param) {
             }),
             /*#__PURE__*/ jsx(OrButton, {
                 type: "button",
-                disabled: errors === null || errors === void 0 ? void 0 : errors.length,
+                disabled: !!errors,
                 onClick: handleAddFilter,
                 title: "Add filter",
                 children: "Or"
@@ -23311,7 +23558,7 @@ var FilterForm = function(param) {
                     /*#__PURE__*/ jsx(Button, {
                         type: "button",
                         color: "primary",
-                        disabled: errors === null || errors === void 0 ? void 0 : errors.length,
+                        disabled: !!errors,
                         size: "large",
                         style: {
                             width: '100%'
@@ -23535,7 +23782,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;
@@ -23546,7 +23798,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;
@@ -23555,34 +23809,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",
@@ -23602,8 +23862,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, {
@@ -23628,6 +23888,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: ''
+                                }
+                            });
+                        }
+                    }
+                })
             })
         ]
     });
@@ -23801,11 +24078,9 @@ function _templateObject1$c() {
 }
 function _templateObject2$c() {
     var data = _tagged_template_literal$g([
-        "\n  flex: 1;\n  z-index: 2;\n  pointer-events: none;\n  border: none;\n  background-color: transparent;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
-        ";\n  }\n  color: ",
+        "\n  flex: 1;\n  z-index: 2;\n  pointer-events: none;\n  border: none;\n  background-color: transparent;\n\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  &::placeholder {\n    color: ",
-        ";\n    opacity: 0.3;\n  }\n\n  ",
+        ";\n  padding-right: 2rem;\n  outline: none;\n\n  ",
         "\n"
     ]);
     _templateObject2$c = function _templateObject() {
@@ -23875,39 +24150,39 @@ 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(), neutral500, function(param) {
-    var value = param.value;
-    return Array.isArray(value) && value.length > 0 ? textPrimary : neutral500;
+var BaseSelect$1 = styled.select(_templateObject2$c(), function(param) {
+    var hasValue = param.hasValue;
+    return hasValue ? textPrimary$1 : neutral500$1;
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
-}, textPrimaryDisabled, function(param) {
+}, function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
 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';
 });
@@ -23931,8 +24206,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",
@@ -23977,19 +24252,19 @@ var MultiSelect = function(_param) {
                     /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({}, props), {
                         type: type,
                         sz: sz,
-                        value: values,
-                        defaultValue: '',
+                        value: "",
+                        hasValue: values.length > 0,
                         disabled: disabled,
+                        // eslint-disable-next-line @typescript-eslint/no-empty-function
+                        onChange: function() {},
                         children: !values.length ? /*#__PURE__*/ jsx(PlaceholderOption, {
                             value: "",
                             disabled: true,
                             hidden: true,
-                            selected: true,
                             children: "".concat(placeholder || 'Please select...')
                         }) : !chips && /*#__PURE__*/ jsx(SelectedOption, {
                             value: "",
                             hidden: true,
-                            selected: true,
                             children: "".concat(label || 'Selected', " (").concat(values.length, ")")
                         })
                     })),
@@ -24171,7 +24446,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,
@@ -24413,19 +24688,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) {
@@ -24694,14 +24969,18 @@ function _templateObject$d() {
 }
 function _templateObject1$a() {
     var data = _tagged_template_literal$d([
-        "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: ",
+        "\n  display: flex;\n  align-items: center;\n  width: ",
+        ";\n  position: relative;\n  cursor: ",
         ";\n  &:hover {\n    background-color: ",
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
         ";\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;
@@ -24713,7 +24992,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;
@@ -24724,7 +25004,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;
@@ -24735,7 +25016,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;
@@ -24745,42 +25027,54 @@ function _templateObject4$6() {
 // Wrapper for the Input and Icons
 var InputWrapper = styled.div(_templateObject$d());
 var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
+    var fullWidth = param.fullWidth;
+    return fullWidth ? '100%' : 'max-content';
+}, function(param) {
     var disabled = param.disabled;
     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, props = _object_without_properties$c(_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",
         "error",
         "options",
@@ -24794,7 +25088,8 @@ var Select = function(_param) {
         "maxHeight",
         "disabled",
         "addClearOption",
-        "clearOptionLabel"
+        "clearOptionLabel",
+        "fullWidth"
     ]);
     var _options_find;
     var _useState = _sliced_to_array$9(useState(false), 2), open = _useState[0], setOpen = _useState[1];
@@ -24815,6 +25110,7 @@ var Select = function(_param) {
         type: type,
         error: error,
         open: open,
+        fullWidth: fullWidth,
         style: style,
         onClick: function() {
             return !disabled && setOpen(function(prev) {
@@ -24828,7 +25124,7 @@ var Select = function(_param) {
                         type: type,
                         disabled: disabled,
                         sz: sz,
-                        value: value,
+                        value: value !== null && value !== void 0 ? value : '',
                         // eslint-disable-next-line @typescript-eslint/no-empty-function
                         onChange: function() {},
                         error: error,
@@ -24836,11 +25132,9 @@ var Select = function(_param) {
                             value: "",
                             disabled: true,
                             hidden: true,
-                            selected: true,
                             children: placeholder
                         }) : /*#__PURE__*/ jsx(SelectOption, {
                             value: value,
-                            selected: true,
                             hidden: true,
                             children: ((_options_find = options.find(function(option) {
                                 return option.value === value;
@@ -25011,13 +25305,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;
@@ -25161,7 +25455,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;
@@ -25181,8 +25476,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;
@@ -25192,7 +25489,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;
@@ -25202,18 +25501,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",
@@ -25231,10 +25544,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: [
@@ -25245,7 +25558,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: [
@@ -28992,7 +29305,7 @@ var Overlay = styled.div(_templateObject$9());
 var LoadingOverlay = function() {
     return /*#__PURE__*/ jsx(Overlay, {
         children: /*#__PURE__*/ jsx(LoadingWheel, {
-            color: primary500
+            color: primary500$1
         })
     });
 };
@@ -29096,7 +29409,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;
@@ -29132,7 +29446,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));
@@ -29568,7 +29882,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
@@ -29638,7 +29952,7 @@ var RadioGroup = function(param) {
                     label,
                     required && /*#__PURE__*/ jsx("span", {
                         style: {
-                            color: danger600
+                            color: danger600$1
                         },
                         children: "*"
                     }),
@@ -29664,7 +29978,7 @@ var RadioGroup = function(param) {
             }),
             error && /*#__PURE__*/ jsx(Typography, {
                 variant: "paragraph300Regular",
-                color: textDanger,
+                color: textDanger$1,
                 children: error
             })
         ]
@@ -29769,7 +30083,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;
@@ -29797,7 +30113,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) {
@@ -33900,7 +34216,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;
@@ -33946,10 +34265,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;
@@ -33987,10 +34306,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
                                             })
                                         ]
                                     })
@@ -34046,8 +34365,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;
@@ -34056,7 +34375,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;
@@ -34065,7 +34388,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;
@@ -34074,7 +34397,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;
@@ -34083,9 +34406,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;
@@ -34093,83 +34414,95 @@ 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) {
     var table = param.table, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, getRowDisabled = param.getRowDisabled, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
-    return /*#__PURE__*/ jsxs(StyledTableBody, {
-        children: [
-            /*#__PURE__*/ jsx("colgroup", {
-                children: table.getAllColumns().map(function(column) {
-                    return /*#__PURE__*/ jsx("col", {}, column.id);
+    return /*#__PURE__*/ jsx(StyledTableBody, {
+        children: table.getRowModel().rows.map(function(row) {
+            var rowClickEnabled = enableRowSelection || !!onRowClick;
+            var isDisabled = !!(getRowDisabled === null || getRowDisabled === void 0 ? void 0 : getRowDisabled(row.original));
+            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
+                },
+                enableHover: rowClickEnabled,
+                "data-testid": "".concat(testId, "-row-").concat(row.id),
+                children: row.getVisibleCells().map(function(cell) {
+                    var cellValue = cell.getValue();
+                    var columnDef = cell.column.columnDef;
+                    var overflow = columnDef.overflow;
+                    var maxLines = columnDef.maxLines;
+                    var autoWidth = columnDef.autoWidth;
+                    var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
+                    return /*#__PURE__*/ jsx(Td, {
+                        variant: "paragraph200Regular",
+                        as: "td",
+                        title: typeof cellValue === 'string' ? cellValue : undefined,
+                        cellOverflow: overflow,
+                        style: {
+                            width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
+                            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, {
+                            maxLines: maxLines,
+                            children: cellContent
+                        }) : cellContent
+                    }, cell.id);
                 })
-            }),
-            table.getRowModel().rows.map(function(row) {
-                var rowClickEnabled = enableRowSelection || !!onRowClick;
-                var isDisabled = !!(getRowDisabled === null || getRowDisabled === void 0 ? void 0 : getRowDisabled(row.original));
-                return /*#__PURE__*/ jsx(Tr, {
-                    role: rowClickEnabled ? 'button' : undefined,
-                    disabled: isDisabled,
-                    onClick: onRowClick ? function() {
-                        return !isDisabled && onRowClick(row.original);
-                    } : row.getToggleSelectedHandler(),
-                    style: {
-                        cursor: rowClickEnabled ? isDisabled ? 'not-allowed' : 'pointer' : undefined,
-                        background: row.getIsSelected() ? primary100 : undefined
-                    },
-                    enableHover: rowClickEnabled,
-                    "data-testid": "".concat(testId, "-row-").concat(row.id),
-                    children: row.getVisibleCells().map(function(cell) {
-                        var cellValue = cell.getValue();
-                        var columnDef = cell.column.columnDef;
-                        var overflow = columnDef.overflow;
-                        var maxLines = columnDef.maxLines;
-                        var autoWidth = columnDef.autoWidth;
-                        var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
-                        return /*#__PURE__*/ jsx(Td, {
-                            variant: "paragraph200Regular",
-                            as: "td",
-                            title: typeof cellValue === 'string' ? cellValue : undefined,
-                            cellOverflow: overflow,
-                            style: {
-                                width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
-                                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, {
-                                maxLines: maxLines,
-                                children: cellContent
-                            }) : cellContent
-                        }, cell.id);
-                    })
-                }, row.id);
-            })
-        ]
+            }, row.id);
+        })
     });
 };
 
@@ -34347,7 +34680,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;
@@ -34398,7 +34732,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));
@@ -34659,6 +34993,11 @@ var Table = function(param) {
                             }),
                             /*#__PURE__*/ jsxs(TableWrapper, {
                                 children: [
+                                    /*#__PURE__*/ jsx("colgroup", {
+                                        children: table.getAllColumns().map(function(column) {
+                                            return /*#__PURE__*/ jsx("col", {}, column.id);
+                                        })
+                                    }),
                                     /*#__PURE__*/ jsx(TableHeader, {
                                         table: table,
                                         disableControls: disableControls,
@@ -34790,7 +35129,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;
@@ -34798,10 +35140,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;
@@ -34834,7 +35176,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
             }))
@@ -35007,7 +35349,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) {
@@ -35072,4 +35414,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 };