@khanacademy/wonder-blocks-dropdown 7.0.6 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 8.0.0
+
+### Major Changes
+
+-   d8d41dc9: Removes the `light` prop from wonder-blocks-dropdown. This includes removing that in `SingleSelect` and `MultiSelect`.
+
+### Patch Changes
+
+-   c774f7da: Updates `SelectOpener` (internal component) from `Dropdown` to match Design specs. Also converts `color` tokens to use `semanticColor` tokens.
+-   Updated dependencies [8d26588f]
+-   Updated dependencies [0de25cd8]
+    -   @khanacademy/wonder-blocks-search-field@5.0.0
+    -   @khanacademy/wonder-blocks-tokens@4.0.0
+    -   @khanacademy/wonder-blocks-cell@4.0.6
+    -   @khanacademy/wonder-blocks-clickable@5.0.6
+    -   @khanacademy/wonder-blocks-layout@3.0.6
+    -   @khanacademy/wonder-blocks-modal@7.0.4
+    -   @khanacademy/wonder-blocks-pill@3.0.6
+
 ## 7.0.6
 
 ### Patch Changes

package/dist/components/combobox.d.ts

@@ -47,13 +47,6 @@ type Props = {
      * This is useful for internationalization. Defaults to English.
      */
     labels?: ComboboxLabels;
-    /**
-     * Whether to display the light version of this component.
-     *
-     * For use when the component is used on a dark background. Defaults to
-     * false.
-     */
-    light?: boolean;
     /**
      * TODO(WB-1678): Add async support to the listbox.
      *

package/dist/components/dropdown-core-virtualized.d.ts

@@ -3,9 +3,9 @@ import { VariableSizeList as List } from "react-window";
 import type { DropdownItem } from "../util/types";
 declare const _default: {
     (props: {
-        data: DropdownItem[];
-        width?: number | null | undefined;
-        listRef?: React.RefObject<List<any>> | undefined;
+        data: Array<DropdownItem>;
+        width?: number | null | undefined | undefined;
+        listRef?: React.RefObject<List> | undefined;
     }): React.JSX.Element;
     displayName: string;
 };

package/dist/components/dropdown-core.d.ts

@@ -21,11 +21,11 @@ type Labels = {
     someResults: (numOptions: number) => string;
 };
 type DropdownAriaRole = "listbox" | "menu";
-declare const _default: React.ComponentType<Readonly<{
+type ExportProps = Readonly<{
     /**
      * Items for the menu.
      */
-    items: DropdownItem[];
+    items: Array<DropdownItem>;
     /**
      * Callback for when the menu is opened or closed. Parameter is whether
      * the dropdown menu should be open.
@@ -38,11 +38,11 @@ declare const _default: React.ComponentType<Readonly<{
     /**
      * The component that opens the menu.
      */
-    opener: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    opener: React.ReactElement<any>;
     /**
      * Ref to the opener element.
      */
-    openerElement?: HTMLElement | undefined;
+    openerElement?: HTMLElement;
     /**
      * The aria "role" applied to the dropdown container.
      */
@@ -52,7 +52,7 @@ declare const _default: React.ComponentType<Readonly<{
      * the searchText exist, SearchField will be displayed at the top of the
      * dropdown body.
      */
-    onSearchTextChanged?: ((searchText: string) => unknown) | undefined;
+    onSearchTextChanged?: (searchText: string) => unknown | null | undefined;
     /**
      * An optional string that the user entered to search the items. When this
      * and the onSearchTextChanged exist, SearchField will be displayed at the
@@ -71,29 +71,29 @@ declare const _default: React.ComponentType<Readonly<{
     /**
      * Optional CSS classes for the entire dropdown component.
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * When this is true, the dropdown body shows a search text input at the
      * top. The items will be filtered by the input.
      */
-    isFilterable?: boolean | undefined;
+    isFilterable?: boolean;
     /**
      * Whether the dropdown and it's interactions should be disabled.
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Unique identifier attached to the dropdown.
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * Whether this menu should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.
      */
-    alignment?: "left" | "right" | undefined;
+    alignment?: "left" | "right";
     /**
      * Whether to auto focus an option. Defaults to true.
      */
-    autoFocus?: boolean | undefined;
+    autoFocus?: boolean;
     /**
      * Whether to enable the type-ahead suggestions feature. Defaults to true.
      *
@@ -107,24 +107,20 @@ declare const _default: React.ComponentType<Readonly<{
      * some cases where it's not desirable (for example when using a `TextField`
      * as the opener element).
      */
-    enableTypeAhead?: boolean | undefined;
+    enableTypeAhead?: boolean;
     /**
      * An index that represents the index of the focused element when the menu
      * is opened.
      */
-    initialFocusedIndex?: number | undefined;
+    initialFocusedIndex?: number;
     /**
      * The object containing the custom labels used inside this component.
      */
-    labels?: Labels | undefined;
-    /**
-     * Whether to display the "light" version of this component instead, for
-     * use when the item is used on a dark background.
-     */
-    light?: boolean | undefined;
+    labels?: Labels;
     /**
      * Used to determine if we can automatically select an item using the keyboard.
      */
-    selectionType?: "single" | "multi" | undefined;
-}>>;
+    selectionType?: "single" | "multi";
+}>;
+declare const _default: React.ComponentType<ExportProps>;
 export default _default;

package/dist/components/multi-select.d.ts

@@ -51,11 +51,6 @@ type DefaultProps = Readonly<{
      * Whether this component is in an error state. Defaults to false.
      */
     error?: boolean;
-    /**
-     * Whether to display the "light" version of this component instead, for
-     * use when the component is used on a dark background.
-     */
-    light?: boolean;
     /**
      * The values of the items that are currently selected.
      */

package/dist/components/select-opener.d.ts

@@ -25,11 +25,6 @@ type SelectOpenerProps = AriaProps & {
      * of this component. A placeholder has more faded text colors and styles.
      */
     isPlaceholder: boolean;
-    /**
-     * Whether to display the "light" version of this component instead, for
-     * use when the item is used on a dark background.
-     */
-    light: boolean;
     /**
      * Callback for when the SelectOpener is pressed.
      */
@@ -50,7 +45,6 @@ type SelectOpenerProps = AriaProps & {
 type DefaultProps = {
     disabled: SelectOpenerProps["disabled"];
     error: SelectOpenerProps["error"];
-    light: SelectOpenerProps["light"];
     isPlaceholder: SelectOpenerProps["isPlaceholder"];
 };
 type SelectOpenerState = {

package/dist/components/single-select.d.ts

@@ -53,11 +53,6 @@ type DefaultProps = Readonly<{
      * Whether or not the input in is an error state. Defaults to false.
      */
     error?: boolean;
-    /**
-     * Whether to display the "light" version of this component instead, for
-     * use when the component is used on a dark background.
-     */
-    light?: boolean;
     /**
      * The object containing the custom labels used inside this component.
      */

package/dist/es/index.js

@@ -3,8 +3,7 @@ import * as React from 'react';
 import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
-import * as tokens from '@khanacademy/wonder-blocks-tokens';
-import { spacing, color, mix, fade, font, border, semanticColor } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, color, mix, fade, semanticColor, border, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { View, addStyle, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
@@ -1259,7 +1258,6 @@ class DropdownCore extends React.Component {
       "aria-required": ariaRequired,
       dropdownStyle,
       isFilterable,
-      light,
       openerElement,
       role,
       id
@@ -1268,7 +1266,7 @@ class DropdownCore extends React.Component {
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
     return React.createElement(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.createElement(View, {
       id: id,
@@ -1337,7 +1335,6 @@ DropdownCore.defaultProps = {
     noResults: defaultLabels.noResults,
     someResults: defaultLabels.someSelected
   },
-  light: false,
   selectionType: "single"
 };
 const styles$7 = StyleSheet.create({
@@ -1353,9 +1350,6 @@ const styles$7 = StyleSheet.create({
     boxShadow: `0px 8px 8px 0px ${fade(color.offBlack, 0.1)}`,
     maxHeight: "var(--popper-max-height)"
   },
-  light: {
-    border: "none"
-  },
   listboxOrMenu: {
     overflowY: "auto"
   },
@@ -1682,7 +1676,7 @@ const styles$5 = 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 = addStyle("button");
 class SelectOpener extends React.Component {
   constructor(props) {
@@ -1723,16 +1717,15 @@ class SelectOpener extends React.Component {
         error,
         id,
         isPlaceholder,
-        light,
         open,
         testId,
         "aria-required": ariaRequired,
         onBlur
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
-    const stateStyles = _generateStyles(light, isPlaceholder, error);
-    const iconColor = light ? disabled || error ? "currentColor" : tokens.color.white : disabled ? tokens.color.offBlack32 : tokens.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 ? semanticColor.action.disabled.default : semanticColor.icon.primary;
+    const style = [styles$4.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.press];
     return React.createElement(StyledButton, _extends({}, sharedProps, {
       "aria-disabled": disabled,
       "aria-expanded": open ? "true" : "false",
@@ -1761,7 +1754,6 @@ class SelectOpener extends React.Component {
 SelectOpener.defaultProps = {
   disabled: false,
   error: false,
-  light: false,
   isPlaceholder: false
 };
 const styles$4 = StyleSheet.create({
@@ -1770,12 +1762,12 @@ const styles$4 = StyleSheet.create({
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
-    color: tokens.color.offBlack,
+    color: semanticColor.text.primary,
     height: DROPDOWN_ITEM_HEIGHT,
-    paddingLeft: tokens.spacing.medium_16,
-    paddingRight: tokens.spacing.small_12,
+    paddingLeft: spacing.medium_16,
+    paddingRight: spacing.small_12,
     borderWidth: 0,
-    borderRadius: tokens.border.radius.medium_4,
+    borderRadius: border.radius.medium_4,
     borderStyle: "solid",
     outline: "none",
     textDecoration: "none",
@@ -1784,7 +1776,7 @@ const styles$4 = StyleSheet.create({
     touchAction: "manipulation"
   },
   text: {
-    marginRight: tokens.spacing.xSmall_8,
+    marginRight: spacing.xSmall_8,
     whiteSpace: "nowrap",
     userSelect: "none",
     overflow: "hidden",
@@ -1794,103 +1786,74 @@ const styles$4 = StyleSheet.create({
     minWidth: 16
   }
 });
-const adjustedPaddingLeft = tokens.spacing.medium_16 - 1;
-const adjustedPaddingRight = tokens.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.color.red : tokens.color.white,
-      borderWidth: tokens.spacing.xxxxSmall_2,
-      paddingLeft: adjustedPaddingLeft,
-      paddingRight: adjustedPaddingRight
-    };
-    const activePressedStyling = {
-      paddingLeft: adjustedPaddingLeft,
-      paddingRight: adjustedPaddingRight,
-      borderColor: error ? tokens.color.red : tokens.color.fadedBlue,
-      borderWidth: tokens.border.width.thin,
-      color: error ? tokens.color.offBlack64 : placeholder ? mix(tokens.color.white32, tokens.color.blue) : tokens.color.fadedBlue,
-      backgroundColor: error ? tokens.color.fadedRed : tokens.color.activeBlue
-    };
-    newStyles = {
-      default: {
-        background: error ? tokens.color.fadedRed8 : "transparent",
-        color: error ? tokens.color.offBlack64 : placeholder ? tokens.color.white50 : tokens.color.white,
-        borderColor: error ? tokens.color.red : tokens.color.white50,
-        borderWidth: tokens.border.width.hairline,
-        ":hover:not([aria-disabled=true])": focusHoverStyling,
-        ["@media not (hover: hover)"]: {
-          ":hover:not([aria-disabled=true])": {
-            borderColor: error ? tokens.color.red : tokens.color.white50,
-            borderWidth: tokens.border.width.hairline,
-            paddingLeft: tokens.spacing.medium_16,
-            paddingRight: tokens.spacing.small_12
-          }
-        },
-        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
-        ":active:not([aria-disabled=true])": activePressedStyling
-      },
-      disabled: {
-        background: "transparent",
-        borderColor: mix(tokens.color.white32, tokens.color.blue),
-        color: mix(tokens.color.white32, tokens.color.blue),
-        cursor: "not-allowed",
-        ":focus-visible": {
-          boxShadow: `0 0 0 1px ${tokens.color.offBlack32}, 0 0 0 3px ${tokens.color.fadedBlue}`
-        }
-      },
-      pressed: activePressedStyling
-    };
-  } else {
-    const focusHoverStyling = {
-      borderColor: error ? tokens.color.red : tokens.color.blue,
-      borderWidth: tokens.border.width.thin,
-      paddingLeft: adjustedPaddingLeft,
-      paddingRight: adjustedPaddingRight
-    };
-    const activePressedStyling = {
-      background: error ? tokens.color.fadedRed : tokens.color.fadedBlue,
-      borderColor: error ? tokens.color.red : tokens.color.activeBlue,
-      borderWidth: tokens.border.width.thin,
-      paddingLeft: adjustedPaddingLeft,
-      paddingRight: adjustedPaddingRight
-    };
-    newStyles = {
-      default: {
-        background: error ? tokens.color.fadedRed8 : tokens.color.white,
-        borderColor: error ? tokens.color.red : tokens.color.offBlack50,
-        borderWidth: tokens.border.width.hairline,
-        color: placeholder ? tokens.color.offBlack64 : tokens.color.offBlack,
-        ":hover:not([aria-disabled=true])": focusHoverStyling,
-        ["@media not (hover: hover)"]: {
-          ":hover:not([aria-disabled=true])": {
-            borderColor: error ? tokens.color.red : tokens.color.offBlack50,
-            borderWidth: tokens.border.width.hairline,
-            paddingLeft: tokens.spacing.medium_16,
-            paddingRight: tokens.spacing.small_12
-          }
-        },
-        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
-        ":active:not([aria-disabled=true])": activePressedStyling
-      },
-      disabled: {
-        background: tokens.color.offWhite,
-        borderColor: tokens.color.offBlack16,
-        color: tokens.color.offBlack64,
-        cursor: "not-allowed",
-        ":focus-visible": {
-          boxShadow: `0 0 0 1px ${tokens.color.white}, 0 0 0 3px ${tokens.color.offBlack32}`
+  const states = {
+    default: {
+      border: semanticColor.border.strong,
+      background: semanticColor.surface.primary,
+      foreground: semanticColor.text.primary
+    },
+    disabled: {
+      border: semanticColor.border.primary,
+      background: semanticColor.action.disabled.secondary,
+      foreground: semanticColor.text.secondary
+    },
+    error: {
+      border: semanticColor.status.critical.foreground,
+      background: semanticColor.status.critical.background,
+      foreground: semanticColor.text.primary
+    }
+  };
+  const actionType = error ? "destructive" : "progressive";
+  const action = semanticColor.action.outlined[actionType];
+  const sharedOutlineStyling = {
+    outlineOffset: -border.width.thin,
+    outlineStyle: "solid",
+    outlineWidth: border.width.thin
+  };
+  const focusHoverStyling = _extends({
+    outlineColor: action.hover.border
+  }, sharedOutlineStyling);
+  const pressStyling = _extends({
+    background: action.press.background,
+    color: placeholder ? error ? semanticColor.text.secondary : semanticColor.action.outlined.progressive.press.foreground : 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: border.width.hairline,
+      color: placeholder ? semanticColor.text.secondary : currentState.foreground,
+      ":hover:not([aria-disabled=true])": focusHoverStyling,
+      ["@media not (hover: hover)"]: {
+        ":hover:not([aria-disabled=true])": {
+          borderColor: currentState.border,
+          borderWidth: border.width.hairline,
+          paddingLeft: spacing.medium_16,
+          paddingRight: 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({
+        outlineColor: semanticColor.action.disabled.default
+      }, sharedOutlineStyling)
+    },
+    press: pressStyling
+  };
   stateStyles[styleKey] = StyleSheet.create(newStyles);
   return stateStyles[styleKey];
 };
@@ -1964,7 +1927,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.useRef(0);
   const {
@@ -1972,7 +1935,6 @@ const SingleSelect = props => {
       error = false,
       id,
       opener,
-      light = false,
       placeholder,
       selectedValue,
       testId,
@@ -2118,7 +2080,6 @@ const SingleSelect = props => {
         id: uniqueOpenerId,
         error: hasError,
         isPlaceholder: !selectedItem,
-        light: light,
         onOpenChanged: handleOpenChanged,
         open: open,
         ref: handleOpenerRef,
@@ -2144,7 +2105,6 @@ const SingleSelect = props => {
     dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
     initialFocusedIndex: selectedIndex.current,
     items: items,
-    light: light,
     onOpenChanged: handleOpenChanged,
     open: open,
     opener: renderOpener(isDisabled, uniqueDropdownId),
@@ -2161,11 +2121,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",
@@ -2401,7 +2360,6 @@ const MultiSelect = props => {
         id: uniqueOpenerId,
         "aria-controls": dropdownId,
         isPlaceholder: menuText === noneSelected,
-        light: light,
         onOpenChanged: handleOpenChanged,
         onBlur: onOpenerBlurValidation,
         open: open,
@@ -2430,7 +2388,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),

package/dist/hooks/use-listbox.d.ts

@@ -47,32 +47,32 @@ export declare function useListbox({ children: options, disabled, disableSpaceSe
     focusedIndex: number;
     setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
     renderList: React.ReactElement<Pick<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-        role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+        role?: import("@khanacademy/wonder-blocks-core").AriaRole;
     }> & {
         label: import("../util/types").OptionLabel;
-        labelAsText?: string | undefined;
+        labelAsText?: string;
         value: string;
         disabled: boolean;
-        onClick?: (() => unknown) | undefined;
+        onClick?: () => unknown;
         onToggle: (value: string) => unknown;
         selected: boolean;
         focused: boolean;
-        role: "menuitem" | "menuitemcheckbox" | "option";
-        testId?: string | undefined;
-        variant?: "checkbox" | "check" | undefined;
+        role: "menuitem" | "option" | "menuitemcheckbox";
+        testId?: string;
+        variant?: "check" | "checkbox";
         style?: import("@khanacademy/wonder-blocks-core").StyleType;
-        parentComponent?: "listbox" | "dropdown" | undefined;
-        id?: string | undefined;
-        horizontalRule: import("@khanacademy/wonder-blocks-cell").HorizontalRuleVariant | undefined;
-        leftAccessory?: React.ReactNode;
-        rightAccessory?: React.ReactNode;
-        subtitle1?: import("@khanacademy/wonder-blocks-cell").TypographyText | undefined;
-        subtitle2?: import("@khanacademy/wonder-blocks-cell").TypographyText | undefined;
+        parentComponent?: "dropdown" | "listbox";
+        id?: string;
+        horizontalRule: import("../util/types").CellProps["horizontalRule"];
+        leftAccessory?: import("../util/types").CellProps["leftAccessory"];
+        rightAccessory?: import("../util/types").CellProps["rightAccessory"];
+        subtitle1?: import("../util/types").CellProps["subtitle1"];
+        subtitle2?: import("../util/types").CellProps["subtitle2"];
     }, keyof import("@khanacademy/wonder-blocks-core").AriaAttributes | "style" | "label" | "leftAccessory" | "rightAccessory" | "testId" | "onClick" | "subtitle1" | "subtitle2" | "value" | "id" | "labelAsText" | "variant" | "parentComponent"> & {
         selected?: boolean | undefined;
         role?: "menuitem" | "menuitemcheckbox" | "option" | undefined;
         disabled?: boolean | undefined;
-        horizontalRule?: import("@khanacademy/wonder-blocks-cell").HorizontalRuleVariant | undefined;
+        horizontalRule?: import("../util/types").CellProps["horizontalRule"];
         focused?: boolean | undefined;
         onToggle?: ((value: string) => unknown) | undefined;
     } & {}, string | React.JSXElementConstructor<any>>[];