@elliemae/ds-breadcrumb 3.47.1 → 3.48.1

package/dist/cjs/DSBreadcrumb.js

@@ -42,21 +42,30 @@ var import_DSBreadcrumbItem = __toESM(require("./DSBreadcrumbItem.js"));
 var import_useKeyboardNavigation = require("./hooks/useKeyboardNavigation.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_styles = require("./styles.js");
-const htmlElements = ["nav", "div", "header", "footer", "main"];
+const htmlElements = ["nav", "div"];
+const NavContainer = (props2) => {
+  const { label, containerProps, as, children, ...rest } = props2;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, { "aria-label": label, ...rest, ...containerProps, as, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { "data-testid": "list-container", children }) });
+};
+const DivContainer = (props2) => {
+  const { label, containerProps, as, children, ...rest } = props2;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, { ...rest, ...containerProps, as, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { "data-testid": "list-container", "aria-label": label, children }) });
+};
 const DSBreadcrumb = (props2) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props2, import_react_desc_prop_types.defaultProps);
   const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;
-  const [addRef, onKeyDown] = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
+  const [addRef, onKeyDown] = (0, import_useKeyboardNavigation.useKeyboardNavigation)({ isTitle });
   const safeElement = (0, import_react.useMemo)(() => htmlElements.indexOf(as) > -1 ? as : "nav", [as]);
+  const Container = as === "nav" ? NavContainer : DivContainer;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styles.StyledContainer,
+    Container,
     {
       "data-testid": "breadcrumb-nav-container",
-      "aria-label": label,
+      label,
       ...rest,
-      ...containerProps,
+      containerProps,
       as: safeElement,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { "aria-label": label, "data-testid": "list-container", children: import_react.default.Children.map(
+      children: import_react.default.Children.map(
         children,
         (child, childIndex) => childIndex < children.length - 1 ? (0, import_react.cloneElement)(child, {
           childIndex,
@@ -69,7 +78,7 @@ const DSBreadcrumb = (props2) => {
           trailingSlash,
           isTitle
         })
-      ) })
+      )
     }
   );
 };
@@ -79,11 +88,9 @@ const props = {
   containerProps: import_ds_props_helpers.PropTypes.object.description("props injected to breadcrumb wrapper"),
   /**
    * Type of element you want the main container to be:
-   * 'nav', 'div', 'header', 'footer', 'main'
+   * 'nav', 'div'
    */
-  as: import_ds_props_helpers.PropTypes.string.description(
-    "Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'"
-  ),
+  as: import_ds_props_helpers.PropTypes.oneOf(["nav", "div"]).description("Type of element you want the main container to be: 'nav' or 'div'. Defaults to 'nav'.").defaultValue("nav"),
   /**
    * Whether to show the last element of the breadcrumb as a title
    * Also removes trailing slash to show last element as title

package/dist/cjs/DSBreadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSBreadcrumb.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { type WeakValidationMap, cloneElement, useMemo } from 'react';\nimport { PropTypes, describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport DSBreadcrumbItem from './DSBreadcrumbItem.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\nimport type { DSBreadcrumbT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\n\nimport { StyledContainer, StyledList } from './styles.js';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = (props: DSBreadcrumbT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbT.InternalProps>(props, defaultProps);\n  const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      data-testid=\"breadcrumb-nav-container\"\n      aria-label={label}\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList aria-label={label} data-testid=\"list-container\">\n        {React.Children.map(children, (child: React.ReactElement, childIndex) =>\n          childIndex < children.length - 1\n            ? cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n              })\n            : cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n                trailingSlash,\n                isTitle,\n              }),\n        )}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nconst props = {\n  /** props injected to breadcrumb wrapper */\n  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),\n  /**\n   * Type of element you want the main container to be:\n   * 'nav', 'div', 'header', 'footer', 'main'\n   */\n  as: PropTypes.string.description(\n    \"Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'\",\n  ),\n  /**\n   * Whether to show the last element of the breadcrumb as a title\n   * Also removes trailing slash to show last element as title\n   */\n  isTitle: PropTypes.bool.description(\n    'Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title',\n  ),\n  /** breadcrumb label */\n  label: PropTypes.string.description('breadcrumb label'),\n  /**\n   * Container items to wrap\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Container items to wrap'),\n};\n\nDSBreadcrumb.displayName = 'DSBreadcrumb';\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AA1BN,mBAAqE;AACrE,8BAAkE;AAClE,8BAA6B;AAC7B,mCAAsC;AAEtC,mCAA6B;AAE7B,oBAA4C;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAACA,WAA+B;AACnD,QAAM,wBAAoB,sDAA0DA,QAAO,yCAAY;AACvG,QAAM,EAAE,gBAAgB,IAAI,OAAO,eAAe,SAAS,UAAU,GAAG,KAAK,IAAI;AACjF,QAAM,CAAC,QAAQ,SAAS,QAAI,oDAAsB;AAElD,QAAM,kBAAc,sBAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI;AAAA,MAEJ,sDAAC,4BAAW,cAAY,OAAO,eAAY,kBACxC,uBAAAC,QAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,QAC3B,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC,QACD,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACP,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,OAAO,wBAAAC;AAEpB,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,kCAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF,IAAI,kCAAU,OAAO;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,kCAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA;AAAA,EAEA,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAItD,UAAU,kCAAU,QAAQ,kCAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
+  "sourcesContent": ["import React, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe, useMemoMergePropsWithDefault, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport DSBreadcrumbItem from './DSBreadcrumbItem.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\nimport type { DSBreadcrumbT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledList } from './styles.js';\n\nconst htmlElements = ['nav', 'div'] as const;\n\ntype ContainerProps = Omit<DSBreadcrumbT.InternalProps, 'isTitle' | 'trailingSlash'>;\n\nconst NavContainer = (props: ContainerProps) => {\n  const { label, containerProps, as, children, ...rest } = props;\n  return (\n    <StyledContainer aria-label={label} {...rest} {...containerProps} as={as}>\n      <StyledList data-testid=\"list-container\">{children}</StyledList>\n    </StyledContainer>\n  );\n};\n\nconst DivContainer = (props: ContainerProps) => {\n  const { label, containerProps, as, children, ...rest } = props;\n  return (\n    <StyledContainer {...rest} {...containerProps} as={as}>\n      <StyledList data-testid=\"list-container\" aria-label={label}>\n        {children}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nconst DSBreadcrumb = (props: DSBreadcrumbT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbT.InternalProps>(props, defaultProps);\n  const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;\n  const [addRef, onKeyDown] = useKeyboardNavigation({ isTitle });\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  const Container = as === 'nav' ? NavContainer : DivContainer;\n\n  return (\n    <Container\n      data-testid=\"breadcrumb-nav-container\"\n      label={label}\n      {...rest}\n      containerProps={containerProps}\n      as={safeElement}\n    >\n      {React.Children.map(children, (child: React.ReactElement, childIndex) =>\n        childIndex < children.length - 1\n          ? cloneElement(child, {\n              childIndex,\n              addRef,\n              onKeyDown,\n            })\n          : cloneElement(child, {\n              childIndex,\n              addRef,\n              onKeyDown,\n              trailingSlash,\n              isTitle,\n            }),\n      )}\n    </Container>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nconst props = {\n  /** props injected to breadcrumb wrapper */\n  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),\n  /**\n   * Type of element you want the main container to be:\n   * 'nav', 'div'\n   */\n  as: PropTypes.oneOf(['nav', 'div'])\n    .description(\"Type of element you want the main container to be: 'nav' or 'div'. Defaults to 'nav'.\")\n    .defaultValue('nav'),\n  /**\n   * Whether to show the last element of the breadcrumb as a title\n   * Also removes trailing slash to show last element as title\n   */\n  isTitle: PropTypes.bool.description(\n    'Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title',\n  ),\n  /** breadcrumb label */\n  label: PropTypes.string.description('breadcrumb label'),\n  /**\n   * Container items to wrap\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Container items to wrap'),\n};\n\nDSBreadcrumb.displayName = 'DSBreadcrumb';\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props as ValidationMap<unknown>;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBjB;AAhBN,mBAA6C;AAC7C,8BAAsF;AACtF,8BAA6B;AAC7B,mCAAsC;AAEtC,mCAA6B;AAC7B,oBAA4C;AAE5C,MAAM,eAAe,CAAC,OAAO,KAAK;AAIlC,MAAM,eAAe,CAACA,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD,SACE,4CAAC,iCAAgB,cAAY,OAAQ,GAAG,MAAO,GAAG,gBAAgB,IAChE,sDAAC,4BAAW,eAAY,kBAAkB,UAAS,GACrD;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD,SACE,4CAAC,iCAAiB,GAAG,MAAO,GAAG,gBAAgB,IAC7C,sDAAC,4BAAW,eAAY,kBAAiB,cAAY,OAClD,UACH,GACF;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA+B;AACnD,QAAM,wBAAoB,sDAA0DA,QAAO,yCAAY;AACvG,QAAM,EAAE,gBAAgB,IAAI,OAAO,eAAe,SAAS,UAAU,GAAG,KAAK,IAAI;AACjF,QAAM,CAAC,QAAQ,SAAS,QAAI,oDAAsB,EAAE,QAAQ,CAAC;AAE7D,QAAM,kBAAc,sBAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,QAAM,YAAY,OAAO,QAAQ,eAAe;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MAEH,uBAAAC,QAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,QAC3B,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC,QACD,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,OAAO,wBAAAC;AAEpB,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,kCAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF,IAAI,kCAAU,MAAM,CAAC,OAAO,KAAK,CAAC,EAC/B,YAAY,uFAAuF,EACnG,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB,SAAS,kCAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA;AAAA,EAEA,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAItD,UAAU,kCAAU,QAAQ,kCAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
   "names": ["props", "React", "DSBreadcrumbItem"]
 }

package/dist/cjs/DSBreadcrumbItem.js

@@ -35,29 +35,44 @@ __export(DSBreadcrumbItem_exports, {
 module.exports = __toCommonJS(DSBreadcrumbItem_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_styles = require("./styles.js");
 const DSBreadcrumbItem = (props2) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props2, import_react_desc_prop_types.defaultItemProps);
   const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } = propsWithDefaults;
+  const ariaCurrent = import_react.default.useMemo(() => {
+    if (active) {
+      return as === "button" ? "step" : "page";
+    }
+    return void 0;
+  }, [active, as]);
+  const handleOnClick = import_react.default.useCallback(
+    (e) => {
+      if (isTitle) return;
+      onClick(e);
+    },
+    [isTitle, onClick]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledCrumbWrapper,
     {
-      "aria-current": active ? "page" : void 0,
+      "aria-current": ariaCurrent,
       "data-testid": "breadcrumb-item-container",
       isTitle,
       trailingSlash,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_styles.StyledLink,
         {
+          "data-testid": "breadcrumb-item-content",
           variant: "link",
           component: as,
           href,
-          onClick,
-          tabIndex: 0,
+          onClick: handleOnClick,
+          tabIndex: isTitle ? -1 : 0,
           active,
-          onKeyDown: (e) => onKeyDown(e, childIndex ?? -1, onClick),
+          onKeyDown: (e) => onKeyDown(e, childIndex ?? -1, handleOnClick),
           isTitle,
           color,
           innerRef: addRef,
@@ -69,22 +84,25 @@ const DSBreadcrumbItem = (props2) => {
   );
 };
 const props = {
-  /** render as any html node */
-  as: import_ds_props_helpers.PropTypes.string.description("render as any html node"),
+  /**
+   * Type of element you want the item to be:
+   * 'a', 'button'
+   */
+  as: import_ds_props_helpers.PropTypes.oneOf(["a", "button"]).description('Type of element you want the item to be: "a" or "button". Defaults to "a"').defaultValue("a"),
   /** active item */
-  active: import_ds_props_helpers.PropTypes.bool.description("active item"),
+  active: import_ds_props_helpers.PropTypes.bool.description("Active item"),
   /** href link */
-  href: import_ds_props_helpers.PropTypes.string.description("href link"),
+  href: import_ds_props_helpers.PropTypes.string.description("Href link"),
   /** on click handler */
-  onClick: import_ds_props_helpers.PropTypes.func.description("on click handler"),
+  onClick: import_ds_props_helpers.PropTypes.func.description("On click handler"),
   /** style item as title */
-  isTitle: import_ds_props_helpers.PropTypes.bool.description("style item as title"),
+  isTitle: import_ds_props_helpers.PropTypes.bool.description("Style item as title"),
   /** add trailing slash */
-  trailingSlash: import_ds_props_helpers.PropTypes.bool.description("add trailing slash"),
+  trailingSlash: import_ds_props_helpers.PropTypes.bool.description("Add trailing slash"),
   /** item label */
-  label: import_ds_props_helpers.PropTypes.string.description("item label"),
+  label: import_ds_props_helpers.PropTypes.string.description("Item label"),
   /** link color */
-  color: import_ds_props_helpers.PropTypes.string.description("link color")
+  color: import_ds_props_helpers.PropTypes.string.description("Link color")
 };
 DSBreadcrumbItem.displayName = "DSBreadcrumbItem";
 const DSBreadcrumbItemWithSchema = (0, import_ds_props_helpers.describe)(DSBreadcrumbItem);

package/dist/cjs/DSBreadcrumbItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSBreadcrumbItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { type WeakValidationMap } from 'react';\nimport { PropTypes, describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\nimport { defaultItemProps } from './react-desc-prop-types.js';\n\nimport { StyledLink, StyledCrumbWrapper } from './styles.js';\n\nconst DSBreadcrumbItem = (props: DSBreadcrumbItemT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbItemT.InternalProps>(props, defaultItemProps);\n  const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } =\n    propsWithDefaults;\n  return (\n    <StyledCrumbWrapper\n      aria-current={active ? 'page' : undefined}\n      data-testid=\"breadcrumb-item-container\"\n      isTitle={isTitle}\n      trailingSlash={trailingSlash}\n    >\n      <StyledLink\n        variant=\"link\"\n        component={as}\n        href={href}\n        onClick={onClick}\n        tabIndex={0}\n        active={active}\n        onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex ?? -1, onClick)}\n        isTitle={isTitle}\n        color={color}\n        innerRef={addRef}\n        {...rest}\n      >\n        {label}\n      </StyledLink>\n    </StyledCrumbWrapper>\n  );\n};\n\nconst props = {\n  /** render as any html node */\n  as: PropTypes.string.description('render as any html node'),\n  /** active item */\n  active: PropTypes.bool.description('active item'),\n  /** href link */\n  href: PropTypes.string.description('href link'),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  /** style item as title */\n  isTitle: PropTypes.bool.description('style item as title'),\n  /** add trailing slash */\n  trailingSlash: PropTypes.bool.description('add trailing slash'),\n  /** item label */\n  label: PropTypes.string.description('item label'),\n  /** link color */\n  color: PropTypes.string.description('link color'),\n};\n\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBjB;AAjBN,8BAAkE;AAElE,mCAAiC;AAEjC,oBAA+C;AAE/C,MAAM,mBAAmB,CAACA,WAAmC;AAC3D,QAAM,wBAAoB,sDAA8DA,QAAO,6CAAgB;AAC/G,QAAM,EAAE,IAAI,QAAQ,MAAM,SAAS,WAAW,QAAQ,SAAS,eAAe,OAAO,YAAY,OAAO,GAAG,KAAK,IAC9G;AACF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,SAAS,SAAS;AAAA,MAChC,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAW,CAAC,MAA2B,UAAU,GAAG,cAAc,IAAI,OAAO;AAAA,UAC7E;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,IAAI,kCAAU,OAAO,YAAY,yBAAyB;AAAA;AAAA,EAE1D,QAAQ,kCAAU,KAAK,YAAY,aAAa;AAAA;AAAA,EAEhD,MAAM,kCAAU,OAAO,YAAY,WAAW;AAAA;AAAA,EAE9C,SAAS,kCAAU,KAAK,YAAY,kBAAkB;AAAA;AAAA,EAEtD,SAAS,kCAAU,KAAK,YAAY,qBAAqB;AAAA;AAAA,EAEzD,eAAe,kCAAU,KAAK,YAAY,oBAAoB;AAAA;AAAA,EAE9D,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,OAAO,kCAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
-  "names": ["props"]
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe, useMemoMergePropsWithDefault, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\nimport { defaultItemProps } from './react-desc-prop-types.js';\n\nimport { StyledLink, StyledCrumbWrapper } from './styles.js';\n\nconst DSBreadcrumbItem = (props: DSBreadcrumbItemT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbItemT.InternalProps>(props, defaultItemProps);\n  const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } =\n    propsWithDefaults;\n\n  const ariaCurrent = React.useMemo(() => {\n    if (active) {\n      return as === 'button' ? 'step' : 'page';\n    }\n    return undefined;\n  }, [active, as]);\n\n  const handleOnClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (isTitle) return;\n      onClick(e);\n    },\n    [isTitle, onClick],\n  );\n\n  return (\n    <StyledCrumbWrapper\n      aria-current={ariaCurrent}\n      data-testid=\"breadcrumb-item-container\"\n      isTitle={isTitle}\n      trailingSlash={trailingSlash}\n    >\n      <StyledLink\n        data-testid=\"breadcrumb-item-content\"\n        variant=\"link\"\n        component={as}\n        href={href}\n        onClick={handleOnClick}\n        tabIndex={isTitle ? -1 : 0}\n        active={active}\n        onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex ?? -1, handleOnClick)}\n        isTitle={isTitle}\n        color={color}\n        innerRef={addRef}\n        {...rest}\n      >\n        {label}\n      </StyledLink>\n    </StyledCrumbWrapper>\n  );\n};\n\nconst props = {\n  /**\n   * Type of element you want the item to be:\n   * 'a', 'button'\n   */\n  as: PropTypes.oneOf(['a', 'button'])\n    .description('Type of element you want the item to be: \"a\" or \"button\". Defaults to \"a\"')\n    .defaultValue('a'),\n  /** active item */\n  active: PropTypes.bool.description('Active item'),\n  /** href link */\n  href: PropTypes.string.description('Href link'),\n  /** on click handler */\n  onClick: PropTypes.func.description('On click handler'),\n  /** style item as title */\n  isTitle: PropTypes.bool.description('Style item as title'),\n  /** add trailing slash */\n  trailingSlash: PropTypes.bool.description('Add trailing slash'),\n  /** item label */\n  label: PropTypes.string.description('Item label'),\n  /** link color */\n  color: PropTypes.string.description('Link color'),\n};\n\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props as ValidationMap<unknown>;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCjB;AAlCN,mBAAkB;AAClB,8BAAsF;AAEtF,mCAAiC;AAEjC,oBAA+C;AAE/C,MAAM,mBAAmB,CAACA,WAAmC;AAC3D,QAAM,wBAAoB,sDAA8DA,QAAO,6CAAgB;AAC/G,QAAM,EAAE,IAAI,QAAQ,MAAM,SAAS,WAAW,QAAQ,SAAS,eAAe,OAAO,YAAY,OAAO,GAAG,KAAK,IAC9G;AAEF,QAAM,cAAc,aAAAC,QAAM,QAAQ,MAAM;AACtC,QAAI,QAAQ;AACV,aAAO,OAAO,WAAW,SAAS;AAAA,IACpC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,QAAS;AACb,cAAQ,CAAC;AAAA,IACX;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,SAAQ;AAAA,UACR,WAAW;AAAA,UACX;AAAA,UACA,SAAS;AAAA,UACT,UAAU,UAAU,KAAK;AAAA,UACzB;AAAA,UACA,WAAW,CAAC,MAA2B,UAAU,GAAG,cAAc,IAAI,aAAa;AAAA,UACnF;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,IAAI,kCAAU,MAAM,CAAC,KAAK,QAAQ,CAAC,EAChC,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA;AAAA,EAEnB,QAAQ,kCAAU,KAAK,YAAY,aAAa;AAAA;AAAA,EAEhD,MAAM,kCAAU,OAAO,YAAY,WAAW;AAAA;AAAA,EAE9C,SAAS,kCAAU,KAAK,YAAY,kBAAkB;AAAA;AAAA,EAEtD,SAAS,kCAAU,KAAK,YAAY,qBAAqB;AAAA;AAAA,EAEzD,eAAe,kCAAU,KAAK,YAAY,oBAAoB;AAAA;AAAA,EAE9D,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,OAAO,kCAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
+  "names": ["props", "React"]
 }

package/dist/cjs/hooks/useKeyboardNavigation.js

@@ -33,24 +33,30 @@ __export(useKeyboardNavigation_exports, {
 module.exports = __toCommonJS(useKeyboardNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-const useKeyboardNavigation = () => {
+const useKeyboardNavigation = ({ isTitle }) => {
   const componentsRef = (0, import_react.useRef)([]);
   const addRef = (0, import_react.useCallback)((ref) => {
     if (ref && !componentsRef.current.includes(ref)) {
       componentsRef.current.push(ref);
     }
   }, []);
-  const onKeyDown = (0, import_react.useCallback)((e, componentRefIndex, callback) => {
-    if (e.key === "ArrowDown" && componentsRef.current[componentRefIndex + 1]) {
-      componentsRef.current[componentRefIndex + 1].focus();
-      e.preventDefault();
-    } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
-      componentsRef.current[componentRefIndex - 1].focus();
-      e.preventDefault();
-    } else if (e.key === "Enter" || e.ctrlKey && e.altKey && e.code === "Space") {
-      callback();
-    }
-  }, []);
+  const onKeyDown = (0, import_react.useCallback)(
+    (e, componentRefIndex, callback) => {
+      if (e.key === "ArrowDown" && componentsRef.current[componentRefIndex + 1]) {
+        if (isTitle && componentRefIndex + 1 === componentsRef.current.length - 1) {
+          return;
+        }
+        componentsRef.current[componentRefIndex + 1].focus();
+        e.preventDefault();
+      } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
+        componentsRef.current[componentRefIndex - 1].focus();
+        e.preventDefault();
+      } else if (e.key === "Enter" || e.ctrlKey && e.altKey && e.code === "Space") {
+        callback(e);
+      }
+    },
+    [isTitle]
+  );
   return [addRef, onKeyDown];
 };
 //# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/cjs/hooks/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useRef, useCallback } from 'react';\n\nexport const useKeyboardNavigation = () => {\n  const componentsRef = useRef<HTMLAnchorElement[]>([]);\n\n  const addRef = useCallback((ref: HTMLAnchorElement) => {\n    if (ref && !componentsRef.current.includes(ref)) {\n      componentsRef.current.push(ref);\n    }\n  }, []);\n\n  const onKeyDown = useCallback((e: React.KeyboardEvent, componentRefIndex: number, callback: () => void) => {\n    if (e.key === 'ArrowDown' && componentsRef.current[componentRefIndex + 1]) {\n      componentsRef.current[componentRefIndex + 1].focus();\n      e.preventDefault();\n    } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {\n      componentsRef.current[componentRefIndex - 1].focus();\n      e.preventDefault();\n    } else if (e.key === 'Enter' || (e.ctrlKey && e.altKey && e.code === 'Space')) {\n      callback();\n    }\n  }, []);\n\n  return [addRef, onKeyDown];\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AAE7B,MAAM,wBAAwB,MAAM;AACzC,QAAM,oBAAgB,qBAA4B,CAAC,CAAC;AAEpD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,cAAc,QAAQ,SAAS,GAAG,GAAG;AAC/C,oBAAc,QAAQ,KAAK,GAAG;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAY,0BAAY,CAAC,GAAwB,mBAA2B,aAAyB;AACzG,QAAI,EAAE,QAAQ,eAAe,cAAc,QAAQ,oBAAoB,CAAC,GAAG;AACzE,oBAAc,QAAQ,oBAAoB,CAAC,EAAE,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,oBAAc,QAAQ,oBAAoB,CAAC,EAAE,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,WAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,SAAU;AAC7E,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,QAAQ,SAAS;AAC3B;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-params */\nimport type React from 'react';\nimport { useRef, useCallback } from 'react';\n\nexport const useKeyboardNavigation = ({ isTitle }: { isTitle: boolean }) => {\n  const componentsRef = useRef<HTMLAnchorElement[]>([]);\n\n  const addRef = useCallback((ref: HTMLAnchorElement) => {\n    if (ref && !componentsRef.current.includes(ref)) {\n      componentsRef.current.push(ref);\n    }\n  }, []);\n\n  const onKeyDown = useCallback(\n    (\n      e: React.KeyboardEvent,\n      componentRefIndex: number,\n      callback: (e: React.MouseEvent | React.KeyboardEvent) => void,\n    ) => {\n      if (e.key === 'ArrowDown' && componentsRef.current[componentRefIndex + 1]) {\n        if (isTitle && componentRefIndex + 1 === componentsRef.current.length - 1) {\n          // If the 'isTitle' flag is set to true, the last link is not an interactive link so we do not focus it\n          return;\n        }\n        componentsRef.current[componentRefIndex + 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {\n        componentsRef.current[componentRefIndex - 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'Enter' || (e.ctrlKey && e.altKey && e.code === 'Space')) {\n        callback(e);\n      }\n    },\n    [isTitle],\n  );\n\n  return [addRef, onKeyDown];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAoC;AAE7B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,MAA4B;AAC1E,QAAM,oBAAgB,qBAA4B,CAAC,CAAC;AAEpD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,cAAc,QAAQ,SAAS,GAAG,GAAG;AAC/C,oBAAc,QAAQ,KAAK,GAAG;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAY;AAAA,IAChB,CACE,GACA,mBACA,aACG;AACH,UAAI,EAAE,QAAQ,eAAe,cAAc,QAAQ,oBAAoB,CAAC,GAAG;AACzE,YAAI,WAAW,oBAAoB,MAAM,cAAc,QAAQ,SAAS,GAAG;AAEzE;AAAA,QACF;AACA,sBAAc,QAAQ,oBAAoB,CAAC,EAAE,MAAM;AACnD,UAAE,eAAe;AAAA,MACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,sBAAc,QAAQ,oBAAoB,CAAC,EAAE,MAAM;AACnD,UAAE,eAAe;AAAA,MACnB,WAAW,EAAE,QAAQ,WAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,SAAU;AAC7E,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,CAAC,QAAQ,SAAS;AAC3B;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb.js';\ntype SafeComponentsT = (typeof htmlElements)[number];\n\ntype SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';\n\nexport const defaultProps: DSBreadcrumbT.DefaultProps = {\n  containerProps: {},\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n};\n\nexport const defaultItemProps: DSBreadcrumbItemT.DefaultProps = {\n  active: false,\n  as: 'a',\n  onKeyDown: () => null,\n  onClick: () => null,\n  label: '',\n  childIndex: -1,\n};\n\ndeclare namespace DSBreadcrumbT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    as: SafeComponentsT;\n    label: string;\n    isTitle: boolean;\n    trailingSlash: boolean;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n}\n\ndeclare namespace DSBreadcrumbItemT {\n  export interface DefaultProps {\n    active: boolean;\n    as: SafeItemComponentT;\n    onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: () => void) => void;\n    onClick: () => void;\n    label: string;\n    childIndex: number;\n  }\n\n  export interface OptionalProps {\n    addRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    color?: string;\n    href?: string;\n    isTitle?: boolean;\n    trailingSlash?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb.js';\ntype SafeComponentsT = (typeof htmlElements)[number];\n\ntype SafeItemComponentT = 'a' | 'button';\n\nexport const defaultProps: DSBreadcrumbT.DefaultProps = {\n  containerProps: {},\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n};\n\nexport const defaultItemProps: DSBreadcrumbItemT.DefaultProps = {\n  active: false,\n  as: 'a',\n  onKeyDown: () => null,\n  onClick: () => null,\n  label: '',\n  childIndex: -1,\n};\n\ndeclare namespace DSBreadcrumbT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    as: SafeComponentsT;\n    label: string;\n    isTitle: boolean;\n    trailingSlash: boolean;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n}\n\ndeclare namespace DSBreadcrumbItemT {\n  export interface DefaultProps {\n    active: boolean;\n    as: SafeItemComponentT;\n    onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: (e: React.MouseEvent) => void) => void;\n    onClick: (e: React.MouseEvent) => void;\n    label: string;\n    childIndex: number;\n  }\n\n  export interface OptionalProps {\n    addRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    color?: string;\n    href?: string;\n    isTitle?: boolean;\n    trailingSlash?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOhB,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB;AAEO,MAAM,mBAAmD;AAAA,EAC9D,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,YAAY;AACd;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -97,13 +97,20 @@ const StyledLink = (0, import_ds_system.styled)(import_ds_typography.DSTypograph
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   color: ${({ theme, active, color = "", isTitle }) => handleColor(theme, !!active, color, !!isTitle)};
   &:hover {
-    color: ${({ theme, color }) => color || theme.colors.brand[800]};
-    cursor: pointer;
-    ${({ theme, color }) => `-webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]}`};
+    ${({ theme, color, isTitle }) => isTitle ? `
+          color: ${theme.colors.neutral[700]};
+          cursor: default;` : `
+          color: ${color || theme.colors.brand[800]};
+          cursor: pointer;
+          -webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]};
+    `}
   }
   &:focus {
-    ${({ theme }) => `border: 2px solid ${theme.colors.brand[700]};`}
-    border-radius: 2px;
+    ${({ theme, isTitle }) => isTitle ? `
+         color: ${theme.colors.neutral[700]};` : `
+        border: 2px solid ${theme.colors.brand[700]};
+        border-radius: 2px;
+    `}
   }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n  if (isActive) return theme.colors.neutral[800];\n  if (color) return color;\n  if (isTitle) return theme.colors.neutral[700];\n  return theme.colors.brand[600];\n};\n\nconst StyledList = styled.ol`\n  width: 100%;\n  list-style: none;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  li:first-child * {\n    margin-left: 0;\n  }\n`;\n\nconst StyledCrumbWrapper = styled.li<Partial<DSBreadcrumbItemT.Props>>`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 20;\n  transition: flex-shrink 0.1s cubic-bezier(0.64, 0, 0.35, 1);\n  min-height: 1.231rem;\n  min-width: 10px;\n  &:focus-within {\n    flex-shrink: 0;\n  }\n  &:hover {\n    flex-shrink: 0;\n  }\n  ${({ theme, isTitle, trailingSlash }) =>\n    isTitle || !trailingSlash\n      ? `&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `\n      : `&:after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `}\n`;\n\nconst StyledContainer = styled.nav`\n  display: flex;\n  align-items: center;\n  padding: 0;\n`;\n\nconst StyledLink = styled(DSTypography)<Partial<DSBreadcrumbItemT.Props>>`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-decoration: none;\n  outline: none;\n  margin: 0 2px;\n  border: 2px solid transparent;\n  -webkit-text-stroke: 0.4px transparent;\n  line-height: 1.5385rem;\n  background: transparent;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme, active, color = '', isTitle }) => handleColor(theme, !!active, color, !!isTitle)};\n  &:hover {\n    color: ${({ theme, color }) => color || theme.colors.brand[800]};\n    cursor: pointer;\n    ${({ theme, color }) => `-webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]}`};\n  }\n  &:focus {\n    ${({ theme }) => `border: 2px solid ${theme.colors.brand[700]};`}\n    border-radius: 2px;\n  }\n`;\n\nexport { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,2BAA6B;AAG7B,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,MAAI,MAAO,QAAO;AAClB,MAAI,QAAS,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC5C,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B;AAEA,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa9B,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,MAG9B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,GAEnC;AAAA;AAGH,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,iBAAa,yBAAO,iCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAWrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA,WAC9C,CAAC,EAAE,OAAO,QAAQ,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,CAAC;AAAA;AAAA,aAExF,CAAC,EAAE,OAAO,MAAM,MAAM,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,MAE7D,CAAC,EAAE,OAAO,MAAM,MAAM,8BAA8B,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,MAGtF,CAAC,EAAE,MAAM,MAAM,qBAAqB,MAAM,OAAO,MAAM,GAAG,CAAC,GAAG;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n  if (isActive) return theme.colors.neutral[800];\n  if (color) return color;\n  if (isTitle) return theme.colors.neutral[700];\n  return theme.colors.brand[600];\n};\n\nconst StyledList = styled.ol`\n  width: 100%;\n  list-style: none;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  li:first-child * {\n    margin-left: 0;\n  }\n`;\n\nconst StyledCrumbWrapper = styled.li<Partial<DSBreadcrumbItemT.Props>>`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 20;\n  transition: flex-shrink 0.1s cubic-bezier(0.64, 0, 0.35, 1);\n  min-height: 1.231rem;\n  min-width: 10px;\n  &:focus-within {\n    flex-shrink: 0;\n  }\n  &:hover {\n    flex-shrink: 0;\n  }\n  ${({ theme, isTitle, trailingSlash }) =>\n    isTitle || !trailingSlash\n      ? `&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `\n      : `&:after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `}\n`;\n\nconst StyledContainer = styled.nav`\n  display: flex;\n  align-items: center;\n  padding: 0;\n`;\n\nconst StyledLink = styled(DSTypography)<Partial<DSBreadcrumbItemT.Props>>`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-decoration: none;\n  outline: none;\n  margin: 0 2px;\n  border: 2px solid transparent;\n  -webkit-text-stroke: 0.4px transparent;\n  line-height: 1.5385rem;\n  background: transparent;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme, active, color = '', isTitle }) => handleColor(theme, !!active, color, !!isTitle)};\n  &:hover {\n    ${({ theme, color, isTitle }) =>\n      isTitle\n        ? `\n          color: ${theme.colors.neutral[700]};\n          cursor: default;`\n        : `\n          color: ${color || theme.colors.brand[800]};\n          cursor: pointer;\n          -webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]};\n    `}\n  }\n  &:focus {\n    ${({ theme, isTitle }) =>\n      isTitle\n        ? `\n         color: ${theme.colors.neutral[700]};`\n        : `\n        border: 2px solid ${theme.colors.brand[700]};\n        border-radius: 2px;\n    `}\n  }\n`;\n\nexport { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,2BAA6B;AAG7B,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,MAAI,MAAO,QAAO;AAClB,MAAI,QAAS,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC5C,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B;AAEA,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa9B,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,MAG9B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,GAEnC;AAAA;AAGH,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,iBAAa,yBAAO,iCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAWrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA,WAC9C,CAAC,EAAE,OAAO,QAAQ,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,CAAC;AAAA;AAAA,MAE/F,CAAC,EAAE,OAAO,OAAO,QAAQ,MACzB,UACI;AAAA,mBACS,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,8BAElC;AAAA,mBACS,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,uCAEZ,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,KAClE;AAAA;AAAA;AAAA,MAGC,CAAC,EAAE,OAAO,QAAQ,MAClB,UACI;AAAA,kBACQ,MAAM,OAAO,QAAQ,GAAG,CAAC,MACjC;AAAA,4BACkB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,KAE9C;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-breadcrumb-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-breadcrumb-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBreadcrumb, DSBreadcrumbItem } from '../index.js';\nimport type { DSBreadcrumbT, DSBreadcrumbItemT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBreadcrumbT.Props;\ntype ComponentPropsInternals = DSBreadcrumbT.InternalProps;\ntype ComponentPropsDefaultProps = DSBreadcrumbT.DefaultProps;\ntype ComponentPropsRequiredProps = DSBreadcrumbT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: [],\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBreadcrumb {...testExplicitDefinition} />\n    <DSBreadcrumb {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSBreadcrumb as=\"nav\" label=\"Breadcrumb\" isTitle={false} trailingSlash={true} containerProps={{}}>\n      <DSBreadcrumbItem href=\"/\" label=\"Home\" />\n      <DSBreadcrumbItem href=\"/home\" label=\"Home2\" />\n    </DSBreadcrumb>\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACoErB;AAnEF,eAA+C;AAS/C,MAAM,oBAAiD;AAAA,EACrD,UAAU,CAAC;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,yBAAc,GAAG,wBAAwB;AAAA,EAC1C,4CAAC,yBAAc,GAAG,8BAA8B;AAAA,EAEhD,6CAAC,yBAAa,IAAG,OAAM,OAAM,cAAa,SAAS,OAAO,eAAe,MAAM,gBAAgB,CAAC,GAC9F;AAAA,gDAAC,6BAAiB,MAAK,KAAI,OAAM,QAAO;AAAA,IACxC,4CAAC,6BAAiB,MAAK,SAAQ,OAAM,SAAQ;AAAA,KAC/C;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBreadcrumb, DSBreadcrumbItem } from '../index.js';\nimport type { DSBreadcrumbT, DSBreadcrumbItemT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBreadcrumbT.Props;\ntype ComponentPropsInternals = DSBreadcrumbT.InternalProps;\ntype ComponentPropsDefaultProps = DSBreadcrumbT.DefaultProps;\ntype ComponentPropsRequiredProps = DSBreadcrumbT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: [],\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBreadcrumb {...testExplicitDefinition} />\n    <DSBreadcrumb {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSBreadcrumb as=\"nav\" label=\"Breadcrumb\" isTitle={false} trailingSlash containerProps={{}}>\n      <DSBreadcrumbItem href=\"/\" label=\"Home\" />\n      <DSBreadcrumbItem href=\"/home\" label=\"Home2\" />\n    </DSBreadcrumb>\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACoErB;AAnEF,eAA+C;AAS/C,MAAM,oBAAiD;AAAA,EACrD,UAAU,CAAC;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,yBAAc,GAAG,wBAAwB;AAAA,EAC1C,4CAAC,yBAAc,GAAG,8BAA8B;AAAA,EAEhD,6CAAC,yBAAa,IAAG,OAAM,OAAM,cAAa,SAAS,OAAO,eAAa,MAAC,gBAAgB,CAAC,GACvF;AAAA,gDAAC,6BAAiB,MAAK,KAAI,OAAM,QAAO;AAAA,IACxC,4CAAC,6BAAiB,MAAK,SAAQ,OAAM,SAAQ;AAAA,KAC/C;AAAA,GACF;",
   "names": []
 }

package/dist/esm/DSBreadcrumb.js

@@ -6,21 +6,30 @@ import DSBreadcrumbItem from "./DSBreadcrumbItem.js";
 import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation.js";
 import { defaultProps } from "./react-desc-prop-types.js";
 import { StyledContainer, StyledList } from "./styles.js";
-const htmlElements = ["nav", "div", "header", "footer", "main"];
+const htmlElements = ["nav", "div"];
+const NavContainer = (props2) => {
+  const { label, containerProps, as, children, ...rest } = props2;
+  return /* @__PURE__ */ jsx(StyledContainer, { "aria-label": label, ...rest, ...containerProps, as, children: /* @__PURE__ */ jsx(StyledList, { "data-testid": "list-container", children }) });
+};
+const DivContainer = (props2) => {
+  const { label, containerProps, as, children, ...rest } = props2;
+  return /* @__PURE__ */ jsx(StyledContainer, { ...rest, ...containerProps, as, children: /* @__PURE__ */ jsx(StyledList, { "data-testid": "list-container", "aria-label": label, children }) });
+};
 const DSBreadcrumb = (props2) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props2, defaultProps);
   const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;
-  const [addRef, onKeyDown] = useKeyboardNavigation();
+  const [addRef, onKeyDown] = useKeyboardNavigation({ isTitle });
   const safeElement = useMemo(() => htmlElements.indexOf(as) > -1 ? as : "nav", [as]);
+  const Container = as === "nav" ? NavContainer : DivContainer;
   return /* @__PURE__ */ jsx(
-    StyledContainer,
+    Container,
     {
       "data-testid": "breadcrumb-nav-container",
-      "aria-label": label,
+      label,
       ...rest,
-      ...containerProps,
+      containerProps,
       as: safeElement,
-      children: /* @__PURE__ */ jsx(StyledList, { "aria-label": label, "data-testid": "list-container", children: React2.Children.map(
+      children: React2.Children.map(
         children,
         (child, childIndex) => childIndex < children.length - 1 ? cloneElement(child, {
           childIndex,
@@ -33,7 +42,7 @@ const DSBreadcrumb = (props2) => {
           trailingSlash,
           isTitle
         })
-      ) })
+      )
     }
   );
 };
@@ -43,11 +52,9 @@ const props = {
   containerProps: PropTypes.object.description("props injected to breadcrumb wrapper"),
   /**
    * Type of element you want the main container to be:
-   * 'nav', 'div', 'header', 'footer', 'main'
+   * 'nav', 'div'
    */
-  as: PropTypes.string.description(
-    "Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'"
-  ),
+  as: PropTypes.oneOf(["nav", "div"]).description("Type of element you want the main container to be: 'nav' or 'div'. Defaults to 'nav'.").defaultValue("nav"),
   /**
    * Whether to show the last element of the breadcrumb as a title
    * Also removes trailing slash to show last element as title

package/dist/esm/DSBreadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBreadcrumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { type WeakValidationMap, cloneElement, useMemo } from 'react';\nimport { PropTypes, describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport DSBreadcrumbItem from './DSBreadcrumbItem.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\nimport type { DSBreadcrumbT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\n\nimport { StyledContainer, StyledList } from './styles.js';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = (props: DSBreadcrumbT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbT.InternalProps>(props, defaultProps);\n  const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      data-testid=\"breadcrumb-nav-container\"\n      aria-label={label}\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList aria-label={label} data-testid=\"list-container\">\n        {React.Children.map(children, (child: React.ReactElement, childIndex) =>\n          childIndex < children.length - 1\n            ? cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n              })\n            : cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n                trailingSlash,\n                isTitle,\n              }),\n        )}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nconst props = {\n  /** props injected to breadcrumb wrapper */\n  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),\n  /**\n   * Type of element you want the main container to be:\n   * 'nav', 'div', 'header', 'footer', 'main'\n   */\n  as: PropTypes.string.description(\n    \"Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'\",\n  ),\n  /**\n   * Whether to show the last element of the breadcrumb as a title\n   * Also removes trailing slash to show last element as title\n   */\n  isTitle: PropTypes.bool.description(\n    'Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title',\n  ),\n  /** breadcrumb label */\n  label: PropTypes.string.description('breadcrumb label'),\n  /**\n   * Container items to wrap\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Container items to wrap'),\n};\n\nDSBreadcrumb.displayName = 'DSBreadcrumb';\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0BjB;AA1BN,OAAOA,UAAiC,cAAc,eAAe;AACrE,SAAS,WAAW,UAAU,oCAAoC;AAClE,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAEtC,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB,kBAAkB;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAACC,WAA+B;AACnD,QAAM,oBAAoB,6BAA0DA,QAAO,YAAY;AACvG,QAAM,EAAE,gBAAgB,IAAI,OAAO,eAAe,SAAS,UAAU,GAAG,KAAK,IAAI;AACjF,QAAM,CAAC,QAAQ,SAAS,IAAI,sBAAsB;AAElD,QAAM,cAAc,QAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI;AAAA,MAEJ,8BAAC,cAAW,cAAY,OAAO,eAAY,kBACxC,UAAAD,OAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,IAC3B,aAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC,IACD,aAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACP,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,OAAO;AAEpB,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF,IAAI,UAAU,OAAO;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA;AAAA,EAEA,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAItD,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe, useMemoMergePropsWithDefault, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport DSBreadcrumbItem from './DSBreadcrumbItem.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\nimport type { DSBreadcrumbT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledList } from './styles.js';\n\nconst htmlElements = ['nav', 'div'] as const;\n\ntype ContainerProps = Omit<DSBreadcrumbT.InternalProps, 'isTitle' | 'trailingSlash'>;\n\nconst NavContainer = (props: ContainerProps) => {\n  const { label, containerProps, as, children, ...rest } = props;\n  return (\n    <StyledContainer aria-label={label} {...rest} {...containerProps} as={as}>\n      <StyledList data-testid=\"list-container\">{children}</StyledList>\n    </StyledContainer>\n  );\n};\n\nconst DivContainer = (props: ContainerProps) => {\n  const { label, containerProps, as, children, ...rest } = props;\n  return (\n    <StyledContainer {...rest} {...containerProps} as={as}>\n      <StyledList data-testid=\"list-container\" aria-label={label}>\n        {children}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nconst DSBreadcrumb = (props: DSBreadcrumbT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbT.InternalProps>(props, defaultProps);\n  const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;\n  const [addRef, onKeyDown] = useKeyboardNavigation({ isTitle });\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  const Container = as === 'nav' ? NavContainer : DivContainer;\n\n  return (\n    <Container\n      data-testid=\"breadcrumb-nav-container\"\n      label={label}\n      {...rest}\n      containerProps={containerProps}\n      as={safeElement}\n    >\n      {React.Children.map(children, (child: React.ReactElement, childIndex) =>\n        childIndex < children.length - 1\n          ? cloneElement(child, {\n              childIndex,\n              addRef,\n              onKeyDown,\n            })\n          : cloneElement(child, {\n              childIndex,\n              addRef,\n              onKeyDown,\n              trailingSlash,\n              isTitle,\n            }),\n      )}\n    </Container>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nconst props = {\n  /** props injected to breadcrumb wrapper */\n  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),\n  /**\n   * Type of element you want the main container to be:\n   * 'nav', 'div'\n   */\n  as: PropTypes.oneOf(['nav', 'div'])\n    .description(\"Type of element you want the main container to be: 'nav' or 'div'. Defaults to 'nav'.\")\n    .defaultValue('nav'),\n  /**\n   * Whether to show the last element of the breadcrumb as a title\n   * Also removes trailing slash to show last element as title\n   */\n  isTitle: PropTypes.bool.description(\n    'Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title',\n  ),\n  /** breadcrumb label */\n  label: PropTypes.string.description('breadcrumb label'),\n  /**\n   * Container items to wrap\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Container items to wrap'),\n};\n\nDSBreadcrumb.displayName = 'DSBreadcrumb';\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props as ValidationMap<unknown>;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgBjB;AAhBN,OAAOA,UAAS,cAAc,eAAe;AAC7C,SAAS,WAAW,UAAU,oCAAwD;AACtF,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAEtC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,kBAAkB;AAE5C,MAAM,eAAe,CAAC,OAAO,KAAK;AAIlC,MAAM,eAAe,CAACC,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD,SACE,oBAAC,mBAAgB,cAAY,OAAQ,GAAG,MAAO,GAAG,gBAAgB,IAChE,8BAAC,cAAW,eAAY,kBAAkB,UAAS,GACrD;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD,SACE,oBAAC,mBAAiB,GAAG,MAAO,GAAG,gBAAgB,IAC7C,8BAAC,cAAW,eAAY,kBAAiB,cAAY,OAClD,UACH,GACF;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA+B;AACnD,QAAM,oBAAoB,6BAA0DA,QAAO,YAAY;AACvG,QAAM,EAAE,gBAAgB,IAAI,OAAO,eAAe,SAAS,UAAU,GAAG,KAAK,IAAI;AACjF,QAAM,CAAC,QAAQ,SAAS,IAAI,sBAAsB,EAAE,QAAQ,CAAC;AAE7D,QAAM,cAAc,QAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,QAAM,YAAY,OAAO,QAAQ,eAAe;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MAEH,UAAAD,OAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,IAC3B,aAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC,IACD,aAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,OAAO;AAEpB,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF,IAAI,UAAU,MAAM,CAAC,OAAO,KAAK,CAAC,EAC/B,YAAY,uFAAuF,EACnG,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA;AAAA,EAEA,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAItD,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
   "names": ["React", "props"]
 }

package/dist/esm/DSBreadcrumbItem.js

@@ -1,28 +1,43 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import React2 from "react";
 import { PropTypes, describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { defaultItemProps } from "./react-desc-prop-types.js";
 import { StyledLink, StyledCrumbWrapper } from "./styles.js";
 const DSBreadcrumbItem = (props2) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props2, defaultItemProps);
   const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } = propsWithDefaults;
+  const ariaCurrent = React2.useMemo(() => {
+    if (active) {
+      return as === "button" ? "step" : "page";
+    }
+    return void 0;
+  }, [active, as]);
+  const handleOnClick = React2.useCallback(
+    (e) => {
+      if (isTitle) return;
+      onClick(e);
+    },
+    [isTitle, onClick]
+  );
   return /* @__PURE__ */ jsx(
     StyledCrumbWrapper,
     {
-      "aria-current": active ? "page" : void 0,
+      "aria-current": ariaCurrent,
       "data-testid": "breadcrumb-item-container",
       isTitle,
       trailingSlash,
       children: /* @__PURE__ */ jsx(
         StyledLink,
         {
+          "data-testid": "breadcrumb-item-content",
           variant: "link",
           component: as,
           href,
-          onClick,
-          tabIndex: 0,
+          onClick: handleOnClick,
+          tabIndex: isTitle ? -1 : 0,
           active,
-          onKeyDown: (e) => onKeyDown(e, childIndex ?? -1, onClick),
+          onKeyDown: (e) => onKeyDown(e, childIndex ?? -1, handleOnClick),
           isTitle,
           color,
           innerRef: addRef,
@@ -34,22 +49,25 @@ const DSBreadcrumbItem = (props2) => {
   );
 };
 const props = {
-  /** render as any html node */
-  as: PropTypes.string.description("render as any html node"),
+  /**
+   * Type of element you want the item to be:
+   * 'a', 'button'
+   */
+  as: PropTypes.oneOf(["a", "button"]).description('Type of element you want the item to be: "a" or "button". Defaults to "a"').defaultValue("a"),
   /** active item */
-  active: PropTypes.bool.description("active item"),
+  active: PropTypes.bool.description("Active item"),
   /** href link */
-  href: PropTypes.string.description("href link"),
+  href: PropTypes.string.description("Href link"),
   /** on click handler */
-  onClick: PropTypes.func.description("on click handler"),
+  onClick: PropTypes.func.description("On click handler"),
   /** style item as title */
-  isTitle: PropTypes.bool.description("style item as title"),
+  isTitle: PropTypes.bool.description("Style item as title"),
   /** add trailing slash */
-  trailingSlash: PropTypes.bool.description("add trailing slash"),
+  trailingSlash: PropTypes.bool.description("Add trailing slash"),
   /** item label */
-  label: PropTypes.string.description("item label"),
+  label: PropTypes.string.description("Item label"),
   /** link color */
-  color: PropTypes.string.description("link color")
+  color: PropTypes.string.description("Link color")
 };
 DSBreadcrumbItem.displayName = "DSBreadcrumbItem";
 const DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);

package/dist/esm/DSBreadcrumbItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBreadcrumbItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { type WeakValidationMap } from 'react';\nimport { PropTypes, describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\nimport { defaultItemProps } from './react-desc-prop-types.js';\n\nimport { StyledLink, StyledCrumbWrapper } from './styles.js';\n\nconst DSBreadcrumbItem = (props: DSBreadcrumbItemT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbItemT.InternalProps>(props, defaultItemProps);\n  const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } =\n    propsWithDefaults;\n  return (\n    <StyledCrumbWrapper\n      aria-current={active ? 'page' : undefined}\n      data-testid=\"breadcrumb-item-container\"\n      isTitle={isTitle}\n      trailingSlash={trailingSlash}\n    >\n      <StyledLink\n        variant=\"link\"\n        component={as}\n        href={href}\n        onClick={onClick}\n        tabIndex={0}\n        active={active}\n        onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex ?? -1, onClick)}\n        isTitle={isTitle}\n        color={color}\n        innerRef={addRef}\n        {...rest}\n      >\n        {label}\n      </StyledLink>\n    </StyledCrumbWrapper>\n  );\n};\n\nconst props = {\n  /** render as any html node */\n  as: PropTypes.string.description('render as any html node'),\n  /** active item */\n  active: PropTypes.bool.description('active item'),\n  /** href link */\n  href: PropTypes.string.description('href link'),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  /** style item as title */\n  isTitle: PropTypes.bool.description('style item as title'),\n  /** add trailing slash */\n  trailingSlash: PropTypes.bool.description('add trailing slash'),\n  /** item label */\n  label: PropTypes.string.description('item label'),\n  /** link color */\n  color: PropTypes.string.description('link color'),\n};\n\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBjB;AAjBN,SAAS,WAAW,UAAU,oCAAoC;AAElE,SAAS,wBAAwB;AAEjC,SAAS,YAAY,0BAA0B;AAE/C,MAAM,mBAAmB,CAACA,WAAmC;AAC3D,QAAM,oBAAoB,6BAA8DA,QAAO,gBAAgB;AAC/G,QAAM,EAAE,IAAI,QAAQ,MAAM,SAAS,WAAW,QAAQ,SAAS,eAAe,OAAO,YAAY,OAAO,GAAG,KAAK,IAC9G;AACF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,SAAS,SAAS;AAAA,MAChC,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAW,CAAC,MAA2B,UAAU,GAAG,cAAc,IAAI,OAAO;AAAA,UAC7E;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,IAAI,UAAU,OAAO,YAAY,yBAAyB;AAAA;AAAA,EAE1D,QAAQ,UAAU,KAAK,YAAY,aAAa;AAAA;AAAA,EAEhD,MAAM,UAAU,OAAO,YAAY,WAAW;AAAA;AAAA,EAE9C,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,qBAAqB;AAAA;AAAA,EAEzD,eAAe,UAAU,KAAK,YAAY,oBAAoB;AAAA;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,OAAO,UAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
-  "names": ["props"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe, useMemoMergePropsWithDefault, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\nimport { defaultItemProps } from './react-desc-prop-types.js';\n\nimport { StyledLink, StyledCrumbWrapper } from './styles.js';\n\nconst DSBreadcrumbItem = (props: DSBreadcrumbItemT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbItemT.InternalProps>(props, defaultItemProps);\n  const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } =\n    propsWithDefaults;\n\n  const ariaCurrent = React.useMemo(() => {\n    if (active) {\n      return as === 'button' ? 'step' : 'page';\n    }\n    return undefined;\n  }, [active, as]);\n\n  const handleOnClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (isTitle) return;\n      onClick(e);\n    },\n    [isTitle, onClick],\n  );\n\n  return (\n    <StyledCrumbWrapper\n      aria-current={ariaCurrent}\n      data-testid=\"breadcrumb-item-container\"\n      isTitle={isTitle}\n      trailingSlash={trailingSlash}\n    >\n      <StyledLink\n        data-testid=\"breadcrumb-item-content\"\n        variant=\"link\"\n        component={as}\n        href={href}\n        onClick={handleOnClick}\n        tabIndex={isTitle ? -1 : 0}\n        active={active}\n        onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex ?? -1, handleOnClick)}\n        isTitle={isTitle}\n        color={color}\n        innerRef={addRef}\n        {...rest}\n      >\n        {label}\n      </StyledLink>\n    </StyledCrumbWrapper>\n  );\n};\n\nconst props = {\n  /**\n   * Type of element you want the item to be:\n   * 'a', 'button'\n   */\n  as: PropTypes.oneOf(['a', 'button'])\n    .description('Type of element you want the item to be: \"a\" or \"button\". Defaults to \"a\"')\n    .defaultValue('a'),\n  /** active item */\n  active: PropTypes.bool.description('Active item'),\n  /** href link */\n  href: PropTypes.string.description('Href link'),\n  /** on click handler */\n  onClick: PropTypes.func.description('On click handler'),\n  /** style item as title */\n  isTitle: PropTypes.bool.description('Style item as title'),\n  /** add trailing slash */\n  trailingSlash: PropTypes.bool.description('Add trailing slash'),\n  /** item label */\n  label: PropTypes.string.description('Item label'),\n  /** link color */\n  color: PropTypes.string.description('Link color'),\n};\n\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props as ValidationMap<unknown>;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCjB;AAlCN,OAAOA,YAAW;AAClB,SAAS,WAAW,UAAU,oCAAwD;AAEtF,SAAS,wBAAwB;AAEjC,SAAS,YAAY,0BAA0B;AAE/C,MAAM,mBAAmB,CAACC,WAAmC;AAC3D,QAAM,oBAAoB,6BAA8DA,QAAO,gBAAgB;AAC/G,QAAM,EAAE,IAAI,QAAQ,MAAM,SAAS,WAAW,QAAQ,SAAS,eAAe,OAAO,YAAY,OAAO,GAAG,KAAK,IAC9G;AAEF,QAAM,cAAcD,OAAM,QAAQ,MAAM;AACtC,QAAI,QAAQ;AACV,aAAO,OAAO,WAAW,SAAS;AAAA,IACpC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,QAAS;AACb,cAAQ,CAAC;AAAA,IACX;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,SAAQ;AAAA,UACR,WAAW;AAAA,UACX;AAAA,UACA,SAAS;AAAA,UACT,UAAU,UAAU,KAAK;AAAA,UACzB;AAAA,UACA,WAAW,CAAC,MAA2B,UAAU,GAAG,cAAc,IAAI,aAAa;AAAA,UACnF;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,IAAI,UAAU,MAAM,CAAC,KAAK,QAAQ,CAAC,EAChC,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA;AAAA,EAEnB,QAAQ,UAAU,KAAK,YAAY,aAAa;AAAA;AAAA,EAEhD,MAAM,UAAU,OAAO,YAAY,WAAW;AAAA;AAAA,EAE9C,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,qBAAqB;AAAA;AAAA,EAEzD,eAAe,UAAU,KAAK,YAAY,oBAAoB;AAAA;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,OAAO,UAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
+  "names": ["React", "props"]
 }

package/dist/esm/hooks/useKeyboardNavigation.js

@@ -1,23 +1,29 @@
 import * as React from "react";
 import { useRef, useCallback } from "react";
-const useKeyboardNavigation = () => {
+const useKeyboardNavigation = ({ isTitle }) => {
   const componentsRef = useRef([]);
   const addRef = useCallback((ref) => {
     if (ref && !componentsRef.current.includes(ref)) {
       componentsRef.current.push(ref);
     }
   }, []);
-  const onKeyDown = useCallback((e, componentRefIndex, callback) => {
-    if (e.key === "ArrowDown" && componentsRef.current[componentRefIndex + 1]) {
-      componentsRef.current[componentRefIndex + 1].focus();
-      e.preventDefault();
-    } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
-      componentsRef.current[componentRefIndex - 1].focus();
-      e.preventDefault();
-    } else if (e.key === "Enter" || e.ctrlKey && e.altKey && e.code === "Space") {
-      callback();
-    }
-  }, []);
+  const onKeyDown = useCallback(
+    (e, componentRefIndex, callback) => {
+      if (e.key === "ArrowDown" && componentsRef.current[componentRefIndex + 1]) {
+        if (isTitle && componentRefIndex + 1 === componentsRef.current.length - 1) {
+          return;
+        }
+        componentsRef.current[componentRefIndex + 1].focus();
+        e.preventDefault();
+      } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
+        componentsRef.current[componentRefIndex - 1].focus();
+        e.preventDefault();
+      } else if (e.key === "Enter" || e.ctrlKey && e.altKey && e.code === "Space") {
+        callback(e);
+      }
+    },
+    [isTitle]
+  );
   return [addRef, onKeyDown];
 };
 export {

package/dist/esm/hooks/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useRef, useCallback } from 'react';\n\nexport const useKeyboardNavigation = () => {\n  const componentsRef = useRef<HTMLAnchorElement[]>([]);\n\n  const addRef = useCallback((ref: HTMLAnchorElement) => {\n    if (ref && !componentsRef.current.includes(ref)) {\n      componentsRef.current.push(ref);\n    }\n  }, []);\n\n  const onKeyDown = useCallback((e: React.KeyboardEvent, componentRefIndex: number, callback: () => void) => {\n    if (e.key === 'ArrowDown' && componentsRef.current[componentRefIndex + 1]) {\n      componentsRef.current[componentRefIndex + 1].focus();\n      e.preventDefault();\n    } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {\n      componentsRef.current[componentRefIndex - 1].focus();\n      e.preventDefault();\n    } else if (e.key === 'Enter' || (e.ctrlKey && e.altKey && e.code === 'Space')) {\n      callback();\n    }\n  }, []);\n\n  return [addRef, onKeyDown];\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,mBAAmB;AAE7B,MAAM,wBAAwB,MAAM;AACzC,QAAM,gBAAgB,OAA4B,CAAC,CAAC;AAEpD,QAAM,SAAS,YAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,cAAc,QAAQ,SAAS,GAAG,GAAG;AAC/C,oBAAc,QAAQ,KAAK,GAAG;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,CAAC,GAAwB,mBAA2B,aAAyB;AACzG,QAAI,EAAE,QAAQ,eAAe,cAAc,QAAQ,oBAAoB,CAAC,GAAG;AACzE,oBAAc,QAAQ,oBAAoB,CAAC,EAAE,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,oBAAc,QAAQ,oBAAoB,CAAC,EAAE,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,WAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,SAAU;AAC7E,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,QAAQ,SAAS;AAC3B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-params */\nimport type React from 'react';\nimport { useRef, useCallback } from 'react';\n\nexport const useKeyboardNavigation = ({ isTitle }: { isTitle: boolean }) => {\n  const componentsRef = useRef<HTMLAnchorElement[]>([]);\n\n  const addRef = useCallback((ref: HTMLAnchorElement) => {\n    if (ref && !componentsRef.current.includes(ref)) {\n      componentsRef.current.push(ref);\n    }\n  }, []);\n\n  const onKeyDown = useCallback(\n    (\n      e: React.KeyboardEvent,\n      componentRefIndex: number,\n      callback: (e: React.MouseEvent | React.KeyboardEvent) => void,\n    ) => {\n      if (e.key === 'ArrowDown' && componentsRef.current[componentRefIndex + 1]) {\n        if (isTitle && componentRefIndex + 1 === componentsRef.current.length - 1) {\n          // If the 'isTitle' flag is set to true, the last link is not an interactive link so we do not focus it\n          return;\n        }\n        componentsRef.current[componentRefIndex + 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {\n        componentsRef.current[componentRefIndex - 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'Enter' || (e.ctrlKey && e.altKey && e.code === 'Space')) {\n        callback(e);\n      }\n    },\n    [isTitle],\n  );\n\n  return [addRef, onKeyDown];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,QAAQ,mBAAmB;AAE7B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,MAA4B;AAC1E,QAAM,gBAAgB,OAA4B,CAAC,CAAC;AAEpD,QAAM,SAAS,YAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,cAAc,QAAQ,SAAS,GAAG,GAAG;AAC/C,oBAAc,QAAQ,KAAK,GAAG;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY;AAAA,IAChB,CACE,GACA,mBACA,aACG;AACH,UAAI,EAAE,QAAQ,eAAe,cAAc,QAAQ,oBAAoB,CAAC,GAAG;AACzE,YAAI,WAAW,oBAAoB,MAAM,cAAc,QAAQ,SAAS,GAAG;AAEzE;AAAA,QACF;AACA,sBAAc,QAAQ,oBAAoB,CAAC,EAAE,MAAM;AACnD,UAAE,eAAe;AAAA,MACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,sBAAc,QAAQ,oBAAoB,CAAC,EAAE,MAAM;AACnD,UAAE,eAAe;AAAA,MACnB,WAAW,EAAE,QAAQ,WAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,SAAU;AAC7E,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,CAAC,QAAQ,SAAS;AAC3B;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb.js';\ntype SafeComponentsT = (typeof htmlElements)[number];\n\ntype SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';\n\nexport const defaultProps: DSBreadcrumbT.DefaultProps = {\n  containerProps: {},\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n};\n\nexport const defaultItemProps: DSBreadcrumbItemT.DefaultProps = {\n  active: false,\n  as: 'a',\n  onKeyDown: () => null,\n  onClick: () => null,\n  label: '',\n  childIndex: -1,\n};\n\ndeclare namespace DSBreadcrumbT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    as: SafeComponentsT;\n    label: string;\n    isTitle: boolean;\n    trailingSlash: boolean;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n}\n\ndeclare namespace DSBreadcrumbItemT {\n  export interface DefaultProps {\n    active: boolean;\n    as: SafeItemComponentT;\n    onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: () => void) => void;\n    onClick: () => void;\n    label: string;\n    childIndex: number;\n  }\n\n  export interface OptionalProps {\n    addRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    color?: string;\n    href?: string;\n    isTitle?: boolean;\n    trailingSlash?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb.js';\ntype SafeComponentsT = (typeof htmlElements)[number];\n\ntype SafeItemComponentT = 'a' | 'button';\n\nexport const defaultProps: DSBreadcrumbT.DefaultProps = {\n  containerProps: {},\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n};\n\nexport const defaultItemProps: DSBreadcrumbItemT.DefaultProps = {\n  active: false,\n  as: 'a',\n  onKeyDown: () => null,\n  onClick: () => null,\n  label: '',\n  childIndex: -1,\n};\n\ndeclare namespace DSBreadcrumbT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    as: SafeComponentsT;\n    label: string;\n    isTitle: boolean;\n    trailingSlash: boolean;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n}\n\ndeclare namespace DSBreadcrumbItemT {\n  export interface DefaultProps {\n    active: boolean;\n    as: SafeItemComponentT;\n    onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: (e: React.MouseEvent) => void) => void;\n    onClick: (e: React.MouseEvent) => void;\n    label: string;\n    childIndex: number;\n  }\n\n  export interface OptionalProps {\n    addRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    color?: string;\n    href?: string;\n    isTitle?: boolean;\n    trailingSlash?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACOhB,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB;AAEO,MAAM,mBAAmD;AAAA,EAC9D,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,YAAY;AACd;",
   "names": []
 }

package/dist/esm/styles.js

@@ -61,13 +61,20 @@ const StyledLink = styled(DSTypography)`
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   color: ${({ theme, active, color = "", isTitle }) => handleColor(theme, !!active, color, !!isTitle)};
   &:hover {
-    color: ${({ theme, color }) => color || theme.colors.brand[800]};
-    cursor: pointer;
-    ${({ theme, color }) => `-webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]}`};
+    ${({ theme, color, isTitle }) => isTitle ? `
+          color: ${theme.colors.neutral[700]};
+          cursor: default;` : `
+          color: ${color || theme.colors.brand[800]};
+          cursor: pointer;
+          -webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]};
+    `}
   }
   &:focus {
-    ${({ theme }) => `border: 2px solid ${theme.colors.brand[700]};`}
-    border-radius: 2px;
+    ${({ theme, isTitle }) => isTitle ? `
+         color: ${theme.colors.neutral[700]};` : `
+        border: 2px solid ${theme.colors.brand[700]};
+        border-radius: 2px;
+    `}
   }
 `;
 export {

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n  if (isActive) return theme.colors.neutral[800];\n  if (color) return color;\n  if (isTitle) return theme.colors.neutral[700];\n  return theme.colors.brand[600];\n};\n\nconst StyledList = styled.ol`\n  width: 100%;\n  list-style: none;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  li:first-child * {\n    margin-left: 0;\n  }\n`;\n\nconst StyledCrumbWrapper = styled.li<Partial<DSBreadcrumbItemT.Props>>`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 20;\n  transition: flex-shrink 0.1s cubic-bezier(0.64, 0, 0.35, 1);\n  min-height: 1.231rem;\n  min-width: 10px;\n  &:focus-within {\n    flex-shrink: 0;\n  }\n  &:hover {\n    flex-shrink: 0;\n  }\n  ${({ theme, isTitle, trailingSlash }) =>\n    isTitle || !trailingSlash\n      ? `&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `\n      : `&:after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `}\n`;\n\nconst StyledContainer = styled.nav`\n  display: flex;\n  align-items: center;\n  padding: 0;\n`;\n\nconst StyledLink = styled(DSTypography)<Partial<DSBreadcrumbItemT.Props>>`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-decoration: none;\n  outline: none;\n  margin: 0 2px;\n  border: 2px solid transparent;\n  -webkit-text-stroke: 0.4px transparent;\n  line-height: 1.5385rem;\n  background: transparent;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme, active, color = '', isTitle }) => handleColor(theme, !!active, color, !!isTitle)};\n  &:hover {\n    color: ${({ theme, color }) => color || theme.colors.brand[800]};\n    cursor: pointer;\n    ${({ theme, color }) => `-webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]}`};\n  }\n  &:focus {\n    ${({ theme }) => `border: 2px solid ${theme.colors.brand[700]};`}\n    border-radius: 2px;\n  }\n`;\n\nexport { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAG7B,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,MAAI,MAAO,QAAO;AAClB,MAAI,QAAS,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC5C,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B;AAEA,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa9B,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,MAG9B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,GAEnC;AAAA;AAGH,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,aAAa,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAWrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA,WAC9C,CAAC,EAAE,OAAO,QAAQ,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,CAAC;AAAA;AAAA,aAExF,CAAC,EAAE,OAAO,MAAM,MAAM,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,MAE7D,CAAC,EAAE,OAAO,MAAM,MAAM,8BAA8B,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,MAGtF,CAAC,EAAE,MAAM,MAAM,qBAAqB,MAAM,OAAO,MAAM,GAAG,CAAC,GAAG;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n  if (isActive) return theme.colors.neutral[800];\n  if (color) return color;\n  if (isTitle) return theme.colors.neutral[700];\n  return theme.colors.brand[600];\n};\n\nconst StyledList = styled.ol`\n  width: 100%;\n  list-style: none;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  li:first-child * {\n    margin-left: 0;\n  }\n`;\n\nconst StyledCrumbWrapper = styled.li<Partial<DSBreadcrumbItemT.Props>>`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 20;\n  transition: flex-shrink 0.1s cubic-bezier(0.64, 0, 0.35, 1);\n  min-height: 1.231rem;\n  min-width: 10px;\n  &:focus-within {\n    flex-shrink: 0;\n  }\n  &:hover {\n    flex-shrink: 0;\n  }\n  ${({ theme, isTitle, trailingSlash }) =>\n    isTitle || !trailingSlash\n      ? `&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `\n      : `&:after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `}\n`;\n\nconst StyledContainer = styled.nav`\n  display: flex;\n  align-items: center;\n  padding: 0;\n`;\n\nconst StyledLink = styled(DSTypography)<Partial<DSBreadcrumbItemT.Props>>`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-decoration: none;\n  outline: none;\n  margin: 0 2px;\n  border: 2px solid transparent;\n  -webkit-text-stroke: 0.4px transparent;\n  line-height: 1.5385rem;\n  background: transparent;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme, active, color = '', isTitle }) => handleColor(theme, !!active, color, !!isTitle)};\n  &:hover {\n    ${({ theme, color, isTitle }) =>\n      isTitle\n        ? `\n          color: ${theme.colors.neutral[700]};\n          cursor: default;`\n        : `\n          color: ${color || theme.colors.brand[800]};\n          cursor: pointer;\n          -webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]};\n    `}\n  }\n  &:focus {\n    ${({ theme, isTitle }) =>\n      isTitle\n        ? `\n         color: ${theme.colors.neutral[700]};`\n        : `\n        border: 2px solid ${theme.colors.brand[700]};\n        border-radius: 2px;\n    `}\n  }\n`;\n\nexport { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAG7B,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,MAAI,MAAO,QAAO;AAClB,MAAI,QAAS,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC5C,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B;AAEA,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa9B,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,MAG9B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,GAEnC;AAAA;AAGH,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,aAAa,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAWrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA,WAC9C,CAAC,EAAE,OAAO,QAAQ,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,CAAC;AAAA;AAAA,MAE/F,CAAC,EAAE,OAAO,OAAO,QAAQ,MACzB,UACI;AAAA,mBACS,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,8BAElC;AAAA,mBACS,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,uCAEZ,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,KAClE;AAAA;AAAA;AAAA,MAGC,CAAC,EAAE,OAAO,QAAQ,MAClB,UACI;AAAA,kBACQ,MAAM,OAAO,QAAQ,GAAG,CAAC,MACjC;AAAA,4BACkB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,KAE9C;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-breadcrumb-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-breadcrumb-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBreadcrumb, DSBreadcrumbItem } from '../index.js';\nimport type { DSBreadcrumbT, DSBreadcrumbItemT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBreadcrumbT.Props;\ntype ComponentPropsInternals = DSBreadcrumbT.InternalProps;\ntype ComponentPropsDefaultProps = DSBreadcrumbT.DefaultProps;\ntype ComponentPropsRequiredProps = DSBreadcrumbT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: [],\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBreadcrumb {...testExplicitDefinition} />\n    <DSBreadcrumb {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSBreadcrumb as=\"nav\" label=\"Breadcrumb\" isTitle={false} trailingSlash={true} containerProps={{}}>\n      <DSBreadcrumbItem href=\"/\" label=\"Home\" />\n      <DSBreadcrumbItem href=\"/home\" label=\"Home2\" />\n    </DSBreadcrumb>\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoErB,mBAEE,KAGA,YALF;AAnEF,SAAS,cAAc,wBAAwB;AAS/C,MAAM,oBAAiD;AAAA,EACrD,UAAU,CAAC;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,gBAAc,GAAG,wBAAwB;AAAA,EAC1C,oBAAC,gBAAc,GAAG,8BAA8B;AAAA,EAEhD,qBAAC,gBAAa,IAAG,OAAM,OAAM,cAAa,SAAS,OAAO,eAAe,MAAM,gBAAgB,CAAC,GAC9F;AAAA,wBAAC,oBAAiB,MAAK,KAAI,OAAM,QAAO;AAAA,IACxC,oBAAC,oBAAiB,MAAK,SAAQ,OAAM,SAAQ;AAAA,KAC/C;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBreadcrumb, DSBreadcrumbItem } from '../index.js';\nimport type { DSBreadcrumbT, DSBreadcrumbItemT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBreadcrumbT.Props;\ntype ComponentPropsInternals = DSBreadcrumbT.InternalProps;\ntype ComponentPropsDefaultProps = DSBreadcrumbT.DefaultProps;\ntype ComponentPropsRequiredProps = DSBreadcrumbT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: [],\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBreadcrumb {...testExplicitDefinition} />\n    <DSBreadcrumb {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSBreadcrumb as=\"nav\" label=\"Breadcrumb\" isTitle={false} trailingSlash containerProps={{}}>\n      <DSBreadcrumbItem href=\"/\" label=\"Home\" />\n      <DSBreadcrumbItem href=\"/home\" label=\"Home2\" />\n    </DSBreadcrumb>\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoErB,mBAEE,KAGA,YALF;AAnEF,SAAS,cAAc,wBAAwB;AAS/C,MAAM,oBAAiD;AAAA,EACrD,UAAU,CAAC;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,gBAAc,GAAG,wBAAwB;AAAA,EAC1C,oBAAC,gBAAc,GAAG,8BAA8B;AAAA,EAEhD,qBAAC,gBAAa,IAAG,OAAM,OAAM,cAAa,SAAS,OAAO,eAAa,MAAC,gBAAgB,CAAC,GACvF;AAAA,wBAAC,oBAAiB,MAAK,KAAI,OAAM,QAAO;AAAA,IACxC,oBAAC,oBAAiB,MAAK,SAAQ,OAAM,SAAQ;AAAA,KAC/C;AAAA,GACF;",
   "names": []
 }

package/dist/types/DSBreadcrumb.d.ts

@@ -1,5 +1,5 @@
 import type { DSBreadcrumbT } from './react-desc-prop-types.js';
-declare const htmlElements: readonly ["nav", "div", "header", "footer", "main"];
+declare const htmlElements: readonly ["nav", "div"];
 declare const DSBreadcrumb: {
     (props: DSBreadcrumbT.Props): import("react/jsx-runtime.js").JSX.Element;
     Item: {

package/dist/types/hooks/useKeyboardNavigation.d.ts

@@ -1,2 +1,4 @@
 import type React from 'react';
-export declare const useKeyboardNavigation: () => (((ref: HTMLAnchorElement) => void) | ((e: React.KeyboardEvent, componentRefIndex: number, callback: () => void) => void))[];
+export declare const useKeyboardNavigation: ({ isTitle }: {
+    isTitle: boolean;
+}) => (((ref: HTMLAnchorElement) => void) | ((e: React.KeyboardEvent, componentRefIndex: number, callback: (e: React.MouseEvent | React.KeyboardEvent) => void) => void))[];

package/dist/types/react-desc-prop-types.d.ts

@@ -2,7 +2,7 @@ import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers
 import type React from 'react';
 import type { htmlElements } from './DSBreadcrumb.js';
 type SafeComponentsT = (typeof htmlElements)[number];
-type SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';
+type SafeItemComponentT = 'a' | 'button';
 export declare const defaultProps: DSBreadcrumbT.DefaultProps;
 export declare const defaultItemProps: DSBreadcrumbItemT.DefaultProps;
 declare namespace DSBreadcrumbT {
@@ -25,8 +25,8 @@ declare namespace DSBreadcrumbItemT {
     interface DefaultProps {
         active: boolean;
         as: SafeItemComponentT;
-        onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: () => void) => void;
-        onClick: () => void;
+        onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: (e: React.MouseEvent) => void) => void;
+        onClick: (e: React.MouseEvent) => void;
         label: string;
         childIndex: number;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-breadcrumb",
-  "version": "3.47.1",
+  "version": "3.48.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Breadcrumb",
   "files": [
@@ -52,15 +52,15 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "3.47.1",
-    "@elliemae/ds-typography": "3.47.1",
-    "@elliemae/ds-system": "3.47.1"
+    "@elliemae/ds-props-helpers": "3.48.1",
+    "@elliemae/ds-system": "3.48.1",
+    "@elliemae/ds-typography": "3.48.1"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.10.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.47.1"
+    "@elliemae/ds-monorepo-devops": "3.48.1"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.10.0",