@paubox/ui 1.16.0 → 1.17.0

package/index.esm.js

@@ -24058,7 +24058,9 @@ function _templateObject$h() {
         ";\n  border: 1px solid\n    ",
         ";\n  border-radius: 0.5rem;\n  min-height: ",
         ";\n  padding: ",
-        ";\n  transition: all 150ms ease-in-out;\n  cursor: text;\n"
+        ";\n  transition: all 150ms ease-in-out;\n  cursor: text;\n\n  html.dark & {\n    background-color: ",
+        ";\n    border-color: ",
+        ";\n  }\n"
     ]);
     _templateObject$h = function _templateObject() {
         return data;
@@ -24069,7 +24071,9 @@ function _templateObject1$d() {
     var data = _tagged_template_literal$h([
         "\n  flex: 1;\n  min-width: 8rem;\n  border: none;\n  background-color: transparent;\n  color: ",
         ";\n  outline: none;\n  padding: 0;\n\n  &::placeholder {\n    color: ",
-        ";\n  }\n\n  ",
+        ";\n  }\n\n  html.dark & {\n    color: ",
+        ";\n\n    &::placeholder {\n      color: ",
+        ";\n    }\n  }\n\n  ",
         "\n"
     ]);
     _templateObject1$d = function _templateObject() {
@@ -24082,7 +24086,10 @@ function _templateObject2$d() {
         "\n  background-color: ",
         ";\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  white-space: nowrap;\n  ",
         "\n\n  &:focus-visible {\n    outline: 2px solid ",
-        ";\n    outline-offset: 1px;\n  }\n"
+        ";\n    outline-offset: 1px;\n  }\n\n  html.dark & {\n    background-color: ",
+        ";\n    color: ",
+        ";\n\n    &:focus-visible {\n      outline-color: ",
+        ";\n    }\n  }\n"
     ]);
     _templateObject2$d = function _templateObject() {
         return data;
@@ -24092,6 +24099,7 @@ function _templateObject2$d() {
 function _templateObject3$a() {
     var data = _tagged_template_literal$h([
         "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: auto;\n  flex-shrink: 0;\n\n  & svg {\n    font-size: 1rem;\n    color: ",
+        ";\n  }\n\n  html.dark & svg {\n    color: ",
         ";\n  }\n"
     ]);
     _templateObject3$a = function _templateObject() {
@@ -24103,7 +24111,8 @@ function _templateObject4$8() {
     var data = _tagged_template_literal$h([
         "\n  padding: 0.5rem 0.75rem;\n  color: ",
         ";\n  ",
-        "\n"
+        "\n\n  html.dark & {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject4$8 = function _templateObject() {
         return data;
@@ -24131,14 +24140,20 @@ var Wrapper$1 = styled.div(_templateObject$h(), function(param) {
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
+}, function(param) {
+    var disabled = param.disabled;
+    return disabled ? surfaceRaised : surfacePrimary;
+}, function(param) {
+    var isFocused = param.isFocused, error = param.error;
+    return isFocused ? primary500 : error ? danger500 : surfaceRaised;
 });
-var BaseInput$2 = styled.input(_templateObject1$d(), textPrimary$1, neutral500$1, function(param) {
+var BaseInput$2 = styled.input(_templateObject1$d(), textPrimary$1, neutral500$1, textPrimaryWhite, surfaceMuted, function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
-var Chip$2 = styled.button(_templateObject2$d(), neutral100$1, $label200Medium, primary600$1);
-var RightIconWrapper = styled.div(_templateObject3$a(), neutral600$1);
-var EmptyState = styled.div(_templateObject4$8(), neutral500$1, $paragraph200Regular);
+var Chip$2 = styled.button(_templateObject2$d(), neutral100$1, $label200Medium, primary600$1, surfaceRaised, textPrimaryWhite, primary500);
+var RightIconWrapper = styled.div(_templateObject3$a(), neutral600$1, surfaceMuted);
+var EmptyState = styled.div(_templateObject4$8(), neutral500$1, $paragraph200Regular, surfaceMuted);
 var OptionWrapper = styled.div(_templateObject5$3());
 /**
  * AutoComplete: single-line input that filters a closed list of options as

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "type": "module",
   "private": false,
   "publishConfig": {