@xqmsg/ui-core 0.28.1 → 0.29.0

package/dist/ui-core.cjs.development.js

@@ -37,11 +37,9 @@ var ActionRow = function ActionRow(_ref) {
   }, primaryText));
 };
 
-/**
- * A functional React component utilized to render the `Button` component
- */
 var Button = function Button(_ref) {
   var onClick = _ref.onClick,
+    children = _ref.children,
     text = _ref.text,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
@@ -65,7 +63,7 @@ var Button = function Button(_ref) {
     rightIcon: rightIcon,
     leftIcon: leftIcon,
     color: color
-  }, text);
+  }, children != null ? children : text);
 };
 
 var _path;
@@ -304,34 +302,40 @@ var green = {
   800: 'hsl(141, 42%, 24%)',
   900: 'hsl(138, 42%, 6%)'
 };
-var label = {
-  primary: {
-    light: '#000000',
-    dark: '#FFFFFF'
-  },
-  secondary: {
-    light: '#3C3C4399'
+// ─── Canonical semantic tokens ────────────────────────────────────────────────
+var text = {
+  primary: '#000000',
+  secondary: '#3C3C4399',
+  tertiary: '#3C3C4366',
+  onAccent: '#FFFFFF',
+  danger: red[500] // form-error text and required indicator
+};
+
+var surface = {
+  canvas: '#FFFFFF' // page / card / table-header background
+};
+
+var action = {
+  solid: '#0082ff',
+  danger: red[600] // danger button fill; also used for focus rings
+};
+
+var status = {
+  success: {
+    fill: '#d8f1b8'
   },
-  tertiary: {
-    light: '',
-    dark: '#EBEBF52E'
+  warning: {
+    fill: '#ffefb4'
   },
-  error: '#FF0000'
+  danger: {
+    fill: '#ffbdb9'
+  }
 };
 var border = {
   focus: '#3A6CD980',
   "default": '#D9D9D9',
-  light: '#99999919A'
-};
-var blur = {
-  quaternary: {
-    light: '',
-    dark: '#2A2A2A73'
-  },
-  tertiary: {
-    light: '',
-    dark: '#111111A6'
-  }
+  /** @deprecated typo was '#99999919A' — kept for compat, use inline '#9999991A' */
+  light: '#9999991A'
 };
 var fill = {
   light: {
@@ -340,11 +344,50 @@ var fill = {
     tertiary: '#7474801F',
     quaternary: '#7474800D'
   },
+  // translucent "dark glass" fills — previously named blur.*
+  dark: {
+    subtle: '#2A2A2A60',
+    strong: '#111111A6' // tertiary button pressed bg
+  },
+
+  // ─── deprecated aliases ───────────────────────────────────────────────────
+  /** @deprecated use colors.action.solid */
+  action: '#0082ff',
+  /** @deprecated use colors.status.success.fill */
   success: '#d8f1b8',
+  /** @deprecated use colors.status.danger.fill */
   error: '#ffbdb9',
-  warning: '#ffefb4',
-  action: '#0082ff'
+  /** @deprecated use colors.status.warning.fill */
+  warning: '#ffefb4'
 };
+// ─── Deprecated compat aliases ────────────────────────────────────────────────
+// Keep old top-level keys so consumer repos don't break on upgrade.
+// Remove these in the next major version.
+/** @deprecated use colors.text.* and colors.surface.canvas */
+var label = {
+  primary: {
+    light: text.primary,
+    dark: text.onAccent
+  },
+  secondary: {
+    light: text.secondary
+  },
+  tertiary: {
+    light: text.tertiary,
+    dark: '#EBEBF52E'
+  },
+  error: text.danger
+};
+/** @deprecated use colors.fill.dark.subtle / colors.fill.dark.strong */
+var blur = {
+  quaternary: {
+    dark: fill.dark.subtle
+  },
+  tertiary: {
+    dark: fill.dark.strong
+  }
+};
+/** @deprecated colors.semantic.* was a parallel action palette — use colors.action / colors.status instead */
 var semantic = {
   action: '#488ef7',
   success: '#5fcf65',
@@ -352,18 +395,28 @@ var semantic = {
   error: '#f96057'
 };
 var colors = {
-  label: label,
-  blur: blur,
+  // canonical
+  text: text,
+  surface: surface,
+  action: action,
+  status: status,
   border: border,
   fill: fill,
+  // deprecated compat
+  label: label,
+  blur: blur,
   semantic: semantic,
+  // misc
   transparent: 'transparent',
   current: 'currentColor',
   black: '#000000',
   white: '#FFFFFF',
+  /** @deprecated */
   lightBlue: '#29abe2',
   coolGray: '#F6F7FB',
+  /** @deprecated */
   darkBlue: '#292f4c',
+  /** @deprecated */
   backdrop: '#fbfcff',
   whiteAlpha: {
     50: 'rgba(255, 255, 255, 0.04)',
@@ -406,6 +459,8 @@ var colors = {
   green: green,
   blue: blue
 };
+/** Canonical alias — prefer this over `colors` for new code */
+var tokens = colors;
 
 /**
  * A functional React component utilized to render the `Icon` for the `Breadcrumbs` component.
@@ -418,17 +473,17 @@ var Icon = function Icon(_ref) {
       case 'active':
         return {
           bg: '#0082FF',
-          color: colors.label.primary.dark
+          color: colors.text.onAccent
         };
       case 'complete':
         return {
           bg: '#7474800D',
-          color: colors.label.primary.light
+          color: colors.text.primary
         };
       case 'inactive':
         return {
           bg: '#7474800D',
-          color: colors.label.primary.light
+          color: colors.text.primary
         };
     }
   }, [status]);
@@ -452,7 +507,7 @@ var Label = function Label(_ref) {
   return /*#__PURE__*/React__default.createElement(react.Box, {
     pl: "8px"
   }, /*#__PURE__*/React__default.createElement(react.Text, {
-    color: colors.label.primary.light,
+    color: colors.text.primary,
     fontSize: "13px"
   }, label));
 };
@@ -528,7 +583,8 @@ var typography = {
     black: 900
   },
   fonts: {
-    base: "proxima-nova, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+    heading: "proxima-nova, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+    body: "proxima-nova, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
     mono: "SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"
   },
   fontSizes: {
@@ -553,18 +609,20 @@ var Card = function Card(_ref) {
     leftIcon = _ref.leftIcon,
     children = _ref.children,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 'auto' : _ref$height;
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '206px' : _ref$width;
   return /*#__PURE__*/React__default.createElement(react.Box, {
     bg: colors.fill.light.quaternary,
     borderRadius: "4px",
     border: ".5px solid " + colors.border["default"],
-    py: "8px",
-    px: "8px",
+    py: 2,
+    px: 2,
     height: height,
     overflowY: "auto",
-    width: "206px",
+    width: width,
     _notLast: {
-      marginBottom: '8px'
+      marginBottom: 2
     }
   }, title && /*#__PURE__*/React__default.createElement(react.Flex, {
     display: "flex",
@@ -574,13 +632,13 @@ var Card = function Card(_ref) {
     _hover: {
       textDecoration: 'none'
     },
-    mb: "8px"
+    mb: 2
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(react.Box, {
-    mr: "4px"
+    mr: 1
   }, leftIcon), /*#__PURE__*/React__default.createElement(react.Text, {
-    color: colors.label.primary.light,
+    color: colors.text.primary,
     fontSize: typography.fontSizes.sm,
     fontWeight: typography.fontWeights.medium
   }, title))), React.Children.map(children, function (child) {
@@ -591,15 +649,15 @@ var Card = function Card(_ref) {
       return /*#__PURE__*/React__default.createElement(react.Text, {
         as: "div",
         _notLast: {
-          marginBottom: '8px'
+          marginBottom: 2
         },
-        color: colors.label.primary.light,
+        color: colors.text.primary,
         fontSize: typography.fontSizes.xs,
         fontWeight: typography.fontWeights.normal
       }, child);
     } else {
       return /*#__PURE__*/React__default.createElement(react.Box, {
-        mt: "8px"
+        mt: 2
       }, child);
     }
   }));
@@ -752,6 +810,33 @@ var SpinnerButton = function SpinnerButton(_ref) {
   }, text);
 };
 
+function _extends$6() {
+  _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$6.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
 /**
  * A functional React component utilized to render the `Form` component, a form wrapper for
  * `react-hook-form`. The `Form` component is provided a `formHandler` and is used to wrap a container
@@ -762,7 +847,7 @@ function Form(_ref) {
     children = _ref.children;
   var form = formHandler.form,
     onSubmit = formHandler.onSubmit;
-  return /*#__PURE__*/React__default.createElement(reactHookForm.FormProvider, Object.assign({}, form), /*#__PURE__*/React__default.createElement("form", {
+  return /*#__PURE__*/React__default.createElement(reactHookForm.FormProvider, _extends$6({}, form), /*#__PURE__*/React__default.createElement("form", {
     onSubmit: onSubmit
   }, children));
 }
@@ -793,33 +878,6 @@ var StackedCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
   }, label));
 });
 
-function _extends$6() {
-  _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$6.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
 var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "variant", "label"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
@@ -837,7 +895,7 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   var isMobile = variant === 'mobile';
   var placeholder = isMobile && label ? label : undefined;
-  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, label, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, label, /*#__PURE__*/React__default.createElement(react.Input, _extends$6({}, props, {
     placeholder: (_props$placeholder = props.placeholder) != null ? _props$placeholder : placeholder,
     type: type,
     isRequired: isRequired,
@@ -891,7 +949,7 @@ var Dropdown = function Dropdown(_ref) {
         px: "8px",
         py: "4px",
         width: "100%",
-        color: colors.label.primary.light,
+        color: colors.text.primary,
         bg: "inherit",
         whiteSpace: "nowrap"
       }, /*#__PURE__*/React__default.createElement(react.Flex, {
@@ -909,7 +967,7 @@ var Dropdown = function Dropdown(_ref) {
         px: "8px",
         py: "4px",
         width: "100%",
-        color: colors.label.primary.light,
+        color: colors.text.primary,
         bg: "inherit",
         whiteSpace: "nowrap"
       }, "No options");
@@ -920,7 +978,7 @@ var Dropdown = function Dropdown(_ref) {
         width: "100%",
         role: "combobox"
       }, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(react.Box, {
-        color: colors.label.secondary.light,
+        color: colors.text.secondary,
         fontSize: "13px",
         width: "100%",
         fontWeight: "bold",
@@ -943,14 +1001,14 @@ var Dropdown = function Dropdown(_ref) {
         px: "8px",
         py: "4px",
         width: "100%",
-        color: optionIndex === idx ? colors.label.primary.dark : colors.label.primary.light,
+        color: optionIndex === idx ? colors.text.onAccent : colors.text.primary,
         _hover: {
-          color: colors.label.primary.dark,
-          bg: colors.fill.action,
+          color: colors.text.onAccent,
+          bg: colors.action.solid,
           borderRadius: '4px',
           width: '100%'
         },
-        bg: optionIndex === idx ? colors.fill.action : 'inherit',
+        bg: optionIndex === idx ? colors.action.solid : 'inherit',
         whiteSpace: "nowrap",
         id: option.value
       }, option.label));
@@ -1194,7 +1252,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   return /*#__PURE__*/React__default.createElement(react.Box, {
     ref: dropdownRef,
     position: "relative"
-  }, /*#__PURE__*/React__default.createElement(react.InputGroup, null, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(react.InputGroup, null, /*#__PURE__*/React__default.createElement(react.Input, _extends$6({
     isRequired: isRequired
   }, props, {
     ref: _ref,
@@ -1236,7 +1294,7 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
   var isMobile = variant === 'mobile';
   if (isMobile) {
-    return /*#__PURE__*/React__default.createElement(react.Flex, null, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
+    return /*#__PURE__*/React__default.createElement(react.Flex, null, /*#__PURE__*/React__default.createElement(react.Textarea, _extends$6({
       ref: _ref
     }, props, {
       variant: variant,
@@ -1244,7 +1302,7 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
       placeholder: label != null ? label : ''
     })));
   }
-  return /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
+  return /*#__PURE__*/React__default.createElement(react.Textarea, _extends$6({
     ref: _ref
   }, props, {
     variant: variant,
@@ -1324,7 +1382,7 @@ var Token = function Token(_ref) {
   }, /*#__PURE__*/React__default.createElement(react.Text, {
     whiteSpace: "nowrap",
     wordBreak: "break-word",
-    color: colors.label.primary.light,
+    color: colors.text.primary,
     fontSize: isMobile ? '17px' : '13px',
     lineHeight: "1.5",
     pr: "2px",
@@ -1369,6 +1427,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   var dropdownMenuRef = React.useRef(null);
   var scrollRef = React.useRef(null);
   var inputRef = React.useRef(null);
+  var searchRef = React.useRef(null);
   var _useState = React.useState(false),
     isInit = _useState[0],
     setIsInit = _useState[1];
@@ -1545,6 +1604,10 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       return element.label.toLowerCase().includes(searchValue.toLowerCase());
     }));
   }, [localOptions, searchValue]);
+  React.useEffect(function () {
+    var _searchRef$current;
+    if (isFocussed) (_searchRef$current = searchRef.current) == null ? void 0 : _searchRef$current.focus();
+  }, [isFocussed]);
   var handleInput = function handleInput(e) {
     var _filteredOptions$;
     var initialOptionIndex = ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
@@ -1607,7 +1670,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       }
     }));
   }) : /*#__PURE__*/React__default.createElement(react.Text, {
-    color: colors.label.secondary.light,
+    color: colors.text.secondary,
     fontSize: "13px"
   }, placeholder)), /*#__PURE__*/React__default.createElement(react.Input, {
     padding: 0,
@@ -1638,7 +1701,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     optionIndex: optionIndex,
     loading: loadingOptions
   }, /*#__PURE__*/React__default.createElement(react.Input, {
-    autoFocus: true,
+    ref: searchRef,
     value: searchValue,
     onChange: handleInput,
     disabled: loadingOptions
@@ -1689,11 +1752,11 @@ var StackedNumberInput = /*#__PURE__*/React__default.forwardRef(function (_ref,
     max: max,
     step: step,
     precision: precision,
-    onChange: function onChange(_, valueAsNumber) {
+    onChange: function onChange(valueAsString, valueAsNumber) {
       return _onChange == null ? void 0 : _onChange({
         target: {
           name: name,
-          value: Number.isNaN(valueAsNumber) ? '' : precision === 0 ? String(Math.round(valueAsNumber)) : String(valueAsNumber)
+          value: Number.isNaN(valueAsNumber) ? '' : precision === 0 ? String(Math.round(valueAsNumber)) : valueAsString
         }
       });
     },
@@ -1983,7 +2046,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       truncateLength: truncatePillLength
     }));
   }) : null, !lastestFormValueToArray.length && !isFocussed ? /*#__PURE__*/React__default.createElement(react.Text, {
-    color: colors.label.secondary.light,
+    color: colors.text.secondary,
     fontSize: isMobile ? '17px' : '13px',
     pointerEvents: "none"
   }, placeholder) : null, !disabled && !scrollMode && /*#__PURE__*/React__default.createElement(react.Flex, {
@@ -1997,7 +2060,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     "float": "right",
     border: "none",
     height: "auto",
-    color: tokenIndex !== null ? 'transparent' : colors.label.primary,
+    color: tokenIndex !== null ? 'transparent' : colors.text.primary,
     _focus: {
       boxShadow: 'none !important'
     },
@@ -2007,6 +2070,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     onFocus: function onFocus() {
       return setIsFocussed(true);
     },
+    onBlur: function onBlur() {
+      setIsFocussed(false);
+      setTokenIndex(null);
+    },
     fontSize: isMobile ? '17px' : '13px',
     lineHeight: 1.5,
     placeholder: isMobile && label && lastestFormValueToArray.length === 0 ? label : '',
@@ -2025,7 +2092,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     "float": "right",
     border: "none",
     height: "auto",
-    color: tokenIndex !== null ? 'transparent' : colors.label.primary,
+    color: tokenIndex !== null ? 'transparent' : colors.text.primary,
     _focus: {
       boxShadow: 'none !important'
     },
@@ -2035,6 +2102,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     onFocus: function onFocus() {
       return setIsFocussed(true);
     },
+    onBlur: function onBlur() {
+      setIsFocussed(false);
+      setTokenIndex(null);
+    },
     placeholder: isMobile && label && lastestFormValueToArray.length === 0 ? label : '',
     variant: variant,
     style: isMobile ? {
@@ -2079,7 +2150,7 @@ var Label$1 = function Label(_ref) {
     ml: "0"
   }, label, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
     ml: 1,
-    color: colors.label.error
+    color: colors.text.danger
   }, "*"), !!tooltipText && /*#__PURE__*/React__default.createElement(react.Popover, {
     trigger: "hover",
     placement: "top"
@@ -2088,7 +2159,7 @@ var Label$1 = function Label(_ref) {
   }, /*#__PURE__*/React__default.createElement(icons.QuestionIcon, {
     boxSize: "13px",
     ml: 1,
-    color: colors.fill.action
+    color: colors.action.solid
   }))), /*#__PURE__*/React__default.createElement(react.PopoverContent, null, /*#__PURE__*/React__default.createElement(react.PopoverArrow, null), /*#__PURE__*/React__default.createElement(react.PopoverBody, null, tooltipText))));
 };
 
@@ -2326,7 +2397,7 @@ function Input(_ref) {
         id: name,
         isInvalid: isInvalid,
         position: "relative",
-        py: !nonLabeledInputs.includes(inputType) && variant !== 'mobile' && label || helperText || isInvalid ? 5 : 0
+        py: !nonLabeledInputs.includes(inputType) && variant !== 'mobile' && label || helperText ? 5 : 0
       }, label && !nonLabeledInputs.includes(inputType) && variant !== 'mobile' && /*#__PURE__*/React__default.createElement(Label$1, {
         tooltipText: tooltipText,
         label: label,
@@ -2448,7 +2519,7 @@ var ChevronDown = function ChevronDown(_ref) {
   return /*#__PURE__*/React__default.createElement(Memo$9, {
     width: boxSize,
     height: boxSize,
-    fill: colors.fill.action
+    fill: colors.action.solid
   });
 };
 
@@ -2979,7 +3050,7 @@ var Settings = function Settings(_ref) {
   return /*#__PURE__*/React__default.createElement(Memo$o, {
     width: boxSize,
     height: boxSize,
-    fill: colors.fill.action
+    fill: colors.action.solid
   });
 };
 
@@ -3317,7 +3388,7 @@ var GearIcon = function GearIcon(_ref) {
   var boxSize = _ref.boxSize,
     color = _ref.color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return /*#__PURE__*/React__default.createElement(react.Box, Object.assign({}, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement(react.Box, _extends$6({}, props), /*#__PURE__*/React__default.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: boxSize != null ? boxSize : 16,
     height: boxSize != null ? boxSize : 17,
@@ -3351,22 +3422,6 @@ function SelectNative(_ref) {
     onChange = _ref.onChange,
     setValue = _ref.setValue,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  // const [selectedOption, setSelectedOption] = useState(
-  //   options ? options[0] ?? '' : ''
-  // );
-  var style = {
-    cursor: 'pointer',
-    color: 'var(--chakra-colors-blue-500)',
-    height: '48px',
-    fontSize: '17px',
-    lineHeight: '20px',
-    fontWeight: 400,
-    padding: '12px 16px 12px 0px',
-    borderRadius: 0,
-    border: '0.5px solid rgba(153, 153, 153, 0.1)',
-    borderLeft: 'none',
-    borderRight: 'none'
-  };
   var handleOnSelectItem = function handleOnSelectItem(e) {
     var selectedValue = e.target.value;
     var selectedOption = options == null ? void 0 : options.find(function (_ref2) {
@@ -3398,14 +3453,13 @@ function SelectNative(_ref) {
         isInvalid: isInvalid,
         position: "relative",
         py: 0
-      }, /*#__PURE__*/React__default.createElement(react.Select, Object.assign({}, props, {
+      }, /*#__PURE__*/React__default.createElement(react.Select, _extends$6({}, props, {
         required: isRequired,
         ref: ref,
         value: value,
         disabled: disabled != null ? disabled : false,
         onChange: handleOnSelectItem,
-        defaultValue: defaultValue,
-        style: style
+        defaultValue: defaultValue
       }), options && options.map(function (i) {
         return /*#__PURE__*/React__default.createElement("option", {
           value: i.value,
@@ -3531,7 +3585,7 @@ var Link = function Link(_ref) {
   }, getIcon, /*#__PURE__*/React__default.createElement(react.Text, {
     variant: "description-large",
     pl: "2px",
-    color: colors.fill.action
+    color: colors.action.solid
   }, text));
 };
 
@@ -3555,7 +3609,7 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
     className: "loading-indicator " + (className != null ? className : '')
   }, /*#__PURE__*/React__default.createElement(react.Spinner, {
     size: size,
-    color: colors.fill.action,
+    color: colors.action.solid,
     flex: "none",
     thickness: thickness,
     speed: speed,
@@ -3594,7 +3648,7 @@ var NavigationMenuHeader = function NavigationMenuHeader(_ref) {
     height: "26px",
     width: "204px",
     fontSize: "12px",
-    color: colors.label.secondary.light
+    color: colors.text.secondary
   }, label);
 };
 
@@ -3626,7 +3680,7 @@ var NavigationMenuItem = function NavigationMenuItem(_ref) {
       isExternal: true
     });
   }
-  return /*#__PURE__*/React__default.createElement(react.Link, Object.assign({}, reactRouterLinkProps, additionalProps, {
+  return /*#__PURE__*/React__default.createElement(react.Link, _extends$6({}, reactRouterLinkProps, additionalProps, {
     onClick: onClick,
     display: "flex",
     alignItems: "center",
@@ -3635,7 +3689,7 @@ var NavigationMenuItem = function NavigationMenuItem(_ref) {
     px: "4px",
     height: "26px",
     width: "204px",
-    color: colors.label.primary,
+    color: colors.text.primary,
     bg: isSelected ? colors.fill.light.quaternary : 'transparent',
     borderRadius: "4px",
     fontSize: "13px",
@@ -3686,7 +3740,7 @@ var NavigationMenu = function NavigationMenu(_ref) {
     }, menuItemGroup.groupHeader && /*#__PURE__*/React__default.createElement(NavigationMenuHeader, {
       label: menuItemGroup.groupHeader
     }), menuItemGroup.groupMenuItems.map(function (item, idx) {
-      return /*#__PURE__*/React__default.createElement(NavigationMenuItem, Object.assign({}, item, {
+      return /*#__PURE__*/React__default.createElement(NavigationMenuItem, _extends$6({}, item, {
         key: idx,
         isSelected: _selectedMenuItem === item.label,
         onClick: function onClick() {
@@ -3694,7 +3748,7 @@ var NavigationMenu = function NavigationMenu(_ref) {
         }
       }));
     }));
-  }), bottomMenuItem && /*#__PURE__*/React__default.createElement(NavigationMenuItem, Object.assign({}, bottomMenuItem, {
+  }), bottomMenuItem && /*#__PURE__*/React__default.createElement(NavigationMenuItem, _extends$6({}, bottomMenuItem, {
     key: bottomMenuItem.label,
     isSelected: true,
     onClick: function onClick() {
@@ -3728,14 +3782,14 @@ var TableLoadingRows = function TableLoadingRows(_ref) {
     borderTopColor: colors.fill.light.quaternary
   }, isLoading ? /*#__PURE__*/React__default.createElement(react.Spinner, {
     size: "lg",
-    color: colors.fill.action
+    color: colors.action.solid
   }) : /*#__PURE__*/React__default.createElement(react.IconButton, {
     "aria-label": "Fetch more rows",
     icon: /*#__PURE__*/React__default.createElement(hi.HiOutlineRefresh, null),
     fontSize: typography.fontSizes['3xl'],
     bg: "transparent",
     shadow: "none",
-    color: colors.fill.action,
+    color: colors.action.solid,
     type: "button",
     variant: "outline",
     onClick: onLoadMore
@@ -3815,7 +3869,7 @@ function SimpleTable(_ref) {
     }
   }, (headers || columnsWidths) && /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, {
     _odd: {
-      bg: colors.label.primary.dark
+      bg: colors.surface.canvas
     }
   }, columnsAsConst.map(function (column, idx) {
     return /*#__PURE__*/React__default.createElement(react.Th, {
@@ -3903,9 +3957,9 @@ var shadows = {
   lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
   xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
   '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-  insetOutline: "inset 0 0 0 2px " + colors.fill.action,
-  outline: "0 0 0 2px " + colors.fill.action,
-  outlineDanger600: "0 0 0 2px " + colors.fill.error,
+  insetOutline: "inset 0 0 0 2px " + colors.action.solid,
+  outline: "0 0 0 2px " + colors.action.solid,
+  outlineDanger600: "0 0 0 2px " + colors.action.danger,
   inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
   none: 'none',
   'dark-lg': 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px'
@@ -3921,28 +3975,28 @@ var baseStyle = {
     width: '100%',
     fontSize: '13px',
     textAlign: 'left',
-    color: colors.label.primary.light,
+    color: colors.text.primary,
     lineHeight: '16px'
   }
 };
 function variantPositive() {
   return {
     container: {
-      bg: colors.fill.success
+      bg: colors.status.success.fill
     }
   };
 }
 function variantWarning() {
   return {
     container: {
-      bg: colors.fill.warning
+      bg: colors.status.warning.fill
     }
   };
 }
 function variantError() {
   return {
     container: {
-      bg: colors.fill.error
+      bg: colors.status.danger.fill
     }
   };
 }
@@ -4024,8 +4078,8 @@ var baseStyle$2 = /*#__PURE__*/system.defineStyle({
   borderRadius: '4px',
   fontSize: '13px',
   fontWeight: 400,
-  bg: colors.fill.action,
-  color: colors.label.primary.dark,
+  bg: colors.action.solid,
+  color: colors.text.onAccent,
   h: '26px',
   border: 'none',
   px: '8px',
@@ -4039,11 +4093,11 @@ var baseStyle$2 = /*#__PURE__*/system.defineStyle({
     pointerEvents: 'none'
   },
   _hover: {
-    bg: colors.fill.action
+    bg: colors.action.solid
   },
   _active: {
-    color: colors.label.primary.dark,
-    bg: colors.fill.action,
+    color: colors.text.onAccent,
+    bg: colors.action.solid,
     bgGradient: colors.fill.light.quaternary
   },
   _focus: {
@@ -4057,66 +4111,66 @@ var variantPrimary = function variantPrimary() {
 var variantSecondary = function variantSecondary() {
   return _extends$6({}, baseStyle$2, {
     color: colors.black,
-    bg: colors.label.primary.dark,
+    bg: colors.surface.canvas,
     _hover: {
-      bg: colors.label.primary.dark
+      bg: colors.surface.canvas
     },
     _active: {
       color: colors.black,
-      bg: colors.label.primary.dark,
+      bg: colors.surface.canvas,
       bgGradient: colors.fill.light.quaternary
     },
     _focus: {
-      bg: colors.label.primary.dark
+      bg: colors.surface.canvas
     }
   });
 };
 var variantTertiary = function variantTertiary() {
   return _extends$6({}, baseStyle$2, {
-    color: colors.label.primary.dark,
-    bg: colors.blur.quaternary.dark,
+    color: colors.text.onAccent,
+    bg: colors.fill.dark.subtle,
     _hover: {
-      bg: colors.blur.quaternary.dark
+      bg: colors.fill.dark.subtle
     },
     _active: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.tertiary.dark
+      color: colors.text.onAccent,
+      bg: colors.fill.dark.strong
     },
     _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.quaternary.dark
+      color: colors.text.onAccent,
+      bg: colors.fill.dark.subtle
     },
     _disabled: {
-      backgroundColor: colors.blur.quaternary.dark,
-      color: colors.blur.tertiary.dark
+      backgroundColor: colors.fill.dark.subtle,
+      color: 'gray.500'
     }
   });
 };
 var variantDanger = function variantDanger() {
   return _extends$6({}, baseStyle$2, {
     fontWeight: '400',
-    color: colors.label.primary.dark,
-    bg: colors.label.error,
+    color: colors.text.onAccent,
+    bg: colors.action.danger,
     _hover: {
-      bg: colors.label.error
+      bg: colors.action.danger
     },
     _active: {
-      color: colors.label.primary.dark,
-      bg: colors.label.error
+      color: colors.text.onAccent,
+      bg: colors.action.danger
     },
     _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.label.error
+      color: colors.text.onAccent,
+      bg: colors.action.danger
     },
     _disabled: {
-      backgroundColor: colors.label.error,
-      color: colors.label.secondary.light
+      backgroundColor: colors.action.danger,
+      color: colors.text.secondary
     }
   });
 };
 var variantPrimaryFlat = function variantPrimaryFlat() {
   return _extends$6({}, baseStyle$2, {
-    bg: colors.fill.action,
+    bg: colors.action.solid,
     bgGradient: null,
     minWidth: '120px',
     padding: '10px 16px',
@@ -4137,61 +4191,61 @@ var variantSecondaryFlat = function variantSecondaryFlat() {
   return _extends$6({}, variantPrimaryFlat(), {
     fontWeight: '400',
     color: colors.black,
-    bg: colors.label.primary.dark,
+    bg: colors.surface.canvas,
     _hover: {
-      bg: colors.label.primary.dark
+      bg: colors.surface.canvas
     },
     _active: {
       color: colors.black,
-      bg: colors.label.primary.dark,
+      bg: colors.surface.canvas,
       bgGradient: colors.fill.light.quaternary
     },
     _focus: {
-      bg: colors.label.primary.dark
+      bg: colors.surface.canvas
     }
   });
 };
 var variantTertiaryFlat = function variantTertiaryFlat() {
   return _extends$6({}, variantPrimaryFlat(), {
     fontWeight: '400',
-    color: colors.label.primary.dark,
-    bg: colors.blur.quaternary.dark,
+    color: colors.text.onAccent,
+    bg: colors.fill.dark.subtle,
     _hover: {
-      bg: colors.blur.quaternary.dark
+      bg: colors.fill.dark.subtle
     },
     _active: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.tertiary.dark
+      color: colors.text.onAccent,
+      bg: colors.fill.dark.strong
     },
     _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.quaternary.dark
+      color: colors.text.onAccent,
+      bg: colors.fill.dark.subtle
     },
     _disabled: {
-      backgroundColor: colors.blur.quaternary.dark,
-      color: colors.blur.tertiary.dark
+      backgroundColor: colors.fill.dark.subtle,
+      color: 'gray.500'
     }
   });
 };
 var variantDangerFlat = function variantDangerFlat() {
   return _extends$6({}, variantPrimaryFlat(), {
     fontWeight: '400',
-    color: colors.label.primary.dark,
-    bg: colors.label.error,
+    color: colors.text.onAccent,
+    bg: colors.action.danger,
     _hover: {
-      bg: colors.label.error
+      bg: colors.action.danger
     },
     _active: {
-      color: colors.label.primary.dark,
-      bg: colors.label.error
+      color: colors.text.onAccent,
+      bg: colors.action.danger
     },
     _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.label.error
+      color: colors.text.onAccent,
+      bg: colors.action.danger
     },
     _disabled: {
-      backgroundColor: colors.label.error,
-      color: colors.label.secondary.light
+      backgroundColor: colors.action.danger,
+      color: colors.text.secondary
     }
   });
 };
@@ -4254,14 +4308,14 @@ var parts$1 = ['requiredIndicator', 'helperText'];
 function baseStyleRequiredIndicator() {
   return {
     ml: 1,
-    color: colors.label.error
+    color: colors.text.danger
   };
 }
 function baseStyleHelperText() {
   return {
     // mt: 1,
     ml: 1,
-    color: colors.label.secondary.light,
+    color: colors.text.secondary,
     fontSize: '11px'
   };
 }
@@ -4279,10 +4333,8 @@ var Form$1 = {
 var parts$2 = ['text', 'icon'];
 function baseStyleText() {
   return {
-    color: colors.label.error,
-    position: 'absolute',
-    bottom: 0,
-    // mt: 1,
+    color: colors.text.danger,
+    mt: 1,
     ml: 1,
     fontSize: '11px'
   };
@@ -4290,7 +4342,7 @@ function baseStyleText() {
 function baseStyleIcon() {
   return {
     ml: 1,
-    color: colors.label.error
+    color: colors.text.danger
   };
 }
 var baseStyle$5 = function baseStyle() {
@@ -4312,7 +4364,7 @@ var baseStyle$6 = {
   display: 'flex',
   ml: 1,
   // mb: 1,
-  color: colors.label.primary.light,
+  color: colors.text.primary,
   opacity: 1
 };
 var FormLabel = {
@@ -4325,7 +4377,7 @@ var baseStyle$7 = {
     fontSize: '13px',
     h: '26px',
     '::placeholder': {
-      color: colors.label.secondary.light
+      color: colors.text.secondary
     },
     py: '5px',
     px: '8px',
@@ -4335,7 +4387,7 @@ var baseStyle$7 = {
       opacity: 1,
       cursor: 'not-allowed',
       bg: colors.fill.light.quaternary,
-      color: colors.label.secondary.light,
+      color: colors.text.secondary,
       border: '1px solid',
       borderColor: '#9999991A'
     },
@@ -4345,7 +4397,7 @@ var baseStyle$7 = {
       borderColor: colors.border.focus
     },
     _placeholder: {
-      color: colors.label.secondary.light
+      color: colors.text.secondary
     }
   }
 };
@@ -4381,7 +4433,7 @@ var Input$1 = {
 };
 
 var baseStyle$8 = {
-  color: colors.fill.action,
+  color: colors.action.solid,
   textDecoration: 'underline',
   transition: 'none',
   _hover: {
@@ -4392,7 +4444,6 @@ function variantSidebar() {
   return {
     display: 'flex',
     alignItems: 'center',
-    // height: '56px',
     pl: 4,
     pr: 4,
     py: 2,
@@ -4418,20 +4469,13 @@ function variantSidebar() {
 // and not only for a child sub route match. I did it as a separate variant instead of a
 // prop to get around React complaining that the dom element was not recognized.
 function variantSidebarExact() {
-  // props: Dict
   var base = variantSidebar();
-  // const { theme } = props;
-  // const primaryColor = getColor(theme, 'primary.500');
   return _extends$6({}, base, {
-    '&.active': {
-      // ...base['&.active'],
-      // boxShadow: `inset 3px 0 0 0 ${primaryColor}`,
-    }
+    '&.active': {}
   });
 }
-function variantSubNavigation(props) {
-  var theme = props.theme;
-  var primaryColor = themeTools.getColor(theme, 'primary.500');
+function variantSubNavigation(_props) {
+  var primaryColor = colors.action.solid;
   return {
     display: 'block',
     pl: 10,
@@ -4515,7 +4559,7 @@ function baseStyleItem(props) {
     transition: 'background 50ms ease-in 0s',
     _hover: {
       color: colors.white,
-      background: colors.fill.action
+      background: colors.action.solid
     },
     _active: {
       bg: themeTools.mode("gray.200", "whiteAlpha.200")(props)
@@ -4553,30 +4597,34 @@ var Menu$1 = {
 
 var parts$5 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
 var baseStyle$a = {
-  width: 'fit-content',
-  height: 'fit-content',
-  background: '#F6F6F6',
-  backdropFilter: 'blur(25px)',
+  overlay: {
+    backdropFilter: 'blur(25px)'
+  },
+  dialog: {
+    width: 'fit-content',
+    height: 'fit-content',
+    background: colors.coolGray
+  },
   header: {
-    pt: '32px',
-    px: '32px',
-    pb: '16px',
+    pt: 8,
+    px: 8,
+    pb: 4,
     fontSize: '18px',
     fontWeight: 600,
     lineHeight: '26px'
   },
   body: {
     pt: 0,
-    pb: '32px',
-    px: '32px',
+    pb: 8,
+    px: 8,
     fontSize: '13px',
     fontWeight: 400,
     lineHeight: '16px',
     whiteSpace: 'pre-line'
   },
   footer: {
-    py: '16px',
-    px: '32px',
+    py: 4,
+    px: 8,
     display: 'flex',
     justifyContent: 'flex-end',
     width: '100%'
@@ -4720,10 +4768,10 @@ var Switch = {
 var parts$8 = ['th', 'td', 'tr', 'body', 'thead'];
 var baseStyle$d = {
   thead: {
-    bg: colors.label.primary.dark
+    bg: colors.surface.canvas
   },
   th: {
-    bg: colors.label.primary.dark,
+    bg: colors.surface.canvas,
     padding: '5px 8px !important',
     fontSize: '13px'
   },
@@ -4804,7 +4852,7 @@ var baseStyle$e = function baseStyle(props) {
 var sizes$1 = {
   sm: {
     tab: {
-      py: '0.25rem',
+      py: 1,
       px: 6,
       fontSize: '0.85rem'
     }
@@ -4812,7 +4860,7 @@ var sizes$1 = {
   md: {
     tab: {
       fontSize: '1rem',
-      py: '0.75rem',
+      py: 3,
       px: 6
     }
   },
@@ -4822,7 +4870,7 @@ var sizes$1 = {
         base: '1rem',
         sm: '1.15rem'
       },
-      py: '0.75rem',
+      py: 3,
       px: 6
     }
   }
@@ -4941,12 +4989,12 @@ var variantSimple = {
     position: 'relative',
     borderColor: 'transparent',
     '&.active': {
-      color: colors.fill.action,
+      color: colors.action.solid,
       bg: 'transparent',
-      borderBottom: "1px solid " + colors.fill.action
+      borderBottom: "1px solid " + colors.action.solid
     },
     _selected: {
-      color: colors.fill.action,
+      color: colors.action.solid,
       bg: 'transparent',
       _after: {
         content: '""',
@@ -5125,9 +5173,6 @@ var styles = {
     },
     '*, *::before, *::after': {
       borderColor: 'gray.200'
-    },
-    '*::placeholder': {
-      color: 'primary'
     }
   }
 };
@@ -5211,7 +5256,7 @@ var ToolbarBreadcrumbItem = function ToolbarBreadcrumbItem(_ref) {
     return pageLabel;
   }, [breakpoint1512, breakpoint400, breakpoint600, breakpoint800, page, pageLabel]);
   return /*#__PURE__*/React__default.createElement(react.Box, {
-    color: page === 'current' ? colors.label.primary.light : colors.label.secondary.light,
+    color: page === 'current' ? colors.text.primary : colors.text.secondary,
     fontSize: "13px",
     letterSpacing: "0.02em",
     onClick: onClick,
@@ -5446,12 +5491,12 @@ var Toast = function Toast(_ref) {
   }, Icon), /*#__PURE__*/React__default.createElement(react.Text, {
     pr: "16px",
     fontSize: "13px",
-    color: colors.label.primary.dark
+    color: colors.text.onAccent
   }, message), onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
     ml: "auto",
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(react.Button, {
-    color: colors.fill.action,
+    color: colors.action.solid,
     style: {
       background: 'transparent',
       border: 'transparent',
@@ -5472,7 +5517,7 @@ var useToast = function useToast() {
     return toast({
       position: props.position,
       render: function render() {
-        return /*#__PURE__*/React__default.createElement(Toast, Object.assign({}, props));
+        return /*#__PURE__*/React__default.createElement(Toast, _extends$6({}, props));
       }
     });
   }, [toast]);
@@ -5562,5 +5607,6 @@ exports.Workspace = Workspace;
 exports.XQThemeProvider = XQThemeProvider;
 exports.colors = colors;
 exports.formatErrorResponse = formatErrorResponse;
+exports.tokens = tokens;
 exports.useToast = useToast;
 //# sourceMappingURL=ui-core.cjs.development.js.map