@redis-ui/components 42.7.0 → 42.8.0

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const Compose = require("./components/Compose/Compose.cjs");
+const List = require("./components/List/List.cjs");
+const Item = require("./components/Item/Item.cjs");
+const Link = require("./components/Link/Link.cjs");
+const Separator = require("./components/Separator/Separator.cjs");
+const Current = require("./components/Current/Current.cjs");
+const Breadcrumbs = Object.assign(({
+  items,
+  separator = "/",
+  "aria-label": ariaLabel,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Compose, {
+  "aria-label": ariaLabel,
+  ...restProps,
+  children: jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.List, {
+    children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      return (
+        // eslint-disable-next-line react/no-array-index-key
+        jsxRuntime.jsxRuntimeExports.jsxs(React.Fragment, {
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Item, {
+            children: isLast ? jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Current, {
+              children: item.label
+            }) : jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Link, {
+              href: item.href,
+              onClick: item.onClick,
+              children: item.label
+            })
+          }), !isLast && jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Item, {
+            children: jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Separator, {
+              children: separator
+            })
+          })]
+        }, `${index}-${item.href ?? ""}`)
+      );
+    })
+  })
+}), {
+  Compose: Compose.default,
+  List: List.default,
+  Item: Item.default,
+  Link: Link.default,
+  Separator: Separator.default,
+  Current: Current.default
+});
+const Breadcrumbs$1 = Breadcrumbs;
+exports.default = Breadcrumbs$1;

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import { BreadcrumbsProps } from './Breadcrumbs.types';
+declare const Breadcrumbs: (({ items, separator, "aria-label": ariaLabel, ...restProps }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ "aria-label": ariaLabel, children, ...restProps }: import("./Breadcrumbs.types").BreadcrumbsComposeProps & import("./Breadcrumbs.types").RestBreadcrumbsComposeProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ children, ...restProps }: import("./Breadcrumbs.types").BreadcrumbsListProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, ...restProps }: import("./Breadcrumbs.types").BreadcrumbsItemProps) => import("react/jsx-runtime").JSX.Element;
+    Link: import("react").ForwardRefExoticComponent<import(".").BreadcrumbsLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Separator: ({ children, ...restProps }: import(".").BreadcrumbsSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Current: ({ children, ...restProps }: import(".").BreadcrumbsCurrentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Breadcrumbs;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,51 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { Fragment } from "react";
+import Compose from "./components/Compose/Compose.js";
+import List from "./components/List/List.js";
+import Item from "./components/Item/Item.js";
+import Link from "./components/Link/Link.js";
+import Separator from "./components/Separator/Separator.js";
+import Current from "./components/Current/Current.js";
+const Breadcrumbs = Object.assign(({
+  items,
+  separator = "/",
+  "aria-label": ariaLabel,
+  ...restProps
+}) => jsxRuntimeExports.jsx(Breadcrumbs.Compose, {
+  "aria-label": ariaLabel,
+  ...restProps,
+  children: jsxRuntimeExports.jsx(Breadcrumbs.List, {
+    children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      return (
+        // eslint-disable-next-line react/no-array-index-key
+        jsxRuntimeExports.jsxs(Fragment, {
+          children: [jsxRuntimeExports.jsx(Breadcrumbs.Item, {
+            children: isLast ? jsxRuntimeExports.jsx(Breadcrumbs.Current, {
+              children: item.label
+            }) : jsxRuntimeExports.jsx(Breadcrumbs.Link, {
+              href: item.href,
+              onClick: item.onClick,
+              children: item.label
+            })
+          }), !isLast && jsxRuntimeExports.jsx(Breadcrumbs.Item, {
+            children: jsxRuntimeExports.jsx(Breadcrumbs.Separator, {
+              children: separator
+            })
+          })]
+        }, `${index}-${item.href ?? ""}`)
+      );
+    })
+  })
+}), {
+  Compose,
+  List,
+  Item,
+  Link,
+  Separator,
+  Current
+});
+const Breadcrumbs$1 = Breadcrumbs;
+export {
+  Breadcrumbs$1 as default
+};

package/dist/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { ChildFree } from '../Helpers/common.types';
+import type { BreadcrumbsComposeProps, RestBreadcrumbsComposeProps } from './components/Compose/Compose.types';
+import type { BreadcrumbsListProps } from './components/List/List.types';
+import type { BreadcrumbsItemProps } from './components/Item/Item.types';
+export type BreadcrumbItem = {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+};
+export interface BreadcrumbsProps extends BreadcrumbsComposeProps, ChildFree<RestBreadcrumbsComposeProps> {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+}
+export type { BreadcrumbsComposeProps, RestBreadcrumbsComposeProps };
+export type { BreadcrumbsListProps };
+export type { BreadcrumbsItemProps };

package/dist/Breadcrumbs/components/Compose/Compose.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const Compose = ({
+  "aria-label": ariaLabel = "Breadcrumb",
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.BreadcrumbsNav, {
+  "aria-label": ariaLabel,
+  ...restProps,
+  children
+});
+exports.default = Compose;

package/dist/Breadcrumbs/components/Compose/Compose.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsComposeProps, RestBreadcrumbsComposeProps } from './Compose.types';
+declare const Compose: ({ "aria-label": ariaLabel, children, ...restProps }: BreadcrumbsComposeProps & RestBreadcrumbsComposeProps) => import("react/jsx-runtime").JSX.Element;
+export default Compose;

package/dist/Breadcrumbs/components/Compose/Compose.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsNav } from "./Compose.style.js";
+const Compose = ({
+  "aria-label": ariaLabel = "Breadcrumb",
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsNav, {
+  "aria-label": ariaLabel,
+  ...restProps,
+  children
+});
+export {
+  Compose as default
+};

package/dist/Breadcrumbs/components/Compose/Compose.style.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsNav = _styled__default.default.nav.withConfig({
+  displayName: "Composestyle__BreadcrumbsNav",
+  componentId: "RedisUI__sc-ifaw7a-0"
+})(["display:flex;align-items:center;"]);
+exports.BreadcrumbsNav = BreadcrumbsNav;

package/dist/Breadcrumbs/components/Compose/Compose.style.d.ts

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

package/dist/Breadcrumbs/components/Compose/Compose.style.js

@@ -0,0 +1,8 @@
+import _styled from "styled-components";
+const BreadcrumbsNav = _styled.nav.withConfig({
+  displayName: "Composestyle__BreadcrumbsNav",
+  componentId: "RedisUI__sc-ifaw7a-0"
+})(["display:flex;align-items:center;"]);
+export {
+  BreadcrumbsNav
+};

package/dist/Breadcrumbs/components/Compose/Compose.types.d.ts

@@ -0,0 +1,5 @@
+import { ComposeElementProps } from '../../../Helpers/common.types';
+export interface BreadcrumbsComposeProps {
+    'aria-label'?: string;
+}
+export type RestBreadcrumbsComposeProps = ComposeElementProps<HTMLElement>;

package/dist/Breadcrumbs/components/Current/Current.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Current_style = require("./Current.style.cjs");
+const Current = ({
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Current_style.BreadcrumbsCurrent, {
+  "aria-current": "page",
+  ...restProps,
+  children
+});
+exports.default = Current;

package/dist/Breadcrumbs/components/Current/Current.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsCurrentProps } from './Current.types';
+declare const Current: ({ children, ...restProps }: BreadcrumbsCurrentProps) => import("react/jsx-runtime").JSX.Element;
+export default Current;

package/dist/Breadcrumbs/components/Current/Current.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsCurrent } from "./Current.style.js";
+const Current = ({
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsCurrent, {
+  "aria-current": "page",
+  ...restProps,
+  children
+});
+export {
+  Current as default
+};

package/dist/Breadcrumbs/components/Current/Current.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsCurrent = _styled__default.default.span.withConfig({
+  displayName: "Currentstyle__BreadcrumbsCurrent",
+  componentId: "RedisUI__sc-50sq3s-0"
+})(["color:", ";font-family:", ";font-size:", ";font-weight:", ";"], () => redisUiStyles.useTheme().components.breadcrumbs.current.textColor, () => redisUiStyles.useTheme().components.typography.body.fontFamily, () => redisUiStyles.useTheme().components.typography.body.fontSizes.M, () => redisUiStyles.useTheme().components.breadcrumbs.current.fontWeight);
+exports.BreadcrumbsCurrent = BreadcrumbsCurrent;

package/dist/Breadcrumbs/components/Current/Current.style.d.ts

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

package/dist/Breadcrumbs/components/Current/Current.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const BreadcrumbsCurrent = _styled.span.withConfig({
+  displayName: "Currentstyle__BreadcrumbsCurrent",
+  componentId: "RedisUI__sc-50sq3s-0"
+})(["color:", ";font-family:", ";font-size:", ";font-weight:", ";"], () => useTheme().components.breadcrumbs.current.textColor, () => useTheme().components.typography.body.fontFamily, () => useTheme().components.typography.body.fontSizes.M, () => useTheme().components.breadcrumbs.current.fontWeight);
+export {
+  BreadcrumbsCurrent
+};

package/dist/Breadcrumbs/components/Current/Current.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbsCurrentProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}

package/dist/Breadcrumbs/components/Item/Item.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Item_style = require("./Item.style.cjs");
+const Item = ({
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Item_style.BreadcrumbsItem, {
+  ...restProps,
+  children
+});
+exports.default = Item;

package/dist/Breadcrumbs/components/Item/Item.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsItemProps } from './Item.types';
+declare const Item: ({ children, ...restProps }: BreadcrumbsItemProps) => import("react/jsx-runtime").JSX.Element;
+export default Item;

package/dist/Breadcrumbs/components/Item/Item.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsItem } from "./Item.style.js";
+const Item = ({
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsItem, {
+  ...restProps,
+  children
+});
+export {
+  Item as default
+};

package/dist/Breadcrumbs/components/Item/Item.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsItem = _styled__default.default.li.withConfig({
+  displayName: "Itemstyle__BreadcrumbsItem",
+  componentId: "RedisUI__sc-1ivwbux-0"
+})(["display:flex;align-items:center;gap:", ";"], () => redisUiStyles.useTheme().components.breadcrumbs.gap);
+exports.BreadcrumbsItem = BreadcrumbsItem;

package/dist/Breadcrumbs/components/Item/Item.style.d.ts

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

package/dist/Breadcrumbs/components/Item/Item.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const BreadcrumbsItem = _styled.li.withConfig({
+  displayName: "Itemstyle__BreadcrumbsItem",
+  componentId: "RedisUI__sc-1ivwbux-0"
+})(["display:flex;align-items:center;gap:", ";"], () => useTheme().components.breadcrumbs.gap);
+export {
+  BreadcrumbsItem
+};

package/dist/Breadcrumbs/components/Item/Item.types.d.ts

@@ -0,0 +1,2 @@
+import { ComposeElementProps } from '../../../Helpers/common.types';
+export type BreadcrumbsItemProps = ComposeElementProps<HTMLLIElement>;

package/dist/Breadcrumbs/components/Link/Link.cjs

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const Link_style = require("./Link.style.cjs");
+const getFalse = () => false;
+const Link = React.forwardRef(({
+  children,
+  href,
+  onClick,
+  disabled,
+  ...restProps
+}, ref) => {
+  const commonProps = {
+    ref,
+    tabIndex: disabled ? -1 : 0
+  };
+  const hrefProps = {
+    ...href ? {
+      href
+    } : null,
+    ...onClick ? {
+      role: href ? void 0 : "button",
+      onClick,
+      onKeyDown: (e) => {
+        var _a;
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          (_a = e.currentTarget) == null ? void 0 : _a.click();
+        }
+      }
+    } : null
+  };
+  const disabledProps = disabled ? {
+    disabled: true,
+    tabIndex: -1,
+    href: void 0,
+    onClick: getFalse,
+    onKeyDown: getFalse,
+    "aria-disabled": true
+  } : null;
+  return jsxRuntime.jsxRuntimeExports.jsx(Link_style.BreadcrumbsLink, {
+    ...commonProps,
+    ...hrefProps,
+    ...restProps,
+    ...disabledProps,
+    children
+  });
+});
+Link.displayName = "Breadcrumbs.Link";
+exports.default = Link;

package/dist/Breadcrumbs/components/Link/Link.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsLinkProps } from './Link.types';
+declare const Link: import("react").ForwardRefExoticComponent<BreadcrumbsLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/dist/Breadcrumbs/components/Link/Link.js

@@ -0,0 +1,52 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { forwardRef } from "react";
+import { BreadcrumbsLink } from "./Link.style.js";
+const getFalse = () => false;
+const Link = forwardRef(({
+  children,
+  href,
+  onClick,
+  disabled,
+  ...restProps
+}, ref) => {
+  const commonProps = {
+    ref,
+    tabIndex: disabled ? -1 : 0
+  };
+  const hrefProps = {
+    ...href ? {
+      href
+    } : null,
+    ...onClick ? {
+      role: href ? void 0 : "button",
+      onClick,
+      onKeyDown: (e) => {
+        var _a;
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          (_a = e.currentTarget) == null ? void 0 : _a.click();
+        }
+      }
+    } : null
+  };
+  const disabledProps = disabled ? {
+    disabled: true,
+    tabIndex: -1,
+    href: void 0,
+    onClick: getFalse,
+    onKeyDown: getFalse,
+    "aria-disabled": true
+  } : null;
+  return jsxRuntimeExports.jsx(BreadcrumbsLink, {
+    ...commonProps,
+    ...hrefProps,
+    ...restProps,
+    ...disabledProps,
+    children
+  });
+});
+Link.displayName = "Breadcrumbs.Link";
+export {
+  Link as default
+};

package/dist/Breadcrumbs/components/Link/Link.style.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Button_style_utils = require("../../../Button/Button.style.utils.cjs");
+const css_utils = require("../../../Helpers/css.utils.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsLink = _styled__default.default.a.withConfig({
+  displayName: "Linkstyle__BreadcrumbsLink",
+  componentId: "RedisUI__sc-19droq4-0"
+})(["text-decoration:none;font-family:", ";font-size:", ";font-weight:inherit;cursor:pointer;", ";&:hover{text-decoration:underline;}&[aria-disabled='true']{cursor:not-allowed;text-decoration:none;}", ""], () => redisUiStyles.useTheme().components.typography.body.fontFamily, () => redisUiStyles.useTheme().components.typography.body.fontSizes.M, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.breadcrumbs.link.states, [css_utils.tokenMaps.textColor]), redisUiStyles.getFocusStyle());
+exports.BreadcrumbsLink = BreadcrumbsLink;

package/dist/Breadcrumbs/components/Link/Link.style.d.ts

@@ -0,0 +1 @@
+export declare const BreadcrumbsLink: import("styled-components").StyledComponent<"a", any, import("styled-components").ThemeProps<import("@redislabsdev/redis-ui-styles").Theme>, never>;

package/dist/Breadcrumbs/components/Link/Link.style.js

@@ -0,0 +1,11 @@
+import _styled from "styled-components";
+import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+import { getButtonStatesStyle } from "../../../Button/Button.style.utils.js";
+import { tokenMaps } from "../../../Helpers/css.utils.js";
+const BreadcrumbsLink = _styled.a.withConfig({
+  displayName: "Linkstyle__BreadcrumbsLink",
+  componentId: "RedisUI__sc-19droq4-0"
+})(["text-decoration:none;font-family:", ";font-size:", ";font-weight:inherit;cursor:pointer;", ";&:hover{text-decoration:underline;}&[aria-disabled='true']{cursor:not-allowed;text-decoration:none;}", ""], () => useTheme().components.typography.body.fontFamily, () => useTheme().components.typography.body.fontSizes.M, () => getButtonStatesStyle(useTheme().components.breadcrumbs.link.states, [tokenMaps.textColor]), getFocusStyle());
+export {
+  BreadcrumbsLink
+};

package/dist/Breadcrumbs/components/Link/Link.types.d.ts

@@ -0,0 +1,5 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbsLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onKeyDown'> {
+    children: ReactNode;
+    disabled?: boolean;
+}

package/dist/Breadcrumbs/components/List/List.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const List_style = require("./List.style.cjs");
+const List = ({
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(List_style.BreadcrumbsList, {
+  ...restProps,
+  children
+});
+exports.default = List;

package/dist/Breadcrumbs/components/List/List.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsListProps } from './List.types';
+declare const List: ({ children, ...restProps }: BreadcrumbsListProps) => import("react/jsx-runtime").JSX.Element;
+export default List;

package/dist/Breadcrumbs/components/List/List.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsList } from "./List.style.js";
+const List = ({
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsList, {
+  ...restProps,
+  children
+});
+export {
+  List as default
+};

package/dist/Breadcrumbs/components/List/List.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsList = _styled__default.default.ol.withConfig({
+  displayName: "Liststyle__BreadcrumbsList",
+  componentId: "RedisUI__sc-11wutho-0"
+})(["display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:", ";"], () => redisUiStyles.useTheme().components.breadcrumbs.gap);
+exports.BreadcrumbsList = BreadcrumbsList;

package/dist/Breadcrumbs/components/List/List.style.d.ts

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

package/dist/Breadcrumbs/components/List/List.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const BreadcrumbsList = _styled.ol.withConfig({
+  displayName: "Liststyle__BreadcrumbsList",
+  componentId: "RedisUI__sc-11wutho-0"
+})(["display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:", ";"], () => useTheme().components.breadcrumbs.gap);
+export {
+  BreadcrumbsList
+};

package/dist/Breadcrumbs/components/List/List.types.d.ts

@@ -0,0 +1,2 @@
+import { ComposeElementProps } from '../../../Helpers/common.types';
+export type BreadcrumbsListProps = ComposeElementProps<HTMLOListElement>;

package/dist/Breadcrumbs/components/Separator/Separator.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Separator_style = require("./Separator.style.cjs");
+const Separator = ({
+  children = "/",
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Separator_style.BreadcrumbsSeparator, {
+  "aria-hidden": "true",
+  ...restProps,
+  children
+});
+exports.default = Separator;

package/dist/Breadcrumbs/components/Separator/Separator.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsSeparatorProps } from './Separator.types';
+declare const Separator: ({ children, ...restProps }: BreadcrumbsSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export default Separator;

package/dist/Breadcrumbs/components/Separator/Separator.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsSeparator } from "./Separator.style.js";
+const Separator = ({
+  children = "/",
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsSeparator, {
+  "aria-hidden": "true",
+  ...restProps,
+  children
+});
+export {
+  Separator as default
+};

package/dist/Breadcrumbs/components/Separator/Separator.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsSeparator = _styled__default.default.span.withConfig({
+  displayName: "Separatorstyle__BreadcrumbsSeparator",
+  componentId: "RedisUI__sc-1ltx191-0"
+})(["display:flex;align-items:center;color:", ";font-family:", ";font-size:", ";user-select:none;"], () => redisUiStyles.useTheme().components.breadcrumbs.separator.textColor, () => redisUiStyles.useTheme().components.typography.body.fontFamily, () => redisUiStyles.useTheme().components.typography.body.fontSizes.M);
+exports.BreadcrumbsSeparator = BreadcrumbsSeparator;

package/dist/Breadcrumbs/components/Separator/Separator.style.d.ts

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

package/dist/Breadcrumbs/components/Separator/Separator.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const BreadcrumbsSeparator = _styled.span.withConfig({
+  displayName: "Separatorstyle__BreadcrumbsSeparator",
+  componentId: "RedisUI__sc-1ltx191-0"
+})(["display:flex;align-items:center;color:", ";font-family:", ";font-size:", ";user-select:none;"], () => useTheme().components.breadcrumbs.separator.textColor, () => useTheme().components.typography.body.fontFamily, () => useTheme().components.typography.body.fontSizes.M);
+export {
+  BreadcrumbsSeparator
+};

package/dist/Breadcrumbs/components/Separator/Separator.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbsSeparatorProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Breadcrumbs } from './Breadcrumbs';
+export * from './Breadcrumbs.types';
+export * from './components/Link/Link.types';
+export * from './components/Separator/Separator.types';
+export * from './components/Current/Current.types';

package/dist/index.cjs

@@ -1095,6 +1095,7 @@ const Badge_style = require("./Badge/Badge.style.cjs");
 const Badge_types = require("./Badge/Badge.types.cjs");
 const Banner = require("./Banner/Banner.cjs");
 const Banner_types = require("./Banner/Banner.types.cjs");
+const Breadcrumbs = require("./Breadcrumbs/Breadcrumbs.cjs");
 const BoxSelectionGroup = require("./BoxSelectionGroup/BoxSelectionGroup.cjs");
 const MultiBoxSelectionGroup = require("./BoxSelectionGroup/MultiBoxSelectionGroup.cjs");
 const Button = require("./Button/Button.cjs");
@@ -1202,6 +1203,7 @@ exports.BadgeStyles = Badge_style;
 exports.badgeVariants = Badge_types.badgeVariants;
 exports.Banner = Banner.default;
 exports.bannerVariants = Banner_types.bannerVariants;
+exports.Breadcrumbs = Breadcrumbs.default;
 exports.BoxSelectionGroup = BoxSelectionGroup.default;
 exports.MultiBoxSelectionGroup = MultiBoxSelectionGroup.default;
 exports.Button = Button.default;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './AppSelectionMenu';
 export * from './AutoCompleteSelect';
 export * from './Badge';
 export * from './Banner';
+export * from './Breadcrumbs';
 export * from './BoxSelectionGroup';
 export * from './Button';
 export * from './ButtonGroup';

package/dist/index.js

@@ -1093,33 +1093,34 @@ import * as Badge_style from "./Badge/Badge.style.js";
 import { badgeVariants } from "./Badge/Badge.types.js";
 import { default as default6 } from "./Banner/Banner.js";
 import { bannerVariants } from "./Banner/Banner.types.js";
-import { default as default7 } from "./BoxSelectionGroup/BoxSelectionGroup.js";
-import { default as default8 } from "./BoxSelectionGroup/MultiBoxSelectionGroup.js";
-import { default as default9 } from "./Button/Button.js";
+import { default as default7 } from "./Breadcrumbs/Breadcrumbs.js";
+import { default as default8 } from "./BoxSelectionGroup/BoxSelectionGroup.js";
+import { default as default9 } from "./BoxSelectionGroup/MultiBoxSelectionGroup.js";
+import { default as default10 } from "./Button/Button.js";
 import * as Button_style from "./Button/Button.style.js";
-import { default as default10 } from "./Button/TextButton/TextButton.js";
+import { default as default11 } from "./Button/TextButton/TextButton.js";
 import * as TextButton_style from "./Button/TextButton/TextButton.style.js";
-import { default as default11 } from "./Button/IconButton/IconButton.js";
+import { default as default12 } from "./Button/IconButton/IconButton.js";
 import * as IconButton_style from "./Button/IconButton/IconButton.style.js";
-import { default as default12 } from "./Button/ActionIconButton/ActionIconButton.js";
+import { default as default13 } from "./Button/ActionIconButton/ActionIconButton.js";
 import * as ActionIconButton_style from "./Button/ActionIconButton/ActionIconButton.style.js";
-import { default as default13 } from "./Button/ToggleButton/ToggleButton.js";
+import { default as default14 } from "./Button/ToggleButton/ToggleButton.js";
 import * as ToggleButton_style from "./Button/ToggleButton/ToggleButton.style.js";
 import { buttonSizes, buttonVariants } from "./Button/Button.types.js";
 import { textButtonVariants } from "./Button/TextButton/TextButton.types.js";
 import { iconButtonSizes } from "./Button/IconButton/IconButton.types.js";
 import { actionIconButtonSizes, buttonWithIconVariants } from "./Button/ActionIconButton/ActionIconButton.types.js";
-import { default as default14 } from "./ButtonGroup/ButtonGroup.js";
-import { default as default15 } from "./Card/Card.js";
-import { default as default16 } from "./Checkbox/Checkbox.js";
-import { default as default17 } from "./Chip/Chip.js";
+import { default as default15 } from "./ButtonGroup/ButtonGroup.js";
+import { default as default16 } from "./Card/Card.js";
+import { default as default17 } from "./Checkbox/Checkbox.js";
+import { default as default18 } from "./Chip/Chip.js";
 import { ChipContainer } from "./Chip/components/Compose/Compose.style.js";
-import { default as default18 } from "./ChipList/ChipList.js";
-import { default as default19 } from "./CountryFlag/CountryFlag.js";
-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 { default as default19 } from "./ChipList/ChipList.js";
+import { default as default20 } from "./CountryFlag/CountryFlag.js";
+import { default as default21 } from "./DatePicker/DatePicker.js";
+import { default as default22 } from "./DatePicker/RangeDatePicker.js";
+import { default as default23 } from "./Drawer/Drawer.js";
+import { default as default24 } from "./Filters/Filters.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";
@@ -1130,70 +1131,70 @@ 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";
-import { default as default27 } from "./Inputs/SearchInput/SearchInput.js";
-import { default as default28 } from "./Inputs/TextArea/TextArea.js";
-import { default as default29 } from "./Inputs/QuantityCounter/QuantityCounter.js";
+import { default as default25 } from "./Inputs/Input/Input.js";
+import { default as default26 } from "./Inputs/NumericInput/NumericInput.js";
+import { default as default27 } from "./Inputs/PasswordInput/PasswordInput.js";
+import { default as default28 } from "./Inputs/SearchInput/SearchInput.js";
+import { default as default29 } from "./Inputs/TextArea/TextArea.js";
+import { default as default30 } from "./Inputs/QuantityCounter/QuantityCounter.js";
 import { getClosestDivisibleNumber } from "./Inputs/hooks/numericInput/numericInput.utils.js";
 import { ContextProvider, useInputValueApi, useInputValueProps } from "./Inputs/components/Context/InputValue.context.js";
 import { ErrorContentProvider, FieldDisabledProvider, FieldDisabledTransProvider, useErrorContent, useFieldDisabled } from "./Inputs/components/Context/Field.context.js";
-import { default as default30 } from "./FormField/FormField.js";
+import { default as default31 } from "./FormField/FormField.js";
 import { FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider, FieldReadonlyProvider, FieldReadonlyTransProvider, FieldRequiredProvider, FieldRequiredTransProvider, FieldStatusProvider, FieldStatusTransProvider, useFieldAdditionTextId, useFieldReadonly, useFieldRequired, useFieldStatus } from "./FormField/FormField.context.js";
 import { KeyValueList } from "./KeyValueList/KeyValueList.js";
 import { useKeyValueList } from "./KeyValueList/hooks/useKeyValueList.js";
-import { default as default31 } from "./Label/Label.js";
+import { default as default32 } from "./Label/Label.js";
 import { FlexItem } from "./Layouts/FlexItem/FlexItem.js";
 import { FlexGroup } from "./Layouts/FlexGroup/FlexGroup.js";
 import { FlexSplit } from "./Layouts/FlexSplit/FlexSplit.js";
 import { FlexDivider } from "./Layouts/FlexDivider/FlexDivider.js";
-import { default as default32 } from "./Link/Link.js";
+import { default as default33 } from "./Link/Link.js";
 import { LinkStyler } from "./Link/LinkStyler/LinkStyler.js";
-import { default as default33 } from "./Loader/Loader.js";
-import { default as default34 } from "./Menu/Menu.js";
-import { default as default35 } from "./MidBar/MidBar.js";
-import { default as default36 } from "./Modal/Modal.js";
-import { default as default37 } from "./MoreInfoIcon/MoreInfoIcon.js";
-import { default as default38 } from "./MultiSelect/MultiSelect.js";
+import { default as default34 } from "./Loader/Loader.js";
+import { default as default35 } from "./Menu/Menu.js";
+import { default as default36 } from "./MidBar/MidBar.js";
+import { default as default37 } from "./Modal/Modal.js";
+import { default as default38 } from "./MoreInfoIcon/MoreInfoIcon.js";
+import { default as default39 } 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 default39 } from "./Popover/Popover.js";
-import { default as default40 } from "./RadioGroup/RadioGroup.js";
+import { default as default40 } from "./Popover/Popover.js";
+import { default as default41 } from "./RadioGroup/RadioGroup.js";
 import { ScreenReaderAnnounce } from "./ScreenReaderAnnounce/ScreenReaderAnnounce.js";
-import { default as default41 } from "./SearchBar/SearchBar.js";
-import { default as default42 } from "./Section/Section.js";
-import { default as default43 } from "./Section/components/Header/components/CategoryValueList/CategoryValueList.js";
-import { default as default44 } from "./Select/Select.js";
+import { default as default42 } from "./SearchBar/SearchBar.js";
+import { default as default43 } from "./Section/Section.js";
+import { default as default44 } from "./Section/components/Header/components/CategoryValueList/CategoryValueList.js";
+import { default as default45 } from "./Select/Select.js";
 import { useSelectContext } from "./Select/components/Context/Context.js";
-import { default as default45 } from "./SideBar/SideBar.js";
-import { default as default46 } from "./Skeleton/Skeleton.js";
-import { default as default47 } from "./Stepper/Stepper.js";
+import { default as default46 } from "./SideBar/SideBar.js";
+import { default as default47 } from "./Skeleton/Skeleton.js";
+import { default as default48 } from "./Stepper/Stepper.js";
 import { StepperStepState } from "./Stepper/components/Step/Step.types.js";
-import { default as default48 } from "./Switch/Switch.js";
-import { default as default49 } from "./TableHeading/TableHeading.js";
-import { default as default50 } from "./Tabs/Tabs.js";
+import { default as default49 } from "./Switch/Switch.js";
+import { default as default50 } from "./TableHeading/TableHeading.js";
+import { default as default51 } from "./Tabs/Tabs.js";
 import { ThemeModeSwitch } from "./ThemeModeSwitch/ThemeModeSwitch.js";
 import { useThemeModeSwitch } from "./ThemeModeSwitch/useThemeModeSwitch.js";
 import { useToastParams } from "./Toast/core/context.js";
-import { default as default51 } from "./Toast/Toast.js";
-import { default as default52 } from "./Toast/Toaster.js";
+import { default as default52 } from "./Toast/Toast.js";
+import { default as default53 } from "./Toast/Toaster.js";
 import { toast } from "./Toast/core/core.js";
-import { default as default53 } from "./Tooltip/Tooltip.js";
-import { default as default54 } from "./Tooltip/Provider/Provider.js";
-import { default as default55 } from "./Tooltip/components/TooltipCard/TooltipCard.js";
-import { default as default56 } from "./TreeView/TreeView.js";
-import { default as default57 } from "./Typography/Typography.js";
+import { default as default54 } from "./Tooltip/Tooltip.js";
+import { default as default55 } from "./Tooltip/Provider/Provider.js";
+import { default as default56 } from "./Tooltip/components/TooltipCard/TooltipCard.js";
+import { default as default57 } from "./TreeView/TreeView.js";
+import { default as default58 } from "./Typography/Typography.js";
 import { useEllipsisTooltip } from "./Typography/hooks/useEllipsisTooltip.js";
 import { ProgressBar } from "./ProgressBar/ProgressBar.js";
-import { default as default58 } from "./ProfileIcon/ProfileIcon.js";
+import { default as default59 } from "./ProfileIcon/ProfileIcon.js";
 import * as ProfileIcon_style from "./ProfileIcon/ProfileIcon.style.js";
 import { Slider } from "./Slider/Slider.js";
 export {
   ActionIconButton_style as ActionButtonWithIconStyles,
-  default12 as ActionIconButton,
+  default13 as ActionIconButton,
   default2 as AppBar,
   AppBar_style as AppBarStyles,
   default3 as AppSelectionMenu,
@@ -1201,21 +1202,22 @@ export {
   default5 as Badge,
   Badge_style as BadgeStyles,
   default6 as Banner,
-  default7 as BoxSelectionGroup,
-  default9 as Button,
-  default14 as ButtonGroup,
+  default8 as BoxSelectionGroup,
+  default7 as Breadcrumbs,
+  default10 as Button,
+  default15 as ButtonGroup,
   Button_style as ButtonStyles,
   IconButton_style as ButtonWithIconStyles,
-  default15 as Card,
-  default43 as CategoryValueList,
-  default16 as Checkbox,
-  default17 as Chip,
+  default16 as Card,
+  default44 as CategoryValueList,
+  default17 as Checkbox,
+  default18 as Chip,
   ChipContainer,
-  default18 as ChipList,
+  default19 as ChipList,
   ContextProvider,
-  default19 as CountryFlag,
-  default20 as DatePicker,
-  default22 as Drawer,
+  default20 as CountryFlag,
+  default21 as DatePicker,
+  default23 as Drawer,
   ErrorContentProvider,
   FieldAdditionTextIdProvider,
   FieldAdditionTextIdTransProvider,
@@ -1227,67 +1229,67 @@ export {
   FieldRequiredTransProvider,
   FieldStatusProvider,
   FieldStatusTransProvider,
-  default23 as Filters,
+  default24 as Filters,
   FlexDivider,
   FlexGroup,
   FlexItem,
   FlexSplit,
-  default30 as FormField,
-  default11 as IconButton,
-  default24 as Input,
+  default31 as FormField,
+  default12 as IconButton,
+  default25 as Input,
   KeyValueList,
-  default31 as Label,
-  default32 as Link,
+  default32 as Label,
+  default33 as Link,
   LinkStyler,
-  default33 as Loader,
-  default34 as Menu,
-  default35 as MidBar,
-  default36 as Modal,
-  default37 as MoreInfoIcon,
-  default8 as MultiBoxSelectionGroup,
-  default38 as MultiSelect,
-  default25 as NumericInput,
+  default34 as Loader,
+  default35 as Menu,
+  default36 as MidBar,
+  default37 as Modal,
+  default38 as MoreInfoIcon,
+  default9 as MultiBoxSelectionGroup,
+  default39 as MultiSelect,
+  default26 as NumericInput,
   Overflow,
   Pagination,
-  default26 as PasswordInput,
-  default39 as Popover,
+  default27 as PasswordInput,
+  default40 as Popover,
   PopperProvider,
-  default58 as ProfileIcon,
+  default59 as ProfileIcon,
   ProfileIcon_style as ProfileIconStyles,
   ProgressBar,
-  default29 as QuantityCounter,
-  default40 as RadioGroup,
-  default21 as RangeDatePicker,
+  default30 as QuantityCounter,
+  default41 as RadioGroup,
+  default22 as RangeDatePicker,
   RestylableElement,
   ScreenReaderAnnounce,
-  default41 as SearchBar,
-  default27 as SearchInput,
-  default42 as Section,
-  default44 as Select,
+  default42 as SearchBar,
+  default28 as SearchInput,
+  default43 as Section,
+  default45 as Select,
   SelfContained,
   SharedIdProvider,
   SharedIdTransProvider,
-  default45 as SideBar,
-  default46 as Skeleton,
+  default46 as SideBar,
+  default47 as Skeleton,
   Slider,
-  default47 as Stepper,
+  default48 as Stepper,
   StepperStepState,
-  default48 as Switch,
-  default49 as TableHeading,
-  default50 as Tabs,
-  default28 as TextArea,
-  default10 as TextButton,
+  default49 as Switch,
+  default50 as TableHeading,
+  default51 as Tabs,
+  default29 as TextArea,
+  default11 as TextButton,
   TextButton_style as TextButtonStyles,
   ThemeModeSwitch,
-  default51 as Toast,
-  default52 as Toaster,
-  default13 as ToggleButton,
+  default52 as Toast,
+  default53 as Toaster,
+  default14 as ToggleButton,
   ToggleButton_style as ToggleButtonStyles,
-  default53 as Tooltip,
-  default55 as TooltipCard,
-  default54 as TooltipProvider,
-  default56 as TreeView,
-  default57 as Typography,
+  default54 as Tooltip,
+  default56 as TooltipCard,
+  default55 as TooltipProvider,
+  default57 as TreeView,
+  default58 as Typography,
   actionIconButtonSizes,
   badgeVariants,
   bannerVariants,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "42.7.0",
+  "version": "42.8.0",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",