@redis-ui/components 39.12.0 → 41.3.2

package/dist/Pagination/components/PageSizeSelect.cjs

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const Pagination_context = require("../Pagination.context.cjs");
+const Pagination_style = require("../Pagination.style.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+const PageSizeSelect = ({
+  pageSizes = DEFAULT_PAGE_SIZES,
+  ...restProps
+}) => {
+  const {
+    pageSizeSelectorId,
+    pageSize,
+    onPageSizeChange,
+    getCanSelectPageSize
+  } = Pagination_context.usePaginationContext();
+  if (!onPageSizeChange) {
+    console.debug("To use PageSizeSelect you need to define onPageSizeChange");
+    return null;
+  }
+  const sizes = (pageSizes.includes(pageSize) ? pageSizes : [...pageSizes, pageSize]).sort((a, b) => a - b);
+  return jsxRuntime.jsxRuntimeExports.jsx(Pagination_style.Select, {
+    id: pageSizeSelectorId,
+    ...restProps,
+    value: pageSize.toString(),
+    onChange: (value) => onPageSizeChange(+value),
+    disabled: getCanSelectPageSize && !getCanSelectPageSize(),
+    options: sizes.map(String).map((value) => ({
+      value
+    }))
+  });
+};
+const PageSizeSelectLabel = ({
+  children,
+  ...restProps
+}) => {
+  const {
+    pageSizeSelectorId,
+    onPageSizeChange
+  } = Pagination_context.usePaginationContext();
+  if (!onPageSizeChange) return null;
+  return jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+    component: "span",
+    size: "auto",
+    ellipsis: true,
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Pagination_style.Label, {
+      htmlFor: pageSizeSelectorId,
+      children
+    })
+  });
+};
+PageSizeSelect.Label = PageSizeSelectLabel;
+exports.PageSizeSelect = PageSizeSelect;

package/dist/Pagination/components/PageSizeSelect.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { SelectProps } from '../../Select';
+import { Typography } from '../../Typography';
+export type PaginationPageSizeSelectProps = {
+    pageSizes?: number[];
+} & Omit<SelectProps, 'value' | 'onChange' | 'disabled' | 'options'>;
+export declare const PageSizeSelect: {
+    ({ pageSizes, ...restProps }: PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
+    Label: ({ children, ...restProps }: PageSizeSelectLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+type PageSizeSelectLabelProps = ComponentProps<typeof Typography.Body>;
+export {};

package/dist/Pagination/components/PageSizeSelect.js

@@ -0,0 +1,55 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { usePaginationContext } from "../Pagination.context.js";
+import { Select, Label } from "../Pagination.style.js";
+import Typography from "../../Typography/Typography.js";
+const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+const PageSizeSelect = ({
+  pageSizes = DEFAULT_PAGE_SIZES,
+  ...restProps
+}) => {
+  const {
+    pageSizeSelectorId,
+    pageSize,
+    onPageSizeChange,
+    getCanSelectPageSize
+  } = usePaginationContext();
+  if (!onPageSizeChange) {
+    console.debug("To use PageSizeSelect you need to define onPageSizeChange");
+    return null;
+  }
+  const sizes = (pageSizes.includes(pageSize) ? pageSizes : [...pageSizes, pageSize]).sort((a, b) => a - b);
+  return jsxRuntimeExports.jsx(Select, {
+    id: pageSizeSelectorId,
+    ...restProps,
+    value: pageSize.toString(),
+    onChange: (value) => onPageSizeChange(+value),
+    disabled: getCanSelectPageSize && !getCanSelectPageSize(),
+    options: sizes.map(String).map((value) => ({
+      value
+    }))
+  });
+};
+const PageSizeSelectLabel = ({
+  children,
+  ...restProps
+}) => {
+  const {
+    pageSizeSelectorId,
+    onPageSizeChange
+  } = usePaginationContext();
+  if (!onPageSizeChange) return null;
+  return jsxRuntimeExports.jsx(Typography.Body, {
+    component: "span",
+    size: "auto",
+    ellipsis: true,
+    ...restProps,
+    children: jsxRuntimeExports.jsx(Label, {
+      htmlFor: pageSizeSelectorId,
+      children
+    })
+  });
+};
+PageSizeSelect.Label = PageSizeSelectLabel;
+export {
+  PageSizeSelect
+};

package/dist/Pagination/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Pagination';
+export * from './Pagination.types';
+export { usePaginationContext } from './Pagination.context';
+export type { PaginationInfoLabelProps } from './components/InfoLabel';
+export type { PaginationPageSelectProps } from './components/PageSelect';
+export type { PaginationPageSizeSelectProps } from './components/PageSizeSelect';
+export type { PaginationNavigationButtonProps } from './components/NavigationButton';

package/dist/Popover/Popover.d.ts

@@ -5,15 +5,15 @@ declare const Popover: (({ children, defaultOpen, visible, onVisibilityChange, o
     Trigger: ({ withButton, ...restProps }: import("./components/Trigger/Trigger.types").PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
     Content: (({ title, text, actionButtonText, actionButtonHandler, link, linkText, windowBar, content, ...contentOptions }: import("./components/Content/Content.types").PopoverContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
         Compose: ({ children, backgroundColor, placement, sideOffset, onClickOutside, persistent, align, maxWidth, portal, ...restProps }: import("./components/Content/components/Compose/Compose.types").PopoverContentComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Text: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
         Header: (({ title, hideCloseButton, ...restProps }: import("./components/Content/components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: (props: import("./components/Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
-            Title: ({ children, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+            Title: ({ children, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
         };
         Body: (({ text, ...restProps }: import("./components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: (props: import("./components/Content/components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
-            Text: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+            Text: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         };
         Footer: (({ actionButtonText, actionButtonHandler, link, linkText, ...restProps }: import("./components/Content/components/Footer/Footer.types").ContentFooterProps) => import("react/jsx-runtime").JSX.Element | null) & {
             Compose: (props: import("./components/Content/components/Footer/components/Compose/Compose.types").ContentFooterComposeProps) => import("react/jsx-runtime").JSX.Element;
@@ -22,7 +22,7 @@ declare const Popover: (({ children, defaultOpen, visible, onVisibilityChange, o
             Compose: (props: import("./components/Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
             Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, variant, ...props }: import("../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
             Header: import("react").FC<import("./components/Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
         };
     };
@@ -30,11 +30,11 @@ declare const Popover: (({ children, defaultOpen, visible, onVisibilityChange, o
         Compose: (props: import("./components/PopoverCard/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
         Header: (({ title, hideCloseButton, ...restProps }: import("./components/Content/components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: (props: import("./components/Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
-            Title: ({ children, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+            Title: ({ children, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
         };
         Body: (({ text, ...restProps }: import("./components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: (props: import("./components/Content/components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
-            Text: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+            Text: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         };
         Footer: (({ actionButtonText, actionButtonHandler, link, linkText, ...restProps }: import("./components/Content/components/Footer/Footer.types").ContentFooterProps) => import("react/jsx-runtime").JSX.Element | null) & {
             Compose: (props: import("./components/Content/components/Footer/components/Compose/Compose.types").ContentFooterComposeProps) => import("react/jsx-runtime").JSX.Element;
@@ -43,7 +43,7 @@ declare const Popover: (({ children, defaultOpen, visible, onVisibilityChange, o
             Compose: (props: import("./components/Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
             Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, variant, ...props }: import("../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
             Header: import("react").FC<import("./components/Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
         };
         Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Popover/components/Content/Content.d.ts

@@ -2,17 +2,17 @@
 import { PopoverContentProps } from './Content.types';
 declare const Content: (({ title, text, actionButtonText, actionButtonHandler, link, linkText, windowBar, content, ...contentOptions }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
     Compose: ({ children, backgroundColor, placement, sideOffset, onClickOutside, persistent, align, maxWidth, portal, ...restProps }: import("./components/Compose/Compose.types").PopoverContentComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+    Text: (props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
     Close: ({ children, icon, ...buttonProps }: import("./components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
     /** @deprecated use Popover.Card instead */
     Header: (({ title, hideCloseButton, ...restProps }: import("./components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("./components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Title: ({ children, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+        Title: ({ children, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
     };
     /** @deprecated use Popover.Card instead */
     Body: (({ text, ...restProps }: import("./components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("./components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: (props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
     };
     /** @deprecated use Popover.Card instead */
     Footer: (({ actionButtonText, actionButtonHandler, link, linkText, ...restProps }: import("./components/Footer/Footer.types").ContentFooterProps) => import("react/jsx-runtime").JSX.Element | null) & {
@@ -23,7 +23,7 @@ declare const Content: (({ title, text, actionButtonText, actionButtonHandler, l
         Compose: (props: import("./components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
         Close: ({ children, icon, ...buttonProps }: import("./components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, variant, ...props }: import("../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
         Header: import("react").FC<import("./components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
     };
 };

package/dist/Popover/components/Content/components/Body/Body.d.ts

@@ -1,6 +1,6 @@
 import { ContentBodyProps } from './Body.types';
 declare const Body: (({ text, ...restProps }: ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Text: (props: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+    Text: (props: import("../../../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Body;

package/dist/Popover/components/Content/components/Body/components/BodyText/BodyText.d.ts

@@ -1,3 +1,3 @@
-import { BodyProps } from '../../../../../../../Typography/components/Body/Body.types';
-declare const BodyText: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
+import { TypographyBodyProps } from '../../../../../../../Typography';
+declare const BodyText: (props: TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default BodyText;

package/dist/Popover/components/Content/components/Body/components/BodyText/BodyText.styles.d.ts

@@ -1 +1 @@
-export declare const HeaderTitle: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const HeaderTitle: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Popover/components/Content/components/Close/Close.style.js

@@ -1,11 +1,11 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import IconButtonComponent from "../../../../../Button/IconButton/IconButton.js";
+import IconButton$1 from "../../../../../Button/IconButton/IconButton.js";
 const PopoverCloseContainer = _styled.div.withConfig({
   displayName: "Closestyle__PopoverCloseContainer",
   componentId: "RedisUI__sc-1e4yz1p-0"
 })(["display:flex;align-items:center;justify-content:end;"]);
-const IconButton = _styled(IconButtonComponent).withConfig({
+const IconButton = _styled(IconButton$1).withConfig({
   displayName: "Closestyle__IconButton",
   componentId: "RedisUI__sc-1e4yz1p-1"
 })(["color:", ";"], () => useTheme().components.popupCard.closeButton.iconColor);

package/dist/Popover/components/Content/components/Header/Header.d.ts

@@ -1,6 +1,6 @@
 import { ContentHeaderProps } from './Header.types';
 declare const Header: (({ title, hideCloseButton, ...restProps }: ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Title: ({ children, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, ...restProps }: import("../../../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Header;

package/dist/Popover/components/Content/components/Header/components/HeaderTitle/HeaderTitle.d.ts

@@ -1,3 +1,3 @@
-import { HeadingProps } from '../../../../../../../Typography/components/Heading/Heading.types';
-declare const HeaderTitle: ({ children, ...restProps }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+import { TypographyHeadingProps } from '../../../../../../../Typography';
+declare const HeaderTitle: ({ children, ...restProps }: TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
 export default HeaderTitle;

package/dist/Popover/components/Content/components/Header/components/HeaderTitle/HeaderTitle.styles.d.ts

@@ -1 +1 @@
-export declare const HeaderTitle: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../../../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const HeaderTitle: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../../../Typography").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Popover/components/Content/components/Text/Text.d.ts

@@ -1,3 +1,3 @@
-import { BodyProps } from '../../../../../Typography/components/Body/Body.types';
-declare const Text: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
+import { TypographyBodyProps } from '../../../../../Typography';
+declare const Text: (props: TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Text;

package/dist/Popover/components/Content/components/Text/Text.styles.d.ts

@@ -1 +1 @@
-export declare const Text: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Popover/components/Content/components/WindowBar/WindowBar.d.ts

@@ -4,7 +4,7 @@ declare const WindowBar: (({ title, variant, hideCloseButton, withIcon, icon, ..
     Compose: (props: import("./components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
     Close: ({ children, icon, ...buttonProps }: import("../Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon, variant, ...props }: import("../../../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-    Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+    Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
     Header: import("react").FC<import("./components/Header/Header.types").WindowBarHeaderProps>;
 };
 export default WindowBar;

package/dist/Popover/components/Content/components/WindowBar/WindowBar.style.d.ts

@@ -1 +1 @@
-export declare const WindowBarHeading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const WindowBarHeading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../Typography").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Popover/components/PopoverCard/PopoverCard.d.ts

@@ -4,11 +4,11 @@ declare const PopoverCard: (({ text, title, actionButtonText, actionButtonHandle
     Compose: (props: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
     Header: (({ title, hideCloseButton, ...restProps }: import("../Content/components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("../Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Title: ({ children, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+        Title: ({ children, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
     };
     Body: (({ text, ...restProps }: import("../Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("../Content/components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: (props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
     };
     Footer: (({ actionButtonText, actionButtonHandler, link, linkText, ...restProps }: import("../Content/components/Footer/Footer.types").ContentFooterProps) => import("react/jsx-runtime").JSX.Element | null) & {
         Compose: (props: import("../Content/components/Footer/components/Compose/Compose.types").ContentFooterComposeProps) => import("react/jsx-runtime").JSX.Element;
@@ -17,7 +17,7 @@ declare const PopoverCard: (({ text, title, actionButtonText, actionButtonHandle
         Compose: (props: import("../Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
         Close: ({ children, icon, ...buttonProps }: import("../Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, variant, ...props }: import("../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
         Header: import("react").FC<import("../Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
     };
     Close: ({ children, icon, ...buttonProps }: import("../Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ProfileIcon/ProfileIcon.types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { AnyOtherString } from 'src/Helpers/common.types';
+import { AnyOtherString } from '../Helpers/common.types';
 export type Colors = {
     primaryColor: string;
     secondaryColor: string;

package/dist/ProgressBar/ProgressBar.styles.d.ts

@@ -12,4 +12,4 @@ export declare const Indicator: import("styled-components").StyledComponent<impo
 export declare const ProgressBar: import("styled-components").StyledComponent<"div", any, {
     textPosition?: ProgressBarTextPosition | undefined;
 }, never>;
-export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const index = require("../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const ScreenReaderAnnounce = ({
+  text,
+  allowAnnounce = void 0,
+  ...restProps
+}) => {
+  const [enabled, setEnabled] = React.useState(false);
+  const hasTextChangedRef = React.useRef(false);
+  React.useLayoutEffect(() => {
+    if (allowAnnounce === void 0) {
+      if (hasTextChangedRef.current) {
+        setEnabled(true);
+      } else {
+        hasTextChangedRef.current = true;
+      }
+    } else {
+      setEnabled(allowAnnounce);
+    }
+  }, [allowAnnounce, text]);
+  if (!enabled || !text) return null;
+  return jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
+    "aria-atomic": true,
+    "aria-live": restProps.role === "alert" ? void 0 : "polite",
+    ...restProps,
+    children: text
+  });
+};
+exports.ScreenReaderAnnounce = ScreenReaderAnnounce;

package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, AriaAttributes } from 'react';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+export type ScreenReaderAnnounceProps = Omit<ComponentProps<typeof VisuallyHidden>, 'children' | 'style' | 'className' | 'aria-hidden' | 'role' | 'text' | 'asChild' | keyof AriaAttributes> & Pick<AriaAttributes, 'aria-live' | 'aria-atomic'> & {
+    text: string;
+    allowAnnounce?: boolean;
+    role?: 'alert' | 'status' | 'log';
+};
+export declare const ScreenReaderAnnounce: ({ text, allowAnnounce, ...restProps }: ScreenReaderAnnounceProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.js

@@ -0,0 +1,32 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { useState, useRef, useLayoutEffect } from "react";
+import { VisuallyHidden } from "../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+const ScreenReaderAnnounce = ({
+  text,
+  allowAnnounce = void 0,
+  ...restProps
+}) => {
+  const [enabled, setEnabled] = useState(false);
+  const hasTextChangedRef = useRef(false);
+  useLayoutEffect(() => {
+    if (allowAnnounce === void 0) {
+      if (hasTextChangedRef.current) {
+        setEnabled(true);
+      } else {
+        hasTextChangedRef.current = true;
+      }
+    } else {
+      setEnabled(allowAnnounce);
+    }
+  }, [allowAnnounce, text]);
+  if (!enabled || !text) return null;
+  return jsxRuntimeExports.jsx(VisuallyHidden, {
+    "aria-atomic": true,
+    "aria-live": restProps.role === "alert" ? void 0 : "polite",
+    ...restProps,
+    children: text
+  });
+};
+export {
+  ScreenReaderAnnounce
+};

package/dist/ScreenReaderAnnounce/index.d.ts

@@ -0,0 +1 @@
+export * from './ScreenReaderAnnounce';

package/dist/Section/Section.cjs

@@ -4,29 +4,32 @@ const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Header = require("./components/Header/Header.cjs");
 const Body = require("./components/Body/Body.cjs");
+const SummaryBar = require("./components/SummaryBar/SummaryBar.cjs");
 const Section = Object.assign(({
   content,
   label,
-  onAction,
-  actionButtonText,
-  collapsedInfo,
+  actions,
+  summary,
+  summaryAlwaysVisible,
   ...composeProps
 }) => {
   return jsxRuntime.jsxRuntimeExports.jsxs(Section.Compose, {
     ...composeProps,
     children: [jsxRuntime.jsxRuntimeExports.jsx(Section.Header, {
       label,
-      onAction,
-      actionButtonText,
-      collapsedInfo
+      actions
     }), jsxRuntime.jsxRuntimeExports.jsx(Section.Body, {
-      content
+      children: content
+    }), jsxRuntime.jsxRuntimeExports.jsx(Section.SummaryBar, {
+      alwaysVisible: summaryAlwaysVisible,
+      children: summary
     })]
   });
 }, {
   Compose: Compose.Compose,
   Header: Header.Header,
-  Body: Body.Body
+  Body: Body.Body,
+  SummaryBar: SummaryBar.SummaryBar
 });
 const Section$1 = Section;
 exports.default = Section$1;

package/dist/Section/Section.d.ts

@@ -1,13 +1,15 @@
+/// <reference types="react" />
 import { SectionProps } from './Section.types';
-declare const Section: (({ content, label, onAction, actionButtonText, collapsedInfo, ...composeProps }: SectionProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ open, defaultOpen, disabled, onOpenChange, collapsible, children, ...props }: import("./components/Compose/Compose.types").SectionComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Header: (({ label, onAction, actionButtonText, collapsedInfo }: import("./components/Header/Header.types").SectionHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ children, collapsedInfo, ...props }: import("./components/Header/components/Compose/Compose.types").SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Section: (({ content, label, actions, summary, summaryAlwaysVisible, ...composeProps }: SectionProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ open: controlledOpen, defaultOpen, disabled, onOpenChange, collapsible, children, ...props }: import("./components/Compose/Compose.types").SectionComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Header: (({ label, actions }: import("./components/Header/Header.types").SectionHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: (props: import("./components/Header/components/Compose/Compose.types").SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ label, ...restProps }: import("./components/Header/components/Label/Label.types").SectionHeaderLabelProps) => import("react/jsx-runtime").JSX.Element;
-        ActionButton: ({ onClick, children, ...restProps }: import("./components/Header/components/ActionButton/ActionButton.types").SectionHeaderActionButtonsProps) => import("react/jsx-runtime").JSX.Element | null;
-        CollapseIndicator: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element | null;
+        ActionButton: import("react").ForwardRefExoticComponent<import("..").TextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+        CollapseButton: ({ hidden, icon, ...props }: import("./components/Header/components/CollapseButton/CollapseButton.types").SectionCollapseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
         Group: (props: import("./components/Header/components/Group/Group.types").SectionHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;
     };
-    Body: ({ content, ...props }: import("./components/Body/Body.types").SectionBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Body: ({ children, ...props }: import("./components/Body/Body.types").SectionBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    SummaryBar: ({ children, alwaysVisible, ...restProps }: import("./components/SummaryBar/SummaryBar.types").SummaryBarProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Section;

package/dist/Section/Section.js

@@ -2,29 +2,32 @@ import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { Compose } from "./components/Compose/Compose.js";
 import { Header } from "./components/Header/Header.js";
 import { Body } from "./components/Body/Body.js";
+import { SummaryBar } from "./components/SummaryBar/SummaryBar.js";
 const Section = Object.assign(({
   content,
   label,
-  onAction,
-  actionButtonText,
-  collapsedInfo,
+  actions,
+  summary,
+  summaryAlwaysVisible,
   ...composeProps
 }) => {
   return jsxRuntimeExports.jsxs(Section.Compose, {
     ...composeProps,
     children: [jsxRuntimeExports.jsx(Section.Header, {
       label,
-      onAction,
-      actionButtonText,
-      collapsedInfo
+      actions
     }), jsxRuntimeExports.jsx(Section.Body, {
-      content
+      children: content
+    }), jsxRuntimeExports.jsx(Section.SummaryBar, {
+      alwaysVisible: summaryAlwaysVisible,
+      children: summary
     })]
   });
 }, {
   Compose,
   Header,
-  Body
+  Body,
+  SummaryBar
 });
 const Section$1 = Section;
 export {

package/dist/Section/Section.types.d.ts

@@ -1,10 +1,16 @@
 import { ReactNode } from 'react';
 import { SectionComposeProps } from './components/Compose/Compose.types';
-import { SectionHeaderProps } from './components/Header/Header.types';
-export interface SectionProps extends Omit<SectionComposeProps, 'children'>, Pick<SectionHeaderProps, 'label' | 'onAction' | 'actionButtonText' | 'collapsedInfo'> {
+import { OwnSectionHeaderProps } from './components/Header/Header.types';
+import { ChildFree } from '../Helpers';
+export interface SectionProps extends ChildFree<SectionComposeProps>, OwnSectionHeaderProps {
     content?: ReactNode;
+    summary?: ReactNode;
+    summaryAlwaysVisible?: boolean;
 }
 export interface SectionContextProps {
     collapsible?: boolean;
     setHasContent: (hasContent: boolean) => void;
+    triggerId: string | undefined;
+    labelId: string;
+    open: boolean;
 }

package/dist/Section/components/Body/Body.cjs

@@ -5,21 +5,25 @@ const React = require("react");
 const Section_context = require("../../Section.context.cjs");
 const Body_style = require("./Body.style.cjs");
 const Body = ({
-  content,
+  children,
   ...props
 }) => {
   const {
-    setHasContent
+    setHasContent,
+    labelId
   } = Section_context.useSectionContext();
+  const hasContent = !!React.Children.toArray(children).filter((ch) => typeof ch !== "string" || ch.trim() !== "").length;
   React.useLayoutEffect(() => {
-    setHasContent(!!content);
-  }, [setHasContent, content]);
-  if (!content) {
+    setHasContent(hasContent);
+  }, [setHasContent, hasContent]);
+  if (!hasContent) {
     return null;
   }
   return jsxRuntime.jsxRuntimeExports.jsx(Body_style.SectionBody, {
+    role: "region",
+    "aria-labelledby": labelId,
     ...props,
-    children: content
+    children
   });
 };
 exports.Body = Body;

package/dist/Section/components/Body/Body.d.ts

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