@khanacademy/wonder-blocks-dropdown 7.0.5 → 8.0.0

package/dist/index.js

@@ -6,7 +6,7 @@ var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var aphrodite = require('aphrodite');
 var wonderBlocksCell = require('@khanacademy/wonder-blocks-cell');
-var tokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
@@ -50,7 +50,6 @@ function _interopNamespace(e) {
 
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
 var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
@@ -69,8 +68,8 @@ const keys = {
   down: "ArrowDown"
 };
 const selectDropdownStyle = {
-  marginTop: tokens.spacing.xSmall_8,
-  marginBottom: tokens.spacing.xSmall_8
+  marginTop: wonderBlocksTokens.spacing.xSmall_8,
+  marginBottom: wonderBlocksTokens.spacing.xSmall_8
 };
 const filterableDropdownStyle = {
   minHeight: 100
@@ -114,7 +113,7 @@ const {
   blue: blue$1,
   white: white$1,
   offBlack: offBlack$1
-} = tokens.color;
+} = wonderBlocksTokens.color;
 class ActionItem extends React__namespace.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
@@ -171,9 +170,9 @@ const styles$c = aphrodite.StyleSheet.create({
     minHeight: DROPDOWN_ITEM_HEIGHT,
     touchAction: "manipulation",
     ":focus": {
-      borderRadius: tokens.spacing.xxxSmall_4,
-      outline: `${tokens.spacing.xxxxSmall_2}px solid ${tokens.color.blue}`,
-      outlineOffset: -tokens.spacing.xxxxSmall_2
+      borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+      outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
     },
     [":hover[aria-disabled=false]"]: {
       color: white$1,
@@ -186,8 +185,8 @@ const styles$c = aphrodite.StyleSheet.create({
       }
     },
     [":active[aria-disabled=false]"]: {
-      color: tokens.color.fadedBlue,
-      background: tokens.color.activeBlue
+      color: wonderBlocksTokens.color.fadedBlue,
+      background: wonderBlocksTokens.color.activeBlue
     }
   },
   shared: {
@@ -199,7 +198,7 @@ const styles$c = aphrodite.StyleSheet.create({
     userSelect: "none"
   },
   indent: {
-    paddingLeft: tokens.spacing.medium_16 * 2
+    paddingLeft: wonderBlocksTokens.spacing.medium_16 * 2
   }
 });
 
@@ -216,9 +215,9 @@ const Check = function Check(props) {
 const styles$b = aphrodite.StyleSheet.create({
   bounds: {
     alignSelf: "center",
-    height: tokens.spacing.medium_16,
-    minHeight: tokens.spacing.medium_16,
-    minWidth: tokens.spacing.medium_16
+    height: wonderBlocksTokens.spacing.medium_16,
+    minHeight: wonderBlocksTokens.spacing.medium_16,
+    minWidth: wonderBlocksTokens.spacing.medium_16
   },
   hide: {
     visibility: "hidden"
@@ -229,7 +228,7 @@ const {
   offBlack16,
   offBlack50,
   offWhite
-} = tokens.color;
+} = wonderBlocksTokens.color;
 const Checkbox = function Checkbox(props) {
   const {
     disabled,
@@ -243,18 +242,18 @@ const Checkbox = function Checkbox(props) {
     size: "small",
     className: "check",
     style: [{
-      width: tokens.spacing.small_12,
-      height: tokens.spacing.small_12,
-      margin: tokens.spacing.xxxxSmall_2
+      width: wonderBlocksTokens.spacing.small_12,
+      height: wonderBlocksTokens.spacing.small_12,
+      margin: wonderBlocksTokens.spacing.xxxxSmall_2
     }, disabled && selected && styles$a.disabledCheckFormatting]
   }));
 };
 const styles$a = aphrodite.StyleSheet.create({
   checkbox: {
     alignSelf: "center",
-    minHeight: tokens.spacing.medium_16,
-    minWidth: tokens.spacing.medium_16,
-    height: tokens.spacing.medium_16,
+    minHeight: wonderBlocksTokens.spacing.medium_16,
+    minWidth: wonderBlocksTokens.spacing.medium_16,
+    height: wonderBlocksTokens.spacing.medium_16,
     borderRadius: 3,
     borderWidth: 1,
     borderStyle: "solid",
@@ -336,7 +335,7 @@ class OptionItem extends React__namespace.Component {
         disabled: disabled,
         selected: selected
       }), React__namespace.createElement(wonderBlocksLayout.Strut, {
-        size: tokens.spacing.xSmall_8
+        size: wonderBlocksTokens.spacing.xSmall_8
       }), leftAccessory) : React__namespace.createElement(CheckComponent, {
         disabled: disabled,
         selected: selected
@@ -392,11 +391,11 @@ const {
   blue,
   white,
   offBlack
-} = tokens.color;
+} = wonderBlocksTokens.color;
 const focusedStyle = {
-  borderRadius: tokens.spacing.xxxSmall_4,
-  outline: `${tokens.spacing.xxxxSmall_2}px solid ${tokens.color.blue}`,
-  outlineOffset: -tokens.spacing.xxxxSmall_2
+  borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+  outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.color.blue}`,
+  outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
 };
 const styles$9 = aphrodite.StyleSheet.create({
   reset: {
@@ -417,7 +416,7 @@ const styles$9 = aphrodite.StyleSheet.create({
     color: "inherit"
   },
   item: {
-    backgroundColor: tokens.color.white,
+    backgroundColor: wonderBlocksTokens.color.white,
     minHeight: "unset",
     ":focus": focusedStyle,
     ":focus-visible": {
@@ -432,7 +431,7 @@ const styles$9 = aphrodite.StyleSheet.create({
       cursor: "not-allowed"
     },
     [":is([aria-disabled=true])"]: {
-      color: tokens.color.offBlack32,
+      color: wonderBlocksTokens.color.offBlack32,
       ":focus-visible": {
         outline: "none"
       }
@@ -444,8 +443,8 @@ const styles$9 = aphrodite.StyleSheet.create({
       }
     },
     [":active[aria-disabled=false]"]: {
-      color: tokens.color.fadedBlue,
-      background: tokens.color.activeBlue
+      color: wonderBlocksTokens.color.fadedBlue,
+      background: wonderBlocksTokens.color.activeBlue
     },
     [":hover[aria-disabled=false] .checkbox"]: {
       background: white
@@ -454,7 +453,7 @@ const styles$9 = aphrodite.StyleSheet.create({
       color: blue
     },
     [":active[aria-disabled=false] .check"]: {
-      color: tokens.color.activeBlue
+      color: wonderBlocksTokens.color.activeBlue
     },
     [":is([aria-selected=true]) .checkbox"]: {
       background: blue
@@ -463,23 +462,23 @@ const styles$9 = aphrodite.StyleSheet.create({
       color: white
     },
     [":is([aria-disabled=false]) .subtitle"]: {
-      color: tokens.color.offBlack64
+      color: wonderBlocksTokens.color.offBlack64
     },
     [":hover[aria-disabled=false] .subtitle"]: {
-      color: tokens.color.offWhite
+      color: wonderBlocksTokens.color.offWhite
     },
     [":active[aria-disabled=false] .subtitle"]: {
-      color: tokens.mix(tokens.color.fadedBlue16, white)
+      color: wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedBlue16, white)
     }
   },
   itemFocused: focusedStyle,
   itemDisabled: {
-    outlineColor: tokens.color.offBlack32
+    outlineColor: wonderBlocksTokens.color.offBlack32
   },
   itemContainer: {
     minHeight: "unset",
-    padding: `${tokens.spacing.xSmall_8 + tokens.spacing.xxxxSmall_2}px ${tokens.spacing.xSmall_8}px`,
-    paddingRight: tokens.spacing.medium_16,
+    padding: `${wonderBlocksTokens.spacing.xSmall_8 + wonderBlocksTokens.spacing.xxxxSmall_2}px ${wonderBlocksTokens.spacing.xSmall_8}px`,
+    paddingRight: wonderBlocksTokens.spacing.medium_16,
     whiteSpace: "nowrap"
   },
   label: {
@@ -507,11 +506,11 @@ class SeparatorItem extends React__namespace.Component {
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
 const styles$8 = aphrodite.StyleSheet.create({
   separator: {
-    boxShadow: `0 -1px ${tokens.color.offBlack16}`,
+    boxShadow: `0 -1px ${wonderBlocksTokens.color.offBlack16}`,
     height: 1,
     minHeight: 1,
-    marginTop: tokens.spacing.xxxSmall_4,
-    marginBottom: tokens.spacing.xxxSmall_4
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
+    marginBottom: wonderBlocksTokens.spacing.xxxSmall_4
   }
 });
 
@@ -1294,7 +1293,6 @@ class DropdownCore extends React__namespace.Component {
       "aria-required": ariaRequired,
       dropdownStyle,
       isFilterable,
-      light,
       openerElement,
       role,
       id
@@ -1303,7 +1301,7 @@ 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, light && styles$7.light, isReferenceHidden && styles$7.hidden, dropdownStyle],
+      style: [styles$7.dropdown, isReferenceHidden && styles$7.hidden, dropdownStyle],
       testId: "dropdown-core-container"
     }, isFilterable && this.renderSearchField(), React__namespace.createElement(wonderBlocksCore.View, {
       id: id,
@@ -1372,7 +1370,6 @@ DropdownCore.defaultProps = {
     noResults: defaultLabels.noResults,
     someResults: defaultLabels.someSelected
   },
-  light: false,
   selectionType: "single"
 };
 const styles$7 = aphrodite.StyleSheet.create({
@@ -1380,17 +1377,14 @@ const styles$7 = aphrodite.StyleSheet.create({
     width: "fit-content"
   },
   dropdown: {
-    backgroundColor: tokens.color.white,
+    backgroundColor: wonderBlocksTokens.color.white,
     borderRadius: 4,
-    paddingTop: tokens.spacing.xxxSmall_4,
-    paddingBottom: tokens.spacing.xxxSmall_4,
-    border: `solid 1px ${tokens.color.offBlack16}`,
-    boxShadow: `0px 8px 8px 0px ${tokens.fade(tokens.color.offBlack, 0.1)}`,
+    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)}`,
     maxHeight: "var(--popper-max-height)"
   },
-  light: {
-    border: "none"
-  },
   listboxOrMenu: {
     overflowY: "auto"
   },
@@ -1399,13 +1393,13 @@ const styles$7 = aphrodite.StyleSheet.create({
     visibility: "hidden"
   },
   noResult: {
-    color: tokens.color.offBlack64,
+    color: wonderBlocksTokens.color.offBlack64,
     alignSelf: "center",
-    marginTop: tokens.spacing.xxSmall_6
+    marginTop: wonderBlocksTokens.spacing.xxSmall_6
   },
   searchInputStyle: {
-    margin: tokens.spacing.xSmall_8,
-    marginTop: tokens.spacing.xxxSmall_4,
+    margin: wonderBlocksTokens.spacing.xSmall_8,
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
     minHeight: "auto",
     position: "sticky"
   },
@@ -1438,7 +1432,7 @@ class ActionMenuOpenerCore extends React__namespace.Component {
         "aria-label": ariaLabel
       } = _this$props,
       restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$4);
-    const buttonColor = tokens.color.blue;
+    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];
@@ -1457,7 +1451,7 @@ class ActionMenuOpenerCore extends React__namespace.Component {
     }), React__namespace.createElement(wonderBlocksCore.View, {
       style: !disabled && (hovered || focused) && buttonStyles.focus
     }, label), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: tokens.spacing.xxxSmall_4
+      size: wonderBlocksTokens.spacing.xxxSmall_4
     }), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
       size: "small",
       color: "currentColor",
@@ -1474,7 +1468,7 @@ const sharedStyles = aphrodite.StyleSheet.create({
     justifyContent: "center",
     height: DROPDOWN_ITEM_HEIGHT,
     border: "none",
-    borderRadius: tokens.spacing.xxxSmall_4,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
     cursor: "pointer",
     outline: "none",
     textDecoration: "none",
@@ -1488,7 +1482,7 @@ const sharedStyles = aphrodite.StyleSheet.create({
     cursor: "auto"
   },
   small: {
-    height: tokens.spacing.xLarge_32
+    height: wonderBlocksTokens.spacing.xLarge_32
   },
   text: {
     textAlign: "left",
@@ -1516,8 +1510,8 @@ const _generateStyles$1 = localColor => {
   }
   const {
     offBlack32
-  } = tokens.color;
-  const activeColor = tokens.color.activeBlue;
+  } = wonderBlocksTokens.color;
+  const activeColor = wonderBlocksTokens.color.activeBlue;
   let newStyles = {};
   newStyles = {
     default: {
@@ -1717,7 +1711,7 @@ const styles$5 = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "light", "open", "testId", "aria-required", "onBlur", "onOpenChanged"];
+const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-required", "onBlur", "onOpenChanged"];
 const StyledButton = wonderBlocksCore.addStyle("button");
 class SelectOpener extends React__namespace.Component {
   constructor(props) {
@@ -1758,16 +1752,15 @@ class SelectOpener extends React__namespace.Component {
         error,
         id,
         isPlaceholder,
-        light,
         open,
         testId,
         "aria-required": ariaRequired,
         onBlur
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
-    const stateStyles = _generateStyles(light, isPlaceholder, error);
-    const iconColor = light ? disabled || error ? "currentColor" : tokens__namespace.color.white : disabled ? tokens__namespace.color.offBlack32 : tokens__namespace.color.offBlack64;
-    const style = [styles$4.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.pressed];
+    const stateStyles = _generateStyles(isPlaceholder, error);
+    const iconColor = disabled ? wonderBlocksTokens.semanticColor.action.disabled.default : 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,
       "aria-expanded": open ? "true" : "false",
@@ -1796,7 +1789,6 @@ class SelectOpener extends React__namespace.Component {
 SelectOpener.defaultProps = {
   disabled: false,
   error: false,
-  light: false,
   isPlaceholder: false
 };
 const styles$4 = aphrodite.StyleSheet.create({
@@ -1805,12 +1797,12 @@ const styles$4 = aphrodite.StyleSheet.create({
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
-    color: tokens__namespace.color.offBlack,
+    color: wonderBlocksTokens.semanticColor.text.primary,
     height: DROPDOWN_ITEM_HEIGHT,
-    paddingLeft: tokens__namespace.spacing.medium_16,
-    paddingRight: tokens__namespace.spacing.small_12,
+    paddingLeft: wonderBlocksTokens.spacing.medium_16,
+    paddingRight: wonderBlocksTokens.spacing.small_12,
     borderWidth: 0,
-    borderRadius: tokens__namespace.border.radius.medium_4,
+    borderRadius: wonderBlocksTokens.border.radius.medium_4,
     borderStyle: "solid",
     outline: "none",
     textDecoration: "none",
@@ -1819,7 +1811,7 @@ const styles$4 = aphrodite.StyleSheet.create({
     touchAction: "manipulation"
   },
   text: {
-    marginRight: tokens__namespace.spacing.xSmall_8,
+    marginRight: wonderBlocksTokens.spacing.xSmall_8,
     whiteSpace: "nowrap",
     userSelect: "none",
     overflow: "hidden",
@@ -1829,103 +1821,74 @@ const styles$4 = aphrodite.StyleSheet.create({
     minWidth: 16
   }
 });
-const adjustedPaddingLeft = tokens__namespace.spacing.medium_16 - 1;
-const adjustedPaddingRight = tokens__namespace.spacing.small_12 - 1;
 const stateStyles = {};
-const _generateStyles = (light, placeholder, error) => {
-  const styleKey = `${light}-${placeholder}-${error}`;
+const _generateStyles = (placeholder, error) => {
+  const styleKey = `${placeholder}-${error}`;
   if (stateStyles[styleKey]) {
     return stateStyles[styleKey];
   }
-  let newStyles = {};
-  if (light) {
-    const focusHoverStyling = {
-      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white,
-      borderWidth: tokens__namespace.spacing.xxxxSmall_2,
-      paddingLeft: adjustedPaddingLeft,
-      paddingRight: adjustedPaddingRight
-    };
-    const activePressedStyling = {
-      paddingLeft: adjustedPaddingLeft,
-      paddingRight: adjustedPaddingRight,
-      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.fadedBlue,
-      borderWidth: tokens__namespace.border.width.thin,
-      color: error ? tokens__namespace.color.offBlack64 : placeholder ? tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue) : tokens__namespace.color.fadedBlue,
-      backgroundColor: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.activeBlue
-    };
-    newStyles = {
-      default: {
-        background: error ? tokens__namespace.color.fadedRed8 : "transparent",
-        color: error ? tokens__namespace.color.offBlack64 : placeholder ? tokens__namespace.color.white50 : tokens__namespace.color.white,
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white50,
-        borderWidth: tokens__namespace.border.width.hairline,
-        ":hover:not([aria-disabled=true])": focusHoverStyling,
-        ["@media not (hover: hover)"]: {
-          ":hover:not([aria-disabled=true])": {
-            borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white50,
-            borderWidth: tokens__namespace.border.width.hairline,
-            paddingLeft: tokens__namespace.spacing.medium_16,
-            paddingRight: tokens__namespace.spacing.small_12
-          }
-        },
-        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
-        ":active:not([aria-disabled=true])": activePressedStyling
-      },
-      disabled: {
-        background: "transparent",
-        borderColor: tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue),
-        color: tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue),
-        cursor: "not-allowed",
-        ":focus-visible": {
-          boxShadow: `0 0 0 1px ${tokens__namespace.color.offBlack32}, 0 0 0 3px ${tokens__namespace.color.fadedBlue}`
-        }
-      },
-      pressed: activePressedStyling
-    };
-  } else {
-    const focusHoverStyling = {
-      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.blue,
-      borderWidth: tokens__namespace.border.width.thin,
-      paddingLeft: adjustedPaddingLeft,
-      paddingRight: adjustedPaddingRight
-    };
-    const activePressedStyling = {
-      background: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.fadedBlue,
-      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.activeBlue,
-      borderWidth: tokens__namespace.border.width.thin,
-      paddingLeft: adjustedPaddingLeft,
-      paddingRight: adjustedPaddingRight
-    };
-    newStyles = {
-      default: {
-        background: error ? tokens__namespace.color.fadedRed8 : tokens__namespace.color.white,
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack50,
-        borderWidth: tokens__namespace.border.width.hairline,
-        color: placeholder ? tokens__namespace.color.offBlack64 : tokens__namespace.color.offBlack,
-        ":hover:not([aria-disabled=true])": focusHoverStyling,
-        ["@media not (hover: hover)"]: {
-          ":hover:not([aria-disabled=true])": {
-            borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack50,
-            borderWidth: tokens__namespace.border.width.hairline,
-            paddingLeft: tokens__namespace.spacing.medium_16,
-            paddingRight: tokens__namespace.spacing.small_12
-          }
-        },
-        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
-        ":active:not([aria-disabled=true])": activePressedStyling
-      },
-      disabled: {
-        background: tokens__namespace.color.offWhite,
-        borderColor: tokens__namespace.color.offBlack16,
-        color: tokens__namespace.color.offBlack64,
-        cursor: "not-allowed",
-        ":focus-visible": {
-          boxShadow: `0 0 0 1px ${tokens__namespace.color.white}, 0 0 0 3px ${tokens__namespace.color.offBlack32}`
+  const states = {
+    default: {
+      border: wonderBlocksTokens.semanticColor.border.strong,
+      background: wonderBlocksTokens.semanticColor.surface.primary,
+      foreground: wonderBlocksTokens.semanticColor.text.primary
+    },
+    disabled: {
+      border: wonderBlocksTokens.semanticColor.border.primary,
+      background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+      foreground: wonderBlocksTokens.semanticColor.text.secondary
+    },
+    error: {
+      border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+      background: wonderBlocksTokens.semanticColor.status.critical.background,
+      foreground: wonderBlocksTokens.semanticColor.text.primary
+    }
+  };
+  const actionType = error ? "destructive" : "progressive";
+  const action = wonderBlocksTokens.semanticColor.action.outlined[actionType];
+  const sharedOutlineStyling = {
+    outlineOffset: -wonderBlocksTokens.border.width.thin,
+    outlineStyle: "solid",
+    outlineWidth: wonderBlocksTokens.border.width.thin
+  };
+  const focusHoverStyling = _extends__default["default"]({
+    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,
+    outlineColor: action.press.border
+  }, sharedOutlineStyling);
+  const currentState = error ? states.error : states.default;
+  const newStyles = {
+    default: {
+      background: currentState.background,
+      borderColor: currentState.border,
+      borderWidth: wonderBlocksTokens.border.width.hairline,
+      color: placeholder ? wonderBlocksTokens.semanticColor.text.secondary : currentState.foreground,
+      ":hover:not([aria-disabled=true])": focusHoverStyling,
+      ["@media not (hover: hover)"]: {
+        ":hover:not([aria-disabled=true])": {
+          borderColor: currentState.border,
+          borderWidth: wonderBlocksTokens.border.width.hairline,
+          paddingLeft: wonderBlocksTokens.spacing.medium_16,
+          paddingRight: wonderBlocksTokens.spacing.small_12
         }
       },
-      pressed: activePressedStyling
-    };
-  }
+      ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+      ":active:not([aria-disabled=true])": pressStyling
+    },
+    disabled: {
+      background: states.disabled.background,
+      borderColor: states.disabled.border,
+      color: states.disabled.foreground,
+      cursor: "not-allowed",
+      ":focus-visible": _extends__default["default"]({
+        outlineColor: wonderBlocksTokens.semanticColor.action.disabled.default
+      }, sharedOutlineStyling)
+    },
+    press: pressStyling
+  };
   stateStyles[styleKey] = aphrodite.StyleSheet.create(newStyles);
   return stateStyles[styleKey];
 };
@@ -1999,7 +1962,7 @@ function useSelectValidation({
   };
 }
 
-const _excluded$1 = ["children", "error", "id", "opener", "light", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
+const _excluded$1 = ["children", "error", "id", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
 const SingleSelect = props => {
   const selectedIndex = React__namespace.useRef(0);
   const {
@@ -2007,7 +1970,6 @@ const SingleSelect = props => {
       error = false,
       id,
       opener,
-      light = false,
       placeholder,
       selectedValue,
       testId,
@@ -2153,7 +2115,6 @@ const SingleSelect = props => {
         id: uniqueOpenerId,
         error: hasError,
         isPlaceholder: !selectedItem,
-        light: light,
         onOpenChanged: handleOpenChanged,
         open: open,
         ref: handleOpenerRef,
@@ -2179,7 +2140,6 @@ const SingleSelect = props => {
     dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
     initialFocusedIndex: selectedIndex.current,
     items: items,
-    light: light,
     onOpenChanged: handleOpenChanged,
     open: open,
     opener: renderOpener(isDisabled, uniqueDropdownId),
@@ -2196,11 +2156,10 @@ const SingleSelect = props => {
   }));
 };
 
-const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
+const _excluded = ["id", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
 const MultiSelect = props => {
   const {
       id,
-      light = false,
       opener,
       testId,
       alignment = "left",
@@ -2283,9 +2242,11 @@ const MultiSelect = props => {
     const allChildren = React__namespace.Children.toArray(children);
     const selected = allChildren.filter(option => !!option && !option.props.disabled).map(option => option.props.value);
     onChange(selected);
+    onSelectedValuesChangeValidation();
   };
   const handleSelectNone = () => {
     onChange([]);
+    onSelectedValuesChangeValidation();
   };
   const getMenuText = children => {
     const {
@@ -2434,7 +2395,6 @@ const MultiSelect = props => {
         id: uniqueOpenerId,
         "aria-controls": dropdownId,
         isPlaceholder: menuText === noneSelected,
-        light: light,
         onOpenChanged: handleOpenChanged,
         onBlur: onOpenerBlurValidation,
         open: open,
@@ -2463,7 +2423,6 @@ const MultiSelect = props => {
     dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
     isFilterable: isFilterable,
     items: [...getShortcuts(numEnabledOptions), ...filteredItems],
-    light: light,
     onOpenChanged: handleOpenChanged,
     open: open,
     opener: renderOpener(allChildren, isDisabled, uniqueDropdownId),
@@ -2828,15 +2787,15 @@ const styles$2 = aphrodite.StyleSheet.create({
     flexWrap: "wrap"
   },
   pill: {
-    fontSize: tokens.font.size.small,
+    fontSize: wonderBlocksTokens.font.size.small,
     justifyContent: "space-between",
     alignItems: "center",
-    marginBlockStart: tokens.spacing.xxxSmall_4,
-    marginInlineEnd: tokens.spacing.xxxSmall_4,
-    paddingInlineEnd: tokens.spacing.xxxSmall_4
+    marginBlockStart: wonderBlocksTokens.spacing.xxxSmall_4,
+    marginInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4,
+    paddingInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4
   },
   pillFocused: {
-    outline: `1px solid ${tokens.color.blue}`
+    outline: `1px solid ${wonderBlocksTokens.color.blue}`
   }
 });
 
@@ -2926,7 +2885,7 @@ const styles$1 = aphrodite.StyleSheet.create({
     outline: "none"
   },
   disabled: {
-    color: tokens.color.offBlack64
+    color: wonderBlocksTokens.color.offBlack64
   }
 });
 
@@ -3094,7 +3053,7 @@ function Combobox({
     const startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
       size: "small"
     }, startIcon.props, {
-      color: disabled ? tokens.color.offBlack32 : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : tokens.semanticColor.icon.primary
+      color: disabled ? wonderBlocksTokens.color.offBlack32 : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : wonderBlocksTokens.semanticColor.icon.primary
     }));
     return React__namespace.createElement(wonderBlocksCore.View, {
       style: styles.iconWrapper
@@ -3210,24 +3169,24 @@ const styles = aphrodite.StyleSheet.create({
     width: "100%",
     maxWidth: "100%",
     flexWrap: "wrap",
-    background: tokens.color.white,
-    borderRadius: tokens.border.radius.medium_4,
-    border: `solid 1px ${tokens.color.offBlack50}`,
-    paddingInline: tokens.spacing.xSmall_8
+    background: wonderBlocksTokens.color.white,
+    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    border: `solid 1px ${wonderBlocksTokens.color.offBlack50}`,
+    paddingInline: wonderBlocksTokens.spacing.xSmall_8
   },
   focused: {
-    background: tokens.color.white,
-    border: `1px solid ${tokens.color.blue}`
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.blue}`
   },
   disabled: {
-    background: tokens.color.offWhite,
-    border: `1px solid ${tokens.color.offBlack16}`,
-    color: tokens.color.offBlack64
+    background: wonderBlocksTokens.color.offWhite,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack64
   },
   error: {
-    background: tokens.color.fadedRed8,
-    border: `1px solid ${tokens.color.red}`,
-    color: tokens.color.offBlack
+    background: wonderBlocksTokens.color.fadedRed8,
+    border: `1px solid ${wonderBlocksTokens.color.red}`,
+    color: wonderBlocksTokens.color.offBlack
   },
   combobox: {
     appearance: "none",
@@ -3235,7 +3194,7 @@ const styles = aphrodite.StyleSheet.create({
     border: "none",
     outline: "none",
     padding: 0,
-    minWidth: tokens.spacing.xxxSmall_4,
+    minWidth: wonderBlocksTokens.spacing.xxxSmall_4,
     width: "auto",
     display: "inline-grid",
     gridArea: "1 / 2",
@@ -3245,10 +3204,10 @@ const styles = aphrodite.StyleSheet.create({
     }
   },
   listbox: {
-    backgroundColor: tokens.color.white,
-    borderRadius: tokens.border.radius.medium_4,
-    border: `solid 1px ${tokens.color.offBlack16}`,
-    boxShadow: `0px ${tokens.spacing.xSmall_8}px ${tokens.spacing.xSmall_8}px 0px ${tokens.color.offBlack8}`,
+    backgroundColor: wonderBlocksTokens.color.white,
+    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    border: `solid 1px ${wonderBlocksTokens.color.offBlack16}`,
+    boxShadow: `0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,
     maxHeight: "var(--popper-max-height)",
     overflowY: "auto"
   },
@@ -3258,18 +3217,18 @@ const styles = aphrodite.StyleSheet.create({
   },
   button: {
     position: "absolute",
-    right: tokens.spacing.xxxSmall_4,
-    top: tokens.spacing.xxxSmall_4,
+    right: wonderBlocksTokens.spacing.xxxSmall_4,
+    top: wonderBlocksTokens.spacing.xxxSmall_4,
     margin: 0
   },
   buttonOpen: {
     transform: "rotate(180deg)"
   },
   clearButton: {
-    right: tokens.spacing.xLarge_32 + tokens.spacing.xSmall_8
+    right: wonderBlocksTokens.spacing.xLarge_32 + wonderBlocksTokens.spacing.xSmall_8
   },
   iconWrapper: {
-    padding: tokens.spacing.xxxSmall_4,
+    padding: wonderBlocksTokens.spacing.xxxSmall_4,
     minWidth: "auto"
   }
 });