@quen-ui/components 0.0.14

package/dist/Avatar/types.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export interface IAvatarProps {
+    /** 	Additional CSS class */
+    className?: string;
+    /** Controls avatar dimensions */
+    size?: TQuenSize;
+    /** Image URL (falls back to initials/icon) */
+    src?: string;
+    /** Alt text for image */
+    alt?: string;
+    /** Custom fallback content (overrides default icon) */
+    children?: React.ReactNode;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Alt text for image */
+    imageProps?: React.ComponentPropsWithoutRef<"img">;
+    /**  Status indicator badge*/
+    status?: "online" | "offline";
+    /** Used for initials generation */
+    name?: string;
+    /** Secondary text for label */
+    description?: string;
+    /** Shows name/description beside avatar */
+    label?: boolean;
+    /** Custom background color (overrides auto-generated) */
+    color?: string;
+    /** 	Palette for auto-generated initials background */
+    allowedInitialsColors?: string[];
+    [key: string]: any;
+}

package/dist/Badge/Badge.cjs.js

@@ -0,0 +1,53 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Badge = ({
+  children,
+  leftContent,
+  color,
+  rightContent,
+  size = "m",
+  className,
+  style,
+  text,
+  ...props
+}) => {
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(styles.BadgeWrapper, { ...props, children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        styles.BadgeStyled,
+        {
+          size,
+          color,
+          role: "status",
+          className,
+          style,
+          children: [
+            leftContent,
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: text }),
+            rightContent
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.BadgeStyled,
+    {
+      size,
+      color,
+      role: "status",
+      className,
+      style,
+      ...props,
+      children: [
+        leftContent,
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: text }),
+        rightContent
+      ]
+    }
+  );
+};
+module.exports = Badge;

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IBadgeProps } from './types';
+declare const Badge: ({ children, leftContent, color, rightContent, size, className, style, text, ...props }: IBadgeProps) => React.ReactNode;
+export default Badge;

package/dist/Badge/Badge.es.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { BadgeWrapper, BadgeStyled } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+const Badge = ({
+  children,
+  leftContent,
+  color,
+  rightContent,
+  size = "m",
+  className,
+  style,
+  text,
+  ...props
+}) => {
+  if (children) {
+    return /* @__PURE__ */ jsxs(BadgeWrapper, { ...props, children: [
+      children,
+      /* @__PURE__ */ jsxs(
+        BadgeStyled,
+        {
+          size,
+          color,
+          role: "status",
+          className,
+          style,
+          children: [
+            leftContent,
+            /* @__PURE__ */ jsx(Text, { size, children: text }),
+            rightContent
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    BadgeStyled,
+    {
+      size,
+      color,
+      role: "status",
+      className,
+      style,
+      ...props,
+      children: [
+        leftContent,
+        /* @__PURE__ */ jsx(Text, { size, children: text }),
+        rightContent
+      ]
+    }
+  );
+};
+export {
+  Badge as default
+};

package/dist/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Badge } from './Badge';
+export type { IBadgeProps, TBadgeColor } from './types';
+export { BADGE_COLOR } from './types';

package/dist/Badge/styles.cjs.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const types = require("./types.cjs.js");
+const height = {
+  xs: "1rem",
+  s: "1.125rem",
+  m: "1.5rem",
+  l: "2rem"
+};
+const getBackgroundColor = (theme, color) => {
+  if (color) {
+    if (types.BADGE_COLOR.includes(color)) {
+      switch (color) {
+        case "success":
+          return theme.colors.green[9];
+        case "warning":
+          return theme.colors.orange[9];
+        case "danger":
+          return theme.colors.red[9];
+        case "secondary":
+          return theme.colors.grayViolet[9];
+        case "disabled":
+          return theme.colors.gray[2];
+      }
+    }
+    return color;
+  }
+  return theme.colors.violet[9];
+};
+const getColor = (theme, color) => {
+  if (color === "secondary") {
+    return "dark";
+  } else if (color === "disabled") {
+    return theme.colors.gray["4"];
+  }
+  return "white";
+};
+const BadgeStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "color"].includes(prop)
+})`
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: space-between;
+  width: max-content;
+  height: ${({ size }) => height[size]};
+  border-radius: ${({ theme }) => theme.control.radius};
+  padding-left: ${({ theme }) => theme.space.xs};
+  padding-right: ${({ theme }) => theme.space.xs};
+  background-color: ${({ theme, color }) => getBackgroundColor(theme, color)};
+
+  .quen-ui__text, svg {
+    color: ${({ color, theme }) => getColor(theme, color)};
+  }
+`;
+const BadgeWrapper = styled.div`
+  position: relative;
+  width: fit-content;
+  
+  ${BadgeStyled} {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+  }
+`;
+exports.BadgeStyled = BadgeStyled;
+exports.BadgeWrapper = BadgeWrapper;

package/dist/Badge/styles.d.ts

@@ -0,0 +1,7 @@
+import { TQuenSize } from '../types/size';
+import { TBadgeColor } from './types';
+export declare const BadgeStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+    color?: TBadgeColor | string;
+}>> & string;
+export declare const BadgeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Badge/styles.es.js

@@ -0,0 +1,70 @@
+import styled from "styled-components";
+import { BADGE_COLOR } from "./types.es.js";
+const height = {
+  xs: "1rem",
+  s: "1.125rem",
+  m: "1.5rem",
+  l: "2rem"
+};
+const getBackgroundColor = (theme, color) => {
+  if (color) {
+    if (BADGE_COLOR.includes(color)) {
+      switch (color) {
+        case "success":
+          return theme.colors.green[9];
+        case "warning":
+          return theme.colors.orange[9];
+        case "danger":
+          return theme.colors.red[9];
+        case "secondary":
+          return theme.colors.grayViolet[9];
+        case "disabled":
+          return theme.colors.gray[2];
+      }
+    }
+    return color;
+  }
+  return theme.colors.violet[9];
+};
+const getColor = (theme, color) => {
+  if (color === "secondary") {
+    return "dark";
+  } else if (color === "disabled") {
+    return theme.colors.gray["4"];
+  }
+  return "white";
+};
+const BadgeStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "color"].includes(prop)
+})`
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: space-between;
+  width: max-content;
+  height: ${({ size }) => height[size]};
+  border-radius: ${({ theme }) => theme.control.radius};
+  padding-left: ${({ theme }) => theme.space.xs};
+  padding-right: ${({ theme }) => theme.space.xs};
+  background-color: ${({ theme, color }) => getBackgroundColor(theme, color)};
+
+  .quen-ui__text, svg {
+    color: ${({ color, theme }) => getColor(theme, color)};
+  }
+`;
+const BadgeWrapper = styled.div`
+  position: relative;
+  width: fit-content;
+  
+  ${BadgeStyled} {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+  }
+`;
+export {
+  BadgeStyled,
+  BadgeWrapper
+};

package/dist/Badge/types.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const BADGE_COLOR = [
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "disabled"
+];
+exports.BADGE_COLOR = BADGE_COLOR;

package/dist/Badge/types.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export declare const BADGE_COLOR: readonly ["secondary", "success", "warning", "danger", "disabled"];
+export type TBadgeColor = typeof BADGE_COLOR[number];
+export interface IBadgeProps {
+    /** Controls padding and typography size */
+    size?: TQuenSize;
+    /** Preset or custom color value */
+    color?: TBadgeColor | string;
+    /** Left-aligned icon or element */
+    leftContent?: React.ReactNode;
+    /** Right-aligned icon or element */
+    rightContent?: React.ReactNode;
+    /** Main badge text content */
+    text: React.ReactNode;
+    /** Additional classname */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    [key: string]: any;
+}

package/dist/Badge/types.es.js

@@ -0,0 +1,10 @@
+const BADGE_COLOR = [
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "disabled"
+];
+export {
+  BADGE_COLOR
+};

package/dist/Breadcrumbs/BreadcrumbItem.cjs.js

@@ -0,0 +1,42 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const BreadcrumbItem = ({
+  item,
+  getItemIcon,
+  onlyIcon: onlyIconProps,
+  getItemLabel,
+  getItemHref,
+  onItemClick,
+  size = "m",
+  getItemClassName,
+  className,
+  lastItem
+}) => {
+  const Icon = item && (getItemIcon == null ? void 0 : getItemIcon(item));
+  const onlyIcon = Icon && onlyIconProps;
+  const label = item && (getItemLabel == null ? void 0 : getItemLabel(item));
+  const href = item && (getItemHref == null ? void 0 : getItemHref(item));
+  const _className = item && (getItemClassName == null ? void 0 : getItemClassName(item));
+  const handleClick = (e) => {
+    onItemClick == null ? void 0 : onItemClick(item, e);
+  };
+  const linkProps = href ? { as: "a", href } : { as: "span" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    styles.BreadcrumbItemStyled,
+    {
+      className: `${className} ${_className ?? ""}`.trim(),
+      lastItem,
+      ...linkProps,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: onlyIcon ? /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size, className: "quen-ui__breadcrumb--icon", children: Icon }) : /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 4, children: [
+        Icon,
+        label
+      ] }) })
+    }
+  );
+};
+module.exports = BreadcrumbItem;

package/dist/Breadcrumbs/BreadcrumbItem.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IBreadcrumbItemProps } from './types';
+declare const BreadcrumbItem: <ITEM>({ item, getItemIcon, onlyIcon: onlyIconProps, getItemLabel, getItemHref, onItemClick, size, getItemClassName, className, lastItem }: IBreadcrumbItemProps<ITEM>) => React.ReactElement;
+export default BreadcrumbItem;

package/dist/Breadcrumbs/BreadcrumbItem.es.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BreadcrumbItemStyled } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+import Button from "../Button/Button.es.js";
+import Flex from "../Flex/Flex.es.js";
+const BreadcrumbItem = ({
+  item,
+  getItemIcon,
+  onlyIcon: onlyIconProps,
+  getItemLabel,
+  getItemHref,
+  onItemClick,
+  size = "m",
+  getItemClassName,
+  className,
+  lastItem
+}) => {
+  const Icon = item && (getItemIcon == null ? void 0 : getItemIcon(item));
+  const onlyIcon = Icon && onlyIconProps;
+  const label = item && (getItemLabel == null ? void 0 : getItemLabel(item));
+  const href = item && (getItemHref == null ? void 0 : getItemHref(item));
+  const _className = item && (getItemClassName == null ? void 0 : getItemClassName(item));
+  const handleClick = (e) => {
+    onItemClick == null ? void 0 : onItemClick(item, e);
+  };
+  const linkProps = href ? { as: "a", href } : { as: "span" };
+  return /* @__PURE__ */ jsx(
+    BreadcrumbItemStyled,
+    {
+      className: `${className} ${_className ?? ""}`.trim(),
+      lastItem,
+      ...linkProps,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsx(Text, { size, children: onlyIcon ? /* @__PURE__ */ jsx(Button, { view: "icon", size, className: "quen-ui__breadcrumb--icon", children: Icon }) : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+        Icon,
+        label
+      ] }) })
+    }
+  );
+};
+export {
+  BreadcrumbItem as default
+};

package/dist/Breadcrumbs/Breadcrumbs.cjs.js

@@ -0,0 +1,48 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("./helpers.cjs.js");
+const BreadcrumbItem = require("./BreadcrumbItem.cjs.js");
+const styles = require("./styles.cjs.js");
+const Breadcrumbs = (props) => {
+  const {
+    items = [],
+    onItemClick,
+    getItemHref,
+    getItemOnClick,
+    className,
+    getItemClassName,
+    classNameItem,
+    getItemIcon,
+    getItemLabel,
+    size,
+    separator = "/",
+    onlyIconRoot,
+    ...otherProps
+  } = helpers.widthDefaultGetters(props);
+  const handleClick = (item, e) => {
+    var _a;
+    (_a = getItemOnClick(item)) == null ? void 0 : _a(e);
+    onItemClick == null ? void 0 : onItemClick(item, e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.BreadcrumbsStyled, { className, ...otherProps, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BreadcrumbItem,
+      {
+        className: classNameItem,
+        size,
+        item,
+        getItemHref,
+        getItemLabel,
+        getItemClassName,
+        getItemIcon,
+        onItemClick: handleClick,
+        onlyIcon: onlyIconRoot && index === 0,
+        lastItem: index === items.length - 1
+      },
+      getItemLabel(item)
+    ),
+    index + 1 < items.length && separator
+  ] }, getItemLabel(item))) });
+};
+module.exports = Breadcrumbs;

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { IBreadcrumbsProps, IBreadcrumbItemDefault } from './types';
+declare const Breadcrumbs: <Item = IBreadcrumbItemDefault>(props: IBreadcrumbsProps<Item>) => ReactElement;
+export default Breadcrumbs;

package/dist/Breadcrumbs/Breadcrumbs.es.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { widthDefaultGetters } from "./helpers.es.js";
+import BreadcrumbItem from "./BreadcrumbItem.es.js";
+import { BreadcrumbsStyled } from "./styles.es.js";
+const Breadcrumbs = (props) => {
+  const {
+    items = [],
+    onItemClick,
+    getItemHref,
+    getItemOnClick,
+    className,
+    getItemClassName,
+    classNameItem,
+    getItemIcon,
+    getItemLabel,
+    size,
+    separator = "/",
+    onlyIconRoot,
+    ...otherProps
+  } = widthDefaultGetters(props);
+  const handleClick = (item, e) => {
+    var _a;
+    (_a = getItemOnClick(item)) == null ? void 0 : _a(e);
+    onItemClick == null ? void 0 : onItemClick(item, e);
+  };
+  return /* @__PURE__ */ jsx(BreadcrumbsStyled, { className, ...otherProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BreadcrumbItem,
+      {
+        className: classNameItem,
+        size,
+        item,
+        getItemHref,
+        getItemLabel,
+        getItemClassName,
+        getItemIcon,
+        onItemClick: handleClick,
+        onlyIcon: onlyIconRoot && index === 0,
+        lastItem: index === items.length - 1
+      },
+      getItemLabel(item)
+    ),
+    index + 1 < items.length && separator
+  ] }, getItemLabel(item))) });
+};
+export {
+  Breadcrumbs as default
+};

package/dist/Breadcrumbs/helpers.cjs.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemIcon = (item) => item.icon;
+const defaultGetItemHref = (item) => item.href;
+const defaultGetItemClassname = (item) => item.className;
+const defaultGetItemOnClick = (item) => item.onClick;
+function widthDefaultGetters(props) {
+  return {
+    ...props,
+    getItemLabel: props.getItemLabel || defaultGetItemLabel,
+    getItemHref: props.getItemHref || defaultGetItemHref,
+    getItemIcon: props.getItemIcon || defaultGetItemIcon,
+    getItemClassName: props.getItemClassName || defaultGetItemClassname,
+    getItemOnClick: props.getItemOnClick || defaultGetItemOnClick
+  };
+}
+exports.widthDefaultGetters = widthDefaultGetters;

package/dist/Breadcrumbs/helpers.d.ts

@@ -0,0 +1,16 @@
+import { IBreadcrumbsProps, IBreadcrumbItemDefault, TBreadcrumbPropGetItemIcon, TBreadcrumbPropGetItemHref, TBreadcrumbPropGetItemLabel, TBreadcrumbPropGetItemOnClick, TBreadcrumbsPropGetItemClassname } from './types';
+export declare function widthDefaultGetters<ITEM>(props: IBreadcrumbsProps<ITEM>): {
+    getItemLabel: TBreadcrumbPropGetItemLabel<IBreadcrumbItemDefault> | TBreadcrumbPropGetItemLabel<ITEM>;
+    getItemHref: TBreadcrumbPropGetItemHref<IBreadcrumbItemDefault> | TBreadcrumbPropGetItemHref<ITEM>;
+    getItemIcon: TBreadcrumbPropGetItemIcon<IBreadcrumbItemDefault> | TBreadcrumbPropGetItemIcon<ITEM>;
+    getItemClassName: TBreadcrumbsPropGetItemClassname<IBreadcrumbItemDefault> | TBreadcrumbsPropGetItemClassname<ITEM>;
+    getItemOnClick: TBreadcrumbPropGetItemOnClick<IBreadcrumbItemDefault> | TBreadcrumbPropGetItemOnClick<ITEM>;
+    items: ITEM[];
+    size?: import('..').TQuenSize;
+    onItemClick?: import('./types').TBreadcrumbsPropOnItemClick<ITEM> | undefined;
+    className?: string;
+    classNameItem?: string;
+    separator?: React.ReactNode;
+    onlyIconRoot?: boolean;
+    style?: React.CSSProperties;
+};

package/dist/Breadcrumbs/helpers.es.js

@@ -0,0 +1,18 @@
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemIcon = (item) => item.icon;
+const defaultGetItemHref = (item) => item.href;
+const defaultGetItemClassname = (item) => item.className;
+const defaultGetItemOnClick = (item) => item.onClick;
+function widthDefaultGetters(props) {
+  return {
+    ...props,
+    getItemLabel: props.getItemLabel || defaultGetItemLabel,
+    getItemHref: props.getItemHref || defaultGetItemHref,
+    getItemIcon: props.getItemIcon || defaultGetItemIcon,
+    getItemClassName: props.getItemClassName || defaultGetItemClassname,
+    getItemOnClick: props.getItemOnClick || defaultGetItemOnClick
+  };
+}
+export {
+  widthDefaultGetters
+};

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from './Breadcrumbs';
+export type { IBreadcrumbItemProps, IBreadcrumbItemDefault, IBreadcrumbsProps, TBreadcrumbPropGetItemIcon, TBreadcrumbPropGetItemOnClick, TBreadcrumbsPropOnItemClick, TBreadcrumbPropGetItemHref, TBreadcrumbPropGetItemLabel, TBreadcrumbsPropGetItemClassname } from './types';

package/dist/Breadcrumbs/styles.cjs.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const BreadcrumbItemStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "lastItem"
+})`
+  cursor: pointer;
+  user-select: none;
+  
+  text-decoration: none;
+  
+  span {
+    display: flex;
+    align-items: center;
+  }
+  
+  ${({ lastItem }) => lastItem && styled.css`
+    color: ${({ theme }) => theme.colors.violet[9]};
+    span {
+      color: ${({ theme }) => theme.colors.violet[9]};
+    }
+  `};
+  
+  &:hover {
+    color: ${({ theme }) => theme.colors.grayViolet[6]};
+    span {
+      color: ${({ theme }) => theme.colors.grayViolet[6]};
+    }
+  }
+
+  .quen-ui__breadcrumb--icon {
+    svg {
+      color: ${({ theme }) => theme.textColor};
+    }
+  }
+  
+  svg {
+    color: currentColor;
+  }
+`;
+const BreadcrumbsStyled = styled.nav`
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+  
+  color: ${({ theme }) => theme.textColor};
+`;
+exports.BreadcrumbItemStyled = BreadcrumbItemStyled;
+exports.BreadcrumbsStyled = BreadcrumbsStyled;

package/dist/Breadcrumbs/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const BreadcrumbItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    lastItem: boolean;
+}>> & string;
+export declare const BreadcrumbsStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;