@procore/core-react 12.53.1 → 12.53.2

package/dist/MenuImperative/MenuImperative.styles.d.ts

@@ -1,14 +1,32 @@
-export declare const StyledWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledOptions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledMenu: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledOptions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $scrollable?: boolean;
 }>> & string;
-export declare const StyledGrip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledSearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledGroupLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledGrip: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledHeader: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledSearch: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledGroup: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledGroupLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $disabled?: boolean;
     $selected?: boolean;
     $highlighted?: boolean;
@@ -16,7 +34,11 @@ export declare const StyledItem: import("styled-components/dist/types").IStyledC
     $isDraggable?: boolean;
     $isDragging?: boolean;
 }>> & string;
-export declare const StyledDroppable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("../Box").BoxProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledDroppable: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledFooter: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("../Box").BoxProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("../Box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("../Box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/MenuImperative/MenuImperative.styles.js

@@ -11,15 +11,15 @@ var optionMinHeight = 32;
 // Do not merge with StyledMenu, needed for max-height working in IE
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_53_1__sc-z984sz-0"
+  componentId: "core-12_53_2__sc-z984sz-0"
 })(["border-radius:inherit;display:flex;max-height:inherit;min-width:inherit;outline:none;width:inherit;"]);
 export var StyledMenu = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMenu",
-  componentId: "core-12_53_1__sc-z984sz-1"
+  componentId: "core-12_53_2__sc-z984sz-1"
 })(["border-radius:inherit;display:flex;flex-direction:column;outline:0;width:100%;"]);
 export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledOptions",
-  componentId: "core-12_53_1__sc-z984sz-2"
+  componentId: "core-12_53_2__sc-z984sz-2"
 })(["flex-basis:auto;flex-grow:1;flex-shrink:1;min-height:", "px;", ";padding:", "px 0;position:relative;&:focus-visible{", " margin:-1px;}ol&{padding:", "px 0;list-style-type:none;margin:0;}"], optionMinHeight, function (_ref) {
   var _ref$$scrollable = _ref.$scrollable,
     $scrollable = _ref$$scrollable === void 0 ? true : _ref$$scrollable;
@@ -27,27 +27,27 @@ export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
 }, spacing.sm, getFocus(), spacing.sm);
 export var StyledGrip = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGrip",
-  componentId: "core-12_53_1__sc-z984sz-3"
+  componentId: "core-12_53_2__sc-z984sz-3"
 })(["padding:0 2px;height:24px;"]);
 export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeader",
-  componentId: "core-12_53_1__sc-z984sz-4"
+  componentId: "core-12_53_2__sc-z984sz-4"
 })([""]);
 export var StyledSearch = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSearch",
-  componentId: "core-12_53_1__sc-z984sz-5"
+  componentId: "core-12_53_2__sc-z984sz-5"
 })(["padding:", "px ", "px ", "px;", " > *{pointer-events:none;}"], spacing.lg, spacing.lg, spacing.sm, StyledButton);
 export var StyledGroup = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGroup",
-  componentId: "core-12_53_1__sc-z984sz-6"
+  componentId: "core-12_53_2__sc-z984sz-6"
 })(["&:not(:first-child){margin-top:", "px;}"], spacing.md);
 export var StyledGroupLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledGroupLabel",
-  componentId: "core-12_53_1__sc-z984sz-7"
+  componentId: "core-12_53_2__sc-z984sz-7"
 })(["", " display:block;color:", ";font-weight:", ";padding:", "px ", "px;cursor:default;"], getTypographyIntent('body'), colors.gray15, typographyWeights.semibold, spacing.xs, spacing.lg);
 export var StyledItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledItem",
-  componentId: "core-12_53_1__sc-z984sz-8"
+  componentId: "core-12_53_2__sc-z984sz-8"
 })(["", ";", " cursor:pointer;list-style-type:none;padding:", "px ", "px;a{color:", ";display:block;margin:-", "px -", "px;padding:", "px ", "px;text-decoration:none;&:hover{color:", ";text-decoration:none;}}&[data-highlighted='true']{background-color:", ";}&[data-focus-visible='true']{box-shadow:inset 0 0 0 2px ", ";}", " ", " ", "{color:inherit;cursor:pointer;}", " ", " ", ""], getTypographyIntent('body'), function (_ref2) {
   var as = _ref2.as;
   return as === 'a' && css(["display:block;text-decoration:none;"]);
@@ -79,10 +79,10 @@ export var StyledItem = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledDroppable = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDroppable",
-  componentId: "core-12_53_1__sc-z984sz-9"
+  componentId: "core-12_53_2__sc-z984sz-9"
 })(["", ",", "{padding-left:28px;}"], StyledGroup, StyledItem);
 export var StyledFooter = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_53_1__sc-z984sz-10"
+  componentId: "core-12_53_2__sc-z984sz-10"
 })(["border-top:1px solid ", ";border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;"], colors.gray85);
 //# sourceMappingURL=MenuImperative.styles.js.map

package/dist/MenuImperative/MenuImperative.types.d.ts

@@ -192,7 +192,7 @@ export interface ItemWithDraggingProps extends ItemProps {
      */
     draggableIndex: number;
 }
-interface AnchorItemProps extends Omit<ItemProps, 'item'>, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'> {
+export interface AnchorItemProps extends Omit<ItemProps, 'item'>, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'> {
 }
 export type MenuItemProps = ItemProps | ItemWithDraggingProps | AnchorItemProps;
 export type MenuItemDefaultElement = 'div' | 'a';

package/dist/MenuImperative/MenuImperative.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuImperative.types.js","names":[],"sources":["../../src/MenuImperative/MenuImperative.types.ts"],"sourcesContent":["import type * as React from 'react'\nimport type { BoxProps } from '../Box'\nimport type {\n  TypeaheadInputProps,\n  TypeaheadProps,\n} from '../Typeahead/Typeahead.types'\nimport type { Props } from '../_utils/types'\n\nexport type Ref<T> =\n  | ((instance: T | null) => void)\n  | React.MutableRefObject<T | null>\n  | null\n\ntype Div = React.ComponentPropsWithoutRef<'div'>\n\nexport interface Selection {\n  /**\n   * @since 10.19.0\n   */\n  event:\n    | React.MouseEvent<HTMLElement, MouseEvent>\n    | React.KeyboardEvent<HTMLElement>\n  /**\n   * @since 10.19.0\n   */\n  group: boolean\n  /**\n   * @since 10.19.0\n   */\n  item: any\n  /**\n   * @since 10.19.0\n   */\n  action: 'selected' | 'unselected'\n  /**\n   * Indicates should focus be restored to the trigger(e.g. Button of Dropdown)\n   * after activating this item. If all items return focus to the trigger once activated,\n   * try just `restoreFocusOnHide` on `Dropdown` instead.\n   * if it is `undefined`, it is omitted in onSelect callback.\n   * @since 11.15.0\n   */\n  restoreFocus?: boolean\n}\n\nexport interface Reorder {\n  /**\n   * @since 10.19.0\n   */\n  draggableId: string\n  /**\n   * @since 10.19.0\n   */\n  source: {\n    index: number\n    droppableId: string\n  }\n  /**\n   * @since 10.19.0\n   */\n  destination: {\n    index: number\n    droppableId: string\n  }\n}\n\ntype MenuRole = 'menu' | 'listbox' | 'none'\n\nexport interface MenuProps extends Omit<Div, 'onSelect' | 'onDragEnd'> {\n  /**\n   * @since 10.19.0\n   */\n  circular?: boolean\n  /**\n   * Set aria-multiselectable=\"true\"\n   * @since 10.19.0\n   */\n  multiple?: boolean\n  /**\n   * @since 10.19.0\n   */\n  onDragEnd?: (result: Reorder) => void\n  /**\n   * @since 10.19.0\n   */\n  onScrollBottom?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void\n  /**\n   * @since 10.19.0\n   */\n  onSelect?: (selection: Selection) => any\n  /**\n   * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.\n   *\n   * A listbox widget presents a list of options and allows a user to select one or more of them.\n   *\n   * @since 11.3.0\n   */\n  role?: MenuRole\n  /**\n   * Used when navigation in the menu is controlled by search or another input,\n   * called each time virtual focus (highlighted item) is changed\n   * Consider use `useMenuImperativeControlNavigation` hook.\n   *\n   * @since 11.5.0\n   */\n  onChangeActiveDescendant?: (id: string | undefined) => void\n  /**\n   * To override default menu navigation\n   * @since 11.5.0\n   */\n  onKeyboardNavigation?: React.KeyboardEventHandler\n}\n\nexport interface MenuRef {\n  /**\n   * @since 10.19.0\n   */\n  el: HTMLDivElement | null\n  /**\n   * @since 10.19.0\n   */\n  highlight: (item: HTMLElement, shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlightFirst: (shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlightLast: (shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlightSelected: (shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlightSuggested: (shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlighted: () => any\n  /**\n   * @since 10.19.0\n   */\n  next: (circular?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  prev: (circular?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  select: (\n    event:\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEvent<HTMLElement>\n  ) => void\n  /**\n   *  Usefully for extending navigation behavior with `onKeyboardNavigation`.\n   *  Pay attention that `ref` is `null` on first render.\n   *\n   *  ```\n   *  onKeyboardNavigation={(e) => {\n   *    if (e.key === 'Right' || e.key === 'ArrowRight') {\n   *        return navigateRight()\n   *    }\n   *\n   *    ref.defaultKeyDownNavigationHandler(e)\n   *  }}\n   *  ```\n   *\n   * @since 11.5.0\n   */\n  defaultKeyDownNavigationHandler: React.KeyboardEventHandler\n}\n\nexport interface ItemProps {\n  /**\n   * @since 10.19.0\n   */\n  item: any\n  /**\n   * @since 10.19.0\n   */\n  selected?: boolean\n  /**\n   * @since 10.19.0\n   */\n  suggested?: boolean\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @a11y Focus will be restored to the trigger after after activating this item.\n   * Use `Dropdown restoreFocusOnHide` instead if all items return focus to the trigger once activated.\n   * @since 11.15.0\n   */\n  restoreFocus?: boolean\n}\n\nexport interface ItemWithDraggingProps extends ItemProps {\n  /**\n   * @since 10.19.0\n   */\n  droppableIn: string | string[]\n  /**\n   * @since 10.19.0\n   */\n  draggableId: string\n  /**\n   * @since 10.19.0\n   */\n  draggableIndex: number\n}\n\ninterface AnchorItemProps\n  extends Omit<ItemProps, 'item'>,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'> {}\n\nexport type MenuItemProps = ItemProps | ItemWithDraggingProps | AnchorItemProps\n\nexport type MenuItemDefaultElement = 'div' | 'a'\n\n/**\n * @a11y When drag-and-drop is enabled, `children` should be a string so it\n * can be used for DnD announcements (exposed as `data-title`).\n */\nexport interface GroupProps {\n  /**\n   * @since 10.19.0\n   */\n  clickable?: boolean\n\n  /**\n   * @since 10.19.0\n   */\n  item?: any\n\n  /**\n   * @since 12.39.0\n   */\n  label?: string\n  /**\n   * @since 12.39.0\n   */\n  labelId?: string\n}\n\nexport interface OptionsProps {\n  /**\n   * @since 10.19.0\n   */\n  children?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  className?: string\n  /**\n   * @since 12.51.1\n   */\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>\n}\n\nexport interface MenuSearchProps\n  extends Omit<TypeaheadProps, 'onChange'>,\n    TypeaheadInputProps,\n    Props {\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @since 10.21.0\n   */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  /**\n   * Controls the search input value. When provided, the search input becomes\n   * a controlled component and the parent must manage the value state.\n   * @since 12.34.0\n   */\n  value?: string\n}\n\nexport interface HeaderProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  tabIndex?: number\n}\n\nexport interface DroppableProps {\n  /**\n   * @since 10.19.0\n   */\n  id: string\n  /**\n   * @since 10.19.0\n   */\n  children: React.ReactNode\n  /**\n   * @since 12.34.2\n   */\n  'aria-label'?: string\n  /**\n   * @since 12.34.2\n   */\n  'aria-labelledby'?: string\n  /**\n   * @since 12.34.2\n   */\n  role?: React.AriaRole\n  /**\n   * @since 12.34.2\n   */\n  'aria-multiselectable'?: boolean\n}\n\nexport interface FooterProps extends Omit<BoxProps, 'as'> {}\n\nexport interface MenuContext {\n  /**\n   * @since 11.5.0\n   */\n  a11yOptionsProps: {\n    role?: MenuRole\n    onKeyboardNavigation?: React.KeyboardEventHandler | null\n    tabIndex?: number\n    id?: string\n  }\n  /**\n   * @since 10.19.0\n   */\n  currentlyDroppableIn: string[]\n  /**\n   * @since 12.34.2\n   */\n  dndInstructionsId: string\n  /**\n   * @since 10.19.0\n   */\n  onHoverItem: (el?: HTMLDivElement) => void\n  /**\n   * @since 12.34.2\n   */\n  onFocusItem: (el?: HTMLDivElement) => void\n  /**\n   * @since 12.34.2\n   */\n  onBlurItem: (el?: HTMLDivElement) => void\n  /**\n   * @since 12.51.1\n   */\n  onMouseLeaveItems: () => void\n  /**\n   * @since 10.19.0\n   */\n  onScrollBottom: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void\n  /**\n   * @since 10.19.0\n   */\n  onSelect: (selection: Selection) => void\n  /**\n   * @since 11.3.0\n   */\n  role: MenuRole\n}\n\nexport interface ControlNavigationProps {\n  menuId?: MenuProps['id']\n}\n\nexport interface ControlNavigationReturn {\n  menuNavigationTriggerProps: {\n    'aria-activedescendant'?: string\n    'aria-controls'?: string\n    onKeyDown?: React.KeyboardEventHandler<Element>\n  }\n  menuProps: {\n    onChangeActiveDescendant?: React.Dispatch<\n      React.SetStateAction<string | undefined>\n    >\n    id: string\n  }\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"MenuImperative.types.js","names":[],"sources":["../../src/MenuImperative/MenuImperative.types.ts"],"sourcesContent":["import type * as React from 'react'\nimport type { BoxProps } from '../Box'\nimport type {\n  TypeaheadInputProps,\n  TypeaheadProps,\n} from '../Typeahead/Typeahead.types'\nimport type { Props } from '../_utils/types'\n\nexport type Ref<T> =\n  | ((instance: T | null) => void)\n  | React.MutableRefObject<T | null>\n  | null\n\ntype Div = React.ComponentPropsWithoutRef<'div'>\n\nexport interface Selection {\n  /**\n   * @since 10.19.0\n   */\n  event:\n    | React.MouseEvent<HTMLElement, MouseEvent>\n    | React.KeyboardEvent<HTMLElement>\n  /**\n   * @since 10.19.0\n   */\n  group: boolean\n  /**\n   * @since 10.19.0\n   */\n  item: any\n  /**\n   * @since 10.19.0\n   */\n  action: 'selected' | 'unselected'\n  /**\n   * Indicates should focus be restored to the trigger(e.g. Button of Dropdown)\n   * after activating this item. If all items return focus to the trigger once activated,\n   * try just `restoreFocusOnHide` on `Dropdown` instead.\n   * if it is `undefined`, it is omitted in onSelect callback.\n   * @since 11.15.0\n   */\n  restoreFocus?: boolean\n}\n\nexport interface Reorder {\n  /**\n   * @since 10.19.0\n   */\n  draggableId: string\n  /**\n   * @since 10.19.0\n   */\n  source: {\n    index: number\n    droppableId: string\n  }\n  /**\n   * @since 10.19.0\n   */\n  destination: {\n    index: number\n    droppableId: string\n  }\n}\n\ntype MenuRole = 'menu' | 'listbox' | 'none'\n\nexport interface MenuProps extends Omit<Div, 'onSelect' | 'onDragEnd'> {\n  /**\n   * @since 10.19.0\n   */\n  circular?: boolean\n  /**\n   * Set aria-multiselectable=\"true\"\n   * @since 10.19.0\n   */\n  multiple?: boolean\n  /**\n   * @since 10.19.0\n   */\n  onDragEnd?: (result: Reorder) => void\n  /**\n   * @since 10.19.0\n   */\n  onScrollBottom?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void\n  /**\n   * @since 10.19.0\n   */\n  onSelect?: (selection: Selection) => any\n  /**\n   * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.\n   *\n   * A listbox widget presents a list of options and allows a user to select one or more of them.\n   *\n   * @since 11.3.0\n   */\n  role?: MenuRole\n  /**\n   * Used when navigation in the menu is controlled by search or another input,\n   * called each time virtual focus (highlighted item) is changed\n   * Consider use `useMenuImperativeControlNavigation` hook.\n   *\n   * @since 11.5.0\n   */\n  onChangeActiveDescendant?: (id: string | undefined) => void\n  /**\n   * To override default menu navigation\n   * @since 11.5.0\n   */\n  onKeyboardNavigation?: React.KeyboardEventHandler\n}\n\nexport interface MenuRef {\n  /**\n   * @since 10.19.0\n   */\n  el: HTMLDivElement | null\n  /**\n   * @since 10.19.0\n   */\n  highlight: (item: HTMLElement, shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlightFirst: (shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlightLast: (shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlightSelected: (shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlightSuggested: (shouldScroll?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  highlighted: () => any\n  /**\n   * @since 10.19.0\n   */\n  next: (circular?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  prev: (circular?: boolean) => void\n  /**\n   * @since 10.19.0\n   */\n  select: (\n    event:\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEvent<HTMLElement>\n  ) => void\n  /**\n   *  Usefully for extending navigation behavior with `onKeyboardNavigation`.\n   *  Pay attention that `ref` is `null` on first render.\n   *\n   *  ```\n   *  onKeyboardNavigation={(e) => {\n   *    if (e.key === 'Right' || e.key === 'ArrowRight') {\n   *        return navigateRight()\n   *    }\n   *\n   *    ref.defaultKeyDownNavigationHandler(e)\n   *  }}\n   *  ```\n   *\n   * @since 11.5.0\n   */\n  defaultKeyDownNavigationHandler: React.KeyboardEventHandler\n}\n\nexport interface ItemProps {\n  /**\n   * @since 10.19.0\n   */\n  item: any\n  /**\n   * @since 10.19.0\n   */\n  selected?: boolean\n  /**\n   * @since 10.19.0\n   */\n  suggested?: boolean\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @a11y Focus will be restored to the trigger after after activating this item.\n   * Use `Dropdown restoreFocusOnHide` instead if all items return focus to the trigger once activated.\n   * @since 11.15.0\n   */\n  restoreFocus?: boolean\n}\n\nexport interface ItemWithDraggingProps extends ItemProps {\n  /**\n   * @since 10.19.0\n   */\n  droppableIn: string | string[]\n  /**\n   * @since 10.19.0\n   */\n  draggableId: string\n  /**\n   * @since 10.19.0\n   */\n  draggableIndex: number\n}\n\nexport interface AnchorItemProps\n  extends Omit<ItemProps, 'item'>,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'> {}\n\nexport type MenuItemProps = ItemProps | ItemWithDraggingProps | AnchorItemProps\n\nexport type MenuItemDefaultElement = 'div' | 'a'\n\n/**\n * @a11y When drag-and-drop is enabled, `children` should be a string so it\n * can be used for DnD announcements (exposed as `data-title`).\n */\nexport interface GroupProps {\n  /**\n   * @since 10.19.0\n   */\n  clickable?: boolean\n\n  /**\n   * @since 10.19.0\n   */\n  item?: any\n\n  /**\n   * @since 12.39.0\n   */\n  label?: string\n  /**\n   * @since 12.39.0\n   */\n  labelId?: string\n}\n\nexport interface OptionsProps {\n  /**\n   * @since 10.19.0\n   */\n  children?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  className?: string\n  /**\n   * @since 12.51.1\n   */\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>\n}\n\nexport interface MenuSearchProps\n  extends Omit<TypeaheadProps, 'onChange'>,\n    TypeaheadInputProps,\n    Props {\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @since 10.21.0\n   */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  /**\n   * Controls the search input value. When provided, the search input becomes\n   * a controlled component and the parent must manage the value state.\n   * @since 12.34.0\n   */\n  value?: string\n}\n\nexport interface HeaderProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  tabIndex?: number\n}\n\nexport interface DroppableProps {\n  /**\n   * @since 10.19.0\n   */\n  id: string\n  /**\n   * @since 10.19.0\n   */\n  children: React.ReactNode\n  /**\n   * @since 12.34.2\n   */\n  'aria-label'?: string\n  /**\n   * @since 12.34.2\n   */\n  'aria-labelledby'?: string\n  /**\n   * @since 12.34.2\n   */\n  role?: React.AriaRole\n  /**\n   * @since 12.34.2\n   */\n  'aria-multiselectable'?: boolean\n}\n\nexport interface FooterProps extends Omit<BoxProps, 'as'> {}\n\nexport interface MenuContext {\n  /**\n   * @since 11.5.0\n   */\n  a11yOptionsProps: {\n    role?: MenuRole\n    onKeyboardNavigation?: React.KeyboardEventHandler | null\n    tabIndex?: number\n    id?: string\n  }\n  /**\n   * @since 10.19.0\n   */\n  currentlyDroppableIn: string[]\n  /**\n   * @since 12.34.2\n   */\n  dndInstructionsId: string\n  /**\n   * @since 10.19.0\n   */\n  onHoverItem: (el?: HTMLDivElement) => void\n  /**\n   * @since 12.34.2\n   */\n  onFocusItem: (el?: HTMLDivElement) => void\n  /**\n   * @since 12.34.2\n   */\n  onBlurItem: (el?: HTMLDivElement) => void\n  /**\n   * @since 12.51.1\n   */\n  onMouseLeaveItems: () => void\n  /**\n   * @since 10.19.0\n   */\n  onScrollBottom: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void\n  /**\n   * @since 10.19.0\n   */\n  onSelect: (selection: Selection) => void\n  /**\n   * @since 11.3.0\n   */\n  role: MenuRole\n}\n\nexport interface ControlNavigationProps {\n  menuId?: MenuProps['id']\n}\n\nexport interface ControlNavigationReturn {\n  menuNavigationTriggerProps: {\n    'aria-activedescendant'?: string\n    'aria-controls'?: string\n    onKeyDown?: React.KeyboardEventHandler<Element>\n  }\n  menuProps: {\n    onChangeActiveDescendant?: React.Dispatch<\n      React.SetStateAction<string | undefined>\n    >\n    id: string\n  }\n}\n"],"mappings":"","ignoreList":[]}

package/dist/Modal/Modal.d.ts

@@ -24,10 +24,14 @@ declare function ModalState(props: RenderProps): React.JSX.Element;
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>> & {
     Body: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
     Container: React.ForwardRefExoticComponent<ModalContainerProps & React.RefAttributes<HTMLDivElement>>;
-    Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+        style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    }, {
         $compact?: boolean;
     }>> & string;
-    Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    Footer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+        style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    }> & string;
     FooterButtons: React.ForwardRefExoticComponent<ModalCloseableHeaderProps & React.RefAttributes<HTMLDivElement>>;
     FooterNotation: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & TypographyProps & React.RefAttributes<HTMLSpanElement>>;
     FooterSummary: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -39,8 +43,12 @@ export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.R
     Heading: (props: React.PropsWithChildren<HeadingProps & {
         level?: number;
     }>) => React.JSX.Element;
-    Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    Scrim: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+        style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    }> & string;
+    Scrim: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+        style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    }> & string;
     State: typeof ModalState;
     Section: React.ForwardRefExoticComponent<import("..").SectionProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/Modal/Modal.styles.d.ts

@@ -9,41 +9,67 @@ export declare const modalPixelWidths: {
     lg: number;
     xl: number;
 };
-export declare const StyledModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledModalButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledModal: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledModalButtons: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $compact: boolean;
     $placement: ModalPlacement;
     $width?: ModalWidth;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledModalBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledModalBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $compact: boolean;
     $isOverflowingY: boolean;
     $noSideSpacing: boolean;
 }>> & string;
-export declare const StyledModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $compact?: boolean;
 }>> & string;
-export declare const StyledModalFooterNotation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").HTMLAttributes<HTMLSpanElement> & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
+export declare const StyledModalFooterNotation: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").HTMLAttributes<HTMLSpanElement> & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $compact: boolean;
     $isBodyScrolled: boolean;
 }>> & string;
-export declare const StyledModalHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledModalHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $compact: boolean;
 }>> & string;
-export declare const StyledModalCancel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledModalScrim: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledModalWarningIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
+export declare const StyledModalCancel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledModalScrim: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledModalWarningIcon: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<{
     size?: import("@procore/core-icons/dist/Icon").IconSize;
 } & import("react").SVGAttributes<SVGElement> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<{
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string & Omit<import("react").ForwardRefExoticComponent<{
     size?: import("@procore/core-icons/dist/Icon").IconSize;
 } & import("react").SVGAttributes<SVGElement> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledModalFooterSummary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledModalFooterSummary: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/dist/Modal/Modal.styles.js

@@ -33,15 +33,15 @@ var screenWidthPixelBreakpoints = {
 };
 export var StyledModal = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModal",
-  componentId: "core-12_53_1__sc-1ijdug2-0"
+  componentId: "core-12_53_2__sc-1ijdug2-0"
 })(["display:flex;height:100vh;position:absolute;opacity:0;transition:0.3s opacity ease;width:100vw;z-index:0;pointer-events:none;&.", "{opacity:1;pointer-events:auto;}&.", "{opacity:0;pointer-events:none;}"], fadeInClassName, fadeOutClassName);
 export var StyledModalButtons = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalButtons",
-  componentId: "core-12_53_1__sc-1ijdug2-1"
+  componentId: "core-12_53_2__sc-1ijdug2-1"
 })(["display:flex;flex:0 0 auto;margin-left:", "px;> * + *{margin-left:", "px;}"], spacing.lg, spacing.sm);
 export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledModalContainer",
-  componentId: "core-12_53_1__sc-1ijdug2-2"
+  componentId: "core-12_53_2__sc-1ijdug2-2"
 })(["display:flex;flex-direction:row;position:absolute;z-index:2;", " ", " ", ""], function (_ref) {
   var $compact = _ref.$compact;
   if (!$compact) {
@@ -65,11 +65,11 @@ export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
 });
 export var StyledModalFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalFooter",
-  componentId: "core-12_53_1__sc-1ijdug2-3"
+  componentId: "core-12_53_2__sc-1ijdug2-3"
 })(["align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;padding:", "px;"], spacing.lg);
 export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_53_1__sc-1ijdug2-4"
+  componentId: "core-12_53_2__sc-1ijdug2-4"
 })(["", " &:focus-visible{", "}box-sizing:border-box;color:", ";display:flex;flex-direction:column;overflow:auto;", " ", " > ", "{padding-left:0;padding-right:0;&:first-child > ", "{padding-top:0;}}> ", "{margin-bottom:", "px;}", ""], getTypographyIntent('body'), getFocusInset(), colors.gray15, function (_ref4) {
   var $noSideSpacing = _ref4.$noSideSpacing;
   return css(["padding:", "px ", "px;"], spacing.lg, $noSideSpacing ? 0 : spacing.lg);
@@ -85,7 +85,7 @@ export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalContent",
-  componentId: "core-12_53_1__sc-1ijdug2-5"
+  componentId: "core-12_53_2__sc-1ijdug2-5"
 })(["display:flex;flex-direction:column;max-height:90vh;overflow:hidden;width:100%;", ""], function (_ref7) {
   var _ref7$$compact = _ref7.$compact,
     $compact = _ref7$$compact === void 0 ? false : _ref7$$compact;
@@ -96,11 +96,11 @@ export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalFooterNotation = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledModalFooterNotation",
-  componentId: "core-12_53_1__sc-1ijdug2-6"
+  componentId: "core-12_53_2__sc-1ijdug2-6"
 })(["flex-grow:1;"]);
 export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalHeader",
-  componentId: "core-12_53_1__sc-1ijdug2-7"
+  componentId: "core-12_53_2__sc-1ijdug2-7"
 })(["align-items:flex-start;color:", ";display:flex;flex:0 0 auto;position:relative;", " padding:", "px"], colors.gray10, function (_ref8) {
   var $compact = _ref8.$compact,
     $isBodyScrolled = _ref8.$isBodyScrolled;
@@ -111,7 +111,7 @@ export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
 }, spacing.lg);
 export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalHeading",
-  componentId: "core-12_53_1__sc-1ijdug2-8"
+  componentId: "core-12_53_2__sc-1ijdug2-8"
 })(["", " align-items:center;display:flex;flex:1 1 auto;min-height:36px;padding-right:", "px;", ""], function (_ref9) {
   var $compact = _ref9.$compact;
   return getTypographyIntent($compact ? 'h3' : 'h2');
@@ -127,18 +127,18 @@ export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalCancel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalCancel",
-  componentId: "core-12_53_1__sc-1ijdug2-9"
+  componentId: "core-12_53_2__sc-1ijdug2-9"
 })(["flex:0 0 auto;"]);
 export var StyledModalScrim = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalScrim",
-  componentId: "core-12_53_1__sc-1ijdug2-10"
+  componentId: "core-12_53_2__sc-1ijdug2-10"
 })(["background:hsla(200,8%,10%,0.6);height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:1;"]);
 export var StyledModalWarningIcon = /*#__PURE__*/styled(Warning).withConfig({
   displayName: "StyledModalWarningIcon",
-  componentId: "core-12_53_1__sc-1ijdug2-11"
+  componentId: "core-12_53_2__sc-1ijdug2-11"
 })(["color:", ";margin-right:", "px;"], colors.yellow40, spacing.sm);
 export var StyledModalFooterSummary = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalFooterSummary",
-  componentId: "core-12_53_1__sc-1ijdug2-12"
+  componentId: "core-12_53_2__sc-1ijdug2-12"
 })(["", " background-color:", ";border-bottom:1px solid ", ";border-top:1px solid ", ";color:", ";flex:1 1 100%;font-style:italic;margin:-", "px -", "px ", "px;padding:", "px;"], getTypographyIntent('small'), colors.gray98, colors.gray85, colors.gray85, colors.gray15, spacing.lg, spacing.lg, spacing.lg, spacing.lg);
 //# sourceMappingURL=Modal.styles.js.map

package/dist/MultiSelect/MultiSelect.styles.d.ts

@@ -1,22 +1,44 @@
-export declare const StyledMultiSelectInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMultiSelectValues: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMultiSelectToken: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMultiSelectSearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+export declare const StyledMultiSelectInner: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledMultiSelectValues: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledMultiSelectToken: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledMultiSelectSearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isNavigatingTokens?: boolean;
 }>> & string;
-export declare const StyledMultiSelectSearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMultiSelectSearchIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMultiSelectClearIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+export declare const StyledMultiSelectSearch: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledMultiSelectSearchIcon: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledMultiSelectClearIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<Omit<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $show?: boolean;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledMultiSelectArrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMultiSelectArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMultiSelectMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledMultiSelectArrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledMultiSelectArrow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledMultiSelectMenu: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledMultiSelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$error" | "$disabled" | "$loading" | "$block" | "$open" | "$placeholder" | "$hasClearIcon" | "$showClearIcon"> & {
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMultiSelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $block: boolean;
     $disabled: boolean;
     $error: boolean;
@@ -25,8 +47,15 @@ export declare const StyledMultiSelectButton: import("styled-components/dist/typ
     $placeholder?: boolean;
     $hasClearIcon?: boolean;
     $showClearIcon?: boolean;
+}>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
 }, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
 }, {
     $emptyValue: boolean;
 }>> & string;

package/dist/MultiSelect/MultiSelect.styles.js

@@ -8,34 +8,34 @@ import { getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledMultiSelectInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectInner",
-  componentId: "core-12_53_1__sc-s9ym9q-0"
+  componentId: "core-12_53_2__sc-s9ym9q-0"
 })(["display:flex;flex-wrap:wrap;margin-bottom:2px;margin-left:", "px;margin-right:", "px;margin-top:2px;min-width:0;width:100%;"], spacing.md, spacing.xs);
 export var StyledMultiSelectValues = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectValues",
-  componentId: "core-12_53_1__sc-s9ym9q-1"
+  componentId: "core-12_53_2__sc-s9ym9q-1"
 })(["display:contents;"]);
 export var StyledMultiSelectToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectToken",
-  componentId: "core-12_53_1__sc-s9ym9q-2"
+  componentId: "core-12_53_2__sc-s9ym9q-2"
 })(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:0 1 auto;> div{max-width:178px;width:100%;}"], spacing.xs);
 export var StyledMultiSelectSearchInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledMultiSelectSearchInput",
-  componentId: "core-12_53_1__sc-s9ym9q-3"
+  componentId: "core-12_53_2__sc-s9ym9q-3"
 })(["background-color:transparent;border-width:0;font-family:inherit;padding:0;height:24px;width:100%;", " ", " &::-ms-clear{display:none;}&:focus{box-shadow:none;outline:none;}&::placeholder{color:", ";}"], getTypographyIntent('body'), function (_ref) {
   var $isNavigatingTokens = _ref.$isNavigatingTokens;
   return $isNavigatingTokens && css(["color:transparent;"]);
 }, colors.gray45);
 export var StyledMultiSelectSearch = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectSearch",
-  componentId: "core-12_53_1__sc-s9ym9q-4"
+  componentId: "core-12_53_2__sc-s9ym9q-4"
 })(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:1;max-width:100%;min-width:24px;"], spacing.xs);
 export var StyledMultiSelectSearchIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectSearchIcon",
-  componentId: "core-12_53_1__sc-s9ym9q-5"
+  componentId: "core-12_53_2__sc-s9ym9q-5"
 })(["align-items:center;align-self:flex-start;display:flex;height:34px;justify-content:flex-end;margin-left:", "px;margin-right:", "px;min-width:40px;width:40px;"], spacing.xs, spacing.md);
 export var StyledMultiSelectClearIcon = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledMultiSelectClearIcon",
-  componentId: "core-12_53_1__sc-s9ym9q-6"
+  componentId: "core-12_53_2__sc-s9ym9q-6"
 })(["", " ", "{pointer-events:none;}"], function (_ref2) {
   var $show = _ref2.$show;
   return css(["opacity:", ";"], $show ? 1 : 0);
@@ -45,7 +45,7 @@ export var StyledMultiSelectArrow = StyledSelectArrow;
 export var StyledMultiSelectMenu = StyledSelectMenu;
 export var StyledMultiSelectButton = /*#__PURE__*/styled(StyledSelectButton).withConfig({
   displayName: "StyledMultiSelectButton",
-  componentId: "core-12_53_1__sc-s9ym9q-7"
+  componentId: "core-12_53_2__sc-s9ym9q-7"
 })(["height:auto;padding:0;white-space:normal;&:focus-within{", "}", ""], getFocus(), function (_ref3) {
   var $emptyValue = _ref3.$emptyValue;
   return $emptyValue && css(["", "{cursor:pointer;}"], StyledMultiSelectSearchInput);

package/dist/NextMenu/NextMenu.styles.d.ts

@@ -1,6 +1,12 @@
 export declare const optionMinHeight = 32;
 /** Large enough to fit one group and one item */
 export declare const defaultMenuHeight = 64;
-export declare const StyledOptions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledOptions: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledGroup: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/dist/NextMenu/NextMenu.styles.js

@@ -6,14 +6,14 @@ export var optionMinHeight = 32;
 export var defaultMenuHeight = 64;
 export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledOptions",
-  componentId: "core-12_53_1__sc-3o6zya-0"
+  componentId: "core-12_53_2__sc-3o6zya-0"
 })([""]);
 export var StyledItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledItem",
-  componentId: "core-12_53_1__sc-3o6zya-1"
+  componentId: "core-12_53_2__sc-3o6zya-1"
 })(["", ";padding:", "px ", "px;cursor:pointer;list-style-type:none;"], getTypographyIntent('body'), spacing.xs, spacing.md);
 export var StyledGroup = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGroup",
-  componentId: "core-12_53_1__sc-3o6zya-2"
+  componentId: "core-12_53_2__sc-3o6zya-2"
 })(["", ";padding:", "px ", "px ", "px;font-weight:", ";background:white;list-style-type:none;"], getTypographyIntent('body'), spacing.md, spacing.md, spacing.xs, typographyWeights.semibold);
 //# sourceMappingURL=NextMenu.styles.js.map