@khanacademy/wonder-blocks-dropdown 9.1.1 → 9.1.2

package/dist/index.js

@@ -102,11 +102,6 @@ const defaultComboboxLabels = {
   unselected: labels => `${labels} not selected`
 };
 
-const {
-  blue: blue$1,
-  white: white$1,
-  offBlack: offBlack$1
-} = wonderBlocksTokens.color;
 class ActionItem extends React__namespace.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
@@ -127,13 +122,13 @@ class ActionItem extends React__namespace.Component {
       style,
       testId
     } = this.props;
-    const defaultStyle = [styles$c.wrapper, style];
+    const defaultStyle = [styles$b.wrapper, style];
     const labelComponent = typeof label === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       lang: lang,
-      style: styles$c.label
+      style: styles$b.label
     }, label) : (React__namespace.cloneElement(label, _extends__default["default"]({
       lang,
-      style: styles$c.label
+      style: styles$b.label
     }, label.props)));
     return React__namespace.createElement(wonderBlocksCell.CompactCell, {
       disabled: disabled,
@@ -141,7 +136,7 @@ class ActionItem extends React__namespace.Component {
       rootStyle: defaultStyle,
       leftAccessory: leftAccessory,
       rightAccessory: rightAccessory,
-      style: [styles$c.shared, indent && styles$c.indent],
+      style: [styles$b.shared, indent && styles$b.indent],
       role: role,
       testId: testId,
       title: labelComponent,
@@ -158,28 +153,37 @@ ActionItem.defaultProps = {
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
-const styles$c = aphrodite.StyleSheet.create({
+const actionType$1 = wonderBlocksTokens.semanticColor.action.primary.progressive;
+const theme$7 = {
+  actionItem: {
+    color: {
+      hover: {
+        background: actionType$1.hover.background,
+        foreground: actionType$1.hover.foreground
+      },
+      press: {
+        background: actionType$1.press.background,
+        foreground: actionType$1.press.foreground
+      }
+    }
+  }
+};
+const styles$b = aphrodite.StyleSheet.create({
   wrapper: {
     minHeight: DROPDOWN_ITEM_HEIGHT,
     touchAction: "manipulation",
     ":focus": {
       borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
-      outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.color.blue}`,
+      outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
     },
     [":hover[aria-disabled=false]"]: {
-      color: white$1,
-      background: blue$1
-    },
-    ["@media not (hover: hover)"]: {
-      [":hover[aria-disabled=false]"]: {
-        color: white$1,
-        background: offBlack$1
-      }
+      color: theme$7.actionItem.color.hover.foreground,
+      background: theme$7.actionItem.color.hover.background
     },
     [":active[aria-disabled=false]"]: {
-      color: wonderBlocksTokens.color.fadedBlue,
-      background: wonderBlocksTokens.color.activeBlue
+      color: theme$7.actionItem.color.press.foreground,
+      background: theme$7.actionItem.color.press.background
     }
   },
   shared: {
@@ -202,10 +206,10 @@ const Check = function Check(props) {
   return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: checkIcon__default["default"],
     size: "small",
-    style: [styles$b.bounds, !selected && styles$b.hide]
+    style: [styles$a.bounds, !selected && styles$a.hide]
   });
 };
-const styles$b = aphrodite.StyleSheet.create({
+const styles$a = aphrodite.StyleSheet.create({
   bounds: {
     alignSelf: "center",
     height: wonderBlocksTokens.spacing.medium_16,
@@ -217,11 +221,6 @@ const styles$b = aphrodite.StyleSheet.create({
   }
 });
 
-const {
-  offBlack16,
-  offBlack50,
-  offWhite
-} = wonderBlocksTokens.color;
 const Checkbox = function Checkbox(props) {
   const {
     disabled,
@@ -229,7 +228,7 @@ const Checkbox = function Checkbox(props) {
   } = props;
   return React__namespace.createElement(wonderBlocksCore.View, {
     className: "checkbox",
-    style: [styles$a.checkbox, selected && !disabled && styles$a.noBorder, disabled && styles$a.disabledCheckbox]
+    style: [styles$9.checkbox, selected && !disabled && styles$9.noBorder, disabled && styles$9.disabledCheckbox]
   }, selected && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: checkIcon__default["default"],
     size: "small",
@@ -238,26 +237,39 @@ const Checkbox = function Checkbox(props) {
       width: wonderBlocksTokens.spacing.small_12,
       height: wonderBlocksTokens.spacing.small_12,
       margin: wonderBlocksTokens.spacing.xxxxSmall_2
-    }, disabled && selected && styles$a.disabledCheckFormatting]
+    }, disabled && selected && styles$9.disabledCheckFormatting]
   }));
 };
-const styles$a = aphrodite.StyleSheet.create({
+const theme$6 = {
+  checkbox: {
+    color: {
+      default: {
+        border: wonderBlocksTokens.semanticColor.border.strong
+      },
+      disabled: {
+        border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+        background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background
+      }
+    }
+  }
+};
+const styles$9 = aphrodite.StyleSheet.create({
   checkbox: {
     alignSelf: "center",
     minHeight: wonderBlocksTokens.spacing.medium_16,
     minWidth: wonderBlocksTokens.spacing.medium_16,
     height: wonderBlocksTokens.spacing.medium_16,
-    borderRadius: 3,
-    borderWidth: 1,
+    borderRadius: wonderBlocksTokens.border.radius.small_3,
+    borderWidth: wonderBlocksTokens.border.width.hairline,
     borderStyle: "solid",
-    borderColor: offBlack50
+    borderColor: theme$6.checkbox.color.default.border
   },
   noBorder: {
     borderWidth: 0
   },
   disabledCheckbox: {
-    borderColor: offBlack16,
-    backgroundColor: offWhite
+    borderColor: theme$6.checkbox.color.disabled.border,
+    backgroundColor: theme$6.checkbox.color.disabled.background
   },
   disabledCheckFormatting: {
     position: "absolute",
@@ -311,12 +323,12 @@ class OptionItem extends React__namespace.Component {
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$5);
     const CheckComponent = this.getCheckComponent();
-    const defaultStyle = [styles$9.item, style];
+    const defaultStyle = [styles$8.item, style];
     return React__namespace.createElement(wonderBlocksCell.DetailCell, _extends__default["default"]({
       disabled: disabled,
       horizontalRule: horizontalRule,
-      rootStyle: parentComponent === "listbox" ? styles$9.listboxItem : defaultStyle,
-      style: styles$9.itemContainer,
+      rootStyle: parentComponent === "listbox" ? styles$8.listboxItem : defaultStyle,
+      style: styles$8.itemContainer,
       "aria-selected": parentComponent !== "listbox" && selected ? "true" : "false",
       role: parentComponent !== "listbox" ? role : undefined,
       testId: testId,
@@ -338,7 +350,7 @@ class OptionItem extends React__namespace.Component {
         className: "subtitle"
       }, subtitle1) : undefined,
       title: React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles$9.label
+        style: styles$8.label
       }, label),
       subtitle2: subtitle2 ? React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
         className: "subtitle"
@@ -355,18 +367,19 @@ class OptionItem extends React__namespace.Component {
       selected
     } = this.props;
     if (parentComponent === "listbox") {
-      return React__namespace.createElement(StyledLi, {
-        onMouseDown: e => {
-          e.preventDefault();
-        },
-        onClick: this.handleClick,
-        style: [styles$9.reset, styles$9.item, focused && styles$9.itemFocused, disabled && styles$9.itemDisabled],
-        role: role,
-        "aria-selected": selected ? "true" : "false",
-        "aria-disabled": disabled ? "true" : "false",
-        id: this.props.id,
-        tabIndex: -1
-      }, this.renderCell());
+      return (React__namespace.createElement(StyledLi, {
+          onMouseDown: e => {
+            e.preventDefault();
+          },
+          onClick: this.handleClick,
+          style: [styles$8.reset, styles$8.item, focused && styles$8.itemFocused, disabled && styles$8.itemDisabled],
+          role: role,
+          "aria-selected": selected ? "true" : "false",
+          "aria-disabled": disabled ? "true" : "false",
+          id: this.props.id,
+          tabIndex: -1
+        }, this.renderCell())
+      );
     }
     return this.renderCell();
   }
@@ -380,17 +393,64 @@ OptionItem.defaultProps = {
   selected: false
 };
 OptionItem.__IS_OPTION_ITEM__ = true;
-const {
-  blue,
-  white,
-  offBlack
-} = wonderBlocksTokens.color;
 const focusedStyle = {
   borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
-  outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.color.blue}`,
+  outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
   outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
 };
-const styles$9 = aphrodite.StyleSheet.create({
+const actionType = wonderBlocksTokens.semanticColor.action.primary.progressive;
+const theme$5 = {
+  optionItem: {
+    color: {
+      default: {
+        background: wonderBlocksTokens.semanticColor.surface.primary,
+        foreground: wonderBlocksTokens.semanticColor.text.primary
+      },
+      hover: {
+        background: actionType.hover.background,
+        foreground: actionType.hover.foreground
+      },
+      press: {
+        background: actionType.press.background,
+        foreground: actionType.press.foreground
+      },
+      disabled: {
+        background: "transparent",
+        foreground: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
+      }
+    }
+  },
+  checkbox: {
+    color: {
+      hover: {
+        background: wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.background,
+        foreground: wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground
+      },
+      press: {
+        background: wonderBlocksTokens.semanticColor.surface.primary,
+        foreground: wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground
+      },
+      selected: {
+        background: actionType.default.background,
+        foreground: actionType.default.foreground
+      }
+    }
+  },
+  subtitle: {
+    color: {
+      default: {
+        foreground: wonderBlocksTokens.semanticColor.text.secondary
+      },
+      hover: {
+        foreground: wonderBlocksTokens.semanticColor.text.inverse
+      },
+      press: {
+        foreground: wonderBlocksTokens.semanticColor.text.inverse
+      }
+    }
+  }
+};
+const styles$8 = aphrodite.StyleSheet.create({
   reset: {
     margin: 0,
     padding: 0,
@@ -409,69 +469,68 @@ const styles$9 = aphrodite.StyleSheet.create({
     color: "inherit"
   },
   item: {
-    backgroundColor: wonderBlocksTokens.color.white,
+    background: theme$5.optionItem.color.default.background,
+    color: theme$5.optionItem.color.default.foreground,
     minHeight: "unset",
     ":focus": focusedStyle,
     ":focus-visible": {
       overflow: "visible"
     },
     [":hover[aria-disabled=false]"]: {
-      color: white,
-      background: blue
+      color: theme$5.optionItem.color.hover.foreground,
+      background: theme$5.optionItem.color.hover.background
     },
     [":active[aria-selected=false]"]: {},
     [":hover[aria-disabled=true]"]: {
       cursor: "not-allowed"
     },
     [":is([aria-disabled=true])"]: {
-      color: wonderBlocksTokens.color.offBlack32,
+      color: theme$5.optionItem.color.disabled.foreground,
       ":focus-visible": {
         outline: "none"
       }
     },
-    ["@media not (hover: hover)"]: {
-      [":hover[aria-disabled=false]"]: {
-        color: white,
-        background: offBlack
-      }
-    },
     [":active[aria-disabled=false]"]: {
-      color: wonderBlocksTokens.color.fadedBlue,
-      background: wonderBlocksTokens.color.activeBlue
+      color: theme$5.optionItem.color.press.foreground,
+      background: theme$5.optionItem.color.press.background
     },
     [":hover[aria-disabled=false] .checkbox"]: {
-      background: white
+      background: theme$5.checkbox.color.hover.background
+    },
+    [":active[aria-disabled=false] .checkbox"]: {
+      background: theme$5.checkbox.color.press.background
     },
     [":hover[aria-disabled=false] .check"]: {
-      color: blue
+      color: theme$5.checkbox.color.hover.foreground
     },
     [":active[aria-disabled=false] .check"]: {
-      color: wonderBlocksTokens.color.activeBlue
+      color: theme$5.checkbox.color.press.foreground
     },
     [":is([aria-selected=true]) .checkbox"]: {
-      background: blue
+      background: theme$5.checkbox.color.selected.background
     },
     [":is([aria-selected=true]) .check"]: {
-      color: white
+      color: theme$5.checkbox.color.selected.foreground
     },
     [":is([aria-disabled=false]) .subtitle"]: {
-      color: wonderBlocksTokens.color.offBlack64
+      color: theme$5.subtitle.color.default.foreground
     },
     [":hover[aria-disabled=false] .subtitle"]: {
-      color: wonderBlocksTokens.color.offWhite
+      color: theme$5.subtitle.color.hover.foreground
     },
     [":active[aria-disabled=false] .subtitle"]: {
-      color: wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedBlue16, white)
+      color: theme$5.subtitle.color.press.foreground
     }
   },
   itemFocused: focusedStyle,
   itemDisabled: {
-    outlineColor: wonderBlocksTokens.color.offBlack32
+    outlineColor: wonderBlocksTokens.semanticColor.focus.outer
   },
   itemContainer: {
     minHeight: "unset",
-    padding: `${wonderBlocksTokens.spacing.xSmall_8 + wonderBlocksTokens.spacing.xxxxSmall_2}px ${wonderBlocksTokens.spacing.xSmall_8}px`,
-    paddingRight: wonderBlocksTokens.spacing.medium_16,
+    paddingBlock: wonderBlocksTokens.spacing.xSmall_8 + wonderBlocksTokens.spacing.xxxxSmall_2,
+    paddingInlineStart: wonderBlocksTokens.spacing.xSmall_8,
+    paddingInlineEnd: wonderBlocksTokens.spacing.medium_16,
     whiteSpace: "nowrap"
   },
   label: {
@@ -491,16 +550,23 @@ class SeparatorItem extends React__namespace.Component {
   }
   render() {
     return (React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$8.separator, this.props.style],
+        style: [styles$7.separator, this.props.style],
         "aria-hidden": "true"
       })
     );
   }
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const styles$8 = aphrodite.StyleSheet.create({
+const theme$4 = {
+  separator: {
+    color: {
+      border: wonderBlocksTokens.semanticColor.border.primary
+    }
+  }
+};
+const styles$7 = aphrodite.StyleSheet.create({
   separator: {
-    boxShadow: `0 -1px ${wonderBlocksTokens.color.offBlack16}`,
+    borderTop: `1px solid ${theme$4.separator.color.border}`,
     height: 1,
     minHeight: 1,
     marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
@@ -1207,7 +1273,7 @@ class DropdownCore extends React__namespace.Component {
     const numResults = items.length;
     if (numResults === 0) {
       return React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles$7.noResult,
+        style: styles$6.noResult,
         testId: "dropdown-core-no-results"
       }, noResults);
     }
@@ -1282,7 +1348,7 @@ class DropdownCore extends React__namespace.Component {
       onChange: this.handleSearchTextChanged,
       placeholder: labels.filter,
       ref: this.searchFieldRef,
-      style: styles$7.searchInputStyle,
+      style: styles$6.searchInputStyle,
       value: searchText || ""
     });
   }
@@ -1300,12 +1366,12 @@ class DropdownCore extends React__namespace.Component {
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
     return React__namespace.createElement(wonderBlocksCore.View, {
       onMouseUp: this.handleDropdownMouseUp,
-      style: [styles$7.dropdown, isReferenceHidden && styles$7.hidden, dropdownStyle],
+      style: [styles$6.dropdown, isReferenceHidden && styles$6.hidden, dropdownStyle],
       testId: "dropdown-core-container"
     }, isFilterable && this.renderSearchField(), React__namespace.createElement(wonderBlocksCore.View, {
       id: id,
       role: role,
-      style: [styles$7.listboxOrMenu, {
+      style: [styles$6.listboxOrMenu, {
         minWidth: minDropdownWidth
       }],
       "aria-invalid": role === "listbox" ? ariaInvalid : undefined,
@@ -1339,7 +1405,7 @@ class DropdownCore extends React__namespace.Component {
       "aria-live": "polite",
       "aria-atomic": "true",
       "aria-relevant": "additions text",
-      style: styles$7.srOnly,
+      style: styles$6.srOnly,
       "data-testid": "dropdown-live-region"
     }, open && labels.someResults(totalItems));
   }
@@ -1354,7 +1420,7 @@ class DropdownCore extends React__namespace.Component {
     return React__namespace.createElement(wonderBlocksCore.View, {
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
       onKeyUp: !disabled ? this.handleKeyUp : undefined,
-      style: [styles$7.menuWrapper, style],
+      style: [styles$6.menuWrapper, style],
       className: className
     }, this.renderLiveRegion(), opener, open && this.renderDropdown());
   }
@@ -1371,17 +1437,32 @@ DropdownCore.defaultProps = {
   },
   selectionType: "single"
 };
-const styles$7 = aphrodite.StyleSheet.create({
+const theme$3 = {
+  dropdown: {
+    color: {
+      default: {
+        background: wonderBlocksTokens.semanticColor.surface.primary,
+        border: wonderBlocksTokens.semanticColor.border.primary
+      }
+    }
+  },
+  noResults: {
+    color: {
+      foreground: wonderBlocksTokens.semanticColor.text.secondary
+    }
+  }
+};
+const styles$6 = aphrodite.StyleSheet.create({
   menuWrapper: {
     width: "fit-content"
   },
   dropdown: {
-    backgroundColor: wonderBlocksTokens.color.white,
-    borderRadius: 4,
+    backgroundColor: theme$3.dropdown.color.default.background,
+    borderRadius: wonderBlocksTokens.border.radius.medium_4,
     paddingTop: wonderBlocksTokens.spacing.xxxSmall_4,
     paddingBottom: wonderBlocksTokens.spacing.xxxSmall_4,
-    border: `solid 1px ${wonderBlocksTokens.color.offBlack16}`,
-    boxShadow: `0px 8px 8px 0px ${wonderBlocksTokens.fade(wonderBlocksTokens.color.offBlack, 0.1)}`,
+    border: `solid 1px ${theme$3.dropdown.color.default.border}`,
+    boxShadow: `0px 8px 8px 0px ${wonderBlocksTokens.color.offBlack8}`,
     maxHeight: "var(--popper-max-height)"
   },
   listboxOrMenu: {
@@ -1392,7 +1473,7 @@ const styles$7 = aphrodite.StyleSheet.create({
     visibility: "hidden"
   },
   noResult: {
-    color: wonderBlocksTokens.color.offBlack64,
+    color: theme$3.noResults.color.foreground,
     alignSelf: "center",
     marginTop: wonderBlocksTokens.spacing.xxSmall_6
   },
@@ -1431,10 +1512,8 @@ class ActionMenuOpenerCore extends React__namespace.Component {
         "aria-label": ariaLabel
       } = _this$props,
       restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$4);
-    const buttonColor = wonderBlocksTokens.color.blue;
-    const buttonStyles = _generateStyles$1(buttonColor);
     const disabled = disabledProp;
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && pressed && buttonStyles.active];
+    const defaultStyle = [sharedStyles.shared, sharedStyles.default, disabled && sharedStyles.disabled, !disabled && pressed && sharedStyles.press];
     const label = React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
       style: sharedStyles.text
     }, children);
@@ -1448,7 +1527,7 @@ class ActionMenuOpenerCore extends React__namespace.Component {
     }, restProps, {
       "data-testid": testId
     }), React__namespace.createElement(wonderBlocksCore.View, {
-      style: !disabled && (hovered || focused) && buttonStyles.focus
+      style: !disabled && (hovered || focused) && sharedStyles.focus
     }, label), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.xxxSmall_4
     }), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
@@ -1459,6 +1538,22 @@ class ActionMenuOpenerCore extends React__namespace.Component {
     }));
   }
 }
+const theme$2 = {
+  actionMenuOpener: {
+    color: {
+      default: {
+        background: "none",
+        foreground: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground
+      },
+      disabled: {
+        foreground: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
+      },
+      press: {
+        foreground: wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground
+      }
+    }
+  }
+};
 const sharedStyles = aphrodite.StyleSheet.create({
   shared: {
     position: "relative",
@@ -1477,8 +1572,13 @@ const sharedStyles = aphrodite.StyleSheet.create({
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
   },
+  default: {
+    background: theme$2.actionMenuOpener.color.default.background,
+    color: theme$2.actionMenuOpener.color.default.foreground
+  },
   disabled: {
-    cursor: "auto"
+    color: theme$2.actionMenuOpener.color.disabled.foreground,
+    cursor: "not-allowed"
   },
   small: {
     height: wonderBlocksTokens.spacing.xLarge_32
@@ -1494,52 +1594,22 @@ const sharedStyles = aphrodite.StyleSheet.create({
     textOverflow: "ellipsis",
     pointerEvents: "none"
   },
-  hiddenText: {
-    visibility: "hidden"
+  focus: {
+    ":after": {
+      content: "''",
+      position: "absolute",
+      height: 2,
+      left: 0,
+      right: 0,
+      bottom: -1,
+      background: "currentColor",
+      borderRadius: wonderBlocksTokens.border.radius.xSmall_2
+    }
   },
-  spinner: {
-    position: "absolute"
+  press: {
+    color: theme$2.actionMenuOpener.color.press.foreground
   }
 });
-const styles$6 = {};
-const _generateStyles$1 = localColor => {
-  const buttonType = localColor;
-  if (styles$6[buttonType]) {
-    return styles$6[buttonType];
-  }
-  const {
-    offBlack32
-  } = wonderBlocksTokens.color;
-  const activeColor = wonderBlocksTokens.color.activeBlue;
-  let newStyles = {};
-  newStyles = {
-    default: {
-      background: "none",
-      color: localColor
-    },
-    focus: {
-      ":after": {
-        content: "''",
-        position: "absolute",
-        height: 2,
-        left: 0,
-        right: 0,
-        bottom: -1,
-        background: "currentColor",
-        borderRadius: 2
-      }
-    },
-    active: {
-      color: activeColor
-    },
-    disabled: {
-      color: offBlack32,
-      cursor: "default"
-    }
-  };
-  styles$6[buttonType] = aphrodite.StyleSheet.create(newStyles);
-  return styles$6[buttonType];
-};
 
 const _excluded$3 = ["text", "opened"];
 class ActionMenu extends React__namespace.Component {
@@ -1711,7 +1781,7 @@ const styles$5 = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-label", "aria-required", "onBlur", "onOpenChanged"];
+const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-label", "aria-required", "aria-controls", "onBlur", "onOpenChanged"];
 const StyledButton = wonderBlocksCore.addStyle("button");
 class SelectOpener extends React__namespace.Component {
   constructor(props) {
@@ -1756,11 +1826,12 @@ class SelectOpener extends React__namespace.Component {
         testId,
         "aria-label": ariaLabel,
         "aria-required": ariaRequired,
+        "aria-controls": ariaControls,
         onBlur
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
     const stateStyles = _generateStyles(isPlaceholder, error);
-    const iconColor = disabled ? wonderBlocksTokens.semanticColor.action.disabled.default : wonderBlocksTokens.semanticColor.icon.primary;
+    const iconColor = disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.primary;
     const style = [styles$4.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.press];
     return React__namespace.createElement(StyledButton, _extends__default["default"]({}, sharedProps, {
       "aria-disabled": disabled,
@@ -1769,6 +1840,7 @@ class SelectOpener extends React__namespace.Component {
       "aria-label": ariaLabel != null ? ariaLabel : undefined,
       "aria-required": ariaRequired,
       "aria-haspopup": "listbox",
+      "aria-controls": ariaControls,
       "data-testid": testId,
       id: id,
       role: "combobox",
@@ -1839,8 +1911,8 @@ const _generateStyles = (placeholder, error) => {
       foreground: wonderBlocksTokens.semanticColor.text.primary
     },
     disabled: {
-      border: wonderBlocksTokens.semanticColor.border.primary,
-      background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+      border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+      background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
       foreground: wonderBlocksTokens.semanticColor.text.secondary
     },
     error: {
@@ -1850,18 +1922,21 @@ const _generateStyles = (placeholder, error) => {
     }
   };
   const actionType = error ? "destructive" : "progressive";
-  const action = wonderBlocksTokens.semanticColor.action.outlined[actionType];
+  const action = wonderBlocksTokens.semanticColor.action.secondary[actionType];
   const sharedOutlineStyling = {
     outlineOffset: -wonderBlocksTokens.border.width.thin,
     outlineStyle: "solid",
     outlineWidth: wonderBlocksTokens.border.width.thin
   };
-  const focusHoverStyling = _extends__default["default"]({
+  const focusStyling = _extends__default["default"]({}, sharedOutlineStyling, {
+    outlineColor: wonderBlocksTokens.semanticColor.focus.outer
+  });
+  const hoverStyling = _extends__default["default"]({}, sharedOutlineStyling, {
     outlineColor: action.hover.border
-  }, sharedOutlineStyling);
+  });
   const pressStyling = _extends__default["default"]({
     background: action.press.background,
-    color: placeholder ? error ? wonderBlocksTokens.semanticColor.text.secondary : wonderBlocksTokens.semanticColor.action.outlined.progressive.press.foreground : wonderBlocksTokens.semanticColor.text.primary,
+    color: placeholder ? error ? wonderBlocksTokens.semanticColor.text.secondary : wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground : wonderBlocksTokens.semanticColor.text.primary,
     outlineColor: action.press.border
   }, sharedOutlineStyling);
   const currentState = error ? states.error : states.default;
@@ -1871,7 +1946,7 @@ const _generateStyles = (placeholder, error) => {
       borderColor: currentState.border,
       borderWidth: wonderBlocksTokens.border.width.hairline,
       color: placeholder ? wonderBlocksTokens.semanticColor.text.secondary : currentState.foreground,
-      ":hover:not([aria-disabled=true])": focusHoverStyling,
+      ":hover:not([aria-disabled=true])": hoverStyling,
       ["@media not (hover: hover)"]: {
         ":hover:not([aria-disabled=true])": {
           borderColor: currentState.border,
@@ -1880,7 +1955,7 @@ const _generateStyles = (placeholder, error) => {
           paddingRight: wonderBlocksTokens.spacing.small_12
         }
       },
-      ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+      ":focus-visible:not([aria-disabled=true])": focusStyling,
       ":active:not([aria-disabled=true])": pressStyling
     },
     disabled: {
@@ -1889,7 +1964,7 @@ const _generateStyles = (placeholder, error) => {
       color: states.disabled.foreground,
       cursor: "not-allowed",
       ":focus-visible": _extends__default["default"]({
-        outlineColor: wonderBlocksTokens.semanticColor.action.disabled.default
+        outlineColor: wonderBlocksTokens.semanticColor.focus.outer
       }, sharedOutlineStyling)
     },
     press: pressStyling
@@ -2808,7 +2883,7 @@ const styles$2 = aphrodite.StyleSheet.create({
     paddingInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4
   },
   pillFocused: {
-    outline: `1px solid ${wonderBlocksTokens.color.blue}`
+    outline: `1px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
   }
 });
 
@@ -2893,12 +2968,21 @@ function Listbox(props) {
     "aria-multiselectable": selectionType === "multiple"
   }, children);
 }
+const theme$1 = {
+  listbox: {
+    color: {
+      disabled: {
+        foreground: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
+      }
+    }
+  }
+};
 const styles$1 = aphrodite.StyleSheet.create({
   listbox: {
     outline: "none"
   },
   disabled: {
-    color: wonderBlocksTokens.color.offBlack64
+    color: theme$1.listbox.color.disabled.foreground
   }
 });
 
@@ -3066,7 +3150,7 @@ function Combobox({
     const startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
       size: "small"
     }, startIcon.props, {
-      color: disabled ? wonderBlocksTokens.color.offBlack32 : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : wonderBlocksTokens.semanticColor.icon.primary
+      color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : wonderBlocksTokens.semanticColor.icon.primary
     }));
     return React__namespace.createElement(wonderBlocksCore.View, {
       style: styles.iconWrapper
@@ -3175,6 +3259,38 @@ function Combobox({
     }, renderList));
   }));
 }
+const theme = {
+  combobox: {
+    color: {
+      default: {
+        border: wonderBlocksTokens.semanticColor.border.strong,
+        background: wonderBlocksTokens.semanticColor.surface.primary
+      },
+      focus: {
+        border: wonderBlocksTokens.semanticColor.focus.outer,
+        background: wonderBlocksTokens.semanticColor.surface.primary
+      },
+      disabled: {
+        border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+        background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
+        foreground: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
+      },
+      error: {
+        border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+        background: wonderBlocksTokens.semanticColor.status.critical.background,
+        foreground: wonderBlocksTokens.semanticColor.text.primary
+      }
+    }
+  },
+  listbox: {
+    color: {
+      default: {
+        background: wonderBlocksTokens.semanticColor.surface.primary,
+        border: wonderBlocksTokens.semanticColor.border.primary
+      }
+    }
+  }
+};
 const styles = aphrodite.StyleSheet.create({
   wrapper: {
     flexDirection: "row",
@@ -3182,24 +3298,24 @@ const styles = aphrodite.StyleSheet.create({
     width: "100%",
     maxWidth: "100%",
     flexWrap: "wrap",
-    background: wonderBlocksTokens.color.white,
+    background: theme.combobox.color.default.background,
     borderRadius: wonderBlocksTokens.border.radius.medium_4,
-    border: `solid 1px ${wonderBlocksTokens.color.offBlack50}`,
+    border: `solid 1px ${theme.combobox.color.default.border}`,
     paddingInline: wonderBlocksTokens.spacing.xSmall_8
   },
   focused: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.blue}`
+    background: theme.combobox.color.focus.background,
+    border: `1px solid ${theme.combobox.color.focus.border}`
   },
   disabled: {
-    background: wonderBlocksTokens.color.offWhite,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack64
+    background: theme.combobox.color.disabled.background,
+    border: `1px solid ${theme.combobox.color.disabled.border}`,
+    color: theme.combobox.color.disabled.foreground
   },
   error: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.red}`,
-    color: wonderBlocksTokens.color.offBlack
+    background: theme.combobox.color.error.background,
+    border: `1px solid ${theme.combobox.color.error.border}`,
+    color: theme.combobox.color.error.foreground
   },
   combobox: {
     appearance: "none",
@@ -3217,9 +3333,9 @@ const styles = aphrodite.StyleSheet.create({
     }
   },
   listbox: {
-    backgroundColor: wonderBlocksTokens.color.white,
+    backgroundColor: theme.listbox.color.default.background,
     borderRadius: wonderBlocksTokens.border.radius.medium_4,
-    border: `solid 1px ${wonderBlocksTokens.color.offBlack16}`,
+    border: `solid ${wonderBlocksTokens.border.width.hairline}px ${theme.listbox.color.default.border}`,
     boxShadow: `0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,
     maxHeight: "var(--popper-max-height)",
     overflowY: "auto"