@redis-ui/components 39.12.0 → 41.3.2

package/dist/Typography/components/Heading/Heading.cjs

@@ -3,28 +3,31 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const useEllipsisTooltip = require("../../hooks/useEllipsisTooltip.cjs");
 const Heading_style = require("./Heading.style.cjs");
-const tag = {
-  XXL: "h1",
-  XL: "h2",
-  L: "h3",
-  M: "h4",
-  S: "h5",
-  XS: "h6"
+const level = {
+  XXL: "1",
+  XL: "2",
+  L: "3",
+  M: "4",
+  S: "5",
+  XS: "6"
 };
+const getHeadingLevel = (size, component) => typeof component === "string" && !Number.isNaN(+component[1]) && +component[1] && component[1] || level[size];
 const Heading = ({
   size = "XL",
   ellipsis = false,
   color,
+  variant,
+  component = "div",
   ...restProps
-}) => {
-  const etProps = useEllipsisTooltip.useEllipsisTooltip(restProps);
-  return jsxRuntime.jsxRuntimeExports.jsx(Heading_style.Heading, {
-    as: tag[size],
-    "$ellipsis": ellipsis,
-    "$size": size,
-    "$color": color,
-    ...restProps,
-    ...etProps
-  });
-};
+}) => jsxRuntime.jsxRuntimeExports.jsx(Heading_style.Heading, {
+  as: component,
+  "$ellipsis": ellipsis,
+  "$size": size,
+  "$color": color,
+  "$variant": variant,
+  "data-role": "heading",
+  "data-heading-level": getHeadingLevel(size, component),
+  ...restProps,
+  ...useEllipsisTooltip.useEllipsisTooltip(restProps)
+});
 exports.default = Heading;

package/dist/Typography/components/Heading/Heading.d.ts

@@ -1,3 +1,3 @@
-import { HeadingProps } from './Heading.types';
-declare const Heading: ({ size, ellipsis, color, ...restProps }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+import { TypographyHeadingProps } from './Heading.types';
+declare const Heading: ({ size, ellipsis, color, variant, component, ...restProps }: TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
 export default Heading;

package/dist/Typography/components/Heading/Heading.js

@@ -1,30 +1,33 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { useEllipsisTooltip } from "../../hooks/useEllipsisTooltip.js";
 import { Heading as Heading$1 } from "./Heading.style.js";
-const tag = {
-  XXL: "h1",
-  XL: "h2",
-  L: "h3",
-  M: "h4",
-  S: "h5",
-  XS: "h6"
+const level = {
+  XXL: "1",
+  XL: "2",
+  L: "3",
+  M: "4",
+  S: "5",
+  XS: "6"
 };
+const getHeadingLevel = (size, component) => typeof component === "string" && !Number.isNaN(+component[1]) && +component[1] && component[1] || level[size];
 const Heading = ({
   size = "XL",
   ellipsis = false,
   color,
+  variant,
+  component = "div",
   ...restProps
-}) => {
-  const etProps = useEllipsisTooltip(restProps);
-  return jsxRuntimeExports.jsx(Heading$1, {
-    as: tag[size],
-    "$ellipsis": ellipsis,
-    "$size": size,
-    "$color": color,
-    ...restProps,
-    ...etProps
-  });
-};
+}) => jsxRuntimeExports.jsx(Heading$1, {
+  as: component,
+  "$ellipsis": ellipsis,
+  "$size": size,
+  "$color": color,
+  "$variant": variant,
+  "data-role": "heading",
+  "data-heading-level": getHeadingLevel(size, component),
+  ...restProps,
+  ...useEllipsisTooltip(restProps)
+});
 export {
   Heading as default
 };

package/dist/Typography/components/Heading/Heading.style.cjs

@@ -10,23 +10,18 @@ const Heading = _styled__default.default.span.withConfig({
 })(["line-height:1.2;margin-block:0;", ""], ({
   $size,
   $ellipsis,
-  $color
+  $color,
+  $variant
 }) => {
   const theme = redisUiStyles.useTheme();
   const headingTheme = theme.components.typography.heading;
   const sizeTheme = headingTheme.sizes[$size];
-  const getColorValue = (color) => {
-    if (!color) return "inherit";
-    if (color === "primary") return theme.components.typography.colors.primary;
-    if (color === "secondary") return theme.components.typography.colors.secondary;
-    return "inherit";
-  };
   return _styled.css`
-      font-weight: ${sizeTheme.fontWeight};
+      font-weight: ${$variant && headingTheme.fontWeight[$variant] || sizeTheme.fontWeight};
       font-size: ${sizeTheme.fontSize};
       font-family: ${headingTheme.fontFamily};
       margin: ${sizeTheme.margin || 0};
-      color: ${getColorValue($color)};
+      color: ${$color && theme.components.typography.colors[$color] || "unset"};
 
       ${$ellipsis && _styled.css`
         overflow: hidden;

package/dist/Typography/components/Heading/Heading.style.d.ts

@@ -1,6 +1,8 @@
-import { ColorType, TShirtSizes } from './Heading.types';
+import { TypographyHeadingSize, TypographyHeadingVariant } from './Heading.types';
+import { TypographyColor } from '../../Typography.types';
 export declare const Heading: import("styled-components").StyledComponent<"span", any, {
-    $size: TShirtSizes;
+    $size: TypographyHeadingSize;
     $ellipsis: boolean;
-    $color?: ColorType | undefined;
+    $color?: TypographyColor | undefined;
+    $variant?: TypographyHeadingVariant | undefined;
 }, never>;

package/dist/Typography/components/Heading/Heading.style.js

@@ -6,23 +6,18 @@ const Heading = _styled.span.withConfig({
 })(["line-height:1.2;margin-block:0;", ""], ({
   $size,
   $ellipsis,
-  $color
+  $color,
+  $variant
 }) => {
   const theme = useTheme();
   const headingTheme = theme.components.typography.heading;
   const sizeTheme = headingTheme.sizes[$size];
-  const getColorValue = (color) => {
-    if (!color) return "inherit";
-    if (color === "primary") return theme.components.typography.colors.primary;
-    if (color === "secondary") return theme.components.typography.colors.secondary;
-    return "inherit";
-  };
   return css`
-      font-weight: ${sizeTheme.fontWeight};
+      font-weight: ${$variant && headingTheme.fontWeight[$variant] || sizeTheme.fontWeight};
       font-size: ${sizeTheme.fontSize};
       font-family: ${headingTheme.fontFamily};
       margin: ${sizeTheme.margin || 0};
-      color: ${getColorValue($color)};
+      color: ${$color && theme.components.typography.colors[$color] || "unset"};
 
       ${$ellipsis && css`
         overflow: hidden;

package/dist/Typography/components/Heading/Heading.types.d.ts

@@ -1,10 +1,14 @@
 import React, { HTMLAttributes } from 'react';
 import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
-export type TShirtSizes = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
-export type ColorType = 'primary' | 'secondary';
-export interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
-    size?: TShirtSizes;
+import { TypographyColor } from '../../Typography.types';
+export type TypographyHeadingSize = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+export type TypographyHeadingVariant = 'bold' | 'semiBold';
+export type TypographyHeadingComponent = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface TypographyHeadingProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
+    size?: TypographyHeadingSize;
     ellipsis?: boolean;
     children: React.ReactNode;
-    color?: ColorType;
+    color?: TypographyColor;
+    variant?: TypographyHeadingVariant;
+    component?: TypographyHeadingComponent;
 }

package/dist/Typography/index.d.ts

@@ -1,2 +1,6 @@
 export { default as Typography } from './Typography';
 export * from './hooks/useEllipsisTooltip';
+export * from './components/Body/Body.types';
+export * from './components/Heading/Heading.types';
+export * from './components/Code/Code.types';
+export * from './Typography.types';

package/dist/index.cjs

@@ -53,9 +53,11 @@ const generateId = require("./Helpers/generateId.cjs");
 const debounce = require("./Helpers/debounce.cjs");
 const SharedId_context = require("./Helpers/contexts/SharedId.context.cjs");
 const PrimitiveContextState = require("./Helpers/contexts/PrimitiveContextState.cjs");
+const NullableContext = require("./Helpers/contexts/NullableContext.cjs");
 const SelfContained = require("./Helpers/SelfContained.cjs");
 const RestylableElement = require("./Helpers/RestylableElement.cjs");
 const Popper_context = require("./Helpers/contexts/Popper/Popper.context.cjs");
+const useScrollable = require("./Helpers/hooks/useScrollable.cjs");
 const Input = require("./Inputs/Input/Input.cjs");
 const NumericInput = require("./Inputs/NumericInput/NumericInput.cjs");
 const PasswordInput = require("./Inputs/PasswordInput/PasswordInput.cjs");
@@ -77,8 +79,11 @@ const MoreInfoIcon = require("./MoreInfoIcon/MoreInfoIcon.cjs");
 const MultiSelect = require("./MultiSelect/MultiSelect.cjs");
 const Context = require("./MultiSelect/components/Context/Context.cjs");
 const Overflow = require("./Overflow/Overflow.cjs");
+const Pagination_context = require("./Pagination/Pagination.context.cjs");
+const Pagination = require("./Pagination/Pagination.cjs");
 const Popover = require("./Popover/Popover.cjs");
 const RadioGroup = require("./RadioGroup/RadioGroup.cjs");
+const ScreenReaderAnnounce = require("./ScreenReaderAnnounce/ScreenReaderAnnounce.cjs");
 const SearchBar = require("./SearchBar/SearchBar.cjs");
 const Section = require("./Section/Section.cjs");
 const CategoryValueList = require("./Section/components/Header/components/CategoryValueList/CategoryValueList.cjs");
@@ -144,10 +149,12 @@ exports.Drawer = Drawer.default;
 exports.Filters = Filters.default;
 exports.childrenToString = react_utils.childrenToString;
 exports.combineHandlers = react_utils.combineHandlers;
+exports.forwardRefWithGenerics = react_utils.forwardRefWithGenerics;
 exports.handlePreventDefault = react_utils.handlePreventDefault;
 exports.handleStopPropagation = react_utils.handleStopPropagation;
 exports.isFragmentElement = react_utils.isFragmentElement;
 exports.isTextualNode = react_utils.isTextualNode;
+exports.memoWithGenerics = react_utils.memoWithGenerics;
 exports.generateId = generateId.generateId;
 exports.useGeneratedId = generateId.useGeneratedId;
 exports.debounce = debounce.debounce;
@@ -155,10 +162,12 @@ exports.SharedIdProvider = SharedId_context.SharedIdProvider;
 exports.SharedIdTransProvider = SharedId_context.SharedIdTransProvider;
 exports.useSharedId = SharedId_context.useSharedId;
 exports.createPrimitiveContextState = PrimitiveContextState.createPrimitiveContextState;
+exports.createNullableContext = NullableContext.createNullableContext;
 exports.SelfContained = SelfContained.SelfContained;
 exports.RestylableElement = RestylableElement.RestylableElement;
 exports.PopperProvider = Popper_context.PopperProvider;
 exports.usePopperContext = Popper_context.usePopperContext;
+exports.useScrollable = useScrollable.useScrollable;
 exports.Input = Input.default;
 exports.NumericInput = NumericInput.default;
 exports.PasswordInput = PasswordInput.default;
@@ -191,8 +200,11 @@ exports.MoreInfoIcon = MoreInfoIcon.default;
 exports.MultiSelect = MultiSelect.default;
 exports.useMultiSelectContext = Context.useMultiSelectContext;
 exports.Overflow = Overflow.Overflow;
+exports.usePaginationContext = Pagination_context.usePaginationContext;
+exports.Pagination = Pagination.Pagination;
 exports.Popover = Popover.default;
 exports.RadioGroup = RadioGroup.default;
+exports.ScreenReaderAnnounce = ScreenReaderAnnounce.ScreenReaderAnnounce;
 exports.SearchBar = SearchBar.default;
 exports.Section = Section.default;
 exports.CategoryValueList = CategoryValueList.default;
@@ -201,7 +213,7 @@ exports.useSelectContext = Context$1.useSelectContext;
 exports.SideBar = SideBar.default;
 exports.Skeleton = Skeleton.default;
 exports.Stepper = Stepper.default;
-exports.StepState = Step_types.StepState;
+exports.StepperStepState = Step_types.StepperStepState;
 exports.Switch = Switch.default;
 exports.TableHeading = TableHeading.default;
 exports.Tabs = Tabs.default;

package/dist/index.d.ts

@@ -25,8 +25,10 @@ export * from './Modal';
 export * from './MoreInfoIcon';
 export * from './MultiSelect';
 export * from './Overflow';
+export * from './Pagination';
 export * from './Popover';
 export * from './RadioGroup';
+export * from './ScreenReaderAnnounce';
 export * from './SearchBar';
 export * from './Section';
 export * from './Select';

package/dist/index.js

@@ -46,14 +46,16 @@ import { default as default20 } from "./DatePicker/DatePicker.js";
 import { default as default21 } from "./DatePicker/RangeDatePicker.js";
 import { default as default22 } from "./Drawer/Drawer.js";
 import { default as default23 } from "./Filters/Filters.js";
-import { childrenToString, combineHandlers, handlePreventDefault, handleStopPropagation, isFragmentElement, isTextualNode } from "./Helpers/react.utils.js";
+import { childrenToString, combineHandlers, forwardRefWithGenerics, handlePreventDefault, handleStopPropagation, isFragmentElement, isTextualNode, memoWithGenerics } from "./Helpers/react.utils.js";
 import { generateId, useGeneratedId } from "./Helpers/generateId.js";
 import { debounce } from "./Helpers/debounce.js";
 import { SharedIdProvider, SharedIdTransProvider, useSharedId } from "./Helpers/contexts/SharedId.context.js";
 import { createPrimitiveContextState } from "./Helpers/contexts/PrimitiveContextState.js";
+import { createNullableContext } from "./Helpers/contexts/NullableContext.js";
 import { SelfContained } from "./Helpers/SelfContained.js";
 import { RestylableElement } from "./Helpers/RestylableElement.js";
 import { PopperProvider, usePopperContext } from "./Helpers/contexts/Popper/Popper.context.js";
+import { useScrollable } from "./Helpers/hooks/useScrollable.js";
 import { default as default24 } from "./Inputs/Input/Input.js";
 import { default as default25 } from "./Inputs/NumericInput/NumericInput.js";
 import { default as default26 } from "./Inputs/PasswordInput/PasswordInput.js";
@@ -75,8 +77,11 @@ import { default as default36 } from "./MoreInfoIcon/MoreInfoIcon.js";
 import { default as default37 } from "./MultiSelect/MultiSelect.js";
 import { useMultiSelectContext } from "./MultiSelect/components/Context/Context.js";
 import { Overflow } from "./Overflow/Overflow.js";
+import { usePaginationContext } from "./Pagination/Pagination.context.js";
+import { Pagination } from "./Pagination/Pagination.js";
 import { default as default38 } from "./Popover/Popover.js";
 import { default as default39 } from "./RadioGroup/RadioGroup.js";
+import { ScreenReaderAnnounce } from "./ScreenReaderAnnounce/ScreenReaderAnnounce.js";
 import { default as default40 } from "./SearchBar/SearchBar.js";
 import { default as default41 } from "./Section/Section.js";
 import { default as default42 } from "./Section/components/Header/components/CategoryValueList/CategoryValueList.js";
@@ -85,7 +90,7 @@ import { useSelectContext } from "./Select/components/Context/Context.js";
 import { default as default44 } from "./SideBar/SideBar.js";
 import { default as default45 } from "./Skeleton/Skeleton.js";
 import { default as default46 } from "./Stepper/Stepper.js";
-import { StepState } from "./Stepper/components/Step/Step.types.js";
+import { StepperStepState } from "./Stepper/components/Step/Step.types.js";
 import { default as default47 } from "./Switch/Switch.js";
 import { default as default48 } from "./TableHeading/TableHeading.js";
 import { default as default49 } from "./Tabs/Tabs.js";
@@ -149,6 +154,7 @@ export {
   default37 as MultiSelect,
   default25 as NumericInput,
   Overflow,
+  Pagination,
   default26 as PasswordInput,
   default38 as Popover,
   PopperProvider,
@@ -159,6 +165,7 @@ export {
   default39 as RadioGroup,
   default21 as RangeDatePicker,
   RestylableElement,
+  ScreenReaderAnnounce,
   default40 as SearchBar,
   default27 as SearchInput,
   default41 as Section,
@@ -168,8 +175,8 @@ export {
   SharedIdTransProvider,
   default44 as SideBar,
   default45 as Skeleton,
-  StepState,
   default46 as Stepper,
+  StepperStepState,
   default47 as Switch,
   default48 as TableHeading,
   default49 as Tabs,
@@ -193,8 +200,10 @@ export {
   buttonWithIconVariants,
   childrenToString,
   combineHandlers,
+  createNullableContext,
   createPrimitiveContextState,
   debounce,
+  forwardRefWithGenerics,
   generateId,
   getClosestDivisibleNumber,
   handlePreventDefault,
@@ -202,6 +211,7 @@ export {
   iconButtonSizes,
   isFragmentElement,
   isTextualNode,
+  memoWithGenerics,
   textButtonVariants,
   toast,
   useEllipsisTooltip,
@@ -213,7 +223,9 @@ export {
   useInputValueApi,
   useInputValueProps,
   useMultiSelectContext,
+  usePaginationContext,
   usePopperContext,
+  useScrollable,
   useSelectContext,
   useSharedId,
   useToastParams

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "39.12.0",
+  "version": "41.3.2",
   "type": "module",
   "sideEffects": false,
   "publishConfig": {
@@ -27,8 +27,8 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@redis-ui/icons": "^6.1.0",
-    "@redis-ui/styles": "^12.7.0",
+    "@redis-ui/icons": "^6.3.12",
+    "@redis-ui/styles": "^13.1.7",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0"

package/dist/Section/components/Header/components/ActionButton/ActionButton.cjs

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
-const TextButton = require("../../../../../Button/TextButton/TextButton.cjs");
-const ActionButton = ({
-  onClick,
-  children,
-  ...restProps
-}) => {
-  if (!onClick || !children) {
-    return null;
-  }
-  const handleActionButtonClick = (e) => {
-    e.stopPropagation();
-    onClick(e);
-  };
-  return jsxRuntime.jsxRuntimeExports.jsx(TextButton.default, {
-    onClick: handleActionButtonClick,
-    ...restProps,
-    children
-  });
-};
-exports.ActionButton = ActionButton;

package/dist/Section/components/Header/components/ActionButton/ActionButton.js

@@ -1,23 +0,0 @@
-import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import TextButton from "../../../../../Button/TextButton/TextButton.js";
-const ActionButton = ({
-  onClick,
-  children,
-  ...restProps
-}) => {
-  if (!onClick || !children) {
-    return null;
-  }
-  const handleActionButtonClick = (e) => {
-    e.stopPropagation();
-    onClick(e);
-  };
-  return jsxRuntimeExports.jsx(TextButton, {
-    onClick: handleActionButtonClick,
-    ...restProps,
-    children
-  });
-};
-export {
-  ActionButton
-};

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.cjs

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
-const CollapseIndicator_style = require("./CollapseIndicator.style.cjs");
-const Section_context = require("../../../../Section.context.cjs");
-const CollapseIndicator = (props) => {
-  const {
-    collapsible
-  } = Section_context.useSectionContext();
-  if (collapsible) {
-    return jsxRuntime.jsxRuntimeExports.jsx(CollapseIndicator_style.CollapseIcon, {
-      size: "M",
-      "aria-hidden": true,
-      ...props
-    });
-  }
-  return null;
-};
-exports.CollapseIndicator = CollapseIndicator;

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.d.ts

@@ -1,2 +0,0 @@
-import { SectionCollapseIndicatorProps } from './CollapseIndicator.types';
-export declare const CollapseIndicator: (props: SectionCollapseIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.js

@@ -1,19 +0,0 @@
-import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import { CollapseIcon } from "./CollapseIndicator.style.js";
-import { useSectionContext } from "../../../../Section.context.js";
-const CollapseIndicator = (props) => {
-  const {
-    collapsible
-  } = useSectionContext();
-  if (collapsible) {
-    return jsxRuntimeExports.jsx(CollapseIcon, {
-      size: "M",
-      "aria-hidden": true,
-      ...props
-    });
-  }
-  return null;
-};
-export {
-  CollapseIndicator
-};

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("styled-components");
-const redisUiIcons = require("@redislabsdev/redis-ui-icons");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const CollapseIcon = _styled__default.default(redisUiIcons.ChevronDownIcon).withConfig({
-  displayName: "CollapseIndicatorstyle__CollapseIcon",
-  componentId: "RedisUI__sc-i5i8uh-0"
-})(["transition:transform 0.1s;"]);
-exports.CollapseIcon = CollapseIcon;

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.d.ts

@@ -1 +0,0 @@
-export declare const CollapseIcon: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.js

@@ -1,9 +0,0 @@
-import _styled from "styled-components";
-import { ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
-const CollapseIcon = _styled(ChevronDownIcon).withConfig({
-  displayName: "CollapseIndicatorstyle__CollapseIcon",
-  componentId: "RedisUI__sc-i5i8uh-0"
-})(["transition:transform 0.1s;"]);
-export {
-  CollapseIcon
-};

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.types.d.ts

@@ -1,2 +0,0 @@
-import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons/monochrome';
-export type SectionCollapseIndicatorProps = MonochromeIconProps;

package/dist/Stepper/Stepper.style.d.ts

@@ -1 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;